diff --git a/.babelrc.js b/.babelrc.js
index cb85c9eb2b75..252bdc33b896 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -31,6 +31,7 @@ module.exports = {
       },
     ],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
@@ -43,18 +44,11 @@ module.exports = {
   overrides: [
     {
       test: './examples/vue-kitchen-sink',
-      presets: ['babel-preset-vue'],
+      presets: ['@vue/babel-preset-jsx'],
       env: {
         test: withTests,
       },
     },
-    {
-      test: './examples/rax-kitchen-sink',
-      presets: [
-        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
-        ['babel-preset-rax', { development: process.env.BABEL_ENV === 'development' }],
-      ],
-    },
     {
       test: './lib',
       presets: [
@@ -75,11 +69,6 @@ module.exports = {
         test: withTests,
       },
     },
-    {
-      test: './app/react-native',
-      presets: ['module:metro-react-native-babel-preset'],
-      plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]],
-    },
     {
       test: [
         './lib/node-logger',
@@ -104,6 +93,10 @@ module.exports = {
       plugins: [
         'emotion',
         'babel-plugin-macros',
+        '@babel/plugin-transform-arrow-functions',
+        '@babel/plugin-transform-shorthand-properties',
+        '@babel/plugin-transform-block-scoping',
+        '@babel/plugin-transform-destructuring',
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-proposal-export-default-from',
diff --git a/.ci/danger/dangerfile.ts b/.ci/danger/dangerfile.ts
index 2a1223028e31..e7d267591d89 100644
--- a/.ci/danger/dangerfile.ts
+++ b/.ci/danger/dangerfile.ts
@@ -3,7 +3,9 @@ import { execSync } from 'child_process';
 
 execSync('npm install lodash');
 
-const { flatten, intersection, isEmpty } = require('lodash');
+const flatten = require('lodash/flatten');
+const intersection = require('lodash/intersection');
+const isEmpty = require('lodash/isEmpty');
 
 const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 211098ee8415..3658e56fe2fe 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -4,33 +4,29 @@ aliases:
   - &defaults
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:10
+      - image: circleci/node:10-browsers
 
 jobs:
-  build:
+  install:
     <<: *defaults
     steps:
       - checkout
       - restore_cache:
           name: Restore core dependencies cache
           keys:
-            - core-dependencies-v4-{{ checksum "yarn.lock" }}
+            - core-dependencies-v5-{{ checksum "yarn.lock" }}
+            - core-dependencies-v5-
       - run:
           name: Install dependencies
           command: yarn install
       - run:
           name: Check that yarn.lock is not corrupted
           command: yarn repo-dirty-check
-      - run:
-          name: Bootstrap
-          command: yarn bootstrap --core
       - save_cache:
           name: Cache core dependencies
-          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
+          key: core-dependencies-v5-{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache
             - node_modules
-            - /root/.cache
       - persist_to_workspace:
           root: .
           paths:
@@ -40,67 +36,34 @@ jobs:
             - dev-kits
             - app
             - lib
-  chromatic:
+  build:
     <<: *defaults
     steps:
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: Run chromatic on the pre-built official example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
-      - run:
-          name: Run chromatic on the pre-built angular example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
-      - run:
-          name: Run chromatic on the pre-built cra-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
-      - run:
-          name: Run chromatic on the pre-built cra-react15 example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
-      - run:
-          name: Run chromatic on the pre-built cra-ts-essentials example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
-      - run:
-          name: Run chromatic on the pre-built cra-ts-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
-      - run:
-          name: Run chromatic on the pre-built dev-kits example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
-      - run:
-          name: Run chromatic on the pre-built ember-cli example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
-      - run:
-          name: Run chromatic on the pre-built html-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
-      - run:
-          name: Run chromatic on the pre-built marko-cli example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
-      - run:
-          name: Run chromatic on the pre-built mithril-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
-      - run:
-          name: Run chromatic on the pre-built polymer-cli example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/polymer-cli" --app-code="o6jl9kmh0qd"
-      - run:
-          name: Run chromatic on the pre-built preact-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
-      - run:
-          name: Run chromatic on the pre-built rax-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
-      - run:
-          name: Run chromatic on the pre-built riot-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
-      - run:
-          name: Run chromatic on the pre-built svelte-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
-      - run:
-          name: Run chromatic on the pre-built vue-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
+          name: Bootstrap
+          command: yarn bootstrap --core
+      - persist_to_workspace:
+          root: .
+          paths:
+            - examples
+            - addons
+            - dev-kits
+            - app
+            - lib
+  chromatic:
+    <<: *defaults
+    parallelism: 11
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
       - run:
-          name: Run chromatic on the pre-built web-components-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
-
+          name: examples
+          command: |
+            yarn run-chromatics
   packtracker:
     <<: *defaults
     steps:
@@ -114,7 +77,7 @@ jobs:
             yarn packtracker
   examples:
     <<: *defaults
-    parallelism: 4
+    parallelism: 11
     steps:
       - checkout
       - attach_workspace:
@@ -127,26 +90,89 @@ jobs:
           root: .
           paths:
             - built-storybooks
-  e2e:
+  publish:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: running local registry
+          command: yarn local-registry --publish
+      - persist_to_workspace:
+          root: .
+          paths:
+            - .verdaccio-cache
+  examples-v2:
+    docker:
+      - image: cypress/included:4.7.0
+        environment:
+          TERM: xterm
     working_directory: /tmp/storybook
+    parallelism: 10
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: set registry
+          command: yarn config set registry http://localhost:6000/
+      - run:
+          name: test local registry
+          command: yarn info @storybook/core
+      - run:
+          name: run e2e tests
+          command: yarn test:e2e-framework
+      - store_artifacts:
+          path: /tmp/storybook/cypress
+          destination: cypress
+  examples-v2-yarn-2:
     docker:
-      - image: cypress/base:8
+      - image: cypress/included:4.7.0
         environment:
           TERM: xterm
+    working_directory: /tmp/storybook
+    # parallelism: 10
     steps:
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: install cypress
-          command: yarn cypress install
-      - save_cache:
-          name: Cache core dependencies
-          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache
-            - node_modules
-            - /root/.cache
+          name: running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: set registry
+          command: yarn config set registry http://localhost:6000/
+      - run:
+          name: test local registry
+          command: yarn info @storybook/core
+      - run:
+          name: run e2e tests
+          command: yarn test:e2e-framework yarn2Cra
+      - store_artifacts:
+          path: /tmp/storybook/cypress
+          destination: cypress
+  e2e:
+    working_directory: /tmp/storybook
+    docker:
+      - image: cypress/included:4.7.0
+        environment:
+          TERM: xterm
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
       - run:
           name: running example
           command: yarn serve-storybooks
@@ -156,7 +182,7 @@ jobs:
           command: yarn await-serve-storybooks
       - run:
           name: cypress run
-          command: yarn cypress run
+          command: yarn test:e2e
 
   smoke-tests:
     <<: *defaults
@@ -194,11 +220,6 @@ jobs:
           command: |
             cd examples/ember-cli
             yarn storybook --smoke-test --quiet
-      - run:
-          name: Run polymer-cli (smoke test)
-          command: |
-            cd examples/polymer-cli
-            yarn storybook --smoke-test --quiet
       - run:
           name: Run marko-cli (smoke test)
           command: |
@@ -229,24 +250,6 @@ jobs:
           command: |
             cd examples/cra-react15
             yarn storybook --smoke-test --quiet
-  native-smoke-tests:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run:
-          name: Bootstrap
-          command: yarn bootstrap --core
-      - run:
-          name: Run React-Native-App example
-          command: |
-            cd examples-native/crna-kitchen-sink
-            yarn storybook --smoke-test
-      - run:
-          name: Publish React-Native-App example
-          command: |
-            ./scripts/crna-publish.js
   frontpage:
     <<: *defaults
     steps:
@@ -254,7 +257,7 @@ jobs:
       - restore_cache:
           name: Restore core dependencies cache
           keys:
-            - core-dependencies-v4-{{ checksum "yarn.lock" }}
+            - core-dependencies-v5-{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn bootstrap --install
@@ -265,10 +268,6 @@ jobs:
     <<: *defaults
     steps:
       - checkout
-      - restore_cache:
-          name: Restore docs dependencies cache
-          keys:
-            - docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
       - run:
           name: Install dependencies
           command: |
@@ -279,11 +278,6 @@ jobs:
           command: |
             cd docs
             yarn build
-      - save_cache:
-          name: Cache docs dependencies
-          key: docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
-          paths:
-            - ~/.cache
   lint:
     <<: *defaults
     steps:
@@ -315,10 +309,14 @@ jobs:
       - run:
           name: Upload coverage
           command: yarn coverage
+
 workflows:
   test:
     jobs:
-      - build
+      - install
+      - build:
+          requires:
+            - install
       - lint:
           requires:
             - build
@@ -334,9 +332,6 @@ workflows:
       - packtracker:
           requires:
             - build
-      - native-smoke-tests:
-          requires:
-            - build
       - test:
           requires:
             - build
@@ -346,6 +341,15 @@ workflows:
       - chromatic:
           requires:
             - examples
+      - publish:
+          requires:
+            - build
+      - examples-v2:
+          requires:
+            - publish
+      - examples-v2-yarn-2:
+          requires:
+            - publish
   deploy:
     jobs:
       - docs
diff --git a/.eslintignore b/.eslintignore
index ad542e107759..a2f20ebea5a3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -18,7 +18,9 @@ examples/cra-ts-kitchen-sink/*.json
 examples/cra-ts-kitchen-sink/public/*
 examples/cra-ts-essentials/*.json
 examples/cra-ts-essentials/public/*
-
+examples/rax-kitchen-sink/src/document/*
+ember-output
+.yarn
 !.remarkrc.js
 !.babelrc.js
 !.eslintrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
index 3c53e6faad79..99d83c78c2f6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,45 +1,12 @@
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
-  rules: {
-    'import/extensions': [
-      'error',
-      'never',
-      { ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
-    ],
-    'import/no-unresolved': ['error', { ignore: ['@storybook'] }],
-    'react/state-in-constructor': 'off',
-    'react/static-property-placement': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    'react/jsx-fragments': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/no-object-literal-type-assertion': 'off',
-    'react/sort-comp': [
-      'error',
-      {
-        order: [
-          'staticLifecycle',
-          'static-methods',
-          'instance-variables',
-          'lifecycle',
-          '/^on.+$/',
-          '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
-          'instance-methods',
-          'instance-variables',
-          'everything-else',
-          'render',
-        ],
-        groups: {
-          staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
-        },
-      },
-    ],
-    'max-classes-per-file': 'off',
-  },
   overrides: [
     {
       files: [
         '**/__tests__/**',
+        'scripts/**',
+        '**/__testfixtures__/**',
         '**/*.test.*',
         '**/*.stories.*',
         '**/storyshots/**/stories/**',
@@ -51,7 +18,16 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: ['**/__testfixtures__/**'],
+      rules: {
+        'react/forbid-prop-types': 'off',
+        'react/no-unused-prop-types': 'off',
+        'react/require-default-props': 'off',
+      },
+    },
     { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
+    { files: 'cypress/**', rules: { 'jest/expect-expect': 'off' } },
     {
       files: ['**/*.stories.*'],
       rules: {
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000000..5ea62bf2933c
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+.yarn/releases/yarn-*.js linguist-generated=true
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index c23f1075713c..79a552730113 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -4,7 +4,6 @@
 /addons/a11y/ @jbovenschen @codebyalex
 /addons/actions/ @rhalff
 /addons/backgrounds/ @ndelangen
-/addons/centered/ @kazupon
 /addons/events/ @z4o4z @ndelangen
 /addons/graphql/ @mnmtanish
 /addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael
@@ -18,9 +17,7 @@
 /addons/viewport/ @saponifi3d
 
 /app/angular/ @alterx @igor-dv
-/app/polymer/ @ndelangen @naipath @leonrodenburg
 /app/react/ @xavcz @shilman @thomasbertet
-/app/react-native/ @rmevans9 @Gongreg @tmeasday
 /app/vue/ @thomasbertet @kazupon
 /app/svelte/ @plumpNation
 
@@ -30,7 +27,6 @@
 /examples/cra-kitchen-sink/ @ndelangen @UsulPro
 /examples/cra-ts-kitchen-sink/ @mucsi96
 /examples/official-storybook/ @UsulPro
-/examples/polymer-cli/ @naipath @igor-dv
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
 /examples/svelte-kitchen-sink/ @plumpNation
 
diff --git a/.github/autolabeler.yml b/.github/autolabeler.yml
index 4a4e5cf97216..79cae78e118e 100644
--- a/.github/autolabeler.yml
+++ b/.github/autolabeler.yml
@@ -1,7 +1,6 @@
 'addon: a11y': ["addons/a11y/**"]
 'addon: actions': ["addons/actions/**"]
 'addon: backgrounds': ["addons/backgrounds/**"]
-'addon: centered': ["addons/centered/**"]
 'addon: events ': ["addons/events/**"]
 'addon: graphql ': ["addons/graphql/**"]
 'addon: info': ["addons/info/**"]
@@ -13,9 +12,8 @@
 'addon: storyshots': ["addons/storyshots/**"]
 'addon: viewport': ["addons/viewport/**"]
 'app: angular': ["app/angular/**"]
-'app: polymer ': ["app/polymer/**"]
 'app: preact': ["app/preact/**"]
-'app: react-native': ["app/react-native/**"]
+'app: rax': ["app/rax/**"]
 'app: react': ["app/react/**"]
 'app: vue': ["app/vue/**"]
 'app: svelte': ["app/svelte/**"]
diff --git a/.github/automention.yml b/.github/automention.yml
index 4e3688c40d4e..4ca3b6a6256f 100644
--- a/.github/automention.yml
+++ b/.github/automention.yml
@@ -2,18 +2,15 @@
 'app: ember': ['gabrielcsapo']
 'app: html': ['Hypnosphi']
 'app: marko': ['nm123github']
-'app: polymer': ['stijnkoopal', 'ndelangen']
 'app: preact': ['BartWaardenburg']
-'app: react-native': ['benoitdion', 'gongreg']
-'app: react-native-server': ['benoitdion', 'gongreg']
-'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
+'app: rax': ['SoloJiang']
+'app: svelte': ['rixo', 'plumpNation']
 'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka']
 'app: web-components': ['daKmoR']
 'api: addons': ['ndelangen']
 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
-'addon: contexts': ['leoyli']
-'addon: docs': ['shilman', 'elevatebart', 'jeroenreumkens']
-'addon: info': ['shilman', 'elevatebart']
+'addon: toolbars': ['shilman']
+'addon: docs': ['shilman', 'patricklafrance']
 'addon: knobs': ['leoyli', 'Armanio']
 'addon: storysource': ['igor-dv', 'libetl']
 typescript: ['kroeder', 'gaetanmaisse', 'ndelangen', 'emilio-martinez']
diff --git a/.github/workflows/tests-cli.yml b/.github/workflows/tests-cli.yml
index db599cf0f080..3b5a154a4c6f 100644
--- a/.github/workflows/tests-cli.yml
+++ b/.github/workflows/tests-cli.yml
@@ -1,6 +1,6 @@
 name: CLI tests
 
-on: 
+on:
   push
   # push:
 # disabled for now:
@@ -17,22 +17,44 @@ jobs:
     - uses: actions/setup-node@v1
       with:
         node-version: '10.x'
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
     - name: Cache node modules
       uses: actions/cache@v1
       with:
         path: node_modules
-        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+        key: build-v2-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          ${{ runner.OS }}-build-${{ env.cache-name }}-
-          ${{ runner.OS }}-build-
-          ${{ runner.OS }}-
+          build-v2-${{ env.cache-name }}-
+          build-v2-
     - name: install, bootstrap
       run: |
         yarn bootstrap --core
     - name: cli
       run: |
         yarn test --cli
+  cli-yarn-2:
+    name: CLI Fixtures with Yarn 2
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v2
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: node_modules
+        key: build-v2-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          build-v2-${{ env.cache-name }}-
+          build-v2-
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: cli with Yarn 2
+      run: |
+        cd lib/cli
+        yarn test-yarn-2
   latest-cra:
     name: Latest CRA
     runs-on: ubuntu-latest
@@ -40,10 +62,10 @@ jobs:
     - uses: actions/setup-node@v1
       with:
         node-version: '10.x'
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
     - name: install, bootstrap
       run: |
         yarn bootstrap --core
     - name: latest-cra
       run: |
-        yarn test-latest-cra
\ No newline at end of file
+        yarn test-latest-cra
diff --git a/.github/workflows/tests-puppeteer.yml b/.github/workflows/tests-puppeteer.yml
deleted file mode 100644
index e7590c6e644d..000000000000
--- a/.github/workflows/tests-puppeteer.yml
+++ /dev/null
@@ -1,32 +0,0 @@
-name: Puppeteer & A11y tests
-
-on: [push]
-
-jobs:
-  build:
-
-    name: Puppeteer & A11y tests
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '10.x'
-    - uses: actions/checkout@v1
-    - name: Cache node modules
-      uses: actions/cache@v1
-      with:
-        path: node_modules
-        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-build-${{ env.cache-name }}-
-          ${{ runner.OS }}-build-
-          ${{ runner.OS }}-
-    - name: install, bootstrap
-      run: |
-        yarn bootstrap --core
-    - name: build storybook
-      run: |
-        yarn --cwd examples/official-storybook build-storybook
-    - name: test
-      run: |
-        yarn test --puppeteer
diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
index f3eb332e5d51..f32b2f80343b 100644
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@@ -4,23 +4,21 @@ on: [push]
 
 jobs:
   build:
-
-    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
-    runs-on: ${{ matrix.os }}
+    name: Core Unit Tests
+    runs-on: ubuntu-latest
     steps:
     - uses: actions/setup-node@v1
       with:
         node-version: '10.x'
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
     - name: Cache node modules
       uses: actions/cache@v1
       with:
         path: node_modules
-        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+        key: build-v2-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
-          ${{ runner.OS }}-build-${{ env.cache-name }}-
-          ${{ runner.OS }}-build-
-          ${{ runner.OS }}-
+          build-v2-${{ env.cache-name }}-
+          build-v2-
     - name: install, bootstrap
       run: |
         yarn bootstrap --core
diff --git a/.gitignore b/.gitignore
index ffe460ac8a41..834e9ba0455b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,15 +2,13 @@ node_modules
 *.log
 .idea
 *.iml
-.vscode/*
-!.vscode/launch.json
 *.sw*
 npm-shrinkwrap.json
 dist
+ts3.5
 .tern-port
 *.DS_Store
 .cache
-junit.xml
 coverage/
 *.lerna_backup
 build
@@ -26,12 +24,11 @@ integration/__image_snapshots__/__diff_output__
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
 lib/**/dll
-.expo/packager-info.json
-scripts/storage
-htpasswd
 /false
-storybook-out
 /addons/docs/common/config-*
 built-storybooks
 cypress/videos
 cypress/screenshots
+examples/ember-cli/ember-output
+.verdaccio-cache
+tsconfig.tsbuildinfo
diff --git a/.prettierrc b/.prettierrc
index 6c3f240ceef7..d033feea7ad5 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "bracketSpacing": true,
   "trailingComma": "es5",
-  "singleQuote": true
+  "singleQuote": true,
+  "arrowParens": "always"
 }
diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
deleted file mode 100644
index bd6ad004d7b4..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
+++ /dev/null
@@ -1,81 +0,0 @@
-package OpenSourceProjects_Storybook.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
-
-object OpenSourceProjects_Storybook_Bootstrap : BuildType({
-    uuid = "9f9177e7-9ec9-4e2e-aabb-d304fd667712"
-    id = "OpenSourceProjects_Storybook_Bootstrap"
-    name = "Bootstrap"
-
-    artifactRules = """
-        addons/*/dist/** => dist.zip/addons
-        addons/storyshots/*/dist/** => dist.zip/addons/storyshots
-        app/*/dist/** => dist.zip/app
-        dev-kits/*/dist/** => dist.zip/dev-kits
-        lib/*/dist/** => dist.zip/lib
-        lib/core/dll/** => dist.zip/lib/core/dll
-    """.trimIndent()
-
-    vcs {
-        root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
-    }
-
-    steps {
-        script {
-            name = "Bootstrap"
-            scriptContent = """
-                #!/bin/sh
-
-                set -e -x
-
-                yarn
-                yarn bootstrap --core
-            """.trimIndent()
-            dockerImage = "node:%docker.node.version%"
-        }
-    }
-
-    triggers {
-        vcs {
-            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
-            triggerRules = "-:comment=^TeamCity change:**"
-            branchFilter = """
-                +:pull/*
-                +:release/*
-                +:master
-                +:next
-                +:snyk-fix-*
-            """.trimIndent()
-            enabled = false
-        }
-        retryBuild {
-            delaySeconds = 60
-            enabled = false
-        }
-    }
-
-    features {
-        commitStatusPublisher {
-            publisher = github {
-                githubUrl = "https://api.github.com"
-                authType = personalToken {
-                    token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
-                }
-            }
-            param("github_oauth_user", "Hypnosphi")
-        }
-    }
-
-    requirements {
-        doesNotContain("env.OS", "Windows")
-    }
-
-    cleanup {
-        artifacts(days = 1)
-    }
-})
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1bda59b5-d08d-4fd8-b317-953e7d79d881.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1bda59b5-d08d-4fd8-b317-953e7d79d881.kts
deleted file mode 100644
index 6d597e5164e2..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1bda59b5-d08d-4fd8-b317-953e7d79d881.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '1bda59b5-d08d-4fd8-b317-953e7d79d881' (id = 'OpenSourceProjects_Storybook_Docs')
-accordingly, and delete the patch script.
-*/
-changeBuildType("1bda59b5-d08d-4fd8-b317-953e7d79d881") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6.kts
deleted file mode 100644
index 4b5795b0d563..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6' (id = 'OpenSourceProjects_Storybook_SmokeTests')
-accordingly, and delete the patch script.
-*/
-changeBuildType("1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/2b9c73e2-0a6e-47ca-95ae-729cac42be2b.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/2b9c73e2-0a6e-47ca-95ae-729cac42be2b.kts
deleted file mode 100644
index aef79086061a..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/2b9c73e2-0a6e-47ca-95ae-729cac42be2b.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '2b9c73e2-0a6e-47ca-95ae-729cac42be2b' (id = 'OpenSourceProjects_Storybook_Build_2')
-accordingly, and delete the patch script.
-*/
-changeBuildType("2b9c73e2-0a6e-47ca-95ae-729cac42be2b") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a737.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a737.kts
deleted file mode 100644
index 5b232f2b6803..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a737.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '42cfbb9a-f35b-4f96-afae-0b508927a737' (id = 'OpenSourceProjects_Storybook_Lint')
-accordingly, and delete the patch script.
-*/
-changeBuildType("42cfbb9a-f35b-4f96-afae-0b508927a737") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a738.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a738.kts
deleted file mode 100644
index 927328468594..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a738.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '42cfbb9a-f35b-4f96-afae-0b508927a738' (id = 'OpenSourceProjects_Storybook_Lint_Warnings')
-accordingly, and delete the patch script.
-*/
-changeBuildType("42cfbb9a-f35b-4f96-afae-0b508927a738") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular.kts
deleted file mode 100644
index a9c7f3490508..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular' (id = 'OpenSourceProjects_Storybook_Angular')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic.kts
deleted file mode 100644
index 8d0deb7df109..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic' (id = 'OpenSourceProjects_Storybook_Chromatic')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra.kts
deleted file mode 100644
index 4c072da0e310..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra' (id = 'OpenSourceProjects_Storybook_CRA')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15.kts
deleted file mode 100644
index 0ea4f527f639..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15' (id = 'OpenSourceProjects_Storybook_CRA_REACT15')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts.kts
deleted file mode 100644
index a508334eb457..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts' (id = 'OpenSourceProjects_Storybook_CRA_TS')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember.kts
deleted file mode 100644
index ab0514e623c5..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember' (id = 'OpenSourceProjects_Storybook_Ember')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html.kts
deleted file mode 100644
index 039eed95efe6..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html' (id = 'OpenSourceProjects_Storybook_HTML')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko.kts
deleted file mode 100644
index 754da521c8f3..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko' (id = 'OpenSourceProjects_Storybook_Marko')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril.kts
deleted file mode 100644
index bd0913a8a04d..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril' (id = 'OpenSourceProjects_Storybook_Mithril')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer.kts
deleted file mode 100644
index 7ed9e87651fe..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer' (id = 'OpenSourceProjects_Storybook_Polymer')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact.kts
deleted file mode 100644
index 7f169a3828fd..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact' (id = 'OpenSourceProjects_Storybook_Preact')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot.kts
deleted file mode 100644
index c484eca68e59..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot' (id = 'OpenSourceProjects_Storybook_Riot')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte.kts
deleted file mode 100644
index 221d31ccf7b1..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte' (id = 'OpenSourceProjects_Storybook_Svelte')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue.kts
deleted file mode 100644
index 9c9fc3530876..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue' (id = 'OpenSourceProjects_Storybook_Vue')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6.kts
deleted file mode 100644
index 1fce2cf575d8..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6' (id = 'OpenSourceProjects_Storybook_Examples')
-accordingly, and delete the patch script.
-*/
-changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667711.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667711.kts
deleted file mode 100644
index 7b41f2e260a0..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667711.kts
+++ /dev/null
@@ -1,22 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '9f9177e7-9ec9-4e2e-aabb-d304fd667711' (id = 'OpenSourceProjects_Storybook_Test')
-accordingly, and delete the patch script.
-*/
-changeBuildType("9f9177e7-9ec9-4e2e-aabb-d304fd667711") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-
-    params {
-        add {
-            param("docker.node.version", "10.13")
-        }
-    }
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667712.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667712.kts
deleted file mode 100644
index 6a63ab84d5c4..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667712.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = '9f9177e7-9ec9-4e2e-aabb-d304fd667712' (id = 'OpenSourceProjects_Storybook_Bootstrap')
-accordingly, and delete the patch script.
-*/
-changeBuildType("9f9177e7-9ec9-4e2e-aabb-d304fd667712") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/d4320bd8-6094-4dd6-9bed-e13d6f0d12e2.kts b/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/d4320bd8-6094-4dd6-9bed-e13d6f0d12e2.kts
deleted file mode 100644
index 7e2fb0801929..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/d4320bd8-6094-4dd6-9bed-e13d6f0d12e2.kts
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = 'd4320bd8-6094-4dd6-9bed-e13d6f0d12e2' (id = 'OpenSourceProjects_Storybook_CliTestLatestCra')
-accordingly, and delete the patch script.
-*/
-changeBuildType("d4320bd8-6094-4dd6-9bed-e13d6f0d12e2") {
-    check(paused == false) {
-        "Unexpected paused: '$paused'"
-    }
-    paused = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/patches/projects/69382d9b-7791-418a-9ff6-1c83b86ed6b5.kts b/.teamcity/OpenSourceProjects_Storybook/patches/projects/69382d9b-7791-418a-9ff6-1c83b86ed6b5.kts
deleted file mode 100644
index a357d89ba726..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/patches/projects/69382d9b-7791-418a-9ff6-1c83b86ed6b5.kts
+++ /dev/null
@@ -1,17 +0,0 @@
-package OpenSourceProjects_Storybook.patches.projects
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.Project
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the project with uuid = '69382d9b-7791-418a-9ff6-1c83b86ed6b5' (id = 'OpenSourceProjects_Storybook')
-accordingly, and delete the patch script.
-*/
-changeProject("69382d9b-7791-418a-9ff6-1c83b86ed6b5") {
-    check(archived == false) {
-        "Unexpected archived: '$archived'"
-    }
-    archived = true
-}
diff --git a/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster.kt b/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster.kt
deleted file mode 100644
index ee7951d8b573..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster.kt
+++ /dev/null
@@ -1,20 +0,0 @@
-package OpenSourceProjects_Storybook.vcsRoots
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
-
-object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster : GitVcsRoot({
-    uuid = "cec03c4b-d52c-42a0-8e9e-53bde85d6b33"
-    id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster"
-    name = "Main root"
-    url = "git@github.com:storybookjs/storybook.git"
-    branch = "refs/heads/next"
-    branchSpec = """
-        +:refs/(pull/*)/head
-        +:refs/heads/*
-    """.trimIndent()
-    authMethod = uploadedKey {
-        userName = "git"
-        uploadedKey = "Storybook bot"
-    }
-})
diff --git a/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1.kt b/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1.kt
deleted file mode 100644
index 7daa8d93aa1f..000000000000
--- a/.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1.kt
+++ /dev/null
@@ -1,16 +0,0 @@
-package OpenSourceProjects_Storybook.vcsRoots
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
-
-object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1 : GitVcsRoot({
-    uuid = "5cacf90a-381a-4c73-9aa3-57f6439b545e"
-    id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1"
-    name = "https://github.com/storybookjs/storybook#refs/heads/master (1)"
-    url = "git@github.com:storybookjs/storybook.git"
-    branch = "refs/heads/next"
-    authMethod = uploadedKey {
-        userName = "git"
-        uploadedKey = "Storybook bot"
-    }
-})
diff --git a/.teamcity/pom.xml b/.teamcity/pom.xml
new file mode 100644
index 000000000000..b98e212b6d2d
--- /dev/null
+++ b/.teamcity/pom.xml
@@ -0,0 +1,107 @@
+<?xml version="1.0"?>
+<project>
+  <modelVersion>4.0.0</modelVersion>
+  <name>Hosted_Root Config DSL Script</name>
+  <groupId>Hosted_Root</groupId>
+  <artifactId>Hosted_Root_dsl</artifactId>
+  <version>1.0-SNAPSHOT</version>
+
+  <parent>
+    <groupId>org.jetbrains.teamcity</groupId>
+    <artifactId>configs-dsl-kotlin-parent</artifactId>
+    <version>1.0-SNAPSHOT</version>
+  </parent>
+
+  <repositories>
+    <repository>
+      <id>jetbrains-all</id>
+      <url>https://download.jetbrains.com/teamcity-repository</url>
+      <snapshots>
+        <enabled>true</enabled>
+      </snapshots>
+    </repository>
+    <repository>
+      <id>teamcity-server</id>
+      <url>https://storybook.beta.teamcity.com/app/dsl-plugins-repository</url>
+      <snapshots>
+        <enabled>true</enabled>
+      </snapshots>
+    </repository>
+  </repositories>
+
+  <pluginRepositories>
+    <pluginRepository>
+      <id>JetBrains</id>
+      <url>https://download.jetbrains.com/teamcity-repository</url>
+    </pluginRepository>
+  </pluginRepositories>
+
+  <build>
+    <sourceDirectory>${basedir}</sourceDirectory>
+    <plugins>
+      <plugin>
+        <artifactId>kotlin-maven-plugin</artifactId>
+        <groupId>org.jetbrains.kotlin</groupId>
+        <version>${kotlin.version}</version>
+
+        <configuration/>
+        <executions>
+          <execution>
+            <id>compile</id>
+            <phase>process-sources</phase>
+            <goals>
+              <goal>compile</goal>
+            </goals>
+          </execution>
+          <execution>
+            <id>test-compile</id>
+            <phase>process-test-sources</phase>
+            <goals>
+              <goal>test-compile</goal>
+            </goals>
+          </execution>
+        </executions>
+      </plugin>
+      <plugin>
+        <groupId>org.jetbrains.teamcity</groupId>
+        <artifactId>teamcity-configs-maven-plugin</artifactId>
+        <version>${teamcity.dsl.version}</version>
+        <configuration>
+          <format>kotlin</format>
+          <dstDir>target/generated-configs</dstDir>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.jetbrains.teamcity</groupId>
+      <artifactId>configs-dsl-kotlin</artifactId>
+      <version>${teamcity.dsl.version}</version>
+      <scope>compile</scope>
+    </dependency>
+    <dependency>
+      <groupId>org.jetbrains.teamcity</groupId>
+      <artifactId>configs-dsl-kotlin-plugins</artifactId>
+      <version>1.0-SNAPSHOT</version>
+      <type>pom</type>
+      <scope>compile</scope>
+    </dependency>
+    <dependency>
+      <groupId>org.jetbrains.kotlin</groupId>
+      <artifactId>kotlin-stdlib-jdk8</artifactId>
+      <version>${kotlin.version}</version>
+      <scope>compile</scope>
+    </dependency>
+    <dependency>
+      <groupId>org.jetbrains.kotlin</groupId>
+      <artifactId>kotlin-script-runtime</artifactId>
+      <version>${kotlin.version}</version>
+      <scope>compile</scope>
+    </dependency>
+  </dependencies>
+  <properties>
+    <teamcity.dsl.version>2019.2.2-SNAPSHOT</teamcity.dsl.version>
+  </properties>
+</project>
\ No newline at end of file
diff --git a/.teamcity/settings.kts b/.teamcity/settings.kts
new file mode 100644
index 000000000000..2826c1006979
--- /dev/null
+++ b/.teamcity/settings.kts
@@ -0,0 +1,614 @@
+import jetbrains.buildServer.configs.kotlin.v2019_2.*
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.PullRequests
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.commitStatusPublisher
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.pullRequests
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.swabra
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.ScriptBuildStep
+import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.script
+import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.BuildFailureOnMetric
+import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.failOnMetricChange
+import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.buildReportTab
+import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.githubConnection
+import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.VcsTrigger
+import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.vcs
+
+/*
+The settings script is an entry point for defining a TeamCity
+project hierarchy. The script should contain a single call to the
+project() function with a Project instance or an init function as
+an argument.
+
+VcsRoots, BuildTypes, Templates, and subprojects can be
+registered inside the project using the vcsRoot(), buildType(),
+template(), and subProject() methods respectively.
+
+To debug settings scripts in command-line, run the
+
+    mvnDebug org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate
+
+command and attach your debugger to the port 8000.
+
+To debug in IntelliJ Idea, open the 'Maven Projects' tool window (View
+-> Tool Windows -> Maven Projects), find the generate task node
+(Plugins -> teamcity-configs -> teamcity-configs:generate), the
+'Debug' option is available in the context menu for the task.
+*/
+
+version = "2019.2"
+
+project {
+    template(Common)
+    defaultTemplate = Common
+
+    buildType(TestWorkflow)
+
+    buildType(Build)
+    buildType(E2E)
+    buildType(SmokeTests)
+    buildType(Frontpage)
+    buildType(Docs)
+    buildType(Lint)
+    buildType(Test)
+    buildType(Coverage)
+
+    subProject(ExamplesProject)
+
+    buildTypesOrderIds = arrayListOf(
+            RelativeId("TestWorkflow"),
+            RelativeId("Build"),
+            RelativeId("E2E"),
+            RelativeId("SmokeTests"),
+            RelativeId("Frontpage"),
+            RelativeId("Docs"),
+            RelativeId("Lint"),
+            RelativeId("Test"),
+            RelativeId("Coverage")
+    )
+
+
+    features {
+        githubConnection {
+            id = "PROJECT_EXT_6"
+            displayName = "GitHub.com"
+            clientId = "800d730c725f771d6d2a"
+            clientSecret = "credentialsJSON:d1a5af15-1200-46c6-b0f1-f35bd466d909"
+        }
+        buildReportTab {
+            id = "PROJECT_EXT_8"
+            title = "Official"
+            startPage = "built-storybooks.tar.gz!official-storybook/index.html"
+        }
+    }
+}
+
+object Common: Template({
+    name = "Common"
+
+    vcs {
+        root(DslContext.settingsRoot)
+        checkoutMode = CheckoutMode.ON_AGENT
+        checkoutDir = "storybook/%teamcity.build.branch%"
+    }
+
+    features {
+        commitStatusPublisher {
+            id = "Commit status publisher"
+            publisher = github {
+                githubUrl = "https://api.github.com"
+                authType = personalToken {
+                    token = "credentialsJSON:5273320e-14be-4317-951e-a54c4dcca35d"
+                }
+            }
+            param("github_oauth_user", "Hypnosphi")
+        }
+        swabra {
+            id = "swabra"
+            verbose = true
+            paths = """
+                -:.cache
+                -:node_modules
+                -:**/node_modules
+            """.trimIndent()
+        }
+        pullRequests {
+            id = "Pull requests"
+            provider = github {
+                authType = vcsRoot()
+                filterAuthorRole = PullRequests.GitHubRoleFilter.EVERYBODY
+            }
+        }
+    }
+})
+
+object Build : BuildType({
+    name = "Build"
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn install
+                yarn repo-dirty-check
+                yarn bootstrap --core
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    artifactRules = """
+        +:**/dist/** => dist.tar.gz
+        +:**/dll/** => dist.tar.gz
+        -:**/node_modules/** => dist.tar.gz
+    """.trimIndent()
+})
+
+object ExamplesProject : Project({
+    name = "Examples"
+
+    template(ExamplesTemplate)
+
+    buildType(Examples1)
+    buildType(Examples2)
+    buildType(Examples3)
+    buildType(Examples4)
+    buildType(Examples5)
+    buildType(AggregateExamples)
+})
+
+object ExamplesTemplate : Template({
+    name = "Examples Template"
+
+    dependencies {
+        dependency(Build) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "dist.tar.gz!** => ."
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+
+                yarn install
+                rm -rf built-storybooks
+                mkdir -p built-storybooks
+                
+                yarn build-storybooks
+            """.trimIndent()
+            dockerImage = "buildkite/puppeteer"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    artifactRules = "built-storybooks => built-storybooks.tar.gz"
+
+    params {
+        param("env.CIRCLE_NODE_TOTAL", "5")
+    }
+})
+
+object Examples1 : BuildType({
+    name = "Examples 1"
+    templates = listOf(ExamplesTemplate)
+
+    params {
+        param("env.CIRCLE_NODE_INDEX", "0")
+    }
+
+    disableSettings("Commit status publisher")
+})
+
+object Examples2 : BuildType({
+    name = "Examples 2"
+    templates = listOf(ExamplesTemplate)
+
+    params {
+        param("env.CIRCLE_NODE_INDEX", "1")
+    }
+
+    disableSettings("Commit status publisher")
+})
+
+object Examples3 : BuildType({
+    name = "Examples 3"
+    templates = listOf(ExamplesTemplate)
+
+    params {
+        param("env.CIRCLE_NODE_INDEX", "2")
+    }
+
+    disableSettings("Commit status publisher")
+})
+
+object Examples4 : BuildType({
+    name = "Examples 4"
+    templates = listOf(ExamplesTemplate)
+
+    params {
+        param("env.CIRCLE_NODE_INDEX", "3")
+    }
+
+    disableSettings("Commit status publisher")
+})
+
+object Examples5 : BuildType({
+    name = "Examples 5"
+    templates = listOf(ExamplesTemplate)
+
+    params {
+        param("env.CIRCLE_NODE_INDEX", "4")
+    }
+
+    disableSettings("Commit status publisher")
+})
+
+object AggregateExamples : BuildType({
+    name = "Aggregate Examples"
+
+    dependencies {
+        dependency(Examples1) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+        dependency(Examples2) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+        dependency(Examples3) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+        dependency(Examples4) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+        dependency(Examples5) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+    }
+
+    artifactRules = "built-storybooks => built-storybooks.tar.gz"
+})
+
+object E2E : BuildType({
+    name = "E2E"
+
+    dependencies {
+        dependency(AggregateExamples) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+
+                yarn install
+                yarn cypress install
+                yarn serve-storybooks &
+                yarn await-serve-storybooks
+                yarn cypress run --reporter teamcity || :
+                yarn ts-node --transpile-only cypress/report-teamcity-metadata.ts || :
+            """.trimIndent()
+            dockerImage = "cypress/base:10.18.1"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    artifactRules = """
+        cypress/screenshots => screenshots.tar.gz
+        cypress/videos => videos.tar.gz
+    """.trimIndent()
+
+    failureConditions {
+        failOnMetricChange {
+            metric = BuildFailureOnMetric.MetricType.TEST_COUNT
+            units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
+            comparison = BuildFailureOnMetric.MetricComparison.LESS
+            compareTo = value()
+        }
+    }
+})
+
+object SmokeTests : BuildType({
+    name = "Smoke Tests"
+
+    dependencies {
+        dependency(Build) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "dist.tar.gz!** => ."
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+
+                yarn install
+
+                cd examples/cra-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../cra-ts-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../vue-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../svelte-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../angular-cli
+                yarn storybook --smoke-test --quiet
+          
+                cd ../ember-cli
+                yarn storybook --smoke-test --quiet
+          
+                cd ../marko-cli
+                yarn storybook --smoke-test --quiet
+          
+                cd ../official-storybook
+                yarn storybook --smoke-test --quiet
+          
+                cd ../mithril-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../riot-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../preact-kitchen-sink
+                yarn storybook --smoke-test --quiet
+          
+                cd ../cra-react15
+                yarn storybook --smoke-test --quiet
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+})
+
+object Frontpage : BuildType({
+    name = "Frontpage"
+    type = Type.DEPLOYMENT
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn bootstrap --install
+                node ./scripts/build-frontpage.js
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    triggers {
+        vcs {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+            triggerRules = "-:.teamcity/**"
+            branchFilter = "+:master"
+        }
+    }
+})
+
+object Docs : BuildType({
+    name = "Docs"
+    type = Type.DEPLOYMENT
+
+    steps {
+        script {
+            workingDir = "docs"
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn install
+                yarn build
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    triggers {
+        vcs {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+            triggerRules = "-:.teamcity/**"
+            branchFilter = """
+                +:<default>
+                +:next
+                +:master
+                +:pull/*
+            """.trimIndent()
+        }
+    }
+})
+
+object Lint : BuildType({
+    name = "Lint"
+
+    dependencies {
+        dependency(Build) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "dist.tar.gz!** => ."
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn install
+                
+                # TODO remove after merging
+                mkdir temp-eslint-teamcity
+                cd temp-eslint-teamcity
+                yarn init -y
+                yarn add -D eslint-teamcity
+                cd ..
+                
+                yarn lint:js --format ./temp-eslint-teamcity/node_modules/eslint-teamcity/index.js .
+                yarn lint:md .
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    failureConditions {
+        failOnMetricChange {
+            metric = BuildFailureOnMetric.MetricType.INSPECTION_ERROR_COUNT
+            threshold = 0
+            units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
+            comparison = BuildFailureOnMetric.MetricComparison.MORE
+            compareTo = value()
+        }
+    }
+})
+
+object Test : BuildType({
+    name = "Test"
+
+    dependencies {
+        dependency(Build) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "dist.tar.gz!** => ."
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn install
+                
+                # TODO remove after merging
+                mkdir temp-jest-teamcity
+                cd temp-jest-teamcity
+                yarn init -y
+                yarn add -D jest-teamcity
+                cd ..
+                
+                yarn jest --coverage -w 2 --reporters=${'$'}PWD/temp-jest-teamcity/node_modules/jest-teamcity
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+
+    artifactRules = "coverage => coverage.tar.gz"
+})
+
+object Coverage : BuildType({
+    name = "Coverage"
+
+    dependencies {
+        dependency(Test) {
+            snapshot {
+                onDependencyFailure = FailureAction.CANCEL
+            }
+            artifacts {
+                artifactRules = "coverage.tar.gz!** => coverage"
+            }
+        }
+    }
+
+    steps {
+        script {
+            scriptContent = """
+                #!/bin/bash
+                set -e -x
+                
+                yarn install
+                yarn coverage
+            """.trimIndent()
+            dockerImage = "node:10"
+            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
+        }
+    }
+})
+
+object TestWorkflow : BuildType({
+    name = "Test Workflow"
+    type = Type.COMPOSITE
+    maxRunningBuilds = 2
+
+    dependencies {
+        snapshot(E2E) {}
+        snapshot(SmokeTests) {}
+        snapshot(Lint) {}
+        snapshot(Coverage) {}
+    }
+
+    triggers {
+        vcs {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+            triggerRules = "-:.teamcity/**"
+            branchFilter = """
+                +:<default>
+                +:next
+                +:master
+                +:pull/*
+            """.trimIndent()
+        }
+    }
+})
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 50ef06713aca..daa7997bc064 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,6 +17,22 @@
     "skipFiles": [
       "<node_internals>/**"
     ]
-  },
+  }, {
+    "type": "node",
+    "request": "launch",
+    "name": "cli html",
+    "cwd": "${workspaceFolder}/lib/cli/stories",
+    "runtimeArgs": [
+      "--inspect-brk",
+      "${workspaceFolder}/lib/cli/bin/index.js",
+      "init",
+      "--type",
+      "html"
+    ],
+    "port": 9229,
+    "skipFiles": [
+      "<node_internals>/**"
+    ]
+  }
   ]
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000000..66d2c072fcdb
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}
\ No newline at end of file
diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
index a87bcfb68bc5..cdad86428e7a 100644
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@@ -1,25 +1,32 @@
 ## Addon / Framework Support Table
 
-| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)                         |+| |+|+|+|+|+|+|+|+|+|+|
-|[actions](addons/actions)                   |+|+*|+|+|+|+|+|+|+|+|+|+|
-|[backgrounds](addons/backgrounds)           |+|*|+|+|+|+|+|+|+|+|+|+|
-|[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
-|[contexts](addons/contexts)                 |+| |+| | | | | | | | |+|
-|[events](addons/events)                     |+| |+|+|+|+|+|+| | |+|+|
-|[design assets](addons/design-assets)       |+| |+|+|+|+|+|+|+|+|+|+|
-|[graphql](addons/graphql)                   |+| | | | | | | | | | | |
-|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
-|[info](addons/info)                         |+| | | | | | | | | | | |
-|[jest](addons/jest)                         |+|+|+|+|+|+|+|+|+|+|+|+|
-|[knobs](addons/knobs)                       |+|+*|+|+|+|+|+|+|+|+|+|+|
-|[links](addons/links)                       |+|+|+|+|+|+|+| |+|+|+|+|
-|[notes](addons/notes)                       |+|+*|+|+|+|+|+| |+|+|+|+|
-|[options](addons/options)                   |+|+|+|+|+|+|+| |+|+|+|+|
-|[cssresources](addons/cssresources)         |+| |+|+|+|+|+|+|+|+|+|+|
-|[storyshots](addons/storyshots)             |+|+|+|+| | |+| |+|+| |+|
-|[storysource](addons/storysource)           |+| |+|+|+|+|+|+|+|+|+|+|
-|[viewport](addons/viewport)                 |+| |+|+|+|+|+|+|+|+|+|+|
+|                                             | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
+| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
+| [a11y](addons/a11y)                         |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [actions](addons/actions)                   |         +          |               +\*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [backgrounds](addons/backgrounds)           |         +          |                \*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [cssresources](addons/cssresources)         |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [design assets](addons/design-assets)       |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [docs](addons/docs)                         |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [events](addons/events)                     |         +          |                                  |       +        |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           | +              |
+| [google-analytics](addons/google-analytics) |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [graphql](addons/graphql)                   |         +          |                                  |                |                        |                        |                  |                    |                      |                  |                    |                      |                |
+| [jest](addons/jest)                         |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [knobs](addons/knobs)                       |         +          |               +\*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [links](addons/links)                       |         +          |                +                 |       +        |           +            |           +            |        +         |                    |          +           |        +         |         +          |          +           | +              |
+| [options](addons/options)                   |         +          |                +                 |       +        |           +            |           +            |        +         |                    |          +           |        +         |         +          |          +           | +              |
+| [query params](addons/queryparams)          |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [storyshots](addons/storyshots)             |         +          |                +                 |       +        |           +            |                        |        +         |                    |          +           |        +         |                    |          +           | +              |
+| [storysource](addons/storysource)           |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
+| [viewport](addons/viewport)                 |         +          |                                  |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           | +              |
 
-`*` - React Native on device addon (addons/onDevice-\<name>) 
+`*`  - React Native on device addon (addons/onDevice-\<name>)
+
+## Deprecated Addons
+
+|                                             | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
+| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
+| [info](https://github.com/storybookjs/storybook/tree/master/addons/info)                     |         +          |                                  |                |                        |                        |                  |                    |                      |                  |                    |                      |                |
+| [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes)                   |         +          |               +\*                |       +        |           +            |           +            |        +         |                    |          +           |        +         |         +          |          +           | +              |
+
+`*`  - React Native on device addon (addons/onDevice-\<name>)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e34b8bb52cf..ed9e7f29f00b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,27 +1,1325 @@
+## 6.0.0-beta.21 (June 4, 2020)
+
+### Breaking Changes
+
+- Preact: Update Preact version ([#10978](https://github.com/storybookjs/storybook/pull/10978))
+
+### Features
+
+- Addon-docs: Angular ArgTypes for pipes, injectables, classes ([#11016](https://github.com/storybookjs/storybook/pull/11016))
+- TypeScript: Add warning for setup issues and fix Babel config ([#10998](https://github.com/storybookjs/storybook/pull/10998))
+- Core: Add logLevel preset property to filter logging ([#10370](https://github.com/storybookjs/storybook/pull/10370))
+
+### Bug Fixes
+
+- Addon-controls: Fix initialization logic; remove react-select ([#11024](https://github.com/storybookjs/storybook/pull/11024))
+- CLI: Fix `sb init` in Yarn workspace environment ([#10985](https://github.com/storybookjs/storybook/pull/10985))
+
+### Maintenance
+
+- React: Remove argsStory helper function ([#11036](https://github.com/storybookjs/storybook/pull/11036))
+- Addon-controls: Remove residual options-type controls ([#11015](https://github.com/storybookjs/storybook/pull/11015))
+
+## 6.0.0-beta.20 (June 1, 2020)
+
+### Bug Fixes
+
+- Addon-controls: Fix `options` control types ([#11003](https://github.com/storybookjs/storybook/pull/11003))
+- Addon-controls: Fix no-control handling ([#11001](https://github.com/storybookjs/storybook/pull/11001))
+- Addon-docs: Fix function argType inference in react-docgen-typescript ([#10997](https://github.com/storybookjs/storybook/pull/10997))
+
+### Maintenance
+
+- Addon-controls/a11y: Fix PARAM_KEY export for consistency ([#10988](https://github.com/storybookjs/storybook/pull/10988))
+
+## 6.0.0-beta.19 (May 30, 2020)
+
+### Features
+
+- Addon-controls: Add warning to controls tab on no-args story ([#10986](https://github.com/storybookjs/storybook/pull/10986))
+
+### Bug Fixes
+
+- Addon-docs: Handle JSON.parse exception for Angular union types ([#10984](https://github.com/storybookjs/storybook/pull/10984))
+
+## 6.0.0-beta.18 (May 29, 2020)
+
+### Bug Fixes
+
+- Core: Fix HMR for navigation sidebar in UI ([#10981](https://github.com/storybookjs/storybook/pull/10981))
+- Core: Fix `register.tsx` as manager code in preset heuristic ([#10980](https://github.com/storybookjs/storybook/pull/10980))
+- Core: Send global args with set stories ([#10910](https://github.com/storybookjs/storybook/pull/10910))
+- Core: Log swallowed errors when requiring stories ([#10974](https://github.com/storybookjs/storybook/pull/10974))
+- Core: Support valid globs ([#10926](https://github.com/storybookjs/storybook/pull/10926))
+
+## 6.0.0-beta.17 (May 28, 2020)
+
+### Features
+
+- Addon-controls: Angular support ([#10946](https://github.com/storybookjs/storybook/pull/10946))
+- Addon-controls: Web-components support ([#10953](https://github.com/storybookjs/storybook/pull/10953))
+
+## 6.0.0-beta.16 (May 28, 2020)
+
+### Bug Fixes
+
+- Core: Add missing babel plugin ([#10941](https://github.com/storybookjs/storybook/pull/10941))
+
+### Maintenance
+
+- CI: Stabilize E2E tests ([#10888](https://github.com/storybookjs/storybook/pull/10888))
+
+## 6.0.0-beta.15 (May 27, 2020)
+
+### Features
+
+- Addon-Controls: Next-generation knobs ([#10834](https://github.com/storybookjs/storybook/pull/10834))
+
+### Bug Fixes
+
+- Core: Avoid re-render on HMR of other stories ([#10908](https://github.com/storybookjs/storybook/pull/10908))
+- Core: Fix auth for refs ([#10845](https://github.com/storybookjs/storybook/pull/10845))
+
+### Dependency Upgrades
+
+- Bump react-syntax-highlighter from 11.0.2 to 12.2.1 ([#10919](https://github.com/storybookjs/storybook/pull/10919))
+
+## 6.0.0-beta.14 (May 25, 2020)
+
+### Breaking Changes
+
+- CSF: Hoist story annotation object ([#10907](https://github.com/storybookjs/storybook/pull/10907))
+- Vue: Remove babel-preset-vue ([#10909](https://github.com/storybookjs/storybook/pull/10909))
+
+### Features
+
+- Angular: Support `workspace.json` in nx workspace ([#10881](https://github.com/storybookjs/storybook/pull/10881))
+
+### Bug Fixes
+
+- Addon-docs: Fix single item width in Preview block ([#10877](https://github.com/storybookjs/storybook/pull/10877))
+- UI: Center toolbar icon buttons ([#10897](https://github.com/storybookjs/storybook/pull/10897))
+- Core: Fix double rendering on startup ([#10892](https://github.com/storybookjs/storybook/pull/10892))
+
+### Maintenance
+
+- Core: Use dedicated loader for es6 modules ([#10783](https://github.com/storybookjs/storybook/pull/10783))
+- Core: Fix yarn test command on windows ([#10904](https://github.com/storybookjs/storybook/pull/10904))
+
+## 5.3.19 (May 24, 2020)
+
+### Bug Fixes
+
+- UI: Fix search stories ([#10539](https://github.com/storybookjs/storybook/pull/10539))
+
+### Security
+
+- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
+
+## 6.0.0-beta.13 (May 23, 2020)
+
+### Bug Fixes
+
+- Core: Fix ts/tsx resolution in the manager ([#10886](https://github.com/storybookjs/storybook/pull/10886))
+- Core: Fix typo in projectRoot node_modules detection ([#10848](https://github.com/storybookjs/storybook/pull/10848))
+- Addon-docs: Fix story inline rendering ([#10875](https://github.com/storybookjs/storybook/pull/10875))
+- Core: Fix CRA filter for built-in webpack settings ([#10861](https://github.com/storybookjs/storybook/pull/10861))
+- Addon-docs: Fix react forwardRefs with destructured props ([#10864](https://github.com/storybookjs/storybook/pull/10864))
+
+### Maintenance
+
+- React: Upgrade preset-create-react-app in examples ([#10867](https://github.com/storybookjs/storybook/pull/10867))
+- Core: Close server when e2e test failed ([#10868](https://github.com/storybookjs/storybook/pull/10868))
+
+### Dependency Upgrades
+
+- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
+
+## 6.0.0-beta.12 (May 21, 2020)
+
+### Breaking Changes
+
+- Core: Zero-config TypeScript loading ([#10813](https://github.com/storybookjs/storybook/pull/10813))
+
+## 6.0.0-beta.11 (May 21, 2020)
+
+Failed publish
+
+## 6.0.0-beta.10 (May 21, 2020)
+
+Failed publish
+
+## 6.0.0-beta.9 (May 21, 2020)
+
+### Bug Fixes
+
+- UI: Avoid full refresh when on some tab changes ([#10838](https://github.com/storybookjs/storybook/pull/10838))
+- Composition: Fix refs not authenticating ([#10819](https://github.com/storybookjs/storybook/pull/10819))
+- Core: Fix global args initial state for addon-toolbars ([#10833](https://github.com/storybookjs/storybook/pull/10833))
+- Addon-a11y: Add deprecated withA11y ([#10814](https://github.com/storybookjs/storybook/pull/10814))
+- Core: Transpile minimum node_modules ([#10725](https://github.com/storybookjs/storybook/pull/10725))
+- UI: Change default view to Canvas on mobile ([#10818](https://github.com/storybookjs/storybook/pull/10818))
+- Docs: Improve Preview zoom handling ([#10801](https://github.com/storybookjs/storybook/pull/10801))
+
+### Maintenance
+
+- CI: example overhaul clean ([#10702](https://github.com/storybookjs/storybook/pull/10702))
+- CLI: Migrate CLI to TypeScript ([#10802](https://github.com/storybookjs/storybook/pull/10802))
+
+### Dependency Upgrades
+
+- Upgrade and add some missing dependencies in core, router, api ([#10825](https://github.com/storybookjs/storybook/pull/10825))
+
+## 6.0.0-beta.8 (May 17, 2020)
+
+### Features
+
+- Addon-toolbars: Show tool icons for all viewModes ([#10810](https://github.com/storybookjs/storybook/pull/10810))
+
+### Bug Fixes
+
+- Addon-docs: Eval argTypes default value ([#10812](https://github.com/storybookjs/storybook/pull/10812))
+
+### Maintenance
+
+- Scripts: parallel execution on build package scripts ([#10808](https://github.com/storybookjs/storybook/pull/10808))
+
+## 6.0.0-beta.7 (May 15, 2020)
+
+### Breaking changes
+
+- Cleanup: Remove support for babel-loader < 8 ([#10781](https://github.com/storybookjs/storybook/pull/10781))
+
+### Features
+
+- Composition: Zero-config composition from dependencies ([#10753](https://github.com/storybookjs/storybook/pull/10753))
+
+### Bug Fixes
+
+- Core: Detect local addons for windows machine ([#10786](https://github.com/storybookjs/storybook/pull/10786))
+- Composition: Rename `mapper` to `storyMapper` and fix loading bugs ([#10780](https://github.com/storybookjs/storybook/pull/10780))
+
+### Maintenance
+
+- CLI: HTML stories homogenization ([#10705](https://github.com/storybookjs/storybook/pull/10705))
+- CLI: web-components stories homogenization ([#10703](https://github.com/storybookjs/storybook/pull/10703))
+
+### Dependency Upgrades
+
+- Update jest-preset-angular to 8.2.0 ([#10778](https://github.com/storybookjs/storybook/pull/10778))
+
+## 6.0.0-beta.6 (May 12, 2020)
+
+### Breaking Changes
+
+- Essentials: Update configuration heuristics for main.js ([#10737](https://github.com/storybookjs/storybook/pull/10737))
+
+### Features
+
+- Essentials: Add addon-actions ([#10748](https://github.com/storybookjs/storybook/pull/10748))
+- Essentials: Add addon-docs ([#10729](https://github.com/storybookjs/storybook/pull/10729))
+
+### Bug Fixes
+
+- UI: Reset layout properties when switching stories ([#10643](https://github.com/storybookjs/storybook/pull/10643))
+
+### Maintenance
+
+- CLI: react stories homogenization ([#10711](https://github.com/storybookjs/storybook/pull/10711))
+- CLI: vue stories homogenization ([#10708](https://github.com/storybookjs/storybook/pull/10708))
+- CLI: webpack react stories homogenization ([#10709](https://github.com/storybookjs/storybook/pull/10709))
+- CLI: svelte stories homogenization ([#10704](https://github.com/storybookjs/storybook/pull/10704))
+- CLI: react-scripts stories homogenization ([#10710](https://github.com/storybookjs/storybook/pull/10710))
+- CLI: mithril stories homogenization ([#10707](https://github.com/storybookjs/storybook/pull/10707))
+- CLI: rax stories homogenization ([#10706](https://github.com/storybookjs/storybook/pull/10706))
+- CLI: riot stories homogenization ([#10715](https://github.com/storybookjs/storybook/pull/10715))
+- CLI: ember stories homogenization ([#10713](https://github.com/storybookjs/storybook/pull/10713))
+- CLI: preact stories homogenization ([#10712](https://github.com/storybookjs/storybook/pull/10712))
+- CLI: sfc_vue stories homogenization ([#10714](https://github.com/storybookjs/storybook/pull/10714))
+
+### Dependency Upgrades
+
+- Revert "Change reference for jest-preset-angular/build/setupJest as per migration guide" ([#10727](https://github.com/storybookjs/storybook/pull/10727))
+
+## 6.0.0-beta.5 (May 11, 2020)
+
+### Bug Fixes
+
+- Core: Fix error handling on load ([#10659](https://github.com/storybookjs/storybook/pull/10659))
+
+### Maintenance
+
+- Storyshots: Change reference for jest-preset-angular/build/setupJest ([#10699](https://github.com/storybookjs/storybook/pull/10699))
+- CLI: Remove CRA fixtures from Yarn 2 tests run ([#10720](https://github.com/storybookjs/storybook/pull/10720))
+- Fix: Set private package on Aurelia example ([#10688](https://github.com/storybookjs/storybook/pull/10688))
+
+## 6.0.0-beta.4 (May 8, 2020)
+
+### Features
+
+- React: Add `argsStory` convenience function ([#10685](https://github.com/storybookjs/storybook/pull/10685))
+
+### Dependency Upgrades
+
+- Build: Upgrade jest to 26 ([#10669](https://github.com/storybookjs/storybook/pull/10669))
+
+## 6.0.0-beta.3 (May 7, 2020)
+
+### Breaking Changes
+
+- Addon-backgrounds: Simplified parameters API ([#10634](https://github.com/storybookjs/storybook/pull/10634))
+
+### Bug Fixes
+
+- Core: Fix `globalArgs` initialization from global parameters ([#10566](https://github.com/storybookjs/storybook/pull/10566))
+- Core: Fix DLL context for IE11 ([#106444]https://github.com/storybookjs/storybook/pull/10644))
+
+### Dependency Upgrades
+
+- Addon-storyshots: Upgrade to jest 26 ([#10642](https://github.com/storybookjs/storybook/pull/10642))
+- Bump terser-webpack-plugin from 2.3.6 to 3.0.0 ([#10650](https://github.com/storybookjs/storybook/pull/10650))
+
+## 6.0.0-beta.2 (May 4, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix broken props logic for no-args stories ([#10633](https://github.com/storybookjs/storybook/pull/10633))
+- Addon-docs: Fix custom source manual override ([#10632](https://github.com/storybookjs/storybook/pull/10632))
+- Addon-docs: Fix MDX stories with multiple children ([#9531](https://github.com/storybookjs/storybook/pull/9531))
+- Addon-docs: Fix object array in Props ([#10621](https://github.com/storybookjs/storybook/pull/10621))
+- Actions: Fix import of `uuid` ([#10625](https://github.com/storybookjs/storybook/pull/10625))
+
+### Maintenance
+
+- Core: Fix Args test to not use different code path ([#10607](https://github.com/storybookjs/storybook/pull/10607))
+
+## 6.0.0-beta.1 (May 2, 2020)
+
+### Features
+
+- CLI: Add automatic detection for svelte ([#10623](https://github.com/storybookjs/storybook/pull/10623))
+
+### Bug Fixes
+
+- Addon-docs: Fix no-props logic in Source block ([#10619](https://github.com/storybookjs/storybook/pull/10619))
+- Props: Fix subcomponents ([#10608](https://github.com/storybookjs/storybook/pull/10608))
+
+### Maintenance
+
+- Yarn 2: Fix dependencies issues for compatibility ([#10613](https://github.com/storybookjs/storybook/pull/10613))
+- CLI: Fix cli when working with Yarn 2 and Node 10 ([#10550](https://github.com/storybookjs/storybook/pull/10550))
+
+## 6.0.0-beta.0 (April 29, 2020)
+
+Storybook 6.0 is in beta. 🎉🎉🎉
+
+Hundreds of improvements and fixes, including:
+
+- **Args** - Dynamic story data with automatic prop controls and actions.
+- **Composition** - Compose storybooks for better documentation, performance, and multi-framework support.
+- **Server** - Enabling Storybook for Rails and other server-side components.
+- **Yarn 2** - Supporting next generation package management.
+
+Track the release in the Github: [Storybook 6.0 Release 🏆](https://github.com/storybookjs/storybook/issues/9311)
+
+## 6.0.0-alpha.46 (April 29, 2020)
+
+### Breaking Changes
+
+- Core: Normalize parameters in store/channel ([#10373](https://github.com/storybookjs/storybook/pull/10373))
+- React: Remove deprecated CRA preset ([#10571](https://github.com/storybookjs/storybook/pull/10571))
+
+### Features
+
+- Addon-docs: Props controls for Vue ([#10559](https://github.com/storybookjs/storybook/pull/10559))
+
+### Bug Fixes
+
+- Addon-docs: Add subcomponents prop to Meta block ([#10573](https://github.com/storybookjs/storybook/pull/10573))
+
+## 6.0.0-alpha.45 (April 28, 2020)
+
+## Breaking changes
+
+- Core: Pass args first to stories by default ([#10452](https://github.com/storybookjs/storybook/pull/10452))
+
+## 6.0.0-alpha.44 (April 27, 2020)
+
+### Features
+
+- CLI: Automatically detect typescript in `sb init` ([#10547](https://github.com/storybookjs/storybook/pull/10547))
+
+### Bug Fixes
+
+- UI: Fix `viewMode` parameter handling ([#10292](https://github.com/storybookjs/storybook/pull/10292))
+
+## 6.0.0-alpha.43 (April 24, 2020)
+
+### Features
+
+- Addon-a11y: Use channel to highlight elements in preview ([#10456](https://github.com/storybookjs/storybook/pull/10456))
+- Storyshots: Support react hooks ([#10529](https://github.com/storybookjs/storybook/pull/10529))
+
+### Bug Fixes
+
+- Core: Transform for/of in dlls for IE11 compatibility ([#10471](https://github.com/storybookjs/storybook/pull/10471))
+
+### Maintenance
+
+- Addon-contexts: Move to deprecated-addons repo ([#10479](https://github.com/storybookjs/storybook/pull/10479))
+
+## 6.0.0-alpha.42 (April 23, 2020)
+
+### Bug Fixes
+
+- Build: Fix misc warnings that trip up Chromatic ([#10521](https://github.com/storybookjs/storybook/pull/10521))
+- Composition: Update UI for refs ([#10504](https://github.com/storybookjs/storybook/pull/10504))
+
+### Maintenance
+
+- Addon-docs: Rename `formatSource` to `transformSource` ([#10503](https://github.com/storybookjs/storybook/pull/10503))
+
+## 6.0.0-alpha.41 (April 21, 2020)
+
+### Features
+
+- Addon-docs: Reset styles in Preview component ([#10274](https://github.com/storybookjs/storybook/pull/10274))
+
+### Bug Fixes
+
+- Addon-docs: Port Vue to ArgsTable ([#10482](https://github.com/storybookjs/storybook/pull/10482))
+- Addon-docs: Fix Props controls to point to primary story ([#10480](https://github.com/storybookjs/storybook/pull/10480))
+- Core: Fix addon tab in react-native-server ([#10468](https://github.com/storybookjs/storybook/pull/10468))
+
+### Dependency Upgrades
+
+- Misc upgrades ([#10460](https://github.com/storybookjs/storybook/pull/10460))
+
+## 6.0.0-alpha.40 (April 20, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix controls column display logic ([#10473](https://github.com/storybookjs/storybook/pull/10473))
+
+## 6.0.0-alpha.39 (April 18, 2020)
+
+### Breaking Changes
+
+- Addon-docs: Inline stories in Vue by default ([#10463](https://github.com/storybookjs/storybook/pull/10463))
+
+### Features
+
+- Addon-docs: Provide better props include/exclude features ([#10464](https://github.com/storybookjs/storybook/pull/10464))
+- UI: Improve loading state ([#10444](https://github.com/storybookjs/storybook/pull/10444))
+
+### Bug Fixes
+
+- UI: Fix bad shortcutpage layout ([#10445](https://github.com/storybookjs/storybook/pull/10445))
+
+## 6.0.0-alpha.38 (April 18, 2020)
+
+Failed publish
+
+## 6.0.0-alpha.37 (April 17, 2020)
+
+### Features
+
+- Addon-actions: Make arg auto-generation more aggressive ([#10451](https://github.com/storybookjs/storybook/pull/10451))
+
+### Maintenance
+
+- Examples: Format stringified parameters ([#10435](https://github.com/storybookjs/storybook/pull/10435))
+
+### Dependency Upgrades
+
+- Bump recast from 0.16.2 to 0.19.0 ([#10415](https://github.com/storybookjs/storybook/pull/10415))
+
+## 6.0.0-alpha.36 (April 16, 2020)
+
+### Bug Fixes
+
+- Server: Fix serialization of knobs params back to server ([#10391](https://github.com/storybookjs/storybook/pull/10391))
+- Core: Serve correctly hashed static files with the Cache-Control header ([#10390](https://github.com/storybookjs/storybook/pull/10390))
+- Addon-a11y: Fix default a11y parameters ([#10439](https://github.com/storybookjs/storybook/pull/10439))
+- Core: Fix event source handling ([#10416](https://github.com/storybookjs/storybook/pull/10416))
+
+### Maintenance
+
+- Addon-docs: Add blocks typings ([#10441](https://github.com/storybookjs/storybook/pull/10441))
+
+## 6.0.0-alpha.35 (April 16, 2020)
+
+### Bug Fixes
+
+- Core: Fix static build with DLL ([#10377](https://github.com/storybookjs/storybook/pull/10377))
+- Addon-Docs: Fix Args table generation for story with no component ([#10436](https://github.com/storybookjs/storybook/pull/10436))
+
+### Maintenance
+
+- Yarn 2: Fix compatibility with `.storybook/preview.js` file ([#10342](https://github.com/storybookjs/storybook/pull/10342))
+- Official-storybook: Fix passArgsFirst problems ([#10432](https://github.com/storybookjs/storybook/pull/10432))
+
+## 6.0.0-alpha.34 (April 15, 2020)
+
+### Breaking Changes
+
+- Addon-A11y: Remove decorator in favor of parameter configuration ([#10381](https://github.com/storybookjs/storybook/pull/10381))
+
+### Features
+
+- Addon-docs: Add controls to ArgsTable ([#10354](https://github.com/storybookjs/storybook/pull/10354))
+- CLI: Reuse existing chromium tab if possible ([#10329](https://github.com/storybookjs/storybook/pull/10329))
+
+### Bug Fixes
+
+- Core: Fix main.js `stories` regex to glob conversion ([#10400](https://github.com/storybookjs/storybook/pull/10400))
+- Composition: Fix ref getSourceType for URL paths with index.html ([#10421](https://github.com/storybookjs/storybook/pull/10421))
+- Core: Add .cjs files for main.js config ([#10358](https://github.com/storybookjs/storybook/pull/10358))
+
+### Dependency Upgrades
+
+- Bump @types/react-select from 2.0.19 to 3.0.11 ([#10262](https://github.com/storybookjs/storybook/pull/10262))
+- Bump strip-json-comments from 3.0.1 to 3.1.0 ([#10334](https://github.com/storybookjs/storybook/pull/10334))
+- Bump axe version to 3.5.3 ([#10375](https://github.com/storybookjs/storybook/pull/10375))
+- Bump markdown-to-jsx from 6.11.0 to 6.11.1 ([#10331](https://github.com/storybookjs/storybook/pull/10331))
+- Bump semver from 7.1.3 to 7.2.2 ([#10385](https://github.com/storybookjs/storybook/pull/10385))
+
+## 6.0.0-alpha.33 (April 14, 2020)
+
+### Breaking prerelease
+
+- Core: Rename ParameterEnhancer to ArgsEnhancer ([#10398](https://github.com/storybookjs/storybook/pull/10398))
+
+### Bug Fixes
+
+- Core: Fix `webpackFinal` being called twice ([#10402](https://github.com/storybookjs/storybook/pull/10402))
+- Core: Fix legacy redirect ([#10404](https://github.com/storybookjs/storybook/pull/10404))
+
+### Maintenance
+
+- CLI: Update fixtures used for CLI tests ([#10396](https://github.com/storybookjs/storybook/pull/10396))
+- Build: Update bootstrap to install optional deps on CI ([#10408](https://github.com/storybookjs/storybook/pull/10408))
+- Addon-docs: Format source at render time ([#10383](https://github.com/storybookjs/storybook/pull/10383))
+
+## 6.0.0-alpha.32 (April 11, 2020)
+
+### Features
+
+- CSF: Warn when there are no exported stories ([#10357](https://github.com/storybookjs/storybook/pull/10357))
+
+### Bug Fixes
+
+- Marko: Always destroy old component when switching stories ([#10345](https://github.com/storybookjs/storybook/pull/10345))
+
+### Maintenance
+
+- Dev: Build script for package development ([#10343](https://github.com/storybookjs/storybook/pull/10343))
+
+## 6.0.0-alpha.31 (April 7, 2020)
+
+### Bug Fixes
+
+- Core: Fix ie11 compatibility ([#10281](https://github.com/storybookjs/storybook/pull/10281))
+- Core: Add .cjs & .mjs to interpret-files ([#10288](https://github.com/storybookjs/storybook/pull/10288))
+- Core: Fix source-map strategy for production ([#10290](https://github.com/storybookjs/storybook/pull/10290))
+- Addon-knobs: Allow `text` and `number` to take undefined values ([#10101](https://github.com/storybookjs/storybook/pull/10101))
+
+### Maintenance
+
+- Core: Warn about deprecated config files ([#10097](https://github.com/storybookjs/storybook/pull/10097))
+- Yarn 2: rework imports in webpack preview virtual module to fix compatibility ([#10305](https://github.com/storybookjs/storybook/pull/10305))
+- Addon-centered: Move to deprecated-addons ([#10300](https://github.com/storybookjs/storybook/pull/10300))
+
+## 5.3.18 (March 31, 2020)
+
+### Bug Fixes
+
+- Core: Fix manager assets to be routed in express ([#9646](https://github.com/storybookjs/storybook/pull/9646))
+- Storyshots: Fix MDX transform ([#10223](https://github.com/storybookjs/storybook/pull/10223))
+- Addon-docs: Restore IE11 compat on Windows by transpiling acorn-jsx ([#9790](https://github.com/storybookjs/storybook/pull/9790))
+- Addon-docs: Ensure visibility of links within prop descriptions ([#10210](https://github.com/storybookjs/storybook/pull/10210))
+
+## 6.0.0-alpha.30 (March 31, 2020)
+
+### Breaking Changes
+
+- Misc: remove deprecations for 6.0.0 ([#10216](https://github.com/storybookjs/storybook/pull/10216))
+- DocsPage: Remove slots for 6.0 ([#10259](https://github.com/storybookjs/storybook/pull/10259))
+- Addon-actions: Add preset and configure with parameters ([#9933](https://github.com/storybookjs/storybook/pull/9933))
+
+### Features
+
+- MDX: Add args/argTypes/component/subcomponents support ([#10258](https://github.com/storybookjs/storybook/pull/10258))
+- Addon-docs: Add linear gradient support to ColorPalette block ([#10237](https://github.com/storybookjs/storybook/pull/10237))
+
+### Bug Fixes
+
+- Addon-a11y: Performance fix ([#10219](https://github.com/storybookjs/storybook/pull/10219))
+- API: Fix local addon handling ([#10254](https://github.com/storybookjs/storybook/pull/10254))
+- Core: Fix URL load failure due to missing base ([#10228](https://github.com/storybookjs/storybook/pull/10228))
+- Storyshots: Fix MDX transform ([#10223](https://github.com/storybookjs/storybook/pull/10223))
+
+### Maintenance
+
+- Build: Add puppeteer libs so teamcity can build examples ([#10235](https://github.com/storybookjs/storybook/pull/10235))
+
+### Dependency Upgrades
+
+- Misc upgrades ([#10236](https://github.com/storybookjs/storybook/pull/10236))
+
+## 6.0.0-alpha.29 (March 26, 2020)
+
+### Features
+
+- Core: Composition - load remote storybooks ([#9210](https://github.com/storybookjs/storybook/pull/9210))
+- CLI: extract-storybook bin ([#10146](https://github.com/storybookjs/storybook/pull/10146))
+
+### Bug Fixes
+
+- Addon-docs: Ensure visibility of links within prop descriptions ([#10210](https://github.com/storybookjs/storybook/pull/10210))
+
+### Maintenance
+
+- Core: Remove useStoryState ([#10187](https://github.com/storybookjs/storybook/pull/10187))
+- Addon-jest: Title case panel name ([#10161](https://github.com/storybookjs/storybook/pull/10161))
+
+### Dependency Upgrades
+
+- Bump semver from 6.3.0 to 7.1.3 ([#9864](https://github.com/storybookjs/storybook/pull/9864))
+- Bump @types/jest from 25.1.3 to 25.1.4 ([#10133](https://github.com/storybookjs/storybook/pull/10133))
+
+## 6.0.0-alpha.28 (March 23, 2020)
+
+### Features
+
+- UI: Form/textarea maxHeight : 400 ([#9860](https://github.com/storybookjs/storybook/pull/9860))
+
+### Bug Fixes
+
+- Addon-docs: Make source resilient to bad story ID's ([#10184](https://github.com/storybookjs/storybook/pull/10184))
+- Core: Don't persist theme to localStorage ([#9076](https://github.com/storybookjs/storybook/pull/9076))
+- Core: Fix to load Storybook in IE11 ([#9942](https://github.com/storybookjs/storybook/pull/9942))
+
+### Maintenance
+
+- Server: Simplify server addons ([#9931](https://github.com/storybookjs/storybook/pull/9931))
+- Core: FIX error of load order when using configure in preview|config.js ([#10159](https://github.com/storybookjs/storybook/pull/10159))
+- Build: Experiment to make CircleCI tests a faster and more stable ([#9969](https://github.com/storybookjs/storybook/pull/9969))
+- Vue: Fix webpack config when excute 'yarn workspace vue-example dev' ([#9704](https://github.com/storybookjs/storybook/pull/9704))
+- Core: Re-enable failing args tests ([#10126](https://github.com/storybookjs/storybook/pull/10126))
+- Build: Add script & parallelization for running chromatic on examples ([#10125](https://github.com/storybookjs/storybook/pull/10125))
+
+### Dependency Upgrades
+
+- Addon-a11y: Move react to peer dependency ([#9957](https://github.com/storybookjs/storybook/pull/9957))
+
+## 5.3.17 (March 14, 2020)
+
+### Bug Fixes
+
+- Components: Change react-syntax-highlighter from esm to cjs ([#9780](https://github.com/storybookjs/storybook/pull/9780))
+
+## 5.3.16 (March 14, 2020)
+
+Failed NPM publish
+
+## 5.3.15 (March 14, 2020)
+
+### Bug Fixes
+
+- Core: Disables html-webpack-plugin's option to remove script tag types ([#10042](https://github.com/storybookjs/storybook/pull/10042))
+- Addon-actions: Style ActionLogger to preserve whitespace ([#10046](https://github.com/storybookjs/storybook/pull/10046))
+
+### Maintenance
+
+- CI: Fix GitHub unit test workflow ([#9971](https://github.com/storybookjs/storybook/pull/9971))
+
+### Dependency Upgrades
+
+- Security: Remove usage of a vulnerable version of serialize-javascript ([#10071](https://github.com/storybookjs/storybook/pull/10071))
+
+## 6.0.0-alpha.27 (March 13, 2020)
+
+### Features
+
+- Addon-toolbars: Global args support in the toolbar ([#10028](https://github.com/storybookjs/storybook/pull/10028))
+- Addon-actions: Add Storybook Args support ([#10029](https://github.com/storybookjs/storybook/pull/10029))
+- Core: Add globalArgs/globalArgTypes `preview.js` exports ([#10123](https://github.com/storybookjs/storybook/pull/10123))
+
+## 6.0.0-alpha.26 (March 12, 2020)
+
+### Breaking Changes
+
+- Remove deprecated decorators and loaders ([#9951](https://github.com/storybookjs/storybook/pull/9951))
+
+### Features
+
+- Core: Improve support for main.ts/preview.ts files ([#10099](https://github.com/storybookjs/storybook/pull/10099))
+- Addon-docs: Theme with `docs.theme` parameter ([#10114](https://github.com/storybookjs/storybook/pull/10114))
+- Addon-docs: Svelte example ([#7673](https://github.com/storybookjs/storybook/pull/7673))
+
+### Maintenance
+
+- CSF: Promote args/argTypes to first-class metadata ([#10117](https://github.com/storybookjs/storybook/pull/10117))
+
+## 6.0.0-alpha.25 (March 11, 2020)
+
+NOTE: `6.0.0-alpha.24` broken due to bad merge. Sorry!
+
+### Bug Fixes
+
+- Core: Fix initialization of global args ([#10106](https://github.com/storybookjs/storybook/pull/10106))
+
+## 6.0.0-alpha.24 (March 11, 2020)
+
+### Features
+
+- Addon-docs: formatSource snippet customization function ([#10089](https://github.com/storybookjs/storybook/pull/10089))
+- Core: Add global args feature ([#10015](https://github.com/storybookjs/storybook/pull/10015))
+- UI: Migrate from simplebar to overlaybars ([#9375](https://github.com/storybookjs/storybook/pull/9375))
+
+### Bug Fixes
+
+- Core: Fix StoryInput parameters typings ([#10013](https://github.com/storybookjs/storybook/pull/10013))
+- Changed import of react-syntax-highlighter from esm to cjs ([#9292](https://github.com/storybookjs/storybook/pull/9292))
+
+### Maintenance
+
+- Buidld: Setup TeamCity Cloud ([#9875](https://github.com/storybookjs/storybook/pull/9875))
+- Tech/improvements ([#10096](https://github.com/storybookjs/storybook/pull/10096))
+- Core: Move event handlers into module init ([#10085](https://github.com/storybookjs/storybook/pull/10085))
+
+### Dependency Upgrades
+
+- Bump axe-core from 3.5.1 to 3.5.2 ([#10090](https://github.com/storybookjs/storybook/pull/10090))
+
+## 6.0.0-alpha.23 (March 11, 2020)
+
+Failed publish
+
+## 6.0.0-alpha.22 (March 10, 2020)
+
+### Breaking Changes
+
+- MDX: Compile to improved source-loader format ([#10084](https://github.com/storybookjs/storybook/pull/10084))
+
+### Features
+
+- Core: Add args feature ([#10014](https://github.com/storybookjs/storybook/pull/10014))
+
+### Maintenance
+
+- Tech/improvements ([#10083](https://github.com/storybookjs/storybook/pull/10083))
+- Few minor improvements extracted from the inception feature PR ([#10072](https://github.com/storybookjs/storybook/pull/10072))
+- Tech/improvements ([#10070](https://github.com/storybookjs/storybook/pull/10070))
+
+### Dependency Upgrades
+
+- Yarn 2: Add missing dependencies ([#10012](https://github.com/storybookjs/storybook/pull/10012))
+- Security: Remove usage of a vulnerable version of serialize-javascript ([#10071](https://github.com/storybookjs/storybook/pull/10071))
+
+## 6.0.0-alpha.21 (March 5, 2020)
+
+### Breaking Changes
+
+- Core: Overhaul start.js and event emitting/listening ([#9914](https://github.com/storybookjs/storybook/pull/9914))
+
+### Features
+
+- CLI: Support js / jsx / ts / tsx stories in React CSF template ([#10003](https://github.com/storybookjs/storybook/pull/10003))
+- Cra-kitchen-sink : Add Named Color Palette Example(MDX) ([#9709](https://github.com/storybookjs/storybook/pull/9709))
+- Addon-Queryparams: Add addon preset ([#9949](https://github.com/storybookjs/storybook/pull/9949))
+
+### Bug Fixes
+
+- Addon-actions: Style ActionLogger to preserve whitespace ([#10046](https://github.com/storybookjs/storybook/pull/10046))
+- Core: Disables html-webpack-plugin's option to remove script tag types ([#10042](https://github.com/storybookjs/storybook/pull/10042))
+
+### Maintenance
+
+- Tech: Misc improvements ([#10052](https://github.com/storybookjs/storybook/pull/10052))
+- Tech: Misc improvements extracted from composition ([#10040](https://github.com/storybookjs/storybook/pull/10040))
+- CI: change parallelism ([#10041](https://github.com/storybookjs/storybook/pull/10041))
+- Storybook-official: try moving options to `manager.js` ([#9323](https://github.com/storybookjs/storybook/pull/9323))
+- Misc: Add missing dependencies ([#9965](https://github.com/storybookjs/storybook/pull/9965))
+- CI: Fix GitHub unit test workflow ([#9971](https://github.com/storybookjs/storybook/pull/9971))
+
+### Dependency Upgrades
+
+- Upgrade reach router ([#10016](https://github.com/storybookjs/storybook/pull/10016))
+
+## 6.0.0-alpha.20 (February 27, 2020)
+
+### Bug Fixes
+
+- Core: Fix `configFilename` containing backticks ([#9960](https://github.com/storybookjs/storybook/pull/9960))
+
+### Maintenance
+
+- Core: Add stories to demonstrate `layout` ([#9940](https://github.com/storybookjs/storybook/pull/9940))
+
+## 5.3.14 (February 25, 2020)
+
+### Bug Fixes
+
+- Centered: remove `typesVersions` attribute ([#9907](https://github.com/storybookjs/storybook/pull/9907))
+- Props: Fix typescript unspecified default value ([#9873](https://github.com/storybookjs/storybook/pull/9873))
+- Core: Use telejson for websockets channel ([#9867](https://github.com/storybookjs/storybook/pull/9867))
+- Storyshots: Fix support for jsx/tsx config files ([#9834](https://github.com/storybookjs/storybook/pull/9834))
+- MDX: Fix custom classes getting stripped ([#8897](https://github.com/storybookjs/storybook/pull/8897))
+- Typescript: Add downlevel dts for 3.5 ([#9847](https://github.com/storybookjs/storybook/pull/9847))
+
+## 6.0.0-alpha.19 (February 24, 2020)
+
+### Features
+
+- Addon-links: Add preset ([#9932](https://github.com/storybookjs/storybook/pull/9932))
+
+### Bug Fixes
+
+- Addon-docs: Restore IE11 compat on Windows by transpiling acorn-jsx ([#9790](https://github.com/storybookjs/storybook/pull/9790))
+
+## 6.0.0-alpha.18 (February 22, 2020)
+
+### Features
+
+- Addon-knobs: Add `disableForceUpdate` option ([#9447](https://github.com/storybookjs/storybook/pull/9447))
+
+## 6.0.0-alpha.17 (February 21, 2020)
+
+### Bug Fixes
+
+- Props: Fix typescript unspecified default value ([#9873](https://github.com/storybookjs/storybook/pull/9873))
+- Centered: remove `typesVersions` attribute ([#9907](https://github.com/storybookjs/storybook/pull/9907))
+
+### Maintenance
+
+- Misc: Add missing dependencies or peerDependencies ([#9916](https://github.com/storybookjs/storybook/pull/9916))
+
+## 6.0.0-alpha.16 (February 21, 2020)
+
+Failed NPM publish
+
+## 6.0.0-alpha.15 (February 20, 2020)
+
+### Breaking Changes
+
+- Refactor Client API: pull metadata handling code into the store. ([#9877](https://github.com/storybookjs/storybook/pull/9877))
+
+### Features
+
+- Core: Add skip dispose option to ClientApi ([#9868](https://github.com/storybookjs/storybook/pull/9868))
+
+## 6.0.0-alpha.14 (February 19, 2020)
+
+### Features
+
+- CLI: Add Yarn 2 compatibility ([#9866](https://github.com/storybookjs/storybook/pull/9866))
+
+### Bug Fixes
+
+- Typescript: Add downlevel dts for TS3.5 support ([#9902](https://github.com/storybookjs/storybook/pull/9902))
+- CLI: capture unknown arguments the native way ([#9888](https://github.com/storybookjs/storybook/pull/9888))
+- Core: Use telejson for websockets channel ([#9867](https://github.com/storybookjs/storybook/pull/9867))
+
+### Maintenance
+
+- Build: Upgrade to latest version of eslint config ([#9882](https://github.com/storybookjs/storybook/pull/9882))
+- Typescript: Misc improvements ([#9879](https://github.com/storybookjs/storybook/pull/9879))
+- Misc: Project root cleanup ([#9880](https://github.com/storybookjs/storybook/pull/9880))
+
+### Dependency Upgrades
+
+- Bump webpack-cli from 3.3.10 to 3.3.11 ([#9895](https://github.com/storybookjs/storybook/pull/9895))
+- Migrate to leven ([#9881](https://github.com/storybookjs/storybook/pull/9881))
+
+## 6.0.0-alpha.13 (February 15, 2020)
+
+### Bug Fixes
+
+- CLI: fix React Scripts csf-ts story templates ([#9863](https://github.com/storybookjs/storybook/pull/9863))
+- Addon-viewports: Fix Galaxy S9's viewport size ([#9797](https://github.com/storybookjs/storybook/pull/9797))
+- Storyshots: Fix support for jsx/tsx config files ([#9834](https://github.com/storybookjs/storybook/pull/9834))
+
+### Maintenance
+
+- Addon-docs: Snapshot testing and bug reporting for props tables ([#9838](https://github.com/storybookjs/storybook/pull/9838))
+- Typescript: Remove prop types in lib/components ([#9747](https://github.com/storybookjs/storybook/pull/9747))
+- Typescript: Better api consumer ([#9861](https://github.com/storybookjs/storybook/pull/9861))
+
+### Dependency Upgrades
+
+- Bump marko from 4.18.42 to 4.18.45 ([#9839](https://github.com/storybookjs/storybook/pull/9839))
+
+## 6.0.0-alpha.12 (February 14, 2020)
+
+### Maintenance
+
+- Typescript: Improve @storybook/ui types ([#9820](https://github.com/storybookjs/storybook/pull/9820))
+- Misc: Fix deepscan issues ([#9843](https://github.com/storybookjs/storybook/pull/9843)) ([#9842](https://github.com/storybookjs/storybook/pull/9842))
+
+## 6.0.0-alpha.11 (February 13, 2020)
+
+### Breaking Changes
+
+- Core: Remove legacy data from Story Store ([#9810](https://github.com/storybookjs/storybook/pull/9810))
+
+### Bug Fixes
+
+- Addon-docs: Preserve HTML element classes in MDX ([#8897](https://github.com/storybookjs/storybook/pull/8897))
+
+### Maintenance
+
+- CLI: transpile `@storybook/cli` to CJS ([#9807](https://github.com/storybookjs/storybook/pull/9807))
+
+## 5.3.13 (February 12, 2020)
+
+### Bug Fixes
+
+- React: Remove `MiniCssExtractPlugin` for CRA ([#9759](https://github.com/storybookjs/storybook/pull/9759))
+
+### Maintenance
+
+- Build: Fix DLL generation race condition ([#9770](https://github.com/storybookjs/storybook/pull/9770))
+
+## 6.0.0-alpha.10 (February 11, 2020)
+
+### Maintenance
+
+- Typescript: Migrate @storybook/ui ([#9791](https://github.com/storybookjs/storybook/pull/9791))
+
+## 6.0.0-alpha.9 (February 9, 2020)
+
+### Features
+
+- Addon-docs: Add preset options for vue-docgen-api ([#9699](https://github.com/storybookjs/storybook/pull/9699))
+- UI: Add initialActive option parameter ([#9141](https://github.com/storybookjs/storybook/pull/9141))
+
+### Bug Fixes
+
+- Components: Import react-syntax-highlighter/create-element from cjs ([#9795](https://github.com/storybookjs/storybook/pull/9795))
+
+### Maintenance
+
+- Examples: Change main.js to main.ts to show it's possible ([#9775](https://github.com/storybookjs/storybook/pull/9775))
+
+## 6.0.0-alpha.8 (February 8, 2020)
+
+### Maintenance
+
+- Replace lodash named imports with specific imports ([#9787](https://github.com/storybookjs/storybook/pull/9787))
+
+## 6.0.0-alpha.7 (February 7, 2020)
+
+### Bug Fixes
+
+- Core: Support custom addons using JSX ([#9648](https://github.com/storybookjs/storybook/pull/9648))
+- Components: Change react-syntax-highlighter from esm to cjs ([#9780](https://github.com/storybookjs/storybook/pull/9780))
+- Core: Fix manager assets to be routed in express ([#9646](https://github.com/storybookjs/storybook/pull/9646))
+
+### Maintenance
+
+- Examples: Remove addon-notes remnants ([#9782](https://github.com/storybookjs/storybook/pull/9782))
+- Build: Fix DLL generation race condition ([#9770](https://github.com/storybookjs/storybook/pull/9770))
+
+## 6.0.0-alpha.6 (February 5, 2020)
+
+### Bug Fixes
+
+- Core: Fix dev server error - back out bad change ([#9753](https://github.com/storybookjs/storybook/pull/9753))
+- CLI: Fix file path for the Button story ([#9325](https://github.com/storybookjs/storybook/pull/9325))
+
+## 5.3.12 (February 5, 2020)
+
+### Bug Fixes
+
+- Core: Fix dev server error - back out bad change ([#9753](https://github.com/storybookjs/storybook/pull/9753))
+
+## 5.3.11 (February 4, 2020)
+
+### Bug Fixes
+
+- Svelte: Fix Svelte 3 slots for decorators ([#9724](https://github.com/storybookjs/storybook/pull/9724))
+- CLI: Fix file path for Button story ([#9325](https://github.com/storybookjs/storybook/pull/9325))
+- Angular: Emit decorator metadata by default ([#9701](https://github.com/storybookjs/storybook/pull/9701))
+- Storyshots: Fix config via main.ts ([#9577](https://github.com/storybookjs/storybook/pull/9577))
+
+## 6.0.0-alpha.5 (February 4, 2020)
+
+### Features
+
+- Core: Add Yarn 2 compatibility ([#9667](https://github.com/storybookjs/storybook/pull/9667))
+- Addon-a11y: Add preset ([#9697](https://github.com/storybookjs/storybook/pull/9697))
+- Server: Initial support for @storybook/server ([#9722](https://github.com/storybookjs/storybook/pull/9722))
+
+### Bug Fixes
+
+- Svelte: Fix Svelte 3 slots for decorators ([#9724](https://github.com/storybookjs/storybook/pull/9724))
+
+### Maintenance
+
+- Cra-ts-kitchen-sink: Fix stories glob pattern ([#9706](https://github.com/storybookjs/storybook/pull/9706))
+
+## 6.0.0-alpha.4 (February 3, 2020)
+
+### Bug Fixes
+
+- Angular: Emit decorator metadata by default ([#9701](https://github.com/storybookjs/storybook/pull/9701))
+- Addon-centered: Fix clash with addon-docs for react ([#8388](https://github.com/storybookjs/storybook/pull/8388))
+
+### Maintenance
+
+- Add angular 8 and 9 cli fixtures ([#8769](https://github.com/storybookjs/storybook/pull/8769))
+
+### Dependency Upgrades
+
+- Misc upgrades ([#9688](https://github.com/storybookjs/storybook/pull/9688))
+
+## 5.3.10 (February 2, 2020)
+
+### Bug Fixes
+
+- Core: Upgrade `min-css-extract-plugin` to fix SASS loading ([#9652](https://github.com/storybookjs/storybook/pull/9652))
+- CRA: Fix jsconfig support ([#9324](https://github.com/storybookjs/storybook/pull/9324))
+- Web-components: Fix default value for docs prop table ([#9655](https://github.com/storybookjs/storybook/pull/9655))
+- Web-components: Fix types to play nicely with lit-element ([#9557](https://github.com/storybookjs/storybook/pull/9557))
+- UI: Add support for className prop on Form.Field ([#9665](https://github.com/storybookjs/storybook/pull/9665))
+- Addon-storyshots: Remove excess slashes from jest transform warning ([#9616](https://github.com/storybookjs/storybook/pull/9616))
+
+### Maintenance
+
+- Ember: Migrate to new "import { hbs } from 'ember-cli-htmlbars'" ([#9633](https://github.com/storybookjs/storybook/pull/9633))
+- Build: Netlify for examples again ([#9585](https://github.com/storybookjs/storybook/pull/9585))
+- Publish: Remove docs to reduce package size ([#9612](https://github.com/storybookjs/storybook/pull/9612))
+
+## 6.0.0-alpha.3 (February 2, 2020)
+
+### Bug Fixes
+
+- CRA: Fix jsconfig support ([#9324](https://github.com/storybookjs/storybook/pull/9324))
+- UI: Check if docsOnly is set to hide the addon panels ([#9687](https://github.com/storybookjs/storybook/pull/9687))
+
+### Maintenance
+
+- Addon-notes, addon-info: Move to deprecated-addons repo ([#9673](https://github.com/storybookjs/storybook/pull/9673))
+
+## 6.0.0-alpha.2 (January 30, 2020)
+
+### Features
+
+- UI: Configure tabs title, visibility, order and disable ([#9095](https://github.com/storybookjs/storybook/pull/9095))
+- Addon-cssresources: Add hideCode option ([#9627](https://github.com/storybookjs/storybook/pull/9627))
+- UI: Add `viewMode` parameter to control story nav UI ([#9090](https://github.com/storybookjs/storybook/pull/9090))
+
+### Bug Fixes
+
+- Web-components: Fix default value for prop table docs ([#9655](https://github.com/storybookjs/storybook/pull/9655))
+- Web-components: Make TypeScript types play nicely with lit-element ([#9557](https://github.com/storybookjs/storybook/pull/9557))
+- UI: Fix tabs to scroll horizontally ([#9383](https://github.com/storybookjs/storybook/pull/9383))
+- UI: Add support for className prop on Form.Field ([#9665](https://github.com/storybookjs/storybook/pull/9665))
+- Core: Upgrade `min-css-extract-plugin` to fix SASS loading ([#9652](https://github.com/storybookjs/storybook/pull/9652))
+- Adon-docs: Fix ColorPalette styling ([#9643](https://github.com/storybookjs/storybook/pull/9643))
+- Addon-storyshots: Remove excess slashes from jest transform warning ([#9616](https://github.com/storybookjs/storybook/pull/9616))
+
+### Maintenance
+
+- Source-loader: Overhaul to remove decorators, support user-configurable source ([#9547](https://github.com/storybookjs/storybook/pull/9547))
+- Build: Use Netlify for examples again ([#9585](https://github.com/storybookjs/storybook/pull/9585))
+- Ember: Migrate to new "import { hbs } from 'ember-cli-htmlbars'" ([#9633](https://github.com/storybookjs/storybook/pull/9633))
+- Publish: Remove docs to reduce package size ([#9612](https://github.com/storybookjs/storybook/pull/9612))
+
+## 5.3.9 (January 24, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Revert breaking source indentation fix ([#9609](https://github.com/storybookjs/storybook/pull/9609))
+
+## 6.0.0-alpha.1 (January 23, 2020)
+
+### Features
+
+- Core: Enable HMR logging in browser console ([#9535](https://github.com/storybookjs/storybook/pull/9535))
+
+### Bug Fixes
+
+- Addon-knobs: Fix broken link to repo in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530))
+- Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097))
+
+### Maintenance
+
+- React-native: Extract to its own repo ([#9599](https://github.com/storybookjs/storybook/pull/9599))
+- Polymer: Extract to its own repo ([#9596](https://github.com/storybookjs/storybook/pull/9596))
+- Build: Fix some dependencies & ts problems ([#9603](https://github.com/storybookjs/storybook/pull/9603))
+
+## 5.3.8 (January 22, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560))
+- Addon-knobs: Fix broken repo link in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530))
+- Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097))
+- Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
+- Clean usage of `@types/webpack-env` dep in all packages ([#9536](https://github.com/storybookjs/storybook/pull/9536))
+
+## 6.0.0-alpha.0 (January 21, 2020)
+
+### Features
+
+- API: Add useSharedState, useStoryState ([#9566](https://github.com/storybookjs/storybook/pull/9566))
+- Addon-docs: Named colors with ColorPalette ([#9453](https://github.com/storybookjs/storybook/pull/9453))
+- Core: Add preview layouts ([#9229](https://github.com/storybookjs/storybook/pull/9229))
+- Marionette: Add marionette support ([#7981](https://github.com/storybookjs/storybook/pull/7981))
+- Addon-a11y: Support manual run ([#8883](https://github.com/storybookjs/storybook/pull/8883))
+- Addon-cssresources: Disable SyntaxHighlighter for long code ([#9360](https://github.com/storybookjs/storybook/pull/9360))
+- Core: Improve monorepo support ([#8822](https://github.com/storybookjs/storybook/pull/8822))
+
+### Bug Fixes
+
+- Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560))
+- Addon-docs: Remove hard-coded lineHeight in Typeset block ([#9567](https://github.com/storybookjs/storybook/pull/9567))
+- Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
+- Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398))
+- Preact: Fix story function typescript type ([#9123](https://github.com/storybookjs/storybook/pull/9123))
+- UI: Make canvas link a link ([#9257](https://github.com/storybookjs/storybook/pull/9257))
+
+### Maintenance
+
+- Build: the build-storybooks script ([#9569](https://github.com/storybookjs/storybook/pull/9569))
+- CLI: Improve Rax template ([#9574](https://github.com/storybookjs/storybook/pull/9574))
+- Typescript: Migrate polymer ([#9565](https://github.com/storybookjs/storybook/pull/9565))
+- Typescript: Migrate ember ([#9020](https://github.com/storybookjs/storybook/pull/9020))
+- Next 6.0.0 ([#9212](https://github.com/storybookjs/storybook/pull/9212))
+- REMOVE subscription_store ([#9228](https://github.com/storybookjs/storybook/pull/9228))
+
+### Dependency Upgrades
+
+- Update husky to v4 ([#9509](https://github.com/storybookjs/storybook/pull/9509))
+- Bumped react-dev-utils dependency to v10. ([#9579](https://github.com/storybookjs/storybook/pull/9579))
+- Bump babel-plugin-macros from 2.7.1 to 2.8.0 ([#9236](https://github.com/storybookjs/storybook/pull/9236))
+- Bump babel-plugin-emotion from 10.0.23 to 10.0.27 ([#9239](https://github.com/storybookjs/storybook/pull/9239))
+- Bump @babel/runtime from 7.7.4 to 7.7.7 ([#9277](https://github.com/storybookjs/storybook/pull/9277))
+- Bump corejs-upgrade-webpack-plugin from 2.2.0 to 3.0.1 ([#9427](https://github.com/storybookjs/storybook/pull/9427))
+- Bump terser-webpack-plugin from 2.2.1 to 2.3.2 ([#9386](https://github.com/storybookjs/storybook/pull/9386))
+
+## 5.3.7 (January 20, 2020)
+
+### Bug Fixes
+
+- Node-logger: Move `@types/npmlog` to dependencies ([#9538](https://github.com/storybookjs/storybook/pull/9538))
+- Core: Fix legacy story URLs ([#9545](https://github.com/storybookjs/storybook/pull/9545))
+- Addon-docs: Convert default prop value to string ([#9525](https://github.com/storybookjs/storybook/pull/9525))
+- Addon-docs: Preserve Source indentation by default ([#9513](https://github.com/storybookjs/storybook/pull/9513))
+
+## 5.3.6 (January 17, 2020)
+
+### Bug Fixes
+
+- Source-loader: Bypass if file has no exports ([#9505](https://github.com/storybookjs/storybook/pull/9505))
+- Core: Fix default sorting of docs-only stories ([#9504](https://github.com/storybookjs/storybook/pull/9504))
+
+## 5.3.5 (January 17, 2020)
+
+### Bug Fixes
+
+- Core: Fix typo for loading addon-notes/register-panel ([#9497](https://github.com/storybookjs/storybook/pull/9497))
+- Source-loader: Add imports to top of file ([#9492](https://github.com/storybookjs/storybook/pull/9492))
+
+## 5.3.4 (January 16, 2020)
+
+### Bug Fixes
+
+- Core: Fix presets register panel ([#9486](https://github.com/storybookjs/storybook/pull/9486))
+- Core: Fix addon/preset detection for local addons ([#9485](https://github.com/storybookjs/storybook/pull/9485))
+- Core: Fix default story sort ([#9482](https://github.com/storybookjs/storybook/pull/9482))
+
+## 5.3.3 (January 14, 2020)
+
+### Bug Fixes
+
+- UI: Fix edge case where only one legacy separator is defined ([#9425](https://github.com/storybookjs/storybook/pull/9425))
+- Core: Preserve kind load order on HMR when no sortFn is provided ([#9424](https://github.com/storybookjs/storybook/pull/9424))
+- Angular: Fix missing architect properties ([#9390](https://github.com/storybookjs/storybook/pull/9390))
+- Addon-knobs: Fix null knob values in select ([#9416](https://github.com/storybookjs/storybook/pull/9416))
+- Source-loader: Disable linting altogether ([#9417](https://github.com/storybookjs/storybook/pull/9417))
+
+## 5.3.2 (January 13, 2020)
+
+### Bug Fixes
+
+- Source-loader: Disable eslint entirely for generated code ([#9410](https://github.com/storybookjs/storybook/pull/9410))
+
+## 5.3.1 (January 12, 2020)
+
+### Bug Fixes
+
+- Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398))
+
+## 5.3.0 (January 11, 2020)
+
+Storybook 5.3 is here!
+
+- 📝 [Custom documentation in MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc)
+- 🎨 [Multi-framework SB Docs (React, Vue, Angular, WC, Ember)](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- 📦 [Web-components framework support](https://dev.to/open-wc/storybook-for-web-components-on-steroids-4h29)
+- 🔼 [Main.js declarative configuration](https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78)
+
+  5.3 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.3.0-alpha.*`, `5.3.0-beta.*`, and `5.3.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
+
+## 5.3.0-rc.14 (January 11, 2020)
+
+- Merge `master` into `next` for 5.3.0 release ([#9388](https://github.com/storybookjs/storybook/pull/9388))
+
+## 5.3.0-rc.13 (January 11, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix link CORS errors using channel navigate event ([#9381](https://github.com/storybookjs/storybook/pull/9381))
+- CLI: Fix `sb init` to use spawn.sync if creating package.json ([#9359](https://github.com/storybookjs/storybook/pull/9359))
+
+### Maintenance
+
+- Official-storybook: Prop table example for multiple named exports ([#9364](https://github.com/storybookjs/storybook/pull/9364))
+- Addon-docs / web-components: Rename 'props' to 'properties' in props table ([#9362](https://github.com/storybookjs/storybook/pull/9362))
+
+### Dependency Upgrades
+
+- Upgrade @types/webpack-env and @types/node to fix conflicting types ([#9365](https://github.com/storybookjs/storybook/pull/9365))
+
+## 5.3.0-rc.12 (January 8, 2020)
+
+### Bug Fixes
+
+- Nav UI: Nodes are components only if they contain ALL leaf nodes ([#9356](https://github.com/storybookjs/storybook/pull/9356))
+- Core: Fix HMR for global decorators in main.js config ([#9354](https://github.com/storybookjs/storybook/pull/9354))
+- Presets: Fix register.js addons entry ([#9347](https://github.com/storybookjs/storybook/pull/9347))
+- React: Check CRA is installed before showing warning ([#9346](https://github.com/storybookjs/storybook/pull/9346))
+
+## 5.3.0-rc.11 (January 7, 2020)
+
+### Bug Fixes
+
+- Addon-Docs: Handle leaf/non-leaf mixture in docs-mode navigation ([#9321](https://github.com/storybookjs/storybook/pull/9321))
+
+### Dependency Upgrades
+
+- Axe storyshots: move to original @wordpress/jest-puppeteer-axe package ([#9337](https://github.com/storybookjs/storybook/pull/9337))
+
+## 5.3.0-rc.10 (January 6, 2020)
+
+### Bug Fixes
+
+- Revert "Source-loader: Disable no-implicit-any linting" ([#9333](https://github.com/storybookjs/storybook/pull/9333))
+- Addon-docs: Fix scroll behavior on page navigation ([#9331](https://github.com/storybookjs/storybook/pull/9331))
+
+## 5.3.0-rc.9 (January 4, 2020)
+
+### Features
+
+- CSF: Use `__namedExportsOrder` array in loader if provided ([#9315](https://github.com/storybookjs/storybook/pull/9315))
+
+### Bug Fixes
+
+- Router: Add storyNameFromExport to avoid breaking changes ([#9320](https://github.com/storybookjs/storybook/pull/9320))
+
+## 5.3.0-rc.8 (January 3, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Tweak props table paragraph spacing ([#9307](https://github.com/storybookjs/storybook/pull/9307))
+
+### Maintenance
+
+- Add minimal typescript component to official-storybook ([#9308](https://github.com/storybookjs/storybook/pull/9308))
+
+### Dependency Upgrades
+
+- React: Upgrade babel-plugin-react-docgen to 4.0.0 ([#9303](https://github.com/storybookjs/storybook/pull/9303))
+
+## 5.3.0-rc.7 (January 2, 2020)
+
+### Bug Fixes
+
+- Core: Fix babel.js to disable simplify ([#9280](https://github.com/storybookjs/storybook/pull/9280))
+- Storyshots-Puppeteer: Don't infer story ID from its name ([#9291](https://github.com/storybookjs/storybook/pull/9291))
+
+## 5.3.0-rc.6 (December 31, 2019)
+
+This is significant change to `main.js` aka tri-config, dramatically simplifying how addons and presets are registered. See the maintenannce PR for details.
+
+### Maintenance
+
+- Main.js: Combine presets/registers in `addons` field ([#9246](https://github.com/storybookjs/storybook/pull/9246))
+
+## 5.3.0-rc.5 (December 31, 2019)
+
+### Bug Fixes
+
+- Addon-docs: Hide stories block when there are no stories ([#9271](https://github.com/storybookjs/storybook/pull/9271))
+- Source-loader: Disable no-implicit-any linting ([#9272](https://github.com/storybookjs/storybook/pull/9272))
+
+## 5.3.0-rc.4 (December 28, 2019)
+
+### Bug Fixes
+
+- Addon-docs: Fix MDX story rendering with dynamic component titles ([#9248](https://github.com/storybookjs/storybook/pull/9248))
+
+### Maintenance
+
+- Ignore testfixtures directory in storybook publish ([#9244](https://github.com/storybookjs/storybook/pull/9244))
+
+## 5.3.0-rc.3 (December 26, 2019)
+
+### Bug Fixes
+
+- Addon-docs: Include ember files in addon-docs publish ([#9230](https://github.com/storybookjs/storybook/pull/9230))
+
+### Maintenance
+
+- Standalone CSF example ([#9223](https://github.com/storybookjs/storybook/pull/9223))
+
+### Dependency Upgrades
+
+- Addon-info: Upgrade marksy for security ([#9234](https://github.com/storybookjs/storybook/pull/9234))
+
+## 5.3.0-rc.2 (December 26, 2019)
+
+Failed NPM publish
+
+## 5.3.0-rc.1 (December 23, 2019)
+
+### Bug Fixes
+
+- Angular: Add default value to the budgets property ([#9207](https://github.com/storybookjs/storybook/pull/9207))
+- DocsPage: Fix title with new path separator scheme ([#9204](https://github.com/storybookjs/storybook/pull/9204))
+
+### Maintenance
+
+- CLI: Make template `stories` glob more permissive ([#9224](https://github.com/storybookjs/storybook/pull/9224))
+
 ## 5.3.0-rc.0 (December 19, 2019)
 
 ### Features
 
-* CSF: Use `__orderedExports` in loader if provided  ([#9181](https://github.com/storybookjs/storybook/pull/9181))
+- CSF: Use `__orderedExports` in loader if provided ([#9181](https://github.com/storybookjs/storybook/pull/9181))
 
 ### Bug Fixes
 
-* Addon-a11y: Fix selected blindness color filter ([#9179](https://github.com/storybookjs/storybook/pull/9179))
+- Addon-a11y: Fix selected blindness color filter ([#9179](https://github.com/storybookjs/storybook/pull/9179))
 
 ### Maintenance
 
-* Addon-essentials: Remove actions, links, knobs ([#9184](https://github.com/storybookjs/storybook/pull/9184))
+- Addon-essentials: Remove actions, links, knobs ([#9184](https://github.com/storybookjs/storybook/pull/9184))
 
 ## 5.3.0-beta.31 (December 16, 2019)
 
 ### Features
 
-* React: Add support for CRA without overrides ([#9157](https://github.com/storybookjs/storybook/pull/9157))
-* Addon-docs: Add fontFamily prop to Typeset component ([#9158](https://github.com/storybookjs/storybook/pull/9158))
+- React: Add support for CRA without overrides ([#9157](https://github.com/storybookjs/storybook/pull/9157))
+- Addon-docs: Add fontFamily prop to Typeset component ([#9158](https://github.com/storybookjs/storybook/pull/9158))
 
 ### Bug Fixes
 
-* Core: Emit store render event synchronously if we can ([#9087](https://github.com/storybookjs/storybook/pull/9087))
+- Core: Emit store render event synchronously if we can ([#9087](https://github.com/storybookjs/storybook/pull/9087))
 
 ## 5.3.0-beta.30 (December 16, 2019)
 
@@ -47,11 +1345,11 @@ Failed NPM publish
 
 ### Bug Fixes
 
-* Addon-docs: Hide addons on  docs-only stories ([#9125](https://github.com/storybookjs/storybook/pull/9125))
+- Addon-docs: Hide addons on docs-only stories ([#9125](https://github.com/storybookjs/storybook/pull/9125))
 
 ### Dependency Upgrades
 
-* Upgrade vue-docgen-loader to 1.3.0-beta.0 ([#9155](https://github.com/storybookjs/storybook/pull/9155))
+- Upgrade vue-docgen-loader to 1.3.0-beta.0 ([#9155](https://github.com/storybookjs/storybook/pull/9155))
 
 ## 5.3.0-beta.24 (December 15, 2019)
 
@@ -61,82 +1359,82 @@ Failed NPM publish
 
 ### Features
 
-* Addon-docs: Render components as leaves in `--docs` mode ([#7700](https://github.com/storybookjs/storybook/pull/7700))
+- Addon-docs: Render components as leaves in `--docs` mode ([#7700](https://github.com/storybookjs/storybook/pull/7700))
 
 ### Bug Fixes
 
-* Addon-viewport: Allow viewports config to be optional ([#9137](https://github.com/storybookjs/storybook/pull/9137))
+- Addon-viewport: Allow viewports config to be optional ([#9137](https://github.com/storybookjs/storybook/pull/9137))
 
 ## 5.3.0-beta.22 (December 12, 2019)
 
 ### Bug Fixes
 
-* React: Fix CRA preset check ([#9142](https://github.com/storybookjs/storybook/pull/9142))
+- React: Fix CRA preset check ([#9142](https://github.com/storybookjs/storybook/pull/9142))
 
 ### Maintenance
 
-* Build: Change CI to chromatic on all examples ([#9114](https://github.com/storybookjs/storybook/pull/9114))
-* Web-components: Clean up example `custom-elements.json` and expose `defaultValue` ([#9107](https://github.com/storybookjs/storybook/pull/9107))
+- Build: Change CI to chromatic on all examples ([#9114](https://github.com/storybookjs/storybook/pull/9114))
+- Web-components: Clean up example `custom-elements.json` and expose `defaultValue` ([#9107](https://github.com/storybookjs/storybook/pull/9107))
 
 ### Dependency Upgrades
 
-* Restore main jscodeshift package ([#9140](https://github.com/storybookjs/storybook/pull/9140))
+- Restore main jscodeshift package ([#9140](https://github.com/storybookjs/storybook/pull/9140))
 
 ## 5.3.0-beta.21 (December 11, 2019)
 
 ### Features
 
-* CLI: Add Yarn workspaces support for init command ([#9104](https://github.com/storybookjs/storybook/pull/9104))
+- CLI: Add Yarn workspaces support for init command ([#9104](https://github.com/storybookjs/storybook/pull/9104))
 
 ### Bug Fixes
 
-* Addon-docs: Update MDX compiler to fix knobs ([#9118](https://github.com/storybookjs/storybook/pull/9118))
-* CLI: Add web-components to sb init ([#9106](https://github.com/storybookjs/storybook/pull/9106))
+- Addon-docs: Update MDX compiler to fix knobs ([#9118](https://github.com/storybookjs/storybook/pull/9118))
+- CLI: Add web-components to sb init ([#9106](https://github.com/storybookjs/storybook/pull/9106))
 
 ### Maintenance
 
-* UI: Remove css usage ([#9003](https://github.com/storybookjs/storybook/pull/9003))
+- UI: Remove css usage ([#9003](https://github.com/storybookjs/storybook/pull/9003))
 
 ## 5.3.0-beta.20 (December 9, 2019)
 
 ### Features
 
-* Addon-essentials: Remove docs from essentials ([#9093](https://github.com/storybookjs/storybook/pull/9093))
+- Addon-essentials: Remove docs from essentials ([#9093](https://github.com/storybookjs/storybook/pull/9093))
 
 ### Bug Fixes
 
-* Source-loader: Handle includeStories/excludeStories in CSF ([#9100](https://github.com/storybookjs/storybook/pull/9100))
-* Source-loader: Support function declaration story exports ([#9092](https://github.com/storybookjs/storybook/pull/9092))
+- Source-loader: Handle includeStories/excludeStories in CSF ([#9100](https://github.com/storybookjs/storybook/pull/9100))
+- Source-loader: Support function declaration story exports ([#9092](https://github.com/storybookjs/storybook/pull/9092))
 
 ### Maintenance
 
-* CSF: Refactor router utils into CSF library ([#9099](https://github.com/storybookjs/storybook/pull/9099))
+- CSF: Refactor router utils into CSF library ([#9099](https://github.com/storybookjs/storybook/pull/9099))
 
 ## 5.3.0-beta.19 (December 7, 2019)
 
 ### Features
 
-* Addon-essentials ([#9019](https://github.com/storybookjs/storybook/pull/9019))
+- Addon-essentials ([#9019](https://github.com/storybookjs/storybook/pull/9019))
 
 ### Bug Fixes
 
-* Addon-docs: Fix prop table default value for web-components ([#9086](https://github.com/storybookjs/storybook/pull/9086))
+- Addon-docs: Fix prop table default value for web-components ([#9086](https://github.com/storybookjs/storybook/pull/9086))
 
 ## 5.3.0-beta.18 (December 6, 2019)
 
 ### Features
 
-* CLI: Change generators to Triconfig ([#9075](https://github.com/storybookjs/storybook/pull/9075))
-* Addon-docs: Add Props for Ember ([#9067](https://github.com/storybookjs/storybook/pull/9067))
-* MDX: Handle quotes / template literals in title ([#9069](https://github.com/storybookjs/storybook/pull/9069))
+- CLI: Change generators to Triconfig ([#9075](https://github.com/storybookjs/storybook/pull/9075))
+- Addon-docs: Add Props for Ember ([#9067](https://github.com/storybookjs/storybook/pull/9067))
+- MDX: Handle quotes / template literals in title ([#9069](https://github.com/storybookjs/storybook/pull/9069))
 
 ### Bug Fixes
 
-* Addon-docs: MDX Octicon anchors should not be tabbable ([#9063](https://github.com/storybookjs/storybook/pull/9063))
+- Addon-docs: MDX Octicon anchors should not be tabbable ([#9063](https://github.com/storybookjs/storybook/pull/9063))
 
 ### Dependency Upgrades
 
-* Addon-docs: Upgrade vue-docgen-loader ([#9082](https://github.com/storybookjs/storybook/pull/9082))
+- Addon-docs: Upgrade vue-docgen-loader ([#9082](https://github.com/storybookjs/storybook/pull/9082))
 
 ## 5.3.0-beta.17 (December 6, 2019)
 
@@ -146,145 +1444,145 @@ NPM publish failed
 
 ### Features
 
-* Addon-docs: DocsPage Heading and Subheading anchor links ([#9060](https://github.com/storybookjs/storybook/pull/9060))
+- Addon-docs: DocsPage Heading and Subheading anchor links ([#9060](https://github.com/storybookjs/storybook/pull/9060))
 
 ### Bug Fixes
 
-* Core: Fix `api.selectStory` for component permalinks ([#9054](https://github.com/storybookjs/storybook/pull/9054))
-* Storyshots: Escape Windows fileNames ([#9061](https://github.com/storybookjs/storybook/pull/9061))
+- Core: Fix `api.selectStory` for component permalinks ([#9054](https://github.com/storybookjs/storybook/pull/9054))
+- Storyshots: Escape Windows fileNames ([#9061](https://github.com/storybookjs/storybook/pull/9061))
 
 ### Dependency Upgrades
 
-* Addon-docs: Upgrade vue-docgen-api ([#9066](https://github.com/storybookjs/storybook/pull/9066))
+- Addon-docs: Upgrade vue-docgen-api ([#9066](https://github.com/storybookjs/storybook/pull/9066))
 
 ## 5.3.0-beta.15 (December 4, 2019)
 
 ### Features
 
-* Addon-docs: MDX Linking ([#9051](https://github.com/storybookjs/storybook/pull/9051))
+- Addon-docs: MDX Linking ([#9051](https://github.com/storybookjs/storybook/pull/9051))
 
 ## 5.2.8 (December 2, 2019)
 
 ### Bug Fixes
 
-* UI: Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))
-* Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
-* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
+- UI: Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))
+- Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
+- Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
 
 ## 5.3.0-beta.14 (December 2, 2019)
 
 ### Features
 
-* Addon-docs: Increase Props summary and func length ([#8998](https://github.com/storybookjs/storybook/pull/8998))
+- Addon-docs: Increase Props summary and func length ([#8998](https://github.com/storybookjs/storybook/pull/8998))
 
 ### Bug Fixes
 
-* Addon-docs: Restore IE11 compat by transpiling acorn-jsx ([#9021](https://github.com/storybookjs/storybook/pull/9021))
-* Source-loader: Handle template strings in CSF title ([#8995](https://github.com/storybookjs/storybook/pull/8995))
-* CLI: Fix various storiesof-to-csf cases based on chromatic stories upgrade ([#9013](https://github.com/storybookjs/storybook/pull/9013))
+- Addon-docs: Restore IE11 compat by transpiling acorn-jsx ([#9021](https://github.com/storybookjs/storybook/pull/9021))
+- Source-loader: Handle template strings in CSF title ([#8995](https://github.com/storybookjs/storybook/pull/8995))
+- CLI: Fix various storiesof-to-csf cases based on chromatic stories upgrade ([#9013](https://github.com/storybookjs/storybook/pull/9013))
 
 ## 5.2.7 (November 30, 2019)
 
 ### Bug Fixes
 
-* Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
-* Addon-viewports: Fix missing TypeScript types ([#8848](https://github.com/storybookjs/storybook/pull/8848))
-* Addon-A11y: Show errors, reset config properly ([#8779](https://github.com/storybookjs/storybook/pull/8779))
-* UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
-* UI: Fix MobileLayout component error on master ([#8941](https://github.com/storybookjs/storybook/pull/8941))
-* Addon-analytics: Fix 'path is required in .pageview()' ([#8468](https://github.com/storybookjs/storybook/pull/8468))
+- Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
+- Addon-viewports: Fix missing TypeScript types ([#8848](https://github.com/storybookjs/storybook/pull/8848))
+- Addon-A11y: Show errors, reset config properly ([#8779](https://github.com/storybookjs/storybook/pull/8779))
+- UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
+- UI: Fix MobileLayout component error on master ([#8941](https://github.com/storybookjs/storybook/pull/8941))
+- Addon-analytics: Fix 'path is required in .pageview()' ([#8468](https://github.com/storybookjs/storybook/pull/8468))
 
 ## 5.3.0-beta.13 (November 30, 2019)
 
 ### Bug Fixes
 
-* Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
+- Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
 
 ### Maintenance
 
-* CLI: Code cleanup ([#9004](https://github.com/storybookjs/storybook/pull/9004))
+- CLI: Code cleanup ([#9004](https://github.com/storybookjs/storybook/pull/9004))
 
 ## 5.3.0-beta.12 (November 29, 2019)
 
 ### Features
 
-* Storyshots: Support a11y tests, generic tests ([#8934](https://github.com/storybookjs/storybook/pull/8934))
+- Storyshots: Support a11y tests, generic tests ([#8934](https://github.com/storybookjs/storybook/pull/8934))
 
 ### Maintenance
 
-* Dev: Add vscode launch.json for debugging ([#8993](https://github.com/storybookjs/storybook/pull/8993))
-* UI: viewMode proptypes changed to any string ([#8994](https://github.com/storybookjs/storybook/pull/8994))
-* Addon-docs: Remove deprecated framework-specific docs presets ([#8985](https://github.com/storybookjs/storybook/pull/8985))
+- Dev: Add vscode launch.json for debugging ([#8993](https://github.com/storybookjs/storybook/pull/8993))
+- UI: viewMode proptypes changed to any string ([#8994](https://github.com/storybookjs/storybook/pull/8994))
+- Addon-docs: Remove deprecated framework-specific docs presets ([#8985](https://github.com/storybookjs/storybook/pull/8985))
 
 ### Dependency Upgrades
 
-* Addon-docs: Upgrade MDX dependencies ([#8991](https://github.com/storybookjs/storybook/pull/8991))
+- Addon-docs: Upgrade MDX dependencies ([#8991](https://github.com/storybookjs/storybook/pull/8991))
 
 ## 5.3.0-beta.11 (November 28, 2019)
 
 ### Features
 
-* UI: Escape hatch CSS on for "active" tablist buttons ([#8989](https://github.com/storybookjs/storybook/pull/8989))
-* Addon-docs: Added dark theme option to source component ([#8732](https://github.com/storybookjs/storybook/pull/8732))
-* Triconfig: Configure UI options overhaul ([#8871](https://github.com/storybookjs/storybook/pull/8871))
+- UI: Escape hatch CSS on for "active" tablist buttons ([#8989](https://github.com/storybookjs/storybook/pull/8989))
+- Addon-docs: Added dark theme option to source component ([#8732](https://github.com/storybookjs/storybook/pull/8732))
+- Triconfig: Configure UI options overhaul ([#8871](https://github.com/storybookjs/storybook/pull/8871))
 
 ### Bug Fixes
 
-* Addon-docs: Fix vertical alignment of props expandable ([#8953](https://github.com/storybookjs/storybook/pull/8953))
-* Addon-links: Fix return type of linkTo and examples ([#8975](https://github.com/storybookjs/storybook/pull/8975))
+- Addon-docs: Fix vertical alignment of props expandable ([#8953](https://github.com/storybookjs/storybook/pull/8953))
+- Addon-links: Fix return type of linkTo and examples ([#8975](https://github.com/storybookjs/storybook/pull/8975))
 
 ## 5.3.0-beta.10 (November 27, 2019)
 
 ### Features
 
-* MDX: Allow user to override `docs.container` parameter ([#8968](https://github.com/storybookjs/storybook/pull/8968))
-* Addon-docs: Increase docs content wrapper max-width to 1000px ([#8970](https://github.com/storybookjs/storybook/pull/8970))
-* Addon-docs: Prop table support for Angular directives ([#8922](https://github.com/storybookjs/storybook/pull/8922))
-* Addon-docs: Increase width of props table type column ([#8950](https://github.com/storybookjs/storybook/pull/8950))
+- MDX: Allow user to override `docs.container` parameter ([#8968](https://github.com/storybookjs/storybook/pull/8968))
+- Addon-docs: Increase docs content wrapper max-width to 1000px ([#8970](https://github.com/storybookjs/storybook/pull/8970))
+- Addon-docs: Prop table support for Angular directives ([#8922](https://github.com/storybookjs/storybook/pull/8922))
+- Addon-docs: Increase width of props table type column ([#8950](https://github.com/storybookjs/storybook/pull/8950))
 
 ### Bug Fixes
 
-* Addon-docs: Fix `Preview` theming escape hatch ([#8969](https://github.com/storybookjs/storybook/pull/8969))
-* Core: Don't try to require .ts files from dist ([#8971](https://github.com/storybookjs/storybook/pull/8971))
-* Core: Use logger in base-webpack.config.js ([#8966](https://github.com/storybookjs/storybook/pull/8966))
+- Addon-docs: Fix `Preview` theming escape hatch ([#8969](https://github.com/storybookjs/storybook/pull/8969))
+- Core: Don't try to require .ts files from dist ([#8971](https://github.com/storybookjs/storybook/pull/8971))
+- Core: Use logger in base-webpack.config.js ([#8966](https://github.com/storybookjs/storybook/pull/8966))
 
 ### Maintenance
 
-* Examples: Add "debug" script for storybook-official ([#8973](https://github.com/storybookjs/storybook/pull/8973))
-* Build: Upgrade to node 10 on netlify ([#8967](https://github.com/storybookjs/storybook/pull/8967))
-* Core/triconfig everywhere: migrate examples ([#8942](https://github.com/storybookjs/storybook/pull/8942))
+- Examples: Add "debug" script for storybook-official ([#8973](https://github.com/storybookjs/storybook/pull/8973))
+- Build: Upgrade to node 10 on netlify ([#8967](https://github.com/storybookjs/storybook/pull/8967))
+- Core/triconfig everywhere: migrate examples ([#8942](https://github.com/storybookjs/storybook/pull/8942))
 
 ## 5.3.0-beta.9 (November 26, 2019)
 
 ### Features
 
-* Storyshots: Remove abandoned storyshots when run with `-u` flag ([#8889](https://github.com/storybookjs/storybook/pull/8889))
+- Storyshots: Remove abandoned storyshots when run with `-u` flag ([#8889](https://github.com/storybookjs/storybook/pull/8889))
 
 ### Bug Fixes
 
-* Addon-docs: Support subcomponents as a top-level default export ([#8931](https://github.com/storybookjs/storybook/pull/8931))
+- Addon-docs: Support subcomponents as a top-level default export ([#8931](https://github.com/storybookjs/storybook/pull/8931))
 
 ### Dependency Upgrades
 
-* Core: Add missing dependencies  ([#8945](https://github.com/storybookjs/storybook/pull/8945))
+- Core: Add missing dependencies ([#8945](https://github.com/storybookjs/storybook/pull/8945))
 
 ## 5.3.0-beta.8 (November 26, 2019)
 
 ### Features
 
-* Storyshots-puppeteer: Add afterScreenshot handler ([#8092](https://github.com/storybookjs/storybook/pull/8092))
+- Storyshots-puppeteer: Add afterScreenshot handler ([#8092](https://github.com/storybookjs/storybook/pull/8092))
 
 ### Bug Fixes
 
-* Core: Upgrade telejson to fix cross-origin frame error ([#8940](https://github.com/storybookjs/storybook/pull/8940))
+- Core: Upgrade telejson to fix cross-origin frame error ([#8940](https://github.com/storybookjs/storybook/pull/8940))
 
 ### Maintenance
 
-* Build: Fix image snapshots setup in official-storybook ([#8932](https://github.com/storybookjs/storybook/pull/8932))
+- Build: Fix image snapshots setup in official-storybook ([#8932](https://github.com/storybookjs/storybook/pull/8932))
 
 ### Dependency Upgrades
 
-* Core: Add @babel/core peer dependency to  @storybook/core ([#8933](https://github.com/storybookjs/storybook/pull/8933))
+- Core: Add @babel/core peer dependency to @storybook/core ([#8933](https://github.com/storybookjs/storybook/pull/8933))
 
 ## 5.3.0-beta.7 (November 26, 2019)
 
@@ -294,21 +1592,21 @@ Failed npm publish
 
 ### Features
 
-* Presets: dynamic preset injection ([#8921](https://github.com/storybookjs/storybook/pull/8921))
+- Presets: dynamic preset injection ([#8921](https://github.com/storybookjs/storybook/pull/8921))
 
 ### Bug Fixes
 
-* Revert "feat: use `puppeteer-core` instead of `puppeteer`" ([#8925](https://github.com/storybookjs/storybook/pull/8925))
-* Addon-docs: Fix props detail tooltip to prevent cutting end of content ([#8923](https://github.com/storybookjs/storybook/pull/8923))
+- Revert "feat: use `puppeteer-core` instead of `puppeteer`" ([#8925](https://github.com/storybookjs/storybook/pull/8925))
+- Addon-docs: Fix props detail tooltip to prevent cutting end of content ([#8923](https://github.com/storybookjs/storybook/pull/8923))
 
 ### Maintenance
 
-* Addon-docs: Base code to improve the props table for TS ([#8905](https://github.com/storybookjs/storybook/pull/8905))
-* Build: Fix now deploy ([#8929](https://github.com/storybookjs/storybook/pull/8929))
+- Addon-docs: Base code to improve the props table for TS ([#8905](https://github.com/storybookjs/storybook/pull/8905))
+- Build: Fix now deploy ([#8929](https://github.com/storybookjs/storybook/pull/8929))
 
 ### Dependency Upgrades
 
-* Miscellaneous upgrades ([#8912](https://github.com/storybookjs/storybook/pull/8912))
+- Miscellaneous upgrades ([#8912](https://github.com/storybookjs/storybook/pull/8912))
 
 ## 5.3.0-beta.5 (November 23, 2019)
 
@@ -322,47 +1620,47 @@ Failed npm publish
 
 ### Features
 
-* Addon-docs: Rich props table UI ([#8887](https://github.com/storybookjs/storybook/pull/8887))
-* Addon-docs: Improve basic support for Flow props ([#8890](https://github.com/storybookjs/storybook/pull/8890))
-* CLI: Avoid id changes after `storiesof-to-csf` migration ([#8856](https://github.com/storybookjs/storybook/pull/8856))
+- Addon-docs: Rich props table UI ([#8887](https://github.com/storybookjs/storybook/pull/8887))
+- Addon-docs: Improve basic support for Flow props ([#8890](https://github.com/storybookjs/storybook/pull/8890))
+- CLI: Avoid id changes after `storiesof-to-csf` migration ([#8856](https://github.com/storybookjs/storybook/pull/8856))
 
 ### Bug Fixes
 
-* Addon-docs: Fix props table for sections props ([#8904](https://github.com/storybookjs/storybook/pull/8904))
-* Addon-docs: Fix Description block when no component provided ([#8902](https://github.com/storybookjs/storybook/pull/8902))
-* Angular: Fix project without `architect.build` option ([#6737](https://github.com/storybookjs/storybook/pull/6737))
+- Addon-docs: Fix props table for sections props ([#8904](https://github.com/storybookjs/storybook/pull/8904))
+- Addon-docs: Fix Description block when no component provided ([#8902](https://github.com/storybookjs/storybook/pull/8902))
+- Angular: Fix project without `architect.build` option ([#6737](https://github.com/storybookjs/storybook/pull/6737))
 
 ### Maintenance
 
-* Addon-docs: Docgen lib maintenance ([#8896](https://github.com/storybookjs/storybook/pull/8896))
-* Examples: Fix stories glob in official-storybook ([#8888](https://github.com/storybookjs/storybook/pull/8888))
+- Addon-docs: Docgen lib maintenance ([#8896](https://github.com/storybookjs/storybook/pull/8896))
+- Examples: Fix stories glob in official-storybook ([#8888](https://github.com/storybookjs/storybook/pull/8888))
 
 ## 5.3.0-beta.2 (November 19, 2019)
 
 ### Features
 
-* Addon-docs: Customizable DocPage doc blocks ([#8855](https://github.com/storybookjs/storybook/pull/8855))
+- Addon-docs: Customizable DocPage doc blocks ([#8855](https://github.com/storybookjs/storybook/pull/8855))
 
 ### Bug Fixes
 
-* Addon-docs: Add back Props "exclude" support ([#8868](https://github.com/storybookjs/storybook/pull/8868))
-* Addon-docs: Fix MDX component permalinking ([#8872](https://github.com/storybookjs/storybook/pull/8872))
-* Addon-docs: Fix regression to @ignore in Props ([#8867](https://github.com/storybookjs/storybook/pull/8867))
+- Addon-docs: Add back Props "exclude" support ([#8868](https://github.com/storybookjs/storybook/pull/8868))
+- Addon-docs: Fix MDX component permalinking ([#8872](https://github.com/storybookjs/storybook/pull/8872))
+- Addon-docs: Fix regression to @ignore in Props ([#8867](https://github.com/storybookjs/storybook/pull/8867))
 
 ### Maintenance
 
-* Addon-docs: Add tests for prop types default value ([#8869](https://github.com/storybookjs/storybook/pull/8869))
+- Addon-docs: Add tests for prop types default value ([#8869](https://github.com/storybookjs/storybook/pull/8869))
 
 ## 5.3.0-beta.1 (November 18, 2019)
 
 ### Features
 
-* Addon-google-analytics: Add gaOption config ([#8859](https://github.com/storybookjs/storybook/pull/8859))
+- Addon-google-analytics: Add gaOption config ([#8859](https://github.com/storybookjs/storybook/pull/8859))
 
 ### Bug Fixes
 
-* Addon-docs: Fix props table props sorting for PropTypes ([#8857](https://github.com/storybookjs/storybook/pull/8857))
-* Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))
+- Addon-docs: Fix props table props sorting for PropTypes ([#8857](https://github.com/storybookjs/storybook/pull/8857))
+- Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))
 
 ## 5.3.0-beta.0 (November 16, 2019)
 
@@ -379,294 +1677,294 @@ See the [latest changelog](https://github.com/storybookjs/storybook/blob/next/CH
 
 ### Features
 
-* Triconfig: Declarative story definition in main.js ([#8748](https://github.com/storybookjs/storybook/pull/8748))
-* Storyshots: Triconfig support ([#8765](https://github.com/storybookjs/storybook/pull/8765))
+- Triconfig: Declarative story definition in main.js ([#8748](https://github.com/storybookjs/storybook/pull/8748))
+- Storyshots: Triconfig support ([#8765](https://github.com/storybookjs/storybook/pull/8765))
 
 ### Bug Fixes
 
-* Addon-viewports: Fix missing TypeScript types ([#8848](https://github.com/storybookjs/storybook/pull/8848))
+- Addon-viewports: Fix missing TypeScript types ([#8848](https://github.com/storybookjs/storybook/pull/8848))
 
 ### Dependency Upgrades
 
-* Dependency upgrades ([#8847](https://github.com/storybookjs/storybook/pull/8847))
+- Dependency upgrades ([#8847](https://github.com/storybookjs/storybook/pull/8847))
 
 ## 5.3.0-alpha.46 (November 16, 2019)
 
 ### Features
 
-* Core: allow uppercase path names in url query param ([#8516](https://github.com/storybookjs/storybook/pull/8516))
+- Core: allow uppercase path names in url query param ([#8516](https://github.com/storybookjs/storybook/pull/8516))
 
 ### Bug Fixes
 
-* Core: Fix null version check bug ([#8806](https://github.com/storybookjs/storybook/pull/8806))
-* Addon-notes: Fix anchor links ([#8132](https://github.com/storybookjs/storybook/pull/8132))
+- Core: Fix null version check bug ([#8806](https://github.com/storybookjs/storybook/pull/8806))
+- Addon-notes: Fix anchor links ([#8132](https://github.com/storybookjs/storybook/pull/8132))
 
 ### Maintenance
 
-* Refactor: remove useless variables from eslint config ([#8843](https://github.com/storybookjs/storybook/pull/8843))
+- Refactor: remove useless variables from eslint config ([#8843](https://github.com/storybookjs/storybook/pull/8843))
 
 ### Dependency Upgrades
 
-* Addon-docs: Replace `storybook-addon-vue-info` with `vue-docgen-loader` ([#8831](https://github.com/storybookjs/storybook/pull/8831))
+- Addon-docs: Replace `storybook-addon-vue-info` with `vue-docgen-loader` ([#8831](https://github.com/storybookjs/storybook/pull/8831))
 
 ## 5.3.0-alpha.45 (November 14, 2019)
 
 ### Breaking Changes
 
-* CSF: Deprecate displayName parameter ([#8775](https://github.com/storybookjs/storybook/pull/8775))
+- CSF: Deprecate displayName parameter ([#8775](https://github.com/storybookjs/storybook/pull/8775))
 
 ### Features
 
-* Addon-docs: Rich prop tables ([#8826](https://github.com/storybookjs/storybook/pull/8826))
-* Core: Simplified hierarchy separators ([#8796](https://github.com/storybookjs/storybook/pull/8796))
-* CLI: Upgrade hierarchy separator codemod + examples ([#8818](https://github.com/storybookjs/storybook/pull/8818))
-* CLI: Addon postinstall hooks ([#8700](https://github.com/storybookjs/storybook/pull/8700))
-* CSF/MDX: Add component id for permalinks ([#8808](https://github.com/storybookjs/storybook/pull/8808))
-* Addon-knobs: Add object[] support for select ([#7957](https://github.com/storybookjs/storybook/pull/7957))
+- Addon-docs: Rich prop tables ([#8826](https://github.com/storybookjs/storybook/pull/8826))
+- Core: Simplified hierarchy separators ([#8796](https://github.com/storybookjs/storybook/pull/8796))
+- CLI: Upgrade hierarchy separator codemod + examples ([#8818](https://github.com/storybookjs/storybook/pull/8818))
+- CLI: Addon postinstall hooks ([#8700](https://github.com/storybookjs/storybook/pull/8700))
+- CSF/MDX: Add component id for permalinks ([#8808](https://github.com/storybookjs/storybook/pull/8808))
+- Addon-knobs: Add object[] support for select ([#7957](https://github.com/storybookjs/storybook/pull/7957))
 
 ### Bug Fixes
 
-* Addon-A11y: Show errors, reset config properly ([#8779](https://github.com/storybookjs/storybook/pull/8779))
+- Addon-A11y: Show errors, reset config properly ([#8779](https://github.com/storybookjs/storybook/pull/8779))
 
 ## 5.3.0-alpha.44 (November 13, 2019)
 
 ### Features
 
-* React-native: Add theming to ondevice-addons ([#8738](https://github.com/storybookjs/storybook/pull/8738))
+- React-native: Add theming to ondevice-addons ([#8738](https://github.com/storybookjs/storybook/pull/8738))
 
 ### Bug Fixes
 
-* UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
-* Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
+- UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
+- Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
 
 ### Maintenance
 
-* Svelte: Migrate @storybook/svelte to Typescript ([#8770](https://github.com/storybookjs/storybook/pull/8770))
+- Svelte: Migrate @storybook/svelte to Typescript ([#8770](https://github.com/storybookjs/storybook/pull/8770))
 
 ## 5.3.0-alpha.43 (November 11, 2019)
 
 ### Bug Fixes
 
-* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
+- Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
 
 ### Maintenance
 
-* Presets / Addon-docs: Cleanup framework-specific presets ([#8782](https://github.com/storybookjs/storybook/pull/8782))
-* Add @babel/runtime to workspace ([#8774](https://github.com/storybookjs/storybook/pull/8774))
+- Presets / Addon-docs: Cleanup framework-specific presets ([#8782](https://github.com/storybookjs/storybook/pull/8782))
+- Add @babel/runtime to workspace ([#8774](https://github.com/storybookjs/storybook/pull/8774))
 
 ## 5.2.6 (November 9, 2019)
 
 ### Bug Fixes
 
-* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
-* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
-* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
-* Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708))
-* Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366))
-* Core: Revert webpack rebuild changes in node_modules  ([#8657](https://github.com/storybookjs/storybook/pull/8657))
-* Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633))
-* Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629))
-* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
-* Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
-* Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
-* Ondevice-knobs: Fix peer dep ([#8644](https://github.com/storybookjs/storybook/pull/8644))
+- Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
+- Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
+- UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
+- Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708))
+- Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366))
+- Core: Revert webpack rebuild changes in node_modules ([#8657](https://github.com/storybookjs/storybook/pull/8657))
+- Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633))
+- Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629))
+- React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
+- Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
+- Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
+- Ondevice-knobs: Fix peer dep ([#8644](https://github.com/storybookjs/storybook/pull/8644))
 
 ## 5.3.0-alpha.42 (November 9, 2019)
 
 ### Bug Fixes
 
-* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
-* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
+- Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
+- Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
 
 ### Maintenance
 
-* React-native: Update compilation target - it was compiled for old browsers ([#8698](https://github.com/storybookjs/storybook/pull/8698))
+- React-native: Update compilation target - it was compiled for old browsers ([#8698](https://github.com/storybookjs/storybook/pull/8698))
 
 ## 5.3.0-alpha.41 (November 7, 2019)
 
 ### Features
 
-* Addon-docs: Render array of shape properly in props table ([#8707](https://github.com/storybookjs/storybook/pull/8707))
-* Addon-docs: Render params description in props table, support @ignore ([#8702](https://github.com/storybookjs/storybook/pull/8702))
+- Addon-docs: Render array of shape properly in props table ([#8707](https://github.com/storybookjs/storybook/pull/8707))
+- Addon-docs: Render params description in props table, support @ignore ([#8702](https://github.com/storybookjs/storybook/pull/8702))
 
 ### Bug Fixes
 
-* Addon-docs: Fix "Cannot read property 'props'" ([#8731](https://github.com/storybookjs/storybook/pull/8731))
-* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
-* Angular: Fix loading baseConfig if no angular.json found ([#8727](https://github.com/storybookjs/storybook/pull/8727))
+- Addon-docs: Fix "Cannot read property 'props'" ([#8731](https://github.com/storybookjs/storybook/pull/8731))
+- UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
+- Angular: Fix loading baseConfig if no angular.json found ([#8727](https://github.com/storybookjs/storybook/pull/8727))
 
 ## 5.3.0-alpha.40 (November 6, 2019)
 
 ### Features
 
-* TriConfig configuration refactor ([#8597](https://github.com/storybookjs/storybook/pull/8597))
-* Presets: Ability to combine presets into another preset ([#6828](https://github.com/storybookjs/storybook/pull/6828))
+- TriConfig configuration refactor ([#8597](https://github.com/storybookjs/storybook/pull/8597))
+- Presets: Ability to combine presets into another preset ([#6828](https://github.com/storybookjs/storybook/pull/6828))
 
 ### Bug Fixes
 
-* Theming: Fix invisible hr styles in typography ([#8659](https://github.com/storybookjs/storybook/pull/8659))
+- Theming: Fix invisible hr styles in typography ([#8659](https://github.com/storybookjs/storybook/pull/8659))
 
 ### Maintenance
 
-* Build: caching to github workflows ([#8724](https://github.com/storybookjs/storybook/pull/8724))
+- Build: caching to github workflows ([#8724](https://github.com/storybookjs/storybook/pull/8724))
 
 ## 5.3.0-alpha.39 (November 5, 2019)
 
 ### Breaking Changes
 
-* React-native: Require user-provided async storage ([#7801](https://github.com/storybookjs/storybook/pull/7801))
+- React-native: Require user-provided async storage ([#7801](https://github.com/storybookjs/storybook/pull/7801))
 
 ### Features
 
-* Addon-docs: Inline rendering for web-components as default ([#8705](https://github.com/storybookjs/storybook/pull/8705))
+- Addon-docs: Inline rendering for web-components as default ([#8705](https://github.com/storybookjs/storybook/pull/8705))
 
 ### Bug Fixes
 
-* Addon-docs: Fix recipe to use `notes` as component description ([#8718](https://github.com/storybookjs/storybook/pull/8718))
-* Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708))
-* React Native: Fix on-device-notes ([#8692](https://github.com/storybookjs/storybook/pull/8692))
-* React Native: On Device Knobs Groups Fix ([#8694](https://github.com/storybookjs/storybook/pull/8694))
-* React-native: Fix event listening for story navigation ([#8690](https://github.com/storybookjs/storybook/pull/8690))
-* React-Native: Add safe area wrapper for iphone x and later ([#8679](https://github.com/storybookjs/storybook/pull/8679))
+- Addon-docs: Fix recipe to use `notes` as component description ([#8718](https://github.com/storybookjs/storybook/pull/8718))
+- Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708))
+- React Native: Fix on-device-notes ([#8692](https://github.com/storybookjs/storybook/pull/8692))
+- React Native: On Device Knobs Groups Fix ([#8694](https://github.com/storybookjs/storybook/pull/8694))
+- React-native: Fix event listening for story navigation ([#8690](https://github.com/storybookjs/storybook/pull/8690))
+- React-Native: Add safe area wrapper for iphone x and later ([#8679](https://github.com/storybookjs/storybook/pull/8679))
 
 ## 5.3.0-alpha.38 (November 3, 2019)
 
 ### Bug Fixes
 
-* React-native: Patch rn-host-detect ([#8683](https://github.com/storybookjs/storybook/pull/8683))
-* React-native: Fix layout in RN61 so addons no longer initially displayed ([#8681](https://github.com/storybookjs/storybook/pull/8681))
+- React-native: Patch rn-host-detect ([#8683](https://github.com/storybookjs/storybook/pull/8683))
+- React-native: Fix layout in RN61 so addons no longer initially displayed ([#8681](https://github.com/storybookjs/storybook/pull/8681))
 
 ### Maintenance
 
-* React-native: Catch touch events when preview is minimized ([#8680](https://github.com/storybookjs/storybook/pull/8680))
-* React-native: Make menu bar have its own position instead of absolute  ([#8678](https://github.com/storybookjs/storybook/pull/8678))
+- React-native: Catch touch events when preview is minimized ([#8680](https://github.com/storybookjs/storybook/pull/8680))
+- React-native: Make menu bar have its own position instead of absolute ([#8678](https://github.com/storybookjs/storybook/pull/8678))
 
 ## 5.3.0-alpha.37 (November 2, 2019)
 
 ### Bug Fixes
 
-* Source-loader: Fix Typescript support ([#8499](https://github.com/storybookjs/storybook/pull/8499))
+- Source-loader: Fix Typescript support ([#8499](https://github.com/storybookjs/storybook/pull/8499))
 
 ## 5.3.0-alpha.36 (November 2, 2019)
 
 ### Features
 
-* Addon-docs: Angular DocsPage props table ([#8621](https://github.com/storybookjs/storybook/pull/8621))
-* Addon-docs: Support jsdoc params to describe function signature ([#8660](https://github.com/storybookjs/storybook/pull/8660))
+- Addon-docs: Angular DocsPage props table ([#8621](https://github.com/storybookjs/storybook/pull/8621))
+- Addon-docs: Support jsdoc params to describe function signature ([#8660](https://github.com/storybookjs/storybook/pull/8660))
 
 ### Bug Fixes
 
-* Addon-docs: Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366))
-* Addon-docs: Check component propTypes before unwrapping ([#8665](https://github.com/storybookjs/storybook/pull/8665))
+- Addon-docs: Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366))
+- Addon-docs: Check component propTypes before unwrapping ([#8665](https://github.com/storybookjs/storybook/pull/8665))
 
 ## 5.3.0-alpha.35 (November 1, 2019)
 
 ### Bug Fixes
 
-* Core: Revert webpack rebuild changes in node_modules  ([#8657](https://github.com/storybookjs/storybook/pull/8657))
-* Ondevice-knobs: Fix peer dep ([#8643](https://github.com/storybookjs/storybook/pull/8643))
+- Core: Revert webpack rebuild changes in node_modules ([#8657](https://github.com/storybookjs/storybook/pull/8657))
+- Ondevice-knobs: Fix peer dep ([#8643](https://github.com/storybookjs/storybook/pull/8643))
 
 ## 5.3.0-alpha.34 (October 30, 2019)
 
 ### Bug Fixes
 
-* Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633))
-* Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629))
-* Addon-docs: Fix props table in no props case ([#8632](https://github.com/storybookjs/storybook/pull/8632))
-* Addon-docs/web-components: Add attributes to props table ([#8598](https://github.com/storybookjs/storybook/pull/8598))
-* CLI: Fix package.json update ([#8615](https://github.com/storybookjs/storybook/pull/8615))
-* React-native: Fix background style ([#8480](https://github.com/storybookjs/storybook/pull/8480))
+- Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633))
+- Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629))
+- Addon-docs: Fix props table in no props case ([#8632](https://github.com/storybookjs/storybook/pull/8632))
+- Addon-docs/web-components: Add attributes to props table ([#8598](https://github.com/storybookjs/storybook/pull/8598))
+- CLI: Fix package.json update ([#8615](https://github.com/storybookjs/storybook/pull/8615))
+- React-native: Fix background style ([#8480](https://github.com/storybookjs/storybook/pull/8480))
 
 ### Maintenance
 
-* Channel: Clean up test ([#8627](https://github.com/storybookjs/storybook/pull/8627))
-* RAX: Fix example app ([#8617](https://github.com/storybookjs/storybook/pull/8617))
+- Channel: Clean up test ([#8627](https://github.com/storybookjs/storybook/pull/8627))
+- RAX: Fix example app ([#8617](https://github.com/storybookjs/storybook/pull/8617))
 
 ### Dependency Upgrades
 
-* Misc. dependency upgrades ([#8612](https://github.com/storybookjs/storybook/pull/8612))
+- Misc. dependency upgrades ([#8612](https://github.com/storybookjs/storybook/pull/8612))
 
 ## 5.3.0-alpha.33 (October 28, 2019)
 
 ### Maintenance
 
-* Web-components: Move custom-elements utils to app ([#8592](https://github.com/storybookjs/storybook/pull/8592))
+- Web-components: Move custom-elements utils to app ([#8592](https://github.com/storybookjs/storybook/pull/8592))
 
 ## 5.3.0-alpha.32 (October 28, 2019)
 
 ### Features
 
-* Addon-docs: Props / Description for web-components ([#8585](https://github.com/storybookjs/storybook/pull/8585))
-* Core: Global addDecorator/addParameters ([#8573](https://github.com/storybookjs/storybook/pull/8573))
-* Addon-docs: Generalize Description doc block ([#8590](https://github.com/storybookjs/storybook/pull/8590))
+- Addon-docs: Props / Description for web-components ([#8585](https://github.com/storybookjs/storybook/pull/8585))
+- Core: Global addDecorator/addParameters ([#8573](https://github.com/storybookjs/storybook/pull/8573))
+- Addon-docs: Generalize Description doc block ([#8590](https://github.com/storybookjs/storybook/pull/8590))
 
 ### Bug Fixes
 
-* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
+- React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
 
 ### Maintenance
 
-* Typescript: Use native package types now available ([#8588](https://github.com/storybookjs/storybook/pull/8588))
-* Build: Fix now deploy maybe ([#8589](https://github.com/storybookjs/storybook/pull/8589))
+- Typescript: Use native package types now available ([#8588](https://github.com/storybookjs/storybook/pull/8588))
+- Build: Fix now deploy maybe ([#8589](https://github.com/storybookjs/storybook/pull/8589))
 
 ## 5.3.0-alpha.31 (October 27, 2019)
 
 ### Dependency Upgrades
 
-* Upgrade babel-plugin-react-docgen to 4.0.0-beta.1 ([#8581](https://github.com/storybookjs/storybook/pull/8581))
+- Upgrade babel-plugin-react-docgen to 4.0.0-beta.1 ([#8581](https://github.com/storybookjs/storybook/pull/8581))
 
 ## 5.3.0-alpha.30 (October 27, 2019)
 
 ### Features
 
-* Addon-docs: Modify Typeset doc block to accept units ([#8574](https://github.com/storybookjs/storybook/pull/8574))
+- Addon-docs: Modify Typeset doc block to accept units ([#8574](https://github.com/storybookjs/storybook/pull/8574))
 
 ### Bug Fixes
 
-* Web-components: Use framework id 'web-components' ([#8579](https://github.com/storybookjs/storybook/pull/8579))
+- Web-components: Use framework id 'web-components' ([#8579](https://github.com/storybookjs/storybook/pull/8579))
 
 ### Maintenance
 
-* WC-kitchen-sink: Add babel-loader dependency ([#8578](https://github.com/storybookjs/storybook/pull/8578))
+- WC-kitchen-sink: Add babel-loader dependency ([#8578](https://github.com/storybookjs/storybook/pull/8578))
 
 ### Dependency Upgrades
 
-* Upgrade babel-plugin-react-docgen to 3.2.0 ([#8580](https://github.com/storybookjs/storybook/pull/8580))
+- Upgrade babel-plugin-react-docgen to 3.2.0 ([#8580](https://github.com/storybookjs/storybook/pull/8580))
 
 ## 5.3.0-alpha.29 (October 25, 2019)
 
 ### Features
 
-* Addon-docs: Add props loader to vue preset ([#8567](https://github.com/storybookjs/storybook/pull/8567))
+- Addon-docs: Add props loader to vue preset ([#8567](https://github.com/storybookjs/storybook/pull/8567))
 
 ### Dependency Upgrades
 
-* Angular: bump zone.js version in peer dependencies ([#8558](https://github.com/storybookjs/storybook/pull/8558))
+- Angular: bump zone.js version in peer dependencies ([#8558](https://github.com/storybookjs/storybook/pull/8558))
 
 ## 5.3.0-alpha.28 (October 25, 2019)
 
 ### Features
 
-* Addon-docs: Publish web-components preset ([#8563](https://github.com/storybookjs/storybook/pull/8563))
-* Addon-docs: Vue slots/events props table + generalization ([#8489](https://github.com/storybookjs/storybook/pull/8489))
+- Addon-docs: Publish web-components preset ([#8563](https://github.com/storybookjs/storybook/pull/8563))
+- Addon-docs: Vue slots/events props table + generalization ([#8489](https://github.com/storybookjs/storybook/pull/8489))
 
 ## 5.3.0-alpha.27 (October 24, 2019)
 
 ### Features
 
-* Core: Allow linking to kind/component ID ([#7648](https://github.com/storybookjs/storybook/pull/7648))
-* Addon-docs: Jest MDX transform for storyshots ([#8189](https://github.com/storybookjs/storybook/pull/8189))
-* CLI: Add flag to disable version checks ([#8488](https://github.com/storybookjs/storybook/pull/8488))
-* Typescript: add types for react demo ([#8517](https://github.com/storybookjs/storybook/pull/8517))
+- Core: Allow linking to kind/component ID ([#7648](https://github.com/storybookjs/storybook/pull/7648))
+- Addon-docs: Jest MDX transform for storyshots ([#8189](https://github.com/storybookjs/storybook/pull/8189))
+- CLI: Add flag to disable version checks ([#8488](https://github.com/storybookjs/storybook/pull/8488))
+- Typescript: add types for react demo ([#8517](https://github.com/storybookjs/storybook/pull/8517))
 
 ### Bug Fixes
 
-* UI: Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
-* UI: Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
+- UI: Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
+- UI: Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
 
 ### Dependency Upgrades
 
-* Remove outdated and unused `jsx-to-string` library ([#8549](https://github.com/storybookjs/storybook/pull/8549))
+- Remove outdated and unused `jsx-to-string` library ([#8549](https://github.com/storybookjs/storybook/pull/8549))
 
 ## 5.3.0-alpha.26 (October 23, 2019)
 
@@ -676,150 +1974,150 @@ Fix web-components storybook dependencies
 
 ### Features
 
-* Web-components: New storybook app ([#8400](https://github.com/storybookjs/storybook/pull/8400))
-* Core: Allow custom postcss config ([#8498](https://github.com/storybookjs/storybook/pull/8498))
+- Web-components: New storybook app ([#8400](https://github.com/storybookjs/storybook/pull/8400))
+- Core: Allow custom postcss config ([#8498](https://github.com/storybookjs/storybook/pull/8498))
 
 ## 5.3.0-alpha.24 (October 22, 2019)
 
 ### Features
 
-* Docs: Highlight ts and tsx syntax ([#8493](https://github.com/storybookjs/storybook/pull/8493))
+- Docs: Highlight ts and tsx syntax ([#8493](https://github.com/storybookjs/storybook/pull/8493))
 
 ### Bug Fixes
 
-* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
+- React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
 
 ### Maintenance
 
-* Automate codemod tests as jest snapshots ([#8506](https://github.com/storybookjs/storybook/pull/8506))
+- Automate codemod tests as jest snapshots ([#8506](https://github.com/storybookjs/storybook/pull/8506))
 
 ### Dependency Upgrades
 
-* Add  "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
+- Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
 
 ## 5.2.5 (October 22, 2019)
 
 ### Bug Fixes
 
-* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
-* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
-* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
-* MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
-* React: Fix custom themes breaking the welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
-* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
+- UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
+- React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
+- Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
+- MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
+- React: Fix custom themes breaking the welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
+- Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
 
 ### Dependency Upgrades
 
-* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
+- [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
 
 ### Dependency Upgrades
 
-* Add  "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
+- Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
 
 ## 5.3.0-alpha.23 (October 19, 2019)
 
 ### Features
 
-* Webpack: Enabled error details ([#8391](https://github.com/storybookjs/storybook/pull/8391))
+- Webpack: Enabled error details ([#8391](https://github.com/storybookjs/storybook/pull/8391))
 
 ### Bug Fixes
 
-* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
-* MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
+- Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
+- MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
 
 ### Maintenance
 
-* ADD a step in circleci to upload storybook for angular ([#8477](https://github.com/storybookjs/storybook/pull/8477))
-* Core: Check module type in configure ([#8412](https://github.com/storybookjs/storybook/pull/8412))
-* Angular: Convert angular-cli stories to CSF ([#7668](https://github.com/storybookjs/storybook/pull/7668))
-* Typescript: Migrate @storybook/mithril ([#8320](https://github.com/storybookjs/storybook/pull/8320))
+- ADD a step in circleci to upload storybook for angular ([#8477](https://github.com/storybookjs/storybook/pull/8477))
+- Core: Check module type in configure ([#8412](https://github.com/storybookjs/storybook/pull/8412))
+- Angular: Convert angular-cli stories to CSF ([#7668](https://github.com/storybookjs/storybook/pull/7668))
+- Typescript: Migrate @storybook/mithril ([#8320](https://github.com/storybookjs/storybook/pull/8320))
 
 ## 5.3.0-alpha.22 (October 18, 2019)
 
 ### Features
 
-* CLI: Add component meta to framework templates ([#8462](https://github.com/storybookjs/storybook/pull/8462))
+- CLI: Add component meta to framework templates ([#8462](https://github.com/storybookjs/storybook/pull/8462))
 
 ### Maintenance
 
-* Build: Add cypress to Storybook CI ([#8397](https://github.com/storybookjs/storybook/pull/8397))
-* Incorrect minimal required node version ([#8427](https://github.com/storybookjs/storybook/pull/8427))
+- Build: Add cypress to Storybook CI ([#8397](https://github.com/storybookjs/storybook/pull/8397))
+- Incorrect minimal required node version ([#8427](https://github.com/storybookjs/storybook/pull/8427))
 
 ## 5.3.0-alpha.21 (October 17, 2019)
 
 ### Features
 
-* CLI: React-scripts TS template & test ([#8451](https://github.com/storybookjs/storybook/pull/8451))
-* Addon-storysource: Add preset ([#8437](https://github.com/storybookjs/storybook/pull/8437))
+- CLI: React-scripts TS template & test ([#8451](https://github.com/storybookjs/storybook/pull/8451))
+- Addon-storysource: Add preset ([#8437](https://github.com/storybookjs/storybook/pull/8437))
 
 ### Bug Fixes
 
-* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
-* Addon-centered: Fix zoom issues for non-Firefox browsers ([#8442](https://github.com/storybookjs/storybook/pull/8442))
-* CLI: Add CRA preset to MDX template ([#8452](https://github.com/storybookjs/storybook/pull/8452))
-* CLI: Add preset-create-react-app to CRA presets template ([#8449](https://github.com/storybookjs/storybook/pull/8449))
-* CLI: Fix CRA-ts fixture package name ([#8457](https://github.com/storybookjs/storybook/pull/8457))
+- UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
+- Addon-centered: Fix zoom issues for non-Firefox browsers ([#8442](https://github.com/storybookjs/storybook/pull/8442))
+- CLI: Add CRA preset to MDX template ([#8452](https://github.com/storybookjs/storybook/pull/8452))
+- CLI: Add preset-create-react-app to CRA presets template ([#8449](https://github.com/storybookjs/storybook/pull/8449))
+- CLI: Fix CRA-ts fixture package name ([#8457](https://github.com/storybookjs/storybook/pull/8457))
 
 ## 5.3.0-alpha.20 (October 15, 2019)
 
 ### Features
 
-* Addon-docs: Support MDX source in Preview w/ no Story blocks ([#7966](https://github.com/storybookjs/storybook/pull/7966))
+- Addon-docs: Support MDX source in Preview w/ no Story blocks ([#7966](https://github.com/storybookjs/storybook/pull/7966))
 
 ### Bug Fixes
 
-* Addon-docs: Fix react inline stories ([#8419](https://github.com/storybookjs/storybook/pull/8419))
-* React: Fix custom themes breaking welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
+- Addon-docs: Fix react inline stories ([#8419](https://github.com/storybookjs/storybook/pull/8419))
+- React: Fix custom themes breaking welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
 
 ## 5.3.0-alpha.19 (October 15, 2019)
 
 ### Features
 
-* React: Move Create React App support to external preset ([#8416](https://github.com/storybookjs/storybook/pull/8416))
-* CLI: MDX template support ([#8396](https://github.com/storybookjs/storybook/pull/8396))
+- React: Move Create React App support to external preset ([#8416](https://github.com/storybookjs/storybook/pull/8416))
+- CLI: MDX template support ([#8396](https://github.com/storybookjs/storybook/pull/8396))
 
 ### Bug Fixes
 
-* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
-* Addon-docs: Don't error in React when there's no `prepareForInline` ([#8415](https://github.com/storybookjs/storybook/pull/8415))
+- Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
+- Addon-docs: Don't error in React when there's no `prepareForInline` ([#8415](https://github.com/storybookjs/storybook/pull/8415))
 
 ### Dependency Upgrades
 
-* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
+- [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
 
 ## 5.3.0-alpha.18 (October 14, 2019)
 
 ### Bug Fixes
 
-* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
-* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
-* Addon-docs: Fix typo in default config ([#8403](https://github.com/storybookjs/storybook/pull/8403))
-* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
-* CLI: Update button.svelte template ([#8369](https://github.com/storybookjs/storybook/pull/8369))
+- CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
+- Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
+- Addon-docs: Fix typo in default config ([#8403](https://github.com/storybookjs/storybook/pull/8403))
+- Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
+- CLI: Update button.svelte template ([#8369](https://github.com/storybookjs/storybook/pull/8369))
 
 ### Maintenance
 
-* Official-storybook: Add a story with duplicate decorators ([#8407](https://github.com/storybookjs/storybook/pull/8407))
+- Official-storybook: Add a story with duplicate decorators ([#8407](https://github.com/storybookjs/storybook/pull/8407))
 
 ## 5.2.4 (October 14, 2019)
 
 ### Bug Fixes
 
-* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
-* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
-* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
-* Update button.svelte ([#8369](https://github.com/storybookjs/storybook/pull/8369))
-* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
+- Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
+- CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
+- Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
+- Update button.svelte ([#8369](https://github.com/storybookjs/storybook/pull/8369))
+- CSF: Ignore \_\_esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
 
 ### Maintenance
 
-* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
+- Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
 
 ## 5.3.0-alpha.17 (October 10, 2019)
 
 ### Maintenance
 
-* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
+- Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
 
 ## 5.3.0-alpha.16 (October 10, 2019)
 
@@ -829,11 +2127,11 @@ Publish failed
 
 ### Features
 
-* Addon-docs: support vue inline rendering ([#7929](https://github.com/storybookjs/storybook/pull/7929))
+- Addon-docs: support vue inline rendering ([#7929](https://github.com/storybookjs/storybook/pull/7929))
 
 ### Maintenance
 
-* Typescript: Migrate addon-storyshots ([#7674](https://github.com/storybookjs/storybook/pull/7674))
+- Typescript: Migrate addon-storyshots ([#7674](https://github.com/storybookjs/storybook/pull/7674))
 
 ## 5.3.0-alpha.14 (October 8, 2019)
 
@@ -843,92 +2141,92 @@ NPM publish failed
 
 ### Features
 
-* MDX: Better ergonomics for documenting CSF ([#8312](https://github.com/storybookjs/storybook/pull/8312))
-* Addon-docs: Story parameter for disabling docs ([#8313](https://github.com/storybookjs/storybook/pull/8313))
+- MDX: Better ergonomics for documenting CSF ([#8312](https://github.com/storybookjs/storybook/pull/8312))
+- Addon-docs: Story parameter for disabling docs ([#8313](https://github.com/storybookjs/storybook/pull/8313))
 
 ### Dependency Upgrades
 
-* Remove redundant dependency on hoist-non-react-statics (#6349) ([#8310](https://github.com/storybookjs/storybook/pull/8310))
+- Remove redundant dependency on hoist-non-react-statics (#6349) ([#8310](https://github.com/storybookjs/storybook/pull/8310))
 
 ## 5.3.0-alpha.12 (October 7, 2019)
 
 ### Features
 
-* CSF: Allow multiple CSF with same title ([#8133](https://github.com/storybookjs/storybook/pull/8133))
+- CSF: Allow multiple CSF with same title ([#8133](https://github.com/storybookjs/storybook/pull/8133))
 
 ### Bug Fixes
 
-* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
-* React: Improve type of storyFn ([#8197](https://github.com/storybookjs/storybook/pull/8197))
+- CSF: Ignore \_\_esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
+- React: Improve type of storyFn ([#8197](https://github.com/storybookjs/storybook/pull/8197))
 
 ## 5.2.3 (October 7, 2019)
 
 ### Bug Fixes
 
-* Core: Fix lib/core whitelist ([#8182](https://github.com/storybookjs/storybook/pull/8182))
+- Core: Fix lib/core whitelist ([#8182](https://github.com/storybookjs/storybook/pull/8182))
 
 ## 5.2.2 (October 7, 2019)
 
 ### Bug Fixes
 
-* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
-* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
-* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
-* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
-* Addon-knobs: Add missing type def  #8105 ([#8118](https://github.com/storybookjs/storybook/pull/8118))
-* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
-* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
-* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
-* Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261))
-* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
-* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
-* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
-* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
-* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
-* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
+- Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
+- UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
+- Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
+- CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
+- Addon-knobs: Add missing type def #8105 ([#8118](https://github.com/storybookjs/storybook/pull/8118))
+- Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
+- Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
+- UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
+- Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261))
+- Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
+- React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
+- Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
+- Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
+- Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
+- Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
 
 ## 5.3.0-alpha.11 (October 6, 2019)
 
 ### Bug Fixes
 
-* Storyshots: Update `read-pkg-up` usage to work with version `7` ([#8299](https://github.com/storybookjs/storybook/pull/8299))
+- Storyshots: Update `read-pkg-up` usage to work with version `7` ([#8299](https://github.com/storybookjs/storybook/pull/8299))
 
 ### Maintenance
 
-* Remove `weak` dependency Node 12 ([#8300](https://github.com/storybookjs/storybook/pull/8300))
+- Remove `weak` dependency Node 12 ([#8300](https://github.com/storybookjs/storybook/pull/8300))
 
 ## 5.3.0-alpha.10 (October 5, 2019)
 
 ### Bug Fixes
 
-* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
+- Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
 
 ### Maintenance
 
-* Build: Add CLI test in github actions ([#8064](https://github.com/storybookjs/storybook/pull/8064))
+- Build: Add CLI test in github actions ([#8064](https://github.com/storybookjs/storybook/pull/8064))
 
 ## 5.3.0-alpha.9 (October 4, 2019)
 
 ### Features
 
-* API: Add method to set manager config ([#8232](https://github.com/storybookjs/storybook/pull/8232))
+- API: Add method to set manager config ([#8232](https://github.com/storybookjs/storybook/pull/8232))
 
 ### Bug Fixes
 
-* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
-* Addon-knobs: Fix issues caused by rerenders ([#8287](https://github.com/storybookjs/storybook/pull/8287))
+- Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
+- Addon-knobs: Fix issues caused by rerenders ([#8287](https://github.com/storybookjs/storybook/pull/8287))
 
 ### Maintenance
 
-* Fix local `yarn lint` ([#8289](https://github.com/storybookjs/storybook/pull/8289))
-* Fix button knob story ([#8282](https://github.com/storybookjs/storybook/pull/8282))
-* Official examples: apply babel-preset-minify only in production mode ([#8283](https://github.com/storybookjs/storybook/pull/8283))
-* Build: Upgrade chromatic to test ([#8246](https://github.com/storybookjs/storybook/pull/8246))
+- Fix local `yarn lint` ([#8289](https://github.com/storybookjs/storybook/pull/8289))
+- Fix button knob story ([#8282](https://github.com/storybookjs/storybook/pull/8282))
+- Official examples: apply babel-preset-minify only in production mode ([#8283](https://github.com/storybookjs/storybook/pull/8283))
+- Build: Upgrade chromatic to test ([#8246](https://github.com/storybookjs/storybook/pull/8246))
 
 ### Dependency Upgrades
 
-* Upgrade regenerator-runtime to 0.13 in all packages ([#8258](https://github.com/storybookjs/storybook/pull/8258))
-* Misc upgrades ([#8280](https://github.com/storybookjs/storybook/pull/8280))
+- Upgrade regenerator-runtime to 0.13 in all packages ([#8258](https://github.com/storybookjs/storybook/pull/8258))
+- Misc upgrades ([#8280](https://github.com/storybookjs/storybook/pull/8280))
 
 ## 5.3.0-alpha.9 (October 4, 2019)
 
@@ -938,103 +2236,103 @@ NPM publish failed
 
 ### Features
 
-* UI: Preferred color scheme awareness ([#8271](https://github.com/storybookjs/storybook/pull/8271))
+- UI: Preferred color scheme awareness ([#8271](https://github.com/storybookjs/storybook/pull/8271))
 
 ### Bug Fixes
 
-* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
+- UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
 
 ### Maintenance
 
-* Regenerate lockfile ([#8263](https://github.com/storybookjs/storybook/pull/8263))
+- Regenerate lockfile ([#8263](https://github.com/storybookjs/storybook/pull/8263))
 
 ## 5.3.0-alpha.6 (October 1, 2019)
 
 ### Bug Fixes
 
-* Addon-ondevice-notes: Validate the state content  ([#8261](https://github.com/storybookjs/storybook/pull/8261))
-* API: Fix require cycles in addons hooks ([#8236](https://github.com/storybookjs/storybook/pull/8236))
-* API: Fix missing `channel.off` ([#8234](https://github.com/storybookjs/storybook/pull/8234))
-* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
-* Addon-links: Update linkTo type to accept function ([#8117](https://github.com/storybookjs/storybook/pull/8117))
-* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
+- Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261))
+- API: Fix require cycles in addons hooks ([#8236](https://github.com/storybookjs/storybook/pull/8236))
+- API: Fix missing `channel.off` ([#8234](https://github.com/storybookjs/storybook/pull/8234))
+- Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
+- Addon-links: Update linkTo type to accept function ([#8117](https://github.com/storybookjs/storybook/pull/8117))
+- React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
 
 ### Maintenance
 
-* Update angular example to v8 ([#7747](https://github.com/storybookjs/storybook/pull/7747))
-* Hitting some flakiness in now deploys, this might help ([#8200](https://github.com/storybookjs/storybook/pull/8200))
-* Remov hooks from extracted StoryItem ([#8256](https://github.com/storybookjs/storybook/pull/8256))
+- Update angular example to v8 ([#7747](https://github.com/storybookjs/storybook/pull/7747))
+- Hitting some flakiness in now deploys, this might help ([#8200](https://github.com/storybookjs/storybook/pull/8200))
+- Remov hooks from extracted StoryItem ([#8256](https://github.com/storybookjs/storybook/pull/8256))
 
 ### Dependency Upgrades
 
-* Bump react-native-swipe-gestures to 1.0.4 ([#8235](https://github.com/storybookjs/storybook/pull/8235))
+- Bump react-native-swipe-gestures to 1.0.4 ([#8235](https://github.com/storybookjs/storybook/pull/8235))
 
 ## 5.3.0-alpha.5 (September 27, 2019)
 
 ### Maintenance
 
-* UI: Improve code indentation ([#8218](https://github.com/storybookjs/storybook/pull/8218))
-* Use the extracted linting configs ([#8213](https://github.com/storybookjs/storybook/pull/8213))
+- UI: Improve code indentation ([#8218](https://github.com/storybookjs/storybook/pull/8218))
+- Use the extracted linting configs ([#8213](https://github.com/storybookjs/storybook/pull/8213))
 
 ## 5.3.0-alpha.4 (September 26, 2019)
 
 ### Bug Fixes
 
-* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
-* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
+- UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
+- Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
 
 ### Maintenance
 
-* Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207))
+- Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207))
 
 ## 5.3.0-alpha.3 (September 25, 2019)
 
 ### Bug Fixes
 
-* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
-* UI: Removes default CSS margins on viewport ([#7742](https://github.com/storybookjs/storybook/pull/7742))
+- Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
+- UI: Removes default CSS margins on viewport ([#7742](https://github.com/storybookjs/storybook/pull/7742))
 
 ## 5.3.0-alpha.2 (September 24, 2019)
 
 ### Bug Fixes
 
-* Core: Fix lib/core files ([#8182](https://github.com/storybookjs/storybook/pull/8182))
+- Core: Fix lib/core files ([#8182](https://github.com/storybookjs/storybook/pull/8182))
 
 ## 5.3.0-alpha.1 (September 23, 2019)
 
 ### Bug Fixes
 
-* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
-* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
-* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
-* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
-* Addon-contexts: Remove peer dependencies ([#7675](https://github.com/storybookjs/storybook/pull/7675))
-* Addon-knobs: Add missing type def ([#8118](https://github.com/storybookjs/storybook/pull/8118))
+- Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
+- Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
+- CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
+- Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
+- Addon-contexts: Remove peer dependencies ([#7675](https://github.com/storybookjs/storybook/pull/7675))
+- Addon-knobs: Add missing type def ([#8118](https://github.com/storybookjs/storybook/pull/8118))
 
 ### Dependency Upgrades
 
-* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
+- Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
 
 ## 5.2.1 (September 17, 2019)
 
 ### Bug Fixes
 
-* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
+- Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
 
 ## 5.3.0-alpha.0 (September 16, 2019)
 
 ### Features
 
-* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032))
+- UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032))
 
 ### Bug Fixes
 
-* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
+- Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
 
 ### Maintenance
 
-* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034))
-* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049))
+- CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034))
+- Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049))
 
 ## 5.2.0 (September 13, 2019)
 
@@ -1045,40 +2343,40 @@ Storybook 5.2 is here!
 - 🖼 Design System: Best practice component development
 - 🧩 Addon API: Simplified w/ hooks
 
-5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
+  5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
 
 ## 5.2.0-rc.11 (September 10, 2019)
 
 ### Features
 
-* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037))
+- DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037))
 
 ### Maintenance
 
-* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045))
+- Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045))
 
 ## 5.2.0-rc.10 (September 9, 2019)
 
 ### Bug Fixes
 
-* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036))
+- Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036))
 
 ### Documentation
 
-* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030))
+- Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030))
 
 ## 5.2.0-rc.9 (September 7, 2019)
 
 ### Bug Fixes
 
-* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027))
+- Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027))
 
 ## 5.2.0-rc.8 (September 6, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994))
-* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015))
+- Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994))
+- Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015))
 
 ## 5.2.0-rc.7 (September 6, 2019)
 
@@ -1088,22 +2386,22 @@ Publish failed
 
 ### Bug Fixes
 
-* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991))
-* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992))
-* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990))
-* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965))
+- Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991))
+- API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992))
+- UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990))
+- Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965))
 
 ## 5.2.0-rc.5 (September 4, 2019)
 
 ### Bug Fixes
 
-* CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979))
+- CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979))
 
 ## 5.2.0-rc.4 (September 3, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974))
+- Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974))
 
 ## 5.2.0-rc.3 (September 3, 2019)
 
@@ -1113,20 +2411,20 @@ Failed publish
 
 ### Bug Fixes
 
-* Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946))
+- Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946))
 
 ## 5.2.0-rc.1 (August 31, 2019)
 
 ### Features
 
-*  Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892))
+- Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892))
 
 ### Bug Fixes
 
-* Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940))
-* React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908))
-* Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683))
-* Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934))
+- Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940))
+- React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908))
+- Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683))
+- Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934))
 
 ## 5.2.0-rc.0 (August 30, 2019)
 
@@ -1142,22 +2440,22 @@ Track progress on the [5.2 release issue](https://github.com/storybookjs/storybo
 
 ### Bug Fixes
 
-* Addon-docs: Fix docs-only story ID suffix ([#7921](https://github.com/storybookjs/storybook/pull/7921))
+- Addon-docs: Fix docs-only story ID suffix ([#7921](https://github.com/storybookjs/storybook/pull/7921))
 
 ### Maintenance
 
-* Replace favicon with new Storybook icon. ([#7922](https://github.com/storybookjs/storybook/pull/7922))
+- Replace favicon with new Storybook icon. ([#7922](https://github.com/storybookjs/storybook/pull/7922))
 
 ### Dependency Upgrades
 
-* Bump react-draggable from 3.1.1 to 3.3.2 ([#7912](https://github.com/storybookjs/storybook/pull/7912))
+- Bump react-draggable from 3.1.1 to 3.3.2 ([#7912](https://github.com/storybookjs/storybook/pull/7912))
 
 ## 5.2.0-beta.47 (August 30, 2019)
 
 ### Bug Fixes
 
-* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))
-* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))
+- UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))
+- Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))
 
 ## 5.2.0-beta.46 (August 29, 2019)
 
@@ -1165,18 +2463,18 @@ CSF users: this reverts the `makeDisplayName` change introduced in `5.2.0-beta.4
 
 ### Bug Fixes
 
-* React: Fix missing props in the Welcome.tsx demo ([#7774](https://github.com/storybookjs/storybook/pull/7774))
+- React: Fix missing props in the Welcome.tsx demo ([#7774](https://github.com/storybookjs/storybook/pull/7774))
 
 ### Maintenance
 
-* CSF: Revert `makeDisplayName` & add stable `storyNameFromExport` ([#7901](https://github.com/storybookjs/storybook/pull/7901))
-* Addon-a11y: Upgrade axe to 3.3.2 which adds/mods rules ([#7888](https://github.com/storybookjs/storybook/pull/7888))
+- CSF: Revert `makeDisplayName` & add stable `storyNameFromExport` ([#7901](https://github.com/storybookjs/storybook/pull/7901))
+- Addon-a11y: Upgrade axe to 3.3.2 which adds/mods rules ([#7888](https://github.com/storybookjs/storybook/pull/7888))
 
 ## 5.2.0-beta.45 (August 28, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Fix MDX Story ID to match new CSF ([#7894](https://github.com/storybookjs/storybook/pull/7894))
+- Addon-docs: Fix MDX Story ID to match new CSF ([#7894](https://github.com/storybookjs/storybook/pull/7894))
 
 ## 5.2.0-beta.44 (August 28, 2019)
 
@@ -1187,12 +2485,12 @@ Publish failed
 CSF users: This is potentially a breaking change. If you want to opt-out of the new default display name calculation (`lodash.startCase`) you can add the following to your SB config:
 
 ```js
-addParameters({ options: { makeDisplayName: key => key }});
+addParameters({ options: { makeDisplayName: (key) => key } });
 ```
 
 ### Features
 
-* CSF: Transform CSF named exports w/ `makeDisplayName` ([#7878](https://github.com/storybookjs/storybook/pull/7878))
+- CSF: Transform CSF named exports w/ `makeDisplayName` ([#7878](https://github.com/storybookjs/storybook/pull/7878))
 
 ## 5.2.0-beta.42 (August 28, 2019)
 
@@ -1200,69 +2498,69 @@ Addon-docs users: This is a breaking change if you have been hacking the `docs`
 
 ### Maintenance
 
-* Addon-docs: Make config API consistent with other addons ([#7874](https://github.com/storybookjs/storybook/pull/7874))
+- Addon-docs: Make config API consistent with other addons ([#7874](https://github.com/storybookjs/storybook/pull/7874))
 
 ## 5.2.0-beta.41 (August 27, 2019)
 
 ### Features
 
-* Addon-info: Add configurable component comparator ([#7409](https://github.com/storybookjs/storybook/pull/7409))
+- Addon-info: Add configurable component comparator ([#7409](https://github.com/storybookjs/storybook/pull/7409))
 
 ### Bug Fixes
 
-* Addon-viewports: Add back default viewports ([#7448](https://github.com/storybookjs/storybook/pull/7448))
-* Core: Pass a separate hooks context per story ([#7860](https://github.com/storybookjs/storybook/pull/7860))
-* UI: Fix TooltipLinkList not scrollable ([#7865](https://github.com/storybookjs/storybook/pull/7865))
+- Addon-viewports: Add back default viewports ([#7448](https://github.com/storybookjs/storybook/pull/7448))
+- Core: Pass a separate hooks context per story ([#7860](https://github.com/storybookjs/storybook/pull/7860))
+- UI: Fix TooltipLinkList not scrollable ([#7865](https://github.com/storybookjs/storybook/pull/7865))
 
 ### Maintenance
 
-* UI: Add ignore `first-child` selector warning flag ([#7861](https://github.com/storybookjs/storybook/pull/7861))
+- UI: Add ignore `first-child` selector warning flag ([#7861](https://github.com/storybookjs/storybook/pull/7861))
 
 ## 5.2.0-beta.40 (August 23, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Fix DocsPage primary story switching ([#7849](https://github.com/storybookjs/storybook/pull/7849))
-* Source-loader: Selectively ignore typescript errors in generated code ([#7845](https://github.com/storybookjs/storybook/pull/7845))
-* Addon-docs: Force hidden attribute on #root element ([#7841](https://github.com/storybookjs/storybook/pull/7841))
+- Addon-docs: Fix DocsPage primary story switching ([#7849](https://github.com/storybookjs/storybook/pull/7849))
+- Source-loader: Selectively ignore typescript errors in generated code ([#7845](https://github.com/storybookjs/storybook/pull/7845))
+- Addon-docs: Force hidden attribute on #root element ([#7841](https://github.com/storybookjs/storybook/pull/7841))
 
 ### Maintenance
 
-* Remove temporarily added --no-dll option on examples ([#7647](https://github.com/storybookjs/storybook/pull/7647))
+- Remove temporarily added --no-dll option on examples ([#7647](https://github.com/storybookjs/storybook/pull/7647))
 
 ## 5.2.0-beta.39 (August 22, 2019)
 
 ### Bug Fixes
 
-* React-Native: Fix tabs layout issue on simulator ([#7809](https://github.com/storybookjs/storybook/pull/7809))
-* Source-loader: Selectively ignore typescript errors in generated code ([#7831](https://github.com/storybookjs/storybook/pull/7831))
+- React-Native: Fix tabs layout issue on simulator ([#7809](https://github.com/storybookjs/storybook/pull/7809))
+- Source-loader: Selectively ignore typescript errors in generated code ([#7831](https://github.com/storybookjs/storybook/pull/7831))
 
 ## 5.2.0-beta.38 (August 21, 2019)
 
 ### Bug Fixes
 
-* FIX issue where the block of build info (including url) wouldn't show if passed --ci #7821 ([#7822](https://github.com/storybookjs/storybook/pull/7822))
+- FIX issue where the block of build info (including url) wouldn't show if passed --ci #7821 ([#7822](https://github.com/storybookjs/storybook/pull/7822))
 
 ### Maintenance
 
-* CLI: Remove babel-register in favor of esm ([#7823](https://github.com/storybookjs/storybook/pull/7823))
+- CLI: Remove babel-register in favor of esm ([#7823](https://github.com/storybookjs/storybook/pull/7823))
 
 ## 5.2.0-beta.37 (August 20, 2019)
 
 ### Breaking Changes
 
-* Addon-docs: Add docsContainer parameter ([#7814](https://github.com/storybookjs/storybook/pull/7814))
+- Addon-docs: Add docsContainer parameter ([#7814](https://github.com/storybookjs/storybook/pull/7814))
 
 ## 5.2.0-beta.36 (August 20, 2019)
 
 ### Features
 
-* Addon-docs: Improved "No docs" message ([#7785](https://github.com/storybookjs/storybook/pull/7785))
-* Core: Add .pdf support to file-loader ([#7651](https://github.com/storybookjs/storybook/pull/7651))
+- Addon-docs: Improved "No docs" message ([#7785](https://github.com/storybookjs/storybook/pull/7785))
+- Core: Add .pdf support to file-loader ([#7651](https://github.com/storybookjs/storybook/pull/7651))
 
 ### Bug Fixes
 
-* Preview hooks: trigger effects after story render ([#7791](https://github.com/storybookjs/storybook/pull/7791))
+- Preview hooks: trigger effects after story render ([#7791](https://github.com/storybookjs/storybook/pull/7791))
 
 ## 5.2.0-beta.35 (August 20, 2019)
 
@@ -1276,67 +2574,67 @@ Failed publish
 
 ### Features
 
-* Addon-jest: Add pending & todo items ([#7793](https://github.com/storybookjs/storybook/pull/7793))
+- Addon-jest: Add pending & todo items ([#7793](https://github.com/storybookjs/storybook/pull/7793))
 
 ### Bug Fixes
 
-* Addon-docs: Fix unique key warning ([#7796](https://github.com/storybookjs/storybook/pull/7796))
+- Addon-docs: Fix unique key warning ([#7796](https://github.com/storybookjs/storybook/pull/7796))
 
 ## 5.2.0-beta.32 (August 17, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Fix docs-only story load ([#7787](https://github.com/storybookjs/storybook/pull/7787))
+- Addon-docs: Fix docs-only story load ([#7787](https://github.com/storybookjs/storybook/pull/7787))
 
 ### Maintenance
 
-* Addon-docs: Unwrap doc blocks stories ([#7788](https://github.com/storybookjs/storybook/pull/7788))
+- Addon-docs: Unwrap doc blocks stories ([#7788](https://github.com/storybookjs/storybook/pull/7788))
 
 ## 5.2.0-beta.31 (August 16, 2019)
 
 ### Features
 
-* Addon-docs: Add toolbar support to Preview ([#7778](https://github.com/storybookjs/storybook/pull/7778))
+- Addon-docs: Add toolbar support to Preview ([#7778](https://github.com/storybookjs/storybook/pull/7778))
 
 ### Bug Fixes
 
-* Addon-docs: Fix CSS bleed issue in doc blocks ([#7771](https://github.com/storybookjs/storybook/pull/7771))
+- Addon-docs: Fix CSS bleed issue in doc blocks ([#7771](https://github.com/storybookjs/storybook/pull/7771))
 
 ## 5.2.0-beta.30 (August 14, 2019)
 
 ### Features
 
-* CLI: Don't output startup information on smoke test ([#6949](https://github.com/storybookjs/storybook/pull/6949))
-* Ondevice-knobs: Expose withKnobs from addon-knobs ([#7555](https://github.com/storybookjs/storybook/pull/7555))
+- CLI: Don't output startup information on smoke test ([#6949](https://github.com/storybookjs/storybook/pull/6949))
+- Ondevice-knobs: Expose withKnobs from addon-knobs ([#7555](https://github.com/storybookjs/storybook/pull/7555))
 
 ### Maintenance
 
-* Addon-Jest: Add flexibility ([#7748](https://github.com/storybookjs/storybook/pull/7748))
+- Addon-Jest: Add flexibility ([#7748](https://github.com/storybookjs/storybook/pull/7748))
 
 ## 5.1.11 (August 13, 2019)
 
 ### Bug Fixes
 
-* Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401))
-* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
+- Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401))
+- Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
 
 ## 5.2.0-beta.29 (August 13, 2019)
 
 ### Breaking Changes
 
-* Addon-docs: Packaging for 5.2 release ([#7741](https://github.com/storybookjs/storybook/pull/7741))
+- Addon-docs: Packaging for 5.2 release ([#7741](https://github.com/storybookjs/storybook/pull/7741))
 
 ### Bug Fixes
 
-* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
-* Core: Revert "Addon-centered: Fix disappearing when zoomed" ([#7749](https://github.com/storybookjs/storybook/pull/7749))
+- Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
+- Core: Revert "Addon-centered: Fix disappearing when zoomed" ([#7749](https://github.com/storybookjs/storybook/pull/7749))
 
 ## 5.2.0-beta.28 (August 10, 2019)
 
 ### Features
 
-* Core: Disable CRA behaviors when preset detected ([#7696](https://github.com/storybookjs/storybook/pull/7696))
-* Addon-docs: Docs only MDX and navigation UI ([#7719](https://github.com/storybookjs/storybook/pull/7719))
+- Core: Disable CRA behaviors when preset detected ([#7696](https://github.com/storybookjs/storybook/pull/7696))
+- Addon-docs: Docs only MDX and navigation UI ([#7719](https://github.com/storybookjs/storybook/pull/7719))
 
 ## 5.2.0-beta.27 (August 10, 2019)
 
@@ -1346,159 +2644,159 @@ Publish failed
 
 ### Features
 
-* UI: Improved component nav UI ([#7716](https://github.com/storybookjs/storybook/pull/7716))
+- UI: Improved component nav UI ([#7716](https://github.com/storybookjs/storybook/pull/7716))
 
 ## 5.2.0-beta.25 (August 8, 2019)
 
 ### Features
 
-* Addon-centered: ability to disable on specific story ([#7709](https://github.com/storybookjs/storybook/pull/7709))
+- Addon-centered: ability to disable on specific story ([#7709](https://github.com/storybookjs/storybook/pull/7709))
 
 ### Bug Fixes
 
-* Addon-jest: fix console warning ([#7705](https://github.com/storybookjs/storybook/pull/7705))
-* Core: Remove Object.append(...) from index.ejs ([#7707](https://github.com/storybookjs/storybook/pull/7707))
+- Addon-jest: fix console warning ([#7705](https://github.com/storybookjs/storybook/pull/7705))
+- Core: Remove Object.append(...) from index.ejs ([#7707](https://github.com/storybookjs/storybook/pull/7707))
 
 ## 5.2.0-beta.24 (August 7, 2019)
 
 ### Features
 
-* Addon-docs: DocsPage slots for fine-grained user control ([#7680](https://github.com/storybookjs/storybook/pull/7680))
+- Addon-docs: DocsPage slots for fine-grained user control ([#7680](https://github.com/storybookjs/storybook/pull/7680))
 
 ### Bug Fixes
 
-* Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401))
+- Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401))
 
 ### Dependency Upgrades
 
-* Addon-notes: Upgrade markdown-to-jsx dependency ([#7694](https://github.com/storybookjs/storybook/pull/7694))
+- Addon-notes: Upgrade markdown-to-jsx dependency ([#7694](https://github.com/storybookjs/storybook/pull/7694))
 
 ## 5.2.0-beta.23 (August 6, 2019)
 
 ### Features
 
-* CLI: Suggest possible matches on invalid command ([#7658](https://github.com/storybookjs/storybook/pull/7658))
-* Core: Allow injecting preview-body.html ([#7417](https://github.com/storybookjs/storybook/pull/7417))
+- CLI: Suggest possible matches on invalid command ([#7658](https://github.com/storybookjs/storybook/pull/7658))
+- Core: Allow injecting preview-body.html ([#7417](https://github.com/storybookjs/storybook/pull/7417))
 
 ### Bug Fixes
 
-* Core: Fix HMR error recovery ([#7684](https://github.com/storybookjs/storybook/pull/7684))
+- Core: Fix HMR error recovery ([#7684](https://github.com/storybookjs/storybook/pull/7684))
 
 ## 5.2.0-beta.22 (August 3, 2019)
 
 ### Bug Fixes
 
-* Core: Fix HMR for CSF files ([#7669](https://github.com/storybookjs/storybook/pull/7669))
+- Core: Fix HMR for CSF files ([#7669](https://github.com/storybookjs/storybook/pull/7669))
 
 ### Maintenance
 
-* React: Cleanup CSF stories in cra-kitchen-sink ([#7670](https://github.com/storybookjs/storybook/pull/7670))
+- React: Cleanup CSF stories in cra-kitchen-sink ([#7670](https://github.com/storybookjs/storybook/pull/7670))
 
 ## 5.2.0-beta.21 (August 3, 2019)
 
 ### Features
 
-* Addon-jest: Add placeholder info for missing tests ([#7660](https://github.com/storybookjs/storybook/pull/7660))
+- Addon-jest: Add placeholder info for missing tests ([#7660](https://github.com/storybookjs/storybook/pull/7660))
 
 ### Bug Fixes
 
-* Addon-docs: Pass framework configs through babel ([#7667](https://github.com/storybookjs/storybook/pull/7667))
-* Addon-centered: Fix disappearing when zoomed ([#7640](https://github.com/storybookjs/storybook/pull/7640))
+- Addon-docs: Pass framework configs through babel ([#7667](https://github.com/storybookjs/storybook/pull/7667))
+- Addon-centered: Fix disappearing when zoomed ([#7640](https://github.com/storybookjs/storybook/pull/7640))
 
 ## 5.2.0-beta.20 (August 1, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Pass everything through babel & partial TS conversion ([#7653](https://github.com/storybookjs/storybook/pull/7653))
-* Addon-docs: Error on non-string description ([#7650](https://github.com/storybookjs/storybook/pull/7650))
-* CLI: Fix `npx -p @storybook/cli sb migrate` in yarn project ([#7649](https://github.com/storybookjs/storybook/pull/7649))
+- Addon-docs: Pass everything through babel & partial TS conversion ([#7653](https://github.com/storybookjs/storybook/pull/7653))
+- Addon-docs: Error on non-string description ([#7650](https://github.com/storybookjs/storybook/pull/7650))
+- CLI: Fix `npx -p @storybook/cli sb migrate` in yarn project ([#7649](https://github.com/storybookjs/storybook/pull/7649))
 
 ## 5.2.0-beta.19 (July 31, 2019)
 
 ### Bug Fixes
 
-* Core: Change webpack-defined variables to globals ([#7622](https://github.com/storybookjs/storybook/pull/7622))
-* Addon-notes: Fix dark theming bug ([#7623](https://github.com/storybookjs/storybook/pull/7623))
-* CLI: Fix usage information ([#7627](https://github.com/storybookjs/storybook/pull/7627))
-* CLI: Show additional package information with `sb info` ([#7624](https://github.com/storybookjs/storybook/pull/7624))
+- Core: Change webpack-defined variables to globals ([#7622](https://github.com/storybookjs/storybook/pull/7622))
+- Addon-notes: Fix dark theming bug ([#7623](https://github.com/storybookjs/storybook/pull/7623))
+- CLI: Fix usage information ([#7627](https://github.com/storybookjs/storybook/pull/7627))
+- CLI: Show additional package information with `sb info` ([#7624](https://github.com/storybookjs/storybook/pull/7624))
 
 ### Maintenance
 
-* Typescript: Migrate Preact ([#7527](https://github.com/storybookjs/storybook/pull/7527))
+- Typescript: Migrate Preact ([#7527](https://github.com/storybookjs/storybook/pull/7527))
 
 ## 5.1.10 (July 31, 2019)
 
 ### Breaking Changes
 
-* Core: Remove project root `babel.config.js` loading ([#7573](https://github.com/storybookjs/storybook/pull/7573))
+- Core: Remove project root `babel.config.js` loading ([#7573](https://github.com/storybookjs/storybook/pull/7573))
 
 ### Bug Fixes
 
-* Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))
-* React-native: Fix react native server ([#7187](https://github.com/storybookjs/storybook/pull/7187))
-* Addon-centered/contexts: Move optionalDependencies to peerDependencies ([#7315](https://github.com/storybookjs/storybook/pull/7315))
-* Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))
-* Addon-actions: fix serialization performance ([#7256](https://github.com/storybookjs/storybook/pull/7256))
-* Addon-notes: Fix dark theming bug ([#7623](https://github.com/storybookjs/storybook/pull/7623))
-* CLI: Fix usage information ([#7627](https://github.com/storybookjs/storybook/pull/7627))
-* Addon-centered: Fix component disappearing on zoom ([#7400](https://github.com/storybookjs/storybook/pull/7400))
-* Addon-analytics: Fix API signature ([#7410](https://github.com/storybookjs/storybook/pull/7410))
-* UI: Fix Sidebar input refresh on 'Enter' ([#7342](https://github.com/storybookjs/storybook/pull/7342))
-* Addon-knobs: Prevent rerender when a button callback returns false. ([#7197](https://github.com/storybookjs/storybook/pull/7197))
-* Core: Keep story data and legacy data in sync ([#7319](https://github.com/storybookjs/storybook/pull/7319))
-* CLI: Move the free port logic so that loadOptions don't override it ([#7237](https://github.com/storybookjs/storybook/pull/7237))
-* Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))
+- Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))
+- React-native: Fix react native server ([#7187](https://github.com/storybookjs/storybook/pull/7187))
+- Addon-centered/contexts: Move optionalDependencies to peerDependencies ([#7315](https://github.com/storybookjs/storybook/pull/7315))
+- Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))
+- Addon-actions: fix serialization performance ([#7256](https://github.com/storybookjs/storybook/pull/7256))
+- Addon-notes: Fix dark theming bug ([#7623](https://github.com/storybookjs/storybook/pull/7623))
+- CLI: Fix usage information ([#7627](https://github.com/storybookjs/storybook/pull/7627))
+- Addon-centered: Fix component disappearing on zoom ([#7400](https://github.com/storybookjs/storybook/pull/7400))
+- Addon-analytics: Fix API signature ([#7410](https://github.com/storybookjs/storybook/pull/7410))
+- UI: Fix Sidebar input refresh on 'Enter' ([#7342](https://github.com/storybookjs/storybook/pull/7342))
+- Addon-knobs: Prevent rerender when a button callback returns false. ([#7197](https://github.com/storybookjs/storybook/pull/7197))
+- Core: Keep story data and legacy data in sync ([#7319](https://github.com/storybookjs/storybook/pull/7319))
+- CLI: Move the free port logic so that loadOptions don't override it ([#7237](https://github.com/storybookjs/storybook/pull/7237))
+- Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))
 
 ### Maintenance
 
-* Build: delete tests & snapshots from dist ([#7358](https://github.com/storybookjs/storybook/pull/7358))
+- Build: delete tests & snapshots from dist ([#7358](https://github.com/storybookjs/storybook/pull/7358))
 
 ### Dependency Upgrades
 
-* CLI: replaced merge-dirs dependency by fs-extra ([#7100](https://github.com/storybookjs/storybook/pull/7100))
+- CLI: replaced merge-dirs dependency by fs-extra ([#7100](https://github.com/storybookjs/storybook/pull/7100))
 
 ## 5.2.0-beta.18 (July 30, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Ensure getNotes/getInfo return string ([#7597](https://github.com/storybookjs/storybook/pull/7597))
-* React/Angular/HTML/Vue: Fix typings for `configure` ([#7598](https://github.com/storybookjs/storybook/pull/7598))
+- Addon-docs: Ensure getNotes/getInfo return string ([#7597](https://github.com/storybookjs/storybook/pull/7597))
+- React/Angular/HTML/Vue: Fix typings for `configure` ([#7598](https://github.com/storybookjs/storybook/pull/7598))
 
 ### Maintenance
 
-* Typescript: Migrate Vue ([#7578](https://github.com/storybookjs/storybook/pull/7578))
+- Typescript: Migrate Vue ([#7578](https://github.com/storybookjs/storybook/pull/7578))
 
 ### Dependency Upgrades
 
-* Upgrade corejs-upgrade-webpack-plugin lazy-universal-dotenv ([#7592](https://github.com/storybookjs/storybook/pull/7592))
+- Upgrade corejs-upgrade-webpack-plugin lazy-universal-dotenv ([#7592](https://github.com/storybookjs/storybook/pull/7592))
 
 ## 5.2.0-beta.17 (July 29, 2019)
 
 ### Bug Fixes
 
-* CLI: Fix storiesof-to-csf migration w/punctuation ([#7590](https://github.com/storybookjs/storybook/pull/7590))
+- CLI: Fix storiesof-to-csf migration w/punctuation ([#7590](https://github.com/storybookjs/storybook/pull/7590))
 
 ## 5.2.0-beta.16 (July 29, 2019)
 
 ### Features
 
-* Addon-docs: Configure jsx automagically ([#7581](https://github.com/storybookjs/storybook/pull/7581))
-* Addon-docs: Add DocsPage automagically ([#7579](https://github.com/storybookjs/storybook/pull/7579))
+- Addon-docs: Configure jsx automagically ([#7581](https://github.com/storybookjs/storybook/pull/7581))
+- Addon-docs: Add DocsPage automagically ([#7579](https://github.com/storybookjs/storybook/pull/7579))
 
 ## 5.2.0-beta.15 (July 29, 2019)
 
 ### Features
 
-* CRA: Add support for TSX in config folder ([#7566](https://github.com/storybookjs/storybook/pull/7566))
+- CRA: Add support for TSX in config folder ([#7566](https://github.com/storybookjs/storybook/pull/7566))
 
 ### Bug Fixes
 
-* Addon-info: only render Components in propTables ([#7477](https://github.com/storybookjs/storybook/pull/7477))
+- Addon-info: only render Components in propTables ([#7477](https://github.com/storybookjs/storybook/pull/7477))
 
 ### Dependency Upgrades
 
-* Update telejson dependency to 2.2.2 ([#7586](https://github.com/storybookjs/storybook/pull/7586))
-* Angular: Fix @angular-devkit/build-angular version ([#7585](https://github.com/storybookjs/storybook/pull/7585))
+- Update telejson dependency to 2.2.2 ([#7586](https://github.com/storybookjs/storybook/pull/7586))
+- Angular: Fix @angular-devkit/build-angular version ([#7585](https://github.com/storybookjs/storybook/pull/7585))
 
 ## 5.2.0-beta.14 (July 29, 2019)
 
@@ -1512,18 +2810,18 @@ If you're not using SB Docs, you probably don't have to worry about this.
 
 ### Breaking Changes
 
-* Core: Rename `load` to `configure` ([#7576](https://github.com/storybookjs/storybook/pull/7576))
+- Core: Rename `load` to `configure` ([#7576](https://github.com/storybookjs/storybook/pull/7576))
 
 ## 5.2.0-beta.12 (July 27, 2019)
 
 ### Bug Fixes
 
-* Addon-knobs: Fix select knob default selection when using array values ([#7568](https://github.com/storybookjs/storybook/pull/7568))
-* Addon-knobs: Call onChanges only for changed props ([#6884](https://github.com/storybookjs/storybook/pull/6884))
+- Addon-knobs: Fix select knob default selection when using array values ([#7568](https://github.com/storybookjs/storybook/pull/7568))
+- Addon-knobs: Call onChanges only for changed props ([#6884](https://github.com/storybookjs/storybook/pull/6884))
 
 ### Maintenance
 
-* Angular: Print error message if angular.json has no default project specified ([#7574](https://github.com/storybookjs/storybook/pull/7574))
+- Angular: Print error message if angular.json has no default project specified ([#7574](https://github.com/storybookjs/storybook/pull/7574))
 
 ## 5.2.0-beta.11 (July 26, 2019)
 
@@ -1535,25 +2833,25 @@ This is a breaking release that undoes an unintentional breaking change introduc
 
 ### Breaking Changes
 
-* Core: Remove project root `babel.config.js` loading ([#7573](https://github.com/storybookjs/storybook/pull/7573))
+- Core: Remove project root `babel.config.js` loading ([#7573](https://github.com/storybookjs/storybook/pull/7573))
 
 ### Features
 
-* React: Add hooks support to stories ([#7571](https://github.com/storybookjs/storybook/pull/7571))
+- React: Add hooks support to stories ([#7571](https://github.com/storybookjs/storybook/pull/7571))
 
 ### Bug Fixes
 
-* UI: Fix attribute warning on shortcut button click ([#7548](https://github.com/storybookjs/storybook/pull/7548))
+- UI: Fix attribute warning on shortcut button click ([#7548](https://github.com/storybookjs/storybook/pull/7548))
 
 ## 5.2.0-beta.9 (July 26, 2019)
 
 ### Bug Fixes
 
-* Angular: Fix automatic module metadata extraction for forRoot imports ([#7224](https://github.com/storybookjs/storybook/pull/7224))
+- Angular: Fix automatic module metadata extraction for forRoot imports ([#7224](https://github.com/storybookjs/storybook/pull/7224))
 
 ### Maintenance
 
-* Rename "Module" to Component Story Format ([#7564](https://github.com/storybookjs/storybook/pull/7564))
+- Rename "Module" to Component Story Format ([#7564](https://github.com/storybookjs/storybook/pull/7564))
 
 ## 5.2.0-beta.8 (July 25, 2019)
 
@@ -1561,34 +2859,34 @@ This is a breaking release that undoes an unintentional breaking change introduc
 
 `source-loader` is now part of `addon-docs` preset. If you're using both the `addon-docs` preset and `source-loader` in your project, you need to update. You can remove `source-loader` and let the preset take care of it. Alternatively, you can disable `source-loader` in the preset by setting `sourceLoaderOptions` to `null`.
 
-* Addon-docs: Add source-loader to preset ([#7547](https://github.com/storybookjs/storybook/pull/7547))
-* Core: Don't allow duplicate titles ([#7542](https://github.com/storybookjs/storybook/pull/7542))
+- Addon-docs: Add source-loader to preset ([#7547](https://github.com/storybookjs/storybook/pull/7547))
+- Core: Don't allow duplicate titles ([#7542](https://github.com/storybookjs/storybook/pull/7542))
 
 ### Bug Fixes
 
-* Addon-storysource: Add source-loader dep to avoid breaking change ([#7554](https://github.com/storybookjs/storybook/pull/7554))
-* Addon-contexts: Ensure nodes is Array ([#7393](https://github.com/storybookjs/storybook/pull/7393))
+- Addon-storysource: Add source-loader dep to avoid breaking change ([#7554](https://github.com/storybookjs/storybook/pull/7554))
+- Addon-contexts: Ensure nodes is Array ([#7393](https://github.com/storybookjs/storybook/pull/7393))
 
 ### Maintenance
 
-* Angular: Log angular cli config errors ([#7484](https://github.com/storybookjs/storybook/pull/7484))
+- Angular: Log angular cli config errors ([#7484](https://github.com/storybookjs/storybook/pull/7484))
 
 ## 5.2.0-beta.7 (July 23, 2019)
 
 ### Features
 
-* Addon-docs: MDX function stories ([#7529](https://github.com/storybookjs/storybook/pull/7529))
-* CLI: update `sb init` to module format for Ember/Marko/Mithril/Rax/Riot/Svelte ([#7504](https://github.com/storybookjs/storybook/pull/7504))
-* CLI: update `sb init` to module format for Angular ([#7502](https://github.com/storybookjs/storybook/pull/7502))
-* CLI: update `sb init` to module format for React ([#7500](https://github.com/storybookjs/storybook/pull/7500))
+- Addon-docs: MDX function stories ([#7529](https://github.com/storybookjs/storybook/pull/7529))
+- CLI: update `sb init` to module format for Ember/Marko/Mithril/Rax/Riot/Svelte ([#7504](https://github.com/storybookjs/storybook/pull/7504))
+- CLI: update `sb init` to module format for Angular ([#7502](https://github.com/storybookjs/storybook/pull/7502))
+- CLI: update `sb init` to module format for React ([#7500](https://github.com/storybookjs/storybook/pull/7500))
 
 ### Bug Fixes
 
-* Ondevice-knobs: Graceful fail on missing default ([#7533](https://github.com/storybookjs/storybook/pull/7533))
+- Ondevice-knobs: Graceful fail on missing default ([#7533](https://github.com/storybookjs/storybook/pull/7533))
 
 ### Maintenance
 
-* Build: Attempt to fix travis timeouts ([#7531](https://github.com/storybookjs/storybook/pull/7531))
+- Build: Attempt to fix travis timeouts ([#7531](https://github.com/storybookjs/storybook/pull/7531))
 
 ## 5.2.0-beta.6 (July 23, 2019)
 
@@ -1598,300 +2896,300 @@ It is now recommended to only use ONE `load` call in your app and it will warn y
 
 ### Features
 
-* Core: Top-level components in MDX/Module formats ([#7524](https://github.com/storybookjs/storybook/pull/7524))
-* Core: Module format `load` accept loader function  ([#7518](https://github.com/storybookjs/storybook/pull/7518))
+- Core: Top-level components in MDX/Module formats ([#7524](https://github.com/storybookjs/storybook/pull/7524))
+- Core: Module format `load` accept loader function ([#7518](https://github.com/storybookjs/storybook/pull/7518))
 
 ### Bug Fixes
 
-* Addon-centered: Fix component disappearing on zoom ([#7400](https://github.com/storybookjs/storybook/pull/7400))
+- Addon-centered: Fix component disappearing on zoom ([#7400](https://github.com/storybookjs/storybook/pull/7400))
 
 ### Maintenance
 
-* Addon-knobs: enable Typescript `strict` flag ([#7515](https://github.com/storybookjs/storybook/pull/7515))
+- Addon-knobs: enable Typescript `strict` flag ([#7515](https://github.com/storybookjs/storybook/pull/7515))
 
 ## 5.2.0-beta.5 (July 21, 2019)
 
 ### Features
 
-* CLI: update `sb init` to module format for Vue ([#7501](https://github.com/storybookjs/storybook/pull/7501))
-* CLI: update `sb init` to module format for HTML/Polymer ([#7503](https://github.com/storybookjs/storybook/pull/7503))
+- CLI: update `sb init` to module format for Vue ([#7501](https://github.com/storybookjs/storybook/pull/7501))
+- CLI: update `sb init` to module format for HTML/Polymer ([#7503](https://github.com/storybookjs/storybook/pull/7503))
 
 ### Bug Fixes
 
-* Source-loader: Separate server and client code for IE support ([#7510](https://github.com/storybookjs/storybook/pull/7510))
+- Source-loader: Separate server and client code for IE support ([#7510](https://github.com/storybookjs/storybook/pull/7510))
 
 ## 5.2.0-beta.4 (July 20, 2019)
 
 ### Breaking Changes
 
-* Core: Module format story decorators ([#7490](https://github.com/storybookjs/storybook/pull/7490))
+- Core: Module format story decorators ([#7490](https://github.com/storybookjs/storybook/pull/7490))
 
 ### Features
 
-* Addon-jest: UI Redesign ([#7424](https://github.com/storybookjs/storybook/pull/7424))
-* Marko: support rerendering ([#7460](https://github.com/storybookjs/storybook/pull/7460))
+- Addon-jest: UI Redesign ([#7424](https://github.com/storybookjs/storybook/pull/7424))
+- Marko: support rerendering ([#7460](https://github.com/storybookjs/storybook/pull/7460))
 
 ### Bug Fixes
 
-* Addon-docs: Fix MDX source string escaping ([#7497](https://github.com/storybookjs/storybook/pull/7497))
+- Addon-docs: Fix MDX source string escaping ([#7497](https://github.com/storybookjs/storybook/pull/7497))
 
 ### Dependency Upgrades
 
-* Marko: Upgrade loader & config ([#7459](https://github.com/storybookjs/storybook/pull/7459))
-* Update core-js in addon-ondevice-actions package.json ([#7491](https://github.com/storybookjs/storybook/pull/7491))
+- Marko: Upgrade loader & config ([#7459](https://github.com/storybookjs/storybook/pull/7459))
+- Update core-js in addon-ondevice-actions package.json ([#7491](https://github.com/storybookjs/storybook/pull/7491))
 
 ## 5.2.0-beta.3 (July 19, 2019)
 
 ### Features
 
-* React-native: Add storyId as testID ([#7482](https://github.com/storybookjs/storybook/pull/7482))
+- React-native: Add storyId as testID ([#7482](https://github.com/storybookjs/storybook/pull/7482))
 
 ### Bug Fixes
 
-* React-native: On-device knobs input fixes ([#7475](https://github.com/storybookjs/storybook/pull/7475))
-* React-native: Fix crna-kitchen-sink ([#7200](https://github.com/storybookjs/storybook/pull/7200))
+- React-native: On-device knobs input fixes ([#7475](https://github.com/storybookjs/storybook/pull/7475))
+- React-native: Fix crna-kitchen-sink ([#7200](https://github.com/storybookjs/storybook/pull/7200))
 
 ## 5.2.0-beta.2 (July 18, 2019)
 
 ### Features
 
-* CLI: convert mdx to module format ([#7419](https://github.com/storybookjs/storybook/pull/7419))
-* CLI: sb migrate npm & typescript support ([#7463](https://github.com/storybookjs/storybook/pull/7463))
-* Addon-Docs: HTML support & example ([#7454](https://github.com/storybookjs/storybook/pull/7454))
+- CLI: convert mdx to module format ([#7419](https://github.com/storybookjs/storybook/pull/7419))
+- CLI: sb migrate npm & typescript support ([#7463](https://github.com/storybookjs/storybook/pull/7463))
+- Addon-Docs: HTML support & example ([#7454](https://github.com/storybookjs/storybook/pull/7454))
 
 ### Bug Fixes
 
-* Convert-storiesof-to-module: user exports, collisions, reserved keywords ([#7471](https://github.com/storybookjs/storybook/pull/7471))
-* React-native: On-device knobs fixes ([#7470](https://github.com/storybookjs/storybook/pull/7470))
+- Convert-storiesof-to-module: user exports, collisions, reserved keywords ([#7471](https://github.com/storybookjs/storybook/pull/7471))
+- React-native: On-device knobs fixes ([#7470](https://github.com/storybookjs/storybook/pull/7470))
 
 ### Dependency Upgrades
 
-* Addon-docs: Upgrade MDX to 1.1 ([#7476](https://github.com/storybookjs/storybook/pull/7476))
+- Addon-docs: Upgrade MDX to 1.1 ([#7476](https://github.com/storybookjs/storybook/pull/7476))
 
 ## 5.2.0-beta.1 (July 18, 2019)
 
 ### Features
 
-* React native: Emit event when story is rendered ([#7449](https://github.com/storybookjs/storybook/pull/7449))
+- React native: Emit event when story is rendered ([#7449](https://github.com/storybookjs/storybook/pull/7449))
 
 ### Bug Fixes
 
-* Addon-knobs: improve types via generics and readonlyarray ([#7411](https://github.com/storybookjs/storybook/pull/7411))
-* Ondevice-backgrounds: use same param key as addon-backgrounds ([#7437](https://github.com/storybookjs/storybook/pull/7437))
+- Addon-knobs: improve types via generics and readonlyarray ([#7411](https://github.com/storybookjs/storybook/pull/7411))
+- Ondevice-backgrounds: use same param key as addon-backgrounds ([#7437](https://github.com/storybookjs/storybook/pull/7437))
 
 ## 5.2.0-beta.0 (July 15, 2019)
 
 ### Features
 
-* Codemod: Convert module format to MDX ([#7418](https://github.com/storybookjs/storybook/pull/7418))
+- Codemod: Convert module format to MDX ([#7418](https://github.com/storybookjs/storybook/pull/7418))
 
 ## 5.2.0-alpha.44 (July 15, 2019)
 
 ### Features
 
-* CLI: Add migrate command ([#7414](https://github.com/storybookjs/storybook/pull/7414))
+- CLI: Add migrate command ([#7414](https://github.com/storybookjs/storybook/pull/7414))
 
 ### Bug Fixes
 
-* UI: Fix Panel rendered wrong at Docs-page ([#7327](https://github.com/storybookjs/storybook/pull/7327))
+- UI: Fix Panel rendered wrong at Docs-page ([#7327](https://github.com/storybookjs/storybook/pull/7327))
 
 ### Maintenance
 
-* Typescript: Fix types of client-api & storystore ([#7337](https://github.com/storybookjs/storybook/pull/7337))
+- Typescript: Fix types of client-api & storystore ([#7337](https://github.com/storybookjs/storybook/pull/7337))
 
 ## 5.2.0-alpha.43 (July 13, 2019)
 
 ### Bug Fixes
 
-* Addon-analytics: Fix API signature ([#7410](https://github.com/storybookjs/storybook/pull/7410))
-* Addon-knobs: fix knobs function return types ([#7391](https://github.com/storybookjs/storybook/pull/7391))
-* UI: Fix proptype for isToolshown ([#7405](https://github.com/storybookjs/storybook/pull/7405))
-* UI: Fix propType warnings ([#7408](https://github.com/storybookjs/storybook/pull/7408))
+- Addon-analytics: Fix API signature ([#7410](https://github.com/storybookjs/storybook/pull/7410))
+- Addon-knobs: fix knobs function return types ([#7391](https://github.com/storybookjs/storybook/pull/7391))
+- UI: Fix proptype for isToolshown ([#7405](https://github.com/storybookjs/storybook/pull/7405))
+- UI: Fix propType warnings ([#7408](https://github.com/storybookjs/storybook/pull/7408))
 
 ### Maintenance
 
-* Addon-actions: Use v4 UUID instead of v1 for action IDs ([#7397](https://github.com/storybookjs/storybook/pull/7397))
-* UI: Remove recompose ([#7385](https://github.com/storybookjs/storybook/pull/7385))
-* UI: FIX & IMPROVE styling interop of addon-background & addon-viewport ([#7385](https://github.com/storybookjs/storybook/pull/7385))
+- Addon-actions: Use v4 UUID instead of v1 for action IDs ([#7397](https://github.com/storybookjs/storybook/pull/7397))
+- UI: Remove recompose ([#7385](https://github.com/storybookjs/storybook/pull/7385))
+- UI: FIX & IMPROVE styling interop of addon-background & addon-viewport ([#7385](https://github.com/storybookjs/storybook/pull/7385))
 
 ### Breaking Changes
 
-* Move grid toolbar feature to background-addon ([#7385](https://github.com/storybookjs/storybook/pull/7385))
+- Move grid toolbar feature to background-addon ([#7385](https://github.com/storybookjs/storybook/pull/7385))
 
 ## 5.2.0-alpha.42 (July 12, 2019)
 
 ### Breaking Changes
 
-* Addon-docs: Remove primary parameter ([#7383](https://github.com/storybookjs/storybook/pull/7383))
+- Addon-docs: Remove primary parameter ([#7383](https://github.com/storybookjs/storybook/pull/7383))
 
 ### Bug Fixes
 
-* Addon-docs: Fix default separator inconsistency ([#7382](https://github.com/storybookjs/storybook/pull/7382))
-* UI: Fix placement of notificationistList on docs page ([#7290](https://github.com/storybookjs/storybook/pull/7290))
+- Addon-docs: Fix default separator inconsistency ([#7382](https://github.com/storybookjs/storybook/pull/7382))
+- UI: Fix placement of notificationistList on docs page ([#7290](https://github.com/storybookjs/storybook/pull/7290))
 
 ### Maintenance
 
-* Typescript: Migrate @storybook/html ([#7338](https://github.com/storybookjs/storybook/pull/7338))
+- Typescript: Migrate @storybook/html ([#7338](https://github.com/storybookjs/storybook/pull/7338))
 
 ### Dependency Upgrades
 
-* Bump lodash from 4.17.13 to 4.17.14 ([#7384](https://github.com/storybookjs/storybook/pull/7384))
-* [Security] Bump lodash.defaultsdeep from 4.6.0 to 4.6.1 ([#7370](https://github.com/storybookjs/storybook/pull/7370))
-* [Security] Bump lodash from 4.17.11 to 4.17.13 ([#7374](https://github.com/storybookjs/storybook/pull/7374))
-* [Security] Bump lodash.mergewith from 4.6.1 to 4.6.2 ([#7372](https://github.com/storybookjs/storybook/pull/7372))
-* [Security] Bump lodash.merge from 4.6.1 to 4.6.2 ([#7373](https://github.com/storybookjs/storybook/pull/7373))
-* [Security] Bump lodash-es from 4.17.11 to 4.17.14 ([#7371](https://github.com/storybookjs/storybook/pull/7371))
-* Upgrade react-select dependency to version 3 for addon-knobs ([#7336](https://github.com/storybookjs/storybook/pull/7336))
+- Bump lodash from 4.17.13 to 4.17.14 ([#7384](https://github.com/storybookjs/storybook/pull/7384))
+- [Security] Bump lodash.defaultsdeep from 4.6.0 to 4.6.1 ([#7370](https://github.com/storybookjs/storybook/pull/7370))
+- [Security] Bump lodash from 4.17.11 to 4.17.13 ([#7374](https://github.com/storybookjs/storybook/pull/7374))
+- [Security] Bump lodash.mergewith from 4.6.1 to 4.6.2 ([#7372](https://github.com/storybookjs/storybook/pull/7372))
+- [Security] Bump lodash.merge from 4.6.1 to 4.6.2 ([#7373](https://github.com/storybookjs/storybook/pull/7373))
+- [Security] Bump lodash-es from 4.17.11 to 4.17.14 ([#7371](https://github.com/storybookjs/storybook/pull/7371))
+- Upgrade react-select dependency to version 3 for addon-knobs ([#7336](https://github.com/storybookjs/storybook/pull/7336))
 
 ## 5.2.0-alpha.41 (July 11, 2019)
 
 ### Features
 
-* API: Preview hooks ([#6916](https://github.com/storybookjs/storybook/pull/6916))
-* Core: Custom webpack option for standalone storybook ([#6886](https://github.com/storybookjs/storybook/pull/6886))
+- API: Preview hooks ([#6916](https://github.com/storybookjs/storybook/pull/6916))
+- Core: Custom webpack option for standalone storybook ([#6886](https://github.com/storybookjs/storybook/pull/6886))
 
 ### Bug Fixes
 
-* Addon-knobs: Fix TypeError on KnobManager channel ([#7341](https://github.com/storybookjs/storybook/pull/7341))
-* React-native: Explicitly depend on emotion core and theming ([#7362](https://github.com/storybookjs/storybook/pull/7362))
+- Addon-knobs: Fix TypeError on KnobManager channel ([#7341](https://github.com/storybookjs/storybook/pull/7341))
+- React-native: Explicitly depend on emotion core and theming ([#7362](https://github.com/storybookjs/storybook/pull/7362))
 
 ### Dependency Upgrades
 
-* Bump @babel/preset-env from 7.5.0 to 7.5.4 ([#7364](https://github.com/storybookjs/storybook/pull/7364))
-* Update react-test-renderer requirement from 16.5.1 to 16.8.6 in /examples-native/crna-kitchen-sink ([#6372](https://github.com/storybookjs/storybook/pull/6372))
-* Bump rax-text from 0.6.5 to 1.0.0 ([#7346](https://github.com/storybookjs/storybook/pull/7346))
+- Bump @babel/preset-env from 7.5.0 to 7.5.4 ([#7364](https://github.com/storybookjs/storybook/pull/7364))
+- Update react-test-renderer requirement from 16.5.1 to 16.8.6 in /examples-native/crna-kitchen-sink ([#6372](https://github.com/storybookjs/storybook/pull/6372))
+- Bump rax-text from 0.6.5 to 1.0.0 ([#7346](https://github.com/storybookjs/storybook/pull/7346))
 
 ## 5.2.0-alpha.40 (July 10, 2019)
 
 ### Bug Fixes
 
-* Addon-knobs: Revert entrypoint deletion ([#7369](https://github.com/storybookjs/storybook/pull/7369))
-* Typescript: Fix types in api package ([#7072](https://github.com/storybookjs/storybook/pull/7072))
-* UI: Fix settings page route (about, shortcuts) ([#7241](https://github.com/storybookjs/storybook/pull/7241))
+- Addon-knobs: Revert entrypoint deletion ([#7369](https://github.com/storybookjs/storybook/pull/7369))
+- Typescript: Fix types in api package ([#7072](https://github.com/storybookjs/storybook/pull/7072))
+- UI: Fix settings page route (about, shortcuts) ([#7241](https://github.com/storybookjs/storybook/pull/7241))
 
 ### Maintenance
 
-* Linting: ADD an ignore for an eslint error about a missing dependency (puppeteer) ([#7239](https://github.com/storybookjs/storybook/pull/7239))
-* CI: ADD travis ([#7252](https://github.com/storybookjs/storybook/pull/7252))
-* Typescript: Migrate @storybook/angular ([#6570](https://github.com/storybookjs/storybook/pull/6570))
+- Linting: ADD an ignore for an eslint error about a missing dependency (puppeteer) ([#7239](https://github.com/storybookjs/storybook/pull/7239))
+- CI: ADD travis ([#7252](https://github.com/storybookjs/storybook/pull/7252))
+- Typescript: Migrate @storybook/angular ([#6570](https://github.com/storybookjs/storybook/pull/6570))
 
 ### Dependency Upgrades
 
-* Bump express-graphql from 0.7.1 to 0.8.0 ([#7345](https://github.com/storybookjs/storybook/pull/7345))
-* Bump react-native-modal-datetime-picker from 6.1.0 to 7.4.2 ([#6844](https://github.com/storybookjs/storybook/pull/6844))
+- Bump express-graphql from 0.7.1 to 0.8.0 ([#7345](https://github.com/storybookjs/storybook/pull/7345))
+- Bump react-native-modal-datetime-picker from 6.1.0 to 7.4.2 ([#6844](https://github.com/storybookjs/storybook/pull/6844))
 
 ## 5.2.0-alpha.39 (July 10, 2019)
 
 ### Bug Fixes
 
-* UI: Fix Sidebar input refresh on 'Enter' ([#7342](https://github.com/storybookjs/storybook/pull/7342))
-* Addon-knobs: Fix select options types to allow string[] and null ([#7356](https://github.com/storybookjs/storybook/pull/7356))
+- UI: Fix Sidebar input refresh on 'Enter' ([#7342](https://github.com/storybookjs/storybook/pull/7342))
+- Addon-knobs: Fix select options types to allow string[] and null ([#7356](https://github.com/storybookjs/storybook/pull/7356))
 
 ### Maintenance
 
-* Typescript: Migrate @storybook/react ([#7054](https://github.com/storybookjs/storybook/pull/7054))
-* Build: delete tests & snapshots from dist ([#7358](https://github.com/storybookjs/storybook/pull/7358))
+- Typescript: Migrate @storybook/react ([#7054](https://github.com/storybookjs/storybook/pull/7054))
+- Build: delete tests & snapshots from dist ([#7358](https://github.com/storybookjs/storybook/pull/7358))
 
 ## 5.2.0-alpha.38 (July 9, 2019)
 
 ### Bug Fixes
 
-* Addon-storysource: Replace loader with source-loader ([#7272](https://github.com/storybookjs/storybook/pull/7272))
+- Addon-storysource: Replace loader with source-loader ([#7272](https://github.com/storybookjs/storybook/pull/7272))
 
 ### Maintenance
 
-* Typescript: Migrate @storybook/addon-knobs ([#7180](https://github.com/storybookjs/storybook/pull/7180))
+- Typescript: Migrate @storybook/addon-knobs ([#7180](https://github.com/storybookjs/storybook/pull/7180))
 
 ### Dependency Upgrades
 
-* Upgrade all dependencies ([#7329](https://github.com/storybookjs/storybook/pull/7329))
+- Upgrade all dependencies ([#7329](https://github.com/storybookjs/storybook/pull/7329))
 
 ## 5.2.0-alpha.37 (July 8, 2019)
 
 ### Bug Fixes
 
-* Addon-docs: Use storyFn instead of getDecorated ([#7334](https://github.com/storybookjs/storybook/pull/7334))
-* Addon-knobs: Prevent rerender when a button callback returns false. ([#7197](https://github.com/storybookjs/storybook/pull/7197))
-* Addons: Fix null parameters in disable addons tab logic ([#7333](https://github.com/storybookjs/storybook/pull/7333))
-* Addon-docs: Fix renaming stories on module / MDX format ([#7319](https://github.com/storybookjs/storybook/pull/7319))
-* Addon-centered/contexts: Move optionalDependencies to peerDependencies ([#7315](https://github.com/storybookjs/storybook/pull/7315))
+- Addon-docs: Use storyFn instead of getDecorated ([#7334](https://github.com/storybookjs/storybook/pull/7334))
+- Addon-knobs: Prevent rerender when a button callback returns false. ([#7197](https://github.com/storybookjs/storybook/pull/7197))
+- Addons: Fix null parameters in disable addons tab logic ([#7333](https://github.com/storybookjs/storybook/pull/7333))
+- Addon-docs: Fix renaming stories on module / MDX format ([#7319](https://github.com/storybookjs/storybook/pull/7319))
+- Addon-centered/contexts: Move optionalDependencies to peerDependencies ([#7315](https://github.com/storybookjs/storybook/pull/7315))
 
 ### Maintenance
 
-* Typescript: migrate client api ([#7147](https://github.com/storybookjs/storybook/pull/7147))
-* Angular-cli: Add addon-docs example ([#7257](https://github.com/storybookjs/storybook/pull/7257))
+- Typescript: migrate client api ([#7147](https://github.com/storybookjs/storybook/pull/7147))
+- Angular-cli: Add addon-docs example ([#7257](https://github.com/storybookjs/storybook/pull/7257))
 
 ## 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/storybookjs/storybook/pull/6265))
-* Addons: Disable option for addon tab ([#6923](https://github.com/storybookjs/storybook/pull/6923))
+- 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/storybookjs/storybook/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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- 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))
+- Addon-docs: Fix source-loader CI errors ([#7203](https://github.com/storybookjs/storybook/pull/7203))
 
 ## 5.2.0-alpha.30 (June 25, 2019)
 
@@ -1899,70 +3197,70 @@ This release merges `release/docs-technical-preview` branch back into `next` thr
 
 ### Features
 
-* CLI: Add info command to print environment information ([#6937](https://github.com/storybookjs/storybook/pull/6937))
-* CLI: Use process.env.CI if available ([#7118](https://github.com/storybookjs/storybook/pull/7118))
-* Addon-docs: Source loader library ([#7117](https://github.com/storybookjs/storybook/pull/7117))
-* Addon-docs: Support non-story exports in MDX ([#7188](https://github.com/storybookjs/storybook/pull/7188))
-* Addon-docs: Support non-story exports in module format ([#7185](https://github.com/storybookjs/storybook/pull/7185))
-* Addon-docs: Docs mode with `--docs` flag ([#7154](https://github.com/storybookjs/storybook/pull/7154))
-* Addon-docs: Convert to module format codemod ([#7174](https://github.com/storybookjs/storybook/pull/7174))
-* Addon-docs: MDX support ([#7145](https://github.com/storybookjs/storybook/pull/7145))
-* Addon-docs: Component parameter codemod ([#7155](https://github.com/storybookjs/storybook/pull/7155))
-* Addon-docs: DocsPage and doc blocks ([#7119](https://github.com/storybookjs/storybook/pull/7119))
-* Addon-docs: Module story format & framework param ([#7110](https://github.com/storybookjs/storybook/pull/7110))
-* Addon-docs: Basic skeleton, UI viewMode handling ([#7107](https://github.com/storybookjs/storybook/pull/7107))
+- CLI: Add info command to print environment information ([#6937](https://github.com/storybookjs/storybook/pull/6937))
+- CLI: Use process.env.CI if available ([#7118](https://github.com/storybookjs/storybook/pull/7118))
+- Addon-docs: Source loader library ([#7117](https://github.com/storybookjs/storybook/pull/7117))
+- Addon-docs: Support non-story exports in MDX ([#7188](https://github.com/storybookjs/storybook/pull/7188))
+- Addon-docs: Support non-story exports in module format ([#7185](https://github.com/storybookjs/storybook/pull/7185))
+- Addon-docs: Docs mode with `--docs` flag ([#7154](https://github.com/storybookjs/storybook/pull/7154))
+- Addon-docs: Convert to module format codemod ([#7174](https://github.com/storybookjs/storybook/pull/7174))
+- Addon-docs: MDX support ([#7145](https://github.com/storybookjs/storybook/pull/7145))
+- Addon-docs: Component parameter codemod ([#7155](https://github.com/storybookjs/storybook/pull/7155))
+- Addon-docs: DocsPage and doc blocks ([#7119](https://github.com/storybookjs/storybook/pull/7119))
+- Addon-docs: Module story format & framework param ([#7110](https://github.com/storybookjs/storybook/pull/7110))
+- Addon-docs: Basic skeleton, UI viewMode handling ([#7107](https://github.com/storybookjs/storybook/pull/7107))
 
 ### Bug Fixes
 
-* Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))
-* Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))
-* Core: Improve HMR error reporting, no refreshes needed for error recovery ([#6972](https://github.com/storybookjs/storybook/pull/6972))
-* Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))
+- Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))
+- Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))
+- Core: Improve HMR error reporting, no refreshes needed for error recovery ([#6972](https://github.com/storybookjs/storybook/pull/6972))
+- Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))
 
 ### Maintenance
 
-* Typescript: Migrate addon viewport ([#7177](https://github.com/storybookjs/storybook/pull/7177))
+- Typescript: Migrate addon viewport ([#7177](https://github.com/storybookjs/storybook/pull/7177))
 
 ### Dependency Upgrades
 
-* Bump css-loader from 2.1.1 to 3.0.0 ([#7122](https://github.com/storybookjs/storybook/pull/7122))
-* 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))
+- Bump css-loader from 2.1.1 to 3.0.0 ([#7122](https://github.com/storybookjs/storybook/pull/7122))
+- 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))
+- 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))
+- 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
 
-* Addon-notes: enable multiple sections in notes panel ([#6861](https://github.com/storybookjs/storybook/pull/6861))
-* Addon-context: title fallback ([#7078](https://github.com/storybookjs/storybook/pull/7078))
-* Addon-info: Fix rendering of code block ([#6016](https://github.com/storybookjs/storybook/pull/6016))
+- Addon-notes: enable multiple sections in notes panel ([#6861](https://github.com/storybookjs/storybook/pull/6861))
+- Addon-context: title fallback ([#7078](https://github.com/storybookjs/storybook/pull/7078))
+- Addon-info: Fix rendering of code block ([#6016](https://github.com/storybookjs/storybook/pull/6016))
 
 ### 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))
+- 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))
 
 ### Maintenance
 
-* Core: Refactor story_store ([#6382](https://github.com/storybookjs/storybook/pull/6382))
-* Core: Make compatible with yarn Pnp ([#6922](https://github.com/storybookjs/storybook/pull/6922))
+- Core: Refactor story_store ([#6382](https://github.com/storybookjs/storybook/pull/6382))
+- Core: Make compatible with yarn Pnp ([#6922](https://github.com/storybookjs/storybook/pull/6922))
 
 ### Dependency Upgrades
 
-* Bump jest-expo from 32.0.1 to 33.0.2 ([#6996](https://github.com/storybookjs/storybook/pull/6996))
+- Bump jest-expo from 32.0.1 to 33.0.2 ([#6996](https://github.com/storybookjs/storybook/pull/6996))
 
 ## 5.2.0-alpha.28 (June 17, 2019)
 
@@ -1970,20 +3268,20 @@ Publish failed
 
 ## 5.2.0-alpha.27 (June 17, 2019)
 
-* 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))
+- 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.1.8 (June 14, 2019)
 
 ### Bug Fixes
 
-* CLI: Fix RN template to not import addons ([#7096](https://github.com/storybookjs/storybook/pull/7096))
+- CLI: Fix RN template to not import addons ([#7096](https://github.com/storybookjs/storybook/pull/7096))
 
 ## 5.1.7 (June 14, 2019)
 
 ### Bug Fixes
 
-* UI: Fix warning of loading prop not being a string ([#7080](https://github.com/storybookjs/storybook/pull/7080))
+- UI: Fix warning of loading prop not being a string ([#7080](https://github.com/storybookjs/storybook/pull/7080))
 
 ## 5.1.6 (June 14, 2019)
 
@@ -1993,10 +3291,10 @@ Publish failed
 
 ### Bug Fixes
 
-* 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))
+- 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.26 (June 14, 2019)
 
@@ -2013,14 +3311,14 @@ Publish failed
 
 ### Bug Fixes
 
-* 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))
+- 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))
 
 ### Dependency Upgrades
 
-* 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))
+- 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.24 (June 13, 2019)
 
@@ -2041,9 +3339,9 @@ Merge in changes from 5.1.3/next branch. Releasing from the addon-docs branch to
 
 ### Bug Fixes
 
-* 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))
+- 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))
 
 ## 5.1.2 (June 6, 2019)
 
@@ -2058,7 +3356,7 @@ Storybook 5.1 is a juicy upgrade including:
 - 🛠 Context addon: New UI for themes, internationalization, & more
 - 🎛 Presets: One-line configuration for babel, webpack, & addons
 
-5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
+  5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
 
 ## 5.1.0 (June 5, 2019)
 
@@ -2068,30 +3366,30 @@ Publish failed
 
 ### Features
 
-* UI: Add copy button for individual story ([#6719](https://github.com/storybookjs/storybook/pull/6719))
+- UI: Add copy button for individual story ([#6719](https://github.com/storybookjs/storybook/pull/6719))
 
 ### Bug Fixes
 
-* UI: Fix canvas rendering issue ([#6968](https://github.com/storybookjs/storybook/pull/6968))
-* Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 ([#6957](https://github.com/storybookjs/storybook/pull/6957))
-* Jest: layout/design fixes ([#6847](https://github.com/storybookjs/storybook/pull/6847))
-* Angular: Add 'addParameters' to index.d.ts ([#6929](https://github.com/storybookjs/storybook/pull/6929))
+- UI: Fix canvas rendering issue ([#6968](https://github.com/storybookjs/storybook/pull/6968))
+- Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 ([#6957](https://github.com/storybookjs/storybook/pull/6957))
+- Jest: layout/design fixes ([#6847](https://github.com/storybookjs/storybook/pull/6847))
+- Angular: Add 'addParameters' to index.d.ts ([#6929](https://github.com/storybookjs/storybook/pull/6929))
 
 ### Maintenance
 
-* FIX race condition in startup of verdaccio && FIX typos ([#6956](https://github.com/storybookjs/storybook/pull/6956))
-* Github org rename to storybookjs ([#6954](https://github.com/storybookjs/storybook/pull/6954))
+- FIX race condition in startup of verdaccio && FIX typos ([#6956](https://github.com/storybookjs/storybook/pull/6956))
+- Github org rename to storybookjs ([#6954](https://github.com/storybookjs/storybook/pull/6954))
 
 ## 5.1.0-rc.4 (June 2, 2019)
 
 ### Features
 
-* Core: deep merge global options parameter ([#6900](https://github.com/storybookjs/storybook/pull/6900))
+- Core: deep merge global options parameter ([#6900](https://github.com/storybookjs/storybook/pull/6900))
 
 ### Bug Fixes
 
-* 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))
+- 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)
 
@@ -2107,21 +3405,21 @@ Publish failed
 
 ### Features
 
-* React-native: Add accessibility on searchbar ([#6819](https://github.com/storybookjs/storybook/pull/6819))
+- React-native: Add accessibility on searchbar ([#6819](https://github.com/storybookjs/storybook/pull/6819))
 
 ### Bug Fixes
 
-* Storyshots: make compatible with read-pkg-up version ([#6907](https://github.com/storybookjs/storybook/pull/6907))
-* Addon-info: Fix issue where forwardRefs throw ([#6859](https://github.com/storybookjs/storybook/pull/6859))
-* Addon-notes: Fix whitespace rendering bug ([#6881](https://github.com/storybookjs/storybook/pull/6881))
+- Storyshots: make compatible with read-pkg-up version ([#6907](https://github.com/storybookjs/storybook/pull/6907))
+- Addon-info: Fix issue where forwardRefs throw ([#6859](https://github.com/storybookjs/storybook/pull/6859))
+- Addon-notes: Fix whitespace rendering bug ([#6881](https://github.com/storybookjs/storybook/pull/6881))
 
 ### Dependency Upgrades
 
-* Bump @types/enzyme from 3.9.2 to 3.9.3 ([#6891](https://github.com/storybookjs/storybook/pull/6891))
-* Bump eslint-plugin-import from 2.17.2 to 2.17.3 ([#6894](https://github.com/storybookjs/storybook/pull/6894))
-* Bump mini-css-extract-plugin from 0.6.0 to 0.7.0 ([#6895](https://github.com/storybookjs/storybook/pull/6895))
-* 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))
+- Bump @types/enzyme from 3.9.2 to 3.9.3 ([#6891](https://github.com/storybookjs/storybook/pull/6891))
+- Bump eslint-plugin-import from 2.17.2 to 2.17.3 ([#6894](https://github.com/storybookjs/storybook/pull/6894))
+- Bump mini-css-extract-plugin from 0.6.0 to 0.7.0 ([#6895](https://github.com/storybookjs/storybook/pull/6895))
+- 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)
 
@@ -2131,7 +3429,7 @@ Publish failed
 
 ### Bug Fixes
 
-* Core: Fix JS/JSON loading babel config ([#6878](https://github.com/storybookjs/storybook/pull/6878))
+- Core: Fix JS/JSON loading babel config ([#6878](https://github.com/storybookjs/storybook/pull/6878))
 
 ## 5.2.0-alpha.18 (May 26, 2019)
 
@@ -2167,55 +3465,55 @@ Publish failed
 
 ### Features
 
-* Core: Support loglevel for production/ci builds ([#6825](https://github.com/storybookjs/storybook/pull/6825))
+- Core: Support loglevel for production/ci builds ([#6825](https://github.com/storybookjs/storybook/pull/6825))
 
 ### Bug Fixes
 
-* Addon-storysource: Fix link color ([#6876](https://github.com/storybookjs/storybook/pull/6876))
-* Addon-centered: Fix unnecessary scroll bar ([#6862](https://github.com/storybookjs/storybook/pull/6862))
-* UI: Apply customQueryParams to eject iframe button ([#6817](https://github.com/storybookjs/storybook/pull/6817))
-* Theming: resolve paths locally if possible ([#6808](https://github.com/storybookjs/storybook/pull/6808))
-* Addon-links: Fix withLinks decorator ([#6823](https://github.com/storybookjs/storybook/pull/6823))
+- Addon-storysource: Fix link color ([#6876](https://github.com/storybookjs/storybook/pull/6876))
+- Addon-centered: Fix unnecessary scroll bar ([#6862](https://github.com/storybookjs/storybook/pull/6862))
+- UI: Apply customQueryParams to eject iframe button ([#6817](https://github.com/storybookjs/storybook/pull/6817))
+- Theming: resolve paths locally if possible ([#6808](https://github.com/storybookjs/storybook/pull/6808))
+- Addon-links: Fix withLinks decorator ([#6823](https://github.com/storybookjs/storybook/pull/6823))
 
 ### Maintenance
 
-* Addon-contexts: component tests and readability improvements ([#6716](https://github.com/storybookjs/storybook/pull/6716))
+- Addon-contexts: component tests and readability improvements ([#6716](https://github.com/storybookjs/storybook/pull/6716))
 
 ### Dependency Upgrades
 
-* Upgrade CRA preset dependencies to match CRA v3 ([#6589](https://github.com/storybookjs/storybook/pull/6589))
-* Bump schedule from 0.4.0 to 0.5.0 ([#6843](https://github.com/storybookjs/storybook/pull/6843))
-* UPGRADE dependencies & fix a security vulnerability (low-prio) ([#6875](https://github.com/storybookjs/storybook/pull/6875))
-* Bump simplebar-react from 1.0.0-alpha.9 to 1.0.0 ([#6842](https://github.com/storybookjs/storybook/pull/6842))
-* Bump ts-loader from 5.4.5 to 6.0.1 ([#6839](https://github.com/storybookjs/storybook/pull/6839))
-* Bump @types/react from 16.8.17 to 16.8.18 ([#6841](https://github.com/storybookjs/storybook/pull/6841))
-* Bump core-js-pure from 3.1.0 to 3.1.1 ([#6840](https://github.com/storybookjs/storybook/pull/6840))
+- Upgrade CRA preset dependencies to match CRA v3 ([#6589](https://github.com/storybookjs/storybook/pull/6589))
+- Bump schedule from 0.4.0 to 0.5.0 ([#6843](https://github.com/storybookjs/storybook/pull/6843))
+- UPGRADE dependencies & fix a security vulnerability (low-prio) ([#6875](https://github.com/storybookjs/storybook/pull/6875))
+- Bump simplebar-react from 1.0.0-alpha.9 to 1.0.0 ([#6842](https://github.com/storybookjs/storybook/pull/6842))
+- Bump ts-loader from 5.4.5 to 6.0.1 ([#6839](https://github.com/storybookjs/storybook/pull/6839))
+- Bump @types/react from 16.8.17 to 16.8.18 ([#6841](https://github.com/storybookjs/storybook/pull/6841))
+- Bump core-js-pure from 3.1.0 to 3.1.1 ([#6840](https://github.com/storybookjs/storybook/pull/6840))
 
 ## 5.1.0-rc.0 (May 21, 2019)
 
 ### Bug Fixes
 
-* UI: Fix initial bottom panel size ([#6822](https://github.com/storybookjs/storybook/pull/6822))
-* UI: Fix syntaxthighlighter themes ([#6814](https://github.com/storybookjs/storybook/pull/6814))
-* Addon-knobs: Fix Boolean knob (#6366) ([#6830](https://github.com/storybookjs/storybook/pull/6830))
-* Theming: Change lib/theming so it no longer depends on react-inspector ([#6818](https://github.com/storybookjs/storybook/pull/6818))
-* Core: Handle loading `.storybook/babel.config.js` (#6633) ([#6634](https://github.com/storybookjs/storybook/pull/6634))
-* CLI: Fix init in create-react-library projects ([#6815](https://github.com/storybookjs/storybook/pull/6815))
-* HTML: support knobs for both cached and uncached nodes ([#6783](https://github.com/storybookjs/storybook/pull/6783))
-* Uncorrupt yarn lock ([#6811](https://github.com/storybookjs/storybook/pull/6811))
-* Core: set a better value for process in manager webpack config ([#6767](https://github.com/storybookjs/storybook/pull/6767))
+- UI: Fix initial bottom panel size ([#6822](https://github.com/storybookjs/storybook/pull/6822))
+- UI: Fix syntaxthighlighter themes ([#6814](https://github.com/storybookjs/storybook/pull/6814))
+- Addon-knobs: Fix Boolean knob (#6366) ([#6830](https://github.com/storybookjs/storybook/pull/6830))
+- Theming: Change lib/theming so it no longer depends on react-inspector ([#6818](https://github.com/storybookjs/storybook/pull/6818))
+- Core: Handle loading `.storybook/babel.config.js` (#6633) ([#6634](https://github.com/storybookjs/storybook/pull/6634))
+- CLI: Fix init in create-react-library projects ([#6815](https://github.com/storybookjs/storybook/pull/6815))
+- HTML: support knobs for both cached and uncached nodes ([#6783](https://github.com/storybookjs/storybook/pull/6783))
+- Uncorrupt yarn lock ([#6811](https://github.com/storybookjs/storybook/pull/6811))
+- Core: set a better value for process in manager webpack config ([#6767](https://github.com/storybookjs/storybook/pull/6767))
 
 ### Maintenance
 
-* Typescript: Migrate addon-centered ([#6772](https://github.com/storybookjs/storybook/pull/6772))
-* Add engine field to package.json in apps ([#6809](https://github.com/storybookjs/storybook/pull/6809))
-* Fix required engine for apps ([#6810](https://github.com/storybookjs/storybook/pull/6810))
+- Typescript: Migrate addon-centered ([#6772](https://github.com/storybookjs/storybook/pull/6772))
+- Add engine field to package.json in apps ([#6809](https://github.com/storybookjs/storybook/pull/6809))
+- Fix required engine for apps ([#6810](https://github.com/storybookjs/storybook/pull/6810))
 
 ### Dependency Upgrades
 
-* Upgrade lodash to latest ([#6832](https://github.com/storybookjs/storybook/pull/6832))
-* 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))
+- Upgrade lodash to latest ([#6832](https://github.com/storybookjs/storybook/pull/6832))
+- 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)
 
@@ -2244,18 +3542,18 @@ Publish failed
 
 ### Bug Fixes
 
-* UI: Scrollbar supports theming again ([#6794](https://github.com/storybookjs/storybook/pull/6794))
-* UI: Fix scrolling styling ([#6785](https://github.com/storybookjs/storybook/pull/6785))
-* UI: Fix iframe refresh ([#6787](https://github.com/storybookjs/storybook/pull/6787))
-* UI: Preserve dimensions on resizing for panel ([#6696](https://github.com/storybookjs/storybook/pull/6696))
+- UI: Scrollbar supports theming again ([#6794](https://github.com/storybookjs/storybook/pull/6794))
+- UI: Fix scrolling styling ([#6785](https://github.com/storybookjs/storybook/pull/6785))
+- UI: Fix iframe refresh ([#6787](https://github.com/storybookjs/storybook/pull/6787))
+- UI: Preserve dimensions on resizing for panel ([#6696](https://github.com/storybookjs/storybook/pull/6696))
 
 ### Maintenance
 
-* Move chromatic to circle ci ([#6752](https://github.com/storybookjs/storybook/pull/6752))
+- Move chromatic to circle ci ([#6752](https://github.com/storybookjs/storybook/pull/6752))
 
 ### Dependency Upgrades
 
-* Bump fs-extra from 7.0.1 to 8.0.1 ([#6776](https://github.com/storybookjs/storybook/pull/6776))
+- 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)
 
@@ -2297,7 +3595,7 @@ After:
 #### Breaking changes
 
 - Doc blocks & presets have moved. Update your MDX stories and `presets.js` file accordingly:
-  - `import { Preview, Story } from '@storybook/addon-docs/blocks';
+  - `import { Preview, Story } from '@storybook/addon-docs/blocks';`
   - `module.exports = ['@storybook/addon-docs/common/preset'];`
 
 ## 5.1.0-beta.0 (May 10, 2019)
@@ -9201,57 +10499,57 @@ Storybook 3.0 is our first fully community-driven release! Notable changes:
 
 ## v2.35.3
 
-Allow customConfig to override devtool. [PR668](https://github.com/storybookjs/react-storybook/pull/668)
+Allow customConfig to override devtool. [PR668](https://github.com/storybookjs/storybook/pull/668)
 
 ## v2.35.2
 
 03-January-2017
 
-Fixes issue [#601](https://github.com/storybookjs/react-storybook/issues/601) where it throws error when introduce a propType with a hypen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue.
+Fixes issue [#601](https://github.com/storybookjs/storybook/issues/601) where it throws error when introduce a propType with a hypen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue.
 
 This release comes with the updated `babel-plugin-react-docgen`.
 
 ## v2.35.1
 
-- Revert [PR653](https://github.com/storybookjs/react-storybook/pull/653) where it's causing HMR to not working properly.
+- Revert [PR653](https://github.com/storybookjs/storybook/pull/653) where it's causing HMR to not working properly.
 
 ## v2.35.0
 
 18-December-2016
 
-- Using file-loader to load all the extensions [PR653](https://github.com/storybookjs/react-storybook/pull/653)
-- Update css-loader dependency [PR648](https://github.com/storybookjs/react-storybook/pull/648)
-- Check if stories are loaded from Jest [PR644](https://github.com/storybookjs/react-storybook/pull/644)
+- Using file-loader to load all the extensions [PR653](https://github.com/storybookjs/storybook/pull/653)
+- Update css-loader dependency [PR648](https://github.com/storybookjs/storybook/pull/648)
+- Check if stories are loaded from Jest [PR644](https://github.com/storybookjs/storybook/pull/644)
 
 ## v2.34.0
 
 05-December-2016
 
-Open the express router for developers (middleware.js file). [PR435](https://github.com/storybookjs/react-storybook/pull/435)
+Open the express router for developers (middleware.js file). [PR435](https://github.com/storybookjs/storybook/pull/435)
 
 ## v2.33.1
 
 01-December-2016
 
-Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybookjs/react-storybook/pull/634)
+Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybookjs/storybook/pull/634)
 
 ## v2.33.0
 
 28-November-2016
 
-Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybookjs/react-storybook/pull/631)
+Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybookjs/storybook/pull/631)
 
 ## v2.32.2
 
 28-November-2016
 
-Update postmsg channel module version [PR627](https://github.com/storybookjs/react-storybook/pull/627)
+Update postmsg channel module version [PR627](https://github.com/storybookjs/storybook/pull/627)
 
 ## v2.32.1
 
 22-November-2016
 
-Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybookjs/react-storybook/pull/623)
+Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybookjs/storybook/pull/623)
 
 ## v2.32.0
 
@@ -9261,13 +10559,13 @@ Incorrect publish (error when running `npm publish`)
 
 20-November-2016
 
-Add the react-storybook version to the build output. [PR621](https://github.com/storybookjs/react-storybook/pull/621)
+Add the react-storybook version to the build output. [PR621](https://github.com/storybookjs/storybook/pull/621)
 
 ## v2.30.1
 
 17-November-2016
 
-Update the postmsg channel module to fix issue [#555](https://github.com/storybookjs/react-storybook/issues/555) with [PR611](https://github.com/storybookjs/react-storybook/pull/611)
+Update the postmsg channel module to fix issue [#555](https://github.com/storybookjs/storybook/issues/555) with [PR611](https://github.com/storybookjs/storybook/pull/611)
 
 ## v2.30.0
 
@@ -9285,19 +10583,19 @@ Update @kadira/storybook-ui to the latest.
 
 10-November-2016
 
-Fix a typo in the story syntax error messages. [PR610](https://github.com/storybookjs/react-storybook/pull/610)
+Fix a typo in the story syntax error messages. [PR610](https://github.com/storybookjs/storybook/pull/610)
 
 ## v2.29.5
 
 09-November-2016
 
-Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybookjs/react-storybook/pull/608)
+Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybookjs/storybook/pull/608)
 
 ## v2.29.3
 
 08-November-2016
 
-Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybookjs/react-storybook/issues/543).
+Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybookjs/storybook/issues/543).
 
 ## v2.29.3
 
@@ -9312,11 +10610,11 @@ There was a text called undefined listed always on the top of the preview.
 
 Add various fixes.
 
-- Use webpack chunkhash to enable long-term caching. [PR597](https://github.com/storybookjs/react-storybook/pull/597)
-- Fixed json loader testing for when test is multiple. [PR598](https://github.com/storybookjs/react-storybook/pull/598)
-- Fix usage of custom favicon [PR592](https://github.com/storybookjs/react-storybook/pull/592)
-- Update postcss-loader to v1.1.0 [PR599](https://github.com/storybookjs/react-storybook/pull/599)
-- fix for `module.hot` is not available in a static build [PR600](https://github.com/storybookjs/react-storybook/pull/600)
+- Use webpack chunkhash to enable long-term caching. [PR597](https://github.com/storybookjs/storybook/pull/597)
+- Fixed json loader testing for when test is multiple. [PR598](https://github.com/storybookjs/storybook/pull/598)
+- Fix usage of custom favicon [PR592](https://github.com/storybookjs/storybook/pull/592)
+- Update postcss-loader to v1.1.0 [PR599](https://github.com/storybookjs/storybook/pull/599)
+- fix for `module.hot` is not available in a static build [PR600](https://github.com/storybookjs/storybook/pull/600)
 
 ## v2.29.1
 
@@ -9335,13 +10633,13 @@ This will fix some of the compilation issues such as #580.
 
 28-October-2016
 
-Remove preview decorator support. [PR583](https://github.com/storybookjs/react-storybook/pull/583).
+Remove preview decorator support. [PR583](https://github.com/storybookjs/storybook/pull/583).
 
 ## v2.28.0
 
 28-October-2016
 
-Add preview decorator support. [PR582](https://github.com/storybookjs/react-storybook/pull/582).
+Add preview decorator support. [PR582](https://github.com/storybookjs/storybook/pull/582).
 This will help us bring storybook designer with some great power.
 
 ## v2.27.0
@@ -9350,11 +10648,11 @@ This will help us bring storybook designer with some great power.
 
 Add a few usability improvements to Storybook.
 
-- Display storybook version. [PR559](https://github.com/storybookjs/react-storybook/pull/559)
-- Make the storybooks cacheable. [PR578](https://github.com/storybookjs/react-storybook/pull/578)
-- Change the devtool to eval and remove the use of source maps. [PR577](https://github.com/storybookjs/react-storybook/pull/577)
-- Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybookjs/react-storybook/pull/576)
-- Ship `json-loader` by default. [PR575](https://github.com/storybookjs/react-storybook/pull/575)
+- Display storybook version. [PR559](https://github.com/storybookjs/storybook/pull/559)
+- Make the storybooks cacheable. [PR578](https://github.com/storybookjs/storybook/pull/578)
+- Change the devtool to eval and remove the use of source maps. [PR577](https://github.com/storybookjs/storybook/pull/577)
+- Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybookjs/storybook/pull/576)
+- Ship `json-loader` by default. [PR575](https://github.com/storybookjs/storybook/pull/575)
 
 ## v2.26.0
 
@@ -9362,21 +10660,21 @@ Add a few usability improvements to Storybook.
 
 Get some new features from CRA.
 
-- Add jsx as a resolve extension [PR563](https://github.com/storybookjs/react-storybook/pull/563)
-- Allow to use postcss for CSS @imports [PR564](https://github.com/storybookjs/react-storybook/pull/564)
-- Use process.env as a proper object [PR565](https://github.com/storybookjs/react-storybook/pull/565)
+- Add jsx as a resolve extension [PR563](https://github.com/storybookjs/storybook/pull/563)
+- Allow to use postcss for CSS @imports [PR564](https://github.com/storybookjs/storybook/pull/564)
+- Use process.env as a proper object [PR565](https://github.com/storybookjs/storybook/pull/565)
 
 ## v2.25.1
 
 23-October-2016
 
-Add a potential fix to [558](https://github.com/storybookjs/react-storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2).
+Add a potential fix to [558](https://github.com/storybookjs/storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2).
 
 ## v2.25.0
 
 21-October-2016
 
-Add react docgen info into React classes with the react-docgen babel plugin. [PR557](https://github.com/storybookjs/react-storybook/pull/557).
+Add react docgen info into React classes with the react-docgen babel plugin. [PR557](https://github.com/storybookjs/storybook/pull/557).
 With this:
 
 - We could get docgen info with any React component class using `ClassName.__docgenInfo`.
@@ -9388,19 +10686,19 @@ Additionally, added `yarn.lock`.
 
 19-October-2016
 
-Do not show git command output. [PR554](https://github.com/storybookjs/react-storybook/pull/554)
+Do not show git command output. [PR554](https://github.com/storybookjs/storybook/pull/554)
 
 ## v2.24.0
 
 07-October-2016
 
-- Export git repository info to support custom tool integrations [PR536](https://github.com/storybookjs/react-storybook/pull/536)
+- Export git repository info to support custom tool integrations [PR536](https://github.com/storybookjs/storybook/pull/536)
 
 ## v2.23.0
 
 06-October-2016
 
-- Remove the experimental database addon from react-storybook [PR535](https://github.com/storybookjs/react-storybook/pull/535)
+- Remove the experimental database addon from react-storybook [PR535](https://github.com/storybookjs/storybook/pull/535)
 
 ## v2.22.0
 
@@ -9408,142 +10706,142 @@ Do not show git command output. [PR554](https://github.com/storybookjs/react-sto
 
 Add some nice development experiment based on suggestion from Dan Abramov.
 
-- Set a color to the Storybook URL in the console. [PR533](https://github.com/storybookjs/react-storybook/pull/533)
-- Add better error message when there's no React element in the story. [PR534](https://github.com/storybookjs/react-storybook/pull/534)
+- Set a color to the Storybook URL in the console. [PR533](https://github.com/storybookjs/storybook/pull/533)
+- Add better error message when there's no React element in the story. [PR534](https://github.com/storybookjs/storybook/pull/534)
 
 ## v2.21.0
 
 05-October-2016
 
-- Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybookjs/react-storybook/issues/468)
+- Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybookjs/storybook/issues/468)
 - Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3`
 
 ## v2.20.1
 
 28-September-2016
 
-- Fix story kind order bug [PR499](https://github.com/storybookjs/react-storybook/pull/499)
-- Prefix config environment variables [PR503](https://github.com/storybookjs/react-storybook/pull/503)
+- Fix story kind order bug [PR499](https://github.com/storybookjs/storybook/pull/499)
+- Prefix config environment variables [PR503](https://github.com/storybookjs/storybook/pull/503)
 
 ## v2.20.0
 
 26-September-2016
 
-- Use postMessage channel [PR498](https://github.com/storybookjs/react-storybook/pull/498)
-- Support dynamic panel titles [PR497](https://github.com/storybookjs/react-storybook/pull/497)
+- Use postMessage channel [PR498](https://github.com/storybookjs/storybook/pull/498)
+- Support dynamic panel titles [PR497](https://github.com/storybookjs/storybook/pull/497)
 
 ## v2.19.0
 
 26-September-2016
 
-- Support layout options [PR494](https://github.com/storybookjs/react-storybook/pull/494)
-- Update Typescript definitions [PR491](https://github.com/storybookjs/react-storybook/pull/491) and [PR493](https://github.com/storybookjs/react-storybook/pull/493)
+- Support layout options [PR494](https://github.com/storybookjs/storybook/pull/494)
+- Update Typescript definitions [PR491](https://github.com/storybookjs/storybook/pull/491) and [PR493](https://github.com/storybookjs/storybook/pull/493)
 
 ## v2.18.1
 
 23-September-2016
 
-- Stop uglifyjs from mangling names [PR483](https://github.com/storybookjs/react-storybook/pull/483)
+- Stop uglifyjs from mangling names [PR483](https://github.com/storybookjs/storybook/pull/483)
 
 ## v2.18.0
 
 23-September-2016
 
-- Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybookjs/react-storybook/pull/481)
+- Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybookjs/storybook/pull/481)
 
 ## v2.17.0
 
 22-September-2016
 
-- Add support for StoryShots. [PR479](https://github.com/storybookjs/react-storybook/pull/479)
-- Fix some typos: [PR477](https://github.com/storybookjs/react-storybook/pull/477) & [PR478](https://github.com/storybookjs/react-storybook/pull/478)
+- Add support for StoryShots. [PR479](https://github.com/storybookjs/storybook/pull/479)
+- Fix some typos: [PR477](https://github.com/storybookjs/storybook/pull/477) & [PR478](https://github.com/storybookjs/storybook/pull/478)
 
 ## v2.16.1
 
 21-September-2016
 
-- Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybookjs/react-storybook/pull/472)
-- Serve/Bundle the storybook favicon [PR473](https://github.com/storybookjs/react-storybook/pull/473)
+- Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybookjs/storybook/pull/472)
+- Serve/Bundle the storybook favicon [PR473](https://github.com/storybookjs/storybook/pull/473)
 
 ## v2.16.0
 
 21-September-2016
 
-- Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybookjs/react-storybook/pull/469)
+- Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybookjs/storybook/pull/469)
 - Update airbnd eslint rules to the latest.
 
 ## v2.15.1
 
 19-September-2016
 
-Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybookjs/react-storybook/pull/465)
+Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybookjs/storybook/pull/465)
 
 ## v2.15.0
 
 19-September-2016
 
-- Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybookjs/react-storybook/pull/462)
+- Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybookjs/storybook/pull/462)
 
 ## v2.14.0
 
 14-September-2016
 
-- Watch missing NPM modules and force webpack rebuild. [PR446](https://github.com/storybookjs/react-storybook/pull/446)
-- Fix issue on error message hanging after even it solved. [PR447](https://github.com/storybookjs/react-storybook/pull/447)
-- Allow to reload if HMR goes crazy. [PR448](https://github.com/storybookjs/react-storybook/pull/448)
-- Add support to get custom env variables. [PR450](https://github.com/storybookjs/react-storybook/pull/450)
+- Watch missing NPM modules and force webpack rebuild. [PR446](https://github.com/storybookjs/storybook/pull/446)
+- Fix issue on error message hanging after even it solved. [PR447](https://github.com/storybookjs/storybook/pull/447)
+- Allow to reload if HMR goes crazy. [PR448](https://github.com/storybookjs/storybook/pull/448)
+- Add support to get custom env variables. [PR450](https://github.com/storybookjs/storybook/pull/450)
 
 ## v2.13.1
 
 14-September-2016
 
-- Fix 404 error when db file does not exist [PR449](https://github.com/storybookjs/react-storybook/pull/449)
+- Fix 404 error when db file does not exist [PR449](https://github.com/storybookjs/storybook/pull/449)
 
 ## v2.13.0
 
 9-September-2016
 
-- Fix [#443](https://github.com/storybookjs/react-storybook/issues/443) where the static version of Storybook doesn't like Safari.
+- Fix [#443](https://github.com/storybookjs/storybook/issues/443) where the static version of Storybook doesn't like Safari.
 - Update postcss-loader to 0.13.0.
 
 ## v2.12.1
 
 8-September-2016
 
-- Parse static directory provided by env as a list. [PR436](https://github.com/storybookjs/react-storybook/pull/436)
+- Parse static directory provided by env as a list. [PR436](https://github.com/storybookjs/storybook/pull/436)
 
 ## v2.12.0
 
 8-September-2016
 
-- Do not include addon register file on preview. [PR426](https://github.com/storybookjs/react-storybook/pull/426)
-- Update css-loader to version 0.25.0. [PR427](https://github.com/storybookjs/react-storybook/pull/427)
-- Get the head.html values for every page request. [PR432](https://github.com/storybookjs/react-storybook/pull/432)
+- Do not include addon register file on preview. [PR426](https://github.com/storybookjs/storybook/pull/426)
+- Update css-loader to version 0.25.0. [PR427](https://github.com/storybookjs/storybook/pull/427)
+- Get the head.html values for every page request. [PR432](https://github.com/storybookjs/storybook/pull/432)
 
 ## v2.11.0
 
 4-September-2016
 
 - Remove babel-polyfill since we don't use it.
-- Update versions with the help from greenkeeper. [PR421](https://github.com/storybookjs/react-storybook/pull/421)
+- Update versions with the help from greenkeeper. [PR421](https://github.com/storybookjs/storybook/pull/421)
 
 ## v2.10.0
 
 3-September-2016
 
-- Adding airbnb-js-shims again. [PR419](https://github.com/storybookjs/react-storybook/pull/419)
+- Adding airbnb-js-shims again. [PR419](https://github.com/storybookjs/storybook/pull/419)
 
 ## v2.9.1
 
 2-September-2016.
 
-- Use the config directory to store the addon database file [PR418](https://github.com/storybookjs/react-storybook/pull/418).
+- Use the config directory to store the addon database file [PR418](https://github.com/storybookjs/storybook/pull/418).
 
 ## v2.9.0
 
 2-September-2016.
 
-- Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybookjs/react-storybook/pull/417).
+- Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybookjs/storybook/pull/417).
 
 ## v2.8.0
 
@@ -9555,25 +10853,25 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 
 1-September-2016
 
-- Add addon database feature [PR415](https://github.com/storybookjs/react-storybook/pull/415).
+- Add addon database feature [PR415](https://github.com/storybookjs/storybook/pull/415).
 
 ## v2.6.1
 
 31-August-2016
 
-- Bring back HMR dev logs. [PR412](https://github.com/storybookjs/react-storybook/pull/412).
+- Bring back HMR dev logs. [PR412](https://github.com/storybookjs/storybook/pull/412).
 
 ## v2.6.0
 
 30-August-2016
 
-- Allow start/build params from env variables. [PR413](https://github.com/storybookjs/react-storybook/pull/413)
+- Allow start/build params from env variables. [PR413](https://github.com/storybookjs/storybook/pull/413)
 
 ## v2.5.2
 
 29-August-2016
 
-- Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybookjs/react-storybook/pull/410)
+- Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybookjs/storybook/pull/410)
 
 ## v2.5.1
 
@@ -9585,13 +10883,13 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 
 24-August-2016
 
-- We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybookjs/react-storybook/pull/402)
+- We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybookjs/storybook/pull/402)
 
 ## v2.4.2
 
 24-August-2016
 
-- Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybookjs/react-storybook/pull/401)
+- Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybookjs/storybook/pull/401)
 
 ## v2.4.1
 
@@ -9603,34 +10901,34 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 
 23-August-2016
 
-- Simplify the option to stop tracking. [PR399](https://github.com/storybookjs/react-storybook/pull/399)
-- Use JSON5 instead of CJSON to parse .babelrc. [PR398](https://github.com/storybookjs/react-storybook/pull/398)
-- Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybookjs/react-storybook/pull/397)
+- Simplify the option to stop tracking. [PR399](https://github.com/storybookjs/storybook/pull/399)
+- Use JSON5 instead of CJSON to parse .babelrc. [PR398](https://github.com/storybookjs/storybook/pull/398)
+- Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybookjs/storybook/pull/397)
 - Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons.
 
 ## v2.3.0
 
 16-August-2016
 
-- Implement anonymous usage tracking. [PR384](https://github.com/storybookjs/react-storybook/pull/384)
+- Implement anonymous usage tracking. [PR384](https://github.com/storybookjs/storybook/pull/384)
 
 ## v2.2.3
 
 15-August-2016
 
-- Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybookjs/react-storybook/pull/380)
+- Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybookjs/storybook/pull/380)
 
 ## v2.2.2
 
 10-August-2016
 
-- Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybookjs/react-storybook/pull/369).
+- Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybookjs/storybook/pull/369).
 
 ## v2.2.1
 
 09-August-2016
 
-- Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybookjs/react-storybook/pull/359).
+- Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybookjs/storybook/pull/359).
 - Update @kadira/storybook-ui to the latest.
 
 ## v2.2.0
@@ -9639,25 +10937,25 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 
 This release bring some webpack config related optimizations and the NPM2 support. Here are the notable changes:
 
-- Use es6-shim directly into webpack config. [PR355](https://github.com/storybookjs/react-storybook/pull/355)
-- Use the default babel-config based on CRA's config. [PR354](https://github.com/storybookjs/react-storybook/pull/354)
-- Add NPM2 support. [PR356](https://github.com/storybookjs/react-storybook/pull/356)
-- Add autofixer defaults. [PR357](https://github.com/storybookjs/react-storybook/pull/357)
+- Use es6-shim directly into webpack config. [PR355](https://github.com/storybookjs/storybook/pull/355)
+- Use the default babel-config based on CRA's config. [PR354](https://github.com/storybookjs/storybook/pull/354)
+- Add NPM2 support. [PR356](https://github.com/storybookjs/storybook/pull/356)
+- Add autofixer defaults. [PR357](https://github.com/storybookjs/storybook/pull/357)
 
 ## v2.1.1
 
 03-August-2016
 
-Remove default webpack config for all config types. [PR348](https://github.com/storybookjs/react-storybook/pull/348)
+Remove default webpack config for all config types. [PR348](https://github.com/storybookjs/storybook/pull/348)
 
 Now we only use the Create React App based config if there's no custom webpack config.
-This will fix issues like [#347](https://github.com/storybookjs/react-storybook/issues/347).
+This will fix issues like [#347](https://github.com/storybookjs/storybook/issues/347).
 
 ## v2.1.0
 
 02-August-2016
 
-Add support for the addon API. See [PR346](https://github.com/storybookjs/react-storybook/pull/346).
+Add support for the addon API. See [PR346](https://github.com/storybookjs/storybook/pull/346).
 
 Here after we are using most of the features including actions,links as plugins.
 So, this introduced a huge area to add customizations to Storybook.
@@ -9667,7 +10965,7 @@ Unfortunately, as of this version, there are no docs for this feature. But, you
 - actions addon (powers the action logger): [addon-actions](https://github.com/kadirahq/storybook-addon-actions)
 - links addon (powers the linkTo feature): [addon-links](https://github.com/kadirahq/storybook-addon-links)
 
-Have a look at [here](https://github.com/storybookjs/react-storybook/blob/master/src/server/config.js#L88) to how to configure addons.
+Have a look at [here](https://github.com/storybookjs/storybook/blob/master/src/server/config.js#L88) to how to configure addons.
 
 ## v2.0.0
 
@@ -9675,7 +10973,7 @@ Have a look at [here](https://github.com/storybookjs/react-storybook/blob/master
 
 This is the starting of the next major version of Storybook. This version is almost compatible with `v1.x.x` but defaults have been changes as discussed below. That's why we are starting out a new version.
 
-- Update defaults to match create-react-app. [PR342](https://github.com/storybookjs/react-storybook/pull/342). Here are the notable changes:
+- Update defaults to match create-react-app. [PR342](https://github.com/storybookjs/storybook/pull/342). Here are the notable changes:
   - Add postcss based CSS loader.
   - Add file-loader for images and common types.
   - Add url-loader for shorter media files.
@@ -9685,17 +10983,17 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.41.0
 
-- Fix nodejs require errors [#337](https://github.com/storybookjs/react-storybook/pull/337).
-- Add getStorybook method to client API [#332](https://github.com/storybookjs/react-storybook/pull/332).
+- Fix nodejs require errors [#337](https://github.com/storybookjs/storybook/pull/337).
+- Add getStorybook method to client API [#332](https://github.com/storybookjs/storybook/pull/332).
 
 ## v1.40.0
 
-- Fix duplicate decorator bug [#335](https://github.com/storybookjs/react-storybook/pull/335).
+- Fix duplicate decorator bug [#335](https://github.com/storybookjs/storybook/pull/335).
 
 ## v1.39.1
 
-- Update babel packages [#325](https://github.com/storybookjs/react-storybook/pull/325).
-- Hide HMR info logs [#331](https://github.com/storybookjs/react-storybook/pull/331).
+- Update babel packages [#325](https://github.com/storybookjs/storybook/pull/325).
+- Hide HMR info logs [#331](https://github.com/storybookjs/storybook/pull/331).
 
 ## v1.39.0
 
@@ -9703,19 +11001,19 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.38.3
 
-- Add names for action and linkTo functions [#321](https://github.com/storybookjs/react-storybook/pull/321).
+- Add names for action and linkTo functions [#321](https://github.com/storybookjs/storybook/pull/321).
 
 ## v1.38.2
 
-- Fix error in prepublish script [#319](https://github.com/storybookjs/react-storybook/pull/319).
+- Fix error in prepublish script [#319](https://github.com/storybookjs/storybook/pull/319).
 
 ## v1.38.1
 
-- Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybookjs/react-storybook/pull/308).
+- Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybookjs/storybook/pull/308).
 
 ## v1.38.0
 
-- v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybookjs/react-storybook/issues/306) and [#305](https://github.com/storybookjs/react-storybook/pull/305).
+- v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybookjs/storybook/issues/306) and [#305](https://github.com/storybookjs/storybook/pull/305).
 
 ## v1.37.0
 
@@ -9723,7 +11021,7 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.36.0
 
-- Support watchOptions configuration. See: [PR287](https://github.com/storybookjs/react-storybook/pull/287)
+- Support watchOptions configuration. See: [PR287](https://github.com/storybookjs/storybook/pull/287)
 
 ## v1.35.2
 
@@ -9731,7 +11029,7 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.35.1
 
-- Fix issue related to bad error handling. See issue [#275](https://github.com/storybookjs/react-storybook/issues/275):
+- Fix issue related to bad error handling. See issue [#275](https://github.com/storybookjs/storybook/issues/275):
 
 ## v1.35.0
 
@@ -9739,7 +11037,7 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.34.1
 
-- Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybookjs/react-storybook/pull/272)
+- Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybookjs/storybook/pull/272)
 
 ## v1.34.0
 
@@ -9747,7 +11045,7 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.33.0
 
-- Introduce an [extension API](https://github.com/storybookjs/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybookjs/react-storybook/pull/258)
+- Introduce an [extension API](https://github.com/storybookjs/storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybookjs/storybook/pull/258)
 
 ## v1.32.1
 
@@ -9759,67 +11057,67 @@ This is the starting of the next major version of Storybook. This version is alm
 
 ## v1.31.0
 
-- Pass a `context` argument to stories [PR250](https://github.com/storybookjs/react-storybook/pull/250)
+- Pass a `context` argument to stories [PR250](https://github.com/storybookjs/storybook/pull/250)
 
 ## v1.30.0
 
-- Fuzzy search kinds [PR247](https://github.com/storybookjs/react-storybook/pull/247)
+- Fuzzy search kinds [PR247](https://github.com/storybookjs/storybook/pull/247)
 
 ## v1.29.5
 
-- Update dependency version to fix filter crash [PR246](https://github.com/storybookjs/react-storybook/pull/246)
+- Update dependency version to fix filter crash [PR246](https://github.com/storybookjs/storybook/pull/246)
 
 ## v1.29.4
 
-- Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybookjs/react-storybook/pull/243)
+- Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybookjs/storybook/pull/243)
 
 ## v1.29.3
 
-- Update @kadira/storybook-core version [PR241](https://github.com/storybookjs/react-storybook/pull/241)
-- Add es6-shim by default [PR238](https://github.com/storybookjs/react-storybook/pull/238)
+- Update @kadira/storybook-core version [PR241](https://github.com/storybookjs/storybook/pull/241)
+- Add es6-shim by default [PR238](https://github.com/storybookjs/storybook/pull/238)
 
 ## v1.29.2
 
-- Use url.resolve instead of path.join [PR240](https://github.com/storybookjs/react-storybook/pull/240)
+- Use url.resolve instead of path.join [PR240](https://github.com/storybookjs/storybook/pull/240)
 
 ## v1.29.1
 
-- Copy missed manager.js.map file on static build [PR236](https://github.com/storybookjs/react-storybook/pull/236)
+- Copy missed manager.js.map file on static build [PR236](https://github.com/storybookjs/storybook/pull/236)
 
 ## v1.29.0
 
-- Multiple static dirs (comma separated) [PR229](https://github.com/storybookjs/react-storybook/pull/229)
+- Multiple static dirs (comma separated) [PR229](https://github.com/storybookjs/storybook/pull/229)
 
 ## v1.28.5
 
-- Support ECMAScript stage-0 [PR228](https://github.com/storybookjs/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybookjs/react-storybook/issues/227)
+- Support ECMAScript stage-0 [PR228](https://github.com/storybookjs/storybook/pull/228) to fix [Issue #227](https://github.com/storybookjs/storybook/issues/227)
 
 ## v1.28.4
 
-- Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybookjs/react-storybook/pull/226)
+- Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybookjs/storybook/pull/226)
 
 ## v1.28.3
 
-- Revert [PR226](https://github.com/storybookjs/react-storybook/pull/226)
+- Revert [PR226](https://github.com/storybookjs/storybook/pull/226)
 
 ## v1.28.2
 
-- Support custom webpack publicPath [PR226](https://github.com/storybookjs/react-storybook/pull/226)
+- Support custom webpack publicPath [PR226](https://github.com/storybookjs/storybook/pull/226)
 
 ## v1.28.1
 
-- Add charset meta tags to HTML heads [PR216](https://github.com/storybookjs/react-storybook/pull/216)
+- Add charset meta tags to HTML heads [PR216](https://github.com/storybookjs/storybook/pull/216)
 
 ## v1.28.0
 
 - Moved storybook serving code into a middleware to support more advanced use cases.
-- Refactored dev server to use storybook middleware [PR211](https://github.com/storybookjs/react-storybook/pull/211)
+- Refactored dev server to use storybook middleware [PR211](https://github.com/storybookjs/storybook/pull/211)
 
 ## v1.27.0
 
-- Move modules to storybook-core repo. [PR196](https://github.com/storybookjs/react-storybook/pull/196)
+- Move modules to storybook-core repo. [PR196](https://github.com/storybookjs/storybook/pull/196)
 - Add stack-source-map again only for Chrome to get better error stacks.
-- Add ability to control the hostname. See [PR195](https://github.com/storybookjs/react-storybook/pull/195) and [PR198](https://github.com/storybookjs/react-storybook/pull/198)
+- Add ability to control the hostname. See [PR195](https://github.com/storybookjs/storybook/pull/195) and [PR198](https://github.com/storybookjs/storybook/pull/198)
 
 ## v1.26.0
 
@@ -9831,34 +11129,34 @@ This is the starting of the next major version of Storybook. This version is alm
 
 11-May-2016
 
-- Fix several publishing related issues. See: [#188](https://github.com/storybookjs/react-storybook/pull/188).
-- Fix babel extends issue. See: [PR185](https://github.com/storybookjs/react-storybook/pull/185).
+- Fix several publishing related issues. See: [#188](https://github.com/storybookjs/storybook/pull/188).
+- Fix babel extends issue. See: [PR185](https://github.com/storybookjs/storybook/pull/185).
 - Fix issue with removing a preset from users babelrc.
-  - Fixes: [#183](https://github.com/storybookjs/react-storybook/issues/183).
-  - [PR184](https://github.com/storybookjs/react-storybook/pull/184)
-- Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybookjs/react-storybook/pull/182).
+  - Fixes: [#183](https://github.com/storybookjs/storybook/issues/183).
+  - [PR184](https://github.com/storybookjs/storybook/pull/184)
+- Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybookjs/storybook/pull/182).
 - Add `qs` as a direct dependency as it's used in preview.
 
 ## v1.24.0
 
 10-May-2016
 
-- Add a potential fix for the double scrollbar issue. See: [179](https://github.com/storybookjs/react-storybook/issues/179).
-- Add scrolling support to the left panel. Fixes [#177](https://github.com/storybookjs/react-storybook/issues/177).
-- Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybookjs/react-storybook/issues/158)
+- Add a potential fix for the double scrollbar issue. See: [179](https://github.com/storybookjs/storybook/issues/179).
+- Add scrolling support to the left panel. Fixes [#177](https://github.com/storybookjs/storybook/issues/177).
+- Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybookjs/storybook/issues/158)
 
 ## v1.23.0
 
 09-May-2016
 
-- Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybookjs/react-storybook/pull/176)
-- Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybookjs/react-storybook/pull/173)
+- Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybookjs/storybook/pull/176)
+- Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybookjs/storybook/pull/173)
 
 ## v1.22.1
 
 06-May-2016
 
-- Add a potential fix for [#167](https://github.com/storybookjs/react-storybook/issues/167)
+- Add a potential fix for [#167](https://github.com/storybookjs/storybook/issues/167)
   - basically, this moved back babel-packages required by webpack.
 
 ## v1.22.0
@@ -9871,95 +11169,95 @@ This is the starting of the next major version of Storybook. This version is alm
 
 06-May-2016
 
-- Add configType argument to custom config function. See: [PR169](https://github.com/storybookjs/react-storybook/pull/169)
-- Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybookjs/react-storybook/pull/170)
+- Add configType argument to custom config function. See: [PR169](https://github.com/storybookjs/storybook/pull/169)
+- Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybookjs/storybook/pull/170)
 
 ## v1.20.0
 
 05-May-2016
 
-- Allow to configure webpack as the user wants. See [PR160](https://github.com/storybookjs/react-storybook/pull/160)
-- Add typescript typings support for the core API. See [PR157](https://github.com/storybookjs/react-storybook/pull/157)
-- Implement Mantra architecture and some new features including permalinks, full screen support. See: [PR165](https://github.com/storybookjs/react-storybook/pull/165)
-- Remove some typo in docs. See: [PR154](https://github.com/storybookjs/react-storybook/pull/154)
-- Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybookjs/react-storybook/pull/153)
+- Allow to configure webpack as the user wants. See [PR160](https://github.com/storybookjs/storybook/pull/160)
+- Add typescript typings support for the core API. See [PR157](https://github.com/storybookjs/storybook/pull/157)
+- Implement Mantra architecture and some new features including permalinks, full screen support. See: [PR165](https://github.com/storybookjs/storybook/pull/165)
+- Remove some typo in docs. See: [PR154](https://github.com/storybookjs/storybook/pull/154)
+- Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybookjs/storybook/pull/153)
 
 ## v1.19.0
 
 27-April-2016
 
-- Add airbnb-js-shims to client-side JS. See: [PR147](https://github.com/storybookjs/react-storybook/pull/147)
-- Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybookjs/react-storybook/pull/148)
-- Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybookjs/react-storybook/pull/149)
+- Add airbnb-js-shims to client-side JS. See: [PR147](https://github.com/storybookjs/storybook/pull/147)
+- Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybookjs/storybook/pull/148)
+- Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybookjs/storybook/pull/149)
 
 ## v1.18.0
 
 26-April-2016
 
-- Link Storybook menu to the repo. See: [PR137](https://github.com/storybookjs/react-storybook/pull/137)
-- Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybookjs/react-storybook/pull/141)
+- Link Storybook menu to the repo. See: [PR137](https://github.com/storybookjs/storybook/pull/137)
+- Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybookjs/storybook/pull/141)
 
 ## v1.17.2
 
 25-April-2016
 
-- Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybookjs/react-storybook/pull/144)
+- Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybookjs/storybook/pull/144)
 
 ## v1.17.1
 
 21-April-2016
 
-- Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybookjs/react-storybook/pull/133)
+- Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybookjs/storybook/pull/133)
 
 ## v1.17.0
 
 21-April-2016
 
-- Check all the arguments passed to action for events. See: [PR132](https://github.com/storybookjs/react-storybook/pull/132)
+- Check all the arguments passed to action for events. See: [PR132](https://github.com/storybookjs/storybook/pull/132)
 
 ## v1.16.1
 
 21-April-2016
 
-- Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybookjs/react-storybook/pull/126).
+- Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybookjs/storybook/pull/126).
 
 ## v1.16.0
 
 20-April-2016
 
 - Prevent re-rendering the preview iframe when there is an action.
-  - Related issue: [#116](https://github.com/storybookjs/react-storybook/issues/116)
-  - Related PR: [PR126](https://github.com/storybookjs/react-storybook/pull/126)
+  - Related issue: [#116](https://github.com/storybookjs/storybook/issues/116)
+  - Related PR: [PR126](https://github.com/storybookjs/storybook/pull/126)
 
 ## v1.15.0
 
 20-April-2016
 
-- Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybookjs/react-storybook/pull/123)
+- Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybookjs/storybook/pull/123)
 
 ## v1.14.0
 
 19-April-2016
 
-- Add syntax highlights to the logger. See: [PR118](https://github.com/storybookjs/react-storybook/pull/118)
+- Add syntax highlights to the logger. See: [PR118](https://github.com/storybookjs/storybook/pull/118)
 
 ## v1.13.0
 
-- Add some UI test cases. See [PR103](https://github.com/storybookjs/react-storybook/pull/103)
-- Implement `.addDecorator()` API. See [PR115](https://github.com/storybookjs/react-storybook/pull/115)
-- Add code folding support. See [PR111](https://github.com/storybookjs/react-storybook/pull/111)
+- Add some UI test cases. See [PR103](https://github.com/storybookjs/storybook/pull/103)
+- Implement `.addDecorator()` API. See [PR115](https://github.com/storybookjs/storybook/pull/115)
+- Add code folding support. See [PR111](https://github.com/storybookjs/storybook/pull/111)
 
 ## v1.12.0
 
 14-April-2016
 
-- Add support for webpack module preLoaders. See: [PR107](https://github.com/storybookjs/react-storybook/pull/107)
+- Add support for webpack module preLoaders. See: [PR107](https://github.com/storybookjs/storybook/pull/107)
 
 ## v1.11.0
 
 13-April-2016
 
-- Add support for React DevTools. See: [PR104](https://github.com/storybookjs/react-storybook/pull/104)
+- Add support for React DevTools. See: [PR104](https://github.com/storybookjs/storybook/pull/104)
 
 ## v1.10.2
 
@@ -9973,32 +11271,32 @@ Fix various issues related to static bundling.
 
 ## v1.10.1
 
-- Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybookjs/react-storybook/pull/100)
-- Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybookjs/react-storybook/pull/98)
-- Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybookjs/react-storybook/pull/101)
+- Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybookjs/storybook/pull/100)
+- Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybookjs/storybook/pull/98)
+- Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybookjs/storybook/pull/101)
 
 ## v1.10.0
 
-- Add custom head support inside the iframe. See [PR77](https://github.com/storybookjs/react-storybook/pull/77)
-- Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybookjs/react-storybook/issues/81)
-- Add a static file builder. See [PR88](https://github.com/storybookjs/react-storybook/pull/88)
-- Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybookjs/react-storybook/pull/94)
-- Add the search box. See: [PR91](https://github.com/storybookjs/react-storybook/pull/91).
+- Add custom head support inside the iframe. See [PR77](https://github.com/storybookjs/storybook/pull/77)
+- Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybookjs/storybook/issues/81)
+- Add a static file builder. See [PR88](https://github.com/storybookjs/storybook/pull/88)
+- Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybookjs/storybook/pull/94)
+- Add the search box. See: [PR91](https://github.com/storybookjs/storybook/pull/91).
 
 ## v1.9.0
 
 Add some minor improvements.
 
-- Avoid deprecated warning in Chrome Canary. See: [PR85](https://github.com/storybookjs/react-storybook/pull/85)
-- Fix the React Warning about CSS property. See: [PR84](https://github.com/storybookjs/react-storybook/pull/84)
-- Transition on latest logged action. See: [PR80](https://github.com/storybookjs/react-storybook/pull/80)
+- Avoid deprecated warning in Chrome Canary. See: [PR85](https://github.com/storybookjs/storybook/pull/85)
+- Fix the React Warning about CSS property. See: [PR84](https://github.com/storybookjs/storybook/pull/84)
+- Transition on latest logged action. See: [PR80](https://github.com/storybookjs/storybook/pull/80)
 
 ## v1.8.0
 
 - Add story linking functionality.
-  - [Documentation](https://github.com/storybookjs/react-storybook/blob/master/docs/api.md#linking-stories).
-  - Original feature request: [#50](https://github.com/storybookjs/react-storybook/issues/50)
-  - Implementation: [PR86](https://github.com/storybookjs/react-storybook/pull/86)
+  - [Documentation](https://github.com/storybookjs/storybook/blob/master/docs/api.md#linking-stories).
+  - Original feature request: [#50](https://github.com/storybookjs/storybook/issues/50)
+  - Implementation: [PR86](https://github.com/storybookjs/storybook/pull/86)
 
 ## v1.7.0
 
@@ -10006,30 +11304,30 @@ Add some minor improvements.
 
 ## v1.6.0
 
-- Make scrollable layout. See: [PR](https://github.com/storybookjs/react-storybook/pull/70)
+- Make scrollable layout. See: [PR](https://github.com/storybookjs/storybook/pull/70)
 - Add npm3 requirement to the `package.json`.
 - Add `react` and `react-dom` to devDependencies.
 
 ## v1.5.0
 
-- Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybookjs/react-storybook/pull/64)
+- Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybookjs/storybook/pull/64)
 
 ## v1.4.0
 
-- Add CLI option to specify the config dir. See [PR52](https://github.com/storybookjs/react-storybook/pull/52).
+- Add CLI option to specify the config dir. See [PR52](https://github.com/storybookjs/storybook/pull/52).
 
 ## v1.3.0
 
-- Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybookjs/react-storybook/issues/41)
-- Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybookjs/react-storybook/blob/master/CONTRIBUTING.md)
+- Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybookjs/storybook/issues/41)
+- Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md)
 - Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`.
 
 ## v1.2.0
 
-- Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybookjs/react-storybook/issues/21).
-- Remove navigation list order hijacking. See [commit](https://github.com/storybookjs/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99).
-- Fix a typo in .gitignore. See [PR31](https://github.com/storybookjs/react-storybook/pull/31).
-- Add support for JSX. See [PR18](https://github.com/storybookjs/react-storybook/pull/18).
+- Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybookjs/storybook/issues/21).
+- Remove navigation list order hijacking. See [commit](https://github.com/storybookjs/storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99).
+- Fix a typo in .gitignore. See [PR31](https://github.com/storybookjs/storybook/pull/31).
+- Add support for JSX. See [PR18](https://github.com/storybookjs/storybook/pull/18).
 
 ## v1.1.0
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2b591ce9d790..4b85ab64f154 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
 
 Please review this document to help to streamline the process and save everyone's precious time.
 
-This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as a package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
+This repo uses yarn workspaces, so you should install `yarn` as the package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
 
 ## Issues
 
@@ -30,6 +30,8 @@ cd storybook
 yarn bootstrap
 ```
 
+> NOTE: on windows you may need to run `yarn` before `yarn bootstrap`!
+
 The bootstrap command might ask which sections of the codebase you want to bootstrap. Unless you're going to work with ReactNative or the Documentation, you can keep the default.
 
 You can also pick directly from CLI:
@@ -126,6 +128,18 @@ It can be immensely helpful to get feedback in your editor, if you're using VsCo
 
 This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
 
+### 2d. Run Cypress tests
+
+First make sure the repo is bootstrapped.
+
+Then run `yarn build-storybooks`, this creates a static website from all examples.
+
+Then run `yarn serve-storybooks`, this will run the static site on the port cypress expects.
+
+Then run `yarn add cypress -W --optional`. When this has completed cypress should be installed on your system. If it is already on your system, this step can be skipped.
+
+Then run `yarn cypress open` if you want to see the tests run in the UI, or `yarn cypress run` to run the tests headless.
+
 ### Reproductions
 
 #### In the monorepo
@@ -140,6 +154,8 @@ git clone https://github.com/storybookjs/storybook.git
 cd storybook
 yarn bootstrap --core
 
+# NOTE: on windows you may need to run `yarn` before `yarn bootstrap`!
+
 # make changes to try and reproduce the problem, such as adding components + stories
 cd examples/cra-kitchen-sink
 yarn storybook
@@ -207,6 +223,8 @@ Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if
 
 **As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
 
+> NOTE: Although the latest stable version of storybook corresponds to the `master` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
+
 **As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
 
 ## Issue Triage
@@ -263,19 +281,31 @@ If you run into trouble here, make sure your node, npm, and **_yarn_** are on th
 1.  `cd ~` (optional)
 2.  `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
 3.  `cd storybook`
-4.  `yarn`
-5.  `yarn bootstrap --core`
-6.  `yarn test --core`
-7.  `yarn dev` _You must have this running for your changes to show up_
+4.  `yarn bootstrap --core`
+5.  `yarn test --core`
+6.  `yarn dev` _You must have this running for your changes to show up_
+
+> NOTE: on windows you may need to run `yarn` before `yarn bootstrap` (between steps 3 and 4).
 
 #### Bootstrapping everything
 
 _This method is slow_
 
 1.  `yarn bootstrap --all`
-2.  Have a beer 🍺
+2.  Take a break 🍵
 3.  `yarn test` (to verify everything worked)
 
+#### Building specific packages
+
+If you're working on one or a few packages, for every change that you make, you have to rebuild those packages. To make the process easier, there is a CLI command for that:
+
+- Run `yarn build` to bring you a list of packages to select from. There will be also an option to run in watch mode.
+- Run `yarn build <package-name>` to build that package specifically. \
+  For the package name, use its short version. Example: for `@storybook/addon-docs`, run `yarn build addon-docs`.
+- Run `yarn build --all` to build everything.
+- Add `--watch` to run automatically in watch more if you are either building a selection of packages by name or building all.
+  Example: `yarn build core addon-docs --watch` or `yarn build --all --watch`.
+
 ### Working with the kitchen sink apps
 
 Within the `examples` folder of the Storybook repo, you will find kitchen sink examples of storybook implementations for the various platforms that storybook supports.
@@ -283,9 +313,10 @@ Within the `examples` folder of the Storybook repo, you will find kitchen sink e
 Not only do these show many of the options and add-ons available, they are also automatically linked to all the development packages. We highly encourage you to use these to develop/test contributions on.
 
 #### React and Vue
+
 1. `cd examples/official-storybook`
-2.  `yarn storybook`
-3.  Verify that your local version works
+2. `yarn storybook`
+3. Verify that your local version works
 
 ### Working with your own app
 
diff --git a/MIGRATION.md b/MIGRATION.md
index ae7149b87b86..63d44855f091 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,92 +1,652 @@
-# Migration
-
-- [Migration](#migration)
-  - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
-    - [To tri-config configuration](#to-triconfig-configuration)
-    - [Create React App preset](#create-react-app-preset)
-    - [Description doc block](#description-doc-block)
-    - [React Native Async Storage](#react-native-async-storage)
-    - [Deprecate displayName parameter](#deprecate-displayname-parameter)
-    - [Unified docs preset](#unified-docs-preset)
-    - [Simplified hierarchy separators](#simplified-hierarchy-separators)
-  - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
-    - [Source-loader](#source-loader)
-    - [Default viewports](#default-viewports)
-    - [Grid toolbar-feature](#grid-toolbar-feature)
-    - [Docs mode docgen](#docs-mode-docgen)
-    - [storySort option](#storysort-option)
-  - [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
-    - [babel.config.js support](#babelconfigjs-support)
-  - [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)
+<h1>Migration</h1>
+
+- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
+  - [Hoisted CSF annotations](#hoisted-csf-annotations)
+  - [Zero config typescript](#zero-config-typescript)
+  - [Correct globs in main.js](#correct-globs-in-mainjs)
+  - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
+  - [CRA preset removed](#cra-preset-removed)
+  - [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
+  - [6.0 Docs breaking changes](#60-docs-breaking-changes)
+    - [Remove framework-specific docs presets](#remove-framework-specific-docs-presets)
+    - [Docs theme separated](#docs-theme-separated)
+    - [DocsPage slots removed](#docspage-slots-removed)
+    - [React prop tables with Typescript](#react-prop-tables-with-typescript)
+      - [React.FC interfaces](#reactfc-interfaces)
+      - [Imported types](#imported-types)
+      - [Rolling back](#rolling-back)
+  - [New addon presets](#new-addon-presets)
+  - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
+  - [Removed Deprecated APIs](#removed-deprecated-apis)
+  - [New setStories event](#new-setstories-event)
+  - [Client API changes](#client-api-changes)
+    - [Removed Legacy Story APIs](#removed-legacy-story-apis)
+    - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
+    - [Changed Parameter Handling](#changed-parameter-handling)
+  - [Simplified Render Context](#simplified-render-context)
+  - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
+  - [Improved story source handling](#improved-story-source-handling)
+  - [6.0 Addon API changes](#60-addon-api-changes)
+    - [Actions addon uses parameters](#actions-addon-uses-parameters)
+    - [Removed action decorator APIs](#removed-action-decorator-apis)
+    - [Removed withA11y decorator](#removed-witha11y-decorator)
+    - [Essentials addon disables differently](#essentials-addon-disables-differently)
+  - [6.0 Deprecations](#60-deprecations)
+    - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
+    - [Deprecated addon-contexts](#deprecated-addon-contexts)
+    - [Removed addon-centered](#removed-addon-centered)
+    - [Deprecated polymer](#deprecated-polymer)
+- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
+  - [To main.js configuration](#to-mainjs-configuration)
+    - [Using main.js](#using-mainjs)
+    - [Using preview.js](#using-previewjs)
+    - [Using manager.js](#using-managerjs)
+  - [Create React App preset](#create-react-app-preset)
+  - [Description doc block](#description-doc-block)
+  - [React Native Async Storage](#react-native-async-storage)
+  - [Deprecate displayName parameter](#deprecate-displayname-parameter)
+  - [Unified docs preset](#unified-docs-preset)
+  - [Simplified hierarchy separators](#simplified-hierarchy-separators)
+  - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
+- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
+  - [Source-loader](#source-loader)
+  - [Default viewports](#default-viewports)
+  - [Grid toolbar-feature](#grid-toolbar-feature)
+  - [Docs mode docgen](#docs-mode-docgen)
+  - [storySort option](#storysort-option)
+- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
+  - [babel.config.js support](#babelconfigjs-support)
+- [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)
+  - [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
+  - [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.3.x to 6.0.x
+
+### Hoisted CSF annotations
+
+Storybook 6 introduces hoisted CSF annotations and deprecates the `StoryFn.story` object-style annotation.
+
+In 5.x CSF, you would annotate a story like this:
 
+```js
+export const Basic = () => <Button />
+Basic.story = {
+  name: 'foo',
+  parameters: { ... },
+  decorators: [ ... ],
+};
+```
+
+In 6.0 CSF this becomes:
+
+```js
+export const Basic = () => <Button />
+Basic.storyName = 'foo';
+Basic.parameters = { ... };
+Basic.decorators = [ ... ];
+```
+
+1. The new syntax is slightly more compact/ergonomic compared the the old one
+2. Similar to React's `displayName`, `propTypes`, `defaultProps` annotations
+3. We're introducing a new feature, [Storybook Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing), where the new syntax will be significantly more ergonomic
+
+To help you upgrade your stories, we've crated a codemod:
+
+```
+npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js"
+```
+
+For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
+
+### Zero config typescript
+
+Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`.
+
+To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. If you want to override the defaults, see the [typescript configuration docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md).
+
+### Correct globs in main.js
+
+In 5.3 we introduced the `main.js` file with a `stories` property. This property was documented as a "glob" pattern. This was our intention, however the implementation allowed for non valid globs to be specified and work. In fact, we promoted invalid globs in our documentation and CLI templates.
+
+We've corrected this, the CLI templates have been changed to use valid globs.
+
+We've also changed the code that resolves these globs, so that invalid globs will log a warning. They will break in the future, so if you see this warning, please ensure you're specifying a valid glob.
+
+Example of an **invalid** glob:
+```
+stories: ['./**/*.stories.(ts|js)']
+```
+
+Example of a **valid** glob:
+```
+stories: ['./**/*.stories.@(ts|js)']
+```
+
+### Backgrounds addon has a new api
+
+Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
+
+Consider the following example of its usage in `Button.stories.js`:
+
+```jsx
+// Button.stories.js
+export default {
+  title: 'Button',
+  parameters: {
+    backgrounds: [
+      { name: 'twitter', value: '#00aced', default: true },
+      { name: 'facebook', value: '#3b5998' },
+    ],
+  },
+};
+```
+
+Here's an updated version of the example, using the new api:
+
+```jsx
+// Button.stories.js
+export default {
+  title: 'Button',
+  parameters: {
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        { name: 'twitter', value: '#00aced' },
+        { name: 'facebook', value: '#3b5998' },
+      ],
+    },
+  },
+};
+```
+
+### CRA preset removed
+
+The built-in create-react-app preset, which was [previously deprecated](#create-react-app-preset), has been fully removed.
+
+If you're using CRA and migrating from an earlier Storybook version, please install [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) if you haven't already.
+
+### Args passed as first argument to story
+
+Starting in 6.0, the first argument to a story function is an [Args object](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/next/lib/addons/src/types.ts#L49-L61), and that context is now passed as the second argument by default.
+
+This breaking change only affects you if your stories actually use the context, which is not common. If you have any stories that use the context, you can either (1) update your stories, or (2) set a flag to opt-out of new behavior.
+
+Consider the following story that uses the context:
+
+```js
+export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>;
+```
+
+Here's an updated story for 6.0 that ignores the args object:
+
+```js
+export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>;
+```
+
+Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
+
+```js
+export const parameters = {
+  passArgsFirst: false,
+};
+```
+
+### 6.0 Docs breaking changes
+
+#### Remove framework-specific docs presets
+
+In SB 5.2, each framework had its own preset, e.g. `@storybook/addon-docs/react/preset`. In 5.3 we [unified this into a single preset](#unified-docs-preset): `@storybook/addon-docs/preset`. In 6.0 we've removed the deprecated preset.
+
+#### Docs theme separated
+
+In 6.0, you should theme Storybook Docs with the `docs.theme` parameter.
+
+In 5.x, the Storybook UI and Storybook Docs were themed using the same theme object. However, in 5.3 we introduced a new API, `addons.setConfig`, which improved UI theming but broke Docs theming. Rather than trying to keep the two unified, we introduced a separate theming mechanism for docs, `docs.theme`. [Read about Docs theming here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming).
+
+#### DocsPage slots removed
+
+In SB5.2, we introduced the concept of [DocsPage slots](https://github.com/storybookjs/storybook/blob/0de8575eab73bfd5c5c7ba5fe33e53a49b92db3a/addons/docs/docs/docspage.md#docspage-slots) for customizing the DocsPage.
+
+In 5.3, we introduced `docs.x` story parameters like `docs.prepareForInline` which get filled in by frameworks and can also be overwritten by users, which is a more natural/convenient way to make global customizations.
+
+We also introduced introduced [Custom DocsPage](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replacing-docspage), which makes it possible to add/remove/update DocBlocks on the page.
+
+These mechanisms are superior to slots, so we've removed slots in 6.0. For each slot, we provide a migration path here:
+
+| Slot        | Slot function     | Replacement                                  |
+| ----------- | ----------------- | -------------------------------------------- |
+| Title       | `titleSlot`       | Custom DocsPage                              |
+| Subtitle    | `subtitleSlot`    | Custom DocsPage                              |
+| Description | `descriptionSlot` | `docs.extractComponentDescription` parameter |
+| Primary     | `primarySlot`     | Custom DocsPage                              |
+| Props       | `propsSlot`       | `docs.extractProps` parameter                |
+| Stories     | `storiesSlot`     | Custom DocsPage                              |
+
+#### React prop tables with Typescript
+
+Starting in 6.0 we are changing our recommended setup for extracting prop tables in `addon-docs` for React projects using TypeScript.
+
+In earlier versions, we recommended `react-docgen-typescript-loader` (`RDTL`) and bundled it with `@storybook/preset-create-react-app` and `@storybook/preset-typescript` for this reason. We now recommend `babel-plugin-react-docgen`, which is already bundled as part of `@storybook/react`.
+
+As a consequence we've removed `RDTL` from the presets, which is a breaking change. We made this change because `react-docgen` now supports TypeScript natively, and fewer dependencies simplifies things for everybody.
+
+The Babel-based `react-docgen` version is the default in:
+
+- `@storybook/preset-create-react-app` @ `^2.1.0`
+- `@storybook/preset-typescript` @ `^3.0.0`
+
+> NOTE: If you're using `preset-create-react-app` you don't need `preset-typescript`!
+
+We will be updating this section with migration information as we collect information from our users, and fixing issues as they come up throughout the 6.0 prerelease process. We are cataloging known issues [here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#known-limitations).
+
+##### React.FC interfaces
+
+The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
+
+```tsx
+import React, { FC } from 'react';
+interface IProps { ... };
+const MyComponent: FC<IProps> = ({ ... }) => ...
+```
+
+The following workaround is needed:
+
+```tsx
+const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
+```
+
+Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
+
+##### Imported types
+
+Another major issue is support for imported types.
+
+```tsx
+import React, { FC } from 'react';
+import SomeType from './someFile';
+
+type NewType = SomeType & { foo: string };
+const MyComponent: FC<NewType> = ...
+```
+
+This isn't an issue with `RDTL` so unfortunately it gets worse with `react-docgen`.
+There's an open PR for this https://github.com/reactjs/react-docgen/pull/352 which you can upvote if it affects you.
+
+##### Rolling back
+
+In the meantime, if you're not ready to make the move you have two options:
+
+1. Pin your to a specific preset version: `preset-create-react-app@1.5.2` or `preset-typescript@1.2.2`
+
+2. OR: Manually configure your setup to add back `react-docgen-typescript-loader`, add the following to your `.storybook/main.js`:
+
+```js
+module.exports = {
+  webpack: async (config, { configType }) => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.tsx?$/,
+          loader: require.resolve('react-docgen-typescript-loader'),
+          options: {}, // your options here
+        },
+      ],
+    },
+  }),
+};
+```
+
+### New addon presets
+
+In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.
+
+This breaking change currently applies to: `addon-a11y`, `addon-actions`, `addon-knobs`, `addon-links`, `addon-queryparams`.
+
+Consider the following `main.js` config for the accessibility addon, `addon-knobs`:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: ['@storybook/addon-knobs'],
+};
+```
+
+In earlier versions of Storybook, this would automatically call `@storybook/addon-knobs/register`, which adds the the knobs panel to the Storybook UI. As a user you would also add a decorator:
+
+```js
+import { withKnobs } from '../index';
+
+addDecorator(withKnobs);
+```
+
+Now in 6.0, `addon-knobs` comes with a preset, `@storybook/addon-knobs/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
+
+If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: ['@storybook/addon-knobs/register'],
+};
+```
+
+If you wish to selectively disable `knobs` checks for a subset of stories, you can control this with story parameters:
+
+```js
+export const MyNonCheckedStory = () => <SomeComponent />;
+MyNonCheckedStory.story = {
+  parameters: {
+    knobs: { disable: true },
+  },
+};
+```
+
+### Removed babel-preset-vue from Vue preset
+
+`babel-preset-vue` is not included by default anymore when using Storybook with Vue.
+This preset is outdated and [caused problems](https://github.com/storybookjs/storybook/issues/4475) with more modern setups.
+
+If you have an older Vue setup that relied on this preset, make sure it is included in your babel config
+(install `babel-preset-vue` and add it to the presets).
+
+```json
+{
+  "presets": ["babel-preset-vue"]
+}
+```
+
+However, please take a moment to review why this preset is necessary in your setup.
+One usecase used to be to enable JSX in your stories. For this case, we recommend to use `@vue/babel-preset-jsx` instead.
+
+### Removed Deprecated APIs
+
+In 6.0 we removed a number of APIs that were previously deprecated.
+
+See the migration guides for further details:
+
+- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
+- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
+- [Source-loader](#source-loader)
+- [Unified docs preset](#unified-docs-preset)
+- [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
+
+### New setStories event
+
+The `setStories`/`SET_STORIES` event has changed and now denormalizes global and kind-level parameters. The new format of the event data is:
+
+```js
+{
+  globalParameters: { p: 'q' },
+  kindParameters: { kind: { p: 'q' } },
+  stories: /* as before but with only story-level parameters */
+}
+```
+
+If you want the full denormalized parameters for a story, you can do something like:
+
+```js
+import { combineParameters } from '@storybook/api';
+
+const story = data.stories[storyId];
+const parameters = combineParameters(
+  data.globalParameters,
+  data.kindParameters[story.kind],
+  story.parameters
+);
+```
+
+### Client API changes
+
+#### Removed Legacy Story APIs
+
+In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't publicly accessible):
+
+- `getStories`, `getStoryFileName`, `getStoryAndParameters`, `getStory`, `getStoryWithContext`, `hasStoryKind`, `hasStory`, `dumpStoryBook`, `size`, `clean`
+
+Although these were private APIs, if you were using them, you could probably use the newer APIs (which are still private): `getStoriesForKind`, `getRawStory`, `removeStoryKind`, `remove`.
+
+#### Can no longer add decorators/parameters after stories
+
+You can no longer add decorators and parameters globally after you added your first story, and you can no longer add decorators and parameters to a kind after you've added your first story to it.
+
+It's unclear and confusing what would happened if you did. If you want to disable a decorator for certain stories, use a parameter to do so:
+
+```js
+export StoryOne = ...;
+StoryOne.story = { parameters: { addon: { disable: true } } };
+```
+
+If you want to use a parameter for a subset of stories in a kind, simply use a variable to do so:
+
+```js
+const commonParameters = { x: { y: 'z' } };
+export StoryOne = ...;
+StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
+```
+
+#### Changed Parameter Handling
+
+There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
+
+_All parameters are now merged recursively to arbitrary depth._
+
+In 5.3 we sometimes merged parameters all the way down and sometimes did not depending on where you added them. It was confusing. If you were relying on this behaviour, let us know.
+
+_Array parameters are no longer "merged"._
+
+If you override an array parameter, the override will be the end product. If you want the old behaviour (appending a new value to an array parameter), export the original and use array spread. This will give you maximum flexibility:
+
+```js
+import { allBackgrounds } from './util/allBackgrounds';
+
+export StoryOne = ...;
+StoryOne.story = { parameters: { backgrounds: [...allBackgrounds, '#zyx' ] } };
+```
+
+_You cannot set parameters from decorators_
+
+Parameters are intended to be statically set at story load time. So setting them via a decorator doesn't quite make sense. If you were using this to control the rendering of a story, chances are using the new `args` feature is a more idiomatic way to do this.
+
+_You can only set storySort globally_
+
+If you want to change the ordering of stories, use `export const parameters = { options: { storySort: ... } }` in `preview.js`.
+
+### Simplified Render Context
+
+The `RenderContext` that is passed to framework rendering layers in order to render a story has been simplified, dropping a few members that were not used by frameworks to render stories. In particular, the following have been removed:
+
+- `selectedKind`/`selectedStory` -- replaced by `kind`/`name`
+- `configApi`
+- `storyStore`
+- `channel`
+- `clientApi`
+
+### Story Store immutable outside of configuration
+
+You can no longer change the contents of the StoryStore outside of a `configure()` call. This is to ensure that any changes are properly published to the manager. If you want to add stories "out of band" you can call `store.startConfiguring()` and `store.finishConfiguring()` to ensure that your changes are published.
+
+### Improved story source handling
+
+The story source code handling has been improved in both `addon-storysource` and `addon-docs`.
+
+In 5.x some users used an undocumented _internal_ API, `mdxSource` to customize source snippetization in `addon-docs`. This has been removed in 6.0.
+
+The preferred way to customize source snippets for stories is now:
+
+```js
+export const Example = () => <Button />;
+Example.story = {
+  parameters: {
+    storySource: {
+      source: 'custom source',
+    },
+  },
+};
+```
+
+The MDX analog:
+
+```jsx
+<Story name="Example" parameters={{ storySource: { source: 'custom source' } }}>
+  <Button />
+</Story>
+```
+
+### 6.0 Addon API changes
+
+#### Actions addon uses parameters
+
+Leveraging the new preset `@storybook/addon-actions` uses parameters to pass action options. If you previously had:
+
+```js
+import { withactions } from `@storybook/addon-actions`;
+
+export StoryOne = ...;
+StoryOne.story = {
+  decorators: [withActions('mouseover', 'click .btn')],
+}
+
+```
+
+You should replace it with:
+
+```js
+export StoryOne = ...;
+StoryOne.story = {
+  parameters: { actions: ['mouseover', 'click .btn'] },
+}
+```
+
+#### Removed action decorator APIs
+
+In 6.0 we removed the actions addon decorate API. Actions handles can be configured globaly, for a collection of stories or per story via parameters. The ability to manipulate the data arguments of an event is only relevant in a few frameworks and is not a common enough usecase to be worth the complexity of supporting.
+
+#### Removed withA11y decorator
+
+In 6.0 we removed the `withA11y` decorator. The code that runs accessibility checks is now directly injected in the preview.
+
+Remove the addon-a11y decorator.
+To configure a11y now, you have to specify configuration using `addParameters`.
+
+```js
+addParameters({
+  a11y: {
+    element: "#root",
+    config: {},
+    options: {},
+    manual: true,
+  }
+};
+```
+
+#### Essentials addon disables differently
+
+In 6.0, `addon-essentials` doesn't configure addons if the user has already configured them in `main.js`. In 5.3 it previously checked to see whether the package had been installed in `package.json` to disable configuration. The new setup is preferably because now users' can install essential packages and import from them without disabling their configuration.
+
+### 6.0 Deprecations
+
+We've deprecated the following in 6.0: `addon-info`, `addon-notes`, `addon-contexts`, `addon-centered`, `polymer`.
+
+#### Deprecated addon-info, addon-notes
+
+The info/notes addons have been replaced by [addon-docs](https://github.com/storybookjs/storybook/tree/next/addons/docs). We've documented a migration in the [docs recipes](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons).
+
+Both addons are still widely used, and their source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). We're looking for maintainers for both addons. If you're interested, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
+
+#### Deprecated addon-contexts
+
+The contexts addon has been replaced by [addon-toolbars](https://github.com/storybookjs/storybook/blob/next/addons/toolbars), which is simpler, more ergonomic, and compatible with all Storybook frameworks.
+
+The addon's source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). If you're interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
+
+#### Removed addon-centered
+
+In 6.0 we removed the centered addon. Centering is now core feature of storybook, so w no longer need an addon.
+
+Remove the addon-centered decorator and instead add a `layout` parameter:
+
+```js
+export const MyStory = () => <div>my story</div>;
+MyStory.story = {
+  parameters: { layout: 'centered' },
+};
+```
+
+Other possible values are: `padded` (default) and `fullscreen`.
+
+#### Deprecated polymer
+
+We've deprecated `@storybook/polymer` and are focusing on `@storybook/web-components`. If you use Polymer and are interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
 
 ## From version 5.2.x to 5.3.x
 
-### To tri-config configuration
+### To main.js configuration
 
 In storybook 5.3 3 new files for configuration were introduced, that replaced some previous files.
 
-These files are now soft-deprecated, (*they still work, but over time we will promote users to migrate*):
+These files are now soft-deprecated, (_they still work, but over time we will promote users to migrate_):
 
-- `config.js` has been renamed to `preview.js`.
-- `addons.js` has been renamed to `manager.js`.
-- `presets.js` has been renamed to `main.js`.
+- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook.
+- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components.
+- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel.
 
 #### Using main.js
 
@@ -95,13 +655,11 @@ These files are now soft-deprecated, (*they still work, but over time we will pr
 ```js
 module.exports = {
   stories: ['../**/*.stories.js'],
-  addons: [
-    '@storybook/addon-docs/register',
-  ],
+  addons: ['@storybook/addon-knobs'],
 };
 ```
 
-You remove all "register" import from `addons.js` and place them inside the array. If this means `addons.js` is now empty for you, it's safe to remove.
+You remove all "register" import from `addons.js` and place them inside the array. You can also safely remove the `/register` suffix from these entries, for a cleaner, more readable configuration. If this means `addons.js` is now empty for you, it's safe to remove.
 
 Next you remove the code that imports/requires all your stories from `config.js`, and change it to a glob-pattern and place that glob in the `stories` array. If this means `config.js` is empty, it's safe to remove.
 
@@ -110,10 +668,20 @@ If you had a `presets.js` file before you can add the array of presets to the ma
 ```js
 module.exports = {
   stories: ['../**/*.stories.js'],
-  presets: ['@storybook/addon-docs/preset'],
+  addons: [
+    '@storybook/preset-create-react-app'
+    {
+      name: '@storybook/addon-docs',
+      options: { configureJSX: true }
+    }
+  ],
 };
 ```
 
+By default, adding a package to the `addons` array will first try to load its `preset` entry, then its `register` entry, and finally, it will just assume the package itself is a preset.
+
+If you want to load a specific package entry, for example you want to use `@storybook/addon-docs/register`, you can also include that in the addons array and Storybook will do the right thing.
+
 #### Using preview.js
 
 If after migrating the imports/requires of your stories to `main.js` you're left with some code in `config.js` it's likely the usage of `addParameters` & `addDecorator`.
@@ -136,15 +704,16 @@ const theme = create({
 });
 
 addons.setConfig({
-  showRoots: true,
   panelPosition: 'bottom',
   theme,
 });
 ```
 
-This makes storybook load and use the theme in the manager directly. 
+This makes storybook load and use the theme in the manager directly.
 This allows for richer theming in the future, and has a much better performance!
 
+> If you're using addon-docs, you should probably not do this. Docs uses the theme as well, but this change makes the theme inaccessible to addon-docs. We'll address this in 6.0.0.
+
 ### Create React App preset
 
 You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0.
@@ -169,17 +738,19 @@ To avoid that now you have to manually pass asyncStorage to React Native Storybo
 
 Solution:
 
-- Use `require('@react-native-community/async-storage').AsyncStorage` for React Native v0.59 and above.
+- Use `require('@react-native-community/async-storage').default` for React Native v0.59 and above.
 - Use `require('react-native').AsyncStorage` for React Native v0.58 or below.
 - Use `null` to disable Async Storage completely.
 
 ```javascript
 getStorybookUI({
   ...
-  asyncStorage: require('@react-native-community/async-storage').AsyncStorage || require('react-native').AsyncStorage || null
+  asyncStorage: require('@react-native-community/async-storage').default || require('react-native').AsyncStorage || null
 });
 ```
 
+The benefit of using Async Storage is so that when users refresh the app, Storybook can open their last visited story.
+
 ### Deprecate displayName parameter
 
 In 5.2, the story parameter `displayName` was introduced as a publicly visible (but internal) API. Storybook's Component Story Format (CSF) loader used it to modify a story's display name independent of the story's `name`/`id` (which were coupled).
@@ -203,11 +774,27 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
 If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots:
 
 ```js
-addParameters({ options: { showRoots: true } });
+addParameters({
+  options: {
+    showRoots: true,
+  },
+});
 ```
 
 NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories.
 
+### Addon StoryShots Puppeteer uses external puppeteer
+
+To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project.
+
+If you want the latest version available just run:
+
+```sh
+yarn add puppeteer --dev
+OR
+npm install puppeteer --save-dev
+```
+
 ## From version 5.1.x to 5.2.x
 
 ### Source-loader
@@ -325,6 +912,8 @@ After a few iterations, this approach seems to be working. However, there are a
 
 We'll update this section as we find more problem cases. If you have a `core-js` problem, please file an issue (preferably with a repro), and we'll do our best to get you sorted.
 
+**Update**: [corejs-upgrade-webpack-plugin](https://github.com/ndelangen/corejs-upgrade-webpack-plugin) has been removed again after running into further issues as described in [https://github.com/storybookjs/storybook/issues/7445](https://github.com/storybookjs/storybook/issues/7445).
+
 ## From version 5.0.1 to 5.0.2
 
 ### Deprecate webpack extend mode
@@ -385,7 +974,7 @@ var sortedModules = modules.slice().sort((a, b) => {
 });
 
 // execute them
-sortedModules.forEach(key => {
+sortedModules.forEach((key) => {
   context(key);
 });
 ```
@@ -618,6 +1207,26 @@ Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA
 
 See the [a11y addon README](https://github.com/storybookjs/storybook/blob/master/addons/a11y/README.md) for more information.
 
+### Addon centered decorator deprecated
+
+If you previously had:
+
+```js
+import centered from '@storybook/addon-centered';
+```
+
+You should replace it with the React or Vue version as appropriate
+
+```js
+import centered from '@storybook/addon-centered/react';
+```
+
+or
+
+```js
+import centered from '@storybook/addon-centered/vue';
+```
+
 ### New keyboard shortcuts defaults
 
 Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can:
@@ -929,7 +1538,7 @@ Here's an example of using Notes and Info in 3.2 with the new API.
 storiesOf('composition', module).add(
   'new addons api',
   withInfo('see Notes panel for composition info')(
-    withNotes({ text: 'Composition: Info(Notes())' })(context => (
+    withNotes({ text: 'Composition: Info(Notes())' })((context) => (
       <MyComponent name={context.story} />
     ))
   )
diff --git a/README.md b/README.md
index 6b44d241b354..e49b0b1de6c6 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ Storybook is a development environment for UI components.
 It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
 
 <center>
-  <img src="media/storybook-intro.gif" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
 </center>
 
 <p align="center">
@@ -91,7 +91,7 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui
 
 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
 
-**Storybook v2.x migration note**: 
+**Storybook v2.x migration note**:
 If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:
 
 ```sh
@@ -109,20 +109,21 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 
 ### Supported Frameworks
 
-| Framework                        | Demo                                              |                                                                                                |
-| -------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [React](app/react)               | [v5.1.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                      |
-| [React Native](app/react-native) | -                                                 | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) |
-| [Vue](app/vue)                   | [v5.1.0](https://storybooks-vue.netlify.com/)     | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                            |
-| [Angular](app/angular)           | [v5.1.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                |
-| [Polymer](app/polymer)           | [v5.1.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dm/@storybook/polymer.svg)](app/polymer)                |
-| [Mithril](app/mithril)           | [v5.1.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                |
-| [Marko](app/marko)               | [v5.1.0](https://storybooks-marko.netlify.com/)   | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                      |
-| [HTML](app/html)                 | [v5.1.0](https://storybooks-html.netlify.com/)    | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                         |
-| [Svelte](app/svelte)             | [v5.1.0](https://storybooks-svelte.netlify.com/)  | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                   |
-| [Riot](app/riot)                 | [v5.1.0](https://storybooks-riot.netlify.com/)    | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
-| [Ember](app/ember)               | [v5.1.0](https://storybooks-ember.netlify.com/)   | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
-| [Preact](app/preact)             | [v5.1.0](https://storybooks-preact.netlify.com/)  | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
+| Framework                        | Demo                                                                        |                                                                                                |
+| -------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [React](app/react)               | [v5.3.0](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                      |
+| [React Native](app/react-native) | -                                                                           | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) |
+| [Vue](app/vue)                   | [v5.3.0](https://storybookjs.netlify.com/vue-kitchen-sink/)                 | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                            |
+| [Angular](app/angular)           | [v5.3.0](https://storybookjs.netlify.com/angular-cli/)                      | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                |
+| [Marionette.js](app/marionette)  | -                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)    |
+| [Mithril](app/mithril)           | [v5.3.0](https://storybookjs.netlify.com/mithril-kitchen-sink/)             | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                |
+| [Marko](app/marko)               | [v5.3.0](https://storybookjs.netlify.com/marko-cli/)                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                      |
+| [HTML](app/html)                 | [v5.3.0](https://storybookjs.netlify.com/html-kitchen-sink/)                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                         |
+| [Svelte](app/svelte)             | [v5.3.0](https://storybookjs.netlify.com/svelte-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                   |
+| [Riot](app/riot)                 | [v5.3.0](https://storybookjs.netlify.com/riot-kitchen-sink/)                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
+| [Ember](app/ember)               | [v5.3.0](https://storybookjs.netlify.com/ember-cli/)                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
+| [Preact](app/preact)             | [v5.3.0](https://storybookjs.netlify.com/preact-kitchen-sink/)              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
+| [Rax](app/rax)                   | [v5.3.0](https://storybookjs.netlify.com/rax-kitchen-sink/)                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                            |
 
 ### Sub Projects
 
@@ -136,25 +137,37 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [a11y](addons/a11y/)                        | Test components for user accessibility in Storybook                        |
 | [actions](addons/actions/)                  | Log actions as users interact with components in the Storybook UI          |
 | [backgrounds](addons/backgrounds/)          | Let users choose backgrounds in the Storybook UI                           |
-| [centered](addons/centered/)                | Center the alignment of your components within the Storybook UI            |
-| [contexts](addons/contexts/)                | Interactively inject component contexts for stories in the Storybook UI    |
 | [cssresources](addons/cssresources/)        | Dynamically add/remove css resources to the component iframe               |
 | [design assets](addons/design-assets/)      | View images, videos, weblinks alongside your story                         |
+| [docs](addons/docs/)                        | Add high quality documentation to your components                          |
 | [events](addons/events/)                    | Interactively fire events to components that respond to EventEmitter       |
-| [graphql](addons/graphql/)                  | Query a GraphQL server within Storybook stories                            |
 | [google-analytics](addons/google-analytics) | Reports google analytics on stories                                        |
-| [info](addons/info/)                        | Annotate stories with extra component usage information                    |
+| [graphql](addons/graphql/)                  | Query a GraphQL server within Storybook stories                            |
 | [jest](addons/jest/)                        | View the results of components' unit tests in Storybook                    |
 | [knobs](addons/knobs/)                      | Interactively edit component prop data in the Storybook UI                 |
 | [links](addons/links/)                      | Create links between stories                                               |
-| [notes](addons/notes/)                      | Annotate Storybook stories with notes                                      |
 | [options](addons/options/)                  | Customize the Storybook UI in code                                         |
+| [query params](addons/queryparams/)         | Mock query params                                                          |
 | [storyshots](addons/storyshots/)            | Snapshot testing for components in Storybook                               |
 | [storysource](addons/storysource/)          | View the code of your stories within the Storybook UI                      |
 | [viewport](addons/viewport/)                | Change display sizes and layouts for responsive components using Storybook |
 
 See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 
+### Deprecated Addons
+
+| Addons                                      |                                                                            |
+| ------------------------------------------- | -------------------------------------------------------------------------- |
+| [info](https://github.com/storybookjs/storybook/tree/master/addons/info)                                        | Annotate stories with extra component usage information                    |
+| [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes)                                       | Annotate Storybook stories with notes                                      |
+| [contexts](https://github.com/storybookjs/storybook/tree/master/addons/contexts)                                       | Addon for driving your components under dynamic contexts                                      |
+
+In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
+
+If you're using info/notes, we highly recommend you to migrate to [docs](addons/docs/) instead, and [here is a guide](addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
+
+If you're using contexts, we highly recommend you to migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you.
+
 ## Badges & Presentation materials
 
 We have a badge! Link it to your live Storybook example.
diff --git a/ROADMAP.md b/ROADMAP.md
deleted file mode 100644
index 6a406bc2ccd7..000000000000
--- a/ROADMAP.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# Roadmap
-
-## Table of contents
-
-* [New features](#new-features)
-  + [Responsive + multi-device viewports preview.](#responsive--multi-device-viewports-preview)
-  + [Automatic story detection](#automatic-story-detection)
-  + [Theme ability and override core UI components](#theme-ability-and-override-core-ui-components)
-  + [Add a playground addon](#add-a-playground-addon)
-  + [See multiple (or all) stories in 1 preview.](#see-multiple--or-all--stories-in-1-preview)
-* [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
-  + [Polymer & Webcomponents](#polymer---webcomponents)
-  + [Aurelia](#aurelia)
-* [Breaking changes](#breaking-changes)
-  + [Addon API](#addon-api)
-  + [API for adding stories](#api-for-adding-stories)
-* [Documentation](#documentation)
-  + [Better design](#better-design)
-  + [Record videos and write blog post on how to use, tweak & develop storybook](#record-videos-and-write-blog-post-on-how-to-use--tweak---develop-storybook)
-
-## New features
-
-Doing these will be backwards compatible.
-
-### Responsive + multi-device viewports preview.
-
-If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
-But story selection and addon-settings are not synced.
-We want to make this much much simpler and a core feature of storybook.
-
-### Automatic story detection
-
-Some tools are doing automatic file detection, jest for example.
-We think such a feature is highly needed. A lot of users are already hacking this themselves using webpack specific features.
-
-### Themeability and override core UI components
-
-Storybook is often used inside product companies and agencies. We want to help them have a sense of quality and immersion.
-We're interested in full customizability of our UI, though addons and options.
-
-### Add a playground addon
-
-Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
-Storybook has a very tight connection with your editor, and it has a knobs addon.
-But we still see value in an addon that will allow the workflow of a playground.
-
-### See multiple (or all) stories in 1 preview.
-
-Storybook's philosophy is about describing small bits in a variety of states.
-However, some components are best understood when viewed in multiple varieties in 1 view.
-It's quite common to see users write a single story, with wrapper components and multiple instances of the component the story is about.
-We plan to add a second mode to storybook that will allow you to see all stories in 1 preview.
-That way you can write your stories how they are best, and preview them how you like.
-
-## Supporting other frameworks and libraries
-
-We believe in the power of react, and think it's the right choice for a lot of projects.
-But it's up to you and your team to decide your stack.
-Unfortunately, if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook.
-
-We want you to be able to use storybook with the framework / library of your choice.
-
-### Polymer & Webcomponents
-
-Storybook for Polymer is currently in development and will support custom elements and plain HTML.
-
-### Aurelia
-
-We're reaching out to the Aurelia maintainers to cooperate on this.
-
-## Breaking changes
-
-### Addon API
-
-Our addon api is limited and will eventually have to be improved to accommodate better more optimized and modern addons.
-
-### API for adding stories
-
-Currently, it's getting hard to set up a story that has data/options for multiple addons.
-We want to support this but will likely mean we will have to change the `add` method's API.
-
-## Documentation
-
-### Better design
-
-We have a new logo, so the next step is an overhaul of our documentation site.
-
-### Record videos and write blog posts on how to use, tweak & develop storybook
-
--   writing addons,
--   choosing the right addons.
--   how to start developing on our codebase.
--   how to use storybook itself and the CLI.
diff --git a/__mocks__/fs.js b/__mocks__/fs.js
index 261aedd7a6a7..89d2fb53ce18 100644
--- a/__mocks__/fs.js
+++ b/__mocks__/fs.js
@@ -13,11 +13,15 @@ function __setMockFiles(newMockFiles) {
 // A custom version of `readdirSync` that reads from the special mocked out
 // file list set via __setMockFiles
 const readFileSync = (filePath = '') => mockFiles[filePath];
-const existsSync = filePath => !!mockFiles[filePath];
+const existsSync = (filePath) => !!mockFiles[filePath];
+const lstatSync = (filePath) => ({
+  isFile: () => !!mockFiles[filePath],
+});
 
 // eslint-disable-next-line no-underscore-dangle
 fs.__setMockFiles = __setMockFiles;
 fs.readFileSync = readFileSync;
 fs.existsSync = existsSync;
+fs.lstatSync = lstatSync;
 
 module.exports = fs;
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
index aa141c5c94c1..17295f69933f 100755
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@@ -18,35 +18,33 @@ Add this line to your `main.js` file (create this file inside your storybook con
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-a11y/register']
-}
+  addons: ['@storybook/addon-a11y'],
+};
 ```
 
-import the `withA11y` decorator to check your stories for violations within your components.
-
 ```js
 import React from 'react';
 
-import { withA11y } from '@storybook/addon-a11y';
-
 export default {
   title: 'button',
-  decorators: [withA11y],
 };
 
-export const accessible = () => (
-  <button>
-    Accessible button
-  </button>
-);
+export const accessible = () => <button>Accessible button</button>;
 
 export const inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
-    Inaccessible button
-  </button>
+  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
 );
 ```
 
+If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
+
+```js
+export const MyNonCheckedStory = () => <SomeComponent />;
+MyNonCheckedStory.parameters = {
+  a11y: { disable: true },
+};
+```
+
 ## Parameters
 
 For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
@@ -56,11 +54,8 @@ You can override these options [at story level too](https://storybook.js.org/doc
 import React from 'react';
 import { storiesOf, addDecorator, addParameters } from '@storybook/react';
 
-import { withA11y } from '@storybook/addon-a11y';
-
 export default {
   title: 'button',
-  decorators: [withA11y],
   parameters: {
     a11y: {
       // optional selector which element to inspect
@@ -69,27 +64,23 @@ export default {
       config: {},
       // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
       options: {},
+      // optional flag to prevent the automatic check
+      manual: true,
     },
   },
 };
 
-export const accessible = () => (
-  <button>
-    Accessible button
-  </button>
-);
+export const accessible = () => <button>Accessible button</button>;
 
 export const inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
-    Inaccessible button
-  </button>
+  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
 );
 ```
 
 ## Roadmap
 
-* Make UI accessible
-* Show in story where violations are.
-* Add more example tests
-* Add tests
-* Make CI integration possible
+- Make UI accessible
+- Show in story where violations are.
+- Add more example tests
+- Add tests
+- Make CI integration possible
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 772ba9dfdadf..0bbf39e48dcc 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -20,41 +20,55 @@
     "directory": "addons/a11y"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
-    "axe-core": "^3.3.2",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "axe-core": "^3.5.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "memoizerific": "^1.11.3",
-    "react": "^16.8.3",
-    "react-redux": "^7.0.2",
+    "lodash": "^4.17.15",
     "react-sizeme": "^2.5.2",
-    "redux": "^4.0.1",
-    "ts-dedent": "^1.1.0",
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/react-redux": "^7.0.6"
+    "@testing-library/react": "^10.0.4",
+    "@types/webpack-env": "^1.15.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/a11y/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/a11y/src/a11yHighlight.ts b/addons/a11y/src/a11yHighlight.ts
new file mode 100644
index 000000000000..155e58f8919d
--- /dev/null
+++ b/addons/a11y/src/a11yHighlight.ts
@@ -0,0 +1,46 @@
+import { document } from 'global';
+import addons from '@storybook/addons';
+import { STORY_CHANGED } from '@storybook/core-events';
+import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
+
+import { higlightStyle } from './highlight';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+interface HighlightInfo {
+  /** html selector of the element */
+  elements: string[];
+  color: string;
+}
+
+const channel = addons.getChannel();
+
+const highlight = (infos: HighlightInfo) => {
+  const id = HIGHLIGHT_STYLE_ID;
+  resetHighlight();
+
+  const sheet = document.createElement('style');
+  sheet.setAttribute('id', id);
+  sheet.innerHTML = infos.elements
+    .map(
+      (target) =>
+        `${target}{ 
+          ${higlightStyle(infos.color)}
+         }`
+    )
+    .join(' ');
+  document.head.appendChild(sheet);
+};
+
+const resetHighlight = () => {
+  const id = HIGHLIGHT_STYLE_ID;
+  const sheetToBeRemoved = document.getElementById(id);
+  if (sheetToBeRemoved) {
+    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
+  }
+};
+
+channel.on(STORY_CHANGED, resetHighlight);
+channel.on(EVENTS.HIGHLIGHT, highlight);
diff --git a/addons/a11y/src/a11yRunner.test.ts b/addons/a11y/src/a11yRunner.test.ts
new file mode 100644
index 000000000000..2efb58b2f245
--- /dev/null
+++ b/addons/a11y/src/a11yRunner.test.ts
@@ -0,0 +1,25 @@
+import addons from '@storybook/addons';
+import { EVENTS } from './constants';
+
+jest.mock('@storybook/addons');
+const mockedAddons = addons as jest.Mocked<typeof addons>;
+
+describe('a11yRunner', () => {
+  let mockChannel: { on: jest.Mock; emit?: jest.Mock };
+
+  beforeEach(() => {
+    mockedAddons.getChannel.mockReset();
+
+    mockChannel = { on: jest.fn(), emit: jest.fn() };
+    mockedAddons.getChannel.mockReturnValue(mockChannel as any);
+  });
+
+  it('should listen to events', () => {
+    // eslint-disable-next-line global-require
+    require('./a11yRunner');
+
+    expect(mockedAddons.getChannel).toHaveBeenCalled();
+    expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.REQUEST, expect.any(Function));
+    expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.MANUAL, expect.any(Function));
+  });
+});
diff --git a/addons/a11y/src/a11yRunner.ts b/addons/a11y/src/a11yRunner.ts
new file mode 100644
index 000000000000..ce0c900f1fde
--- /dev/null
+++ b/addons/a11y/src/a11yRunner.ts
@@ -0,0 +1,58 @@
+import { document, window } from 'global';
+import axe from 'axe-core';
+import addons from '@storybook/addons';
+import { EVENTS } from './constants';
+import { Setup } from './params';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+const channel = addons.getChannel();
+let active = false;
+
+const getElement = () => {
+  const storyRoot = document.getElementById('story-root');
+  return storyRoot ? storyRoot.children : document.getElementById('root');
+};
+
+const run = async (storyId: string) => {
+  try {
+    const input = getParams(storyId);
+
+    if (!active) {
+      active = true;
+      channel.emit(EVENTS.RUNNING);
+
+      const { element = getElement(), config, options } = input;
+      axe.reset();
+      if (config) {
+        axe.configure(config);
+      }
+
+      const result = await axe.run(element, options);
+      channel.emit(EVENTS.RESULT, result);
+    }
+  } catch (error) {
+    channel.emit(EVENTS.ERROR, error);
+  } finally {
+    active = false;
+  }
+};
+
+/** Returns story parameters or default ones. */
+const getParams = (storyId: string): Setup => {
+  // eslint-disable-next-line no-underscore-dangle
+  const { parameters } = window.__STORYBOOK_STORY_STORE__._stories[storyId] || {};
+  return (
+    parameters.a11y || {
+      config: {},
+      options: {
+        restoreScroll: true,
+      },
+    }
+  );
+};
+
+channel.on(EVENTS.REQUEST, run);
+channel.on(EVENTS.MANUAL, run);
diff --git a/addons/a11y/src/components/A11YPanel.test.js b/addons/a11y/src/components/A11YPanel.test.js
deleted file mode 100644
index 2f84b31afd39..000000000000
--- a/addons/a11y/src/components/A11YPanel.test.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { ThemeProvider, themes, convert } from '@storybook/theming';
-import { STORY_RENDERED } from '@storybook/core-events';
-import { ScrollArea } from '@storybook/components';
-
-import { A11YPanel } from './A11YPanel';
-import { EVENTS } from '../constants';
-
-function createApi() {
-  return {
-    emit: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-  };
-}
-
-const axeResult = {
-  incomplete: [
-    {
-      id: 'color-contrast',
-      impact: 'serious',
-      tags: ['cat.color', 'wcag2aa', 'wcag143'],
-      description:
-        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
-      help: 'Elements must have sufficient color contrast',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
-      nodes: [],
-    },
-  ],
-  passes: [
-    {
-      id: 'aria-allowed-attr',
-      impact: null,
-      tags: ['cat.aria', 'wcag2a', 'wcag412'],
-      description: "Ensures ARIA attributes are allowed for an element's role",
-      help: 'Elements must only use allowed ARIA attributes',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
-      nodes: [],
-    },
-  ],
-  violations: [
-    {
-      id: 'color-contrast',
-      impact: 'serious',
-      tags: ['cat.color', 'wcag2aa', 'wcag143'],
-      description:
-        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
-      help: 'Elements must have sufficient color contrast',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
-      nodes: [],
-    },
-  ],
-};
-
-function ThemedA11YPanel(props) {
-  return (
-    <ThemeProvider theme={convert(themes.light)}>
-      <A11YPanel {...props} />
-    </ThemeProvider>
-  );
-}
-
-describe('A11YPanel', () => {
-  it('should register STORY_RENDERED, RESULT and ERROR updater on mount', () => {
-    // given
-    const api = createApi();
-    expect(api.on).not.toHaveBeenCalled();
-
-    // when
-    mount(<ThemedA11YPanel api={api} />);
-
-    // then
-    expect(api.on.mock.calls.length).toBe(3);
-    expect(api.on.mock.calls[0][0]).toBe(STORY_RENDERED);
-    expect(api.on.mock.calls[1][0]).toBe(EVENTS.RESULT);
-    expect(api.on.mock.calls[2][0]).toBe(EVENTS.ERROR);
-  });
-
-  it('should request a run on tab activation', () => {
-    // given
-    const api = createApi();
-
-    const wrapper = mount(<ThemedA11YPanel api={api} />);
-    expect(api.emit).not.toHaveBeenCalled();
-
-    // when
-    wrapper.setProps({ active: true });
-    wrapper.update();
-
-    // then
-    expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
-    expect(wrapper.find(ScrollArea).length).toBe(0);
-  });
-
-  it('should deregister STORY_RENDERED, RESULT and ERROR updater on unmount', () => {
-    // given
-    const api = createApi();
-    const wrapper = mount(<ThemedA11YPanel api={api} />);
-    expect(api.off).not.toHaveBeenCalled();
-
-    // when
-    wrapper.unmount();
-
-    // then
-    expect(api.off.mock.calls.length).toBe(3);
-    expect(api.off.mock.calls[0][0]).toBe(STORY_RENDERED);
-    expect(api.off.mock.calls[1][0]).toBe(EVENTS.RESULT);
-    expect(api.off.mock.calls[2][0]).toBe(EVENTS.ERROR);
-  });
-
-  it('should update run result', () => {
-    // given
-    const api = createApi();
-    const wrapper = mount(<ThemedA11YPanel api={api} active />);
-    const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1];
-
-    expect(
-      wrapper
-        .find('button')
-        .last()
-        .text()
-        .trim()
-    ).toBe('Rerun tests');
-
-    // when
-    onUpdate(axeResult);
-
-    // then
-    expect(
-      wrapper
-        .find('button')
-        .last()
-        .text()
-        .trim()
-    ).toBe('Tests completed');
-  });
-
-  it('should request run', () => {
-    // given
-    const api = createApi();
-    const wrapper = mount(<ThemedA11YPanel api={api} active />);
-    const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
-
-    expect(
-      wrapper
-        .find('button')
-        .last()
-        .text()
-        .trim()
-    ).toBe('Rerun tests');
-    expect(api.emit).not.toHaveBeenCalled();
-
-    // when
-    request();
-
-    // then
-    expect(
-      wrapper
-        .find('button')
-        .last()
-        .text()
-        .trim()
-    ).toBe('Running test');
-    expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
-  });
-
-  it('should NOT request run on inactive tab', () => {
-    // given
-    const api = createApi();
-    mount(<ThemedA11YPanel api={api} active={false} />);
-    const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
-    expect(api.emit).not.toHaveBeenCalled();
-
-    // when
-    request();
-
-    // then
-    expect(api.emit).not.toHaveBeenCalled();
-  });
-
-  it('should render report', () => {
-    // given
-    const api = createApi();
-    const wrapper = mount(<ThemedA11YPanel api={api} active />);
-    const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1];
-
-    // when
-    onUpdate(axeResult);
-
-    // then
-    expect(wrapper.find(A11YPanel)).toMatchSnapshot();
-  });
-
-  it("should render loader when it's running", () => {
-    // given
-    const api = createApi();
-    const wrapper = mount(<ThemedA11YPanel api={api} active />);
-    const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
-
-    // when
-    request();
-    wrapper.update();
-
-    // then
-    expect(wrapper.find('ScrollArea').length).toBe(0);
-    expect(wrapper.find('Loader').length).toBe(1);
-    expect(wrapper.find('ActionBar').length).toBe(1);
-    expect(wrapper.find('Loader')).toMatchSnapshot();
-  });
-
-  it('should NOT anything when tab is not active', () => {
-    // given
-    const api = createApi();
-
-    // when
-    const wrapper = mount(<ThemedA11YPanel api={api} active={false} />);
-
-    // then
-    expect(wrapper.find('ScrollArea').length).toBe(0);
-    expect(wrapper.find('ActionBar').length).toBe(0);
-  });
-});
diff --git a/addons/a11y/src/components/A11YPanel.test.tsx b/addons/a11y/src/components/A11YPanel.test.tsx
new file mode 100644
index 000000000000..b7e77b1e51a3
--- /dev/null
+++ b/addons/a11y/src/components/A11YPanel.test.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, waitFor, fireEvent, act } from '@testing-library/react';
+
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import * as api from '@storybook/api';
+
+import { A11YPanel } from './A11YPanel';
+import { EVENTS } from '../constants';
+
+jest.mock('@storybook/api');
+const mockedApi = api as jest.Mocked<typeof api>;
+
+const axeResult = {
+  incomplete: [
+    {
+      id: 'color-contrast',
+      impact: 'serious',
+      tags: ['cat.color', 'wcag2aa', 'wcag143'],
+      description:
+        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+      help: 'Elements must have sufficient color contrast',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+      nodes: [],
+    },
+  ],
+  passes: [
+    {
+      id: 'aria-allowed-attr',
+      impact: null,
+      tags: ['cat.aria', 'wcag2a', 'wcag412'],
+      description: "Ensures ARIA attributes are allowed for an element's role",
+      help: 'Elements must only use allowed ARIA attributes',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
+      nodes: [],
+    },
+  ],
+  violations: [
+    {
+      id: 'color-contrast',
+      impact: 'serious',
+      tags: ['cat.color', 'wcag2aa', 'wcag143'],
+      description:
+        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+      help: 'Elements must have sufficient color contrast',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+      nodes: [],
+    },
+  ],
+};
+
+function ThemedA11YPanel() {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <A11YPanel />
+    </ThemeProvider>
+  );
+}
+
+describe('A11YPanel', () => {
+  beforeEach(() => {
+    mockedApi.useChannel.mockReset();
+    mockedApi.useParameter.mockReset();
+    mockedApi.useStorybookState.mockReset();
+    mockedApi.useAddonState.mockReset();
+
+    mockedApi.useChannel.mockReturnValue(jest.fn());
+    mockedApi.useParameter.mockReturnValue({ manual: false });
+    const state: Partial<api.State> = { storyId: 'jest' };
+    // Lazy to mock entire state
+    mockedApi.useStorybookState.mockReturnValue(state as any);
+    mockedApi.useAddonState.mockImplementation(React.useState);
+  });
+
+  it('should render', () => {
+    const { container } = render(<A11YPanel />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should register event listener on mount', () => {
+    render(<A11YPanel />);
+    expect(mockedApi.useChannel).toHaveBeenCalledWith(
+      expect.objectContaining({
+        [EVENTS.RESULT]: expect.any(Function),
+        [EVENTS.ERROR]: expect.any(Function),
+      })
+    );
+  });
+
+  it('should handle "initial" status', () => {
+    const { getByText } = render(<A11YPanel />);
+    expect(getByText(/Initializing/)).toBeTruthy();
+  });
+
+  it('should handle "manual" status', async () => {
+    mockedApi.useParameter.mockReturnValue({ manual: true });
+    const { getByText } = render(<ThemedA11YPanel />);
+    await waitFor(() => {
+      expect(getByText(/Manually run the accessibility scan/)).toBeTruthy();
+    });
+  });
+
+  describe('running', () => {
+    it('should handle "running" status', async () => {
+      const emit = jest.fn();
+      mockedApi.useChannel.mockReturnValue(emit);
+      mockedApi.useParameter.mockReturnValue({ manual: true });
+      const { getByRole, getByText } = render(<ThemedA11YPanel />);
+      await waitFor(() => {
+        const button = getByRole('button', { name: 'Run test' });
+        fireEvent.click(button);
+      });
+      await waitFor(() => {
+        expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
+        expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, 'jest');
+      });
+    });
+
+    it('should set running status on event', async () => {
+      const { getByText } = render(<ThemedA11YPanel />);
+      const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+      act(() => useChannelArgs[EVENTS.RUNNING]());
+      await waitFor(() => {
+        expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
+      });
+    });
+  });
+
+  it('should handle "ran" status', async () => {
+    const { getByText } = render(<ThemedA11YPanel />);
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    act(() => useChannelArgs[EVENTS.RESULT](axeResult));
+    await waitFor(() => {
+      expect(getByText(/Tests completed/)).toBeTruthy();
+      expect(getByText(/Violations/)).toBeTruthy();
+      expect(getByText(/Passes/)).toBeTruthy();
+      expect(getByText(/Incomplete/)).toBeTruthy();
+    });
+  });
+});
diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
index a2d7a7fc73d8..fc568cfc4e30 100644
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@@ -1,18 +1,17 @@
-import React, { Component, Fragment } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { styled } from '@storybook/theming';
 
-import { STORY_RENDERED } from '@storybook/core-events';
 import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
-import { AxeResults, Result } from 'axe-core';
-import { API } from '@storybook/api';
-import { Provider } from 'react-redux';
+import { AxeResults } from 'axe-core';
+import { useChannel, useParameter, useStorybookState, useAddonState } from '@storybook/api';
 import { Report } from './Report';
 import { Tabs } from './Tabs';
-import { EVENTS } from '../constants';
 
-import store, { clearElements } from '../redux-config';
+import { useA11yContext } from './A11yContext';
+import { EVENTS, ADDON_ID } from '../constants';
+import { A11yParameters } from '../params';
 
 export enum RuleType {
   VIOLATION,
@@ -20,19 +19,15 @@ export enum RuleType {
   INCOMPLETION,
 }
 
-const Icon = styled(Icons)(
-  {
-    height: 12,
-    width: 12,
-    marginRight: 4,
-  },
-  ({ status, theme }: any) =>
-    status === 'running'
-      ? {
-          animation: `${theme.animation.rotate360} 1s linear infinite;`,
-        }
-      : {}
-);
+const Icon = styled(Icons)({
+  height: 12,
+  width: 12,
+  marginRight: 4,
+});
+
+const RotatingIcon = styled(Icon)<{}>(({ theme }) => ({
+  animation: `${theme.animation.rotate360} 1s linear infinite;`,
+}));
 
 const Passes = styled.span<{}>(({ theme }) => ({
   color: theme.color.positive,
@@ -46,210 +41,145 @@ const Incomplete = styled.span<{}>(({ theme }) => ({
   color: theme.color.warning,
 }));
 
-const centeredStyle = {
+const Centered = styled.span<{}>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   height: '100%',
-};
-
-const Loader = styled(({ className }) => (
-  <div className={className}>
-    <Icon inline icon="sync" status="running" /> Please wait while the accessibility scan is running
-    ...
-  </div>
-))(centeredStyle);
-Loader.displayName = 'Loader';
-
-interface A11YPanelNormalState {
-  status: 'ready' | 'ran' | 'running';
-  passes: Result[];
-  violations: Result[];
-  incomplete: Result[];
-}
-
-interface A11YPanelErrorState {
-  status: 'error';
-  error: unknown;
-}
-
-type A11YPanelState = A11YPanelNormalState | A11YPanelErrorState;
-
-interface A11YPanelProps {
-  active: boolean;
-  api: API;
-}
-
-export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
-  state: A11YPanelState = {
-    status: 'ready',
-    passes: [],
-    violations: [],
-    incomplete: [],
+});
+
+type Status = 'initial' | 'manual' | 'running' | 'error' | 'ran' | 'ready';
+
+export const A11YPanel: React.FC = () => {
+  const [status, setStatus] = useAddonState<Status>(ADDON_ID, 'initial');
+  const [error, setError] = React.useState<unknown>(undefined);
+  const { setResults, results } = useA11yContext();
+  const { storyId } = useStorybookState();
+  const { manual } = useParameter<Pick<A11yParameters, 'manual'>>('a11y', {
+    manual: false,
+  });
+
+  React.useEffect(() => {
+    setStatus(manual ? 'manual' : 'initial');
+  }, [manual]);
+
+  const handleResult = (axeResults: AxeResults) => {
+    setStatus('ran');
+    setResults(axeResults);
+
+    setTimeout(() => {
+      if (status === 'ran') {
+        setStatus('ready');
+      }
+    }, 900);
   };
 
-  componentDidMount() {
-    const { api } = this.props;
-
-    api.on(STORY_RENDERED, this.request);
-    api.on(EVENTS.RESULT, this.onUpdate);
-    api.on(EVENTS.ERROR, this.onError);
-  }
-
-  componentDidUpdate(prevProps: A11YPanelProps) {
-    // TODO: might be able to remove this
-    const { active } = this.props;
-
-    if (!prevProps.active && active) {
-      // removes all elements from the redux map in store from the previous panel
-      store.dispatch(clearElements());
-      this.request();
-    }
-  }
-
-  componentWillUnmount() {
-    const { api } = this.props;
-    api.off(STORY_RENDERED, this.request);
-    api.off(EVENTS.RESULT, this.onUpdate);
-    api.off(EVENTS.ERROR, this.onError);
-  }
-
-  onUpdate = ({ passes, violations, incomplete }: AxeResults) => {
-    this.setState(
+  const handleRun = useCallback(() => {
+    setStatus('running');
+  }, []);
+
+  const handleError = useCallback((err: unknown) => {
+    setStatus('error');
+    setError(err);
+  }, []);
+
+  const emit = useChannel({
+    [EVENTS.RUNNING]: handleRun,
+    [EVENTS.RESULT]: handleResult,
+    [EVENTS.ERROR]: handleError,
+  });
+
+  const handleManual = useCallback(() => {
+    setStatus('running');
+    emit(EVENTS.MANUAL, storyId);
+  }, [storyId]);
+
+  const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [
+    handleManual,
+  ]);
+  const readyActionItems = useMemo(
+    () => [
       {
-        status: 'ran',
-        passes,
-        violations,
-        incomplete,
+        title:
+          status === 'ready' ? (
+            'Rerun tests'
+          ) : (
+            <>
+              <Icon inline icon="check" /> Tests completed
+            </>
+          ),
+        onClick: handleManual,
       },
-      () => {
-        setTimeout(() => {
-          const { status } = this.state;
-          if (status === 'ran') {
-            this.setState({
-              status: 'ready',
-            });
-          }
-        }, 900);
-      }
-    );
-  };
-
-  onError = (error: unknown) => {
-    this.setState({
-      status: 'error',
-      error,
-    });
-  };
-
-  request = () => {
-    const { api, active } = this.props;
-
-    if (active) {
-      this.setState(
-        {
-          status: 'running',
-        },
-        () => {
-          api.emit(EVENTS.REQUEST);
-          // removes all elements from the redux map in store from the previous panel
-          store.dispatch(clearElements());
-        }
-      );
-    }
-  };
-
-  render() {
-    const { active } = this.props;
-    if (!active) return null;
-
-    // eslint-disable-next-line react/destructuring-assignment
-    if (this.state.status === 'error') {
-      const { error } = this.state;
-      return (
-        <div style={centeredStyle}>
+    ],
+    [status, handleManual]
+  );
+  const tabs = useMemo(() => {
+    const { passes, incomplete, violations } = results;
+    return [
+      {
+        label: <Violations>{violations.length} Violations</Violations>,
+        panel: (
+          <Report
+            items={violations}
+            type={RuleType.VIOLATION}
+            empty="No accessibility violations found."
+          />
+        ),
+        items: violations,
+        type: RuleType.VIOLATION,
+      },
+      {
+        label: <Passes>{passes.length} Passes</Passes>,
+        panel: (
+          <Report items={passes} type={RuleType.PASS} empty="No accessibility checks passed." />
+        ),
+        items: passes,
+        type: RuleType.PASS,
+      },
+      {
+        label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
+        panel: (
+          <Report
+            items={incomplete}
+            type={RuleType.INCOMPLETION}
+            empty="No accessibility checks incomplete."
+          />
+        ),
+        items: incomplete,
+        type: RuleType.INCOMPLETION,
+      },
+    ];
+  }, [results]);
+  return (
+    <>
+      {status === 'initial' && <Centered>Initializing...</Centered>}
+      {status === 'manual' && (
+        <>
+          <Centered>Manually run the accessibility scan.</Centered>
+          <ActionBar key="actionbar" actionItems={manualActionItems} />
+        </>
+      )}
+      {status === 'running' && (
+        <Centered>
+          <RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
+          ...
+        </Centered>
+      )}
+      {(status === 'ready' || status === 'ran') && (
+        <>
+          <ScrollArea vertical horizontal>
+            <Tabs key="tabs" tabs={tabs} />
+          </ScrollArea>
+          <ActionBar key="actionbar" actionItems={readyActionItems} />
+        </>
+      )}
+      {status === 'error' && (
+        <Centered>
           The accessibility scan encountered an error.
           <br />
-          {error}
-        </div>
-      );
-    }
-
-    const { passes, violations, incomplete, status } = this.state;
-
-    let actionTitle;
-    if (status === 'ready') {
-      actionTitle = 'Rerun tests';
-    } else if (status === 'running') {
-      actionTitle = (
-        <Fragment>
-          <Icon inline icon="sync" status={status} /> Running test
-        </Fragment>
-      );
-    } else if (status === 'ran') {
-      actionTitle = (
-        <Fragment>
-          <Icon inline icon="check" /> Tests completed
-        </Fragment>
-      );
-    }
-
-    return (
-      <Fragment>
-        <Provider store={store}>
-          {status === 'running' ? (
-            <Loader />
-          ) : (
-            <ScrollArea vertical horizontal>
-              <Tabs
-                key="tabs"
-                tabs={[
-                  {
-                    label: <Violations>{violations.length} Violations</Violations>,
-                    panel: (
-                      <Report
-                        items={violations}
-                        type={RuleType.VIOLATION}
-                        empty="No accessibility violations found."
-                      />
-                    ),
-                    items: violations,
-                    type: RuleType.VIOLATION,
-                  },
-                  {
-                    label: <Passes>{passes.length} Passes</Passes>,
-                    panel: (
-                      <Report
-                        items={passes}
-                        type={RuleType.PASS}
-                        empty="No accessibility checks passed."
-                      />
-                    ),
-                    items: passes,
-                    type: RuleType.PASS,
-                  },
-                  {
-                    label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
-                    panel: (
-                      <Report
-                        items={incomplete}
-                        type={RuleType.INCOMPLETION}
-                        empty="No accessibility checks incomplete."
-                      />
-                    ),
-                    items: incomplete,
-                    type: RuleType.INCOMPLETION,
-                  },
-                ]}
-              />
-            </ScrollArea>
-          )}
-          <ActionBar
-            key="actionbar"
-            actionItems={[{ title: actionTitle, onClick: this.request }]}
-          />
-        </Provider>
-      </Fragment>
-    );
-  }
-}
+          {typeof error === 'string' ? error : JSON.stringify(error)}
+        </Centered>
+      )}
+    </>
+  );
+};
diff --git a/addons/a11y/src/components/A11yContext.test.tsx b/addons/a11y/src/components/A11yContext.test.tsx
new file mode 100644
index 000000000000..5d4e7003f149
--- /dev/null
+++ b/addons/a11y/src/components/A11yContext.test.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { AxeResults } from 'axe-core';
+import { render, act } from '@testing-library/react';
+import * as api from '@storybook/api';
+import { STORY_CHANGED } from '@storybook/core-events';
+
+import { A11yContextProvider, useA11yContext } from './A11yContext';
+import { EVENTS } from '../constants';
+
+jest.mock('@storybook/api');
+const mockedApi = api as jest.Mocked<typeof api>;
+
+const storyId = 'jest';
+const axeResult: Partial<AxeResults> = {
+  incomplete: [
+    {
+      id: 'color-contrast',
+      impact: 'serious',
+      tags: [],
+      description:
+        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+      help: 'Elements must have sufficient color contrast',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+      nodes: [],
+    },
+  ],
+  passes: [
+    {
+      id: 'aria-allowed-attr',
+      impact: undefined,
+      tags: [],
+      description: "Ensures ARIA attributes are allowed for an element's role",
+      help: 'Elements must only use allowed ARIA attributes',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
+      nodes: [],
+    },
+  ],
+  violations: [
+    {
+      id: 'color-contrast',
+      impact: 'serious',
+      tags: [],
+      description:
+        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+      help: 'Elements must have sufficient color contrast',
+      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+      nodes: [],
+    },
+  ],
+};
+
+describe('A11YPanel', () => {
+  beforeEach(() => {
+    mockedApi.useChannel.mockReset();
+    mockedApi.useStorybookState.mockReset();
+
+    mockedApi.useChannel.mockReturnValue(jest.fn());
+    const state: Partial<api.State> = { storyId };
+    // Lazy to mock entire state
+    mockedApi.useStorybookState.mockReturnValue(state as any);
+  });
+
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <A11yContextProvider active>
+        <div data-testid="child" />
+      </A11yContextProvider>
+    );
+    expect(getByTestId('child')).toBeTruthy();
+  });
+
+  it('should not render when inactive', () => {
+    const emit = jest.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+    const { queryByTestId } = render(
+      <A11yContextProvider active={false}>
+        <div data-testid="child" />
+      </A11yContextProvider>
+    );
+    expect(queryByTestId('child')).toBeFalsy();
+    expect(emit).not.toHaveBeenCalledWith(EVENTS.REQUEST);
+  });
+
+  it('should emit request when moving from inactive to active', () => {
+    const emit = jest.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+    const { rerender } = render(<A11yContextProvider active={false} />);
+    rerender(<A11yContextProvider active />);
+    expect(emit).toHaveBeenLastCalledWith(EVENTS.REQUEST, storyId);
+  });
+
+  it('should emit highlight with no values when inactive', () => {
+    const emit = jest.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+    const { rerender } = render(<A11yContextProvider active />);
+    rerender(<A11yContextProvider active={false} />);
+    expect(emit).toHaveBeenLastCalledWith(
+      EVENTS.HIGHLIGHT,
+      expect.objectContaining({
+        color: expect.any(String),
+        elements: [],
+      })
+    );
+  });
+
+  it('should emit highlight with no values when story changed', () => {
+    const Component = () => {
+      const { results, setResults } = useA11yContext();
+      // As any because of unit tests...
+      React.useEffect(() => setResults(axeResult as any), []);
+      return (
+        <>
+          {!!results.passes.length && <div data-testid="anyPassesResults" />}
+          {!!results.incomplete.length && <div data-testid="anyIncompleteResults" />}
+          {!!results.violations.length && <div data-testid="anyViolationsResults" />}
+        </>
+      );
+    };
+    const { queryByTestId } = render(
+      <A11yContextProvider active>
+        <Component />
+      </A11yContextProvider>
+    );
+    expect(queryByTestId('anyPassesResults')).toBeTruthy();
+    expect(queryByTestId('anyIncompleteResults')).toBeTruthy();
+    expect(queryByTestId('anyViolationsResults')).toBeTruthy();
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    act(() => useChannelArgs[STORY_CHANGED]());
+    expect(queryByTestId('anyPassesResults')).toBeFalsy();
+    expect(queryByTestId('anyIncompleteResults')).toBeFalsy();
+    expect(queryByTestId('anyViolationsResults')).toBeFalsy();
+  });
+});
diff --git a/addons/a11y/src/components/A11yContext.tsx b/addons/a11y/src/components/A11yContext.tsx
new file mode 100644
index 000000000000..458fa14f11b5
--- /dev/null
+++ b/addons/a11y/src/components/A11yContext.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { themes, convert } from '@storybook/theming';
+import { Result } from 'axe-core';
+import { useChannel, useStorybookState } from '@storybook/api';
+import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
+import { EVENTS } from '../constants';
+
+interface Results {
+  passes: Result[];
+  violations: Result[];
+  incomplete: Result[];
+}
+
+interface A11yContextStore {
+  results: Results;
+  setResults: (results: Results) => void;
+  highlighted: string[];
+  toggleHighlight: (target: string[], highlight: boolean) => void;
+  clearHighlights: () => void;
+  tab: number;
+  setTab: (index: number) => void;
+}
+
+const colorsByType = [
+  convert(themes.normal).color.negative, // VIOLATION,
+  convert(themes.normal).color.positive, // PASS,
+  convert(themes.normal).color.warning, // INCOMPLETION,
+];
+
+export const A11yContext = React.createContext<A11yContextStore>({
+  results: {
+    passes: [],
+    incomplete: [],
+    violations: [],
+  },
+  setResults: () => {},
+  highlighted: [],
+  toggleHighlight: () => {},
+  clearHighlights: () => {},
+  tab: 0,
+  setTab: () => {},
+});
+
+interface A11yContextProviderProps {
+  active: boolean;
+}
+
+const defaultResult = {
+  passes: [],
+  incomplete: [],
+  violations: [],
+};
+
+export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
+  const [results, setResults] = React.useState<Results>(defaultResult);
+  const [tab, setTab] = React.useState(0);
+  const [highlighted, setHighlighted] = React.useState<string[]>([]);
+  const { storyId } = useStorybookState();
+
+  const handleToggleHighlight = React.useCallback((target: string[], highlight: boolean) => {
+    setHighlighted((prevHighlighted) =>
+      highlight
+        ? [...prevHighlighted, ...target]
+        : prevHighlighted.filter((t) => !target.includes(t))
+    );
+  }, []);
+  const handleRun = React.useCallback(() => {
+    emit(EVENTS.REQUEST, storyId);
+  }, [storyId]);
+  const handleClearHighlights = React.useCallback(() => setHighlighted([]), []);
+  const handleSetTab = React.useCallback((index: number) => {
+    handleClearHighlights();
+    setTab(index);
+  }, []);
+
+  const handleReset = React.useCallback(() => {
+    setTab(0);
+    setResults(defaultResult);
+    // Highlights is cleared by a11yHighlights.ts
+  }, []);
+
+  const emit = useChannel({
+    [STORY_RENDERED]: handleRun,
+    [STORY_CHANGED]: handleReset,
+  });
+
+  React.useEffect(() => {
+    emit(EVENTS.HIGHLIGHT, { elements: highlighted, color: colorsByType[tab] });
+  }, [highlighted, tab]);
+
+  React.useEffect(() => {
+    if (active) {
+      handleRun();
+    } else {
+      handleClearHighlights();
+    }
+  }, [active, handleClearHighlights, emit, storyId]);
+
+  if (!active) return null;
+
+  return (
+    <A11yContext.Provider
+      value={{
+        results,
+        setResults,
+        highlighted,
+        toggleHighlight: handleToggleHighlight,
+        clearHighlights: handleClearHighlights,
+        tab,
+        setTab: handleSetTab,
+      }}
+      {...props}
+    />
+  );
+};
+
+export const useA11yContext = () => React.useContext(A11yContext);
diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index 35edc2bd15c4..ae11f4860fe0 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -1,15 +1,27 @@
-import { document } from 'global';
 import React, { FunctionComponent, ReactNode, useState } from 'react';
-import memoize from 'memoizerific';
-import { styled } from '@storybook/theming';
-
-import { logger } from '@storybook/client-logger';
+import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));
+import { Filters } from './ColorFilters';
+
+const iframeId = 'storybook-preview-iframe';
 
-const getFilter = (filter: string | null) => {
-  if (filter === null) {
+const baseList = [
+  'protanopia',
+  'protanomaly',
+  'deuteranopia',
+  'deuteranomaly',
+  'tritanopia',
+  'tritanomaly',
+  'achromatopsia',
+  'achromatomaly',
+  'mono',
+] as const;
+
+type Filter = typeof baseList[number] | null;
+
+const getFilter = (filter: Filter) => {
+  if (!filter) {
     return 'none';
   }
   if (filter === 'mono') {
@@ -18,7 +30,15 @@ const getFilter = (filter: string | null) => {
   return `url('#${filter}')`;
 };
 
-const ColorIcon = styled.span(
+const Hidden = styled.div(() => ({
+  '&, & svg': {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
+}));
+
+const ColorIcon = styled.span<{ filter: Filter }>(
   {
     background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
     borderRadius: '1rem',
@@ -26,7 +46,7 @@ const ColorIcon = styled.span(
     height: '1rem',
     width: '1rem',
   },
-  ({ filter }: { filter: string | null }) => ({
+  ({ filter }) => ({
     filter: getFilter(filter),
   }),
   ({ theme }) => ({
@@ -34,18 +54,6 @@ const ColorIcon = styled.span(
   })
 );
 
-const baseList = [
-  'protanopia',
-  'protanomaly',
-  'deuteranopia',
-  'deuteranomaly',
-  'tritanopia',
-  'tritanomaly',
-  'achromatopsia',
-  'achromatomaly',
-  'mono',
-];
-
 export interface Link {
   id: string;
   title: ReactNode;
@@ -54,7 +62,7 @@ export interface Link {
   onClick: () => void;
 }
 
-const getColorList = (active: string | null, set: (i: string | null) => void): Link[] => [
+const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
   ...(active !== null
     ? [
         {
@@ -68,7 +76,7 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
         },
       ]
     : []),
-  ...baseList.map(i => ({
+  ...baseList.map((i) => ({
     id: i,
     title: i.charAt(0).toUpperCase() + i.slice(1),
     onClick: () => {
@@ -80,36 +88,39 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
 ];
 
 export const ColorBlindness: FunctionComponent = () => {
-  const [active, setActiveState] = useState(null);
-
-  const setActive = (activeState: string | null): void => {
-    const iframe = getIframe();
-
-    if (iframe) {
-      iframe.style.filter = getFilter(activeState);
-      setActiveState(activeState);
-    } else {
-      logger.error('Cannot find Storybook iframe');
-    }
-  };
+  const [filter, setFilter] = useState<Filter>(null);
 
   return (
-    <WithTooltip
-      placement="top"
-      trigger="click"
-      tooltip={({ onHide }) => {
-        const colorList = getColorList(active, i => {
-          setActive(i);
-          onHide();
-        });
-        return <TooltipLinkList links={colorList} />;
-      }}
-      closeOnClick
-      onDoubleClick={() => setActive(null)}
-    >
-      <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
-        <Icons icon="mirror" />
-      </IconButton>
-    </WithTooltip>
+    <>
+      {filter && (
+        <Global
+          styles={{
+            [`#${iframeId}`]: {
+              filter: getFilter(filter),
+            },
+          }}
+        />
+      )}
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        tooltip={({ onHide }) => {
+          const colorList = getColorList(filter, (i) => {
+            setFilter(i);
+            onHide();
+          });
+          return <TooltipLinkList links={colorList} />;
+        }}
+        closeOnClick
+        onDoubleClick={() => setFilter(null)}
+      >
+        <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
+          <Icons icon="mirror" />
+        </IconButton>
+      </WithTooltip>
+      <Hidden>
+        <Filters />
+      </Hidden>
+    </>
   );
 };
diff --git a/addons/a11y/src/components/ColorFilters.tsx b/addons/a11y/src/components/ColorFilters.tsx
new file mode 100644
index 000000000000..04c34088b7fd
--- /dev/null
+++ b/addons/a11y/src/components/ColorFilters.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+export const Filters: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg {...props}>
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
index d2fc529b8d05..50e0d0779caf 100644
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@@ -36,19 +36,13 @@ const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
   const { any, all, none } = element;
   const rules = [...any, ...all, ...none];
   const highlightToggleId = `${type}-${element.target[0]}`;
-  const highlightLabel = `Highlight`;
 
   return (
     <Item>
       <ItemTitle>
         {element.target[0]}
         <HighlightToggleElement>
-          <HighlightToggle
-            toggleId={highlightToggleId}
-            type={type}
-            elementsToHighlight={[element]}
-            label={highlightLabel}
-          />
+          <HighlightToggle toggleId={highlightToggleId} elementsToHighlight={[element]} />
         </HighlightToggleElement>
       </ItemTitle>
       <Rules rules={rules} />
diff --git a/addons/a11y/src/components/Report/HighlightToggle.test.js b/addons/a11y/src/components/Report/HighlightToggle.test.js
deleted file mode 100644
index 9659445c01bb..000000000000
--- a/addons/a11y/src/components/Report/HighlightToggle.test.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Provider } from 'react-redux';
-import { ThemeProvider, themes, convert } from '@storybook/theming';
-import HighlightToggle from './HighlightToggle';
-import store from '../../redux-config';
-
-function ThemedHighlightToggle(props) {
-  return (
-    <ThemeProvider theme={convert(themes.normal)}>
-      <HighlightToggle {...props} />
-    </ThemeProvider>
-  );
-}
-
-describe('HighlightToggle component', () => {
-  test('should render', () => {
-    // given
-    const wrapper = mount(
-      <Provider store={store}>
-        <ThemedHighlightToggle />
-      </Provider>
-    );
-
-    // then
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  test('should match snapshot', () => {
-    // given
-    const wrapper = mount(
-      <Provider store={store}>
-        <ThemedHighlightToggle />
-      </Provider>
-    );
-
-    // then
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/addons/a11y/src/components/Report/HighlightToggle.test.tsx
new file mode 100644
index 000000000000..c9f3771d2ae3
--- /dev/null
+++ b/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { NodeResult } from 'axe-core';
+import HighlightToggle from './HighlightToggle';
+import { A11yContext } from '../A11yContext';
+
+const nodeResult = (target: string): NodeResult => ({
+  html: '',
+  target: [target],
+  any: [],
+  all: [],
+  none: [],
+});
+
+const defaultProviderValue = {
+  results: {
+    passes: [],
+    incomplete: [],
+    violations: [],
+  },
+  setResults: jest.fn(),
+  highlighted: [],
+  toggleHighlight: jest.fn(),
+  clearHighlights: jest.fn(),
+  tab: 0,
+  setTab: jest.fn(),
+};
+
+describe('<HighlightToggle />', () => {
+  it('should render', () => {
+    const { container } = render(<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should be checked when all targets are highlighted', () => {
+    const { getByRole } = render(
+      <A11yContext.Provider
+        value={{
+          ...defaultProviderValue,
+          highlighted: ['#root'],
+        }}
+      >
+        <HighlightToggle elementsToHighlight={[nodeResult('#root')]} />
+      </A11yContext.Provider>
+    );
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBeTruthy();
+  });
+
+  it('should be mixed when some targets are highlighted', () => {
+    const { getByRole } = render(
+      <A11yContext.Provider
+        value={{
+          ...defaultProviderValue,
+          highlighted: ['#root'],
+        }}
+      >
+        <HighlightToggle elementsToHighlight={[nodeResult('#root'), nodeResult('#root1')]} />
+      </A11yContext.Provider>
+    );
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.indeterminate).toBeTruthy();
+  });
+
+  describe('toggleHighlight', () => {
+    it.each`
+      highlighted  | elementsToHighlight    | expected
+      ${[]}        | ${['#root']}           | ${true}
+      ${['#root']} | ${['#root']}           | ${false}
+      ${['#root']} | ${['#root', '#root1']} | ${true}
+    `(
+      'should be triggerd with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
+      ({ highlighted, elementsToHighlight, expected }) => {
+        const { getByRole } = render(
+          <A11yContext.Provider
+            value={{
+              ...defaultProviderValue,
+              highlighted,
+            }}
+          >
+            <HighlightToggle elementsToHighlight={elementsToHighlight.map(nodeResult)} />
+          </A11yContext.Provider>
+        );
+        const checkbox = getByRole('checkbox') as HTMLInputElement;
+        fireEvent.click(checkbox);
+        expect(defaultProviderValue.toggleHighlight).toHaveBeenCalledWith(
+          elementsToHighlight,
+          expected
+        );
+      }
+    );
+  });
+});
diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx
index 2aa554641e39..7697e0bce891 100644
--- a/addons/a11y/src/components/Report/HighlightToggle.tsx
+++ b/addons/a11y/src/components/Report/HighlightToggle.tsx
@@ -1,28 +1,12 @@
-import { document } from 'global';
-import React, { Component, createRef } from 'react';
-import { connect } from 'react-redux';
-import { styled, themes, convert } from '@storybook/theming';
-import memoize from 'memoizerific';
+import React from 'react';
+import { styled } from '@storybook/theming';
 
 import { NodeResult } from 'axe-core';
-import { RuleType } from '../A11YPanel';
-import { addElement } from '../../redux-config';
-import { IFRAME } from '../../constants';
-
-export class HighlightedElementData {
-  originalOutline: string;
-
-  isHighlighted: boolean;
-}
+import { useA11yContext } from '../A11yContext';
 
 interface ToggleProps {
   elementsToHighlight: NodeResult[];
-  type: RuleType;
-  addElement?: (data: any) => void;
-  highlightedElementsMap?: Map<HTMLElement, HighlightedElementData>;
-  isToggledOn?: boolean;
   toggleId?: string;
-  indeterminate?: boolean;
 }
 
 enum CheckBoxStates {
@@ -35,38 +19,13 @@ const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
   cursor: disabled ? 'not-allowed' : 'pointer',
 }));
 
-const colorsByType = [
-  convert(themes.normal).color.negative, // VIOLATION,
-  convert(themes.normal).color.positive, // PASS,
-  convert(themes.normal).color.warning, // INCOMPLETION,
-];
-
-const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);
-
-function getElementBySelectorPath(elementPath: string): HTMLElement {
-  const iframe = getIframe();
-  if (iframe && iframe.contentDocument && elementPath) {
-    return iframe.contentDocument.querySelector(elementPath);
-  }
-  return null;
-}
-
-function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
-  // eslint-disable-next-line no-param-reassign
-  targetElement.style.outline = outlineStyle;
-}
-
 function areAllRequiredElementsHighlighted(
   elementsToHighlight: NodeResult[],
-  highlightedElementsMap: Map<HTMLElement, HighlightedElementData>
+  highlighted: string[]
 ): CheckBoxStates {
-  const highlightedCount = elementsToHighlight.filter(item => {
-    const targetElement = getElementBySelectorPath(item.target[0]);
-    return (
-      highlightedElementsMap.has(targetElement) &&
-      highlightedElementsMap.get(targetElement).isHighlighted
-    );
-  }).length;
+  const highlightedCount = elementsToHighlight.filter((item) =>
+    highlighted.includes(item.target[0])
+  ).length;
 
   // eslint-disable-next-line no-nested-ternary
   return highlightedCount === 0
@@ -76,113 +35,39 @@ function areAllRequiredElementsHighlighted(
     : CheckBoxStates.INDETERMINATE;
 }
 
-function mapDispatchToProps(dispatch: any) {
-  return {
-    addElement: (data: { element: HTMLElement; data: HighlightedElementData }) =>
-      dispatch(addElement(data)),
-  };
-}
-
-const mapStateToProps = (state: any, ownProps: any) => {
-  const checkBoxState = areAllRequiredElementsHighlighted(
-    ownProps.elementsToHighlight || [],
-    state.highlightedElementsMap
+const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight = [] }) => {
+  const { toggleHighlight, highlighted } = useA11yContext();
+  const checkBoxRef = React.useRef<HTMLInputElement>(null);
+  const [checkBoxState, setChecked] = React.useState(
+    areAllRequiredElementsHighlighted(elementsToHighlight, highlighted)
   );
-  return {
-    highlightedElementsMap: state.highlightedElementsMap,
-    isToggledOn: checkBoxState === CheckBoxStates.CHECKED,
-    indeterminate: checkBoxState === CheckBoxStates.INDETERMINATE,
-  };
-};
-
-class HighlightToggle extends Component<ToggleProps> {
-  static defaultProps: Partial<ToggleProps> = {
-    elementsToHighlight: [],
-  };
 
-  private checkBoxRef = createRef<HTMLInputElement>();
-
-  componentDidMount() {
-    const { elementsToHighlight, highlightedElementsMap } = this.props;
-    elementsToHighlight.forEach(element => {
-      const targetElement = getElementBySelectorPath(element.target[0]);
-      if (targetElement && !highlightedElementsMap.has(targetElement)) {
-        this.saveElementDataToMap(targetElement, false, targetElement.style.outline);
-      }
-    });
-  }
-
-  componentDidUpdate(prevProps: Readonly<ToggleProps>): void {
-    const { indeterminate } = this.props;
-    if (this.checkBoxRef.current) {
-      this.checkBoxRef.current.indeterminate = indeterminate;
-    }
-  }
-
-  onToggle = (): void => {
-    const { elementsToHighlight, highlightedElementsMap } = this.props;
-    elementsToHighlight.forEach(element => {
-      const targetElement = getElementBySelectorPath(element.target[0]);
-      if (!highlightedElementsMap.has(targetElement)) {
-        return;
-      }
-      const { originalOutline } = highlightedElementsMap.get(targetElement);
-      const { isHighlighted } = highlightedElementsMap.get(targetElement);
-      const { isToggledOn } = this.props;
-      if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
-        const addHighlight = !isToggledOn && !isHighlighted;
-        this.highlightRuleLocation(targetElement, addHighlight);
-        this.saveElementDataToMap(targetElement, addHighlight, originalOutline);
-      }
-    });
-  };
-
-  highlightRuleLocation(targetElement: HTMLElement, addHighlight: boolean): void {
-    const { highlightedElementsMap, type } = this.props;
-    if (!targetElement) {
-      return;
-    }
-
-    if (addHighlight) {
-      setElementOutlineStyle(targetElement, `${colorsByType[type]} dotted 1px`);
-      return;
+  React.useEffect(() => {
+    const newState = areAllRequiredElementsHighlighted(elementsToHighlight, highlighted);
+    if (checkBoxRef.current) {
+      checkBoxRef.current.indeterminate = newState === CheckBoxStates.INDETERMINATE;
     }
+    setChecked(newState);
+  }, [elementsToHighlight, highlighted]);
 
-    if (highlightedElementsMap.has(targetElement)) {
-      setElementOutlineStyle(
-        targetElement,
-        highlightedElementsMap.get(targetElement).originalOutline
-      );
-    }
-  }
-
-  saveElementDataToMap(
-    targetElement: HTMLElement,
-    isHighlighted: boolean,
-    originalOutline: string
-  ): void {
-    const { addElement: localAddElement } = this.props;
-    const data: HighlightedElementData = new HighlightedElementData();
-    data.isHighlighted = isHighlighted;
-    data.originalOutline = originalOutline;
-    const payload = { element: targetElement, highlightedElementData: data };
-    localAddElement(payload);
-  }
-
-  render() {
-    const { toggleId, elementsToHighlight, isToggledOn } = this.props;
-    return (
-      <Checkbox
-        ref={this.checkBoxRef}
-        id={toggleId}
-        type="checkbox"
-        aria-label="Highlight result"
-        disabled={!elementsToHighlight.length}
-        onChange={this.onToggle}
-        checked={isToggledOn}
-      />
+  const handleToggle = React.useCallback((): void => {
+    toggleHighlight(
+      elementsToHighlight.map((e) => e.target[0]),
+      checkBoxState !== CheckBoxStates.CHECKED
     );
-  }
-}
+  }, [elementsToHighlight, checkBoxState, toggleHighlight]);
+
+  return (
+    <Checkbox
+      ref={checkBoxRef}
+      id={toggleId}
+      type="checkbox"
+      aria-label="Highlight result"
+      disabled={!elementsToHighlight.length}
+      onChange={handleToggle}
+      checked={checkBoxState === CheckBoxStates.CHECKED}
+    />
+  );
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle);
+export default HighlightToggle;
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 2ece16f74a15..c33058b4b445 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -81,11 +81,7 @@ export const Item = (props: ItemProps) => {
           {item.description}
         </HeaderBar>
         <HighlightToggleElement>
-          <HighlightToggle
-            toggleId={highlightToggleId}
-            type={type}
-            elementsToHighlight={item ? item.nodes : null}
-          />
+          <HighlightToggle toggleId={highlightToggleId} elementsToHighlight={item.nodes} />
         </HighlightToggleElement>
       </Wrapper>
       {open ? (
diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index 48fe2dd924aa..25940ff9cae5 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@@ -1,17 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-import { Badge, Icons } from '@storybook/components';
+import { Badge } from '@storybook/components';
 import { CheckResult } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
-import { RuleType } from '../A11YPanel';
-
-const impactColors = {
-  minor: '#f1c40f',
-  moderate: '#e67e22',
-  serious: '#e74c3c',
-  critical: '#c0392b',
-  success: '#2ecc71',
-};
 
 const List = styled.div({
   display: 'flex',
@@ -22,7 +13,7 @@ const List = styled.div({
   fontWeight: '400',
 } as any);
 
-const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
+const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 407;
   return {
     flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
@@ -31,31 +22,20 @@ const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
   };
 });
 
-const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
+const StyledBadge = styled(Badge)({
   padding: '2px 8px',
   marginBottom: 3,
   minWidth: 65,
   maxWidth: 'fit-content',
   width: '100%',
   textAlign: 'center',
-}));
+});
 
 const Message = styled.div({
   paddingLeft: 6,
   paddingRight: 23,
 });
 
-const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: passes ? impactColors.success : (impactColors as any)[impact],
-  '& > svg': {
-    height: 16,
-    width: 16,
-  },
-}));
-
 export enum ImpactValue {
   MINOR = 'minor',
   MODERATE = 'moderate',
@@ -68,10 +48,7 @@ interface RuleProps {
 }
 
 const formatSeverityText = (severity: string) => {
-  return severity
-    .charAt(0)
-    .toUpperCase()
-    .concat(severity.slice(1));
+  return severity.charAt(0).toUpperCase().concat(severity.slice(1));
 };
 
 const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
@@ -94,7 +71,7 @@ const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
   }
   return (
     <SizeMe refreshMode="debounce">
-      {({ size }: { size: any }) => (
+      {({ size }: { size: { width: number; height: number } }) => (
         <Item elementWidth={size.width}>
           <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
           <Message>{rule.message}</Message>
diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx
index e11245f55620..1c26cd302f40 100644
--- a/addons/a11y/src/components/Report/Tags.tsx
+++ b/addons/a11y/src/components/Report/Tags.tsx
@@ -23,7 +23,7 @@ interface TagsProps {
 export const Tags: FunctionComponent<TagsProps> = ({ tags }) => {
   return (
     <Wrapper>
-      {tags.map(tag => (
+      {tags.map((tag) => (
         <Item key={tag}>{tag}</Item>
       ))}
     </Wrapper>
diff --git a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
deleted file mode 100644
index e0c37bf518cd..000000000000
--- a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
+++ /dev/null
@@ -1,355 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HighlightToggle component should match snapshot 1`] = `
-.emotion-0 {
-  cursor: not-allowed;
-}
-
-<Provider
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(observable): [Function],
-    }
-  }
->
-  <ThemedHighlightToggle>
-    <ThemeProvider
-      theme={
-        Object {
-          "addonActionsTheme": Object {
-            "ARROW_ANIMATION_DURATION": "0",
-            "ARROW_COLOR": "rgba(0,0,0,0.3)",
-            "ARROW_FONT_SIZE": 8,
-            "ARROW_MARGIN_RIGHT": 4,
-            "BASE_BACKGROUND_COLOR": "transparent",
-            "BASE_COLOR": "#333333",
-            "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-            "BASE_FONT_SIZE": 13,
-            "BASE_LINE_HEIGHT": "18px",
-            "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-            "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-            "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-            "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-            "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-            "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-            "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-            "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-            "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-            "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-            "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-            "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-            "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-            "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-            "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-            "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-            "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-            "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-            "TABLE_BORDER_COLOR": "#aaa",
-            "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-            "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-            "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-            "TABLE_TH_BACKGROUND_COLOR": "#eee",
-            "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-            "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-            "TREENODE_FONT_SIZE": 13,
-            "TREENODE_LINE_HEIGHT": "18px",
-            "TREENODE_PADDING_LEFT": 12,
-          },
-          "animation": Object {
-            "float": Object {
-              "anim": 1,
-              "name": "animation-6tolu8",
-              "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-              "toString": [Function],
-            },
-            "glow": Object {
-              "anim": 1,
-              "name": "animation-r0iffl",
-              "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-              "toString": [Function],
-            },
-            "hoverable": Object {
-              "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-              "name": "1o7rzh8-hoverable",
-              "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-              "toString": [Function],
-            },
-            "inlineGlow": Object {
-              "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-              "name": "x4tfcc-inlineGlow",
-              "next": Object {
-                "name": "animation-r0iffl",
-                "next": undefined,
-                "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-              },
-              "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-              "toString": [Function],
-            },
-            "jiggle": Object {
-              "anim": 1,
-              "name": "animation-ynpq7w",
-              "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-              "toString": [Function],
-            },
-            "rotate360": Object {
-              "anim": 1,
-              "name": "animation-u07e3c",
-              "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-              "toString": [Function],
-            },
-          },
-          "appBorderColor": "rgba(0,0,0,.1)",
-          "appBorderRadius": 4,
-          "background": Object {
-            "app": "#F6F9FC",
-            "bar": "#FFFFFF",
-            "content": "#FFFFFF",
-            "critical": "#FF4400",
-            "gridCellSize": 10,
-            "hoverable": "rgba(0,0,0,.05)",
-            "negative": "#FEDED2",
-            "positive": "#E1FFD4",
-            "warning": "#FFF5CF",
-          },
-          "barBg": "#FFFFFF",
-          "barSelectedColor": "#1EA7FD",
-          "barTextColor": "#999999",
-          "base": "light",
-          "brand": Object {
-            "image": undefined,
-            "title": undefined,
-            "url": undefined,
-          },
-          "code": Object {
-            "language-json .token.boolean": Object {
-              "color": "#0000ff",
-            },
-            "language-json .token.number": Object {
-              "color": "#0000ff",
-            },
-            "language-json .token.property": Object {
-              "color": "#2B91AF",
-            },
-            "namespace": Object {
-              "opacity": 0.7,
-            },
-            "token": Object {
-              "&.atrule": Object {
-                "color": "#0000ff",
-              },
-              "&.attr-name": Object {
-                "color": "#ff0000",
-              },
-              "&.attr-value": Object {
-                "color": "#0000ff",
-              },
-              "&.bold": Object {
-                "fontWeight": "bold",
-              },
-              "&.boolean": Object {
-                "color": "#36acaa",
-              },
-              "&.cdata": Object {
-                "color": "#008000",
-                "fontStyle": "italic",
-              },
-              "&.class-name": Object {
-                "color": "#2B91AF",
-              },
-              "&.comment": Object {
-                "color": "#008000",
-                "fontStyle": "italic",
-              },
-              "&.constant": Object {
-                "color": "#36acaa",
-              },
-              "&.deleted": Object {
-                "color": "#9a050f",
-              },
-              "&.directive.tag .tag": Object {
-                "background": "#ffff00",
-                "color": "#393A34",
-              },
-              "&.doctype": Object {
-                "color": "#008000",
-                "fontStyle": "italic",
-              },
-              "&.entity": Object {
-                "color": "#ff0000",
-              },
-              "&.function": Object {
-                "color": "#393A34",
-              },
-              "&.important": Object {
-                "fontWeight": "bold",
-              },
-              "&.inserted": Object {
-                "color": "#36acaa",
-              },
-              "&.italic": Object {
-                "fontStyle": "italic",
-              },
-              "&.keyword": Object {
-                "color": "#0000ff",
-              },
-              "&.number": Object {
-                "color": "#36acaa",
-              },
-              "&.operator": Object {
-                "color": "#393A34",
-              },
-              "&.prolog": Object {
-                "color": "#008000",
-                "fontStyle": "italic",
-              },
-              "&.property": Object {
-                "color": "#ff0000",
-              },
-              "&.punctuation": Object {
-                "color": "#393A34",
-              },
-              "&.regex": Object {
-                "color": "#ff0000",
-              },
-              "&.selector": Object {
-                "color": "#800000",
-              },
-              "&.string": Object {
-                "color": "#A31515",
-              },
-              "&.symbol": Object {
-                "color": "#36acaa",
-              },
-              "&.tag": Object {
-                "color": "#800000",
-              },
-              "&.url": Object {
-                "color": "#36acaa",
-              },
-              "&.variable": Object {
-                "color": "#36acaa",
-              },
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-            },
-          },
-          "color": Object {
-            "ancillary": "#22a699",
-            "border": "rgba(0,0,0,.1)",
-            "critical": "#FFFFFF",
-            "dark": "#666666",
-            "darker": "#444444",
-            "darkest": "#333333",
-            "defaultText": "#333333",
-            "gold": "#FFAE00",
-            "green": "#66BF3C",
-            "inverseText": "#FFFFFF",
-            "light": "#F3F3F3",
-            "lighter": "#F8F8F8",
-            "lightest": "#FFFFFF",
-            "medium": "#DDDDDD",
-            "mediumdark": "#999999",
-            "mediumlight": "#EEEEEE",
-            "negative": "#FF4400",
-            "orange": "#FC521F",
-            "positive": "#66BF3C",
-            "primary": "#FF4785",
-            "purple": "#6F2CAC",
-            "seafoam": "#37D5D3",
-            "secondary": "#1EA7FD",
-            "tertiary": "#FAFBFC",
-            "ultraviolet": "#2A0481",
-            "warning": "#E69D00",
-          },
-          "easing": Object {
-            "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-          },
-          "input": Object {
-            "background": "#FFFFFF",
-            "border": "rgba(0,0,0,.1)",
-            "borderRadius": 4,
-            "color": "#333333",
-          },
-          "layoutMargin": 10,
-          "typography": Object {
-            "fonts": Object {
-              "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-              "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-            },
-            "size": Object {
-              "code": 90,
-              "l1": 32,
-              "l2": 40,
-              "l3": 48,
-              "m1": 20,
-              "m2": 24,
-              "m3": 28,
-              "s1": 12,
-              "s2": 14,
-              "s3": 16,
-            },
-            "weight": Object {
-              "black": 900,
-              "bold": 700,
-              "regular": 400,
-            },
-          },
-        }
-      }
-    >
-      <Connect(HighlightToggle)>
-        <HighlightToggle
-          addElement={[Function]}
-          elementsToHighlight={Array []}
-          highlightedElementsMap={Map {}}
-          indeterminate={false}
-          isToggledOn={false}
-        >
-          <Styled(input)
-            aria-label="Highlight result"
-            checked={false}
-            disabled={true}
-            onChange={[Function]}
-            type="checkbox"
-          >
-            <input
-              aria-label="Highlight result"
-              checked={false}
-              className="emotion-0"
-              disabled={true}
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </Styled(input)>
-        </HighlightToggle>
-      </Connect(HighlightToggle)>
-    </ThemeProvider>
-  </ThemedHighlightToggle>
-</Provider>
-`;
diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx
index 62f080337eb3..849c9f7a4f84 100644
--- a/addons/a11y/src/components/Report/index.tsx
+++ b/addons/a11y/src/components/Report/index.tsx
@@ -13,7 +13,7 @@ export interface ReportProps {
 export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
   <Fragment>
     {items && items.length ? (
-      items.map(item => <Item item={item} key={`${type}:${item.id}`} type={type} />)
+      items.map((item) => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
       <Placeholder key="placeholder">{empty}</Placeholder>
     )}
diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
index 26b6febaa040..acdc9c80e93a 100644
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@@ -1,11 +1,11 @@
-import React, { Component, SyntheticEvent } from 'react';
+import * as React from 'react';
 
-import { styled, themes } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 import { NodeResult, Result } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
-import store, { clearElements } from '../redux-config';
 import HighlightToggle from './Report/HighlightToggle';
 import { RuleType } from './A11YPanel';
+import { useA11yContext } from './A11yContext';
 
 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
 
@@ -23,7 +23,7 @@ const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   color: theme.color.dark,
 }));
 
-const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => {
+const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 450;
   return {
     cursor: 'pointer',
@@ -47,7 +47,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
   };
 });
 
-const Item = styled.button(
+const Item = styled.button<{ active?: boolean }>(
   ({ theme }) => ({
     textDecoration: 'none',
     padding: '10px 15px',
@@ -66,7 +66,7 @@ const Item = styled.button(
       borderBottom: `3px solid ${theme.color.secondary}`,
     },
   }),
-  ({ active, theme }: any) =>
+  ({ active, theme }) =>
     active
       ? {
           opacity: 1,
@@ -94,68 +94,55 @@ interface TabsProps {
   }[];
 }
 
-interface TabsState {
-  active: number;
-}
-
 function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
-  return items.reduce((acc, item) => acc.concat(item.nodes), []);
+  return items.reduce((acc, item) => acc.concat(item.nodes), [] as NodeResult[]);
 }
 
-export class Tabs extends Component<TabsProps, TabsState> {
-  state: TabsState = {
-    active: 0,
-  };
+export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+  const { tab: activeTab, setTab } = useA11yContext();
 
-  onToggle = (event: SyntheticEvent) => {
-    this.setState({
-      active: parseInt(event.currentTarget.getAttribute('data-index'), 10),
-    });
-    // removes all elements from the redux map in store from the previous panel
-    store.dispatch(clearElements());
-  };
-
-  render() {
-    const { tabs } = this.props;
-    const { active } = this.state;
-    const highlightToggleId = `${tabs[active].type}-global-checkbox`;
-    const highlightLabel = `Highlight results`;
-    return (
-      <SizeMe refreshMode="debounce">
-        {({ size }: { size: any }) => (
-          <Container>
-            <List>
-              <TabsWrapper>
-                {tabs.map((tab, index) => (
-                  <Item
-                    /* eslint-disable-next-line react/no-array-index-key */
-                    key={index}
-                    data-index={index}
-                    active={active === index}
-                    onClick={this.onToggle}
-                  >
-                    {tab.label}
-                  </Item>
-                ))}
-              </TabsWrapper>
-            </List>
-            {tabs[active].items.length > 0 ? (
-              <GlobalToggle elementWidth={size.width}>
-                <HighlightToggleLabel htmlFor={highlightToggleId}>
-                  {highlightLabel}
-                </HighlightToggleLabel>
-                <HighlightToggle
-                  toggleId={highlightToggleId}
-                  type={tabs[active].type}
-                  elementsToHighlight={retrieveAllNodesFromResults(tabs[active].items)}
-                  label={highlightLabel}
-                />
-              </GlobalToggle>
-            ) : null}
-            {tabs[active].panel}
-          </Container>
-        )}
-      </SizeMe>
-    );
-  }
-}
+  const handleToggle = React.useCallback(
+    (event: React.SyntheticEvent) => {
+      setTab(parseInt(event.currentTarget.getAttribute('data-index') || '', 10));
+    },
+    [setTab]
+  );
+
+  const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
+  const highlightLabel = `Highlight results`;
+  return (
+    <SizeMe refreshMode="debounce">
+      {({ size }: { size: any }) => (
+        <Container>
+          <List>
+            <TabsWrapper>
+              {tabs.map((tab, index) => (
+                <Item
+                  /* eslint-disable-next-line react/no-array-index-key */
+                  key={index}
+                  data-index={index}
+                  active={activeTab === index}
+                  onClick={handleToggle}
+                >
+                  {tab.label}
+                </Item>
+              ))}
+            </TabsWrapper>
+          </List>
+          {tabs[activeTab].items.length > 0 ? (
+            <GlobalToggle elementWidth={size.width}>
+              <HighlightToggleLabel htmlFor={highlightToggleId}>
+                {highlightLabel}
+              </HighlightToggleLabel>
+              <HighlightToggle
+                toggleId={highlightToggleId}
+                elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
+              />
+            </GlobalToggle>
+          ) : null}
+          {tabs[activeTab].panel}
+        </Container>
+      )}
+    </SizeMe>
+  );
+};
diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
deleted file mode 100644
index db6f667c93a6..000000000000
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ /dev/null
@@ -1,1126 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`A11YPanel should render loader when it's running 1`] = `
-@keyframes animation-0 {
-  from {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.emotion-2 {
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  -webkit-animation: animation-0 1s linear infinite;
-  animation: animation-0 1s linear infinite;
-}
-
-.emotion-1 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  -webkit-animation: animation-0 1s linear infinite;
-  animation: animation-0 1s linear infinite;
-}
-
-.emotion-0 {
-  fill: currentColor;
-}
-
-<Loader>
-  <Component
-    className="emotion-4"
-  >
-    <div
-      className="emotion-4"
-    >
-      <Styled(Icons)
-        icon="sync"
-        inline={true}
-        status="running"
-      >
-        <Icons
-          className="emotion-2"
-          icon="sync"
-          inline={true}
-          status="running"
-        >
-          <Svg
-            className="emotion-2"
-            inline={true}
-            status="running"
-            viewBox="0 0 1024 1024"
-          >
-            <svg
-              className="emotion-1"
-              viewBox="0 0 1024 1024"
-            >
-              <Styled(path)
-                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"
-              >
-                <path
-                  className="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"
-                />
-              </Styled(path)>
-            </svg>
-          </Svg>
-        </Icons>
-      </Styled(Icons)>
-       Please wait while the accessibility scan is running ...
-    </div>
-  </Component>
-</Loader>
-`;
-
-exports[`A11YPanel should render report 1`] = `
-.emotion-0 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-}
-
-.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-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  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;
-}
-
-<A11YPanel
-  active={true}
-  api={
-    Object {
-      "emit": [MockFunction],
-      "off": [MockFunction],
-      "on": [MockFunction] {
-        "calls": Array [
-          Array [
-            "storyRendered",
-            [Function],
-          ],
-          Array [
-            "storybook/a11y/result",
-            [Function],
-          ],
-          Array [
-            "storybook/a11y/error",
-            [Function],
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-    }
-  }
->
-  <Provider
-    store={
-      Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(observable): [Function],
-      }
-    }
-  >
-    <ScrollArea
-      horizontal={true}
-      vertical={true}
-    >
-      <ForwardRef(render)
-        styles={[Function]}
-      >
-        <InnerGlobal
-          cache={
-            Object {
-              "insert": [Function],
-              "inserted": Object {
-                "0": true,
-                "11xgcgt": true,
-                "1551xjo": true,
-                "15paq49": true,
-                "1977chw": true,
-                "19mcg9j": true,
-                "1imo1gr": true,
-                "1kbt4a0": true,
-                "1l7fvsg": true,
-                "1vwgrhn": true,
-                "4ryd4s": true,
-                "6hqipu": true,
-                "6z0ulf": true,
-                "animation-u07e3c": true,
-                "aq4p19": true,
-                "f68qle": true,
-                "fg630j": true,
-                "iau1th": true,
-                "jb2puo": true,
-                "kqzqgg": true,
-                "l0u0ek": true,
-                "qacwg0": true,
-                "qb28": true,
-                "snh8f7": true,
-                "tkevr6": true,
-                "vdhlfv": true,
-              },
-              "key": "css",
-              "nonce": undefined,
-              "registered": Object {
-                "css-1977chw": "height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;transition:transform 0.1s ease-in-out;align-self:center;display:inline-flex;",
-                "css-1l7fvsg": "height:12px;width:12px;margin-right:4px;",
-                "emotion-0": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;",
-                "css-jb2puo": "height:12px;width:12px;margin-right:4px;animation:animation-u07e3c 1s linear infinite;;",
-                "css-tkevr6": "display:flex;align-items:center;justify-content:center;height:100%;",
-              },
-              "sheet": StyleSheet {
-                "before": null,
-                "container": <head>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                  </style>
-                  <style
-                    data-emotion="css-global"
-                  >
-                    
-                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-0{overflow-y:auto;height:100%;overflow-x:auto;width:100%;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .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;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-tkevr6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-kqzqgg{fill:currentColor;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-snh8f7{width:100%;position:relative;min-height:100%;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-15paq49{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);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;white-space:nowrap;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1551xjo{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1551xjo:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qacwg0{color:#FF4400;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qb28{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qb28:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-fg630j{color:#66BF3C;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-iau1th{color:#E69D00;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1kbt4a0{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-vdhlfv{cursor:not-allowed;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-4ryd4s{padding:10px;padding-left:7px;background:none;color:inherit;text-align:left;cursor:pointer;border-left:3px solid transparent;width:100%;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-4ryd4s:focus{outline:0 none;border-left:3px solid #1EA7FD;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1977chw{height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;-webkit-transition:-webkit-transform 0.1s ease-in-out;-webkit-transition:transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1vwgrhn{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:block;height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;-webkit-transition:-webkit-transform 0.1s ease-in-out;-webkit-transition:transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-19mcg9j input{margin:0;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1l7fvsg{height:12px;width:12px;margin-right:4px;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;}
-                  </style>
-                  <style
-                    id="erd_scroll_detection_scrollbar_style"
-                  >
-                    /* Created by the element-resize-detector library. */
-.erd_scroll_detection_container &gt; div::-webkit-scrollbar { display: none; }
-
-.erd_scroll_detection_container_animation_active { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: erd_scroll_detection_container_animation; animation-name: erd_scroll_detection_container_animation; }
-@-webkit-keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
-@keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
-                  </style>
-                </head>,
-                "ctr": 35,
-                "isSpeedy": false,
-                "key": "css",
-                "nonce": undefined,
-                "tags": Array [
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-0{overflow-y:auto;height:100%;overflow-x:auto;width:100%;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .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;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-3:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-tkevr6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-kqzqgg{fill:currentColor;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-snh8f7{width:100%;position:relative;min-height:100%;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-15paq49{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);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;white-space:nowrap;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1551xjo{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1551xjo:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qacwg0{color:#FF4400;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qb28{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-qb28:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-fg630j{color:#66BF3C;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-iau1th{color:#E69D00;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1kbt4a0{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-vdhlfv{cursor:not-allowed;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-4ryd4s{padding:10px;padding-left:7px;background:none;color:inherit;text-align:left;cursor:pointer;border-left:3px solid transparent;width:100%;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-4ryd4s:focus{outline:0 none;border-left:3px solid #1EA7FD;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1977chw{height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;-webkit-transition:-webkit-transform 0.1s ease-in-out;-webkit-transition:transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1vwgrhn{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:block;height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;-webkit-transition:-webkit-transform 0.1s ease-in-out;-webkit-transition:transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-19mcg9j input{margin:0;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-1l7fvsg{height:12px;width:12px;margin-right:4px;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;}
-                  </style>,
-                ],
-              },
-            }
-          }
-          serialized={
-            Object {
-              "map": undefined,
-              "name": "nh5djz",
-              "next": undefined,
-              "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-              "toString": [Function],
-            }
-          }
-        />
-      </ForwardRef(render)>
-      <Styled(Component)
-        horizontal={true}
-        vertical={true}
-      >
-        <Component
-          className="emotion-0"
-          horizontal={true}
-          vertical={true}
-        >
-          <l
-            className="emotion-0"
-            scrollableNodeProps={
-              Object {
-                "tabIndex": 0,
-              }
-            }
-          >
-            <div
-              className="emotion-0"
-              data-simplebar={true}
-            >
-              <div
-                className="simplebar-wrapper"
-              >
-                <div
-                  className="simplebar-height-auto-observer-wrapper"
-                >
-                  <div
-                    className="simplebar-height-auto-observer"
-                  />
-                </div>
-                <div
-                  className="simplebar-mask"
-                >
-                  <div
-                    className="simplebar-offset"
-                  >
-                    <div
-                      className="simplebar-content-wrapper"
-                      tabIndex={0}
-                    >
-                      <div
-                        className="simplebar-content"
-                      >
-                        <Tabs
-                          key="tabs"
-                          tabs={
-                            Array [
-                              Object {
-                                "items": Array [],
-                                "label": <ForwardRef(render)>
-                                  0
-                                   Violations
-                                </ForwardRef(render)>,
-                                "panel": <Report
-                                  empty="No accessibility violations found."
-                                  items={Array []}
-                                  type={0}
-                                />,
-                                "type": 0,
-                              },
-                              Object {
-                                "items": Array [],
-                                "label": <ForwardRef(render)>
-                                  0
-                                   Passes
-                                </ForwardRef(render)>,
-                                "panel": <Report
-                                  empty="No accessibility checks passed."
-                                  items={Array []}
-                                  type={1}
-                                />,
-                                "type": 1,
-                              },
-                              Object {
-                                "items": Array [],
-                                "label": <ForwardRef(render)>
-                                  0
-                                   Incomplete
-                                </ForwardRef(render)>,
-                                "panel": <Report
-                                  empty="No accessibility checks incomplete."
-                                  items={Array []}
-                                  type={2}
-                                />,
-                                "type": 2,
-                              },
-                            ]
-                          }
-                        >
-                          <SizeMe
-                            refreshMode="debounce"
-                          >
-                            <SizeMe(Component)
-                              onSize={[Function]}
-                            >
-                              <SizeMeRenderer(Component)
-                                disablePlaceholder={false}
-                                explicitRef={[Function]}
-                                onSize={[Function]}
-                                size={
-                                  Object {
-                                    "height": undefined,
-                                    "position": undefined,
-                                    "width": undefined,
-                                  }
-                                }
-                              >
-                                <SizeMeReferenceWrapper>
-                                  <SizeMePlaceholder>
-                                    <div
-                                      style={
-                                        Object {
-                                          "height": "100%",
-                                          "width": "100%",
-                                        }
-                                      }
-                                    />
-                                  </SizeMePlaceholder>
-                                </SizeMeReferenceWrapper>
-                              </SizeMeRenderer(Component)>
-                            </SizeMe(Component)>
-                          </SizeMe>
-                        </Tabs>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="simplebar-placeholder"
-                />
-              </div>
-              <div
-                className="simplebar-track simplebar-horizontal"
-              >
-                <div
-                  className="simplebar-scrollbar"
-                />
-              </div>
-              <div
-                className="simplebar-track simplebar-vertical"
-              >
-                <div
-                  className="simplebar-scrollbar"
-                />
-              </div>
-            </div>
-          </l>
-        </Component>
-      </Styled(Component)>
-    </ScrollArea>
-    <ActionBar
-      actionItems={
-        Array [
-          Object {
-            "onClick": [Function],
-            "title": "Rerun tests",
-          },
-        ]
-      }
-      key="actionbar"
-    >
-      <Styled(div)>
-        <div
-          className="emotion-4"
-        >
-          <ActionButton
-            key="0"
-            onClick={[Function]}
-          >
-            <button
-              className="emotion-3"
-              onClick={[Function]}
-            >
-              Rerun tests
-            </button>
-          </ActionButton>
-        </div>
-      </Styled(div)>
-    </ActionBar>
-  </Provider>
-</A11YPanel>
-`;
diff --git a/addons/a11y/src/constants.ts b/addons/a11y/src/constants.ts
index efabac7a268b..3c96945b4dfe 100755
--- a/addons/a11y/src/constants.ts
+++ b/addons/a11y/src/constants.ts
@@ -1,11 +1,12 @@
 export const ADDON_ID = 'storybook/a11y';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `a11y`;
-export const IFRAME = 'iframe';
-export const ADD_ELEMENT = 'ADD_ELEMENT';
-export const CLEAR_ELEMENTS = 'CLEAR_ELEMENTS';
+export const HIGHLIGHT_STYLE_ID = 'a11yHighlight';
 const RESULT = `${ADDON_ID}/result`;
 const REQUEST = `${ADDON_ID}/request`;
+const RUNNING = `${ADDON_ID}/running`;
 const ERROR = `${ADDON_ID}/error`;
+const MANUAL = `${ADDON_ID}/manual`;
+const HIGHLIGHT = `${ADDON_ID}/highlight`;
 
-export const EVENTS = { RESULT, REQUEST, ERROR };
+export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL, HIGHLIGHT };
diff --git a/addons/a11y/src/highlight.ts b/addons/a11y/src/highlight.ts
new file mode 100644
index 000000000000..1d218362af2e
--- /dev/null
+++ b/addons/a11y/src/highlight.ts
@@ -0,0 +1,12 @@
+export const higlightStyle = (color: string) => `
+  outline: 2px dashed ${color};
+  outline-offset: 2px;
+  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
+}
+`;
+
+export const highlightObject = (color: string) => ({
+  outline: `2px dashed ${color}`,
+  outlineOffset: 2,
+  boxShadow: '0 0 0 6px rgba(255,255,255,0.6),',
+});
diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts
index a7f53ec29a73..4728111bfae3 100644
--- a/addons/a11y/src/index.ts
+++ b/addons/a11y/src/index.ts
@@ -1,101 +1,25 @@
-import { document } from 'global';
-import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
+import { DecoratorFunction } from '@storybook/addons';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
-import addons, { makeDecorator } from '@storybook/addons';
-import { EVENTS, PARAM_KEY } from './constants';
-
-let progress = Promise.resolve();
-interface Setup {
-  element?: ElementContext;
-  config: Spec;
-  options: RunOptions;
-}
-let setup: Setup = { element: null, config: {}, options: {} };
-
-const getElement = () => {
-  const storyRoot = document.getElementById('story-root');
-
-  if (storyRoot) {
-    return storyRoot.children;
-  }
-  return document.getElementById('root');
-};
-
-const report = (input: AxeResults) => addons.getChannel().emit(EVENTS.RESULT, input);
-
-const run = (element: ElementContext, config: Spec, options: RunOptions) => {
-  progress = progress.then(() => {
-    axe.reset();
-    if (config) {
-      axe.configure(config);
-    }
-    return axe
-      .run(
-        element || getElement(),
-        options ||
-          ({
-            restoreScroll: true,
-          } as RunOptions) // cast to RunOptions is necessary because axe types are not up to date
-      )
-      .then(report)
-      .catch(error => addons.getChannel().emit(EVENTS.ERROR, String(error)));
-  });
-};
+export { PARAM_KEY } from './constants';
+export * from './highlight';
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
 
-let storedDefaultSetup: Setup | null = null;
-
-export const withA11y = makeDecorator({
-  name: 'withA11Y',
-  parameterName: PARAM_KEY,
-  wrapper: (getStory, context, { parameters }) => {
-    if (parameters) {
-      if (storedDefaultSetup === null) {
-        storedDefaultSetup = { ...setup };
-      }
-      Object.assign(setup, parameters as Setup);
-    } else if (storedDefaultSetup !== null) {
-      Object.assign(setup, storedDefaultSetup);
-      storedDefaultSetup = null;
-    }
-    addons.getChannel().on(EVENTS.REQUEST, () => run(setup.element, setup.config, setup.options));
-
-    return getStory(context);
-  },
-});
-
-// TODO: REMOVE at v6.0.0
-export const withA11Y = deprecate(
-  // @ts-ignore
-  (...args: any[]) => withA11y(...args),
-  'withA11Y has been renamed withA11y'
-);
-
-// TODO: REMOVE at v6.0.0
-export const checkA11y = deprecate(
-  // @ts-ignore
-  (...args: any[]) => withA11y(...args),
-  'checkA11y has been renamed withA11y'
-);
-
-// TODO: REMOVE at v6.0.0
-export const configureA11y = deprecate(
-  (config: any) => {
-    setup = config;
+export const withA11y: DecoratorFunction = deprecate(
+  (storyFn, storyContext) => {
+    return storyFn(storyContext);
   },
   dedent`
-    configureA11y is deprecated, please configure addon-a11y using the addParameter api:
-    
+    withA11y(options) is deprecated, please configure addon-a11y using the addParameter api:
+
     addParameters({
-      a11y: {
-        // ... axe options
-        element: '#root', // optional selector which element to inspect
-      },
+      a11y: options,
     });
+
+    More at: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-witha11y-decorator
   `
 );
diff --git a/addons/a11y/src/params.ts b/addons/a11y/src/params.ts
new file mode 100644
index 000000000000..fb439ae3f342
--- /dev/null
+++ b/addons/a11y/src/params.ts
@@ -0,0 +1,14 @@
+import { ElementContext, Spec, RunOptions } from 'axe-core';
+
+export interface Setup {
+  element?: ElementContext;
+  config: Spec;
+  options: RunOptions;
+}
+
+export interface A11yParameters {
+  element?: ElementContext;
+  config?: Spec;
+  options?: RunOptions;
+  manual?: boolean;
+}
diff --git a/addons/a11y/src/preset/addDecorator.ts b/addons/a11y/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..be3b27b26f7a
--- /dev/null
+++ b/addons/a11y/src/preset/addDecorator.ts
@@ -0,0 +1,3 @@
+import { withA11y } from '../index';
+
+export const decorators = [withA11y];
diff --git a/addons/a11y/src/preset/index.ts b/addons/a11y/src/preset/index.ts
new file mode 100644
index 000000000000..c02c6e282901
--- /dev/null
+++ b/addons/a11y/src/preset/index.ts
@@ -0,0 +1,7 @@
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = []) {
+  return [...entry, require.resolve('../a11yRunner'), require.resolve('../a11yHighlight')];
+}
diff --git a/addons/a11y/src/redux-config.tsx b/addons/a11y/src/redux-config.tsx
deleted file mode 100644
index 929f2d6aa055..000000000000
--- a/addons/a11y/src/redux-config.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createStore } from 'redux';
-import { ADD_ELEMENT, CLEAR_ELEMENTS } from './constants';
-import { HighlightedElementData } from './components/Report/HighlightToggle';
-
-// actions
-
-// add element is passed a HighlightedElementData object as the payload
-export function addElement(payload: { element: HTMLElement; data: HighlightedElementData }) {
-  return { type: ADD_ELEMENT, payload };
-}
-
-// clear elements is a function to remove elements from the map and reset elements to their original state
-export function clearElements() {
-  return { type: CLEAR_ELEMENTS };
-}
-
-// reducers
-const initialState = {
-  highlightedElementsMap: new Map(),
-};
-
-function rootReducer(state = initialState, action: any) {
-  if (action.type === ADD_ELEMENT) {
-    return {
-      ...state,
-      highlightedElementsMap: state.highlightedElementsMap.set(
-        action.payload.element,
-        action.payload.highlightedElementData
-      ),
-    };
-  }
-  if (action.type === CLEAR_ELEMENTS) {
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of Array.from(state.highlightedElementsMap.keys())) {
-      key.style.outline = state.highlightedElementsMap.get(key).originalOutline;
-      state.highlightedElementsMap.delete(key);
-    }
-  }
-  return state;
-}
-
-// store
-const store = createStore(rootReducer);
-export default store;
diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx
index 9b360ec97d4c..b5f285d1d625 100644
--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
@@ -1,88 +1,11 @@
-import React, { Fragment, FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-
+import React from 'react';
 import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { ColorBlindness } from './components/ColorBlindness';
 import { A11YPanel } from './components/A11YPanel';
+import { A11yContextProvider } from './components/A11yContext';
 
-const Hidden = styled.div(() => ({
-  '&, & svg': {
-    position: 'absolute',
-    width: 0,
-    height: 0,
-  },
-}));
-
-const PreviewWrapper: FunctionComponent<{}> = p => (
-  <Fragment>
-    {p.children}
-    <Hidden>
-      <svg key="svg">
-        <defs>
-          <filter id="protanopia">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="protanomaly">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="deuteranopia">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="deuteranomaly">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="tritanopia">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="tritanomaly">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="achromatopsia">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-          <filter id="achromatomaly">
-            <feColorMatrix
-              in="SourceGraphic"
-              type="matrix"
-              values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
-            />
-          </filter>
-        </defs>
-      </svg>
-    </Hidden>
-  </Fragment>
-);
-
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
@@ -93,13 +16,11 @@ addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     title: 'Accessibility',
     type: types.PANEL,
-    render: ({ active, key }) => <A11YPanel key={key} api={api} active={active} />,
+    render: ({ active = true, key }) => (
+      <A11yContextProvider key={key} active={active}>
+        <A11YPanel />
+      </A11yContextProvider>
+    ),
     paramKey: PARAM_KEY,
   });
-
-  addons.add(PANEL_ID, {
-    title: '',
-    type: types.PREVIEW,
-    render: PreviewWrapper as any,
-  });
 });
diff --git a/addons/a11y/tsconfig.json b/addons/a11y/tsconfig.json
index 8876bb6737a1..a3eb85b9984f 100644
--- a/addons/a11y/tsconfig.json
+++ b/addons/a11y/tsconfig.json
@@ -2,12 +2,14 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env", "jest"],
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
 }
diff --git a/addons/actions/README.md b/addons/actions/README.md
index d7cf0be887c3..ea170685383c 100644
--- a/addons/actions/README.md
+++ b/addons/actions/README.md
@@ -18,64 +18,67 @@ Then, add following content to `.storybook/main.js`
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-actions/register']
-}
+  addons: ['@storybook/addon-actions'],
+};
 ```
 
-Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
+## Actions args
 
-> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
+Starting in SB6.0, we recommend using story parameters to specify actions which get passed into your story as [Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing) (passed as the first argument when `passArgsFirst` is set to `true`).
+
+The first option is to specify `argTypes` for your story with an `action` field. Take the following example:
 
 ```js
-import { action } from '@storybook/addon-actions';
 import Button from './button';
 
 export default {
   title: 'Button',
-  component: Button,
+  argTypes: { onClick: { action: 'clicked' } },
 };
 
-export const defaultView = () => (
-  <Button onClick={action('button-click')}>Hello World!</Button>
-);
+export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
 ```
 
-## Multiple actions
-
-If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
+Alternatively, suppose you have a naming convention, like `onX` for event handlers. The following configuration automatically creates actions for each `onX` `argType` (which you can either specify manually or generate automatically using [Storybook Docs](https://www.npmjs.com/package/@storybook/addon-docs).
 
 ```js
-import { actions } from '@storybook/addon-actions';
 import Button from './button';
 
 export default {
   title: 'Button',
   component: Button,
+  parameters: { actions: { argTypesRegex: '^on.*' } },
 };
 
-// This will lead to { onClick: action('onClick'), ... }
-const eventsFromNames = actions('onClick', 'onMouseOver');
+export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
+```
 
-// This will lead to { onClick: action('clicked'), ... }
-const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
+> **NOTE:** If you're generating `argTypes` in using another addon (like Docs, which is the common behavior) you'll need to make sure that the actions addon loads **AFTER** the other addon. You can do this by listing it later in the `addons` registration code in `.storybook/main.js`.
 
-export const first = () => (
-  <Button {...eventsFromNames}>Hello World!</Button>
-);
+## Manually-specified actions
 
-export const second = () => (
-  <Button {...eventsFromObject}>Hello World!</Button>
-);
-```
+Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
 
-## Action Decorators
+> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
 
-If you wish to process action data before sending them over to the logger, you can do it with action decorators.
+```js
+import { action } from '@storybook/addon-actions';
+import Button from './button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
 
-`decorate` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorate` returns a object with two functions: `action` and `actions`, that act like the above, except they log the modified arguments instead of the original arguments.
+export const defaultView = () => <Button onClick={action('button-click')}>Hello World!</Button>;
+```
+
+## Multiple actions
+
+If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
 
 ```js
-import { decorate } from '@storybook/addon-actions';
+import { actions } from '@storybook/addon-actions';
 import Button from './button';
 
 export default {
@@ -83,24 +86,24 @@ export default {
   component: Button,
 };
 
-const firstArg = decorate([args => args.slice(0, 1)]);
+// This will lead to { onClick: action('onClick'), ... }
+const eventsFromNames = actions('onClick', 'onMouseOver');
 
-export const first = () => (
-  <Button onClick={firstArg.action('button-click')}>Hello World!</Button>
-);
+// This will lead to { onClick: action('clicked'), ... }
+const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
+
+export const first = () => <Button {...eventsFromNames}>Hello World!</Button>;
+
+export const second = () => <Button {...eventsFromObject}>Hello World!</Button>;
 ```
 
 ## Configuration
 
-Arguments which are passed to the action call will have to be serialized while be "transferred"
-over the channel.
+Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.
 
-This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible 
-to configure a maximum depth.
+This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.
 
-The action logger, by default, will log all actions fired during the lifetime of the story. After a while
-this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should 
-be logged.
+The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.
 
 To apply the configuration globally use the `configureActions` function in your `preview.js` file.
 
@@ -115,6 +118,7 @@ configureActions({
 ```
 
 To apply the configuration per action use:
+
 ```js
 action('my-action', {
   depth: 5,
@@ -123,27 +127,27 @@ action('my-action', {
 
 ### Available Options
 
-|Name|Type|Description|Default|
-|---|---|---|---|
-|`depth`|Number|Configures the transferred depth of any logged objects.|`10`|
-|`clearOnStoryChange`|Boolean|Flag whether to clear the action logger when switching away from the current story.|`true`|
-|`limit`|Number|Limits the number of items logged in the action logger|`50`|
+| Name                 | Type    | Description                                                                         | Default |
+| -------------------- | ------- | ----------------------------------------------------------------------------------- | ------- |
+| `depth`              | Number  | Configures the transferred depth of any logged objects.                             | `10`    |
+| `clearOnStoryChange` | Boolean | Flag whether to clear the action logger when switching away from the current story. | `true`  |
+| `limit`              | Number  | Limits the number of items logged in the action logger                              | `50`    |
 
-## withActions decorator
+## Declarative Configuration via Parameters
 
-You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions)
+You can define action handles in a declarative way using parameters. They accepts the same arguments as [`actions`](#multiple-actions)
 Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
 
 ```js
-import { withActions } from '@storybook/addon-actions';
 import Button from './button';
 
 export default {
   title: 'Button',
-  decorators: [withActions('mouseover', 'click .btn')]
+  parameters: {
+    actions: {
+      handles: ['mouseover', 'click .btn']
+  }
 };
 
-export const first = () => (
-  <Button className="btn">Hello World!</Button>
-);
+export const first = () => <Button className="btn">Hello World!</Button>;
 ```
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 4940d4b917e2..d56053c263f2 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -15,40 +15,55 @@
     "directory": "addons/actions"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
-    "fast-deep-equal": "^2.0.1",
+    "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
-    "polished": "^3.3.1",
+    "lodash": "^4.17.15",
+    "polished": "^3.4.4",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
-    "react-inspector": "^4.0.0",
-    "uuid": "^3.3.2"
+    "react-inspector": "^5.0.1",
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1",
+    "util-deprecate": "^1.0.2",
+    "uuid": "^8.0.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.149",
-    "@types/uuid": "^3.4.4"
+    "@types/lodash": "^4.14.150",
+    "@types/uuid": "^7.0.3",
+    "@types/webpack-env": "^1.15.2"
+  },
+  "peerDependencies": {
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/actions/preset.js b/addons/actions/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/actions/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/actions/register.js b/addons/actions/register.js
index 9232e6c069d5..cc38cb06f1f2 100644
--- a/addons/actions/register.js
+++ b/addons/actions/register.js
@@ -1 +1 @@
-require('./dist/manager').register();
+require('./dist/register');
diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx
index 450e407a697c..4ffe870286c8 100644
--- a/addons/actions/src/components/ActionLogger/style.tsx
+++ b/addons/actions/src/components/ActionLogger/style.tsx
@@ -8,6 +8,7 @@ export const Action = styled.div({
   borderBottom: '1px solid transparent',
   transition: 'all 0.1s',
   alignItems: 'flex-start',
+  whiteSpace: 'pre',
 });
 
 export const Counter = styled.div<{}>(({ theme }) => ({
diff --git a/addons/actions/src/manager.tsx b/addons/actions/src/manager.tsx
deleted file mode 100644
index a7bfd9dbf596..000000000000
--- a/addons/actions/src/manager.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import addons from '@storybook/addons';
-import ActionLogger from './containers/ActionLogger';
-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/preset/addArgs.test.ts b/addons/actions/src/preset/addArgs.test.ts
new file mode 100644
index 000000000000..ca72c7f4ad11
--- /dev/null
+++ b/addons/actions/src/preset/addArgs.test.ts
@@ -0,0 +1,76 @@
+import { StoryContext } from '@storybook/addons';
+import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgs';
+
+const withDefaultValue = (argTypes) =>
+  Object.keys(argTypes).filter((key) => !!argTypes[key].defaultValue);
+
+describe('actions parameter enhancers', () => {
+  describe('actions.argTypesRegex parameter', () => {
+    const baseParameters = {
+      argTypes: { onClick: {}, onFocus: {}, somethingElse: {} },
+      actions: { argTypesRegex: '^on.*' },
+    };
+
+    it('should add actions that match a pattern', () => {
+      const parameters = baseParameters;
+      const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
+      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
+    });
+
+    it('should prioritize pre-existing argTypes unless they are null', () => {
+      const parameters = {
+        ...baseParameters,
+        argTypes: {
+          onClick: { defaultValue: 'pre-existing value' },
+          onFocus: { defaultValue: null },
+        },
+      };
+      const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
+      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
+      expect(argTypes.onClick.defaultValue).toEqual('pre-existing value');
+      expect(argTypes.onFocus.defaultValue).not.toBeNull();
+    });
+
+    it('should do nothing if actions are disabled', () => {
+      const parameters = {
+        ...baseParameters,
+        actions: { ...baseParameters.actions, disable: true },
+      };
+      const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
+      expect(result).toEqual(parameters.argTypes);
+    });
+  });
+
+  describe('argTypes.action parameter', () => {
+    const baseParameters = {
+      argTypes: {
+        onClick: { action: 'clicked!' },
+        onBlur: { action: 'blurred!' },
+      },
+    };
+    it('should add actions based on action.args', () => {
+      const parameters = baseParameters;
+      const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
+      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
+    });
+
+    it('should prioritize pre-existing args', () => {
+      const parameters = {
+        ...baseParameters,
+        argTypes: {
+          onClick: { defaultValue: 'pre-existing value', action: 'onClick' },
+          onBlur: { action: 'onBlur' },
+        },
+      };
+      const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
+      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
+      expect(argTypes.onClick.defaultValue).toEqual('pre-existing value');
+    });
+
+    it('should do nothing if actions are disabled', () => {
+      const parameters = { ...baseParameters, actions: { disable: true } };
+      const result = addActionsFromArgTypes({ parameters } as StoryContext);
+      expect(result).toEqual(parameters.argTypes);
+    });
+  });
+});
diff --git a/addons/actions/src/preset/addArgs.ts b/addons/actions/src/preset/addArgs.ts
new file mode 100644
index 000000000000..91d567d768bb
--- /dev/null
+++ b/addons/actions/src/preset/addArgs.ts
@@ -0,0 +1,48 @@
+import mapValues from 'lodash/mapValues';
+import { ArgTypesEnhancer } from '@storybook/client-api';
+
+import { action } from '../index';
+
+// interface ActionsParameter {
+//   disable?: boolean;
+//   argTypesRegex?: RegExp;
+// }
+
+/**
+ * Automatically add action args for argTypes whose name
+ * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ */
+export const inferActionsFromArgTypesRegex: ArgTypesEnhancer = (context) => {
+  const { actions, argTypes } = context.parameters;
+  if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
+    return argTypes;
+  }
+
+  const argTypesRegex = new RegExp(actions.argTypesRegex);
+  return mapValues(argTypes, (argType, name) => {
+    if (!argTypesRegex.test(name)) {
+      return argType;
+    }
+    return { ...argType, defaultValue: argType.defaultValue || action(name) };
+  });
+};
+
+/**
+ * Add action args for list of strings.
+ */
+export const addActionsFromArgTypes: ArgTypesEnhancer = (context) => {
+  const { argTypes, actions } = context.parameters;
+  if (actions?.disable || !argTypes) {
+    return argTypes;
+  }
+
+  return mapValues(argTypes, (argType, name) => {
+    if (!argType.action) {
+      return argType;
+    }
+    const message = typeof argType.action === 'string' ? argType.action : name;
+    return { ...argType, defaultValue: argType.defaultValue || action(message) };
+  });
+};
+
+export const argTypesEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
diff --git a/addons/actions/src/preset/addDecorator.ts b/addons/actions/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..f0044588cc2f
--- /dev/null
+++ b/addons/actions/src/preset/addDecorator.ts
@@ -0,0 +1,3 @@
+import { withActions } from '../index';
+
+export const decorators = [withActions];
diff --git a/addons/actions/src/preset/index.ts b/addons/actions/src/preset/index.ts
new file mode 100644
index 000000000000..1589a4b0d4e7
--- /dev/null
+++ b/addons/actions/src/preset/index.ts
@@ -0,0 +1,15 @@
+interface ActionsOptions {
+  addDecorator?: boolean;
+}
+
+export function managerEntries(entry: any[] = [], options: any) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: ActionsOptions = {}) {
+  const actionConfig = [];
+  if (addDecorator) {
+    actionConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...actionConfig, require.resolve('./addArgs')];
+}
diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js
index 36a954efdb58..7c82a20b1e66 100644
--- a/addons/actions/src/preview/__tests__/action.test.js
+++ b/addons/actions/src/preview/__tests__/action.test.js
@@ -8,7 +8,7 @@ const createChannel = () => {
   addons.getChannel.mockReturnValue(channel);
   return channel;
 };
-const getChannelData = channel => channel.emit.mock.calls[0][1].data.args;
+const getChannelData = (channel) => channel.emit.mock.calls[0][1].data.args;
 
 describe('Action', () => {
   it('with one argument', () => {
diff --git a/addons/actions/src/preview/__tests__/actions.test.js b/addons/actions/src/preview/__tests__/actions.test.js
new file mode 100644
index 000000000000..17b72a73b6d3
--- /dev/null
+++ b/addons/actions/src/preview/__tests__/actions.test.js
@@ -0,0 +1,90 @@
+import addons from '@storybook/addons';
+import { actions } from '../..';
+
+jest.mock('@storybook/addons');
+
+const createChannel = () => {
+  const channel = { emit: jest.fn() };
+  addons.getChannel.mockReturnValue(channel);
+  return channel;
+};
+const getChannelData = (channel, callIndex) => channel.emit.mock.calls[callIndex][1].data;
+const getChannelOptions = (channel, callIndex) => channel.emit.mock.calls[callIndex][1].options;
+
+describe('Actions', () => {
+  it('with one argument', () => {
+    const channel = createChannel();
+
+    const actionsResult = actions('test-action');
+
+    expect(Object.keys(actionsResult)).toEqual(['test-action']);
+    actionsResult['test-action']('one');
+
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
+  });
+
+  it('with multiple arguments', () => {
+    const channel = createChannel();
+
+    const actionsResult = actions('test-action', 'test-action2');
+
+    expect(Object.keys(actionsResult)).toEqual(['test-action', 'test-action2']);
+
+    actionsResult['test-action']('one');
+    actionsResult['test-action2']('two');
+
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+  });
+
+  it('with multiple arguments + config', () => {
+    const channel = createChannel();
+
+    const actionsResult = actions('test-action', 'test-action2', { some: 'config' });
+
+    expect(Object.keys(actionsResult)).toEqual(['test-action', 'test-action2']);
+
+    actionsResult['test-action']('one');
+    actionsResult['test-action2']('two');
+
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+
+    expect(getChannelOptions(channel, 0).some).toEqual('config');
+    expect(getChannelOptions(channel, 1).some).toEqual('config');
+  });
+
+  it('with multiple arguments as object', () => {
+    const channel = createChannel();
+
+    const actionsResult = actions({
+      'test-action': 'test action',
+      'test-action2': 'test action two',
+    });
+
+    expect(Object.keys(actionsResult)).toEqual(['test-action', 'test-action2']);
+
+    actionsResult['test-action']('one');
+    actionsResult['test-action2']('two');
+
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test action', args: ['one'] });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test action two', args: ['two'] });
+  });
+
+  it('with first argument as array of arguments + config', () => {
+    const channel = createChannel();
+
+    const actionsResult = actions(['test-action', 'test-action2', { some: 'config' }]);
+
+    expect(Object.keys(actionsResult)).toEqual(['test-action', 'test-action2']);
+
+    actionsResult['test-action']('one');
+    actionsResult['test-action2']('two');
+
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+
+    expect(getChannelOptions(channel, 0).some).toEqual('config');
+    expect(getChannelOptions(channel, 1).some).toEqual('config');
+  });
+});
diff --git a/addons/actions/src/preview/action.ts b/addons/actions/src/preview/action.ts
index d9a026472de8..d48257c1ee4d 100644
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@@ -1,4 +1,4 @@
-import uuid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { addons } from '@storybook/addons';
 import { EVENT_ID } from '../constants';
 import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
@@ -12,7 +12,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
 
   const handler = function actionHandler(...args: any[]) {
     const channel = addons.getChannel();
-    const id = uuid();
+    const id = uuidv4();
     const minDepth = 5; // anything less is really just storybook internals
 
     const actionDisplayToEmit: ActionDisplay = {
diff --git a/addons/actions/src/preview/actions.ts b/addons/actions/src/preview/actions.ts
index 41c6d077a6a4..9e595ed7a151 100644
--- a/addons/actions/src/preview/actions.ts
+++ b/addons/actions/src/preview/actions.ts
@@ -4,9 +4,13 @@ import { config } from './configureActions';
 
 export const actions: ActionsFunction = (...args: any[]) => {
   let options: ActionOptions = config;
-  const names = args;
+  let names = args;
+  // args argument can be a single argument as an array
+  if (names.length === 1 && Array.isArray(names[0])) {
+    [names] = names;
+  }
   // last argument can be options
-  if (names.length !== 1 && typeof args[args.length - 1] !== 'string') {
+  if (names.length !== 1 && typeof names[names.length - 1] !== 'string') {
     options = {
       ...config,
       ...names.pop(),
@@ -16,13 +20,13 @@ export const actions: ActionsFunction = (...args: any[]) => {
   let namesObject = names[0];
   if (names.length !== 1 || typeof namesObject === 'string') {
     namesObject = {};
-    names.forEach(name => {
+    names.forEach((name) => {
       namesObject[name] = name;
     });
   }
 
   const actionsObject: ActionsMap = {};
-  Object.keys(namesObject).forEach(name => {
+  Object.keys(namesObject).forEach((name) => {
     actionsObject[name] = action(namesObject[name], options);
   });
   return actionsObject;
diff --git a/addons/actions/src/preview/decorateAction.ts b/addons/actions/src/preview/decorateAction.ts
index 817e7af1f29e..b84f49bdb20a 100644
--- a/addons/actions/src/preview/decorateAction.ts
+++ b/addons/actions/src/preview/decorateAction.ts
@@ -1,37 +1,37 @@
-import { action } from './action';
-import { actions } from './actions';
-import { createDecorator } from './withActions';
-import { ActionOptions, DecoratorFunction, HandlerFunction } from '../models';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
 
-const applyDecorators = (decorators: DecoratorFunction[], actionCallback: HandlerFunction) => {
-  return (..._args: any[]) => {
-    const decorated = decorators.reduce((args, storyFn) => storyFn(args), _args);
-    actionCallback(...decorated);
-  };
-};
+import { DecoratorFunction } from '../models';
 
-export const decorateAction = (
-  decorators: DecoratorFunction[]
-): ((name: string, options?: ActionOptions) => HandlerFunction) => {
-  return (name: string, options?: ActionOptions) => {
-    const callAction = action(name, options);
-    return applyDecorators(decorators, callAction);
-  };
+export const decorateAction = (_decorators: DecoratorFunction[]) => {
+  return deprecate(
+    () => {},
+    dedent`
+    decorateAction is no longer supported as of Storybook 6.0.
+  `
+  );
 };
 
-export const decorate = (decorators: DecoratorFunction[]) => {
-  const decorated = decorateAction(decorators);
-  const decoratedActions = (...args: any[]) => {
-    const rawActions = actions(...args);
-    const actionsObject = {} as any;
-    Object.keys(rawActions).forEach(name => {
-      actionsObject[name] = applyDecorators(decorators, rawActions[name]);
-    });
-    return actionsObject;
-  };
-  return {
-    action: decorated,
-    actions: decoratedActions,
-    withActions: createDecorator(decoratedActions),
-  };
+const deprecatedCallback = deprecate(() => {},
+'decorate.* is no longer supported as of Storybook 6.0.');
+
+export const decorate = (_decorators: DecoratorFunction[]) => {
+  return deprecate(
+    () => {
+      return {
+        action: deprecatedCallback,
+        actions: deprecatedCallback,
+        withActions: deprecatedCallback,
+      };
+    },
+    dedent`
+    decorate is deprecated, please configure addon-actions using the addParameter api:
+      
+      addParameters({
+        actions: {
+          handles: options
+        },
+      });
+    `
+  );
 };
diff --git a/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts
index 5d4b620be743..2d78b764f2f1 100644
--- a/addons/actions/src/preview/withActions.ts
+++ b/addons/actions/src/preview/withActions.ts
@@ -1,9 +1,14 @@
 // Based on http://backbonejs.org/docs/backbone.html#section-164
 import { document, Element } from 'global';
 import { useEffect } from '@storybook/client-api';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
 
+import { makeDecorator } from '@storybook/addons';
 import { actions } from './actions';
 
+import { PARAM_KEY } from '../constants';
+
 const delegateEventSplitter = /^(\S+)\s*(.*)$/;
 
 const isIE = Element != null && !Element.prototype.matches;
@@ -22,8 +27,8 @@ const hasMatchInAncestry = (element: any, selector: any): boolean => {
   return hasMatchInAncestry(parent, selector);
 };
 
-const createHandlers = (actionsFn: (...arg: any[]) => object, ...args: any[]) => {
-  const actionsObject = actionsFn(...args);
+const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
+  const actionsObject = actionsFn(...handles);
   return Object.entries(actionsObject).map(([key, action]) => {
     const [_, eventName, selector] = key.match(delegateEventSplitter);
     return {
@@ -37,18 +42,46 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...args: any[]) =>
   });
 };
 
-export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
-  useEffect(() => {
-    if (root != null) {
-      const handlers = createHandlers(actionsFn, ...args);
-      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
-      return () =>
-        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
-    }
-    return undefined;
-  }, [root, actionsFn, args]);
-
-  return storyFn();
+const applyEventHandlers = deprecate(
+  (actionsFn: any, ...handles: any[]) => {
+    useEffect(() => {
+      if (root != null) {
+        const handlers = createHandlers(actionsFn, ...handles);
+        handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
+        return () =>
+          handlers.forEach(({ eventName, handler }) =>
+            root.removeEventListener(eventName, handler)
+          );
+      }
+      return undefined;
+    }, [root, actionsFn, handles]);
+  },
+  dedent`
+    withActions(options) is deprecated, please configure addon-actions using the addParameter api:
+
+    addParameters({
+      actions: {
+        handles: options
+      },
+    });
+  `
+);
+
+const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
+  if (options) {
+    applyEventHandlers(actionsFn, options);
+  }
 };
 
-export const withActions = createDecorator(actions);
+export const withActions = makeDecorator({
+  name: 'withActions',
+  parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: true,
+  wrapper: (getStory, context, { parameters, options }) => {
+    applyDeprecatedOptions(actions, options as any[]);
+
+    if (parameters && parameters.handles) applyEventHandlers(actions, ...parameters.handles);
+
+    return getStory(context);
+  },
+});
diff --git a/addons/actions/src/register.tsx b/addons/actions/src/register.tsx
new file mode 100644
index 000000000000..b4db8997c514
--- /dev/null
+++ b/addons/actions/src/register.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+import ActionLogger from './containers/ActionLogger';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
+
+addons.register(ADDON_ID, (api) => {
+  addons.addPanel(PANEL_ID, {
+    title: 'Actions',
+    type: types.PANEL,
+    render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
+    paramKey: PARAM_KEY,
+  });
+});
diff --git a/addons/actions/tsconfig.json b/addons/actions/tsconfig.json
index 8876bb6737a1..d97959cff1e0 100644
--- a/addons/actions/tsconfig.json
+++ b/addons/actions/tsconfig.json
@@ -2,12 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env", "jest"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*", "src/**/*.test.ts"]
 }
diff --git a/addons/backgrounds/README.md b/addons/backgrounds/README.md
index fe8554429f64..666bb34d9068 100644
--- a/addons/backgrounds/README.md
+++ b/addons/backgrounds/README.md
@@ -9,101 +9,121 @@ Storybook Background Addon can be used to change background colors inside the pr
 ## Installation
 
 ```sh
-npm i -D @storybook/addon-backgrounds
+yarn add @storybook/addon-backgrounds --dev
 ```
 
 ## Configuration
 
-Then create a file called `main.js` in your storybook config.
+If it doesn't exist yet, create a file called `main.js` in your storybook config.
 
-Add following content to it:
+Add the following content to it:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-backgrounds/register']
-}
+  addons: ['@storybook/addon-backgrounds'],
+};
 ```
 
 ## Usage
 
-Then write your stories like this:
+Backgrounds requires two parameters:
 
-```js
+- `default` - matches the **name** of the value which will be selected by default.
+- `values` - an array of elements containing name and value (with a valid css color e.g. HEX, RGBA, etc.)
+
+Write your stories like this:
+
+```jsx
 import React from 'react';
 
+/*
+ * Button.stories.js
+ * Applies backgrounds to the Stories
+ */
 export default {
   title: 'Button',
   parameters: {
-    backgrounds: [
-      { name: 'twitter', value: '#00aced', default: true },
-      { name: 'facebook', value: '#3b5998' },
-    ]
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        { name: 'twitter', value: '#00aced' },
+        { name: 'facebook', value: '#3b5998' },
+      ],
+    },
   },
 };
 
-export const defaultView = () => (
-  <button>Click me</button>
-);
+export const defaultView = () => <button>Click me</button>;
 ```
 
-You can add the backgrounds to all stories with `addParameters` in `.storybook/preview.js`:
+You can add the backgrounds to all stories by using `parameters` in `.storybook/preview.js`:
 
 ```js
-import { addParameters } from '@storybook/react'; // <- or your storybook framework
-
-addParameters({
-  backgrounds: [
-    { name: 'twitter', value: '#00aced', default: true },
-    { name: 'facebook', value: '#3b5998' },
-  ],
-});
+export const parameters = {
+  backgrounds: {
+    default: 'twitter',
+    values: [
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998' },
+    ],
+  },
+};
 ```
 
 If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
 
-```js
+```jsx
 import React from 'react';
 
 export default {
   title: 'Button',
-}
+};
 
-export const defaultView = () => (
-  <button>Click me</button>
-);
-defaultView.story = {
-  parameters: {
-    backgrounds: [
-      { name: 'red', value: 'rgba(255, 0, 0)' },
-    ],
+export const defaultView = () => <button>Click me</button>;
+
+defaultView.parameters = {
+  backgrounds: {
+    default: 'red',
+    values: [{ name: 'red', value: 'rgba(255, 0, 0)' }],
   },
 };
 ```
 
-If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon:
+Once you have defined backgrounds for your stories (as can be seen in the examples above), you can set a default background per story by passing the `default` property using a name from the available backgrounds:
 
-```js
+```jsx
 import React from 'react';
 
+/*
+ * Button.stories.js
+ * Applies default background to the Stories
+ */
 export default {
   title: 'Button',
-}
-
-export const noBackgrounds = () => (
-  <button>Click me</button>
-);
-noBackgrounds.story = {
   parameters: {
-    backgrounds: [],
+    backgrounds: { default: 'twitter' },
   },
 };
 
-export const disabledBackgrounds = () => (
-  <button>Click me</button>
-);
-disabledBackgrounds.story = {
-  parameters: {
-    backgrounds: { disabled: true },
-  },
+export const twitterColorSelected = () => <button>Click me</button>;
+```
+
+If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `{ disable: true }` to skip the addon:
+
+```jsx
+import React from 'react';
+
+/*
+ * Button.stories.js
+ * Disables backgrounds for one Story
+ */
+export default {
+  title: 'Button',
+};
+
+export const disabledBackgrounds = () => <button>Click me</button>;
+
+disabledBackgrounds.parameters = {
+  backgrounds: { disable: true },
 };
 ```
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 4ea1ad7a9042..bca0104b4870 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -19,35 +19,45 @@
   },
   "license": "MIT",
   "author": "jbaxleyiii",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "memoizerific": "^1.11.3",
     "react": "^16.8.3",
-    "util-deprecate": "^1.0.2"
+    "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
-    "@types/util-deprecate": "^1.0.0"
+    "@types/webpack-env": "^1.15.2"
+  },
+  "peerDependencies": {
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
index f2876d89cef1..69cc0ede8739 100644
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -3,13 +3,23 @@ import memoize from 'memoizerific';
 
 import { Combo, Consumer, API } from '@storybook/api';
 import { Global, Theme } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
 
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { PARAM_KEY, EVENTS } from '../constants';
+import { PARAM_KEY as BACKGROUNDS_PARAM_KEY, EVENTS } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
 
-interface Item {
+interface GlobalState {
+  name: string | undefined;
+  selected: string | undefined;
+}
+
+interface Props {
+  api: API;
+}
+
+interface BackgroundSelectorItem {
   id: string;
   title: string;
   onClick: () => void;
@@ -17,10 +27,22 @@ interface Item {
   right?: ReactElement;
 }
 
-interface Input {
+interface Background {
   name: string;
   value: string;
-  default?: boolean;
+}
+
+interface BackgroundsParameter {
+  default?: string;
+  disable?: boolean;
+  values: Background[];
+}
+
+interface BackgroundsConfig {
+  backgrounds: Background[] | null;
+  selectedBackground: string | null;
+  defaultBackgroundName: string | null;
+  disable: boolean;
 }
 
 const iframeId = 'storybook-preview-iframe';
@@ -32,7 +54,7 @@ const createBackgroundSelectorItem = memoize(1000)(
     value: string,
     hasSwatch: boolean,
     change: (arg: { selected: string; name: string }) => void
-  ): Item => ({
+  ): BackgroundSelectorItem => ({
     id: id || name,
     title: name,
     onClick: () => {
@@ -43,86 +65,114 @@ const createBackgroundSelectorItem = memoize(1000)(
   })
 );
 
-const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string): string => {
-  if (!list.length) {
-    return 'transparent';
+const getDisplayedItems = memoize(10)(
+  (
+    backgrounds: Background[],
+    selectedBackgroundColor: string | null,
+    change: (arg: { selected: string; name: string }) => void
+  ) => {
+    const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
+      createBackgroundSelectorItem(null, name, value, true, change)
+    );
+
+    if (selectedBackgroundColor !== 'transparent') {
+      return [
+        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change),
+        ...backgroundSelectorItems,
+      ];
+    }
+
+    return backgroundSelectorItems;
   }
+);
 
+const getSelectedBackgroundColor = (
+  backgrounds: Background[] = [],
+  currentSelectedValue: string,
+  defaultName: string
+): string => {
   if (currentSelectedValue === 'transparent') {
-    return currentSelectedValue;
+    return 'transparent';
   }
 
-  if (list.find(i => i.value === currentSelectedValue)) {
+  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
     return currentSelectedValue;
   }
 
-  if (list.find(i => i.default)) {
-    return list.find(i => i.default).value;
+  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
+  if (defaultBackground) {
+    return defaultBackground.value;
   }
 
-  return 'transparent';
-};
-
-const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
-  const story = state.storiesHash[state.storyId];
-  const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
-  const selected = state.addons[PARAM_KEY] || null;
+  if (defaultName) {
+    const availableColors = backgrounds.map((background) => background.name).join(', ');
+    logger.warn(
+      `Backgrounds Addon: could not find the default color "${defaultName}".
+      These are the available colors for your story based on your configuration: ${availableColors}`
+    );
+  }
 
-  return { items: list || [], selected };
+  return 'transparent';
 };
 
-const getDisplayedItems = memoize(10)(
-  (
-    list: Input[],
-    selected: string | null,
-    change: (arg: { selected: string; name: string }) => void
-  ) => {
-    let availableBackgroundSelectorItems: Item[] = [];
+const getBackgroundsConfig = ({ api, state }: Combo): BackgroundsConfig => {
+  const backgroundsParameter = api.getCurrentParameter<BackgroundsParameter>(BACKGROUNDS_PARAM_KEY);
+  const selectedBackgroundValue = state.addons[BACKGROUNDS_PARAM_KEY] || null;
 
-    if (selected !== 'transparent') {
-      availableBackgroundSelectorItems.push(
-        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
-      );
-    }
-
-    if (list.length) {
-      availableBackgroundSelectorItems = [
-        ...availableBackgroundSelectorItems,
-        ...list.map(({ name, value }) =>
-          createBackgroundSelectorItem(null, name, value, true, change)
-        ),
-      ];
-    }
-
-    return availableBackgroundSelectorItems;
+  if (Array.isArray(backgroundsParameter)) {
+    logger.warn(
+      'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
+    );
   }
-);
 
-interface GlobalState {
-  name: string | undefined;
-  selected: string | undefined;
-}
+  const isBackgroundsEmpty = !backgroundsParameter?.values?.length;
+  if (backgroundsParameter?.disable || isBackgroundsEmpty) {
+    // other null properties are necessary to keep the same return shape for Consumer memoization
+    return {
+      disable: true,
+      backgrounds: null,
+      selectedBackground: null,
+      defaultBackgroundName: null,
+    };
+  }
 
-interface Props {
-  api: API;
-}
+  return {
+    disable: false,
+    backgrounds: backgroundsParameter?.values,
+    selectedBackground: selectedBackgroundValue,
+    defaultBackgroundName: backgroundsParameter?.default,
+  };
+};
 
 export class BackgroundSelector extends Component<Props> {
   change = ({ selected, name }: GlobalState) => {
     const { api } = this.props;
     if (typeof selected === 'string') {
-      api.setAddonState<string>(PARAM_KEY, selected);
+      api.setAddonState<string>(BACKGROUNDS_PARAM_KEY, selected);
     }
     api.emit(EVENTS.UPDATE, { selected, name });
   };
 
   render() {
     return (
-      <Consumer filter={mapper}>
-        {({ items, selected }: ReturnType<typeof mapper>) => {
-          const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
-
-          return items.length ? (
+      <Consumer filter={getBackgroundsConfig}>
+        {({
+          disable,
+          backgrounds,
+          selectedBackground,
+          defaultBackgroundName,
+        }: BackgroundsConfig) => {
+          if (disable) {
+            return null;
+          }
+
+          const selectedBackgroundColor = getSelectedBackgroundColor(
+            backgrounds,
+            selectedBackground,
+            defaultBackgroundName
+          );
+
+          return (
             <Fragment>
               {selectedBackgroundColor ? (
                 <Global
@@ -139,26 +189,26 @@ export class BackgroundSelector extends Component<Props> {
               <WithTooltip
                 placement="top"
                 trigger="click"
+                closeOnClick
                 tooltip={({ onHide }) => (
                   <TooltipLinkList
-                    links={getDisplayedItems(items, selectedBackgroundColor, i => {
+                    links={getDisplayedItems(backgrounds, selectedBackgroundColor, (i) => {
                       this.change(i);
                       onHide();
                     })}
                   />
                 )}
-                closeOnClick
               >
                 <IconButton
                   key="background"
-                  active={selectedBackgroundColor !== 'transparent'}
                   title="Change the background of the preview"
+                  active={selectedBackgroundColor !== 'transparent'}
                 >
                   <Icons icon="photo" />
                 </IconButton>
               </WithTooltip>
             </Fragment>
-          ) : null;
+          );
         }}
       </Consumer>
     );
diff --git a/addons/backgrounds/src/index.ts b/addons/backgrounds/src/index.ts
index 9352400fe35c..b9ba57b91818 100644
--- a/addons/backgrounds/src/index.ts
+++ b/addons/backgrounds/src/index.ts
@@ -1,20 +1,3 @@
-import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';
-import deprecate from 'util-deprecate';
-
-// This decorator is kept purely so we produce a decorator that is compatible with both
-// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)`
-export const withBackgrounds = deprecate(
-  makeDecorator({
-    name: 'withBackgrounds',
-    parameterName: 'backgrounds',
-    wrapper: (getStory: StoryGetter, context: StoryContext) => {
-      return getStory(context);
-    },
-  }),
-  `Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options})
-Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
-);
-
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/register.tsx
index bb1aacd75485..dcdd31c6cf87 100644
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@@ -5,7 +5,7 @@ import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 import { GridSelector } from './containers/GridSelector';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
diff --git a/addons/centered/README.md b/addons/centered/README.md
deleted file mode 100644
index 8eddd66bbe17..000000000000
--- a/addons/centered/README.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Storybook Centered Decorator
-
-Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.
-
-### Usage
-
-```sh
-yarn add @storybook/addon-centered --dev
-```
-
-You can set the decorator locally.
-
-example for React:
-
-```js
-import { storiesOf } from '@storybook/react';
-import centered from '@storybook/addon-centered/react';
-
-import MyComponent from '../Component';
-
-storiesOf('MyComponent', module)
-  .addDecorator(centered)
-  .add('without props', () => (<MyComponent />))
-  .add('with some props', () => (<MyComponent text="The Comp"/>));
-```
-
-example for Vue:
-
-```js
-import { storiesOf } from '@storybook/vue';
-import centered from '@storybook/addon-centered/vue';
-
-import MyComponent from '../Component.vue';
-storiesOf('MyComponent', module)
-  .addDecorator(centered)
-  .add('without props', () => ({
-    components: { MyComponent },
-    template: '<my-component />'
-  }))
-  .add('with some props', () => ({
-    components: { MyComponent },
-    template: '<my-component text="The Comp"/>'
-  }));
-```
-
-example for Preact:
-
-```js
-import { storiesOf } from '@storybook/preact';
-import centered from '@storybook/addon-centered/preact';
-
-import MyComponent from '../Component';
-
-storiesOf('MyComponent', module)
-  .addDecorator(centered)
-  .add('without props', () => (<MyComponent />))
-  .add('with some props', () => (<MyComponent text="The Comp"/>));
-```
-
-example for Svelte:
-
-```js
-import { storiesOf } from '@storybook/svelte';
-import Centered from '@storybook/addon-centered/svelte';
-
-import Component from '../Component.svelte';
-
-storiesOf('Addon|Centered', module)
-  .addDecorator(Centered)
-  .add('rounded', () => ({
-    Component,
-    data: {
-      rounded: true,
-      text: "Look, I'm centered!",
-    },
-  }))
-```
-
-example for Mithril:
-
-```js
-import { storiesOf } from '@storybook/mithril';
-import centered from '@storybook/addon-centered/mithril';
-
-import MyComponent from '../Component';
-
-storiesOf('MyComponent', module)
-  .addDecorator(centered)
-  .add('without props', () => ({
-    view: () => <MyComponent />
-  }))
-  .add('with some props', () => ({
-    view: () => <MyComponent text="The Comp"/>
-  }));
-```
-
-example for Angular with component:
-
-```ts
-import { storiesOf } from '@storybook/angular';
-import { centered } from '@storybook/addon-centered/angular';
-
-import { AppComponent } from '../app/app.component';
-
-storiesOf('Addon|Centered', module)
-  .addDecorator(centered)
-  .add('centered component', () => ({
-    component: AppComponent,
-    props: {},
-  }));
-
-```
-
-example for Angular with template:
-
-```ts
-import { moduleMetadata, storiesOf } from '@storybook/angular';
-import { centered } from '@storybook/addon-centered/angular';
-
-import { AppComponent } from '../app/app.component';
-
-storiesOf('Addon|Centered', module)
-  .addDecorator(
-    moduleMetadata({
-      declarations: [Button],
-    })
-  )
-  .addDecorator(centered)
-  .add('centered template', () => ({
-    template: `<storybook-button-component
-        [text]="text" (onClick)="onClick($event)">
-      </storybook-button-component>`,
-    props: {
-      text: 'Hello Button',
-      onClick: event => {
-        console.log('some bindings work');
-        console.log(event);
-      },
-    },
-  }));
-```
-
-Also, you can also add this decorator globally
-
-example for React:
-
-```js
-import { configure, addDecorator } from '@storybook/react';
-import centered from '@storybook/addon-centered/react';
-
-addDecorator(centered);
-
-configure(function () {
-  //...
-}, module);
-```
-
-example for Vue:
-
-```js
-import { configure, addDecorator } from '@storybook/vue';
-import centered from '@storybook/addon-centered/vue';
-
-addDecorator(centered);
-
-configure(function () {
-  //...
-}, module);
-```
-
-example for Svelte:
-
-```js
-import { configure, addDecorator } from '@storybook/svelte';
-import Centered from '@storybook/addon-centered/svelte';
-
-addDecorator(Centered);
-
-configure(function () {
-  //...
-}, module);
-```
-
-example for Mithril:
-
-```js
-import { configure, addDecorator } from '@storybook/mithril';
-import centered from '@storybook/addon-centered/mithril';
-
-addDecorator(centered);
-
-configure(function () {
-  //...
-}, module);
-```
-
-If you don't want to use centered for a story, you can disable it by using `{ disable: true }` to skip the addon:
-
-```js
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-storiesOf('Button', module)
-  .add('example', () => <button>Click me</button>, {
-    centered: { disable: true },
-  });
-```
diff --git a/addons/centered/angular.d.ts b/addons/centered/angular.d.ts
deleted file mode 100644
index 9864b1d2b817..000000000000
--- a/addons/centered/angular.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { StoryFn } from "@storybook/addons";
-
-export interface ICollection {
-  [p: string]: any;
-}
-
-export interface NgModuleMetadata {
-  declarations?: any[];
-  entryComponents?: any[];
-  imports?: any[];
-  schemas?: any[];
-  providers?: any[];
-}
-
-export interface IStory {
-  component?: any;
-  props?: ICollection;
-  propsMeta?: ICollection;
-  moduleMetadata?: NgModuleMetadata;
-  template?: string;
-  styles?: string[];
-}
-declare module '@storybook/addon-centered/angular' {
-  export function centered(story: StoryFn<IStory>): IStory;
-}
diff --git a/addons/centered/angular.js b/addons/centered/angular.js
deleted file mode 100644
index 186e1ad93b2a..000000000000
--- a/addons/centered/angular.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import fromCentered from './dist/angular';
-
-export const centered = fromCentered;
diff --git a/addons/centered/ember.d.ts b/addons/centered/ember.d.ts
deleted file mode 100644
index 21aa4cc429d6..000000000000
--- a/addons/centered/ember.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/ember';
-export default centered;
diff --git a/addons/centered/ember.js b/addons/centered/ember.js
deleted file mode 100644
index 84275eb46b4b..000000000000
--- a/addons/centered/ember.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/ember');
diff --git a/addons/centered/html.d.ts b/addons/centered/html.d.ts
deleted file mode 100644
index d77b06e2f51c..000000000000
--- a/addons/centered/html.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/html';
-export default centered;
diff --git a/addons/centered/html.js b/addons/centered/html.js
deleted file mode 100644
index 4f7edc6bedba..000000000000
--- a/addons/centered/html.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/html');
diff --git a/addons/centered/mithril.d.ts b/addons/centered/mithril.d.ts
deleted file mode 100644
index 1b0025189196..000000000000
--- a/addons/centered/mithril.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/mithril';
-export default centered;
diff --git a/addons/centered/mithril.js b/addons/centered/mithril.js
deleted file mode 100644
index 884a541476ec..000000000000
--- a/addons/centered/mithril.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/mithril');
diff --git a/addons/centered/package.json b/addons/centered/package.json
deleted file mode 100644
index 1857e4873678..000000000000
--- a/addons/centered/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "@storybook/addon-centered",
-  "version": "5.3.0-rc.0",
-  "description": "Storybook decorator to center components",
-  "keywords": [
-    "addon",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/centered",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/centered"
-  },
-  "license": "MIT",
-  "author": "Muhammed Thanish <mnmtanish@gmail.com>",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@types/mithril": "^1.1.16",
-    "mithril": "*",
-    "preact": "*",
-    "react": "*"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/centered/preact.d.ts b/addons/centered/preact.d.ts
deleted file mode 100644
index cae1370b3003..000000000000
--- a/addons/centered/preact.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/preact';
-export default centered;
diff --git a/addons/centered/preact.js b/addons/centered/preact.js
deleted file mode 100644
index 818efe1776d2..000000000000
--- a/addons/centered/preact.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/preact');
diff --git a/addons/centered/rax.js b/addons/centered/rax.js
deleted file mode 100644
index 232893d57a22..000000000000
--- a/addons/centered/rax.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/rax');
diff --git a/addons/centered/react.d.ts b/addons/centered/react.d.ts
deleted file mode 100644
index e41e86729f25..000000000000
--- a/addons/centered/react.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/react';
-export default centered;
diff --git a/addons/centered/react.js b/addons/centered/react.js
deleted file mode 100644
index 70e1111ae070..000000000000
--- a/addons/centered/react.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/react');
diff --git a/addons/centered/src/angular.ts b/addons/centered/src/angular.ts
deleted file mode 100644
index a30c418a5341..000000000000
--- a/addons/centered/src/angular.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { makeDecorator, StoryFn } from '@storybook/addons';
-import { IStory } from '../angular.d';
-import parameters from './parameters';
-import styles from './styles';
-
-function getComponentSelector(component: any) {
-  // eslint-disable-next-line no-underscore-dangle
-  return component.__annotations__[0].selector;
-}
-
-function getTemplate(metadata: any) {
-  let tpl = '';
-  if (metadata.component) {
-    const selector = getComponentSelector(metadata.component);
-    tpl = `<${selector}></${selector}>`;
-  }
-
-  if (metadata.template) {
-    tpl = metadata.template;
-  }
-
-  return `      
-      <div [ngStyle]="styles.style">
-        <div [ngStyle]="styles.innerStyle">
-          ${tpl}
-        </div>
-      </div>`;
-}
-
-function getModuleMetadata(metadata: any) {
-  const { moduleMetadata, component } = metadata;
-
-  if (component && !moduleMetadata) {
-    return {
-      declarations: [metadata.component],
-    };
-  }
-
-  if (component && moduleMetadata) {
-    return {
-      ...moduleMetadata,
-      declarations: [...moduleMetadata.declarations, metadata.component],
-    };
-  }
-
-  return moduleMetadata;
-}
-
-function centered(metadataFn: StoryFn<IStory>) {
-  const metadata = metadataFn();
-
-  return {
-    ...metadata,
-    template: getTemplate(metadata),
-    moduleMetadata: getModuleMetadata(metadata),
-    props: {
-      ...metadata.props,
-      styles,
-    },
-  };
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as StoryFn),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/components/Centered.svelte b/addons/centered/src/components/Centered.svelte
deleted file mode 100644
index 287c83ecff34..000000000000
--- a/addons/centered/src/components/Centered.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="svelte-centered-wrapper" style="{style}">
-  <div class="svelte-centered-container" style="{innerStyle}">
-    <slot></slot>
-  </div>
-</div>
-
-<script>
-  export let style = '';
-  export let innerStyle = '';
-</script>
diff --git a/addons/centered/src/ember.ts b/addons/centered/src/ember.ts
deleted file mode 100644
index 71b311b4d98b..000000000000
--- a/addons/centered/src/ember.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { document } from 'global';
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered(storyFn: () => { template: any; context: any }) {
-  const { template, context } = storyFn();
-
-  const element = document.createElement('div');
-  Object.assign(element.style, styles.style);
-
-  const innerElement = document.createElement('div');
-  Object.assign(innerElement.style, styles.innerStyle);
-
-  element.appendChild(innerElement);
-
-  // the inner element should append the parent
-  innerElement.appendTo = function appendTo(el: any) {
-    el.appendChild(element);
-  };
-
-  return {
-    template,
-    context,
-    element: innerElement,
-  };
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as any),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/helpers/json2CSS.ts b/addons/centered/src/helpers/json2CSS.ts
deleted file mode 100644
index 11e939b15962..000000000000
--- a/addons/centered/src/helpers/json2CSS.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { document } from 'global';
-
-/**
- * Not all frameworks support an object for the style attribute but we want all to
- * consume `styles.json`. Since `styles.json` uses standard style properties for keys,
- * we can just set them on an element and then get the string result of that element's
- * `style` attribute. This also means that invalid styles are filtered out.
- *
- * @param {Object} jsonStyles
- * @returns {string}
- * @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles
- */
-export default function jsonToCss(jsonStyles: Partial<CSSStyleDeclaration>) {
-  const frag = document.createElement('div') as HTMLDivElement;
-
-  Object.keys(jsonStyles).forEach(key => {
-    (frag.style as any)[key] = (jsonStyles as any)[key];
-  });
-
-  return frag.getAttribute('style');
-}
diff --git a/addons/centered/src/html.ts b/addons/centered/src/html.ts
deleted file mode 100644
index a9eba8810679..000000000000
--- a/addons/centered/src/html.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { document, Node } from 'global';
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-const INNER_ID = 'sb-addon-centered-inner';
-const WRAPPER_ID = 'sb-addon-centered-wrapper';
-
-function getOrCreate(id: string, style: Partial<CSSStyleDeclaration>): HTMLDivElement {
-  const elementOnDom = document.getElementById(id);
-
-  if (elementOnDom) {
-    return elementOnDom;
-  }
-
-  const element = document.createElement('div') as HTMLDivElement;
-  element.setAttribute('id', id);
-  Object.assign(element.style, style);
-
-  return element;
-}
-
-function getInnerDiv() {
-  return getOrCreate(INNER_ID, styles.innerStyle);
-}
-
-function getWrapperDiv() {
-  return getOrCreate(WRAPPER_ID, styles.style);
-}
-
-function centered(storyFn: () => any) {
-  const inner = getInnerDiv();
-  const wrapper = getWrapperDiv();
-  wrapper.appendChild(inner);
-
-  const element = storyFn();
-
-  if (typeof element === 'string') {
-    inner.innerHTML = element;
-  } else if (element instanceof Node) {
-    inner.innerHTML = '';
-    inner.appendChild(element);
-  } else {
-    return element;
-  }
-
-  return wrapper;
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as any),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/index.ts b/addons/centered/src/index.ts
deleted file mode 100644
index 1bb9f82933ae..000000000000
--- a/addons/centered/src/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { window } from 'global';
-import deprecate from 'util-deprecate';
-
-import ReactCentered from './react';
-import VueCentered from './vue';
-
-// TODO: REMOVE this entire file in V6.0.0
-
-const Centered = deprecate(
-  () => (window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered),
-  `
-  Using "import centered from '@storybook/addon-centered'" is deprecated.
-  Please use either:
-  "import centered from '@storybook/addon-centered/react'"
-  or
-  "import centered from '@storybook/addon-centered/vue'"
-`
-)();
-
-export default Centered;
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/mithril.tsx b/addons/centered/src/mithril.tsx
deleted file mode 100644
index 5398d7da5a68..000000000000
--- a/addons/centered/src/mithril.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/** @jsx m */
-/* eslint-disable import/no-extraneous-dependencies */
-import m, { ComponentTypes } from 'mithril';
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered(storyFn: () => ComponentTypes) {
-  return {
-    view: () => (
-      <div style={styles.style}>
-        <div style={styles.innerStyle}>{m(storyFn())}</div>
-      </div>
-    ),
-  };
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as any),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/parameters.ts b/addons/centered/src/parameters.ts
deleted file mode 100644
index 8baf40666645..000000000000
--- a/addons/centered/src/parameters.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const parameters = {
-  name: 'centered',
-  parameterName: 'centered',
-} as const;
-
-export default parameters;
diff --git a/addons/centered/src/preact.tsx b/addons/centered/src/preact.tsx
deleted file mode 100644
index ed2175159472..000000000000
--- a/addons/centered/src/preact.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @jsx h */
-/* eslint-disable import/no-extraneous-dependencies */
-import { Component, h } from 'preact';
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered(storyFn: () => Component) {
-  return (
-    <div style={styles.style}>
-      <div style={styles.innerStyle}>{storyFn()}</div>
-    </div>
-  );
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as any),
-});
diff --git a/addons/centered/src/rax.js b/addons/centered/src/rax.js
deleted file mode 100644
index ab3d0c3e2876..000000000000
--- a/addons/centered/src/rax.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/** @jsx createElement */
-/* eslint-disable import/no-extraneous-dependencies */
-import { createElement } from 'rax';
-import View from 'rax-view';
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered(storyFn) {
-  return (
-    <View style={styles.style}>
-      <View style={styles.innerStyle}>{storyFn()}</View>
-    </View>
-  );
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: centered,
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/react.tsx b/addons/centered/src/react.tsx
deleted file mode 100644
index f914f3120c7b..000000000000
--- a/addons/centered/src/react.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { ReactNode } from 'react';
-import { makeDecorator, StoryFn } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered(storyFn: () => ReactNode) {
-  return (
-    <div style={styles.style}>
-      <div style={styles.innerStyle}>{storyFn()}</div>
-    </div>
-  );
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as StoryFn),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts
deleted file mode 100644
index 9a8dcf291da4..000000000000
--- a/addons/centered/src/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-const styles = {
-  style: {
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    bottom: '0',
-    right: '0',
-    display: 'flex',
-    alignItems: 'center',
-    overflow: 'auto',
-  },
-  innerStyle: {
-    margin: 'auto',
-    maxHeight: '100%', // Hack for centering correctly in IE11
-  },
-} as const;
-
-export default styles;
diff --git a/addons/centered/src/svelte.ts b/addons/centered/src/svelte.ts
deleted file mode 100644
index 8445ce5a0d4d..000000000000
--- a/addons/centered/src/svelte.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { makeDecorator } from '@storybook/addons';
-import Centered from './components/Centered.svelte';
-import styles from './styles';
-import json2CSS from './helpers/json2CSS';
-import parameters from './parameters';
-
-const centeredStyles = {
-  /** @type {string} */
-  style: json2CSS(styles.style),
-  /** @type {string} */
-  innerStyle: json2CSS(styles.innerStyle),
-};
-
-/**
- * This functionality works by passing the svelte story component into another
- * svelte component that has the single purpose of centering the story component
- * using a wrapper and container.
- *
- * We use the special element <svelte:component /> to achieve this.
- *
- * @see https://svelte.technology/guide#svelte-component
- */
-function centered(storyFn: () => any) {
-  const { Component: OriginalComponent, props, on } = storyFn();
-
-  return {
-    Component: OriginalComponent,
-    props,
-    on,
-    Wrapper: Centered,
-    WrapperData: centeredStyles,
-  };
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: getStory => centered(getStory as any),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/src/typings.d.ts b/addons/centered/src/typings.d.ts
deleted file mode 100644
index ad116294c0f6..000000000000
--- a/addons/centered/src/typings.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare module 'global';
-declare module '*.svelte';
diff --git a/addons/centered/src/vue.ts b/addons/centered/src/vue.ts
deleted file mode 100644
index 180a270ca7af..000000000000
--- a/addons/centered/src/vue.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { makeDecorator } from '@storybook/addons';
-import parameters from './parameters';
-import styles from './styles';
-
-function centered() {
-  return {
-    template: `
-      <div :style="style">
-        <div :style="innerStyle">
-          <story/>
-        </div>
-      </div>
-    `,
-    data() {
-      return styles;
-    },
-  };
-}
-
-export default makeDecorator({
-  ...parameters,
-  wrapper: centered,
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/centered/svelte.d.ts b/addons/centered/svelte.d.ts
deleted file mode 100644
index d87cbef37cbb..000000000000
--- a/addons/centered/svelte.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/svelte';
-export default centered;
diff --git a/addons/centered/svelte.js b/addons/centered/svelte.js
deleted file mode 100644
index a7f426b42da8..000000000000
--- a/addons/centered/svelte.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/svelte');
diff --git a/addons/centered/vue.d.ts b/addons/centered/vue.d.ts
deleted file mode 100644
index a54367f70b46..000000000000
--- a/addons/centered/vue.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import centered from './dist/vue';
-export default centered;
diff --git a/addons/centered/vue.js b/addons/centered/vue.js
deleted file mode 100644
index 42311b17563f..000000000000
--- a/addons/centered/vue.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/vue');
diff --git a/addons/contexts/README.md b/addons/contexts/README.md
deleted file mode 100644
index 34d98fa61e59..000000000000
--- a/addons/contexts/README.md
+++ /dev/null
@@ -1,235 +0,0 @@
-# Storybook Addon Contexts
-
-**Storybook Addon Contexts** is an addon for driving your components under dynamic contexts in
-[Storybook](https://storybook.js.org/).
-
-## 💡 Why you need this?
-
-Real world users expects your application being customizable, that is why often your components are **polymorphic**:
-they need to adapt themselves under different contextual environments. Imagine your components can speak
-Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make
-sure a component looks great in all scenarios.
-
-A good practice to write maintainable components is separate the presentation and its business logic. Storybook is
-a great place for exercising the visualization and interaction of your components, which may depend on some contexts.
-Often enough, you will find it become very tedious to wrap each component deeply with its contextual environments
-before you can really write the main story. You even start to write extra components or factory functions just to
-make your life easier. How about changing the context of your story dynamically?! There was simply no good way so 
-you ended up writing stories like an accountant.
-
-That is why you need this. An elegant way to wrap your component stories and change their contextual environment
-directly and dynamically in Storybook UI! Kind of like a dependency injection, eh! The best bit is **you define it
-once then apply it everywhere**.
-
-## ✅ Features
-
-1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories
-   declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable.
-2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into
-   different environments (e.g. languages or themes ) to understand how your component is going to respond.
-3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even
-   use it to bridge with your favorite routing, state-management solutions, or even your own
-   [React Context](https://reactjs.org/docs/context.html) provider.
-4. Offer chainable and granular configurations. It is even possible to fine-tune at per story level.
-5. Visual regression friendly. You can use this addon to drive the same story under different contexts to smoke
-   test important visual states.
-
-## 🧰 Requirements
-
-Make sure the version of your Storybook is above v5. For the full list of the current supported frameworks, see
-[Addon / Framework Support Table](../../ADDONS_SUPPORT.md).
-
-## 🎬 Getting started
-
-To get it started, add this package into your project:
-
-```bash
-yarn add -D @storybook/addon-contexts
-```
-
-within `.storybook/main.js`:
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-contexts/register']
-}
-```
-
-To load your contextual setups for your stories globally, add the following lines into `preview.js` file (you should
-see it near your `addon.js` file):
-
-```js
-import { addDecorator } from '@storybook/[framework]';
-import { withContexts } from '@storybook/addon-contexts/[framework]';
-import { contexts } from './configs/contexts'; // we will define the contextual setups later in API section
-
-addDecorator(withContexts(contexts));
-```
-
-Alternatively, like other addons, you can use this addon only for a given set of stories:
-
-```js
-import { withContexts } from '@storybook/addon-contexts/[framework]';
-import { contexts } from './configs/contexts';
-
-export default {
-  title: 'Component With Contexts',
-  decorators: [withContexts(contexts)],
-};
-```
-
-Finally, you may want to modify the default setups at per story level. Here is how you can do this:
-
-```js
-export const defaultView = () => <div />;
-defaultView.story = {
-  parameters: {
-    context: [{}]
-  }
-};
-```
-
-## ⚙️ Setups
-
-### Overview
-
-It is recommended to have a separate file for managing your contextual environment setups. Let's add a file named
-`contexts.js` first. Before diving into API details, here is an overview on the landscape. For example (in React),
-to inject component theming contexts to both `styled-components` and `material-ui` theme providers in stories:
-
-```js
-export const contexts = [
-  {
-    icon: 'box', // a icon displayed in the Storybook toolbar to control contextual props
-    title: 'Themes', // an unique name of a contextual environment
-    components: [
-      // an array of components that is going to be injected to wrap stories
-      /* Styled-components ThemeProvider, */
-      /* Material-ui ThemeProvider, */
-    ],
-    params: [
-      // an array of params contains a set of predefined `props` for `components`
-      { name: 'Light Theme', props: { theme /* : your dark theme */ } },
-      { name: 'Dark Theme', props: { theme /* : your light theme */ }, default: true },
-    ],
-    options: {
-      deep: true, // pass the `props` deeply into all wrapping components
-      disable: false, // disable this contextual environment completely
-      cancelable: false, // allow this contextual environment to be opt-out optionally in toolbar
-    },
-  },
-  /* ... */ // multiple contexts setups are supported
-];
-```
-
----
-
-### APIs
-
-#### `withContexts(contexts) : function`
-
-A decorating function for wrapping your stories under your predefined `contexts`. This means multiple contextual
-environments are supported. They are going to be loaded layer by layer and wrapped in a descending oder (top -> down
--> story). The `contexts` is an array of objects that should have the following properties:
-
----
-
-#### `icon : string?`
-
-(default `undefined`)
-
-An icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for
-each contextual environment individually. Take a look at the currently supported
-[icon lists](https://storybooks-official.netlify.com/?path=/story/basics-icon--labels) from the official Storybook
-story. You must define an icon first if you want to take advantage of switching props dynamically in your Storybook
-toolbar.
-
----
-
-#### `title : string`
-
-(required)
-
-A unique name of a contextual environment; if duplicate names are provided, the latter is going to be ignored.
-
----
-
-#### `components : (Component|string)[]`
-
-(required)
-
-An array of components that is going to be injected to wrap stories. This means this addon allows multiple wrapping
-components to coexist. The wrapping sequence is from the left to right (parent -> children -> story). This nested
-wrapping behaviour can be useful in some cases; for instance, in the above example, we are wrapping stories under
-`styled-components` and `material-ui` theme providers. Also, you can use this addon to wrap any valid HTML tags.
-
----
-
-#### `params : object[] | undefined`
-
-(default: `undefined`)
-
-An array of params contains a set of predefined `props` for `components`. This object has the following properties:
-
-#### `params.name : string`
-
-(required)
-
-A unique name for representing the props.
-
-#### `params.props : object | null:`
-
-(required)
-
-The `props` that are accepted by the wrapping component(s).
-
-#### `params.default : true?`
-
-(default: `undefined`)
-
-Set to `true` if you want to use this param initially. Only the first one marked as default is identified.
-
----
-
-#### `options`
-
-A set of options offers more granular control over the defined contextual environment. These properties can be
-overridden at the story level:
-
-#### `options.deep : boolean?`
-
-(default: `false`)
-
-Pass the `props` deeply into all wrapping components. Useful when you want them all to be passed with the same props.
-
-#### `options.disable : boolean?`
-
-(default: `false`)
-
-Disable this contextual environment completely. Useful when you want to opt-out this context from a given story.
-
-#### `options.cancelable : boolean?`
-
-(default: `false`)
-
-Allow this contextual environment to be opt-out optionally in toolbar. When set to `true`, an **Off** option will
-be shown at first in the toolbar menu in your Storybook.
-
-## 📔 Notes
-
-1. You can use this addon to inject any valid components, that is why `icon` and `params` can be optional.
-2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are
-   passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`.
-3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the
-   correct `title`); however, they are never be able to overridden the default setups. So it is important to have
-   non-colliding names.
-4. The addon will persist the selected params (the addon state) between stories at run-time (similar to other
-   addons). If the active params were gone after story switching, it falls back to the default then the first. As a
-   rule of thumb, whenever collisions are possible, the first always wins.
-5. Query parameters are supported for pre-selecting contexts param, which comes in handy for visual regression testing.
-   You can do this by appending `&contexts=[name of contexts]=[name of param]` in the URL under iframe mode. Use `,`
-   to separate multiple contexts (e.g. `&contexts=Theme=Forests,Language=Fr`).
-
-## 📖 License
-
-MIT
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
deleted file mode 100644
index c9226e028d88..000000000000
--- a/addons/contexts/package.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
-  "name": "@storybook/addon-contexts",
-  "version": "5.3.0-rc.0",
-  "description": "Storybook Addon Contexts",
-  "keywords": [
-    "preact",
-    "react",
-    "storybook",
-    "vue"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/contexts"
-  },
-  "license": "MIT",
-  "author": "Leo Y. Li",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/register.js",
-  "scripts": {
-    "dev:check-types": "tsc --noEmit",
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "qs": "^6.6.0"
-  },
-  "peerDependencies": {
-    "global": "*",
-    "preact": "*",
-    "qs": "*",
-    "react": "*",
-    "vue": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/contexts/preact.js b/addons/contexts/preact.js
deleted file mode 100644
index 6faa6b4ca5e5..000000000000
--- a/addons/contexts/preact.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withContexts } from './dist/preview/frameworks/preact';
-
-export { withContexts };
-export default withContexts;
diff --git a/addons/contexts/react.js b/addons/contexts/react.js
deleted file mode 100644
index 896dd41d75b0..000000000000
--- a/addons/contexts/react.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withContexts } from './dist/preview/frameworks/react';
-
-export { withContexts };
-export default withContexts;
diff --git a/addons/contexts/src/index.ts b/addons/contexts/src/index.ts
deleted file mode 100644
index 8ad41621ff95..000000000000
--- a/addons/contexts/src/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { makeDecorator, StoryWrapper } from '@storybook/addons';
-import { ContextsPreviewAPI } from './preview/ContextsPreviewAPI';
-import { ID, PARAM } from './shared/constants';
-import { AddonSetting, AnyFunctionReturns, ContextNode, PropsMap } from './shared/types.d';
-
-/**
- * This file serves a idiomatic facade of a Storybook decorator.
- *
- * Wrapper function get called whenever the Storybook rerender the view.  This reflow logic is
- * framework agnostic; on the other hand, the framework specific bindings are the implementation
- * details hidden behind the passed `render` function.
- *
- * Here, we need a dedicated singleton as a state manager for preview (the addon API, in vanilla)
- * who is also knowing how to communicate with the Storybook manager (in React) via the Storybook
- * event system.
- *
- * @param {Render} render - framework specific bindings
- */
-export type Render<T> = (...args: [ContextNode[], PropsMap, AnyFunctionReturns<T>]) => T;
-type CreateAddonDecorator = <T>(render: Render<T>) => (contexts: AddonSetting[]) => unknown;
-
-export const createAddonDecorator: CreateAddonDecorator = render => {
-  const wrapper: StoryWrapper = (getStory, context, settings: any) => {
-    const { getContextNodes, getSelectionState, getPropsMap } = ContextsPreviewAPI();
-    const nodes = getContextNodes(settings);
-    const state = getSelectionState();
-    const props = getPropsMap(nodes, state);
-    return render(nodes, props, () => getStory(context));
-  };
-
-  return makeDecorator({
-    name: ID,
-    parameterName: PARAM,
-    skipIfNoParametersOrOptions: true,
-    allowDeprecatedUsage: false,
-    wrapper,
-  });
-};
diff --git a/addons/contexts/src/manager/ContextsManager.tsx b/addons/contexts/src/manager/ContextsManager.tsx
deleted file mode 100644
index 2af9ef30aa3e..000000000000
--- a/addons/contexts/src/manager/ContextsManager.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useChannel } from '@storybook/api';
-import { ToolBar } from './components/ToolBar';
-import { deserialize, serialize } from '../shared/serializers';
-import { PARAM, REBOOT_MANAGER, UPDATE_MANAGER, UPDATE_PREVIEW } from '../shared/constants';
-import { FCNoChildren, ManagerAPI } from '../shared/types.d';
-
-/**
- * A smart component for handling manager-preview interactions.
- */
-type ContextsManager = FCNoChildren<{
-  api: ManagerAPI;
-}>;
-
-export const ContextsManager: ContextsManager = ({ api }) => {
-  const [nodes, setNodes] = useState([]);
-  const [state, setState] = useState(deserialize(api.getQueryParam(PARAM)));
-  const setSelected = useCallback(
-    (nodeId, name) => setState(obj => ({ ...obj, [nodeId]: name })),
-    []
-  );
-
-  // from preview
-  const emit = useChannel({
-    [UPDATE_MANAGER]: newNodes => setNodes(newNodes || []),
-  });
-
-  // to preview
-  useEffect(() => emit(REBOOT_MANAGER), []);
-  useEffect(() => emit(UPDATE_PREVIEW, state), [state]);
-  useEffect(() => api.setQueryParams({ [PARAM]: serialize(state) }), [state]);
-
-  return <ToolBar nodes={nodes} state={state || {}} setSelected={setSelected} />;
-};
diff --git a/addons/contexts/src/manager/components/ToolBar.test.tsx b/addons/contexts/src/manager/components/ToolBar.test.tsx
deleted file mode 100644
index 35caba83f2c6..000000000000
--- a/addons/contexts/src/manager/components/ToolBar.test.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { ToolBar } from './ToolBar';
-
-describe('Tests on addon-contexts component: ToolBar', () => {
-  it('should render nothing if receive an empty contextNodes', () => {
-    // when
-    const result = shallow(<ToolBar nodes={[]} state={{}} setSelected={jest.fn} />);
-
-    // then
-    expect(result).toMatchInlineSnapshot(`""`);
-  });
-
-  it('should spawn ToolBarControl based on the given contextNodes', () => {
-    // given
-    const someContextNodes = [
-      {
-        components: ['span'],
-        icon: 'box' as const,
-        nodeId: 'Some Context A',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: '', props: {} }],
-        title: 'Some Context A',
-      },
-      {
-        components: ['div'],
-        icon: 'box' as const,
-        nodeId: 'Some Context B',
-        options: { cancelable: true, deep: false, disable: false },
-        params: [
-          { name: 'Some Param X', props: {} },
-          { name: 'Some Param Y', props: {} },
-        ],
-        title: 'Some Context B',
-      },
-    ];
-    const someSelectionState = {
-      'Some Context B': 'Some Param Y',
-    };
-
-    // when
-    const result = shallow(
-      <ToolBar nodes={someContextNodes} state={someSelectionState} setSelected={jest.fn} />
-    );
-
-    // then
-    expect(result).toMatchInlineSnapshot(`
-      <Fragment>
-        <Separator />
-        <ToolBarControl
-          icon="box"
-          key="Some Context A"
-          nodeId="Some Context A"
-          options={
-            Object {
-              "cancelable": false,
-              "deep": false,
-              "disable": false,
-            }
-          }
-          params={
-            Array [
-              Object {
-                "name": "",
-                "props": Object {},
-              },
-            ]
-          }
-          selected=""
-          setSelected={[Function]}
-          title="Some Context A"
-        />
-        <ToolBarControl
-          icon="box"
-          key="Some Context B"
-          nodeId="Some Context B"
-          options={
-            Object {
-              "cancelable": true,
-              "deep": false,
-              "disable": false,
-            }
-          }
-          params={
-            Array [
-              Object {
-                "name": "Some Param X",
-                "props": Object {},
-              },
-              Object {
-                "name": "Some Param Y",
-                "props": Object {},
-              },
-            ]
-          }
-          selected="Some Param Y"
-          setSelected={[Function]}
-          title="Some Context B"
-        />
-      </Fragment>
-    `);
-  });
-});
diff --git a/addons/contexts/src/manager/components/ToolBar.tsx b/addons/contexts/src/manager/components/ToolBar.tsx
deleted file mode 100644
index 863d36aa9903..000000000000
--- a/addons/contexts/src/manager/components/ToolBar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ComponentProps, memo } from 'react';
-import { Separator } from '@storybook/components';
-import { ToolBarControl } from './ToolBarControl';
-import { ContextNode, FCNoChildren, SelectionState } from '../../shared/types.d';
-
-type ToolBar = FCNoChildren<{
-  nodes: ContextNode[];
-  state: SelectionState;
-  setSelected: ComponentProps<typeof ToolBarControl>['setSelected'];
-}>;
-
-export const ToolBar: ToolBar = memo(({ nodes, state, setSelected }) =>
-  nodes.length ? (
-    <>
-      <Separator />
-      {nodes.map(({ components, ...forwardProps }) => (
-        <ToolBarControl
-          {...forwardProps}
-          setSelected={setSelected}
-          selected={state[forwardProps.nodeId] || ''}
-          key={forwardProps.nodeId}
-        />
-      ))}
-    </>
-  ) : null
-);
diff --git a/addons/contexts/src/manager/components/ToolBarControl.test.tsx b/addons/contexts/src/manager/components/ToolBarControl.test.tsx
deleted file mode 100644
index 975f420dc27f..000000000000
--- a/addons/contexts/src/manager/components/ToolBarControl.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { ToolBarControl } from './ToolBarControl';
-import { OPT_OUT } from '../../shared/constants';
-
-describe('Tests on addon-contexts component: ToolBarControl', () => {
-  // given
-  const someBasicProps = {
-    icon: 'box' as const,
-    nodeId: 'Some Context',
-    options: { cancelable: true, deep: false, disable: false },
-    params: [
-      { name: 'A', props: {} },
-      { name: 'B', props: {} },
-    ],
-    title: 'Some Context',
-    selected: '',
-    setSelected: jest.fn,
-  };
-
-  it('should control menu: set as inactive if being out-out (if cancelable)', () => {
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} selected={OPT_OUT} />);
-
-    // then
-    expect(result.props().active).toBe(false);
-  });
-
-  it('should control menu: valid "selected" to give "activeName"', () => {
-    // given
-    const selected = 'C';
-    const anotherSelected = 'B';
-
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} selected={selected} />);
-    const anotherResult = shallow(
-      <ToolBarControl {...someBasicProps} selected={anotherSelected} />
-    );
-
-    // then
-    expect(result.props().optionsProps.activeName).not.toBe(selected);
-    expect(anotherResult.props().optionsProps.activeName).toBe(anotherSelected);
-  });
-
-  it('should control menu: fallback "activeName" to the default param', () => {
-    // given
-    const name = 'C';
-    const params = [...someBasicProps.params, { name, props: {}, default: true }];
-
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} params={params} />);
-
-    // then
-    expect(result.props().optionsProps.activeName).toBe(name);
-  });
-
-  it('should control menu: fallback "activeName" to the first (if default not found)', () => {
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} />);
-
-    // then
-    expect(result.props().optionsProps.activeName).toBe(someBasicProps.params[0].name);
-  });
-
-  it('should render nothing if being disabled', () => {
-    // given
-    const options = { ...someBasicProps.options, disable: true };
-
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} options={options} />);
-
-    // then
-    expect(result).toMatchInlineSnapshot(`""`);
-  });
-
-  it('should document the shallowly rendered result', () => {
-    // when
-    const result = shallow(<ToolBarControl {...someBasicProps} />);
-
-    // then
-    expect(result).toMatchInlineSnapshot(`
-      <ToolBarMenu
-        active={true}
-        expanded={false}
-        icon="box"
-        optionsProps={
-          Object {
-            "activeName": "A",
-            "list": Array [
-              "__OPT_OUT__",
-              "A",
-              "B",
-            ],
-            "onSelectOption": [Function],
-          }
-        }
-        setExpanded={[Function]}
-        title="Some Context"
-      />
-    `);
-  });
-});
diff --git a/addons/contexts/src/manager/components/ToolBarControl.tsx b/addons/contexts/src/manager/components/ToolBarControl.tsx
deleted file mode 100644
index c6c42b761300..000000000000
--- a/addons/contexts/src/manager/components/ToolBarControl.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { ToolBarMenu } from './ToolBarMenu';
-import { OPT_OUT } from '../../shared/constants';
-import { ContextNode, FCNoChildren } from '../../shared/types.d';
-
-type ToolBarControl = FCNoChildren<
-  Omit<
-    ContextNode & {
-      selected: string;
-      setSelected: (nodeId: string, name: string) => void;
-    },
-    'components'
-  >
->;
-
-export const ToolBarControl: ToolBarControl = ({
-  nodeId,
-  icon,
-  title,
-  params,
-  options,
-  selected,
-  setSelected,
-}) => {
-  const [expanded, setExpanded] = useState(false);
-  const paramNames = params.map(({ name }) => name);
-  const activeName =
-    // validate the integrity of the selected name
-    ([...paramNames, options.cancelable && OPT_OUT].includes(selected) && selected) ||
-    // fallback to default
-    (params.find(param => !!param.default) || { name: null }).name ||
-    // fallback to the first
-    params[0].name;
-  const list = options.cancelable ? [OPT_OUT, ...paramNames] : paramNames;
-  const props = {
-    title,
-    active: activeName !== OPT_OUT,
-    expanded,
-    setExpanded,
-    optionsProps: {
-      activeName,
-      list,
-      onSelectOption: (name: string) => () => {
-        setExpanded(false);
-        setSelected(nodeId, name);
-      },
-    },
-  };
-
-  return Array.isArray(list) && list.length && !options.disable ? (
-    <ToolBarMenu icon={icon} {...props} />
-  ) : null;
-};
diff --git a/addons/contexts/src/manager/components/ToolBarMenu.test.tsx b/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
deleted file mode 100644
index 8eb15db3f65d..000000000000
--- a/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { ToolBarMenu } from './ToolBarMenu';
-
-describe('Tests on addon-contexts component: ToolBarMenu', () => {
-  it('should glue `@storybook/ui` components to produce a context menu', () => {
-    // given
-    const someProps = {
-      icon: 'globe' as const,
-      title: 'Some Context',
-      active: true,
-      expanded: false,
-      setExpanded: jest.fn,
-      optionsProps: {
-        activeName: 'A',
-        list: ['A', 'B'],
-        onSelectOption: jest.fn,
-      },
-    };
-
-    // when
-    const result = shallow(<ToolBarMenu {...someProps} />);
-
-    // then
-    expect(result).toMatchInlineSnapshot(`
-      <WithTooltipPure
-        closeOnClick={true}
-        hasChrome={true}
-        modifiers={Object {}}
-        onVisibilityChange={[Function]}
-        placement="top"
-        svg={false}
-        tooltip={
-          <ToolBarMenuOptions
-            activeName="A"
-            list={
-              Array [
-                "A",
-                "B",
-              ]
-            }
-            onSelectOption={[Function]}
-          />
-        }
-        tooltipShown={false}
-        trigger="click"
-      >
-        <IconButton
-          active={true}
-          title="Some Context"
-        >
-          <Icons
-            icon="globe"
-          />
-        </IconButton>
-      </WithTooltipPure>
-    `);
-  });
-
-  it('should render TabButton with title if the icon is given', () => {
-    // given
-    const someProps = {
-      title: 'Some Context',
-      active: true,
-      expanded: false,
-      setExpanded: jest.fn,
-      optionsProps: {
-        activeName: 'A',
-        list: ['A', 'B'],
-        onSelectOption: jest.fn,
-      },
-    };
-
-    // when
-    const result = shallow(<ToolBarMenu {...someProps} />);
-
-    // then
-    expect(result).toMatchInlineSnapshot(`
-      <WithTooltipPure
-        closeOnClick={true}
-        hasChrome={true}
-        modifiers={Object {}}
-        onVisibilityChange={[Function]}
-        placement="top"
-        svg={false}
-        tooltip={
-          <ToolBarMenuOptions
-            activeName="A"
-            list={
-              Array [
-                "A",
-                "B",
-              ]
-            }
-            onSelectOption={[Function]}
-          />
-        }
-        tooltipShown={false}
-        trigger="click"
-      >
-        <TabButton
-          active={true}
-        >
-          Some Context
-        </TabButton>
-      </WithTooltipPure>
-    `);
-  });
-});
diff --git a/addons/contexts/src/manager/components/ToolBarMenu.tsx b/addons/contexts/src/manager/components/ToolBarMenu.tsx
deleted file mode 100644
index dc19a6fccf72..000000000000
--- a/addons/contexts/src/manager/components/ToolBarMenu.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { Icons, IconButton, WithTooltipPure, TabButton } from '@storybook/components';
-import { ToolBarMenuOptions } from './ToolBarMenuOptions';
-import { ContextNode, FCNoChildren } from '../../shared/types.d';
-
-type ToolBarMenu = FCNoChildren<{
-  icon?: ComponentProps<typeof Icons>['icon'] | '' | void;
-  title: ContextNode['title'];
-  active: boolean;
-  expanded: boolean;
-  setExpanded: (state: boolean) => void;
-  optionsProps: ComponentProps<typeof ToolBarMenuOptions>;
-}>;
-
-export const ToolBarMenu: ToolBarMenu = ({
-  icon,
-  title,
-  active,
-  expanded,
-  setExpanded,
-  optionsProps,
-}) => (
-  <WithTooltipPure
-    closeOnClick
-    trigger="click"
-    placement="top"
-    tooltipShown={expanded}
-    onVisibilityChange={setExpanded}
-    tooltip={<ToolBarMenuOptions {...optionsProps} />}
-  >
-    {icon ? (
-      <IconButton active={active} title={title}>
-        <Icons icon={icon} />
-      </IconButton>
-    ) : (
-      <TabButton active={active}>{title}</TabButton>
-    )}
-  </WithTooltipPure>
-);
diff --git a/addons/contexts/src/manager/components/ToolBarMenuOptions.test.tsx b/addons/contexts/src/manager/components/ToolBarMenuOptions.test.tsx
deleted file mode 100644
index d22a88153572..000000000000
--- a/addons/contexts/src/manager/components/ToolBarMenuOptions.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { ToolBarMenuOptions } from './ToolBarMenuOptions';
-import { OPT_OUT } from '../../shared/constants';
-
-describe('Tests on addon-contexts component: ToolBarMenuOptions', () => {
-  it('should glue TooltipLinkList and set the active item correspondingly', () => {
-    // given
-    const list = [OPT_OUT, 'A', 'B'];
-    const activeName = 'B';
-
-    // when
-    const result = shallow(
-      <ToolBarMenuOptions activeName={activeName} list={list} onSelectOption={jest.fn} />
-    );
-
-    // then
-    expect(result.props().links.length).toBe(list.length);
-    expect(result.props().links.find((link: any) => link.title === activeName).active).toBe(true);
-    expect(result).toMatchInlineSnapshot(`
-      <TooltipLinkList
-        LinkWrapper={null}
-        links={
-          Array [
-            Object {
-              "active": false,
-              "id": "__OPT_OUT__",
-              "key": "__OPT_OUT__",
-              "onClick": [MockFunction],
-              "title": "Off",
-            },
-            Object {
-              "active": false,
-              "id": "A",
-              "key": "A",
-              "onClick": [MockFunction],
-              "title": "A",
-            },
-            Object {
-              "active": true,
-              "id": "B",
-              "key": "B",
-              "onClick": [MockFunction],
-              "title": "B",
-            },
-          ]
-        }
-      />
-    `);
-  });
-});
diff --git a/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx b/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx
deleted file mode 100644
index 1e1f0f3ed378..000000000000
--- a/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { TooltipLinkList } from '@storybook/components';
-import { OPT_OUT } from '../../shared/constants';
-import { FCNoChildren } from '../../shared/types.d';
-
-type ToolBarMenuOptions = FCNoChildren<{
-  activeName: string;
-  list: string[];
-  onSelectOption: (name: string) => () => void;
-}>;
-
-export const ToolBarMenuOptions: ToolBarMenuOptions = ({ activeName, list, onSelectOption }) => (
-  <TooltipLinkList
-    links={list.map(name => ({
-      key: name,
-      id: name,
-      title: name !== OPT_OUT ? name : 'Off',
-      active: name === activeName,
-      onClick: onSelectOption(name),
-    }))}
-  />
-);
diff --git a/addons/contexts/src/preview/ContextsPreviewAPI.ts b/addons/contexts/src/preview/ContextsPreviewAPI.ts
deleted file mode 100644
index e76639f8323f..000000000000
--- a/addons/contexts/src/preview/ContextsPreviewAPI.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import addons from '@storybook/addons';
-import { window } from 'global';
-import { parse } from 'qs';
-import { getContextNodes, getPropsMap, getRendererFrom, singleton } from './libs';
-import { deserialize } from '../shared/serializers';
-import {
-  PARAM,
-  REBOOT_MANAGER,
-  UPDATE_PREVIEW,
-  UPDATE_MANAGER,
-  FORCE_RE_RENDER,
-  SET_CURRENT_STORY,
-} from '../shared/constants';
-import { ContextNode, PropsMap, SelectionState } from '../shared/types.d';
-
-/**
- * A singleton for handling preview-manager and one-time-only side-effects.
- */
-export const ContextsPreviewAPI = singleton(() => {
-  const channel = addons.getChannel();
-  let contextsNodesMemo: ContextNode[] | null = null;
-  let selectionState: SelectionState = {};
-
-  /**
-   * URL query param can be used to predetermine the contexts a story should render,
-   * which is useful for performing image snapshot testing or URL sharing.
-   */
-  if (window && window.location) {
-    selectionState = deserialize(parse(window.location.search)[PARAM]) || {};
-  }
-
-  /**
-   * (Vue specific)
-   * Vue will inject getter/setter watchers on the first rendering of the addon,
-   * which is why we have to keep an internal reference and use `Object.assign` to notify the watcher.
-   */
-  const reactivePropsMap = {};
-  const updateReactiveSystem = (propsMap: PropsMap) => Object.assign(reactivePropsMap, propsMap);
-
-  /**
-   * Preview-manager communications.
-   */
-  // from manager
-  channel.on(UPDATE_PREVIEW, state => {
-    if (state) {
-      selectionState = state;
-      channel.emit(FORCE_RE_RENDER);
-    }
-  });
-  channel.on(REBOOT_MANAGER, () => {
-    channel.emit(UPDATE_MANAGER, contextsNodesMemo);
-  });
-  channel.on(SET_CURRENT_STORY, () => {
-    // trash the memorization since the story-level setting may change (diffing it is much expensive)
-    contextsNodesMemo = null;
-  });
-
-  // to manager
-  const getContextNodesWithSideEffects: typeof getContextNodes = (...arg) => {
-    if (contextsNodesMemo === null) {
-      contextsNodesMemo = getContextNodes(...arg);
-      channel.emit(UPDATE_MANAGER, contextsNodesMemo);
-    }
-    return contextsNodesMemo;
-  };
-
-  /**
-   * @Public
-   * Exposed interfaces
-   */
-  return {
-    // methods get called on Storybook event lifecycle
-    getContextNodes: getContextNodesWithSideEffects,
-    getSelectionState: () => selectionState,
-    getPropsMap,
-
-    // methods for processing framework specific bindings
-    getRendererFrom,
-    updateReactiveSystem,
-  };
-});
diff --git a/addons/contexts/src/preview/frameworks/preact.ts b/addons/contexts/src/preview/frameworks/preact.ts
deleted file mode 100644
index ece1de938e6b..000000000000
--- a/addons/contexts/src/preview/frameworks/preact.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { h, VNode } from 'preact';
-import { createAddonDecorator, Render } from '../../index';
-import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
-
-/**
- * This is the framework specific bindings for Preact.
- * '@storybook/preact' expects the returning object from a decorator to be a 'Preact vNode'.
- */
-export const renderPreact: Render<VNode> = (contextNodes, propsMap, getStoryVNode) => {
-  const { getRendererFrom } = ContextsPreviewAPI();
-  return getRendererFrom(h)(contextNodes, propsMap, getStoryVNode);
-};
-
-export const withContexts = createAddonDecorator(renderPreact);
diff --git a/addons/contexts/src/preview/frameworks/react.ts b/addons/contexts/src/preview/frameworks/react.ts
deleted file mode 100644
index d2a0458bbccb..000000000000
--- a/addons/contexts/src/preview/frameworks/react.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createElement, ReactElement } from 'react';
-import { createAddonDecorator, Render } from '../../index';
-import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
-
-/**
- * This is the framework specific bindings for React.
- * '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode).
- */
-export const renderReact: Render<ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
-  const { getRendererFrom } = ContextsPreviewAPI();
-  return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode);
-};
-
-export const withContexts = createAddonDecorator(renderReact);
diff --git a/addons/contexts/src/preview/frameworks/vue.ts b/addons/contexts/src/preview/frameworks/vue.ts
deleted file mode 100644
index 0e5513f85f9b..000000000000
--- a/addons/contexts/src/preview/frameworks/vue.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Vue from 'vue';
-import { createAddonDecorator, Render } from '../../index';
-import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
-import { ID } from '../../shared/constants';
-
-/**
- * This is the framework specific bindings for Vue.
- * '@storybook/vue' expects the returning object from a decorator to be a 'VueComponent'.
- */
-export const renderVue: Render<Vue.Component> = (contextNodes, propsMap, getStoryComponent) => {
-  const { getRendererFrom, updateReactiveSystem } = ContextsPreviewAPI();
-  const reactiveProps = updateReactiveSystem(propsMap);
-  return Vue.extend({
-    name: ID,
-    data: () => reactiveProps,
-    render: createElement =>
-      getRendererFrom((Component, props, children) => {
-        const { key, ref, style, classNames, ...rest } = props || Object();
-        const contextData =
-          Component instanceof Object
-            ? { key, ref, style, class: classNames, props: rest } // component as a Vue object
-            : { key, ref, style, class: classNames, attrs: rest }; // component as a HTML tag string
-        return createElement(Component, contextData, [children]);
-      })(contextNodes, reactiveProps, () => createElement(getStoryComponent())),
-  });
-};
-
-export const withContexts = createAddonDecorator(renderVue);
diff --git a/addons/contexts/src/preview/libs/decorators.test.ts b/addons/contexts/src/preview/libs/decorators.test.ts
deleted file mode 100644
index 81250ec6897c..000000000000
--- a/addons/contexts/src/preview/libs/decorators.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { memorize, singleton } from './decorators';
-
-describe('Test on functional helpers: memorize', () => {
-  it('should memorize the calculated result', () => {
-    // given
-    const someFn = jest.fn(x => [x]);
-    const someFnMemo = memorize(someFn);
-
-    // when
-    const resultA = someFnMemo(1);
-    const resultB = someFnMemo(2);
-    const resultC = someFnMemo(1);
-
-    // then
-    expect(someFn).toHaveBeenCalledTimes(2);
-    expect(resultA).toEqual(someFn(1));
-    expect(resultA).not.toEqual(resultB);
-    expect(resultA).toBe(resultC);
-    expect(resultB).not.toEqual(resultC);
-  });
-
-  it('should memorize based on the second argument', () => {
-    // given
-    const someFn = jest.fn((x, y) => [x, y]);
-    const someFnMemo = memorize(someFn, (x, y) => y);
-
-    // when
-    const resultA = someFnMemo(1, 2);
-    const resultB = someFnMemo(2, 2);
-    const resultC = someFnMemo(1, 3);
-
-    // then
-    expect(someFn).toHaveBeenCalledTimes(2);
-    expect(resultA).toEqual(someFn(1, 2));
-    expect(resultA).toBe(resultB);
-    expect(resultA).not.toEqual(resultC);
-    expect(resultB).not.toEqual(resultC);
-  });
-});
-
-describe('Test on functional helpers: singleton', () => {
-  it('should make a function singleton', () => {
-    // given
-    const someFn = jest.fn((x, y, z) => [x, y, z]);
-    const someFnSingleton = singleton(someFn);
-
-    // when
-    const resultA = someFnSingleton(1, 2, 3);
-    const resultB = someFnSingleton(4, 5, 6);
-    const resultC = someFnSingleton(7, 8, 9);
-
-    // then
-    expect(someFn).toHaveBeenCalledTimes(1);
-    expect(resultA).toEqual(someFn(1, 2, 3));
-    expect(resultA).toBe(resultB);
-    expect(resultA).toBe(resultC);
-    expect(resultB).toBe(resultC);
-  });
-});
diff --git a/addons/contexts/src/preview/libs/decorators.ts b/addons/contexts/src/preview/libs/decorators.ts
deleted file mode 100644
index 914e0a8eeacd..000000000000
--- a/addons/contexts/src/preview/libs/decorators.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Memorize the calculated result of a function by an ES6 Map;
- * the default is to memorize its the first argument;
- * @return the memorized version of a function.
- */
-type memorize = <T, U extends any[]>(
-  fn: (...args: U) => T,
-  resolver?: (...args: U) => unknown
-) => (...args: U) => T;
-
-export const memorize: memorize = (fn, resolver) => {
-  const memo = new Map();
-  return (...arg) => {
-    const key = resolver ? resolver(...arg) : arg[0];
-    return memo.get(key) || memo.set(key, fn(...arg)).get(key);
-  };
-};
-
-/**
- * Enforce a given function can only be executed once;
- * the returned value is cached for resolving the subsequent calls.
- * @return the singleton version of a function.
- */
-type singleton = <T, U extends any[]>(fn: (...args: U) => T) => (...args: U) => T;
-
-export const singleton: singleton = fn => memorize(fn, () => 'singleton');
diff --git a/addons/contexts/src/preview/libs/getContextNodes.test.ts b/addons/contexts/src/preview/libs/getContextNodes.test.ts
deleted file mode 100644
index d6bbb23c24e6..000000000000
--- a/addons/contexts/src/preview/libs/getContextNodes.test.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { _getMergedSettings, getContextNodes } from './getContextNodes';
-
-describe('Test on the merging result of a pair of settings', () => {
-  it('should retain the basic structure even receiving empty objects', () => {
-    // when
-    const result = _getMergedSettings({}, {});
-
-    // then
-    expect(result).toEqual({
-      components: [],
-      icon: '',
-      nodeId: '',
-      options: { cancelable: false, deep: false, disable: false },
-      params: [{ name: '', props: {} }],
-      title: '',
-    });
-  });
-
-  it('should correctly merge two settings', () => {
-    // given
-    const someTopLevelSettings = {
-      icon: 'box' as const,
-      title: 'Some Context',
-      components: ['div'],
-      params: [
-        { name: 'T1', props: {} },
-        { name: 'T2', props: {} },
-      ],
-      options: {
-        cancelable: true,
-        disable: true,
-      },
-    };
-    const someStoryLevelSettings = {
-      icon: 'box' as const,
-      title: 'Some Context',
-      components: ['span'],
-      params: [
-        { name: 'S1', props: {} },
-        { name: 'S2', props: {} },
-      ],
-      options: {
-        deep: true,
-        disable: false,
-      },
-    };
-
-    // when
-    const result = _getMergedSettings(someTopLevelSettings, someStoryLevelSettings);
-
-    // then
-    expect(result).toEqual({
-      // topLevel over storyLevel
-      nodeId: someTopLevelSettings.title,
-      icon: someTopLevelSettings.icon,
-      title: someTopLevelSettings.title,
-      components: someTopLevelSettings.components,
-
-      // storyLevel appends to topLevel
-      params: [...someTopLevelSettings.params, ...someStoryLevelSettings.params],
-
-      // storyLevel over topLevel
-      options: {
-        cancelable: someTopLevelSettings.options.cancelable,
-        deep: someStoryLevelSettings.options.deep,
-        disable: someStoryLevelSettings.options.disable,
-      },
-    });
-  });
-});
-
-describe('Test on reconciliation of settings', () => {
-  it('should have a stable array ordering after normalization', () => {
-    // when
-    const result = getContextNodes({
-      // from the topLevel
-      options: [
-        {
-          icon: 'box',
-          title: 'Some Context',
-          components: ['div'],
-          params: [{ name: 'T1', props: {} }],
-        },
-        {
-          icon: 'box',
-          title: 'Another Context',
-          components: ['div'],
-          params: [{ name: 'T2', props: {} }],
-        },
-      ],
-      // from the storyLevel
-      parameters: [
-        {
-          icon: 'box',
-          title: 'Other Contexts',
-          components: ['span'],
-          params: [{ name: 'S1', props: {} }],
-        },
-        {
-          icon: 'box',
-          title: 'Some Context',
-          components: ['p'],
-          params: [{ name: 'S2', props: {}, default: true }],
-        },
-      ],
-    });
-
-    // then
-    expect(result).toEqual([
-      {
-        components: ['div'],
-        icon: 'box',
-        nodeId: 'Some Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [
-          { name: 'T1', props: {} },
-          { name: 'S2', props: {}, default: true },
-        ],
-        title: 'Some Context',
-      },
-      {
-        components: ['div'],
-        icon: 'box',
-        nodeId: 'Another Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'T2', props: {} }],
-        title: 'Another Context',
-      },
-      {
-        components: ['span'],
-        icon: 'box',
-        nodeId: 'Other Contexts',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'S1', props: {} }],
-        title: 'Other Contexts',
-      },
-    ]);
-  });
-});
diff --git a/addons/contexts/src/preview/libs/getContextNodes.ts b/addons/contexts/src/preview/libs/getContextNodes.ts
deleted file mode 100644
index 3fa311a81849..000000000000
--- a/addons/contexts/src/preview/libs/getContextNodes.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { AddonSetting, ContextNode, WrapperSettings } from '../../shared/types.d';
-
-/**
- * @private
- * Merge the top-level (global options) and the story-level (parameters) from a pair of setting;
- * @return the normalized definition for a contextual environment (i.e. a contextNode).
- */
-type _getMergedSettings = (
-  topLevel: Partial<AddonSetting>,
-  storyLevel: Partial<AddonSetting>
-) => ContextNode;
-
-export const _getMergedSettings: _getMergedSettings = (topLevel, storyLevel) => ({
-  // strip out special characters reserved for serializing
-  nodeId: (topLevel.title || storyLevel.title || '').replace(/[,+]/g, ''),
-  icon: topLevel.icon || storyLevel.icon || '',
-  title: topLevel.title || storyLevel.title || '',
-  components: topLevel.components || storyLevel.components || [],
-  params:
-    topLevel.params || storyLevel.params
-      ? [...(topLevel.params || []), ...(storyLevel.params || [])].filter(Boolean)
-      : [{ name: '', props: {} }],
-  options: {
-    deep: false,
-    disable: false,
-    cancelable: false,
-    ...topLevel.options,
-    ...storyLevel.options,
-  },
-});
-
-/**
- * @nosideeffects
- * Pair up settings for merging normalizations to produce the contextual definitions (i.e. contextNodes);
- * it guarantee the adding order can be respected but not duplicated.
- */
-type getContextNodes = (settings: WrapperSettings) => ContextNode[];
-
-export const getContextNodes: getContextNodes = ({ options, parameters }) => {
-  const titles = [...(options || []), ...(parameters || [])]
-    .filter(Boolean)
-    .map(({ title }) => title);
-
-  return Array.from(new Set(titles))
-    .filter(Boolean)
-    .map(title =>
-      _getMergedSettings(
-        (options && options.find(option => option.title === title)) || {},
-        (parameters && parameters.find(param => param.title === title)) || {}
-      )
-    );
-};
diff --git a/addons/contexts/src/preview/libs/getPropsMap.test.ts b/addons/contexts/src/preview/libs/getPropsMap.test.ts
deleted file mode 100644
index 321d926e38b8..000000000000
--- a/addons/contexts/src/preview/libs/getPropsMap.test.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { _getPropsByParamName, getPropsMap } from './getPropsMap';
-import { OPT_OUT } from '../../shared/constants';
-
-describe('Test on behaviors from collecting the propsMap', () => {
-  const someParams = [
-    { name: 'A', props: {} },
-    { name: 'B', props: {} },
-  ];
-
-  it('should return "null" when params in 0 length', () => {
-    const result = _getPropsByParamName([]);
-    expect(result).toBe(null);
-  });
-
-  it('should return "OPT_OUT" token when the context being opted out', () => {
-    const result = _getPropsByParamName(someParams, OPT_OUT, { cancelable: true });
-    expect(result).toBe(OPT_OUT);
-  });
-
-  it('should return the props from params when the name existed', () => {
-    const target = {};
-    const result = _getPropsByParamName([...someParams, { name: 'C', props: target }], 'C');
-    expect(result).toBe(target);
-  });
-
-  it('should otherwise fallback to default props in params for a bad name', () => {
-    const target = {};
-    const result = _getPropsByParamName(
-      [...someParams, { name: 'C', props: target, default: true }],
-      'X'
-    );
-    expect(result).toBe(target);
-  });
-
-  it('should otherwise fallback to the first props in params for a bad name, if no marked default props', () => {
-    const result = _getPropsByParamName(someParams, 'A');
-    expect(result).toBe(someParams[0].props);
-  });
-});
-
-describe('Test on the integrity of the method to get the propMaps', () => {
-  it('should return the correct propsMap from the specified selectionState', () => {
-    // given
-    const someContextNodes = [
-      {
-        components: ['div'],
-        icon: 'box' as const,
-        nodeId: 'Some Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [
-          { name: 'A1', props: { a: 1 } },
-          { name: 'A2', props: { a: 2 }, default: true },
-        ],
-        title: 'Some Context',
-      },
-      {
-        components: ['div'],
-        icon: 'box' as const,
-        nodeId: 'Another Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'B', props: { b: 1 } }],
-        title: 'Another Context',
-      },
-      {
-        components: ['span'],
-        icon: 'box' as const,
-        nodeId: 'Other Contexts',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'C', props: { c: 1 } }],
-        title: 'Other Contexts',
-      },
-    ];
-    const someSelectionState = {
-      'Some Context': 'A1',
-      'Another Context': OPT_OUT, // an inconsistent but possible state being introduced via query param
-    };
-
-    // when
-    const result = getPropsMap(someContextNodes, someSelectionState);
-
-    // then
-    expect(result).toEqual({
-      'Some Context': { a: 1 },
-      'Another Context': { b: 1 }, // not equal to `OPT_OUT` due to the context is not cancelable
-      'Other Contexts': { c: 1 },
-    });
-  });
-});
diff --git a/addons/contexts/src/preview/libs/getPropsMap.ts b/addons/contexts/src/preview/libs/getPropsMap.ts
deleted file mode 100644
index 2b3427502cdc..000000000000
--- a/addons/contexts/src/preview/libs/getPropsMap.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { OPT_OUT } from '../../shared/constants';
-import { ContextNode, GenericProp, PropsMap, SelectionState } from '../../shared/types.d';
-
-/**
- * @private
- * Extract the activated props by name from a given contextual params.
- */
-type _getPropsByParamName = (
-  params: ContextNode['params'],
-  name?: string,
-  options?: Partial<ContextNode['options']>
-) => GenericProp | typeof OPT_OUT;
-
-export const _getPropsByParamName: _getPropsByParamName = (params, name = '', options = {}) => {
-  const { props = null } =
-    // when opt-out context
-    (options.cancelable && name === OPT_OUT && { props: OPT_OUT }) ||
-    // when menu option get selected
-    (name && params.find(param => param.name === name)) ||
-    // when being initialized
-    params.find(param => !!param.default) ||
-    // fallback to the first
-    params[0] ||
-    // fallback for destructuring
-    {};
-  return props;
-};
-
-/**
- * @nosideeffects
- * Collect the propsMap from Nodes based on a controlled state tracker.
- */
-type getPropsMap = (contextNodes: ContextNode[], selectionState: SelectionState) => PropsMap;
-
-export const getPropsMap: getPropsMap = (contextNodes, selectionState) =>
-  contextNodes.reduce((agg, { nodeId, params, options }) => {
-    // eslint-disable-next-line no-param-reassign
-    agg[nodeId] = _getPropsByParamName(params, selectionState[nodeId], options);
-    return agg;
-  }, Object());
diff --git a/addons/contexts/src/preview/libs/getRendererFrom.test.ts b/addons/contexts/src/preview/libs/getRendererFrom.test.ts
deleted file mode 100644
index 210b54c7733d..000000000000
--- a/addons/contexts/src/preview/libs/getRendererFrom.test.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { _getAggregatedWrap, getRendererFrom } from './getRendererFrom';
-import { OPT_OUT } from '../../shared/constants';
-
-// mocks
-const h = jest.fn();
-const spiedAggregator = _getAggregatedWrap(h);
-
-beforeEach(() => {
-  h.mockReset();
-});
-
-// tests
-describe('Test on aggregation of a single context', () => {
-  const fakeTag = 'fakeTag';
-  const fakeComponent = () => '';
-
-  it('should skip wrapping when being set to disable', () => {
-    // given
-    const testedProps = {};
-    const testedOption = { disable: true };
-
-    // when
-    spiedAggregator([fakeTag, fakeComponent], testedProps, testedOption)();
-
-    // then
-    expect(h).toHaveBeenCalledTimes(0);
-  });
-
-  it('should skip wrapping when props is marked as "OPT_OUT"', () => {
-    // given
-    const testedProps = OPT_OUT;
-    const testedOption = { cancelable: true };
-
-    // when
-    spiedAggregator([fakeTag, fakeComponent], testedProps, testedOption)();
-
-    // then
-    expect(h).toHaveBeenCalledTimes(0);
-  });
-
-  it('should wrap components in the stacking order', () => {
-    // given
-    const testedProps = {};
-    const testedOption = {};
-
-    // when
-    spiedAggregator([fakeTag, fakeComponent], testedProps, testedOption)();
-
-    // then
-    expect(h).toHaveBeenCalledTimes(2);
-    expect(h.mock.calls[0][0]).toBe(fakeComponent);
-    expect(h.mock.calls[1][0]).toBe(fakeTag);
-  });
-
-  it('should NOT pass props deeply by default', () => {
-    // given
-    const testedProps = {};
-    const testedOption = {};
-
-    // when
-    spiedAggregator([fakeTag, fakeComponent], testedProps, testedOption)();
-
-    // then
-    expect(h.mock.calls[0][1]).toBe(null);
-    expect(h.mock.calls[1][1]).toBe(testedProps);
-  });
-
-  it('should pass props deeply', () => {
-    const testedProps = {};
-    const testedOption = { deep: true };
-    spiedAggregator([fakeTag, fakeComponent], testedProps, testedOption)();
-    expect(h.mock.calls[0][1]).toBe(testedProps);
-    expect(h.mock.calls[1][1]).toBe(testedProps);
-  });
-});
-
-describe('Test on aggregation of contexts', () => {
-  it('should aggregate contexts in the stacking order', () => {
-    // given
-    const someContextNodes = [
-      {
-        components: ['div'],
-        icon: 'box' as const,
-        nodeId: 'Some Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'A', props: {} }],
-        title: 'Some Context',
-      },
-      {
-        components: ['span'],
-        icon: 'box' as const,
-        nodeId: 'Another Context',
-        options: { cancelable: false, deep: false, disable: false },
-        params: [{ name: 'B', props: {} }],
-        title: 'Another Context',
-      },
-    ];
-    const propsMap = {
-      'Some Context': {},
-      'Another Context': {},
-    };
-
-    // when
-    getRendererFrom(h)(someContextNodes, propsMap, () => {});
-
-    // then
-    expect(h.mock.calls[0][0]).toBe(someContextNodes[1].components[0]);
-    expect(h.mock.calls[1][0]).toBe(someContextNodes[0].components[0]);
-  });
-});
diff --git a/addons/contexts/src/preview/libs/getRendererFrom.ts b/addons/contexts/src/preview/libs/getRendererFrom.ts
deleted file mode 100644
index 586de6ff19c6..000000000000
--- a/addons/contexts/src/preview/libs/getRendererFrom.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { OPT_OUT } from '../../shared/constants';
-import {
-  AddonOptions,
-  AnyFunctionReturns,
-  ContextNode,
-  GenericProp,
-  PropsMap,
-} from '../../shared/types.d';
-
-/**
- * @private
- * Aggregate component vNodes with activated props in a descending order,
- * based on the given options in the contextual environment setup.
- *
- * @param {function} h - the associated `createElement` vNode creator from the framework
- */
-type _getAggregatedWrap = <T>(
-  h: AnyFunctionReturns<T>
-) => (
-  components: ContextNode['components'],
-  props: GenericProp | typeof OPT_OUT,
-  options: AddonOptions
-) => AnyFunctionReturns<T>;
-
-export const _getAggregatedWrap: _getAggregatedWrap = h => (
-  components,
-  props,
-  options
-) => vNode => {
-  const last = components.length - 1;
-  const isSkipped =
-    // when set to disable
-    options.disable ||
-    // when opt-out context
-    (options.cancelable && props === OPT_OUT);
-
-  return isSkipped
-    ? vNode
-    : components
-        // shallow clone the array since .reverse() is not pure
-        .concat()
-        // reverse the array to get the correct wrapping sequence (i.e. left(right))
-        .reverse()
-        .reduce((acc, C, index) => h(C, options.deep || index === last ? props : null, acc), vNode);
-};
-
-/**
- * @nosideeffects
- * Aggregate aggregated-components among all contextual nodes in a descending order;
- * this is the core of this addon, which is based on the general virtual DOM implementation.
- *
- * @param {function} h - the associated `createElement` vNode creator from the framework
- */
-type getRendererFrom = <T>(
-  h: AnyFunctionReturns<T>
-) => (contextNodes: ContextNode[], propsMap: PropsMap, getStoryVNode: AnyFunctionReturns<T>) => T;
-
-export const getRendererFrom: getRendererFrom = h => (contextNodes, propsMap, getStoryVNode) =>
-  contextNodes
-    // map over contextual nodes to get the wrapping function
-    .map(({ nodeId, components, options }) =>
-      _getAggregatedWrap(h)(components, propsMap[nodeId], options)
-    )
-    // reverse the array to get the correct wrapping sequence (i.e. top(down))
-    .reverse()
-    // stitch everything to get the final vNode
-    .reduce((vNode, wrap) => wrap(vNode), getStoryVNode());
diff --git a/addons/contexts/src/preview/libs/index.ts b/addons/contexts/src/preview/libs/index.ts
deleted file mode 100644
index 95230084eeb7..000000000000
--- a/addons/contexts/src/preview/libs/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { memorize, singleton } from './decorators';
-export { getContextNodes } from './getContextNodes';
-export { getPropsMap } from './getPropsMap';
-export { getRendererFrom } from './getRendererFrom';
diff --git a/addons/contexts/src/register.ts b/addons/contexts/src/register.ts
deleted file mode 100644
index 69f785b10277..000000000000
--- a/addons/contexts/src/register.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createElement } from 'react';
-import addons, { types } from '@storybook/addons';
-import { ContextsManager } from './manager/ContextsManager';
-import { ID } from './shared/constants';
-
-addons.register(ID, api =>
-  addons.add(ID, {
-    title: ID,
-    type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
-    render: () => createElement(ContextsManager, { api }),
-  })
-);
diff --git a/addons/contexts/src/shared/@mock-types/_preact.d.ts b/addons/contexts/src/shared/@mock-types/_preact.d.ts
deleted file mode 100644
index 2b90ddf377ac..000000000000
--- a/addons/contexts/src/shared/@mock-types/_preact.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Preact v8.4.2 shipped with global polluted JSX typing, which breaks the React components typing under Manager
- */
-declare module 'preact' {
-  declare type VNode = any;
-  declare const h: any = () => {};
-}
diff --git a/addons/contexts/src/shared/constants.ts b/addons/contexts/src/shared/constants.ts
deleted file mode 100644
index 0e90045a06f6..000000000000
--- a/addons/contexts/src/shared/constants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export { FORCE_RE_RENDER, SET_CURRENT_STORY } from '@storybook/core-events';
-
-// configs
-export const ID = 'addon-contexts' as const;
-export const PARAM = 'contexts' as const;
-
-// tokens
-/**
- * OPT_OUT is a token for skipping a context, dundering the string to avoid name collisions;
- * ES6 Symbol is not available due to stringify used in Storybook event system via the channel.
- */
-export const OPT_OUT = '__OPT_OUT__' as const;
-
-// events
-export const REBOOT_MANAGER = `${ID}/REBOOT_MANAGER`;
-export const UPDATE_MANAGER = `${ID}/UPDATE_MANAGER`;
-export const UPDATE_PREVIEW = `${ID}/UPDATE_PREVIEW`;
diff --git a/addons/contexts/src/shared/serializers.test.ts b/addons/contexts/src/shared/serializers.test.ts
deleted file mode 100644
index b4cc47a2648f..000000000000
--- a/addons/contexts/src/shared/serializers.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { deserialize, serialize } from './serializers';
-
-describe('Test on serializers', () => {
-  // given
-  const someContextsQueryParam = 'CSS Themes=Forests,Languages=Fr';
-  const someSelectionState = {
-    'CSS Themes': 'Forests',
-    Languages: 'Fr',
-  };
-
-  it('Should deserialize a string representation into the represented selection state', () => {
-    expect(deserialize('')).toEqual(null);
-    expect(deserialize('An invalid string=')).toEqual(null);
-    expect(deserialize(someContextsQueryParam)).toEqual(someSelectionState);
-  });
-
-  it('Should serialize selection state into its string representation', () => {
-    expect(serialize(null)).toEqual(null);
-    expect(serialize(someSelectionState)).toEqual(someContextsQueryParam);
-  });
-});
diff --git a/addons/contexts/src/shared/serializers.ts b/addons/contexts/src/shared/serializers.ts
deleted file mode 100644
index 54b26dde4272..000000000000
--- a/addons/contexts/src/shared/serializers.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { SelectionState } from './types.d';
-
-/**
- * Deserialize URL query param into the specified selection state.
- */
-type deserialize = (param?: string) => SelectionState | null;
-
-export const deserialize: deserialize = param =>
-  !param
-    ? null
-    : param
-        .split(/,+/g)
-        .map(str => str.split(/=+/g))
-        .reduce<SelectionState | null>(
-          (acc, [nodeId, name]) => (nodeId && name ? { ...acc, [nodeId]: name } : acc),
-          null
-        );
-
-/**
- * Serialize the selection state in its string representation.
- */
-type serialize = (state: ReturnType<deserialize>) => string | null;
-
-export const serialize: serialize = state =>
-  !state
-    ? null
-    : Object.entries(state)
-        .map(tuple => tuple.join('='))
-        .join(',');
diff --git a/addons/contexts/src/shared/types.d.ts b/addons/contexts/src/shared/types.d.ts
deleted file mode 100644
index a60159fcb1a8..000000000000
--- a/addons/contexts/src/shared/types.d.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ComponentProps, FunctionComponent } from 'react';
-import { Icons } from '@storybook/components';
-
-export { API as ManagerAPI } from '@storybook/api';
-
-// helpers
-export declare type AnyFunctionReturns<T> = (...arg: any[]) => T;
-export declare type FCNoChildren<P> = FunctionComponent<{ children?: never } & P>;
-export declare type GenericProp = null | {
-  readonly [key: string]: unknown;
-};
-
-// interfaces
-export declare interface AddonOptions {
-  deep?: boolean;
-  disable?: boolean;
-  cancelable?: boolean;
-}
-
-export declare interface AddonSetting {
-  icon?: ComponentProps<typeof Icons>['icon'] | '';
-  title: string;
-  components?: unknown[];
-  params?: {
-    name: string;
-    props: GenericProp;
-    default?: boolean;
-  }[];
-  options?: AddonOptions;
-}
-
-export declare interface ContextNode extends Required<AddonSetting> {
-  nodeId: string;
-  options: Required<AddonOptions>;
-}
-
-export declare interface SelectionState {
-  readonly [key: string]: string | undefined;
-}
-
-export declare interface PropsMap {
-  readonly [key: string]: GenericProp;
-}
-
-export declare interface WrapperSettings {
-  options?: AddonSetting[];
-  // `parameters` can be set to `false` to disable the addon
-  parameters?: AddonSetting[] | false;
-}
diff --git a/addons/contexts/tsconfig.json b/addons/contexts/tsconfig.json
deleted file mode 100644
index 9e57fa03aa0e..000000000000
--- a/addons/contexts/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "preact": ["src/shared/@mock-types/_preact.d.ts"]
-    },
-    "strictNullChecks": true,
-    "removeComments": true,
-    "rootDir": "./src",
-    "types": ["webpack-env", "jest"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["src/register.ts", "src/**/*.test.ts"]
-}
diff --git a/addons/contexts/vue.js b/addons/contexts/vue.js
deleted file mode 100644
index 474e9fb610c5..000000000000
--- a/addons/contexts/vue.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withContexts } from './dist/preview/frameworks/vue';
-
-export { withContexts };
-export default withContexts;
diff --git a/addons/controls/README.md b/addons/controls/README.md
new file mode 100644
index 000000000000..ef7bd31bfaf7
--- /dev/null
+++ b/addons/controls/README.md
@@ -0,0 +1,465 @@
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-hero.gif" width="80%" />
+</center>
+
+<h1>Storybook Controls</h1>
+
+Storybook Controls gives you UI to interact with a component's inputs dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
+
+It does not require any modification to your components, and stories for controls are:
+
+- **Convenient.** Auto-generate controls based on [React/Vue/Angular/etc.](#framework-support) components.
+- **Portable.** Reuse your interactive stories in documentation, tests, and even in designs.
+- **Rich.** Customize the controls and interactive data to suit your exact needs.
+
+Controls are built on top of [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs), which is an open, standards-based format that enable stories to be reused in a variety of contexts.
+
+- **Documentation.** 100% compatible with [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs).
+- **Testing.** Import stories directly into your [Jest](https://jestjs.io/) tests.
+- **Ecosystem.** Reuse stories in design/development tools that support it.
+
+Controls replaces [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs). It incorporates lessons from years of supporting Knobs on tens of thousands of projects and dozens of different frameworks. We couldn't incrementally fix knobs, so we built a better version.
+
+<h2>Contents</h2>
+
+- [Installation](#installation)
+- [Writing stories](#writing-stories)
+  - [Getting started](#getting-started)
+  - [Auto-generated args](#auto-generated-args)
+  - [Custom controls args](#custom-controls-args)
+  - [Fully custom args](#fully-custom-args)
+  - [Template stories](#template-stories)
+- [Configuration](#configuration)
+  - [Control annotations](#control-annotations)
+  - [Parameters](#parameters)
+    - [Expanded: show property documentation](#expanded-show-property-documentation)
+- [Framework support](#framework-support)
+- [FAQs](#faqs)
+  - [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
+  - [How do I migrate from addon-knobs?](#how-do-i-migrate-from-addon-knobs)
+
+## Installation
+
+Controls requires [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs). If you're not using it already, please install that first.
+
+Next, install the package:
+
+```sh
+npm install @storybook/addon-controls -D # or yarn
+```
+
+And add it to your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  addons: [
+    '@storybook/addon-docs'
+    '@storybook/addon-controls'
+  ],
+};
+```
+
+## Writing stories
+
+Let's see how to write stories that automatically generate controls based on your component properties.
+
+Controls is built on [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs), which is a small, backwards-compatible change to Storybook's [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df).
+
+This section is a step-by-step walkthrough for how to upgrade your stories. It takes you from a starting point of the traditional "no args" stories, to auto-generated args, to auto-generated args with custom controls, to fully custom args if you need them.
+
+### Getting started
+
+Let's start with the following component/story combination, which should look familiar if you're coming from an older version of Storybook.
+
+```tsx
+import React from 'react';
+interface ButtonProps {
+  /** The main label of the button */
+  label?: string;
+}
+export const Button = ({ label = 'FIXME' }: ButtonProps) => <button>{label}</button>;
+```
+
+And here's a story that shows that Button component:
+
+```jsx
+import React from 'react';
+import { Button } from './Button';
+export default { title: 'Button', component: Button };
+
+export const Basic = () => <Button label="hello" />;
+```
+
+After installing the controls addon, you'll see a new tab that shows the component's props, but it doesn't show controls because the story doesn't use args. That's not very useful, but we'll fix that momentarily.
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-install.png" width="80%" />
+</center>
+
+### Auto-generated args
+
+To upgrade your story to an Args story, modify it to accept an args object. **NOTE:** you may need to refresh the browser at this point.
+
+```jsx
+export const Basic = (args) => {
+  console.log({ args });
+  return <Button label="hello" />;
+};
+```
+
+Now you'll see auto-generated controls in the `Controls` tab, and you can see the `args` data updating as you edit the values in the UI:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-logging.png" width="80%" />
+</center>
+
+Since the args directly matches the `Button`'s props, we can pass it into the args directly:
+
+```jsx
+export const Basic = (args) => <Button {...args} />;
+```
+
+This generates an interactive UI:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-no-annotation.png" width="80%" />
+</center>
+
+Unfortunately this uses the default values specified in the component, and not the label `hello`, which is what we wanted. To address this, we add an `args` annotation to the story, which specifies the initial values:
+
+```jsx
+export const Basic = (args) => <Button {...args} />;
+Basic.args = { label: 'hello' };
+```
+
+Now we're back where we started, but we have a fully interactive story!
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-annotated.png" width="80%" />
+</center>
+
+And this fully interactive story is also available in the `Docs` tab of Storybook:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-docs.png" width="80%" />
+</center>
+
+### Custom controls args
+
+There are cases where you'd like to customize the controls that get auto-generated from your component.
+
+Consider the following modification to the `Button` we introduced above:
+
+```tsx
+import React from 'react';
+interface ButtonProps {
+  label?: string;
+  background?: string;
+}
+export const Button = ({ background, label = 'FIXME' }: ButtonProps) => (
+  <button style={{ backgroundColor: background }}>{label}</button>
+);
+```
+
+And the slightly expanded story:
+
+```jsx
+export const Basic = (args) => <Button {...args} />;
+Basic.args = { label: 'hello', background: '#ff0' };
+```
+
+This generates the following `Controls` UI:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-background-string.png" width="80%" />
+</center>
+
+This works as long as you type a valid string into the auto-generated text control, but it's certainly is not the best UI for picking a color.
+
+We can specify which controls get used by declaring a custom `ArgType` for the `background` property. `ArgTypes` encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by `Storybook Docs`.
+
+`ArgTypes` can also contain arbitrary annotations which can be overridden by the user. Since `background` is a property of the component, let's put that annotation on the default export.
+
+```jsx
+import { Button } from './Button';
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    background: { control: { type: 'color' } },
+  },
+};
+
+export const Basic = (args) => <Button {...args} />;
+Basic.args = { label: 'hello', background: '#ff0' };
+```
+
+This generates the following UI, which is what we wanted in the first place:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-background-color.png" width="80%" />
+</center>
+
+### Fully custom args
+
+Up until now, we've only been using auto-generated controls based on the component we're writing stories for. What happens when we want a control for something that's not part of the story?
+
+Consider the following story for our `Button` from above:
+
+```jsx
+import range from 'lodash/range';
+// export default etc.
+
+export const Reflow = ({ count, label, ...args }) => (
+  <>
+    {range(count).map((i) => (
+      <Button label={`${label} ${i}`} {...args} />
+    ))}
+  </>
+);
+Reflow.args = { count: 3, label: 'reflow' };
+```
+
+This generates the following UI:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow.png" width="80%" />
+</center>
+
+Storybook has inferred the control to be a numeric input based on the initial value of the `count` arg. As we did above, we can also specify a custom control [as we did above](#custom-controls). Only this time since it's story specific we can do it at the story level:
+
+```jsx
+// export const Reflow = ... (as above)
+// Reflow.args = ...
+Reflow.argTypes = {
+  count: { control: { type: 'range', min: 0, max: 20 } },
+};
+```
+
+This generates the following UI with a custom range slider:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
+</center>
+
+<h4>Angular</h4>
+
+To achieve this within an angular-cli build.
+
+```jsx
+export const Reflow = ({ count, label, ...args }) => ({
+  props: {
+    label: label,
+    count: [...Array(count).keys()]
+  },
+  template: `<Button *ngFor="let i of count">{{label}} {{i}}</Button>`
+ }
+);
+Reflow.args = { count: 3, label: 'reflow' };
+```
+
+### Template stories
+
+Suppose you've created the `Basic` story from above, but now we want to create a second story with a different state, such as how the button renders with the label is really long.
+
+The simplest thing would be to create a second story:
+
+```jsx
+export const VeryLongLabel = (args) => <Button {...args} />;
+VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
+```
+
+This works, but it repeats code. What we want is to reuse the `Basic` story, but with a different initial state. In Storybook we do this idiomatically for Args stories:
+
+```jsx
+export const VeryLongLabel = Basic.bind();
+VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
+```
+
+We can even reuse initial args from other stories:
+
+```jsx
+export const VeryLongLabel = Basic.bind();
+VeryLongLabel.args = { ...Basic.args, label: 'this is a very long string' };
+```
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-template.png" width="80%" />
+</center>
+
+## Configuration
+
+The controls addon can be configured in two ways:
+
+- Individual controls can be configured via [control annotations](#control-annotations),
+- The addon's appearance can be configured via [parameters](#parameters).
+
+### Control annotations
+
+As shown above in the [custom control args](#custom-controls-args) and [fully custom args](#fully-custom-args) sections, you can configure controls via a "control" annotation in the `argTypes` field of either a component or story.
+
+Here is the full list of available controls:
+
+| data type   | control type | description                                                    | options        |
+| ----------- | ------------ | -------------------------------------------------------------- | -------------- |
+| **array**   | array        | serialize array into a comma-separated string inside a textbox | separator      |
+| **boolean** | boolean      | checkbox input                                                 | -              |
+| **number**  | number       | a numberic text box input                                      | min, max, step |
+|             | range        | a range slider input                                           | min, max, step |
+| **object**  | object       | json editor text input                                         | -              |
+| **enum**    | radio        | radio buttons input                                            | options        |
+|             | inline-radio | inline radio buttons input                                     | options        |
+|             | check        | multi-select checkbox input                                    | options        |
+|             | inline-check | multi-select inline checkbox input                             | options        |
+|             | select       | select dropdown input                                          | options        |
+|             | multi-select | multi-select dropdown input                                    | options        |
+| **string**  | text         | simple text input                                              | -              |
+|             | color        | color picker input that assumes strings are color values       | -              |
+|             | date         | date picker input                                              | -              |
+
+Example customizing a control for an `enum` data type (defaults to `select` control type):
+
+```js
+export default {
+  title: 'Widget',
+  component: Widget,
+  argTypes: {
+    loadingState: {
+      type: 'inline-radio',
+      options: ['loading', 'error', 'ready'],
+    },
+  },
+};
+```
+
+Example customizing a `number` data type (defaults to `number` control type):
+
+```js
+export default {
+  title: 'Gizmo',
+  component: Gizmo,
+  argTypes: {
+    width: { type: 'range', min: 400, max: 1200, step: 50 };
+  },
+};
+```
+
+### Parameters
+
+Controls supports the following configuration parameters, either [globally or on a per-story basis](https://storybook.js.org/docs/basics/writing-stories/#parameters):
+
+- [Expanded: show property documentation](#expanded-show-property-documentation)
+- [Hide NoControls warning](#hide-nocontrols-warning)
+
+#### Expanded: show property documentation
+
+Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the `expanded` parameter (defaults to `false`).
+
+To enable expanded mode globally, add the following to `.storybook/preview.js`:
+
+```jsx
+export const parameters = {
+  controls: { expanded: true },
+};
+```
+
+And here's what the resulting UI looks like:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-expanded.png" width="80%" />
+</center>
+
+#### Hide NoControls warning
+
+If you don't plan to handle the control args inside your Story, you can remove the warning with:
+
+```jsx
+Basic.parameters = {
+  controls: { hideNoControlsWarning: true },
+};
+```
+
+## Framework support
+
+|                | Manual | Auto-generated |
+| -------------- | :----: | :------------: |
+| React          |   +    |       +        |
+| Vue            |   +    |       +        |
+| Angular        |   +    |       +        |
+| Ember          |   +    |       #        |
+| Web components |   +    |       +        |
+| HTML           |   +    |                |
+| Svelte         |   +    |                |
+| Preact         |   +    |                |
+| Riot           |   +    |                |
+| Mithril        |   +    |                |
+| Marko          |   +    |                |
+
+**Note:** `#` = WIP support
+
+## FAQs
+
+### How will this replace addon-knobs?
+
+Addon-knobs is one of Storybook's most popular addons with over 1M weekly downloads, so we know lots of users will be affected by this change. Knobs is also a mature addon, with various options that are not available in addon-controls.
+
+Therefore, rather than deprecating addon-knobs immediately, we will continue to release knobs with the Storybook core distribution until 7.0. This will give us time to improve Controls based on user feedback, and also give knobs users ample time to migrate.
+
+If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, hop on our [Discord](https://discord.gg/UUt2PJb).
+
+### How do I migrate from addon-knobs?
+
+If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) you should consider migrating to Controls.
+
+You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
+
+Let's walk through two examples: migrating [knobs to auto-generated args](#knobs-to-custom-args) and [knobs to custom args](#knobs-to-custom-args).
+
+<h4>Knobs to auto-generated args</h4>
+
+First, let's consider a knobs version of a basic story that fills in the props for a component:
+
+```jsx
+import { text } from '@storybook/addon-knobs';
+import { Button } from './Button';
+
+export const Basic = () => <Button label={text('Label', 'hello')} />;
+```
+
+This fills in the Button's label based on a knob, which is exactly the [auto-generated](#auto-generated-args) use case above. So we can rewrite it using auto-generated args:
+
+```jsx
+export const Basic = (args) => <Button {...args} />;
+Basic.args = { label: 'hello' };
+```
+
+<h4>Knobs to manually-configured args</h4>
+
+Similarly, we can also consider a story that uses knob inputs to change its behavior:
+
+```jsx
+import range from 'lodash/range';
+import { number, text } from '@storybook/addon-knobs';
+
+export const Reflow = () => {
+  const count = number('Count', 10, { min: 0, max: 100, range: true });
+  const label = number('Label', 'reflow');
+  return (
+    <>
+      {range(count).map((i) => (
+        <Button label={`button ${i}`} />
+      ))}
+    </>
+  );
+};
+```
+
+And again, as above, this can be rewritten using [fully custom args](#fully-custom-args):
+
+```jsx
+export const Reflow = ({ count, label, ...args }) => (
+  <>{range(count).map((i) => <Button label={`${label} ${i}` {...args}} />)}</>
+);
+Reflow.args = { count: 3, label: 'reflow' };
+Reflow.argTypes = { count: { control: { type: 'range', min: 0, max: 20 } } };
+```
diff --git a/addons/controls/docs/media/addon-controls-args-annotated.png b/addons/controls/docs/media/addon-controls-args-annotated.png
new file mode 100644
index 000000000000..a61dd11eba03
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-annotated.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-background-color.png b/addons/controls/docs/media/addon-controls-args-background-color.png
new file mode 100644
index 000000000000..d4e0205013a8
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-background-color.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-background-string.png b/addons/controls/docs/media/addon-controls-args-background-string.png
new file mode 100644
index 000000000000..61d7fe6e34d9
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-background-string.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-docs.png b/addons/controls/docs/media/addon-controls-args-docs.png
new file mode 100644
index 000000000000..b95babb0b6a9
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-docs.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-logging.png b/addons/controls/docs/media/addon-controls-args-logging.png
new file mode 100644
index 000000000000..8ba6066bff86
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-logging.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-no-annotation.png b/addons/controls/docs/media/addon-controls-args-no-annotation.png
new file mode 100644
index 000000000000..9f742e5571c2
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-no-annotation.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-reflow-slider.png b/addons/controls/docs/media/addon-controls-args-reflow-slider.png
new file mode 100644
index 000000000000..012a117fbe0d
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-reflow-slider.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-reflow.png b/addons/controls/docs/media/addon-controls-args-reflow.png
new file mode 100644
index 000000000000..1b37a41d8fa5
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-reflow.png differ
diff --git a/addons/controls/docs/media/addon-controls-args-template.png b/addons/controls/docs/media/addon-controls-args-template.png
new file mode 100644
index 000000000000..3eeb7a50d23c
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-args-template.png differ
diff --git a/addons/controls/docs/media/addon-controls-expanded.png b/addons/controls/docs/media/addon-controls-expanded.png
new file mode 100644
index 000000000000..e1d2be386da2
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-expanded.png differ
diff --git a/addons/controls/docs/media/addon-controls-hero.gif b/addons/controls/docs/media/addon-controls-hero.gif
new file mode 100644
index 000000000000..9633ca073099
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-hero.gif differ
diff --git a/addons/controls/docs/media/addon-controls-install.png b/addons/controls/docs/media/addon-controls-install.png
new file mode 100644
index 000000000000..d792128d66a7
Binary files /dev/null and b/addons/controls/docs/media/addon-controls-install.png differ
diff --git a/addons/controls/package.json b/addons/controls/package.json
new file mode 100644
index 000000000000..00fdbc9e5910
--- /dev/null
+++ b/addons/controls/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@storybook/addon-controls",
+  "version": "6.0.0-beta.21",
+  "description": "Controls for component properties",
+  "keywords": [
+    "addon",
+    "storybook",
+    "knobs",
+    "controls",
+    "properties"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/addons/controls",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/controls"
+  },
+  "license": "MIT",
+  "main": "dist/register.js",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "core-js": "^3.0.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/addons/controls/preset.js b/addons/controls/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/controls/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/contexts/register.js b/addons/controls/register.js
similarity index 100%
rename from addons/contexts/register.js
rename to addons/controls/register.js
diff --git a/addons/controls/src/components/ControlsPanel.tsx b/addons/controls/src/components/ControlsPanel.tsx
new file mode 100644
index 000000000000..1a2f97605fc5
--- /dev/null
+++ b/addons/controls/src/components/ControlsPanel.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { styled } from '@storybook/theming';
+import { ArgsTable, Link } from '@storybook/components';
+import { useArgs, useArgTypes, useParameter } from '@storybook/api';
+import { PARAM_KEY } from '../constants';
+
+interface ControlsParameters {
+  expanded?: boolean;
+  hideNoControlsWarning?: boolean;
+}
+
+const NoControlsWrapper = styled.div(({ theme }) => ({
+  background: theme.background.warning,
+  padding: 20,
+}));
+
+const NoControlsWarning = () => (
+  <NoControlsWrapper>
+    This story is not configured to handle controls.&nbsp;
+    <Link
+      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
+      target="_blank"
+      cancel={false}
+    >
+      Learn how to add controls »
+    </Link>
+  </NoControlsWrapper>
+);
+
+export const ControlsPanel: FC = () => {
+  const [args, updateArgs] = useArgs();
+  const rows = useArgTypes();
+  const { expanded, hideNoControlsWarning = false } = useParameter<ControlsParameters>(
+    PARAM_KEY,
+    {}
+  );
+  const hasControls = Object.values(rows).filter((argType) => argType?.control?.type).length > 0;
+  return (
+    <>
+      {hasControls || hideNoControlsWarning ? null : <NoControlsWarning />}
+      <ArgsTable {...{ compact: !expanded && hasControls, rows, args, updateArgs }} />
+    </>
+  );
+};
diff --git a/addons/controls/src/constants.ts b/addons/controls/src/constants.ts
new file mode 100644
index 000000000000..a2360dfff87c
--- /dev/null
+++ b/addons/controls/src/constants.ts
@@ -0,0 +1,2 @@
+export const ADDON_ID = 'addon-controls' as const;
+export const PARAM_KEY = 'controls' as const;
diff --git a/addons/controls/src/index.ts b/addons/controls/src/index.ts
new file mode 100644
index 000000000000..0fe41f8142f4
--- /dev/null
+++ b/addons/controls/src/index.ts
@@ -0,0 +1 @@
+export { PARAM_KEY } from './constants';
diff --git a/addons/controls/src/preset/index.ts b/addons/controls/src/preset/index.ts
new file mode 100644
index 000000000000..0e20177db06c
--- /dev/null
+++ b/addons/controls/src/preset/index.ts
@@ -0,0 +1,3 @@
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
diff --git a/addons/controls/src/register.tsx b/addons/controls/src/register.tsx
new file mode 100644
index 000000000000..0467b1912156
--- /dev/null
+++ b/addons/controls/src/register.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import addons, { types } from '@storybook/addons';
+import { AddonPanel } from '@storybook/components';
+import { API } from '@storybook/api';
+import { ControlsPanel } from './components/ControlsPanel';
+import { ADDON_ID, PARAM_KEY } from './constants';
+
+addons.register(ADDON_ID, (api: API) => {
+  addons.addPanel(ADDON_ID, {
+    title: 'Controls',
+    type: types.PANEL,
+    paramKey: PARAM_KEY,
+    render: ({ key, active }) => {
+      if (!active || !api.getCurrentStoryData()) {
+        return null;
+      }
+      return (
+        <AddonPanel key={key} active={active}>
+          <ControlsPanel />
+        </AddonPanel>
+      );
+    },
+  });
+});
diff --git a/addons/controls/tsconfig.json b/addons/controls/tsconfig.json
new file mode 100644
index 000000000000..eac4a67bed71
--- /dev/null
+++ b/addons/controls/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "jest"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**.test.ts"]
+}
diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md
index c3b91348eef0..fad0c977444b 100644
--- a/addons/cssresources/README.md
+++ b/addons/cssresources/README.md
@@ -20,8 +20,8 @@ Add following content to it:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-cssresources/register']
-}
+  addons: ['@storybook/addon-cssresources'],
+};
 ```
 
 ## Usage
@@ -34,17 +34,17 @@ import { withCssResources } from '@storybook/addon-cssresources';
 export default {
   title: 'CssResources',
   parameters: {
-    cssresources: [{
+    cssresources: [
+      {
         id: `bluetheme`,
         code: `<style>body { background-color: lightblue; }</style>`,
         picked: false,
+        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
       },
     ],
   },
   decorators: [withCssResources],
 };
 
-export const defaultView = () => (
-  <div />
-);
+export const defaultView = () => <div />;
 ```
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index 9f6d809e780b..7a599337c9f3 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-cssresources",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "A storybook addon to switch between css resources at runtime for your story",
   "keywords": [
     "addon",
@@ -19,32 +19,48 @@
   },
   "license": "MIT",
   "author": "nm123github",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "react": "^16.8.3"
+    "react": "^16.8.3",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "react-dom": "^16.12.0"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/cssresources/src/CssResource.ts b/addons/cssresources/src/CssResource.ts
index 0067ca677488..ee67b93e2a7c 100644
--- a/addons/cssresources/src/CssResource.ts
+++ b/addons/cssresources/src/CssResource.ts
@@ -2,4 +2,5 @@ export interface CssResource {
   id: string;
   code: string;
   picked: boolean;
+  hideCode: boolean;
 }
diff --git a/addons/cssresources/src/css-resource-panel.test.js b/addons/cssresources/src/css-resource-panel.test.js
index cd0f47303045..80a6b6530a07 100644
--- a/addons/cssresources/src/css-resource-panel.test.js
+++ b/addons/cssresources/src/css-resource-panel.test.js
@@ -40,7 +40,7 @@ const defaultProps = {
     emit: jest.fn(),
     on: jest.fn(),
     off: jest.fn(),
-    getParameters: jest.fn(() => defaultParameters),
+    getCurrentParameter: jest.fn(() => defaultParameters),
   },
 };
 
@@ -104,11 +104,13 @@ describe('CSSResourcePanel', () => {
 
     it('should remove STORY_RENDERED listener from the api', () => {
       const apiRemove = jest.fn();
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
           off: apiRemove,
+          getCurrentParameter,
         },
       });
       const { onStoryChange } = node.instance();
@@ -125,18 +127,18 @@ describe('CSSResourcePanel', () => {
       expect(node.state('list')).toMatchObject(defaultParameters);
     });
 
-    it('should pull default items from getParameters', () => {
-      const apiGetParameters = jest.fn(() => newFakeParameters);
+    it('should pull default items from getCurrentParameter', () => {
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       expect(node.state('list')).toMatchObject([]);
       node.instance().onStoryChange('fake-story-id');
-      expect(apiGetParameters).toHaveBeenCalledWith('fake-story-id', PARAM_KEY);
+      expect(getCurrentParameter).toHaveBeenCalledWith(PARAM_KEY);
       expect(node.state('list')).toMatchObject(newFakeParameters);
     });
 
@@ -159,12 +161,12 @@ describe('CSSResourcePanel', () => {
 
     it("should not overwrite list when story id hasn't changed", () => {
       const fakeList = [];
-      const apiGetParameters = jest.fn(() => newFakeParameters);
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.setState({ list: fakeList, currentStoryId: 'fake-story-id' });
@@ -175,12 +177,12 @@ describe('CSSResourcePanel', () => {
 
     it('should not overwrite list when default list is undefined', () => {
       const fakeList = [];
-      const apiGetParameters = jest.fn(() => undefined);
+      const getCurrentParameter = jest.fn(() => undefined);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.setState({ list: fakeList });
@@ -260,7 +262,7 @@ describe('CSSResourcePanel', () => {
       const node = shallowNode();
       node.instance().onStoryChange('fake-story-id');
 
-      defaultParameters.forEach(param => {
+      defaultParameters.forEach((param) => {
         it(`should render list item with id '${param.id}'`, () => {
           expect(node.find(`#${param.id}`).length).toEqual(1);
         });
@@ -268,18 +270,13 @@ describe('CSSResourcePanel', () => {
         it(`should render list item with id '${param.id}' as ${
           param.picked ? 'checked' : 'unchecked'
         }`, () => {
-          expect(
-            node
-              .find(`#${param.id}`)
-              .first()
-              .prop('checked')
-          ).toBe(param.picked);
+          expect(node.find(`#${param.id}`).first().prop('checked')).toBe(param.picked);
         });
       });
     });
 
     it('should not render code for items without a code', () => {
-      const apiGetParameters = jest.fn(() => [
+      const getCurrentParameter = jest.fn(() => [
         {
           id: 'local-fake-id-1',
           picked: true,
@@ -294,11 +291,38 @@ describe('CSSResourcePanel', () => {
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.instance().onStoryChange('fake-story-id');
       expect(node.find(SyntaxHighlighter).length).toEqual(1);
     });
+
+    it('should not render code for items /w the `hideCode` flag', () => {
+      const getCurrentParameter = jest.fn(() => [
+        {
+          id: 'local-fake-id-1',
+          code: 'local-fake-code-1',
+          picked: true,
+          hideCode: true,
+        },
+        {
+          id: 'local-fake-id-2',
+          code: 'local-fake-code-2',
+          picked: false,
+        },
+      ]);
+
+      const node = shallowNode({
+        ...defaultProps,
+        api: {
+          ...defaultProps.api,
+          getCurrentParameter,
+        },
+      });
+
+      node.instance().onStoryChange('fake-story-id');
+      expect(node.find(SyntaxHighlighter).length).toEqual(1);
+    });
   });
 });
diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx
index ef0be6e19bb2..a2780acefe7c 100644
--- a/addons/cssresources/src/css-resource-panel.tsx
+++ b/addons/cssresources/src/css-resource-panel.tsx
@@ -1,7 +1,8 @@
-import React, { Component, Fragment } from 'react';
-import { SyntaxHighlighter } from '@storybook/components';
+import React, { Component } from 'react';
+import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components';
 import { STORY_RENDERED } from '@storybook/core-events';
 import { API } from '@storybook/api';
+import { styled } from '@storybook/theming';
 
 import { EVENTS, PARAM_KEY } from './constants';
 import { CssResource } from './CssResource';
@@ -20,6 +21,27 @@ interface CssResourceLookup {
   [key: string]: CssResource;
 }
 
+const maxLimitToUseSyntaxHighlighter = 100000;
+
+const PlainCode = styled.pre({
+  textAlign: 'left',
+  fontWeight: 'normal',
+});
+
+const Warning = styled.div({
+  display: 'flex',
+  padding: '10px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: '#fff3cd',
+  fontSize: 12,
+  '& svg': {
+    marginRight: 10,
+    width: 24,
+    height: 24,
+  },
+});
+
 export class CssResourcePanel extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -43,7 +65,7 @@ export class CssResourcePanel extends Component<Props, State> {
   onStoryChange = (id: string) => {
     const { list: currentList, currentStoryId } = this.state;
     const { api } = this.props;
-    const list = api.getParameters(id, PARAM_KEY) as CssResource[];
+    const list = api.getCurrentParameter<CssResource[]>(PARAM_KEY);
 
     if (list && currentStoryId !== id) {
       const existingIds = currentList.reduce((lookup: CssResourceLookup, res) => {
@@ -51,7 +73,7 @@ export class CssResourcePanel extends Component<Props, State> {
         lookup[res.id] = res;
         return lookup;
       }, {}) as CssResourceLookup;
-      const mergedList = list.map(res => {
+      const mergedList = list.map((res) => {
         const existingItem = existingIds[res.id];
         return existingItem
           ? {
@@ -60,14 +82,14 @@ export class CssResourcePanel extends Component<Props, State> {
             }
           : res;
       });
-      const picked = mergedList.filter(res => res.picked);
+      const picked = mergedList.filter((res) => res.picked);
       this.setState({ list: mergedList, currentStoryId: id }, () => this.emit(picked));
     }
   };
 
   onChange = (event: any) => {
     const { list: oldList } = this.state;
-    const list = oldList.map(i => ({
+    const list = oldList.map((i) => ({
       ...i,
       picked: i.id === event.target.id ? event.target.checked : i.picked,
     }));
@@ -90,13 +112,26 @@ export class CssResourcePanel extends Component<Props, State> {
     return (
       <div>
         {list &&
-          list.map(({ id, code, picked }) => (
+          list.map(({ id, code, picked, hideCode = false }) => (
             <div key={id} style={{ padding: 10 }}>
               <label>
                 <input type="checkbox" checked={picked} onChange={this.onChange} id={id} />
                 <span>#{id}</span>
               </label>
-              {code ? <SyntaxHighlighter language="html">{code}</SyntaxHighlighter> : null}
+              {code && !hideCode && code.length < maxLimitToUseSyntaxHighlighter && (
+                <SyntaxHighlighter language="html">{code}</SyntaxHighlighter>
+              )}
+              {code && !hideCode && code.length >= maxLimitToUseSyntaxHighlighter && (
+                <Placeholder>
+                  <Spaced row={1}>
+                    <PlainCode>{code.substring(0, maxLimitToUseSyntaxHighlighter)} ...</PlainCode>
+                    <Warning>
+                      <Icons icon="alert" />
+                      Rest of the content cannot be displayed
+                    </Warning>
+                  </Spaced>
+                </Placeholder>
+              )}
             </div>
           ))}
       </div>
diff --git a/addons/cssresources/src/index.ts b/addons/cssresources/src/index.ts
index a0cc32744fde..98f9c9387d5a 100644
--- a/addons/cssresources/src/index.ts
+++ b/addons/cssresources/src/index.ts
@@ -35,8 +35,8 @@ const getElement = (id: string, code: string) => {
 const updateElement = (id: string, code: string, value: boolean) => {
   const { element, created } = getElement(id, code);
 
-  element.querySelectorAll('link').forEach(child => changeMediaAttribute(child, value));
-  element.querySelectorAll('style').forEach(child => changeMediaAttribute(child, value));
+  element.querySelectorAll('link').forEach((child) => changeMediaAttribute(child, value));
+  element.querySelectorAll('style').forEach((child) => changeMediaAttribute(child, value));
 
   if (created) {
     document.body.appendChild(element);
@@ -46,16 +46,16 @@ const updateElement = (id: string, code: string, value: boolean) => {
 const list: any[] = [];
 
 const setResources = (resources: { code: string; id: string }[]) => {
-  const added = resources.filter(i => !list.find(r => r.code === i.code));
-  const removed = list.filter(i => !resources.find(r => r.code === i.code));
+  const added = resources.filter((i) => !list.find((r) => r.code === i.code));
+  const removed = list.filter((i) => !resources.find((r) => r.code === i.code));
 
-  added.forEach(r => list.push(r));
+  added.forEach((r) => list.push(r));
 
-  resources.forEach(r => {
+  resources.forEach((r) => {
     const { id, code } = r;
     updateElement(id, code, true);
   });
-  removed.forEach(r => {
+  removed.forEach((r) => {
     const { id, code } = r;
     updateElement(id, code, false);
   });
@@ -65,7 +65,6 @@ export const withCssResources = makeDecorator({
   name: 'withCssResources',
   parameterName: PARAM_KEY,
   skipIfNoParametersOrOptions: true,
-  allowDeprecatedUsage: false,
 
   wrapper: (getStory, context, { options, parameters }) => {
     const storyOptions = parameters || options;
diff --git a/addons/cssresources/src/register.tsx b/addons/cssresources/src/register.tsx
index 8637d1ca5664..e34e1fc64494 100644
--- a/addons/cssresources/src/register.tsx
+++ b/addons/cssresources/src/register.tsx
@@ -4,7 +4,7 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { CssResourcePanel } from './css-resource-panel';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   // Need to cast as any as it's not matching Addon type, to investigate
   addons.add(PANEL_ID, {
     type: types.PANEL,
diff --git a/addons/design-assets/README.md b/addons/design-assets/README.md
index 06f7b69545b1..9f33edf6063b 100644
--- a/addons/design-assets/README.md
+++ b/addons/design-assets/README.md
@@ -15,7 +15,7 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-design-assets/register']
+  addons: ['@storybook/addon-design-assets']
 }
 ```
 
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 0c4fe08b4945..14b9ddfa26ab 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-design-assets",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Design asset preview for storybook",
   "keywords": [
     "addon",
@@ -21,33 +21,44 @@
     "directory": "addons/design-assets"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
-    "ts-dedent": "^1.1.0",
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1",
     "use-image": "^1.0.3"
   },
+  "peerDependencies": {
+    "react-dom": "*"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/design-assets/src/register.tsx b/addons/design-assets/src/register.tsx
index 61ae6a9c77ff..f13619c654bb 100644
--- a/addons/design-assets/src/register.tsx
+++ b/addons/design-assets/src/register.tsx
@@ -7,7 +7,7 @@ import { Panel } from './panel';
 
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
-    title: 'design assets',
+    title: 'Design Assets',
     type: types.PANEL,
     render: ({ active, key }) => (
       <AddonPanel active={active} key={key}>
diff --git a/addons/docs/README.md b/addons/docs/README.md
index c7e702ca5193..3590efc6a47a 100644
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@@ -4,6 +4,8 @@
 
 # Storybook Docs
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 Storybook Docs transforms your Storybook stories into world-class component documentation.
 
 **DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
@@ -77,16 +79,17 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
 
 Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
 
-|                   | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Polymer | Riot | Mithril | Marko |
-| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :-----: | :--: | :-----: | :---: |
-| MDX stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
-| CSF stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
-| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
-| Source            |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
-| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
-| Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |         |      |         |       |
-| Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |         |      |         |       |
-| Inline stories    |   +   |  +  |         |       |       +        |      |        |        |         |      |         |       |
+|                   | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Riot | Mithril | Marko |
+| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :--: | :-----: | :---: |
+| MDX stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
+| CSF stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
+| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
+| Source            |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
+| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
+| Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
+| Props controls    |   +   |  +  |         |       |                |      |        |        |      |         |       |
+| Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
+| Inline stories    |   +   |  +  |         |       |       +        |      |        |        |      |         |       |
 
 **Note:** `#` = WIP support
 
@@ -110,8 +113,8 @@ Then add the following to your `.storybook/main.js`:
 
 ```js
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
-  stories: ['../src/**/*.stories.(js|mdx)'],
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: ['@storybook/addon-docs'],
 };
 ```
 
@@ -136,6 +139,7 @@ Add the following to your Jest configuration:
 - [Angular](./angular)
 - [Ember](./ember)
 - [Web Components](./web-components)
+- [Common setup (all other frameworks)](./common)
 
 ## Preset options
 
@@ -143,9 +147,9 @@ The `addon-docs` preset has a few configuration options that can be used to conf
 
 ```js
 module.exports = {
-  presets: [
+  addons: [
     {
-      name: '@storybook/addon-docs/preset',
+      name: '@storybook/addon-docs',
       options: {
         configureJSX: true,
         babelOptions: {},
@@ -156,28 +160,26 @@ module.exports = {
 };
 ```
 
-The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
+The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
 
 `sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
 
 ## Manual configuration
 
-If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/main.js`:
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-docs/register'],
-};
-```
-
-Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
+We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
 
 ```js
 const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 
 module.exports = {
-  webpack: async config => {
+  // 1. register the docs panel (as opposed to '@storybook/addon-docs' which
+  //    will configure everything with a preset)
+  addons: ['@storybook/addon-docs/register'],
+  // 2. manually configure webpack, since you're not using the preset
+  webpackFinal: async (config) => {
     config.module.rules.push({
+      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
+      //     the docs page from the markdown
       test: /\.(stories|story)\.mdx$/,
       use: [
         {
@@ -195,6 +197,8 @@ module.exports = {
         },
       ],
     });
+    // 2b. Run `source-loader` on story files to show their source code
+    //     automatically in `DocsPage` or the `Source` doc block.
     config.module.rules.push({
       test: /\.(stories|story)\.[tj]sx?$/,
       loader: require.resolve('@storybook/source-loader'),
@@ -206,7 +210,7 @@ module.exports = {
 };
 ```
 
-Finally, you'll need to set up DocsPage in `.storybook/preview.js`:
+You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
 
 ```js
 import { addParameters } from '@storybook/react';
@@ -222,18 +226,12 @@ addParameters({
 
 ## TypeScript configuration
 
-SB Docs for React uses `babel-plugin-react-docgen` to extract Docgen comments from your code automatically. However, if you're using TypeScript, some extra configuration maybe required to get this information included in your docs.
-
-1. You can add [react-docgen-typescript-loader](https://www.npmjs.com/package/react-docgen-typescript-loader) to your project by following the instructions there.
-2. You can use [@storybook/preset-typescript](https://www.npmjs.com/package/@storybook/preset-typescript) which includes `react-docgen-typescript-loader`.
-
-Install the preset with care. If you've already configured Typescript manually, that configuration may conflict with the preset. You can [debug your final webpack configuration with `--debug-webpack`](https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config).
+As of SB6 [TypeScript is zero-config](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](./docs/props-tables.md).
 
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md) / [Props](./docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md
index 41a54018f582..be72f4e28a3c 100644
--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@@ -2,7 +2,9 @@
   <img src="../docs/media/angular-hero.png" width="100%" />
 </center>
 
-# Storybook Docs for Angular
+<h1>Storybook Docs for Angular</h1>
+
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
 
@@ -10,6 +12,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 
 - [Installation](#installation)
 - [DocsPage](#docspage)
+- [Props tables](#props-tables)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
 - [More resources](#more-resources)
@@ -26,7 +29,7 @@ Then add the following to your `.storybook/main.js` exports:
 
 ```js
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
+  addons: ['@storybook/addon-docs'],
 };
 ```
 
@@ -34,7 +37,9 @@ module.exports = {
 
 When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
 
-Props tables for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
+## Props tables
+
+Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
 
 To get this, you'll first need to install Compodoc:
 
@@ -49,7 +54,7 @@ Then you'll need to configure Compodoc to generate a `documentation.json` file.
   ...
   "scripts": {
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
-    "storybook": "npm run docs:json && start-storybook -p 9008 -s src/assets",
+    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
     ...
   },
 }
@@ -101,7 +106,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```ts
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
 };
 ```
 
@@ -131,6 +136,49 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
 
 Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage).
 
+When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
+
+```md
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { CheckboxComponent, RadioButtonComponent } from './my-components';
+import { moduleMetadata } from '@storybook/angular';
+
+<Meta title='Checkbox' decorators={[
+  moduleMetadata({
+    declarations: [CheckboxComponent]
+  })
+]} />
+
+# Basic Checkbox
+
+<Story name='basic check' height='400px'>{{
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-checkbox [checked]="checked">Some Checkbox</my-checkbox>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+
+# Basic Radiobutton
+
+<Story name='basic radio' height='400px'>{{
+  moduleMetadata: {
+    declarations: [RadioButtonComponent]
+  }
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-radio-btn [checked]="checked">Some Checkbox</my-radio-btn>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+```
+
 ## IFrame height
 
 Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.
@@ -147,8 +195,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
 
 ```ts
 export const basic = () => ...
-basic.story = {
-  parameters: { docs: { iframeHeight: 400 } }
+basic.parameters = {
+  docs: { iframeHeight: 400 }
 }
 ```
 
@@ -162,7 +210,6 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/angular/preset.js b/addons/docs/angular/preset.js
deleted file mode 100644
index 8d573804f8bf..000000000000
--- a/addons/docs/angular/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/makePreset').default('angular');
diff --git a/addons/docs/aurelia/index.js b/addons/docs/aurelia/index.js
new file mode 100644
index 000000000000..d23ce310488d
--- /dev/null
+++ b/addons/docs/aurelia/index.js
@@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/aurelia/index');
diff --git a/addons/docs/blocks.d.ts b/addons/docs/blocks.d.ts
new file mode 100644
index 000000000000..dba9140572fc
--- /dev/null
+++ b/addons/docs/blocks.d.ts
@@ -0,0 +1,21 @@
+export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
+export * from './dist/blocks/Anchor';
+export * from './dist/blocks/Description';
+export * from './dist/blocks/DocsContext';
+export * from './dist/blocks/DocsPage';
+export * from './dist/blocks/DocsContainer';
+export * from './dist/blocks/DocsStory';
+export * from './dist/blocks/Heading';
+export * from './dist/blocks/Meta';
+export * from './dist/blocks/Preview';
+export * from './dist/blocks/Primary';
+export * from './dist/blocks/Props';
+export * from './dist/blocks/Source';
+export * from './dist/blocks/Stories';
+export * from './dist/blocks/Story';
+export * from './dist/blocks/Subheading';
+export * from './dist/blocks/Subtitle';
+export * from './dist/blocks/Title';
+export * from './dist/blocks/Wrapper';
+export * from './dist/blocks/types';
+export * from './dist/blocks/mdx';
diff --git a/addons/docs/common/README.md b/addons/docs/common/README.md
new file mode 100644
index 000000000000..8e7028117026
--- /dev/null
+++ b/addons/docs/common/README.md
@@ -0,0 +1,100 @@
+<h1>Storybook Docs Common Setup</h1>
+
+Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports [all web frameworks that Storybook supports](../README.md#framework-support).
+
+Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
+
+- [Installation](#installation)
+- [DocsPage](#docspage)
+- [MDX](#mdx)
+- [IFrame height](#iframe-height)
+- [More resources](#more-resources)
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs@next
+```
+
+Then add the following to your `.storybook/main.js` addons:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-docs'],
+};
+```
+
+## DocsPage
+
+When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
+
+## MDX
+
+[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
+
+Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+
+```sh
+yarn add -D react react-is babel-loader
+```
+
+Then update your `.storybook/main.js` to make sure you load MDX files:
+
+```js
+module.exports = {
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
+};
+```
+
+Finally, you can create MDX files like this:
+
+```md
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+
+<Meta title='App Component' />
+
+# App Component
+
+Some **markdown** description, or whatever you want.
+
+<Story name='basic' height='400px'>{() => {
+return { ... }; // should match the typical story format for your framework
+}}</Story>
+```
+
+## IFrame height
+
+In the "common" setup, Storybook Docs renders stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`.
+
+To update the global default, modify `.storybook/preview.js`:
+
+```ts
+import { addParameters } from '@storybook/ember';
+
+addParameters({ docs: { iframeHeight: 400 } });
+```
+
+For `DocsPage`, you need to update the parameter locally in a story:
+
+```ts
+export const basic = () => ...
+basic.parameters = {
+  docs: { iframeHeight: 400 }
+}
+```
+
+And for `MDX` you can modify it as an attribute on the `Story` element:
+
+```md
+<Story name='basic' height='400px'>{...}</Story>
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
index 7a51bdab5a8f..5dd1aa340683 100644
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@@ -1,17 +1,18 @@
 <center>
-  <img src="./media/docspage-hero.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-hero.png" width="100%" />
 </center>
 
-# Storybook DocsPage
+<h1>Storybook DocsPage</h1>
 
 When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.
 
 - [Motivation](#motivation)
 - [Component parameter](#component-parameter)
 - [Subcomponents parameter](#subcomponents-parameter)
-- [DocsPage slots](#docspage-slots)
 - [Replacing DocsPage](#replacing-docspage)
+  - [Remixing DocsPage using doc blocks](#remixing-docspage-using-doc-blocks)
 - [Story file names](#story-file-names)
+- [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
 - [More resources](#more-resources)
 
 ## Motivation
@@ -75,146 +76,6 @@ Subcomponent prop tables will show up in a tabbed interface along with the prima
 
 If you want organize your documentation differently for groups of components, we recommend trying [MDX](./mdx.md) which is completely flexible to support any configuration.
 
-## DocsPage slots
-
-`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
-
-<center>
-  <img style="padding: 30px; border: 3px solid #eee;" src="./media/docspage-slots.png" width="100%" />
-</center>
-
-## Slot values
-
-Each of the slots is computed by a built-in function, that can also be overridden using [Slot Function](#slot-functions).
-
-Here is a summary of the slots, where the data comes from by default, and the slot function that can be used to override it:
-
-| Slot        | Default source                      | Slot function     | Frameworks |
-| ----------- | ----------------------------------- | ----------------- | ---------- |
-| Title       | component `title`                   | `titleSlot`       | All        |
-| Subtitle    | `componentSubtitle` parameter       | `subtitleSlot`    | All        |
-| Description | component `docgen` comment          | `descriptionSlot` | React, Vue |
-| Primary     | storybook stories                   | `primarySlot`     | All        |
-| Props       | component docgen props or propTypes | `propsSlot`       | React, Vue |
-| Stories     | storybook stories                   | `storiesSlot`     | All        |
-
-The `storiesSlot` uses the `docs.storyDescription` parameter to show a description for each story, if available.
-
-For more information on frameworks, see ["Framework support"](../README.md#framework-support)
-
-### Title
-
-`Title` is computed from the component's `title`, and matches the component caption in Storybook's navigation.
-
-For example:
-
-```js
-export default {
-  title: 'Path/to/Badge',
-};
-```
-
-### Subtitle
-
-The `Subtitle` slot is computed from the component's `componentSubtitle` parameter.
-
-For example in [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df):
-
-```js
-export default {
-  ...
-  parameters: {
-    componentSubtitle: 'Handy status label',
-  },
-};
-```
-
-### Description
-
-The `Description` slot is computed from the Component's docgen comments in the component's source.
-
-For example, here's the source for `Badge`:
-
-```js
-/**
- * Use `Badge` to highlight key info with a predefined status.
- */
-export const Badge = ({ status, children }) => { ... }
-```
-
-### Primary
-
-The `Primary` slot is computed from the first user-defined story for the component.
-
-For example here are `Badge`'s stories in CSF. The `allBadges` is selected as the primary story because it's first:
-
-```js
-// export default { ... }; /* Badge component metadata */
-export const allBadges = () => ...
-export const positive = () => ...
-export const negative = () => ...
-```
-
-### Props
-
-The `Props` slot is computed from the component's docgen props, which can be defined in typescript or using `react` PropTypes.
-
-For example, here are the `PropTypes` for the `Badge` component
-
-```js
-import PropTypes from 'prop-types';
-
-// ... Badge definition ...
-
-Badge.propTypes = {
-  status: PropTypes.oneOf(['positive', 'negative', 'neutral', 'error', 'warning']),
-};
-Badge.defaultProps = {
-  status: 'neutral',
-};
-```
-
-### Stories
-
-The `Stories` slot is computed from the user-defined stories for the component, excluding the first.
-
-For example here are `Badge`'s stories in CSF. The `positive` and `negative` stories are selected in that order:
-
-```js
-// export default { ... }; /* Badge component metadata */
-export const allBadges = () => ...
-export const positive = () => ...
-export const negative = () => ...
-```
-
-## Slot functions
-
-> ⚠️ Slot functions are an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
-
-The value for each slot is computed from a `SlotContext` context, and the function that's used to compute the value can be overridden if you need to customize the page. If you find yourself doing a lot of configuration, or wanting different configurations for different pages, you might be better off using `MDX`. Everything that `DocsPage` gives you can be reconstructed in a few lines of `MDX`.
-
-Here is the `SlotContext` type definition:
-
-```ts
-export interface SlotContext {
-  id?: string;
-  selectedKind?: string;
-  selectedStory?: string;
-  parameters?: any;
-  storyStore?: any;
-}
-```
-
-And here are the return type signatures for each of the slot functions
-
-| Slot     | Function     | Inputs                       | Output             |
-| -------- | ------------ | ---------------------------- | ------------------ |
-| Title    | titleSlot    | `SlotContext`                | `string?`          |
-| Subtitle | subtitleSlot | `SlotContext`                | `string?`          |
-| Primary  | primarySlot  | `StoryData[]`, `SlotContext` | `StoryProps?`      |
-| Props    | propsSlot    | `SlotContext`                | `PropsTableProps?` |
-| Stories  | storiesSlot  | `StoryData[]`, `SlotContext` | `StoryProps[]?`    |
-
 ## Replacing DocsPage
 
 What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
@@ -249,14 +110,52 @@ export default {
 import { Button } from './Button';
 // export default { ... }
 export const basic => () => <Button>Basic</Button>
-basic.story = {
-  parameters: { docs: { page: null } }
+basic.parameters = {
+  docs: { page: null }
 }
 ```
 
+### Remixing DocsPage using doc blocks
+
+Here's an example of rebuilding `DocsPage` out of doc blocks:
+
+```js
+import React from 'react';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Props,
+  Stories,
+} from '@storybook/addon-docs/blocks';
+import { DocgenButton } from '../../components/DocgenButton';
+
+export default {
+  title: 'Addons/Docs/stories docs blocks',
+  component: DocgenButton,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Props />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+```
+
+You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js).
+
 ## Story file names
 
-Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
+Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.@(j|t)sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
 
 The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration).
 
@@ -274,7 +173,7 @@ import { addParameters } from '@storybook/vue';
 
 addParameters({
   docs: {
-    prepareForInline: storyFn => {
+    prepareForInline: (storyFn) => {
       const Story = toReact(storyFn());
       return <Story />;
     },
@@ -286,10 +185,7 @@ With that function, anyone using the docs addon for `@storybook/vue` can make th
 
 ## More resources
 
-Want to learn more? Here are some more articles on Storybook Docs:
-
-- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
-- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
diff --git a/addons/docs/docs/faq.md b/addons/docs/docs/faq.md
index 871d80643a01..8030502baf12 100644
--- a/addons/docs/docs/faq.md
+++ b/addons/docs/docs/faq.md
@@ -1,16 +1,15 @@
-# Storybook Docs FAQs
+<h1>Storybook Docs FAQs</h1>
 
 You've read the [Storybook Docs README](../README.md). You're already familiar with both [DocsPage](./docspage.md) and [MDX](./mdx.md). You've even browsed our [Docs recipes](/./recipes.md). But Docs is a big project and you've still got questions! Maybe you'll find your answer here:
 
-- [Storybook Docs FAQs](#storybook-docs-faqs)
-  - [Does Docs support framework X?](#does-docs-support-framework-x)
-  - [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
-  - [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
-  - [More resources](#more-resources)
+- [Does Docs support framework X?](#does-docs-support-framework-x)
+- [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
+- [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
+- [More resources](#more-resources)
 
 ## Does Docs support framework X?
 
-Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, Polymer, and others.
+Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
 
 ## How does Docs interact with existing addons?
 
@@ -19,7 +18,7 @@ Currently we hide the addons panel when docs is visible. It's tricky because all
 ## How do I debug my MDX story?
 
 <center>
-  <img src="./media/faq-debug.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-debug.png" width="100%" />
 </center>
 
 > "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas”
@@ -37,17 +36,14 @@ For example, the following MDX story:
 Shows up in the dev tools as follows:
 
 <center>
-  <img src="./media/faq-devtools.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-devtools.png" width="100%" />
 </center>
 
 This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
 
 ## More resources
 
-Want to learn more? Here are some more articles on Storybook Docs:
-
-- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
-- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
diff --git a/addons/docs/docs/mdx.md b/addons/docs/docs/mdx.md
index c3dc2c570015..dc19051f3b33 100644
--- a/addons/docs/docs/mdx.md
+++ b/addons/docs/docs/mdx.md
@@ -1,10 +1,8 @@
 <center>
-  <img src="./media/mdx-hero.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-hero.png" width="100%" />
 </center>
 
-# Storybook Docs MDX
-
-> ⚠️ MDX support is an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
+<h1>Storybook Docs MDX</h1>
 
 `MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
 
@@ -46,7 +44,7 @@ markdown documentation.
 And here's how that's rendered in Storybook:
 
 <center>
-  <img src="./media/mdx-simple.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>
 
 As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
@@ -130,7 +128,7 @@ with unique URLs and isolated snapshot tests.
 And here's how that gets rendered in Storybook:
 
 <center>
-  <img src="./media/mdx-page.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-page.png" width="100%" />
 </center>
 
 ## Embedding stories
@@ -185,7 +183,7 @@ If you don't define a `Meta`, you can write Markdown and associate with an exist
 To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
 
 <center>
-  <img src="./media/mdx-documentation-only.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-documentation-only.png" width="100%" />
 </center>
 
 ## MDX file names
@@ -196,10 +194,7 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as
 
 ## More resources
 
-`MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information:
-
-- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
-- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
diff --git a/addons/docs/docs/media/args-controls.gif b/addons/docs/docs/media/args-controls.gif
new file mode 100644
index 000000000000..c60fa68c745f
Binary files /dev/null and b/addons/docs/docs/media/args-controls.gif differ
diff --git a/addons/docs/docs/media/props-tables-hero.png b/addons/docs/docs/media/props-tables-hero.png
new file mode 100644
index 000000000000..e1ac1decb36d
Binary files /dev/null and b/addons/docs/docs/media/props-tables-hero.png differ
diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md
index 074aac0b1106..75c56e2a7114 100644
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@@ -1,4 +1,4 @@
-# Storybook Docs framework dev guide
+<h1>Storybook Docs framework dev guide</h1>
 
 Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to optimize a new framework in docs.
 
@@ -6,6 +6,7 @@ Storybook Docs [provides basic support for all non-RN Storybook view layers](../
 - [Props tables](#props-tables)
 - [Component descriptions](#component-descriptions)
 - [Inline story rendering](#inline-story-rendering)
+- [More resources](#more-resources)
 
 ## Framework-specific configuration
 
@@ -87,7 +88,7 @@ import toReact from '@egoist/vue-to-react';
 addParameters({
   docs: {
     // `container`, `page`, etc. here
-    prepareForInline: storyFn => {
+    prepareForInline: (storyFn) => {
       const Story = toReact(storyFn());
       return <Story />;
     },
@@ -96,3 +97,10 @@ addParameters({
 ```
 
 The input is the story function, and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
+
+## More resources
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/props-tables.md b/addons/docs/docs/props-tables.md
new file mode 100644
index 000000000000..4bd204befa44
--- /dev/null
+++ b/addons/docs/docs/props-tables.md
@@ -0,0 +1,236 @@
+<center>
+  <img src="./media/props-tables-hero.png" width="100%" />
+</center>
+
+<h1>Storybook Docs Props Tables</h1>
+
+Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
+
+- [Usage](#usage)
+  - [DocsPage](#docspage)
+  - [MDX](#mdx)
+- [Controls](#controls)
+- [Customization](#customization)
+  - [Customizing ArgTypes](#customizing-argtypes)
+- [Reporting a bug](#reporting-a-bug)
+- [Known limitations](#known-limitations)
+- [More resources](#more-resources)
+
+## Usage
+
+For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
+
+### DocsPage
+
+To use the props table in [DocsPage](./docspage.md), simply export a component property on your stories metadata:
+
+```js
+// MyComponent.stories.js
+import { MyComponent } from './MyComponent';
+
+export default {
+  title: 'MyComponent',
+  component: MyComponent,
+};
+// stories etc...
+```
+
+### MDX
+
+To use the props table in [MDX](./mdx.md), use the `Props` block:
+
+```js
+// MyComponent.stories.mdx
+import { Props } from '@storybook/addon-docs/blocks';
+import { MyComponent } from './MyComponent';
+
+# My Component!
+
+<Props of={MyComponent} />
+```
+
+## Controls
+
+Starting in SB 6.0, the `Props` block has built-in `Controls` (formerly known as "knobs") for editing stories dynamically.
+
+<center>
+  <img src="./media/args-controls.gif" width="80%" />
+</center>
+
+<br/>
+
+These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
+
+**DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
+
+```js
+export default {
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export const WithControls = (args) => <MyComponent {...args} />;
+```
+
+**MDX.** In [MDX](./mdx.md), the `Props` controls are more configurable than in DocsPage. In order to show controls, `Props` must be a function of a story, not a component:
+
+```js
+<Story name="WithControls">
+  {args => <MyComponent {...args} />}
+</Story>
+
+<Props story="Controls" />
+```
+
+For a very detailed walkthrough of how to write stories that use controls, see the [addon-controls README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories).
+
+## Customization
+
+Props tables are automatically inferred from your components and stories, but sometimes it's useful to customize the results.
+
+Props tables are rendered from an internal data structure called `ArgTypes`. When you declare a story's `component` metadata, Docs automatically extracts `ArgTypes` based on the component's properties.
+
+You can can customize what's shown in the props table by [customizing the `ArgTypes` data](#customizing-argtypes). This is currently available for `DocsPage` and `<Props story="xxx">` construct, but not for the `<Props of={component} />` construct,
+
+### Customizing ArgTypes
+
+> **NOTE:** This API is experimental and may change outside of the typical semver release cycle
+
+When you declare a `component` in for your `DocsPage` [as described above](#docspage) or use the `<Props story="xxx" />` construct [in MDX](#controls), the props table shows the `story.argTypes` that gets extracted by Storybook.
+
+Consider the following input:
+
+```js
+// Button.js
+import React from 'react';
+import PropTypes from 'prop-types';
+export const Button = ({ label }) => <button>{label}</button>;
+Button.propTypes = {
+  /** demo description */
+  label: PropTypes.string,
+};
+Button.defaultProps = {
+  label: 'Hello',
+};
+
+// Button.stories.js
+export default { title: 'Button', component: Button };
+```
+
+This generates the equivalent of following in-memory data structure for the `Button` component:
+
+```js
+const argTypes = {
+  label: {
+    name: 'label',
+    type: { name: 'string', required: false },
+    defaultValue: 'Hello',
+    description: 'demo description',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'Hello' },
+    }
+    control: {
+      type: 'text'
+    }
+  }
+}
+```
+
+In this `ArgTypes` data structure, `name`, `type`, `defaultValue`, and `description` are standard fields in all `ArgTypes` (analogous to `PropTypes` in React). The `table` and `control` fields are addon-specific annotations. So, for example, the `table` annotation provides extra information to customize how `label` gets rendered, and the `control` annotation provides extra information for the control for editing the property.
+
+As a user, you can customize the prop table by selectively overriding these values. Consider the following modification to `Button.stories.js` from above:
+
+```js
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    label: {
+      description: 'overwritten description',
+      table: {
+        type: { summary: 'something short' detail: 'something really really long' },
+      },
+      control: {
+        type: null
+      }
+    }
+  }
+};
+```
+
+These values--`description`, `table.type`, and `controls.type`--get merged over the defaults that are extracted by Storybook. The final merged values would be:
+
+```js
+const argTypes = {
+  label: {
+    name: 'label',
+    type: { name: 'string', required: false },
+    defaultValue: 'Hello',
+    description: 'overwritten description',
+    table: {
+      type: { summary: 'something short' detail: 'something really really long' },
+      defaultValue: { summary: 'Hello' },
+    }
+    control: {
+      type: null
+    }
+  }
+}
+```
+
+This would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
+
+Controls customization has an entire section in the [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration).
+
+Here are the possible customizations for the rest of the prop table:
+
+| Field                        | Description                                                                                                               |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `name`                       | The name of the property                                                                                                  |
+| `type.required`              | Whether or not the property is required                                                                                   |
+| `description`                | A markdown description for the property                                                                                   |
+| `table.type.summary`         | A short version of the type                                                                                               |
+| `table.type.detail`          | A longer version of the type (if it's a complex type)                                                                     |
+| `table.defaultValue.summary` | A short version of the default value                                                                                      |
+| `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                                           |
+| `control`                    | See [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration) |
+
+## Reporting a bug
+
+Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.
+
+If you're seeing a problem with your prop table, here's what to do.
+
+First, look to see if there's already a test case that corresponds to your situation. If there is, it should be documented in the [Known Limitations](#known-limitations) section below. There should also be one or more corresponding test fixtures contained in this package. For example, if you are using React, look under the directory `./src/frameworks/react/__testfixtures__`.
+
+If your problem is not already represented here, do the following:
+
+1. Create a **MINIMAL** repro for your problem. Each case should be just a few lines of code.
+2. Place it in the appropriate directory `./src/frameworks/<framework>/__testfixtures__/`, e.g. `./src/frameworks/react/__testfixtures__/XXXX-some-description`, where `XXXX` is the corresponding github issue.
+3. Run the tests for your `<framework>`, e.g. `yarn jest --testPathPattern=react-properties.test.ts --watch`
+4. Inspect the output files for your test case.
+5. Add the example to the appropriate stories file, e.g. `react-properties.stories.ts` for `react`, for a visual repro
+
+If the problem appears to be an issue with this library, file an issue and include a PR that includes your repro.
+
+If the problem appears to be an issue with the sub-package, please file an issue on the appropriate sub-package, document the limitation in [Known Limitations](#known-limitations) below, link to that issue, and submit a PR including the updated documentation and fixtures/snapshots.
+
+## Known limitations
+
+This package relies on a variety of sub-packages to extract property information from components. Many of the bugs in this package correspond to bugs in a sub-package. Since we don't maintain the sub-packages, the best we can do for now is (1) document these limitations, (2) provide clean reproductions to the sub-package, (3) optionally provide PRs to those packages to fix the problems.
+
+| Framework      | Underlying library                       | Docs                                             | Open issues                                                                                                                                                        |
+| -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| React          | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22)          |
+| Vue            | `vue-docgen-api`                         | [Docs](../vue/README.md#props-tables)            | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22)            |
+| Angular        | `compodoc`                               | [Docs](../angular/README.md#props-tables)        | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22)        |
+| Web-components | `custom-elements.json`                   | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
+| Ember          | `yui-doc`                                | [Docs](../ember/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22)          |
+
+## More resources
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md
index 427b11a5eb91..5ee6a4ee1c5d 100644
--- a/addons/docs/docs/recipes.md
+++ b/addons/docs/docs/recipes.md
@@ -1,4 +1,4 @@
-# Storybook Docs Recipes
+<h1>Storybook Docs Recipes</h1>
 
 [Storybook Docs](../README.md) consists of two basic mechanisms, [DocsPage](docspage.md) and [MDX](mdx.md). But how should you use them in your project?
 
@@ -13,6 +13,9 @@
 - [Disabling docs stories](#disabling-docs-stories)
   - [DocsPage](#docspage)
   - [MDX Stories](#mdx-stories)
+- [Controlling a story's view mode](#controlling-a-storys-view-mode)
+- [Customizing source snippets](#customizing-source-snippets)
+- [Overwriting docs container](#overwriting-docs-container)
 - [More resources](#more-resources)
 
 ## Component Story Format (CSF) with DocsPage
@@ -48,8 +51,8 @@ export default {
 };
 
 export const basic = () => <Button>Basic</Button>;
-basic.story = {
-  parameters: { foo: 'bar' },
+basic.parameters = {
+  foo: 'bar',
 };
 ```
 
@@ -57,7 +60,7 @@ basic.story = {
 
 ```md
 import { Meta, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Button.stories.js';
+import \* as stories from './Button.stories.js';
 import { SomeComponent } from 'path/to/SomeComponent';
 
 <Meta title="Demo/Button" component={Button} />
@@ -76,9 +79,7 @@ And I can also embed arbitrary markdown & JSX in this file.
 What's happening here:
 
 - Your stories are defined in CSF, but because of `includeStories: []`, they are not actually added to Storybook.
-- The MDX file is adding the stories to Storybook, and using the story function defined in CSF.
-- The MDX loader is using story metadata from CSF, such as name, decorators, parameters, but will give giving preference to anything defined in the MDX file.
-- The MDX file is using the Meta `default` defined in the CSF.
+- The MDX file is simply importing stories as functions in the MDX, and other aspects of the CSF file, such as decorators, parameters, and any other metadata should be applied as needed in the MDX from the import.
 
 ## CSF Stories with arbitrary MDX
 
@@ -138,8 +139,8 @@ const loadFn = () => {
   const req = require.context('../src', true, /\.stories\.js$/);
   return req
     .keys()
-    .map(fname => req(fname))
-    .filter(exp => !!exp.default);
+    .map((fname) => req(fname))
+    .filter((exp) => !!exp.default);
 };
 
 configure(loadFn, module);
@@ -198,7 +199,7 @@ User defines stories in CSF and renders docs using DocsPage, but wishes to exclu
 
 ```js
 export const foo = () => <Button>foo</Button>;
-foo.story = { parameters: { docs: { disable: true } } };
+foo.parameters = { docs: { disable: true } };
 ```
 
 ### MDX Stories
@@ -206,17 +207,122 @@ foo.story = { parameters: { docs: { disable: true } } };
 User writes documentation & stories side-by-side in a single MDX file, and wants those stories to show up in the canvas but not in the docs themselves. They want something similar to the recipe "CSF stories with MDX docs" but want to do everything in MDX:
 
 ```js
-<Story name="foo" parameters={{ docs: { disable: true }} >
+<Story name="foo" parameters={{ docs: { disable: true } }}>
   <Button>foo</Button>
 </Story>
 ```
 
-## More resources
+## Controlling a story's view mode
+
+Storybook's default story navigation behavior is to preserve the existing view mode. In other words, if a user is viewing a story in "docs" mode, and clicks on another story, they will navigate to the other story in "docs" mode. If they are viewing a story in "story" mode (i.e. "canvas" in the UI) they will navigate to another story in "story" mode (with the exception of "docs-only" pages, which are always shown in "docs" mode).
+
+Based on user feedback, it's also possible to control the view mode for an individual story using the `viewMode` story parameter. In the following example, the nav link will always set the view mode to story:
+
+```js
+export const Foo = () => <Component />;
+Foo.parameters = {
+  // reset the view mode to "story" whenever the user navigates to this story
+  viewMode: 'story',
+};
+```
+
+This can also be applied globally in `preview.js`:
+
+```js
+// always reset the view mode to "docs" whenever the user navigates
+addParameters({
+  viewMode: 'docs',
+});
+```
 
-Want to learn more? Here are some more articles on Storybook Docs:
+## Customizing source snippets
+
+As of SB 6.0, there are two ways to customize how Docs renders source code, via story parameter or via a formatting function.
+
+If you override the `docs.source.code` parameter, the `Source` block will render whatever string is added:
+
+```js
+const Example = () => <Button />;
+Example.parameters = {
+  docs: { source: { code: 'some arbitrary string' } },
+};
+```
+
+Alternatively, you can provide a function in the `docs.transformSource` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
+
+```js
+const SOURCE_REGEX = /^\(\) => `(.*)`$/;
+export const parameters = {
+  docs: {
+    transformSource: (src, storyId) => {
+      const match = SOURCE_REGEX.exec(src);
+      return match ? match[1] : src;
+    },
+  },
+};
+```
+
+These two methods are complementary. The former is useful for story-specific, and the latter is useful for global formatting.
+
+## Overwriting docs container
+
+What happens if you want to add some wrapper for your MDX page, or add some other kind of React context?
+
+When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/basics/writing-stories/#decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
+
+The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:
+
+```js
+import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Addons/Docs/container-override"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => (
+        <DocsContainer context={context}>
+          <div style={{ border: '5px solid red' }}>{children}</div>
+        </DocsContainer>
+      ),
+    },
+  }}
+/>
+
+# Title
+
+Rest of your file...
+```
+
+This is especially useful if you are using `styled-components` and need to wrap your JSX with a `ThemeProvider` to have access to your theme:
+
+```js
+import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
+import { ThemeProvider } from 'styled-components'
+import { theme } from '../path/to/theme'
+
+<Meta
+  title="Addons/Docs/container-override"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => (
+        <DocsContainer context={context}>
+          <ThemeProvider theme={theme}>
+            {children}
+          </ThemeProvider>
+        </DocsContainer>
+      ),
+    },
+  }}
+/>
+
+# Title
+
+Rest of your file...
+```
+
+## More resources
 
-- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Theming](theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
-- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
diff --git a/addons/docs/docs/theming.md b/addons/docs/docs/theming.md
index 23c12ce159bd..c691726d8e26 100644
--- a/addons/docs/docs/theming.md
+++ b/addons/docs/docs/theming.md
@@ -1,26 +1,39 @@
-# Storybook Docs Theming
+<h1>Storybook Docs Theming</h1>
 
 [Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting:
 
 - [Storybook theming](#storybook-theming)
 - [CSS escape hatches](#css-escape-hatches)
 - [MDX component overrides](#mdx-component-overrides)
+- [More resources](#more-resources)
 
 ## Storybook theming
 
-Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
+Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configurations/theming/), but is themed independently from the main UI.
 
-For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`:
+Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
 
 ```js
-import { addParameters } from '@storybook/react';
+import { addons } from '@storybook/addons';
+// or a custom theme
 import { themes } from '@storybook/theming';
 
-addParameters({
-  options: {
+addons.setConfig({
+  theme: themes.dark,
+});
+```
+
+Here's how you'd specify the same theme for docs in `.storybook/preview.js`:
+
+```js
+import { themes } from '@storybook/theming';
+
+// or global addParameters
+export const parameters = {
+  docs: {
     theme: themes.dark,
   },
-});
+};
 ```
 
 ## CSS escape hatches
@@ -60,7 +73,7 @@ addParameters({
 });
 ```
 
-You can even override a Storybook *block* component.
+You can even override a Storybook _block_ component.
 
 Here's how you might insert a custom `<Preview />` block:
 
@@ -78,10 +91,7 @@ addParameters({
 
 ## More resources
 
-Want to learn more? Here are some more articles on Storybook Docs:
-
-- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
-- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
diff --git a/addons/docs/ember/README.md b/addons/docs/ember/README.md
index 6c3b110cb81f..ad49342a228e 100644
--- a/addons/docs/ember/README.md
+++ b/addons/docs/ember/README.md
@@ -1,4 +1,6 @@
-# Storybook Docs for Ember
+<h1>Storybook Docs for Ember</h1>
+
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
 
@@ -6,6 +8,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 
 - [Installation](#installation)
 - [DocsPage](#docspage)
+- [Props tables](#props-tables)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
 - [More resources](#more-resources)
@@ -18,11 +21,11 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs@next
 ```
 
-Then add the following to your `.storybook/main.js` presets:
+Then add the following to your `.storybook/main.js` addons:
 
 ```js
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
+  addons: ['@storybook/addon-docs'],
 };
 ```
 
@@ -30,7 +33,9 @@ module.exports = {
 
 When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
 
-Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
+## Props tables
+
+Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
 
 ```js
 let app = new EmberApp(defaults, {
@@ -83,7 +88,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
 
@@ -91,7 +96,7 @@ Finally, you can create MDX files like this:
 
 ```md
 import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
-import hbs from 'htmlbars-inline-precompile'
+import { hbs } from 'ember-cli-htmlbars';
 
 <Meta title='App Component' component='AppComponent' />
 
@@ -129,8 +134,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
 
 ```ts
 export const basic = () => ...
-basic.story = {
-  parameters: { docs: { iframeHeight: 400 } }
+basic.parameters = {
+  docs: { iframeHeight: 400 }
 }
 ```
 
@@ -144,7 +149,6 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/html/preset.js b/addons/docs/html/preset.js
deleted file mode 100644
index c8e7b0564571..000000000000
--- a/addons/docs/html/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/makePreset').default('html');
diff --git a/addons/docs/jest-transform-mdx.js b/addons/docs/jest-transform-mdx.js
index 9ce7e098d8b1..9f62e0dcc562 100644
--- a/addons/docs/jest-transform-mdx.js
+++ b/addons/docs/jest-transform-mdx.js
@@ -7,20 +7,6 @@ const createCompiler = require('./mdx-compiler-plugin');
 
 const compilers = [createCompiler({})];
 
-const getNextTransformer = (filename, config) => {
-  const extension = path.extname(filename);
-  const jsFileName = `${filename.slice(0, -extension.length)}.js`;
-  const self = config.transform.find(([pattern]) => new RegExp(pattern).test(filename));
-  const jsTransforms = config.transform.filter(([pattern]) => new RegExp(pattern).test(jsFileName));
-  return new ScriptTransformer({
-    ...config,
-    transform: [
-      ...config.transform.filter(entry => entry !== self),
-      ...jsTransforms.map(([pattern, ...rest]) => [self[0], ...rest]),
-    ],
-  });
-};
-
 module.exports = {
   process(src, filename, config, { instrument }) {
     const result = dedent`
@@ -29,6 +15,10 @@ module.exports = {
       import { mdx } from '@mdx-js/react'
       ${mdx.sync(src, { compilers, filepath: filename })}
     `;
-    return getNextTransformer(filename, config).transformSource(filename, result, instrument);
+
+    const extension = path.extname(filename);
+    const jsFileName = `${filename.slice(0, -extension.length)}.js`;
+
+    return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);
   },
 };
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 9923324c623d..4011839393ad 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Superior documentation for your components",
   "keywords": [
     "addon",
@@ -17,11 +17,13 @@
     "directory": "addons/docs"
   },
   "license": "MIT",
+  "main": "dist/public_api.js",
+  "types": "dist/public_api.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "angular/**/*",
     "common/**/*",
+    "ember/**/*",
     "html/**/*",
     "postinstall/**/*",
     "react/**/*",
@@ -29,29 +31,35 @@
     "web-components/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/public_api.js",
-  "types": "dist/public_api.d.ts",
   "scripts": {
+    "createDlls": "node -r esm ./scripts/createDlls.js",
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/generator": "^7.4.0",
-    "@babel/parser": "^7.4.2",
+    "@babel/generator": "^7.9.6",
+    "@babel/parser": "^7.9.6",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.9.6",
     "@egoist/vue-to-react": "^1.1.0",
-    "@jest/transform": "^24.9.0",
+    "@jest/transform": "^26.0.0",
     "@mdx-js/loader": "^1.5.1",
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
-    "@storybook/postinstall": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@storybook/postinstall": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.1.0",
     "acorn-walk": "^7.0.0",
@@ -64,29 +72,78 @@
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^14.1.0",
-    "remark-external-links": "^5.0.0",
-    "remark-slug": "^5.1.2",
-    "ts-dedent": "^1.1.0",
+    "regenerator-runtime": "^0.13.3",
+    "remark-external-links": "^6.0.0",
+    "remark-slug": "^6.0.0",
+    "ts-dedent": "^1.1.1",
     "util-deprecate": "^1.0.2",
-    "vue-docgen-api": "^4.1.0",
-    "vue-docgen-loader": "^1.3.0-beta.0"
+    "vue-docgen-api": "^4.7.0",
+    "vue-docgen-loader": "^1.4.0"
   },
   "devDependencies": {
+    "@angular/core": "^9.1.0",
+    "@babel/core": "^7.9.6",
+    "@emotion/core": "^10.0.20",
+    "@emotion/styled": "^10.0.17",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/web-components": "6.0.0-beta.21",
+    "@types/cross-spawn": "^6.0.1",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.11",
+    "@types/estree": "^0.0.44",
+    "@types/jest": "^25.1.1",
     "@types/prop-types": "^15.5.9",
+    "@types/react-is": "^16.7.1",
+    "@types/tmp": "^0.1.0",
     "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.14.0",
-    "jest-specific-snapshot": "^2.0.0"
+    "babel-loader": "^8.0.6",
+    "babel-plugin-react-docgen": "^4.1.0",
+    "cross-spawn": "^7.0.1",
+    "fs-extra": "^9.0.0",
+    "jest": "^26.0.0",
+    "jest-specific-snapshot": "^3.0.0",
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.0.0",
+    "prettier": "^2.0.5",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-is": "^16.12.0",
+    "require-from-string": "^2.0.2",
+    "rxjs": "^6.5.4",
+    "styled-components": "^5.0.1",
+    "terser-webpack-plugin": "^3.0.0",
+    "tmp": "^0.2.1",
+    "tslib": "^1.11.1",
+    "web-component-analyzer": "^1.0.3",
+    "webpack": "^4.33.0",
+    "zone.js": "^0.10.2"
   },
   "peerDependencies": {
+    "@babel/core": "^7.0.0-0",
     "babel-loader": "^8.0.0",
-    "react": "^16.8.0",
-    "react-is": "^16.8.0"
+    "react": ">=16.3.0",
+    "react-dom": "*",
+    "react-is": "^16.8.0",
+    "vue": "^2.6.10",
+    "webpack": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/docs/postinstall/presets.js b/addons/docs/postinstall/presets.js
index a8feae9101e4..e503cacc8391 100644
--- a/addons/docs/postinstall/presets.js
+++ b/addons/docs/postinstall/presets.js
@@ -1,6 +1,5 @@
 import fs from 'fs';
 import { presetsAddPreset, getFrameworks } from '@storybook/postinstall';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { logger } from '@storybook/node-logger';
 
 export default function transformer(file, api) {
diff --git a/addons/docs/react/README.md b/addons/docs/react/README.md
index afd9ea0cc20c..ec15e32e39df 100644
--- a/addons/docs/react/README.md
+++ b/addons/docs/react/README.md
@@ -2,7 +2,9 @@
   <img src="../docs/media/docspage-hero.png" width="100%" />
 </center>
 
-# Storybook Docs for React
+<h1>Storybook Docs for React</h1>
+
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
 
@@ -10,8 +12,10 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 
 - [Installation](#installation)
 - [DocsPage](#docspage)
+- [Props tables](#props-tables)
 - [MDX](#mdx)
 - [Inline stories](#inline-stories)
+- [TypeScript props with `react-docgen`](#typescript-props-with-react-docgen)
 - [More resources](#more-resources)
 
 ## Installation
@@ -22,12 +26,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs@next
 ```
 
-Then add the following to your `.storybook/main.js` list of `presets`:
+Then add the following to your `.storybook/main.js` list of `addons`:
 
 ```js
 module.exports = {
   // other settings
-  presets: ['@storybook/addon-docs/preset'];
+  addons: ['@storybook/addon-docs'];
 }
 ```
 
@@ -35,7 +39,9 @@ module.exports = {
 
 When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
 
-To show the props table for your component, be sure to fill in the `component` field in your story metadata:
+## Props tables
+
+Storybook Docs automatically generates [Props tables](../docs/props-tables.md) for your components based on either `PropTypes` or `TypeScript` types. To show the props table for your component, be sure to fill in the `component` field in your story metadata:
 
 ```ts
 import { Button } from './Button';
@@ -71,7 +77,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
 
@@ -96,7 +102,7 @@ Some **markdown** description, or whatever you want.
 <Props of={Button} />
 ```
 
-## Inline Stories
+## Inline stories
 
 Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
 
@@ -110,11 +116,70 @@ addParameters({
 });
 ```
 
+## TypeScript props with `react-docgen`
+
+If you're using TypeScript, there are two different options for generating props: `react-docgen-typescript` (default) or `react-docgen`.
+
+You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
+
+```js
+module.exports = {
+  typescript: {
+    // also valid 'react-docgen-typescript' | false
+    reactDocgen: 'react-docgen',
+  },
+};
+```
+
+Neither option is perfect, so here's everything you should know if you're thinking about using `react-docgen` for TypeScript.
+
+|                 | `react-docgen-typescript`                                                                                                 | `react-docgen`                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| **Features**    | **Great**. The analysis produces great results which gives the best props table experience.                               | **OK**. React-docgen produces basic results that are fine for most use cases.                         |
+| **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation.           | **Blazing fast**. Adding it to your project increases build time negligibly.                          |
+| **Bugs**        | **Many**. There are a lot of corner cases that are not handled properly, and are annoying for developers.                 | **Few**. But there's a dealbreaker, which is lack for imported types (see below).                     |
+| **SB docs**     | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
+
+**Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
+
+| Docgen                  | Build time |
+| ----------------------- | ---------- |
+| react-docgen-typescript | 59s        |
+| react-docgen            | 29s        |
+| none                    | 28s        |
+
+The biggest limitation of `react-docgen` is lack of support for imported types. What that means is that when a component uses a type defined in another file or package, `react-docgen` is unable to extract props information for that type.
+
+```tsx
+import React, { FC } from 'react';
+import SomeType from './someFile';
+
+type NewType = SomeType & { foo: string };
+const MyComponent: FC<NewType> = ...
+```
+
+So in the previous example, `SomeType` would simply be ignored! There's an [open PR for this in the `react-docgen` repo](https://github.com/reactjs/react-docgen/pull/352) which you can upvote if it affects you.
+
+Another common pitfall when switching to `react-docgen` is [lack of support for `React.FC`](https://github.com/reactjs/react-docgen/issues/387). This means that the following common pattern **DOESN'T WORK**:
+
+```tsx
+import React, { FC } from 'react';
+interface IProps { ... };
+const MyComponent: FC<IProps> = ({ ... }) => ...
+```
+
+Fortunately, the following workaround works:
+
+```tsx
+const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
+```
+
+Please upvote [the issue](https://github.com/reactjs/react-docgen/issues/387) if this is affecting your productivity, or better yet, submit a fix!
+
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/react/config.js b/addons/docs/react/config.js
deleted file mode 100644
index 501faa1d087c..000000000000
--- a/addons/docs/react/config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/react/config');
diff --git a/addons/docs/react/preset.js b/addons/docs/react/preset.js
deleted file mode 100644
index c92d21ffca5c..000000000000
--- a/addons/docs/react/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/makePreset').default('react');
diff --git a/addons/docs/scripts/createDlls.js b/addons/docs/scripts/createDlls.js
new file mode 100644
index 000000000000..202b368b03d3
--- /dev/null
+++ b/addons/docs/scripts/createDlls.js
@@ -0,0 +1,52 @@
+import path from 'path';
+import webpack from 'webpack';
+
+import config from './webpackDllsConfig';
+
+const resolveLocal = (dir) => path.join(__dirname, dir);
+const webpackAsPromised = (c) =>
+  new Promise((res, rej) => {
+    webpack(c).run((err, stats) => {
+      if (err || stats.hasErrors() || stats.hasWarnings()) {
+        rej(stats);
+        return;
+      }
+      res(stats);
+    });
+  });
+
+const run = () =>
+  webpackAsPromised(
+    config({
+      entry: {
+        storybook_docs: [
+          '@emotion/core',
+          '@emotion/styled',
+          '@storybook/addons',
+          '@storybook/api',
+          '@storybook/components',
+          '@storybook/core-events',
+          '@storybook/theming',
+          'airbnb-js-shims',
+          'emotion-theming',
+          'react',
+          'react-dom',
+          'regenerator-runtime/runtime',
+          resolveLocal('../dist/public_api.js'),
+        ],
+      },
+    })
+  );
+
+run().then(
+  (s) => {
+    // eslint-disable-next-line no-console
+    console.log('success: ', s.toString());
+    process.exitCode = 0;
+  },
+  (s) => {
+    // eslint-disable-next-line no-console
+    console.error('failed: ', s.toString());
+    process.exitCode = 1;
+  }
+);
diff --git a/addons/docs/scripts/webpackDllsConfig.js b/addons/docs/scripts/webpackDllsConfig.js
new file mode 100644
index 000000000000..66bfe0af0bc8
--- /dev/null
+++ b/addons/docs/scripts/webpackDllsConfig.js
@@ -0,0 +1,89 @@
+import path from 'path';
+import { ProgressPlugin, DllPlugin } from 'webpack';
+import TerserPlugin from 'terser-webpack-plugin';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import uiPaths from '@storybook/ui/paths';
+import themingPaths from '@storybook/theming/paths';
+
+const resolveLocal = (dir) => path.join(__dirname, dir);
+
+const r = resolveLocal('../../../node_modules');
+const out = resolveLocal('../../../lib/core/dll');
+
+export default ({ entry, provided = [] }) => ({
+  name: 'storybook-docs',
+  mode: 'development',
+
+  entry,
+  output: {
+    path: out,
+    filename: 'storybook_docs_dll.js',
+    library: 'storybook_docs_dll',
+  },
+  externals: provided,
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              sourceType: 'unambiguous',
+              plugins: [
+                require.resolve('@babel/plugin-transform-shorthand-properties'),
+                require.resolve('@babel/plugin-proposal-object-rest-spread'),
+                require.resolve('@babel/plugin-transform-template-literals'),
+                require.resolve('@babel/plugin-transform-block-scoping'),
+                require.resolve('@babel/plugin-transform-classes'),
+                require.resolve('@babel/plugin-transform-arrow-functions'),
+                require.resolve('@babel/plugin-transform-parameters'),
+                require.resolve('@babel/plugin-transform-destructuring'),
+                require.resolve('@babel/plugin-transform-spread'),
+                require.resolve('@babel/plugin-transform-for-of'),
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  resolve: {
+    extensions: ['.mjs', '.js', '.jsx', '.json'],
+    modules: [path.join(__dirname, '../../../node_modules')],
+    alias: {
+      ...themingPaths,
+      ...uiPaths,
+      semver: require.resolve('@storybook/semver'),
+    },
+  },
+
+  plugins: [
+    new ProgressPlugin(),
+    new DllPlugin({
+      context: r,
+      path: `${out}/storybook_docs-manifest.json`,
+      name: 'storybook_docs_dll',
+    }),
+  ],
+  optimization: {
+    concatenateModules: true,
+    portableRecords: true,
+    moduleIds: 'hashed',
+    minimizer: [
+      new TerserPlugin({
+        extractComments: {
+          condition: /^\**!|@preserve|@license|@cc_on/i,
+          filename: (file) => file.replace('.js', '.LICENCE'),
+          banner: (licenseFile) => `License information can be found in ${licenseFile}`,
+        },
+      }),
+    ],
+  },
+  performance: {
+    hints: false,
+  },
+});
diff --git a/addons/docs/src/blocks/Description.tsx b/addons/docs/src/blocks/Description.tsx
index ce34756634c3..520b62632364 100644
--- a/addons/docs/src/blocks/Description.tsx
+++ b/addons/docs/src/blocks/Description.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
-import { Component, CURRENT_SELECTION, DescriptionSlot } from './shared';
+import { Component, CURRENT_SELECTION } from './types';
 import { str } from '../lib/docgen';
 
 export enum DescriptionType {
@@ -16,7 +16,6 @@ type Notes = string | any;
 type Info = string | any;
 
 interface DescriptionProps {
-  slot?: DescriptionSlot;
   of?: '.' | Component;
   type?: DescriptionType;
   markdown?: string;
@@ -61,13 +60,9 @@ ${extractComponentDescription(target) || ''}
   }
 };
 
-const DescriptionContainer: FunctionComponent<DescriptionProps> = props => {
+const DescriptionContainer: FunctionComponent<DescriptionProps> = (props) => {
   const context = useContext(DocsContext);
-  const { slot } = props;
-  let { markdown } = getDescriptionProps(props, context);
-  if (slot) {
-    markdown = slot(markdown, context);
-  }
+  const { markdown } = getDescriptionProps(props, context);
   return markdown ? <Description markdown={markdown} /> : null;
 };
 
diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
index cedf8e18f4de..2a89ede5832c 100644
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@@ -1,5 +1,7 @@
 import React, { FunctionComponent, useEffect } from 'react';
 import { document, window } from 'global';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
 import { DocsWrapper, DocsContent } from '@storybook/components';
@@ -10,7 +12,7 @@ import { storyBlockIdFromId } from './Story';
 import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
 import { scrollToElement } from './utils';
 
-interface DocsContainerProps {
+export interface DocsContainerProps {
   context: DocsContextProps;
 }
 
@@ -23,13 +25,28 @@ const defaultComponents = {
 
 export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
   const { id: storyId = null, parameters = {} } = context || {};
-  const options = parameters.options || {};
-  const theme = ensureTheme(options.theme);
-  const { components: userComponents = null } = parameters.docs || {};
-  const allComponents = { ...defaultComponents, ...userComponents };
+  const { options = {}, docs = {} } = parameters;
+  let themeVars = docs.theme;
+  if (!themeVars && options.theme) {
+    deprecate(
+      () => {},
+      dedent`
+        options.theme => Deprecated: use  story.parameters.docs.theme instead.
+        See https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming for details.
+    `
+    )();
+    themeVars = options.theme;
+  }
+  const theme = ensureTheme(themeVars);
+  const allComponents = { ...defaultComponents, ...docs.components };
 
   useEffect(() => {
-    const url = new URL(window.parent.location);
+    let url;
+    try {
+      url = new URL(window.parent.location);
+    } catch (err) {
+      return;
+    }
     if (url.hash) {
       const element = document.getElementById(url.hash.substring(1));
       if (element) {
diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts
index a900ed260773..0556b6304e39 100644
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@@ -2,15 +2,16 @@ import { Context, createContext } from 'react';
 
 export interface DocsContextProps {
   id?: string;
-  selectedKind?: string;
-  selectedStory?: string;
+  kind?: string;
+  name?: string;
 
   /**
-   * mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's
-   * display name to its storyId. It's used internally by the `<Story>`
-   * doc block.
+   * mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's
+   * display name to its story key for ID generation. It's used internally by the `<Story>`
+   * and `Preview` doc blocks.
    */
-  mdxStoryNameToId?: Record<string, string>;
+  mdxStoryNameToKey?: Record<string, string>;
+  mdxComponentMeta?: any;
   parameters?: any;
   storyStore?: any;
   forceRender?: () => void;
diff --git a/addons/docs/src/blocks/DocsPage.test.ts b/addons/docs/src/blocks/DocsPage.test.ts
index 92e7264a40cf..2562fb2b5151 100644
--- a/addons/docs/src/blocks/DocsPage.test.ts
+++ b/addons/docs/src/blocks/DocsPage.test.ts
@@ -1,24 +1,24 @@
-import { defaultTitleSlot } from './Title';
+import { extractTitle } from './Title';
 
 describe('defaultTitleSlot', () => {
   it('showRoots', () => {
     const parameters = {
       options: { showRoots: true },
     };
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
-    expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('a|b');
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('c.d');
+    expect(extractTitle({ kind: 'a/b/c', parameters })).toBe('c');
+    expect(extractTitle({ kind: 'a|b', parameters })).toBe('a|b');
+    expect(extractTitle({ kind: 'a/b/c.d', parameters })).toBe('c.d');
   });
   it('no showRoots', () => {
     const parameters = {};
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
-    expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
+    expect(extractTitle({ kind: 'a/b/c', parameters })).toBe('c');
+    expect(extractTitle({ kind: 'a|b', parameters })).toBe('b');
+    expect(extractTitle({ kind: 'a/b/c.d', parameters })).toBe('d');
   });
   it('empty options', () => {
     const parameters = { options: {} };
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
-    expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
-    expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
+    expect(extractTitle({ kind: 'a/b/c', parameters })).toBe('c');
+    expect(extractTitle({ kind: 'a|b', parameters })).toBe('b');
+    expect(extractTitle({ kind: 'a/b/c.d', parameters })).toBe('d');
   });
 });
diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx
index a19a7038867a..f5f69a69933e 100644
--- a/addons/docs/src/blocks/DocsPage.tsx
+++ b/addons/docs/src/blocks/DocsPage.tsx
@@ -1,26 +1,19 @@
-import React, { FunctionComponent } from 'react';
-import { DocsPageProps } from './shared';
+import React, { FC } from 'react';
 import { Title } from './Title';
 import { Subtitle } from './Subtitle';
 import { Description } from './Description';
 import { Primary } from './Primary';
 import { Props } from './Props';
 import { Stories } from './Stories';
+import { PRIMARY_STORY } from './types';
 
-export const DocsPage: FunctionComponent<DocsPageProps> = ({
-  titleSlot,
-  subtitleSlot,
-  descriptionSlot,
-  primarySlot,
-  propsSlot,
-  storiesSlot,
-}) => (
+export const DocsPage: FC = () => (
   <>
-    <Title slot={titleSlot} />
-    <Subtitle slot={subtitleSlot} />
-    <Description slot={descriptionSlot} />
-    <Primary slot={primarySlot} />
-    <Props slot={propsSlot} />
-    <Stories slot={storiesSlot} />
+    <Title />
+    <Subtitle />
+    <Description />
+    <Primary />
+    <Props story={PRIMARY_STORY} />
+    <Stories />
   </>
 );
diff --git a/addons/docs/src/blocks/DocsStory.tsx b/addons/docs/src/blocks/DocsStory.tsx
index ca6640ad1832..f522175c5ea3 100644
--- a/addons/docs/src/blocks/DocsStory.tsx
+++ b/addons/docs/src/blocks/DocsStory.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { Subheading } from './Subheading';
-import { DocsStoryProps } from './shared';
+import { DocsStoryProps } from './types';
 import { Anchor } from './Anchor';
 import { Description } from './Description';
 import { Story } from './Story';
diff --git a/addons/docs/src/blocks/Meta.tsx b/addons/docs/src/blocks/Meta.tsx
index 49d43ae83b0a..f3f5f49a3a03 100644
--- a/addons/docs/src/blocks/Meta.tsx
+++ b/addons/docs/src/blocks/Meta.tsx
@@ -1,17 +1,41 @@
-import { FunctionComponent } from 'react';
+import React, { FC, useContext } from 'react';
+import { document } from 'global';
+import { Anchor } from './Anchor';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { getDocsStories } from './utils';
+import { Component } from './types';
 
 type Decorator = (...args: any) => any;
 
 interface MetaProps {
   title: string;
-  component?: any;
+  component?: Component;
+  subcomponents: Record<string, Component>;
   decorators?: [Decorator];
   parameters?: any;
 }
 
+function getFirstStoryId(docsContext: DocsContextProps): string {
+  const stories = getDocsStories(docsContext);
+
+  return stories.length > 0 ? stories[0].id : null;
+}
+
+function renderAnchor() {
+  const context = useContext(DocsContext);
+  // eslint-disable-next-line react/destructuring-assignment
+  const anchorId = getFirstStoryId(context) || context.id;
+
+  return <Anchor storyId={anchorId} />;
+}
+
 /**
  * This component is used to declare component metadata in docs
  * and gets transformed into a default export underneath the hood.
- * It doesn't actually render anything.
  */
-export const Meta: FunctionComponent<MetaProps> = props => null;
+export const Meta: FC<MetaProps> = () => {
+  const params = new URL(document.location).searchParams;
+  const isDocs = params.get('viewMode') === 'docs';
+
+  return isDocs ? renderAnchor() : null;
+};
diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx
index e108414ea738..a9008b5aaf3f 100644
--- a/addons/docs/src/blocks/Preview.tsx
+++ b/addons/docs/src/blocks/Preview.tsx
@@ -1,4 +1,7 @@
 import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { toId, storyNameFromExport } from '@storybook/csf';
+import { resetComponents } from '@storybook/components/html';
 import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
 import { getSourceProps } from './Source';
 import { DocsContext, DocsContextProps } from './DocsContext';
@@ -21,7 +24,7 @@ const getPreviewProps = (
     children,
     ...props
   }: PreviewProps & { children?: ReactNode },
-  { mdxStoryNameToId, storyStore }: DocsContextProps
+  { mdxStoryNameToKey, mdxComponentMeta, storyStore }: DocsContextProps
 ): PurePreviewProps => {
   if (withSource === SourceState.NONE) {
     return props;
@@ -36,7 +39,14 @@ const getPreviewProps = (
   const stories = childArray.filter(
     (c: ReactElement) => c.props && (c.props.id || c.props.name)
   ) as ReactElement[];
-  const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
+  const targetIds = stories.map(
+    (s) =>
+      s.props.id ||
+      toId(
+        mdxComponentMeta.id || mdxComponentMeta.title,
+        storyNameFromExport(mdxStoryNameToKey[s.props.name])
+      )
+  );
   const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
   return {
     ...props, // pass through columns etc.
@@ -45,11 +55,15 @@ const getPreviewProps = (
   };
 };
 
-export const Preview: FunctionComponent<PreviewProps> = props => (
+export const Preview: FunctionComponent<PreviewProps> = (props) => (
   <DocsContext.Consumer>
-    {context => {
+    {(context) => {
       const previewProps = getPreviewProps(props, context);
-      return <PurePreview {...previewProps}>{props.children}</PurePreview>;
+      return (
+        <MDXProvider components={resetComponents}>
+          <PurePreview {...previewProps}>{props.children}</PurePreview>
+        </MDXProvider>
+      );
     }}
   </DocsContext.Consumer>
 );
diff --git a/addons/docs/src/blocks/Primary.tsx b/addons/docs/src/blocks/Primary.tsx
index fe2b764fcaa6..242e17794876 100644
--- a/addons/docs/src/blocks/Primary.tsx
+++ b/addons/docs/src/blocks/Primary.tsx
@@ -1,16 +1,18 @@
-import React, { useContext, FunctionComponent } from 'react';
+import React, { useContext, FC } from 'react';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { getDocsStories } from './utils';
-import { StorySlot } from './shared';
 
 interface PrimaryProps {
-  slot?: StorySlot;
+  name?: string;
 }
 
-export const Primary: FunctionComponent<PrimaryProps> = ({ slot }) => {
+export const Primary: FC<PrimaryProps> = ({ name }) => {
   const context = useContext(DocsContext);
   const componentStories = getDocsStories(context);
-  const story = slot ? slot(componentStories, context) : componentStories && componentStories[0];
+  let story;
+  if (componentStories) {
+    story = name ? componentStories.find((s) => s.name === name) : componentStories[0];
+  }
   return story ? <DocsStory {...story} expanded={false} withToolbar /> : null;
 };
diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index 21a4d573852a..2bb365863acb 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -1,85 +1,106 @@
-import React, { FunctionComponent, useContext } from 'react';
-import { isNil } from 'lodash';
-
+/* eslint-disable no-underscore-dangle */
+import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
+import mapValues from 'lodash/mapValues';
+import pickBy from 'lodash/pickBy';
 import {
-  PropsTable,
-  PropsTableError,
-  PropsTableProps,
-  PropsTableRowsProps,
-  PropsTableSectionsProps,
-  PropDef,
-  TabsState,
+  ArgsTable,
+  ArgsTableProps,
+  ArgsTableError,
+  ArgTypes,
+  TabbedArgsTable,
 } from '@storybook/components';
+import { Args } from '@storybook/addons';
+import { StoryStore } from '@storybook/client-api';
+import Events from '@storybook/core-events';
+
 import { DocsContext, DocsContextProps } from './DocsContext';
-import { Component, PropsSlot, CURRENT_SELECTION } from './shared';
-import { getComponentName } from './utils';
+import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
+import { getComponentName, getDocsStories } from './utils';
+import { ArgTypesExtractor } from '../lib/docgen/types';
+import { lookupStoryId } from './Story';
 
-import { PropsExtractor } from '../lib/docgen/types';
-import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
-import { extractProps as vueExtractProps } from '../frameworks/vue/extractProps';
+type PropDescriptor = string[] | RegExp;
+
+interface BaseProps {
+  include?: PropDescriptor;
+  exclude?: PropDescriptor;
+}
 
-interface PropsProps {
-  exclude?: string[];
-  of?: '.' | Component;
-  components?: {
+type OfProps = BaseProps & {
+  of: '.' | Component;
+};
+
+type ComponentsProps = BaseProps & {
+  components: {
     [label: string]: Component;
   };
-  slot?: PropsSlot;
-}
+};
 
-// FIXME: remove in SB6.0 & require config
-const inferPropsExtractor = (framework: string): PropsExtractor | null => {
-  switch (framework) {
-    case 'react':
-      return reactExtractProps;
-    case 'vue':
-      return vueExtractProps;
-    default:
-      return null;
-  }
+type StoryProps = BaseProps & {
+  story: '.' | string;
+  showComponents?: boolean;
 };
 
-const filterRows = (rows: PropDef[], exclude: string[]) =>
-  rows && rows.filter((row: PropDef) => !exclude.includes(row.name));
+type PropsProps = BaseProps | OfProps | ComponentsProps | StoryProps;
 
-export const getComponentProps = (
-  component: Component,
-  { exclude }: PropsProps,
-  { parameters }: DocsContextProps
-): PropsTableProps => {
-  if (!component) {
-    return null;
+const useArgs = (storyId: string, storyStore: StoryStore): [Args, (args: Args) => void] => {
+  const story = storyStore.fromId(storyId);
+  if (!story) {
+    throw new Error(`Unknown story: ${storyId}`);
   }
-  try {
-    const params = parameters || {};
-    const { framework = null } = params;
 
-    const { extractProps = inferPropsExtractor(framework) }: { extractProps: PropsExtractor } =
-      params.docs || {};
-    if (!extractProps) {
-      throw new Error(PropsTableError.PROPS_UNSUPPORTED);
-    }
-    let props = extractProps(component);
-    if (!isNil(exclude)) {
-      const { rows } = props as PropsTableRowsProps;
-      const { sections } = props as PropsTableSectionsProps;
-      if (rows) {
-        props = { rows: filterRows(rows, exclude) };
-      } else if (sections) {
-        Object.keys(sections).forEach(section => {
-          sections[section] = filterRows(sections[section], exclude);
-        });
+  const { args: initialArgs } = story;
+  const [args, setArgs] = useState(initialArgs);
+  useEffect(() => {
+    const cb = (changedId: string, newArgs: Args) => {
+      if (changedId === storyId) {
+        setArgs(newArgs);
       }
-    }
+    };
+    storyStore._channel.on(Events.STORY_ARGS_UPDATED, cb);
+    return () => storyStore._channel.off(Events.STORY_ARGS_UPDATED, cb);
+  }, [storyId]);
+  const updateArgs = useCallback((newArgs) => storyStore.updateStoryArgs(storyId, newArgs), [
+    storyId,
+  ]);
+  return [args, updateArgs];
+};
 
-    return props;
-  } catch (err) {
-    return { error: err.message };
+const matches = (name: string, descriptor: PropDescriptor) =>
+  Array.isArray(descriptor) ? descriptor.includes(name) : name.match(descriptor);
+
+const filterArgTypes = (argTypes: ArgTypes, include?: PropDescriptor, exclude?: PropDescriptor) => {
+  if (!include && !exclude) {
+    return argTypes;
+  }
+  return (
+    argTypes &&
+    pickBy(argTypes, (argType, key) => {
+      const name = argType.name || key;
+      return (!include || matches(name, include)) && (!exclude || !matches(name, exclude));
+    })
+  );
+};
+
+export const extractComponentArgTypes = (
+  component: Component,
+  { parameters }: DocsContextProps,
+  include?: PropDescriptor,
+  exclude?: PropDescriptor
+): ArgTypes => {
+  const params = parameters || {};
+  const { extractArgTypes }: { extractArgTypes: ArgTypesExtractor } = params.docs || {};
+  if (!extractArgTypes) {
+    throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
   }
+  let argTypes = extractArgTypes(component);
+  argTypes = filterArgTypes(argTypes, include, exclude);
+
+  return argTypes;
 };
 
 export const getComponent = (props: PropsProps = {}, context: DocsContextProps): Component => {
-  const { of } = props;
+  const { of } = props as OfProps;
   const { parameters = {} } = context;
   const { component } = parameters;
 
@@ -88,60 +109,129 @@ export const getComponent = (props: PropsProps = {}, context: DocsContextProps):
     if (of === CURRENT_SELECTION) {
       return null;
     }
-    throw new Error(PropsTableError.NO_COMPONENT);
+    throw new Error(ArgsTableError.NO_COMPONENT);
   }
   return target;
 };
 
-const PropsContainer: FunctionComponent<PropsProps> = props => {
+const addComponentTabs = (
+  tabs: Record<string, ArgsTableProps>,
+  components: Record<string, Component>,
+  context: DocsContextProps,
+  include?: PropDescriptor,
+  exclude?: PropDescriptor
+) => ({
+  ...tabs,
+  ...mapValues(components, (comp) => ({
+    rows: extractComponentArgTypes(comp, context, include, exclude),
+  })),
+});
+
+export const StoryTable: FC<StoryProps & { components: Record<string, Component> }> = (props) => {
+  const context = useContext(DocsContext);
+  const {
+    id: currentId,
+    parameters: { argTypes },
+    storyStore,
+  } = context;
+  const { story, showComponents, components, include, exclude } = props;
+  let storyArgTypes;
+  try {
+    let storyId;
+    switch (story) {
+      case CURRENT_SELECTION: {
+        storyId = currentId;
+        storyArgTypes = argTypes;
+        break;
+      }
+      case PRIMARY_STORY: {
+        const primaryStory = getDocsStories(context)[0];
+        storyId = primaryStory.id;
+        storyArgTypes = primaryStory.parameters.argTypes;
+        break;
+      }
+      default: {
+        storyId = lookupStoryId(story, context);
+        const data = storyStore.fromId(storyId);
+        storyArgTypes = data.parameters.argTypes;
+      }
+    }
+    storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
+
+    // This code handles three cases:
+    //  1. the story has args, in which case we want to show controls for the story
+    //  2. the story has args, and the user specifies showComponents, in which case
+    //     we want to show controls for the primary component AND show props for each component
+    //  3. the story has NO args, in which case we want to show props for each component
+
+    // eslint-disable-next-line prefer-const
+    let [args, updateArgs] = useArgs(storyId, storyStore);
+    let tabs = { Story: { rows: storyArgTypes, args, updateArgs } } as Record<
+      string,
+      ArgsTableProps
+    >;
+
+    // Use the dynamically generated component tabs if there are no controls
+    const storyHasArgsWithControls =
+      storyArgTypes && Object.values(storyArgTypes).find((v) => !!v?.control);
+
+    if (!storyHasArgsWithControls) {
+      updateArgs = null;
+      tabs = {};
+    }
+
+    if (showComponents || !storyHasArgsWithControls) {
+      tabs = addComponentTabs(tabs, components, context, include, exclude);
+    }
+
+    return <TabbedArgsTable tabs={tabs} />;
+  } catch (err) {
+    return <ArgsTable error={err.message} />;
+  }
+};
+
+export const ComponentsTable: FC<ComponentsProps> = (props) => {
+  const context = useContext(DocsContext);
+  const { components, include, exclude } = props;
+
+  const tabs = addComponentTabs({}, components, context, include, exclude);
+  return <TabbedArgsTable tabs={tabs} />;
+};
+
+export const Props: FC<PropsProps> = (props) => {
   const context = useContext(DocsContext);
-  const { slot, components } = props;
   const {
     parameters: { subcomponents },
   } = context;
 
-  let allComponents = components;
-  if (!allComponents) {
-    const main = getComponent(props, context);
-    const mainLabel = getComponentName(main);
-    const mainProps = slot ? slot(context, main) : getComponentProps(main, props, context);
+  const { include, exclude, components } = props as ComponentsProps;
+  const { story } = props as StoryProps;
 
-    if (!subcomponents || typeof subcomponents !== 'object') {
-      return mainProps && <PropsTable {...mainProps} />;
-    }
+  let allComponents = components;
+  const main = getComponent(props, context);
 
+  if (!allComponents && main) {
+    const mainLabel = getComponentName(main);
     allComponents = { [mainLabel]: main, ...subcomponents };
   }
 
-  const tabs: { label: string; table: PropsTableProps }[] = [];
-  Object.entries(allComponents).forEach(([label, component]) => {
-    tabs.push({
-      label,
-      table: slot ? slot(context, component) : getComponentProps(component, props, context),
-    });
-  });
+  if (story) {
+    return <StoryTable {...(props as StoryProps)} components={allComponents} />;
+  }
 
-  return (
-    <TabsState>
-      {tabs.map(({ label, table }) => {
-        if (!table) {
-          return null;
-        }
-        const id = `prop_table_div_${label}`;
-        return (
-          <div key={id} id={id} title={label}>
-            {({ active }: { active: boolean }) =>
-              active ? <PropsTable key={`prop_table_${label}`} {...table} /> : null
-            }
-          </div>
-        );
-      })}
-    </TabsState>
-  );
-};
+  if (!components && !subcomponents) {
+    let mainProps;
+    try {
+      mainProps = { rows: extractComponentArgTypes(main, context, include, exclude) };
+    } catch (err) {
+      mainProps = { error: err.message };
+    }
+    return <ArgsTable {...mainProps} />;
+  }
 
-PropsContainer.defaultProps = {
-  of: '.',
+  return <ComponentsTable {...(props as ComponentsProps)} components={allComponents} />;
 };
 
-export { PropsContainer as Props };
+Props.defaultProps = {
+  of: CURRENT_SELECTION,
+};
diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
index 4464c02a6293..fcf7b0998fac 100644
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
-import { CURRENT_SELECTION } from './shared';
+import { CURRENT_SELECTION } from './types';
+import { enhanceSource } from './enhanceSource';
 
 interface CommonProps {
   language?: string;
@@ -24,35 +25,6 @@ type NoneProps = CommonProps;
 
 type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
 
-interface Location {
-  line: number;
-  col: number;
-}
-
-interface StorySource {
-  source: string;
-  locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
-}
-
-const extract = (targetId: string, { source, locationsMap }: StorySource) => {
-  const location = locationsMap[targetId];
-  // FIXME: bad locationsMap generated for module export functions whose titles are overridden
-  if (!location) return null;
-  const { startBody: start, endBody: end } = location;
-  const lines = source.split('\n');
-  if (start.line === end.line) {
-    return lines[start.line - 1].substring(start.col, end.col);
-  }
-  // NOTE: storysource locations are 1-based not 0-based!
-  const startLine = lines[start.line - 1];
-  const endLine = lines[end.line - 1];
-  return [
-    startLine.substring(start.col),
-    ...lines.slice(start.line, end.line - 1),
-    endLine.substring(0, end.col),
-  ].join('\n');
-};
-
 export const getSourceProps = (
   props: SourceProps,
   { id: currentId, storyStore }: DocsContextProps
@@ -63,16 +35,14 @@ export const getSourceProps = (
 
   let source = codeProps.code; // prefer user-specified code
   if (!source) {
-    const targetId = singleProps.id === CURRENT_SELECTION ? currentId : singleProps.id;
+    const targetId =
+      singleProps.id === CURRENT_SELECTION || !singleProps.id ? currentId : singleProps.id;
     const targetIds = multiProps.ids || [targetId];
     source = targetIds
-      .map(sourceId => {
+      .map((sourceId) => {
         const data = storyStore.fromId(sourceId);
-        if (data && data.parameters) {
-          const { mdxSource, storySource } = data.parameters;
-          return mdxSource || (storySource && extract(sourceId, storySource));
-        }
-        return '';
+        const enhanced = data && (enhanceSource(data) || data.parameters);
+        return enhanced?.docs?.source?.code || '';
       })
       .join('\n\n');
   }
@@ -86,9 +56,9 @@ export const getSourceProps = (
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-const SourceContainer: FunctionComponent<SourceProps> = props => (
+const SourceContainer: FunctionComponent<SourceProps> = (props) => (
   <DocsContext.Consumer>
-    {context => {
+    {(context) => {
       const sourceProps = getSourceProps(props, context);
       return <Source {...sourceProps} />;
     }}
diff --git a/addons/docs/src/blocks/Stories.tsx b/addons/docs/src/blocks/Stories.tsx
index c1b585e82db7..afb7de3e8ad8 100644
--- a/addons/docs/src/blocks/Stories.tsx
+++ b/addons/docs/src/blocks/Stories.tsx
@@ -3,27 +3,27 @@ import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { Heading } from './Heading';
 import { getDocsStories } from './utils';
-import { StoriesSlot, DocsStoryProps } from './shared';
+import { DocsStoryProps } from './types';
 
 interface StoriesProps {
-  slot?: StoriesSlot;
   title?: JSX.Element | string;
+  includePrimary?: boolean;
 }
 
-export const Stories: FunctionComponent<StoriesProps> = ({ slot, title }) => {
+export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary = false }) => {
   const context = useContext(DocsContext);
   const componentStories = getDocsStories(context);
 
-  const stories: DocsStoryProps[] = slot
-    ? slot(componentStories, context)
-    : componentStories && componentStories.slice(1);
-  if (!stories) {
+  let stories: DocsStoryProps[] = componentStories;
+  if (!includePrimary) stories = stories.slice(1);
+
+  if (!stories || stories.length === 0) {
     return null;
   }
   return (
     <>
       <Heading>{title}</Heading>
-      {stories.map(story => story && <DocsStory key={story.id} {...story} expanded />)}
+      {stories.map((story) => story && <DocsStory key={story.id} {...story} expanded />)}
     </>
   );
 };
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index f9a4902b08f4..589962677415 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -1,17 +1,15 @@
-import React, { createElement, ElementType, FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, ComponentProps } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { components as docsComponents } from '@storybook/components/html';
-import { Story, StoryProps as PureStoryProps } from '@storybook/components';
-import { CURRENT_SELECTION } from './shared';
+import { resetComponents } from '@storybook/components/html';
+import { Story as PureStory } from '@storybook/components';
+import { toId, storyNameFromExport } from '@storybook/csf';
+import { CURRENT_SELECTION } from './types';
 
 import { DocsContext, DocsContextProps } from './DocsContext';
 
 export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
 
-const resetComponents: Record<string, ElementType> = {};
-Object.keys(docsComponents).forEach(key => {
-  resetComponents[key] = (props: any) => createElement(key, props);
-});
+type PureStoryProps = ComponentProps<typeof PureStory>;
 
 interface CommonProps {
   height?: string;
@@ -29,50 +27,41 @@ type StoryRefProps = {
 
 export type StoryProps = StoryDefProps | StoryRefProps;
 
-const inferInlineStories = (framework: string): boolean => {
-  switch (framework) {
-    case 'react':
-      return true;
-    default:
-      return false;
-  }
-};
+export const lookupStoryId = (
+  storyName: string,
+  { mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
+) =>
+  toId(
+    mdxComponentMeta.id || mdxComponentMeta.title,
+    storyNameFromExport(mdxStoryNameToKey[storyName])
+  );
 
-export const getStoryProps = (
-  props: StoryProps,
-  { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps | null
-): PureStoryProps => {
+export const getStoryProps = (props: StoryProps, context: DocsContextProps): PureStoryProps => {
   const { id } = props as StoryRefProps;
   const { name } = props as StoryDefProps;
-  const inputId = id === CURRENT_SELECTION ? currentId : id;
-  const previewId = inputId || mdxStoryNameToId[name];
+  const inputId = id === CURRENT_SELECTION ? context.id : id;
+  const previewId = inputId || lookupStoryId(name, context);
+  const data = context.storyStore.fromId(previewId) || {};
 
   const { height, inline } = props;
-  const data = storyStore.fromId(previewId);
-  const { framework = null } = (data && data.parameters) || {};
+  const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data;
+  const { docs = {} } = parameters;
 
-  const docsParam = (data && data.parameters && data.parameters.docs) || {};
-
-  if (docsParam.disable) {
+  if (docs.disable) {
     return null;
   }
 
-  // prefer props, then global options, then framework-inferred values
-  const {
-    inlineStories = inferInlineStories(framework),
-    iframeHeight = undefined,
-    prepareForInline = undefined,
-  } = docsParam;
-  const { storyFn = undefined, name: storyName = undefined } = data || {};
-
+  // prefer block props, then story parameters defined by the framework-specific settings and optionally overriden by users
+  const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs;
   const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
-  if (storyIsInline && !prepareForInline && framework !== 'react') {
+  if (storyIsInline && !prepareForInline) {
     throw new Error(
       `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
     );
   }
 
   return {
+    parameters,
     inline: storyIsInline,
     id: previewId,
     storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn) : storyFn,
@@ -81,9 +70,9 @@ export const getStoryProps = (
   };
 };
 
-const StoryContainer: FunctionComponent<StoryProps> = props => (
+const Story: FunctionComponent<StoryProps> = (props) => (
   <DocsContext.Consumer>
-    {context => {
+    {(context) => {
       const storyProps = getStoryProps(props, context);
       if (!storyProps) {
         return null;
@@ -91,7 +80,7 @@ const StoryContainer: FunctionComponent<StoryProps> = props => (
       return (
         <div id={storyBlockIdFromId(storyProps.id)}>
           <MDXProvider components={resetComponents}>
-            <Story {...storyProps} />
+            <PureStory {...storyProps} />
           </MDXProvider>
         </div>
       );
@@ -99,9 +88,9 @@ const StoryContainer: FunctionComponent<StoryProps> = props => (
   </DocsContext.Consumer>
 );
 
-StoryContainer.defaultProps = {
+Story.defaultProps = {
   children: null,
   name: null,
 };
 
-export { StoryContainer as Story };
+export { Story };
diff --git a/addons/docs/src/blocks/Subtitle.tsx b/addons/docs/src/blocks/Subtitle.tsx
index 595bac6452f2..3fb44a8af5a6 100644
--- a/addons/docs/src/blocks/Subtitle.tsx
+++ b/addons/docs/src/blocks/Subtitle.tsx
@@ -1,19 +1,17 @@
 import React, { useContext, FunctionComponent } from 'react';
 import { Subtitle as PureSubtitle } from '@storybook/components';
 import { DocsContext } from './DocsContext';
-import { StringSlot } from './shared';
 
 interface SubtitleProps {
-  slot?: StringSlot;
   children?: JSX.Element | string;
 }
 
-export const Subtitle: FunctionComponent<SubtitleProps> = ({ slot, children }) => {
+export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
   const context = useContext(DocsContext);
   const { parameters } = context;
   let text: JSX.Element | string = children;
   if (!text) {
-    text = slot ? slot(context) : parameters && parameters.componentSubtitle;
+    text = parameters?.componentSubtitle;
   }
   return text ? <PureSubtitle className="sbdocs-subtitle">{text}</PureSubtitle> : null;
 };
diff --git a/addons/docs/src/blocks/Title.tsx b/addons/docs/src/blocks/Title.tsx
index bbc4533bb61e..fd9bf9acbc22 100644
--- a/addons/docs/src/blocks/Title.tsx
+++ b/addons/docs/src/blocks/Title.tsx
@@ -1,14 +1,12 @@
 import React, { useContext, FunctionComponent } from 'react';
 import { parseKind } from '@storybook/csf';
 import { Title as PureTitle } from '@storybook/components';
-import { DocsContext } from './DocsContext';
-import { StringSlot } from './shared';
+import { DocsContext, DocsContextProps } from './DocsContext';
 
 interface TitleProps {
-  slot?: StringSlot;
   children?: JSX.Element | string;
 }
-export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
+export const extractTitle = ({ kind, parameters }: DocsContextProps) => {
   const {
     showRoots,
     hierarchyRootSeparator: rootSeparator = '|',
@@ -17,28 +15,23 @@ export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
 
   let groups;
   if (typeof showRoots !== 'undefined') {
-    groups = selectedKind.split('/');
+    groups = kind.split('/');
   } else {
     // This covers off all the remaining cases:
     //   - If the separators were set above, we should use them
     //   - If they weren't set, we should only should use the old defaults if the kind contains '.' or '|',
     //     which for this particular splitting is the only case in which it actually matters.
-    ({ groups } = parseKind(selectedKind, { rootSeparator, groupSeparator }));
+    ({ groups } = parseKind(kind, { rootSeparator, groupSeparator }));
   }
 
-  return (groups && groups[groups.length - 1]) || selectedKind;
+  return (groups && groups[groups.length - 1]) || kind;
 };
 
-export const Title: FunctionComponent<TitleProps> = ({ slot, children }) => {
+export const Title: FunctionComponent<TitleProps> = ({ children }) => {
   const context = useContext(DocsContext);
-  const { selectedKind, parameters } = context;
   let text: JSX.Element | string = children;
   if (!text) {
-    if (slot) {
-      text = slot(context);
-    } else {
-      text = defaultTitleSlot({ selectedKind, parameters });
-    }
+    text = extractTitle(context);
   }
   return text ? <PureTitle className="sbdocs-title">{text}</PureTitle> : null;
 };
diff --git a/addons/docs/src/blocks/enhanceSource.test.ts b/addons/docs/src/blocks/enhanceSource.test.ts
new file mode 100644
index 000000000000..393cbd9c2b9c
--- /dev/null
+++ b/addons/docs/src/blocks/enhanceSource.test.ts
@@ -0,0 +1,82 @@
+import { StoryContext } from '@storybook/addons';
+import { enhanceSource } from './enhanceSource';
+
+const emptyContext: StoryContext = {
+  id: 'foo--bar',
+  kind: 'foo',
+  name: 'bar',
+  args: {},
+  globalArgs: {},
+  parameters: {},
+};
+
+const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
+
+describe('addon-docs enhanceSource', () => {
+  describe('no source loaded', () => {
+    const baseContext = emptyContext;
+    it('no transformSource', () => {
+      expect(enhanceSource(baseContext)).toBeNull();
+    });
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
+    });
+  });
+  describe('custom/mdx source loaded', () => {
+    const baseContext = {
+      ...emptyContext,
+      parameters: { storySource: { source: 'storySource.source' } },
+    };
+    it('no transformSource', () => {
+      expect(enhanceSource(baseContext)).toEqual({
+        docs: { source: { code: 'storySource.source' } },
+      });
+    });
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
+        code: 'formatted: storySource.source',
+      });
+    });
+  });
+  describe('storysource source loaded w/ locationsMap', () => {
+    const baseContext = {
+      ...emptyContext,
+      parameters: {
+        storySource: {
+          source: 'storySource.source',
+          locationsMap: {
+            'foo--bar': { startBody: { line: 1, col: 5 }, endBody: { line: 1, col: 11 } },
+          },
+        },
+      },
+    };
+    it('no transformSource', () => {
+      expect(enhanceSource(baseContext)).toEqual({ docs: { source: { code: 'Source' } } });
+    });
+    it('transformSource', () => {
+      const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
+        code: 'formatted: Source',
+      });
+    });
+  });
+  describe('custom docs.source provided', () => {
+    const baseContext = {
+      ...emptyContext,
+      parameters: {
+        storySource: { source: 'storySource.source' },
+        docs: { source: { code: 'docs.source.code' } },
+      },
+    };
+    it('no transformSource', () => {
+      expect(enhanceSource(baseContext)).toBeNull();
+    });
+    it('transformSource', () => {
+      const { source } = baseContext.parameters.docs;
+      const parameters = { ...baseContext.parameters, docs: { source, transformSource } };
+      expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
+    });
+  });
+});
diff --git a/addons/docs/src/blocks/enhanceSource.ts b/addons/docs/src/blocks/enhanceSource.ts
new file mode 100644
index 000000000000..77afcbfa707c
--- /dev/null
+++ b/addons/docs/src/blocks/enhanceSource.ts
@@ -0,0 +1,54 @@
+import { combineParameters } from '@storybook/client-api';
+import { StoryContext, Parameters } from '@storybook/addons';
+
+interface Location {
+  line: number;
+  col: number;
+}
+
+interface StorySource {
+  source: string;
+  locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
+}
+
+const extract = (targetId: string, { source, locationsMap }: StorySource) => {
+  if (!locationsMap) {
+    return source;
+  }
+  const location = locationsMap[targetId];
+
+  // FIXME: bad locationsMap generated for module export functions whose titles are overridden
+  if (!location) return null;
+  const { startBody: start, endBody: end } = location;
+  const lines = source.split('\n');
+  if (start.line === end.line && lines[start.line - 1] !== undefined) {
+    return lines[start.line - 1].substring(start.col, end.col);
+  }
+  // NOTE: storysource locations are 1-based not 0-based!
+  const startLine = lines[start.line - 1];
+  const endLine = lines[end.line - 1];
+  if (startLine === undefined || endLine === undefined) {
+    return source;
+  }
+  return [
+    startLine.substring(start.col),
+    ...lines.slice(start.line, end.line - 1),
+    endLine.substring(0, end.col),
+  ].join('\n');
+};
+
+export const enhanceSource = (context: StoryContext): Parameters => {
+  const { id, parameters } = context;
+  const { storySource, docs = {} } = parameters;
+  const { transformSource } = docs;
+
+  // no input or user has manually overridden the output
+  if (!storySource?.source || docs.source?.code) {
+    return null;
+  }
+
+  const input = extract(id, storySource);
+  const code = transformSource ? transformSource(input, id) : input;
+
+  return { docs: combineParameters(docs, { source: { code } }) };
+};
diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts
index f4f5def5d237..00569b5874f7 100644
--- a/addons/docs/src/blocks/index.ts
+++ b/addons/docs/src/blocks/index.ts
@@ -19,5 +19,5 @@ export * from './Subtitle';
 export * from './Title';
 export * from './Wrapper';
 
-export * from './shared';
+export * from './types';
 export * from './mdx';
diff --git a/addons/docs/src/blocks/mdx.tsx b/addons/docs/src/blocks/mdx.tsx
index ca5225602199..44bed3c9de52 100644
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@@ -1,11 +1,11 @@
 import React, { FC, SyntheticEvent } from 'react';
+import addons from '@storybook/addons';
 import { Source } from '@storybook/components';
+import { NAVIGATE_URL } from '@storybook/core-events';
 import { Code, components } from '@storybook/components/html';
-import { document, window } from 'global';
-import { isNil } from 'lodash';
+import { document } from 'global';
 import { styled } from '@storybook/theming';
 import { DocsContext, DocsContextProps } from './DocsContext';
-import { scrollToElement } from './utils';
 
 // Hacky utility for asserting identifiers in MDX Story elements
 export const assertIsFn = (val: any) => {
@@ -16,7 +16,7 @@ export const assertIsFn = (val: any) => {
 };
 
 // Hacky utilty for adding mdxStoryToId to the default context
-export const AddContext: FC<DocsContextProps> = props => {
+export const AddContext: FC<DocsContextProps> = (props) => {
   const { children, ...rest } = props;
   const parentContext = React.useContext(DocsContext);
   return (
@@ -48,11 +48,8 @@ export const CodeOrSourceMdx: FC<CodeOrSourceMdxProps> = ({ className, children,
   );
 };
 
-function generateHrefWithHash(hash: string): string {
-  const url = new URL(window.parent.location);
-  const href = `${url.origin}/${url.search}#${hash}`;
-
-  return href;
+function navigate(url: string) {
+  addons.getChannel().emit(NAVIGATE_URL, url);
 }
 
 // @ts-ignore
@@ -65,14 +62,12 @@ interface AnchorInPageProps {
 const AnchorInPage: FC<AnchorInPageProps> = ({ hash, children }) => (
   <A
     href={hash}
+    target="_self"
     onClick={(event: SyntheticEvent) => {
-      event.preventDefault();
-
-      const hashValue = hash.substring(1);
-      const element = document.getElementById(hashValue);
-      if (!isNil(element)) {
-        window.parent.history.replaceState(null, '', generateHrefWithHash(hashValue));
-        scrollToElement(element);
+      const id = hash.substring(1);
+      const element = document.getElementById(id);
+      if (element) {
+        navigate(hash);
       }
     }}
   >
@@ -85,10 +80,10 @@ interface AnchorMdxProps {
   target: string;
 }
 
-export const AnchorMdx: FC<AnchorMdxProps> = props => {
+export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
   const { href, target, children, ...rest } = props;
 
-  if (!isNil(href)) {
+  if (href) {
     // Enable scrolling for in-page anchors.
     if (href.startsWith('#')) {
       return <AnchorInPage hash={href}>{children}</AnchorInPage>;
@@ -96,11 +91,16 @@ export const AnchorMdx: FC<AnchorMdxProps> = props => {
 
     // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
     if (target !== '_blank') {
-      const parentUrl = new URL(window.parent.location.href);
-      const newHref = `${parentUrl.origin}${href}`;
-
       return (
-        <A href={newHref} target={target} {...rest}>
+        <A
+          href={href}
+          onClick={(event: SyntheticEvent) => {
+            event.preventDefault();
+            navigate(href);
+          }}
+          target={target}
+          {...rest}
+        >
           {children}
         </A>
       );
@@ -149,17 +149,19 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
 }) => {
   // @ts-ignore
   const OcticonHeader = OcticonHeaders[as];
+  const hash = `#${id}`;
 
   return (
     <OcticonHeader id={id} {...rest}>
       <OcticonAnchor
         aria-hidden="true"
-        href={generateHrefWithHash(id)}
+        href={hash}
         tabIndex={-1}
-        onClick={() => {
+        target="_self"
+        onClick={(event: SyntheticEvent) => {
           const element = document.getElementById(id);
-          if (!isNil(element)) {
-            scrollToElement(element);
+          if (element) {
+            navigate(hash);
           }
         }}
       >
@@ -180,11 +182,11 @@ interface HeaderMdxProps {
   id: string;
 }
 
-export const HeaderMdx: FC<HeaderMdxProps> = props => {
+export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
   const { as, id, children, ...rest } = props;
 
   // An id should have been added on every header by the "remark-slug" plugin.
-  if (!isNil(id)) {
+  if (id) {
     return (
       <HeaderWithOcticonAnchor as={as} id={id} {...rest}>
         {children}
diff --git a/addons/docs/src/blocks/shared.ts b/addons/docs/src/blocks/shared.ts
deleted file mode 100644
index baab2861c309..000000000000
--- a/addons/docs/src/blocks/shared.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PropsTableProps } from '@storybook/components';
-
-export const CURRENT_SELECTION = '.';
-
-export type Component = any;
-
-export interface StoryData {
-  id?: string;
-  kind?: string;
-  name?: string;
-  parameters?: any;
-}
-
-export type DocsStoryProps = StoryData & {
-  expanded?: boolean;
-  withToolbar?: boolean;
-};
-
-export interface SlotContext {
-  id?: string;
-  selectedKind?: string;
-  selectedStory?: string;
-  parameters?: any;
-  storyStore?: any;
-}
-
-export type StringSlot = (context: SlotContext) => string;
-export type DescriptionSlot = (description: string, context: SlotContext) => string;
-export type PropsSlot = (context: SlotContext, component: Component) => PropsTableProps;
-export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps;
-
-export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[];
-
-export interface DocsPageProps {
-  titleSlot?: StringSlot;
-  subtitleSlot?: StringSlot;
-  descriptionSlot?: DescriptionSlot;
-  primarySlot?: StorySlot;
-  propsSlot?: PropsSlot;
-  storiesSlot?: StoriesSlot;
-}
diff --git a/addons/docs/src/blocks/types.ts b/addons/docs/src/blocks/types.ts
new file mode 100644
index 000000000000..93eabc67b867
--- /dev/null
+++ b/addons/docs/src/blocks/types.ts
@@ -0,0 +1,16 @@
+export const CURRENT_SELECTION = '.';
+export const PRIMARY_STORY = '^';
+
+export type Component = any;
+
+export interface StoryData {
+  id?: string;
+  kind?: string;
+  name?: string;
+  parameters?: any;
+}
+
+export type DocsStoryProps = StoryData & {
+  expanded?: boolean;
+  withToolbar?: boolean;
+};
diff --git a/addons/docs/src/blocks/utils.ts b/addons/docs/src/blocks/utils.ts
index 92129cca1801..036925af27e5 100644
--- a/addons/docs/src/blocks/utils.ts
+++ b/addons/docs/src/blocks/utils.ts
@@ -1,18 +1,23 @@
 /* eslint-disable no-underscore-dangle */
 import { DocsContextProps } from './DocsContext';
-import { StoryData, Component } from './shared';
+import { StoryData, Component } from './types';
 
 export const getDocsStories = (context: DocsContextProps): StoryData[] => {
-  const { storyStore, selectedKind } = context;
+  const { storyStore, kind } = context;
+
+  if (!storyStore) {
+    return [];
+  }
+
   return storyStore
-    .getStoriesForKind(selectedKind)
+    .getStoriesForKind(kind)
     .filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
 };
 
 const titleCase = (str: string): string =>
   str
     .split('-')
-    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join('');
 
 export const getComponentName = (component: Component): string => {
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
new file mode 100644
index 000000000000..2eb0d33f0cba
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`angular component properties doc-button 1`] = `
+Object {
+  "_inputValue": Object {
+    "defaultValue": "some value",
+    "description": "",
+    "name": "_inputValue",
+    "table": Object {
+      "category": "properties",
+      "type": Object {
+        "required": true,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "_value": Object {
+    "defaultValue": "Private hello",
+    "description": "<p>Private value. </p>
+",
+    "name": "_value",
+    "table": Object {
+      "category": "properties",
+      "type": Object {
+        "required": true,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "appearance": Object {
+    "defaultValue": "secondary",
+    "description": "<p>Appearance style of the button. </p>
+",
+    "name": "appearance",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "\\"primary\\" | \\"secondary\\"",
+      },
+    },
+    "type": Object {
+      "name": "enum",
+      "value": Array [
+        "primary",
+        "secondary",
+      ],
+    },
+  },
+  "buttonRef": Object {
+    "defaultValue": undefined,
+    "description": "",
+    "name": "buttonRef",
+    "table": Object {
+      "category": "view child",
+      "type": Object {
+        "required": true,
+        "summary": "ElementRef",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "calc": Object {
+    "defaultValue": undefined,
+    "description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
+",
+    "name": "calc",
+    "table": Object {
+      "category": "methods",
+      "type": Object {
+        "required": false,
+        "summary": "(x: number, y: string | number) => number",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "inputValue": Object {
+    "defaultValue": undefined,
+    "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
+",
+    "name": "inputValue",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+    },
+  },
+  "internalProperty": Object {
+    "defaultValue": "Public hello",
+    "description": "<p>Public value. </p>
+",
+    "name": "internalProperty",
+    "table": Object {
+      "category": "properties",
+      "type": Object {
+        "required": true,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "isDisabled": Object {
+    "defaultValue": false,
+    "description": "<p>Sets the button to a disabled state. </p>
+",
+    "name": "isDisabled",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+    },
+  },
+  "item": Object {
+    "defaultValue": undefined,
+    "description": undefined,
+    "name": "item",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "[]",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
+  "label": Object {
+    "defaultValue": undefined,
+    "description": "<p>The inner text of the button.</p>
+",
+    "name": "label",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+    },
+  },
+  "onClick": Object {
+    "defaultValue": undefined,
+    "description": "<p>Handler to be called when the button is clicked by a user.</p>
+<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
+",
+    "name": "onClick",
+    "table": Object {
+      "category": "outputs",
+      "type": Object {
+        "required": true,
+        "summary": "EventEmitter",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "privateMethod": Object {
+    "defaultValue": undefined,
+    "description": "<p>A private method.</p>
+",
+    "name": "privateMethod",
+    "table": Object {
+      "category": "methods",
+      "type": Object {
+        "required": false,
+        "summary": "(password: string) => void",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "processedItem": Object {
+    "defaultValue": undefined,
+    "description": "",
+    "name": "processedItem",
+    "table": Object {
+      "category": "properties",
+      "type": Object {
+        "required": true,
+        "summary": "T[]",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "protectedMethod": Object {
+    "defaultValue": undefined,
+    "description": "<p>A protected method.</p>
+",
+    "name": "protectedMethod",
+    "table": Object {
+      "category": "methods",
+      "type": Object {
+        "required": false,
+        "summary": "(id?: number) => void",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "publicMethod": Object {
+    "defaultValue": undefined,
+    "description": "<p>A public method using an interface. </p>
+",
+    "name": "publicMethod",
+    "table": Object {
+      "category": "methods",
+      "type": Object {
+        "required": false,
+        "summary": "(things: ISomeInterface) => void",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "showKeyAlias": Object {
+    "defaultValue": undefined,
+    "description": undefined,
+    "name": "showKeyAlias",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "size": Object {
+    "defaultValue": "medium",
+    "description": "<p>Size of the button. </p>
+",
+    "name": "size",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "ButtonSize",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
+  "somethingYouShouldNotUse": Object {
+    "defaultValue": false,
+    "description": "<p>Some input you shouldn&#39;t use.</p>
+",
+    "name": "somethingYouShouldNotUse",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+    },
+  },
+}
+`;
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
new file mode 100644
index 000000000000..658e8698ef3e
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot
@@ -0,0 +1,1020 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`angular component properties doc-button 1`] = `
+Object {
+  "classes": Array [],
+  "components": Array [
+    Object {
+      "accessors": Object {
+        "inputValue": Object {
+          "getSignature": Object {
+            "description": "<p>Getter for <code>inputValue</code>. </p>
+",
+            "line": 102,
+            "name": "inputValue",
+            "returnType": "",
+            "type": "",
+          },
+          "name": "inputValue",
+          "setSignature": Object {
+            "args": Array [
+              Object {
+                "name": "value",
+                "type": "string",
+              },
+            ],
+            "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
+",
+            "jsdoctags": Array [
+              Object {
+                "name": "value",
+                "tagName": Object {
+                  "text": "param",
+                },
+                "type": "string",
+              },
+            ],
+            "line": 97,
+            "name": "inputValue",
+            "returnType": "void",
+            "type": "void",
+          },
+        },
+        "item": Object {
+          "name": "item",
+          "setSignature": Object {
+            "args": Array [
+              Object {
+                "name": "item",
+                "type": "[]",
+              },
+            ],
+            "jsdoctags": Array [
+              Object {
+                "name": "item",
+                "tagName": Object {
+                  "text": "param",
+                },
+                "type": "[]",
+              },
+            ],
+            "line": 182,
+            "name": "item",
+            "returnType": "void",
+            "type": "void",
+          },
+        },
+        "value": Object {
+          "getSignature": Object {
+            "description": "<p>Get the private value. </p>
+",
+            "line": 141,
+            "name": "value",
+            "returnType": "string | number",
+            "type": "",
+          },
+          "name": "value",
+          "setSignature": Object {
+            "args": Array [
+              Object {
+                "name": "value",
+                "type": "",
+              },
+            ],
+            "description": "<p>Set the private value. </p>
+",
+            "jsdoctags": Array [
+              Object {
+                "name": "value",
+                "tagName": Object {
+                  "text": "param",
+                },
+                "type": "",
+              },
+            ],
+            "line": 136,
+            "name": "value",
+            "returnType": "void",
+            "type": "void",
+          },
+        },
+      },
+      "assetsDirs": Array [],
+      "description": "<p>This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.</p>
+<p>It supports <a href=\\"https://en.wikipedia.org/wiki/Markdown\\">markdown</a>, so you can embed formatted text,
+like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
+<blockquote>
+<p>How you like dem apples?! It&#39;s never been easier to document all your components.</p>
+</blockquote>
+",
+      "encapsulation": Array [],
+      "entryComponents": Array [],
+      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "hostBindings": Array [
+        Object {
+          "defaultValue": "false",
+          "line": 111,
+          "name": "class.focused",
+        },
+      ],
+      "hostListeners": Array [
+        Object {
+          "args": Array [
+            Object {
+              "name": "btn",
+              "type": "",
+            },
+          ],
+          "argsDecorator": Array [
+            "$event.target",
+          ],
+          "line": 107,
+          "name": "click",
+        },
+      ],
+      "id": "component-InputComponent-8088cb533b6defa9d43d10841b59ce18",
+      "inputs": Array [],
+      "inputsClass": Array [
+        Object {
+          "defaultValue": "'secondary'",
+          "description": "<p>Appearance style of the button. </p>
+",
+          "line": 46,
+          "name": "appearance",
+          "type": "\\"primary\\" | \\"secondary\\"",
+        },
+        Object {
+          "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
+",
+          "line": 97,
+          "name": "inputValue",
+          "type": "string",
+        },
+        Object {
+          "defaultValue": "false",
+          "description": "<p>Sets the button to a disabled state. </p>
+",
+          "line": 50,
+          "name": "isDisabled",
+        },
+        Object {
+          "line": 182,
+          "name": "item",
+          "type": "[]",
+        },
+        Object {
+          "description": "<p>The inner text of the button.</p>
+",
+          "line": 58,
+          "name": "label",
+          "type": "string",
+        },
+        Object {
+          "line": 179,
+          "name": "showKeyAlias",
+          "type": "",
+        },
+        Object {
+          "defaultValue": "'medium'",
+          "description": "<p>Size of the button. </p>
+",
+          "line": 62,
+          "name": "size",
+          "type": "ButtonSize",
+        },
+        Object {
+          "defaultValue": "false",
+          "description": "<p>Some input you shouldn&#39;t use.</p>
+",
+          "line": 70,
+          "name": "somethingYouShouldNotUse",
+        },
+      ],
+      "jsdoctags": Array [
+        Object {
+          "atToken": Object {
+            "end": 787,
+            "flags": 0,
+            "kind": 57,
+            "pos": 786,
+          },
+          "comment": "Hello world",
+          "end": 794,
+          "flags": 0,
+          "kind": 288,
+          "pos": 786,
+          "tagName": Object {
+            "end": 793,
+            "escapedText": "string",
+            "flags": 0,
+            "pos": 787,
+          },
+        },
+        Object {
+          "atToken": Object {
+            "end": 810,
+            "flags": 0,
+            "kind": 57,
+            "pos": 809,
+          },
+          "comment": "[Example](http://example.com)",
+          "end": 815,
+          "flags": 0,
+          "kind": 288,
+          "pos": 809,
+          "tagName": Object {
+            "end": 814,
+            "escapedText": "link",
+            "flags": 0,
+            "pos": 810,
+          },
+        },
+        Object {
+          "atToken": Object {
+            "end": 849,
+            "flags": 0,
+            "kind": 57,
+            "pos": 848,
+          },
+          "comment": "\`ThingThing\`",
+          "end": 854,
+          "flags": 0,
+          "kind": 288,
+          "pos": 848,
+          "tagName": Object {
+            "end": 853,
+            "escapedText": "code",
+            "flags": 0,
+            "pos": 849,
+          },
+        },
+        Object {
+          "atToken": Object {
+            "end": 871,
+            "flags": 0,
+            "kind": 57,
+            "pos": 870,
+          },
+          "comment": "<span class=\\"badge\\">aaa</span>",
+          "end": 876,
+          "flags": 0,
+          "kind": 288,
+          "pos": 870,
+          "tagName": Object {
+            "end": 875,
+            "escapedText": "html",
+            "flags": 0,
+            "pos": 871,
+          },
+        },
+      ],
+      "methodsClass": Array [
+        Object {
+          "args": Array [
+            Object {
+              "name": "x",
+              "type": "number",
+            },
+            Object {
+              "name": "y",
+              "type": "string | number",
+            },
+          ],
+          "description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
+",
+          "jsdoctags": Array [
+            Object {
+              "comment": "<p>Some number you&#39;d like to use.</p>
+",
+              "name": Object {
+                "end": 3219,
+                "escapedText": "x",
+                "flags": 0,
+                "pos": 3218,
+              },
+              "tagName": Object {
+                "end": 3217,
+                "escapedText": "param",
+                "flags": 0,
+                "pos": 3212,
+              },
+              "type": "number",
+            },
+            Object {
+              "comment": "<p>Some other number or string you&#39;d like to use, will have <code>parseInt()</code> applied before calculation.</p>
+",
+              "name": Object {
+                "end": 3264,
+                "escapedText": "y",
+                "flags": 0,
+                "pos": 3263,
+              },
+              "tagName": Object {
+                "end": 3262,
+                "escapedText": "param",
+                "flags": 0,
+                "pos": 3257,
+              },
+              "type": "string | number",
+            },
+          ],
+          "line": 151,
+          "modifierKind": Array [
+            114,
+          ],
+          "name": "calc",
+          "optional": false,
+          "returnType": "number",
+          "typeParameters": Array [],
+        },
+        Object {
+          "args": Array [
+            Object {
+              "name": "password",
+              "type": "string",
+            },
+          ],
+          "description": "<p>A private method.</p>
+",
+          "jsdoctags": Array [
+            Object {
+              "comment": "<p>Some <code>password</code>.</p>
+",
+              "name": Object {
+                "end": 3780,
+                "escapedText": "password",
+                "flags": 0,
+                "pos": 3772,
+              },
+              "tagName": Object {
+                "end": 3771,
+                "escapedText": "param",
+                "flags": 0,
+                "pos": 3766,
+              },
+              "type": "string",
+            },
+          ],
+          "line": 174,
+          "modifierKind": Array [
+            112,
+          ],
+          "name": "privateMethod",
+          "optional": false,
+          "returnType": "void",
+          "typeParameters": Array [],
+        },
+        Object {
+          "args": Array [
+            Object {
+              "name": "id",
+              "optional": true,
+              "type": "number",
+            },
+          ],
+          "description": "<p>A protected method.</p>
+",
+          "jsdoctags": Array [
+            Object {
+              "comment": "<p>Some <code>id</code>.</p>
+",
+              "name": Object {
+                "end": 3639,
+                "escapedText": "id",
+                "flags": 0,
+                "pos": 3637,
+              },
+              "optional": true,
+              "tagName": Object {
+                "end": 3636,
+                "escapedText": "param",
+                "flags": 0,
+                "pos": 3631,
+              },
+              "type": "number",
+            },
+          ],
+          "line": 165,
+          "modifierKind": Array [
+            113,
+          ],
+          "name": "protectedMethod",
+          "optional": false,
+          "returnType": "void",
+          "typeParameters": Array [],
+        },
+        Object {
+          "args": Array [
+            Object {
+              "name": "things",
+              "type": "ISomeInterface",
+            },
+          ],
+          "description": "<p>A public method using an interface. </p>
+",
+          "jsdoctags": Array [
+            Object {
+              "name": "things",
+              "tagName": Object {
+                "text": "param",
+              },
+              "type": "ISomeInterface",
+            },
+          ],
+          "line": 156,
+          "modifierKind": Array [
+            114,
+          ],
+          "name": "publicMethod",
+          "optional": false,
+          "returnType": "void",
+          "typeParameters": Array [],
+        },
+      ],
+      "name": "InputComponent",
+      "outputs": Array [],
+      "outputsClass": Array [
+        Object {
+          "defaultValue": "new EventEmitter<Event>()",
+          "description": "<p>Handler to be called when the button is clicked by a user.</p>
+<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
+",
+          "line": 78,
+          "name": "onClick",
+          "type": "EventEmitter",
+        },
+      ],
+      "propertiesClass": Array [
+        Object {
+          "defaultValue": "'some value'",
+          "description": "",
+          "line": 93,
+          "modifierKind": Array [
+            112,
+          ],
+          "name": "_inputValue",
+          "optional": false,
+          "type": "string",
+        },
+        Object {
+          "defaultValue": "'Private hello'",
+          "description": "<p>Private value. </p>
+",
+          "line": 133,
+          "modifierKind": Array [
+            112,
+          ],
+          "name": "_value",
+          "optional": false,
+          "type": "string",
+        },
+        Object {
+          "decorators": Array [
+            Object {
+              "name": "ViewChild",
+              "stringifiedArguments": "'buttonRef', {static: false}",
+            },
+          ],
+          "description": "",
+          "line": 42,
+          "name": "buttonRef",
+          "optional": false,
+          "type": "ElementRef",
+        },
+        Object {
+          "defaultValue": "'Public hello'",
+          "description": "<p>Public value. </p>
+",
+          "line": 130,
+          "modifierKind": Array [
+            114,
+          ],
+          "name": "internalProperty",
+          "optional": false,
+          "type": "string",
+        },
+        Object {
+          "description": "",
+          "line": 186,
+          "modifierKind": Array [
+            114,
+          ],
+          "name": "processedItem",
+          "optional": false,
+          "type": "T[]",
+        },
+      ],
+      "providers": Array [],
+      "rawdescription": "This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+
+It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+like **bold**, _italic_, and \`inline code\`.
+
+> How you like dem apples?! It's never been easier to document all your components.",
+      "selector": "doc-button",
+      "sourceCode": "import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  HostListener,
+  HostBinding,
+  ElementRef,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and \`inline code\`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code \`ThingThing\`
+ * @html <span class=\\"badge\\">aaa</span>
+ */
+@Component({
+  selector: 'doc-button',
+})
+export class InputComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if \`isDisabled\` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the \`ignore\` annoation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for \`inputValue\` that is also an \`@Input\`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for \`inputValue\`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event.target'])
+  onClickListener(btn) {
+    console.log('button', btn);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => \`btn-\${_class}\`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = \`\${value}\`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds \`x\` and \`y\` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(\`\${y}\`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some \`id\`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some \`password\`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem: T[];
+}
+",
+      "styleUrls": Array [],
+      "styleUrlsData": "",
+      "styles": Array [],
+      "stylesData": "",
+      "templateUrl": Array [],
+      "type": "component",
+      "viewProviders": Array [],
+    },
+  ],
+  "coverage": Object {
+    "count": 22,
+    "files": Array [
+      Object {
+        "coverageCount": "14/21",
+        "coveragePercent": 66,
+        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "linktype": "component",
+        "name": "InputComponent",
+        "status": "good",
+        "type": "component",
+      },
+      Object {
+        "coverageCount": "0/4",
+        "coveragePercent": 0,
+        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "linktype": "interface",
+        "name": "ISomeInterface",
+        "status": "low",
+        "type": "interface",
+      },
+      Object {
+        "coverageCount": "0/1",
+        "coveragePercent": 0,
+        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "linksubtype": "variable",
+        "linktype": "miscellaneous",
+        "name": "exportedConstant",
+        "status": "low",
+        "type": "variable",
+      },
+    ],
+    "status": "low",
+  },
+  "directives": Array [],
+  "injectables": Array [],
+  "interfaces": Array [
+    Object {
+      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "id": "interface-ISomeInterface-8088cb533b6defa9d43d10841b59ce18",
+      "indexSignatures": Array [],
+      "kind": 150,
+      "methods": Array [],
+      "name": "ISomeInterface",
+      "properties": Array [
+        Object {
+          "description": "",
+          "line": 20,
+          "name": "one",
+          "optional": false,
+          "type": "string",
+        },
+        Object {
+          "description": "",
+          "line": 22,
+          "name": "three",
+          "optional": false,
+          "type": "any[]",
+        },
+        Object {
+          "description": "",
+          "line": 21,
+          "name": "two",
+          "optional": false,
+          "type": "boolean",
+        },
+      ],
+      "sourceCode": "import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  HostListener,
+  HostBinding,
+  ElementRef,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and \`inline code\`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code \`ThingThing\`
+ * @html <span class=\\"badge\\">aaa</span>
+ */
+@Component({
+  selector: 'doc-button',
+})
+export class InputComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if \`isDisabled\` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the \`ignore\` annoation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for \`inputValue\` that is also an \`@Input\`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for \`inputValue\`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event.target'])
+  onClickListener(btn) {
+    console.log('button', btn);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => \`btn-\${_class}\`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = \`\${value}\`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds \`x\` and \`y\` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(\`\${y}\`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some \`id\`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some \`password\`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem: T[];
+}
+",
+      "type": "interface",
+    },
+  ],
+  "miscellaneous": Object {
+    "enumerations": Array [],
+    "functions": Array [],
+    "groupedEnumerations": Object {},
+    "groupedFunctions": Object {},
+    "groupedTypeAliases": Object {
+      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+        Object {
+          "ctype": "miscellaneous",
+          "description": "",
+          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "kind": 168,
+          "name": "ButtonSize",
+          "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
+          "subtype": "typealias",
+        },
+      ],
+    },
+    "groupedVariables": Object {
+      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+        Object {
+          "ctype": "miscellaneous",
+          "defaultValue": "'An exported constant'",
+          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "name": "exportedConstant",
+          "subtype": "variable",
+          "type": "string",
+        },
+      ],
+    },
+    "typealiases": Array [
+      Object {
+        "ctype": "miscellaneous",
+        "description": "",
+        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "kind": 168,
+        "name": "ButtonSize",
+        "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
+        "subtype": "typealias",
+      },
+    ],
+    "variables": Array [
+      Object {
+        "ctype": "miscellaneous",
+        "defaultValue": "'An exported constant'",
+        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "name": "exportedConstant",
+        "subtype": "variable",
+        "type": "string",
+      },
+    ],
+  },
+  "modules": Array [],
+  "pipes": Array [],
+  "routes": Array [],
+}
+`;
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts
new file mode 100644
index 000000000000..8f705e01e255
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts
@@ -0,0 +1,187 @@
+// @ts-nocheck
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  HostListener,
+  HostBinding,
+  ElementRef,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+@Component({
+  selector: 'doc-button',
+})
+export class InputComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if `isDisabled` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the `ignore` annoation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for `inputValue` that is also an `@Input`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for `inputValue`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event.target'])
+  onClickListener(btn) {
+    console.log('button', btn);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => `btn-${_class}`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = `${value}`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds `x` and `y` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(`${y}`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some `id`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some `password`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem: T[];
+}
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/properties.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/properties.snapshot
new file mode 100644
index 000000000000..efd774f746b2
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/properties.snapshot
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`angular component properties doc-button 1`] = `
+Object {
+  "sections": Object {
+    "inputs": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "'secondary'",
+        },
+        "description": "<p>Appearance style of the button. </p>
+",
+        "name": "appearance",
+        "required": true,
+        "type": Object {
+          "summary": "\\"primary\\" | \\"secondary\\"",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
+",
+        "name": "inputValue",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "false",
+        },
+        "description": "<p>Sets the button to a disabled state. </p>
+",
+        "name": "isDisabled",
+        "required": true,
+        "type": Object {
+          "summary": undefined,
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": undefined,
+        "name": "item",
+        "required": true,
+        "type": Object {
+          "summary": "[]",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "<p>The inner text of the button.</p>
+",
+        "name": "label",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": undefined,
+        "name": "showKeyAlias",
+        "required": true,
+        "type": Object {
+          "summary": "",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'medium'",
+        },
+        "description": "<p>Size of the button. </p>
+",
+        "name": "size",
+        "required": true,
+        "type": Object {
+          "summary": "ButtonSize",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "false",
+        },
+        "description": "<p>Some input you shouldn&#39;t use.</p>
+",
+        "name": "somethingYouShouldNotUse",
+        "required": true,
+        "type": Object {
+          "summary": undefined,
+        },
+      },
+    ],
+    "methods": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
+",
+        "name": "calc",
+        "required": false,
+        "type": Object {
+          "summary": "(x: number, y: string | number) => number",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A private method.</p>
+",
+        "name": "privateMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(password: string) => void",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A protected method.</p>
+",
+        "name": "protectedMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(id?: number) => void",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "",
+        },
+        "description": "<p>A public method using an interface. </p>
+",
+        "name": "publicMethod",
+        "required": false,
+        "type": Object {
+          "summary": "(things: ISomeInterface) => void",
+        },
+      },
+    ],
+    "outputs": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "new EventEmitter<Event>()",
+        },
+        "description": "<p>Handler to be called when the button is clicked by a user.</p>
+<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
+",
+        "name": "onClick",
+        "required": true,
+        "type": Object {
+          "summary": "EventEmitter",
+        },
+      },
+    ],
+    "properties": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": "'some value'",
+        },
+        "description": "",
+        "name": "_inputValue",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'Private hello'",
+        },
+        "description": "<p>Private value. </p>
+",
+        "name": "_value",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": "'Public hello'",
+        },
+        "description": "<p>Public value. </p>
+",
+        "name": "internalProperty",
+        "required": true,
+        "type": Object {
+          "summary": "string",
+        },
+      },
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "",
+        "name": "processedItem",
+        "required": true,
+        "type": Object {
+          "summary": "T[]",
+        },
+      },
+    ],
+    "view child": Array [
+      Object {
+        "defaultValue": Object {
+          "summary": undefined,
+        },
+        "description": "",
+        "name": "buttonRef",
+        "required": true,
+        "type": Object {
+          "summary": "ElementRef",
+        },
+      },
+    ],
+  },
+}
+`;
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/tsconfig.json b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/tsconfig.json
new file mode 100644
index 000000000000..ced6b7ae2f7c
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["./*.ts"]
+}
diff --git a/addons/docs/src/frameworks/angular/angular-properties.test.ts b/addons/docs/src/frameworks/angular/angular-properties.test.ts
new file mode 100644
index 000000000000..d914edb10152
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/angular-properties.test.ts
@@ -0,0 +1,54 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs';
+import tmp from 'tmp';
+import { sync as spawnSync } from 'cross-spawn';
+
+import { findComponentByName, extractArgTypesFromData } from './compodoc';
+
+// File hierarchy: __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+
+const runCompodoc = (inputPath: string) => {
+  const testDir = path.dirname(inputPath);
+  const { name: tmpDir, removeCallback } = tmp.dirSync();
+
+  // FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
+  // one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
+  // (and screwed around with relative paths as well, but couldn't get it working)
+  spawnSync('compodoc', ['-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
+    stdio: 'inherit',
+  });
+  const output = fs.readFileSync(`${tmpDir}/documentation.json`, 'utf8');
+  try {
+    removeCallback();
+  } catch (e) {
+    //
+  }
+  return output;
+};
+
+describe('angular component properties', () => {
+  const fixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {
+    if (testEntry.isDirectory()) {
+      const testDir = path.join(fixturesDir, testEntry.name);
+      const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
+      if (testFile) {
+        it(testEntry.name, () => {
+          const inputPath = path.join(testDir, testFile);
+
+          // snapshot the output of compodoc
+          const compodocOutput = runCompodoc(inputPath);
+          const compodocJson = JSON.parse(compodocOutput);
+          expect(compodocJson).toMatchSpecificSnapshot(path.join(testDir, 'compodoc.snapshot'));
+
+          // snapshot the output of addon-docs angular-properties
+          const componentData = findComponentByName('InputComponent', compodocJson);
+          const argTypes = extractArgTypesFromData(componentData);
+          expect(argTypes).toMatchSpecificSnapshot(path.join(testDir, 'argtypes.snapshot'));
+        });
+      }
+    }
+  });
+});
diff --git a/addons/docs/src/frameworks/angular/compodoc.test.ts b/addons/docs/src/frameworks/angular/compodoc.test.ts
new file mode 100644
index 000000000000..6e1590c4bc74
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/compodoc.test.ts
@@ -0,0 +1,41 @@
+import { extractType } from './compodoc';
+import { Decorator } from './types';
+
+const makeProperty = (compodocType?: string) => ({
+  type: compodocType,
+  name: 'dummy',
+  decorators: [] as Decorator[],
+  optional: true,
+});
+
+describe('extractType', () => {
+  describe('with compodoc type', () => {
+    it.each([
+      ['string', { name: 'string' }],
+      ['boolean', { name: 'boolean' }],
+      ['number', { name: 'number' }],
+      ['object', { name: 'object' }],
+      ['foo', { name: 'object' }],
+      [null, { name: 'void' }],
+      [undefined, { name: 'void' }],
+      ['T[]', { name: 'object' }],
+      ['[]', { name: 'object' }],
+      ['"primary" | "secondary"', { name: 'enum', value: ['primary', 'secondary'] }],
+    ])('%s', (compodocType, expected) => {
+      expect(extractType(makeProperty(compodocType), null)).toEqual(expected);
+    });
+  });
+
+  describe('without compodoc type', () => {
+    it.each([
+      ['string', { name: 'string' }],
+      [false, { name: 'boolean' }],
+      [10, { name: 'number' }],
+      [['abc'], { name: 'object' }],
+      [{ foo: 1 }, { name: 'object' }],
+      [undefined, { name: 'void' }],
+    ])('%s', (defaultValue, expected) => {
+      expect(extractType(makeProperty(null), defaultValue)).toEqual(expected);
+    });
+  });
+});
diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts
index 8362919f1755..8810a8a799f2 100644
--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@@ -2,7 +2,19 @@
 /* global window */
 
 import { PropDef } from '@storybook/components';
-import { Argument, CompodocJson, Component, Method, Property, Directive } from './types';
+import { ArgType, ArgTypes } from '@storybook/api';
+import { logger } from '@storybook/client-logger';
+import {
+  Argument,
+  Class,
+  CompodocJson,
+  Component,
+  Injectable,
+  Method,
+  Pipe,
+  Property,
+  Directive,
+} from './types';
 
 type Sections = Record<string, PropDef[]>;
 
@@ -30,10 +42,6 @@ export const checkValidCompodocJson = (compodocJson: CompodocJson) => {
   }
 };
 
-function isEmpty(obj: any) {
-  return Object.entries(obj).length === 0 && obj.constructor === Object;
-}
-
 const hasDecorator = (item: Property, decoratorName: string) =>
   item.decorators && item.decorators.find((x: any) => x.name === decoratorName);
 
@@ -55,12 +63,14 @@ const mapPropertyToSection = (key: string, item: Property) => {
 
 const mapItemToSection = (key: string, item: Method | Property): string => {
   switch (key) {
+    case 'methods':
     case 'methodsClass':
       return 'methods';
     case 'inputsClass':
       return 'inputs';
     case 'outputsClass':
       return 'outputs';
+    case 'properties':
     case 'propertiesClass':
       if (isMethod(item)) {
         throw new Error("Cannot be of type Method if key === 'propertiesClass'");
@@ -71,6 +81,13 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
   }
 };
 
+export const findComponentByName = (name: string, compodocJson: CompodocJson) =>
+  compodocJson.components.find((c: Component) => c.name === name) ||
+  compodocJson.directives.find((c: Directive) => c.name === name) ||
+  compodocJson.pipes.find((c: Pipe) => c.name === name) ||
+  compodocJson.injectables.find((c: Injectable) => c.name === name) ||
+  compodocJson.classes.find((c: Class) => c.name === name);
+
 const getComponentData = (component: Component | Directive) => {
   if (!component) {
     return null;
@@ -79,10 +96,7 @@ const getComponentData = (component: Component | Directive) => {
   const compodocJson = getCompdocJson();
   checkValidCompodocJson(compodocJson);
   const { name } = component;
-  return (
-    compodocJson.components.find((c: Component) => c.name === name) ||
-    compodocJson.directives.find((c: Directive) => c.name === name)
-  );
+  return findComponentByName(name, compodocJson);
 };
 
 const displaySignature = (item: Method): string => {
@@ -92,36 +106,94 @@ const displaySignature = (item: Method): string => {
   return `(${args.join(', ')}) => ${item.returnType}`;
 };
 
-export const extractProps = (component: Component | Directive) => {
-  const componentData = getComponentData(component);
-  if (!componentData) {
+const extractTypeFromValue = (defaultValue: any) => {
+  const valueType = typeof defaultValue;
+  return defaultValue || valueType === 'boolean' ? valueType : null;
+};
+
+const extractEnumValues = (compodocType: any) => {
+  if (typeof compodocType !== 'string' || compodocType.indexOf('|') === -1) {
     return null;
   }
 
-  const sectionToItems: Sections = {};
-  const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
-  type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
+  try {
+    return compodocType.split('|').map((value) => JSON.parse(value));
+  } catch (e) {
+    return null;
+  }
+};
+
+export const extractType = (property: Property, defaultValue: any) => {
+  const compodocType = property.type || extractTypeFromValue(defaultValue);
+  switch (compodocType) {
+    case 'string':
+    case 'boolean':
+    case 'number':
+      return { name: compodocType };
+    case undefined:
+    case null:
+      return { name: 'void' };
+    default: {
+      const enumValues = extractEnumValues(compodocType);
+      return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' };
+    }
+  }
+};
+
+const extractDefaultValue = (property: Property) => {
+  try {
+    // eslint-disable-next-line no-eval
+    const value = eval(property.defaultValue);
+    return value;
+  } catch (err) {
+    logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);
+    return undefined;
+  }
+};
+
+export const extractArgTypesFromData = (componentData: Class | Directive | Injectable | Pipe) => {
+  const sectionToItems: Record<string, ArgType[]> = {};
+  const compodocClasses = ['component', 'directive'].includes(componentData.type)
+    ? ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass']
+    : ['properties', 'methods'];
+  type COMPODOC_CLASS =
+    | 'properties'
+    | 'methods'
+    | 'propertiesClass'
+    | 'methodsClass'
+    | 'inputsClass'
+    | 'outputsClass';
 
   compodocClasses.forEach((key: COMPODOC_CLASS) => {
-    const data = componentData[key] || [];
+    const data = (componentData as any)[key] || [];
     data.forEach((item: Method | Property) => {
-      const sectionItem: PropDef = {
+      const section = mapItemToSection(key, item);
+      const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
+      const type =
+        isMethod(item) || section !== 'inputs'
+          ? { name: 'void' }
+          : extractType(item as Property, defaultValue);
+      const argType = {
         name: item.name,
-        type: { summary: isMethod(item) ? displaySignature(item) : item.type },
-        required: isMethod(item) ? false : !item.optional,
         description: item.description,
-        defaultValue: { summary: isMethod(item) ? '' : item.defaultValue },
+        defaultValue,
+        type,
+        table: {
+          category: section,
+          type: {
+            summary: isMethod(item) ? displaySignature(item) : item.type,
+            required: isMethod(item) ? false : !item.optional,
+          },
+        },
       };
 
-      const section = mapItemToSection(key, item);
       if (!sectionToItems[section]) {
         sectionToItems[section] = [];
       }
-      sectionToItems[section].push(sectionItem);
+      sectionToItems[section].push(argType);
     });
   });
 
-  // sort the sections
   const SECTIONS = [
     'inputs',
     'outputs',
@@ -132,15 +204,22 @@ export const extractProps = (component: Component | Directive) => {
     'content child',
     'content children',
   ];
-  const sections: Sections = {};
-  SECTIONS.forEach(section => {
+  const argTypes: ArgTypes = {};
+  SECTIONS.forEach((section) => {
     const items = sectionToItems[section];
     if (items) {
-      sections[section] = items;
+      items.forEach((argType) => {
+        argTypes[argType.name] = argType;
+      });
     }
   });
 
-  return isEmpty(sections) ? null : { sections };
+  return argTypes;
+};
+
+export const extractArgTypes = (component: Component | Directive) => {
+  const componentData = getComponentData(component);
+  return componentData && extractArgTypesFromData(componentData);
 };
 
 export const extractComponentDescription = (component: Component | Directive) => {
@@ -148,5 +227,5 @@ export const extractComponentDescription = (component: Component | Directive) =>
   if (!componentData) {
     return null;
   }
-  return componentData.rawdescription;
+  return componentData.rawdescription || componentData.description;
 };
diff --git a/addons/docs/src/frameworks/angular/config.ts b/addons/docs/src/frameworks/angular/config.ts
index c8513d0445b3..dc06b77c8d37 100644
--- a/addons/docs/src/frameworks/angular/config.ts
+++ b/addons/docs/src/frameworks/angular/config.ts
@@ -1,10 +1,9 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
-import { extractProps, extractComponentDescription } from './compodoc';
+import { extractArgTypes, extractComponentDescription } from './compodoc';
 
 addParameters({
   docs: {
-    extractProps,
+    extractArgTypes,
     extractComponentDescription,
   },
 });
diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts
index 9bc7f760c852..9f7e64afbabf 100644
--- a/addons/docs/src/frameworks/angular/types.ts
+++ b/addons/docs/src/frameworks/angular/types.ts
@@ -2,26 +2,56 @@ export interface Method {
   name: string;
   args: Argument[];
   returnType: string;
-  decorators: Decorator[];
-  description: string;
+  decorators?: Decorator[];
+  description?: string;
 }
 
 export interface Property {
   name: string;
-  decorators: Decorator[];
+  decorators?: Decorator[];
   type: string;
   optional: boolean;
   defaultValue?: string;
   description?: string;
 }
 
+export interface Class {
+  name: string;
+  ngname: string;
+  type: 'pipe';
+  properties: Property[];
+  methods: Method[];
+  description?: string;
+  rawdescription?: string;
+}
+
+export interface Injectable {
+  name: string;
+  type: 'injectable';
+  properties: Property[];
+  methods: Method[];
+  description?: string;
+  rawdescription?: string;
+}
+
+export interface Pipe {
+  name: string;
+  type: 'class';
+  properties: Property[];
+  methods: Method[];
+  description?: string;
+  rawdescription?: string;
+}
+
 export interface Directive {
   name: string;
+  type: 'directive' | 'component';
   propertiesClass: Property[];
   inputsClass: Property[];
   outputsClass: Property[];
   methodsClass: Method[];
-  rawdescription: string;
+  description?: string;
+  rawdescription?: string;
 }
 
 export type Component = Directive;
@@ -39,4 +69,7 @@ export interface Decorator {
 export interface CompodocJson {
   directives: Directive[];
   components: Component[];
+  pipes: Pipe[];
+  injectables: Injectable[];
+  classes: Class[];
 }
diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts
index 1d34169c1e74..26b8364f920d 100644
--- a/addons/docs/src/frameworks/common/config.ts
+++ b/addons/docs/src/frameworks/common/config.ts
@@ -1,10 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { addParameters } from '@storybook/client-api';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsContainer, DocsPage } from '../../blocks';
+import { enhanceArgTypes } from './enhanceArgTypes';
 
-addParameters({
+export const parameters = {
   docs: {
+    inlineStories: false,
     container: DocsContainer,
     page: DocsPage,
+    iframeHeight: 100,
   },
-});
+};
+
+export const argTypesEnhancers = [enhanceArgTypes];
diff --git a/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts b/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts
new file mode 100644
index 000000000000..10ba2a3fc24d
--- /dev/null
+++ b/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts
@@ -0,0 +1,317 @@
+import { ArgType, ArgTypes, Args } from '@storybook/api';
+import { enhanceArgTypes } from './enhanceArgTypes';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => JSON.stringify(val, null, 2),
+  test: (val) => typeof val !== 'string',
+});
+
+const enhance = ({
+  argType,
+  arg,
+  extractedArgTypes,
+  storyFn = (args: Args) => 0,
+}: {
+  argType?: ArgType;
+  arg?: any;
+  extractedArgTypes?: ArgTypes;
+  storyFn?: any;
+}) => {
+  const context = {
+    id: 'foo--bar',
+    kind: 'foo',
+    name: 'bar',
+    storyFn,
+    parameters: {
+      component: 'dummy',
+      docs: {
+        extractArgTypes: extractedArgTypes && (() => extractedArgTypes),
+      },
+      argTypes: argType && {
+        input: argType,
+      },
+      args: {
+        input: arg,
+      },
+    },
+    args: {},
+    globalArgs: {},
+  };
+  return enhanceArgTypes(context);
+};
+
+describe('enhanceArgTypes', () => {
+  describe('no-args story function', () => {
+    it('should no-op', () => {
+      expect(
+        enhance({
+          argType: { foo: 'unmodified', type: { name: 'number' } },
+          storyFn: () => 0,
+        }).input
+      ).toMatchInlineSnapshot(`
+        {
+          "name": "input",
+          "foo": "unmodified",
+          "type": {
+            "name": "number"
+          }
+        }
+      `);
+    });
+  });
+  describe('args story function', () => {
+    describe('single-source input', () => {
+      describe('argTypes input', () => {
+        it('number', () => {
+          expect(
+            enhance({
+              argType: { type: { name: 'number' } },
+            }).input
+          ).toMatchInlineSnapshot(`
+            {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            }
+          `);
+        });
+      });
+
+      describe('args input', () => {
+        it('number', () => {
+          expect(enhance({ arg: 5 }).input).toMatchInlineSnapshot(`
+            {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            }
+          `);
+        });
+      });
+
+      describe('extraction from component', () => {
+        it('number', () => {
+          expect(
+            enhance({ extractedArgTypes: { input: { name: 'input', type: { name: 'number' } } } })
+              .input
+          ).toMatchInlineSnapshot(`
+            {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            }
+          `);
+        });
+      });
+
+      describe('controls input', () => {
+        it('range', () => {
+          expect(
+            enhance({
+              argType: { control: { type: 'range', min: 0, max: 100 } },
+            }).input
+          ).toMatchInlineSnapshot(`
+            {
+              "name": "input",
+              "control": {
+                "type": "range",
+                "min": 0,
+                "max": 100
+              }
+            }
+          `);
+        });
+        it('options', () => {
+          expect(
+            enhance({
+              argType: { control: { type: 'radio', options: [1, 2] } },
+            }).input
+          ).toMatchInlineSnapshot(`
+            {
+              "name": "input",
+              "control": {
+                "type": "radio",
+                "options": [
+                  1,
+                  2
+                ]
+              }
+            }
+          `);
+        });
+      });
+    });
+
+    describe('mixed-source input', () => {
+      it('user-specified argTypes take precedence over extracted argTypes', () => {
+        expect(
+          enhance({
+            argType: { type: { name: 'number' } },
+            extractedArgTypes: { input: { type: { name: 'string' } } },
+          }).input
+        ).toMatchInlineSnapshot(`
+          {
+            "control": {
+              "type": "number"
+            },
+            "type": {
+              "name": "number"
+            },
+            "name": "input"
+          }
+        `);
+      });
+
+      it('user-specified argTypes take precedence over inferred argTypes', () => {
+        expect(
+          enhance({
+            argType: { type: { name: 'number' } },
+            arg: 'hello',
+          }).input
+        ).toMatchInlineSnapshot(`
+          {
+            "control": {
+              "type": "number"
+            },
+            "name": "input",
+            "type": {
+              "name": "number"
+            }
+          }
+        `);
+      });
+
+      it('extracted argTypes take precedence over inferred argTypes', () => {
+        expect(
+          enhance({
+            extractedArgTypes: { input: { type: { name: 'string' } } },
+            arg: 6,
+          }).input
+        ).toMatchInlineSnapshot(`
+          {
+            "control": {
+              "type": "text"
+            },
+            "name": "input",
+            "type": {
+              "name": "string"
+            }
+          }
+        `);
+      });
+
+      it('user-specified controls take precedence over inferred controls', () => {
+        expect(
+          enhance({
+            argType: { defaultValue: 5, control: { type: 'range', step: 50 } },
+            arg: 3,
+            extractedArgTypes: { input: { name: 'input' } },
+          }).input
+        ).toMatchInlineSnapshot(`
+          {
+            "control": {
+              "type": "range",
+              "step": 50
+            },
+            "name": "input",
+            "type": {
+              "name": "number"
+            },
+            "defaultValue": 5
+          }
+        `);
+      });
+
+      it('includes extracted argTypes when there are no user-specified argTypes', () => {
+        expect(
+          enhance({
+            arg: 3,
+            extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } },
+          })
+        ).toMatchInlineSnapshot(`
+          {
+            "input": {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            },
+            "foo": {
+              "control": {
+                "type": "number"
+              },
+              "type": {
+                "name": "number"
+              }
+            }
+          }
+        `);
+      });
+
+      it('includes extracted argTypes when user-specified argTypes match', () => {
+        expect(
+          enhance({
+            argType: { type: { name: 'number' } },
+            extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } },
+          })
+        ).toMatchInlineSnapshot(`
+          {
+            "input": {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            },
+            "foo": {
+              "control": {
+                "type": "number"
+              },
+              "type": {
+                "name": "number"
+              }
+            }
+          }
+        `);
+      });
+
+      it('excludes extracted argTypes when user-specified argTypes do not match', () => {
+        expect(
+          enhance({
+            argType: { type: { name: 'number' } },
+            extractedArgTypes: { foo: { type: { name: 'number' } } },
+          })
+        ).toMatchInlineSnapshot(`
+          {
+            "input": {
+              "control": {
+                "type": "number"
+              },
+              "name": "input",
+              "type": {
+                "name": "number"
+              }
+            }
+          }
+        `);
+      });
+    });
+  });
+});
diff --git a/addons/docs/src/frameworks/common/enhanceArgTypes.ts b/addons/docs/src/frameworks/common/enhanceArgTypes.ts
new file mode 100644
index 000000000000..10d705ebe0c5
--- /dev/null
+++ b/addons/docs/src/frameworks/common/enhanceArgTypes.ts
@@ -0,0 +1,40 @@
+import mapValues from 'lodash/mapValues';
+import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
+import { ArgTypes } from '@storybook/api';
+import { inferArgTypes } from './inferArgTypes';
+import { inferControls } from './inferControls';
+
+const isSubset = (kind: string, subset: object, superset: object) => {
+  const keys = Object.keys(subset);
+  // eslint-disable-next-line no-prototype-builtins
+  const overlap = keys.filter((key) => superset.hasOwnProperty(key));
+  return overlap.length === keys.length;
+};
+
+export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
+  const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters;
+  const { extractArgTypes } = docs;
+
+  const namedArgTypes = mapValues(userArgTypes, (val, key) => ({ name: key, ...val }));
+  const inferredArgTypes = inferArgTypes(args);
+  let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
+
+  if (
+    (Object.keys(userArgTypes).length > 0 &&
+      !isSubset(context.kind, userArgTypes, extractedArgTypes)) ||
+    (Object.keys(inferredArgTypes).length > 0 &&
+      !isSubset(context.kind, inferredArgTypes, extractedArgTypes))
+  ) {
+    extractedArgTypes = {};
+  }
+
+  const withArgTypes = combineParameters(inferredArgTypes, extractedArgTypes, namedArgTypes);
+
+  if (context.storyFn.length === 0) {
+    return withArgTypes;
+  }
+
+  const withControls = inferControls(withArgTypes);
+  const result = combineParameters(withControls, withArgTypes);
+  return result;
+};
diff --git a/addons/docs/src/frameworks/common/inferArgTypes.ts b/addons/docs/src/frameworks/common/inferArgTypes.ts
new file mode 100644
index 000000000000..41fdaab110af
--- /dev/null
+++ b/addons/docs/src/frameworks/common/inferArgTypes.ts
@@ -0,0 +1,36 @@
+import mapValues from 'lodash/mapValues';
+import { Args, ArgTypes } from '@storybook/addons';
+import { SBType } from '../../lib/sbtypes';
+
+const inferType = (value?: any): SBType => {
+  const type = typeof value;
+  switch (type) {
+    case 'boolean':
+    case 'string':
+    case 'number':
+    case 'function':
+      return { name: type };
+    default:
+      break;
+  }
+  if (Array.isArray(value)) {
+    const childType: SBType =
+      value.length > 0 ? inferType(value[0]) : { name: 'other', value: 'unknown' };
+    return { name: 'array', value: childType };
+  }
+  if (value) {
+    const fieldTypes = mapValues(value, (field) => inferType(field));
+    return { name: 'object', value: fieldTypes };
+  }
+  return { name: 'other', value: 'unknown' };
+};
+
+export const inferArgTypes = (args: Args): ArgTypes => {
+  if (!args) return {};
+  return mapValues(args, (arg, name) => {
+    if (arg !== null && typeof arg !== 'undefined') {
+      return { name, type: inferType(arg) };
+    }
+    return undefined;
+  });
+};
diff --git a/addons/docs/src/frameworks/common/inferControls.ts b/addons/docs/src/frameworks/common/inferControls.ts
new file mode 100644
index 000000000000..c49a7da84e6a
--- /dev/null
+++ b/addons/docs/src/frameworks/common/inferControls.ts
@@ -0,0 +1,47 @@
+import mapValues from 'lodash/mapValues';
+import { ArgTypes, ArgType } from '@storybook/addons';
+import { Control } from '@storybook/components';
+import { SBEnumType } from '../../lib/sbtypes';
+
+const inferControl = (argType: ArgType): Control => {
+  const { type } = argType;
+  if (!type) {
+    // console.log('no sbtype', { argType });
+    return null;
+  }
+  switch (type.name) {
+    case 'array': {
+      const { value } = type;
+      if (value?.name && ['object', 'other'].includes(value.name)) {
+        return {
+          type: 'object',
+          validator: (obj: any) => Array.isArray(obj),
+        };
+      }
+      return { type: 'array' };
+    }
+    case 'boolean':
+      return { type: 'boolean' };
+    case 'string':
+      return { type: 'text' };
+    case 'number':
+      return { type: 'number' };
+    case 'enum': {
+      const { value } = type as SBEnumType;
+      return { type: 'select', options: value };
+    }
+    case 'function':
+    case 'symbol':
+    case 'void':
+      return null;
+    default:
+      return { type: 'object' };
+  }
+};
+
+export const inferControls = (argTypes: ArgTypes): ArgTypes => {
+  return mapValues(argTypes, (argType) => {
+    const control = argType && argType.type && inferControl(argType);
+    return control ? { control } : undefined;
+  });
+};
diff --git a/addons/docs/src/frameworks/common/makePreset.ts b/addons/docs/src/frameworks/common/makePreset.ts
deleted file mode 100644
index 08654c15063b..000000000000
--- a/addons/docs/src/frameworks/common/makePreset.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
-import * as common from '../../preset';
-
-const makePreset = (framework: string) => {
-  deprecate(
-    () => {},
-    dedent`
-    Framework-specific presets are no longer-needed as of Storybook 5.3 and will be removed in 6.0.
-
-    Please use '@storybook/addon-docs/preset' instead of '@storybook/addon-docs/${framework}/preset'.
-  `
-  )();
-  return common;
-};
-
-export default makePreset;
diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts
index ce48d65c65f5..6d650289cec6 100644
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/frameworks/common/preset.ts
@@ -1,8 +1,18 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin';
+import path from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 
+import { DllReferencePlugin } from 'webpack';
+
+// @ts-ignore
+import createCompiler from '../../mdx/mdx-compiler-plugin';
+
+const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
+// TODO: improve node_modules detection
+const context = coreDirName.includes('node_modules')
+  ? path.join(coreDirName, '../../') // Real life case, already in node_modules
+  : path.join(coreDirName, '../../node_modules'); // SB Monorepo
+
 function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
   if (!configureJSX) {
     return babelOptions;
@@ -18,6 +28,10 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
   };
 }
 
+export const webpackDlls = (dlls: string[], options: any) => {
+  return options.dll ? [...dlls, './sb_dll/storybook_docs_dll.js'] : [];
+};
+
 export function webpack(webpackConfig: any = {}, options: any = {}) {
   const { module = {} } = webpackConfig;
   // it will reuse babel options that are already in use in storybook
@@ -52,10 +66,10 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
         ...(module.rules || []),
         {
           test: /\.js$/,
-          include: /node_modules\/acorn-jsx/,
+          include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
           use: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: {
                 presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]],
               },
@@ -66,11 +80,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
           test: /\.(stories|story).mdx$/,
           use: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: createBabelOptions(babelOptions, configureJSX),
             },
             {
-              loader: '@mdx-js/loader',
+              loader: require.resolve('@mdx-js/loader'),
               options: {
                 compilers: [createCompiler(options)],
                 ...mdxLoaderOptions,
@@ -83,11 +97,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
           exclude: /\.(stories|story).mdx$/,
           use: [
             {
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               options: createBabelOptions(babelOptions, configureJSX),
             },
             {
-              loader: '@mdx-js/loader',
+              loader: require.resolve('@mdx-js/loader'),
               options: mdxLoaderOptions,
             },
           ],
@@ -96,10 +110,20 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
       ],
     },
   };
+
+  if (options.dll) {
+    result.plugins.push(
+      new DllReferencePlugin({
+        context,
+        manifest: require.resolve('@storybook/core/dll/storybook_docs-manifest.json'),
+      })
+    );
+  }
+
   return result;
 }
 
-export function addons(entry: any[] = [], options: any) {
+export function managerEntries(entry: any[] = [], options: any) {
   return [...entry, require.resolve('../../register')];
 }
 
diff --git a/addons/docs/src/frameworks/ember/config.js b/addons/docs/src/frameworks/ember/config.js
index 2ba143d9b433..9745c9eca4c9 100644
--- a/addons/docs/src/frameworks/ember/config.js
+++ b/addons/docs/src/frameworks/ember/config.js
@@ -1,11 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
-import { extractProps, extractComponentDescription } from './jsondoc';
+import { extractArgTypes, extractComponentDescription } from './jsondoc';
 
 addParameters({
   docs: {
     iframeHeight: 80,
-    extractProps,
+    extractArgTypes,
     extractComponentDescription,
   },
 });
diff --git a/addons/docs/src/frameworks/ember/jsondoc.js b/addons/docs/src/frameworks/ember/jsondoc.js
index a3a996d548c6..c9d95fedac60 100644
--- a/addons/docs/src/frameworks/ember/jsondoc.js
+++ b/addons/docs/src/frameworks/ember/jsondoc.js
@@ -1,30 +1,49 @@
 /* eslint-disable no-underscore-dangle */
 /* global window */
 
-export const setJSONDoc = jsondoc => {
+export const setJSONDoc = (jsondoc) => {
   window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
 };
 export const getJSONDoc = () => {
   return window.__EMBER_GENERATED_DOC_JSON__;
 };
 
-export const extractProps = componentName => {
+export const extractArgTypes = (componentName) => {
   const json = getJSONDoc();
-  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
-  const rows = componentDoc.attributes.arguments.map(prop => {
+  if (!(json && json.included)) {
+    return null;
+  }
+  const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+
+  if (!componentDoc) {
+    return null;
+  }
+  const rows = componentDoc.attributes.arguments.map((prop) => {
     return {
       name: prop.name,
-      type: prop.type,
-      required: prop.tags.length ? prop.tags.some(tag => tag.name === 'required') : false,
       defaultValue: prop.defaultValue,
       description: prop.description,
+      table: {
+        type: {
+          summary: prop.type,
+          required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false,
+        },
+      },
     };
   });
   return { rows };
 };
 
-export const extractComponentDescription = componentName => {
+export const extractComponentDescription = (componentName) => {
   const json = getJSONDoc();
-  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
+  if (!(json && json.included)) {
+    return null;
+  }
+  const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+
+  if (!componentDoc) {
+    return null;
+  }
+
   return componentDoc.attributes.description;
 };
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot
new file mode 100644
index 000000000000..e702b18e4220
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 10017-ts-union 1`] = `
+"import React from 'react';
+
+const Avatar = ({
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement(\\"div\\", {
+    className: \\"hello\\"
+  }, \\"Hello Component \\", icon);
+};
+
+export const component = Avatar;
+Avatar.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Avatar\\",
+  \\"props\\": {
+    \\"icon\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"union\\",
+        \\"raw\\": \\"React.ReactNode | string\\",
+        \\"elements\\": [{
+          \\"name\\": \\"ReactReactNode\\",
+          \\"raw\\": \\"React.ReactNode\\"
+        }, {
+          \\"name\\": \\"string\\"
+        }]
+      },
+      \\"description\\": \\"specify icon=\\\\\\"search\\\\\\" or icon={IconComponent}\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx
new file mode 100644
index 000000000000..399f8b31a632
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface AvatarProps {
+  /** specify icon="search" or icon={IconComponent} */
+  icon: React.ReactNode | string;
+}
+
+const Avatar = ({ icon }: AvatarProps) => {
+  return <div className="hello">Hello Component {icon}</div>;
+};
+
+export const component = Avatar;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot
new file mode 100644
index 000000000000..430e86422090
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 10017-ts-union 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "specify icon=\\"search\\" or icon={IconComponent}",
+      "name": "icon",
+      "required": true,
+      "sbType": Object {
+        "name": "union",
+        "raw": "React.ReactNode | string",
+        "value": Array [
+          Object {
+            "name": "other",
+            "raw": "React.ReactNode",
+            "value": "ReactReactNode",
+          },
+          Object {
+            "name": "string",
+          },
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/docgen.snapshot
new file mode 100644
index 000000000000..3947ed35573d
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/docgen.snapshot
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 10278-ts-multiple-components 1`] = `
+"/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+
+/**
+ * A component
+ */
+const A = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.aProperty);
+};
+/**
+ * B component
+ */
+
+
+const B = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.bProperty);
+};
+
+A.__docgenInfo = {
+  \\"description\\": \\"A component\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"A\\",
+  \\"props\\": {
+    \\"aProperty\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"any\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};
+B.__docgenInfo = {
+  \\"description\\": \\"B component\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"B\\",
+  \\"props\\": {
+    \\"bProperty\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"any\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};
+export { A, B };
+export const component = A;"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/input.tsx
new file mode 100644
index 000000000000..fea6eaea664a
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/input.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+
+interface IAProps {
+  aProperty: any;
+}
+
+interface IBProps {
+  bProperty: any;
+}
+
+/**
+ * A component
+ */
+const A = (props: IAProps): JSX.Element => {
+  return <>Hi {props.aProperty}</>;
+};
+
+/**
+ * B component
+ */
+const B = (props: IBProps): JSX.Element => {
+  return <>Hi {props.bProperty}</>;
+};
+
+export { A, B };
+export const component = A;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot
new file mode 100644
index 000000000000..f9f94045bb53
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 10278-ts-multiple-components 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "aProperty",
+      "required": true,
+      "sbType": Object {
+        "name": "other",
+        "value": "any",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "any",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot
new file mode 100644
index 000000000000..0f5ed90d714b
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8140-js-prop-types-oneof 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));
+
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning'
+};
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string
+};
+export const component = Alert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"mode\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'static'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'static'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'timed'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"type\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'warning'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'success'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'warning'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'error'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'primary'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"message\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"blank\\": {
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"No background or border if static alert\\"
+    },
+    \\"icon\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"Allows icon override, accepts material icon name\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js
new file mode 100644
index 000000000000..1eb6b30cf299
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = (props) => <>{JSON.stringify(props)}</>;
+
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning',
+};
+
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string,
+};
+
+export const component = Alert;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot
new file mode 100644
index 000000000000..ff183b161512
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8140-js-prop-types-oneof 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'static'",
+      },
+      "description": "",
+      "name": "mode",
+      "required": false,
+      "sbType": Object {
+        "name": "enum",
+        "value": Array [
+          "static",
+          "timed",
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "'static' | 'timed'",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'warning'",
+      },
+      "description": "",
+      "name": "type",
+      "required": false,
+      "sbType": Object {
+        "name": "enum",
+        "value": Array [
+          "success",
+          "warning",
+          "error",
+          "primary",
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "'success' | 'warning' | 'error' | 'primary'",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "message",
+      "required": true,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "No background or border if static alert",
+      "name": "blank",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "Allows icon override, accepts material icon name",
+      "name": "icon",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/docgen.snapshot
new file mode 100644
index 000000000000..99f9c02801e3
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/docgen.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-imported-types 1`] = `
+"import React from 'react';
+export const FooComponent = foo => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(foo));
+export const component = FooComponent;
+FooComponent.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"FooComponent\\",
+  \\"props\\": {
+    \\"bar\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"Foo['bar']\\",
+        \\"raw\\": \\"Foo['bar']\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/input.tsx
new file mode 100644
index 000000000000..7e30066389a2
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/input.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Foo } from './types';
+
+interface FooProps {
+  bar: Foo['bar'];
+}
+
+export const FooComponent = (foo: FooProps) => <>{JSON.stringify(foo)}</>;
+
+export const component = FooComponent;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot
new file mode 100644
index 000000000000..e999d6a79f28
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-imported-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "bar",
+      "required": true,
+      "sbType": Object {
+        "name": "other",
+        "raw": "Foo['bar']",
+        "value": "Foo['bar']",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "Foo['bar']",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/types.ts b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/types.ts
new file mode 100644
index 000000000000..156212cf95ce
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/types.ts
@@ -0,0 +1,3 @@
+export interface Foo {
+  bar: number;
+}
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot
new file mode 100644
index 000000000000..cd06005f3581
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-react-fc-generics 1`] = `
+"import React from 'react';
+export const Text = ({
+  padding = '0',
+  margin
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, \\"Text\\");
+export const component = Text;
+Text.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Text\\",
+  \\"props\\": {
+    \\"padding\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'0'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/input.tsx
new file mode 100644
index 000000000000..9116328f1937
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/input.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface Props {
+  padding: string;
+  margin: number;
+}
+
+export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;
+
+export const component = Text;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot
new file mode 100644
index 000000000000..7e70b8104795
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8143-ts-react-fc-generics 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'0'",
+      },
+      "description": undefined,
+      "name": "padding",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/docgen.snapshot
new file mode 100644
index 000000000000..670ab38ca25b
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/docgen.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8279-js-styled-docgen 1`] = `
+"import styled from 'styled-components';
+import PropTypes from 'prop-types';
+/**
+ * Use \`A\` to provide a regular link
+ */
+
+const A = styled('a')({
+  margin: '8px 0',
+  outline: 'none'
+});
+A.displayName = 'Link';
+A.defaultProps = {
+  children: 'This is a link'
+};
+A.propTypes = {
+  /** That should be the clickable element */
+  children: PropTypes.node.isRequired
+};
+export default A;
+export const component = A;"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/input.js b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/input.js
new file mode 100644
index 000000000000..95cf14f635c8
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/input.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+/**
+ * Use `A` to provide a regular link
+ */
+const A = styled('a')({
+  margin: '8px 0',
+  outline: 'none',
+});
+
+A.displayName = 'Link';
+A.defaultProps = {
+  children: 'This is a link',
+};
+
+A.propTypes = {
+  /** That should be the clickable element */
+  children: PropTypes.node.isRequired,
+};
+export default A;
+
+export const component = A;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/properties.snapshot
new file mode 100644
index 000000000000..b429f083fcc0
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/properties.snapshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8279-js-styled-docgen 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot
new file mode 100644
index 000000000000..10a2a46836d4
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8428-js-static-prop-types 1`] = `
+"function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import PropTypes from 'prop-types'; // eslint-disable-next-line react/prefer-stateless-function
+
+export default class Test extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(\\"div\\", null, \\"test\\");
+  }
+
+}
+
+_defineProperty(Test, \\"propTypes\\", {
+  /**
+   * Please work...
+   */
+  test: PropTypes.string
+});
+
+export const component = Test;
+Test.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Test\\",
+  \\"props\\": {
+    \\"test\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"Please work...\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js
new file mode 100644
index 000000000000..20094fa268dd
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class Test extends React.Component {
+  static propTypes = {
+    /**
+     * Please work...
+     */
+    test: PropTypes.string,
+  };
+
+  render() {
+    return <div>test</div>;
+  }
+}
+
+export const component = Test;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot
new file mode 100644
index 000000000000..343ea8913700
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8428-js-static-prop-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "Please work...",
+      "name": "test",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot
new file mode 100644
index 000000000000..bf03a19e7769
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8663-js-styled-components 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+const Box = styled.div\`
+  background-color: \${props => props.bg};
+\`;
+Box.propTypes = {
+  bg: PropTypes.string
+};
+export const MyBox = props => /*#__PURE__*/React.createElement(Box, props);
+MyBox.propTypes = {
+  bg: PropTypes.string
+};
+export const component = MyBox;
+MyBox.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"MyBox\\",
+  \\"props\\": {
+    \\"bg\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js
new file mode 100644
index 000000000000..7eb40f01b946
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Box = styled.div`
+  background-color: ${(props) => props.bg};
+`;
+
+Box.propTypes = {
+  bg: PropTypes.string,
+};
+
+export const MyBox = (props) => <Box {...props} />;
+
+MyBox.propTypes = {
+  bg: PropTypes.string,
+};
+
+export const component = MyBox;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot
new file mode 100644
index 000000000000..e6923faff496
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8663-js-styled-components 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "bg",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/docgen.snapshot
new file mode 100644
index 000000000000..8c8de9f93085
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/docgen.snapshot
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+"import React from 'react';
+export const Header = ({
+  size = 'a',
+  children
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  className: size
+}, children);
+export const Paragraph = ({
+  size,
+  children
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  className: size
+}, children);
+Paragraph.defaultProps = {
+  size: 'md'
+};
+export const component = Header;
+Header.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Header\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'a'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+Paragraph.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Paragraph\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'md'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx
new file mode 100644
index 000000000000..ee19cf1a8e94
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface ElemAProps {
+  size?: 'a' | 'b' | 'c' | 'd';
+}
+
+export const Header: React.SFC<ElemAProps> = ({ size = 'a', children }) => (
+  <div className={size}>{children}</div>
+);
+
+export interface ElemBProps {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Paragraph: React.SFC<ElemBProps> = ({ size, children }) => (
+  <div className={size}>{children}</div>
+);
+
+Paragraph.defaultProps = { size: 'md' };
+
+export const component = Header;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/properties.snapshot
new file mode 100644
index 000000000000..9877ca576ceb
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'a'",
+      },
+      "description": undefined,
+      "name": "size",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot
new file mode 100644
index 000000000000..36a0021a6218
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+"import React, { forwardRef } from 'react';
+const Button = forwardRef(({
+  disabled = false,
+  variant = 'small',
+  children
+}, ref) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/button-has-type
+React.createElement(\\"button\\", {
+  disabled: disabled,
+  ref: ref
+}, children, \\" \\", variant));
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'small'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+export default Button;
+export const component = Button;"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/input.tsx
new file mode 100644
index 000000000000..0878c8cd8ca3
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/input.tsx
@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+interface ButtonProps {
+  /**
+   * Sets the button size.
+   */
+  variant?: 'small' | 'large';
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ disabled = false, variant = 'small', children }, ref) => (
+    // eslint-disable-next-line react/button-has-type
+    <button disabled={disabled} ref={ref}>
+      {children} {variant}
+    </button>
+  )
+);
+
+export default Button;
+
+export const component = Button;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot
new file mode 100644
index 000000000000..63a04364ae3a
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": undefined,
+      "name": "disabled",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'small'",
+      },
+      "description": undefined,
+      "name": "variant",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot
new file mode 100644
index 000000000000..6755a05a5cfc
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+"/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStyles = themeFn => Comp => Comp;
+
+class Alert extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Alert\\");
+  }
+
+}
+
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false
+};
+const StyledAlert = withStyles(theme => ({
+  alert: props => ({
+    backgroundColor: theme.palette[props.variant].main
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: theme.spacing(2)
+  }
+}))(Alert);
+export const component = StyledAlert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"dismissible\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"icon\\": {
+      \\"type\\": {
+        \\"name\\": \\"elementType\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"classes\\": {
+      \\"type\\": {
+        \\"name\\": \\"object\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js
new file mode 100644
index 000000000000..3c40e3472a01
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js
@@ -0,0 +1,36 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStyles = (themeFn) => (Comp) => Comp;
+
+class Alert extends React.Component {
+  render() {
+    return <>Alert</>;
+  }
+}
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired,
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false,
+};
+
+const StyledAlert = withStyles((theme) => ({
+  alert: (props) => ({
+    backgroundColor: theme.palette[props.variant].main,
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+}))(Alert);
+
+export const component = StyledAlert;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot
new file mode 100644
index 000000000000..7d6c8e0a2749
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "variant",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "dismissible",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "icon",
+      "required": false,
+      "sbType": Object {
+        "name": "other",
+        "value": "elementType",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "elementType",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "classes",
+      "required": true,
+      "sbType": Object {
+        "name": "object",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "object",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot
new file mode 100644
index 000000000000..97f537acf986
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+export const Credits = ({
+  areas
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(areas)); // https://github.com/storybookjs/storybook/issues/9399
+
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(PropTypes.shape({
+    position: PropTypes.string.isRequired,
+    names: PropTypes.arrayOf(PropTypes.string).isRequired
+  })).isRequired
+};
+export const component = Credits;
+Credits.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Credits\\",
+  \\"props\\": {
+    \\"areas\\": {
+      \\"type\\": {
+        \\"name\\": \\"arrayOf\\",
+        \\"value\\": {
+          \\"name\\": \\"shape\\",
+          \\"value\\": {
+            \\"position\\": {
+              \\"name\\": \\"string\\",
+              \\"required\\": true
+            },
+            \\"names\\": {
+              \\"name\\": \\"arrayOf\\",
+              \\"value\\": {
+                \\"name\\": \\"string\\"
+              },
+              \\"required\\": true
+            }
+          }
+        }
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/input.js b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/input.js
new file mode 100644
index 000000000000..af120524fa8f
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/input.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Credits = ({ areas }) => <>{JSON.stringify(areas)}</>;
+
+// https://github.com/storybookjs/storybook/issues/9399
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(
+    PropTypes.shape({
+      position: PropTypes.string.isRequired,
+      names: PropTypes.arrayOf(PropTypes.string).isRequired,
+    })
+  ).isRequired,
+};
+
+export const component = Credits;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot
new file mode 100644
index 000000000000..e831f52c1ab1
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "areas",
+      "required": true,
+      "sbType": Object {
+        "name": "array",
+        "value": Object {
+          "name": "object",
+          "value": Object {
+            "names": Object {
+              "name": "array",
+              "value": Object {
+                "name": "string",
+              },
+            },
+            "position": Object {
+              "name": "string",
+            },
+          },
+        },
+      },
+      "type": Object {
+        "detail": "[object]",
+        "summary": "object[]",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/docgen.snapshot
new file mode 100644
index 000000000000..eed6ac7c10e2
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/docgen.snapshot
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+"import React from 'react';
+
+const Component = ({
+  disabled = false,
+  children
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/button-has-type
+React.createElement(\\"button\\", {
+  disabled: disabled
+}, children);
+
+export const component = Component;
+Component.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Component\\",
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/input.tsx
new file mode 100644
index 000000000000..e5627c8058fa
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/input.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+};
+
+const Component = ({ disabled = false, children }: Props) => (
+  // eslint-disable-next-line react/button-has-type
+  <button disabled={disabled}>{children}</button>
+);
+
+export const component = Component;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot
new file mode 100644
index 000000000000..e2d4df1dcc0e
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "disabled",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/docgen.snapshot
new file mode 100644
index 000000000000..c70717fe8958
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/docgen.snapshot
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+"import styled from '@emotion/styled';
+import React from 'react';
+const Wrapper = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: 'tomato',
+  color: 'white',
+  padding: 10
+}));
+
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert = ({
+  title = 'Code Yellow',
+  message
+}) => /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(\\"h1\\", null, title), /*#__PURE__*/React.createElement(\\"p\\", null, message));
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+export const component = EmpireAlert;
+EmpireAlert.__docgenInfo = {
+  \\"description\\": \\"This message should show up in the Docs panel if everything works fine.\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"SomeOtherDisplayName\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Code Yellow'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"union\\",
+        \\"raw\\": \\"'Code Red' | 'Code Yellow' | 'Code Green'\\",
+        \\"elements\\": [{
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Red'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Yellow'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Green'\\"
+        }]
+      },
+      \\"description\\": \\"A title that brings attention to the alert.\\"
+    },
+    \\"message\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"A message alerting about Empire activities.\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/input.tsx
new file mode 100644
index 000000000000..57155c790165
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/input.tsx
@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+const Wrapper = styled('div')<{}>(({ theme }) => ({
+  backgroundColor: 'tomato',
+  color: 'white',
+  padding: 10,
+}));
+
+type AlertCode = 'Code Red' | 'Code Yellow' | 'Code Green';
+
+export interface EmpireAlertProps {
+  /**
+   * A title that brings attention to the alert.
+   */
+  title: AlertCode;
+  /**
+   * A message alerting about Empire activities.
+   */
+  message: string;
+}
+
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert: React.FC<EmpireAlertProps> = ({
+  title = 'Code Yellow',
+  message,
+}: EmpireAlertProps) => (
+  <Wrapper>
+    <h1>{title}</h1>
+    <p>{message}</p>
+  </Wrapper>
+);
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+
+export const component = EmpireAlert;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot
new file mode 100644
index 000000000000..f6be2f921ecf
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Code Yellow'",
+      },
+      "description": "A title that brings attention to the alert.",
+      "name": "title",
+      "required": false,
+      "sbType": Object {
+        "name": "union",
+        "raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
+        "value": Array [
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "A message alerting about Empire activities.",
+      "name": "message",
+      "required": true,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot
new file mode 100644
index 000000000000..3885b65757ac
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react/button-has-type */
+import React from 'react';
+export const Button = ({
+  isDisabled = false,
+  ...props
+}) => /*#__PURE__*/React.createElement(\\"button\\", _extends({
+  disabled: isDisabled
+}, props));
+export const component = Button;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"isDisabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/input.tsx
new file mode 100644
index 000000000000..3517870221b2
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/input.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/button-has-type */
+import React from 'react';
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isDisabled?: boolean;
+}
+
+export const Button: React.FC<Props> = ({ isDisabled = false, ...props }: Props) => (
+  <button disabled={isDisabled} {...props} />
+);
+
+export const component = Button;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot
new file mode 100644
index 000000000000..daa979f95c81
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "isDisabled",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot
new file mode 100644
index 000000000000..9494b9c88cd9
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+"import PropTypes from 'prop-types';
+import React from 'react';
+
+const iconButton = function IconButton(props) {
+  return /*#__PURE__*/React.createElement(\\"div\\", {
+    className: \\"icon-button\\"
+  }, \\"icon-button\\");
+};
+
+iconButton.propTypes = {
+  color: PropTypes.string
+};
+iconButton.defaultProps = {
+  color: 'primary'
+};
+iconButton.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"iconButton\\",
+  \\"props\\": {
+    \\"color\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};
+export default iconButton;
+export const component = iconButton;"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx
new file mode 100644
index 000000000000..20ddf073f781
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
+
+export interface IProps {
+  /**
+   * button color
+   */
+  color?: string;
+}
+
+const iconButton: FC<IProps> = function IconButton(props) {
+  return <div className="icon-button">icon-button</div>;
+};
+
+iconButton.propTypes = {
+  color: PropTypes.string,
+};
+
+iconButton.defaultProps = {
+  color: 'primary',
+};
+
+export default iconButton;
+export const component = iconButton;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot
new file mode 100644
index 000000000000..4ca7be31120d
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "color",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/docgen.snapshot
new file mode 100644
index 000000000000..67c39e903008
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/docgen.snapshot
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({
+  label,
+  onClick
+}) {
+  // eslint-disable-next-line react/button-has-type
+  return /*#__PURE__*/React.createElement(\\"button\\", {
+    onClick: onClick
+  }, label);
+}
+
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+const MemoButton = React.memo(Button);
+export const component = MemoButton;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"label\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"onClick\\": {
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/input.js b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/input.js
new file mode 100644
index 000000000000..19f7951a337a
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/input.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({ label, onClick }) {
+  // eslint-disable-next-line react/button-has-type
+  return <button onClick={onClick}>{label}</button>;
+}
+
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+const MemoButton = React.memo(Button);
+export const component = MemoButton;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/properties.snapshot
new file mode 100644
index 000000000000..125e28045362
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/properties.snapshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/Bar.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/Bar.tsx
new file mode 100644
index 000000000000..7dee0fa7f6ec
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/Bar.tsx
@@ -0,0 +1,3 @@
+export interface BarProps {
+  foo?: string;
+}
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/docgen.snapshot
new file mode 100644
index 000000000000..a059bf1880b0
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/docgen.snapshot
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9591-ts-import-types 1`] = `
+"import React from 'react';
+
+const Other = props => /*#__PURE__*/React.createElement(\\"span\\", props, \\"Other\\");
+
+export const component = Other;
+Other.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Other\\",
+  \\"props\\": {
+    \\"other\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"number\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/input.tsx
new file mode 100644
index 000000000000..f1049b4e1acb
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/input.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { BarProps } from './Bar';
+
+type OtherProps = BarProps & {
+  other?: number;
+};
+
+const Other = (props: OtherProps) => <span {...props}>Other</span>;
+
+export const component = Other;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot
new file mode 100644
index 000000000000..cc8d448239d6
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9591-ts-import-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "other",
+      "required": false,
+      "sbType": Object {
+        "name": "number",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "number",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/docgen.snapshot
new file mode 100644
index 000000000000..867262a0c978
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/docgen.snapshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9592-ts-styled-props 1`] = `
+"import React from 'react';
+import styled from 'styled-components';
+const StyledHello = styled.div\`
+  color: red;
+\`;
+
+const Hello = ({
+  title
+}) => {
+  return /*#__PURE__*/React.createElement(StyledHello, {
+    className: \\"hello\\"
+  }, \\"Hello Component \\", title);
+};
+
+export const component = Hello;
+Hello.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Hello\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/input.tsx
new file mode 100644
index 000000000000..485bad8f10b7
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/input.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface HelloProps {
+  title: string;
+}
+
+const StyledHello = styled.div`
+  color: red;
+`;
+
+const Hello = ({ title }: HelloProps) => {
+  return <StyledHello className="hello">Hello Component {title}</StyledHello>;
+};
+
+export const component = Hello;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot
new file mode 100644
index 000000000000..3298e7c6d942
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9592-ts-styled-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "title",
+      "required": true,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/docgen.snapshot
new file mode 100644
index 000000000000..7b5b63c1440b
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/docgen.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9626-js-default-values 1`] = `
+"import React from 'react'; // eslint-disable-next-line react/prop-types
+
+export const Tag = ({
+  title = 'Beta'
+}) => /*#__PURE__*/React.createElement(\\"div\\", null, title);
+export const component = Tag;
+Tag.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Tag\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Beta'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/input.js b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/input.js
new file mode 100644
index 000000000000..451411c1c1e4
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/input.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+export const Tag = ({ title = 'Beta' }) => <div>{title}</div>;
+export const component = Tag;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/properties.snapshot
new file mode 100644
index 000000000000..b1043c87f419
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9626-js-default-values 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Beta'",
+      },
+      "description": undefined,
+      "name": "title",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot
new file mode 100644
index 000000000000..1d189717438e
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+
+const CCTable = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));
+
+CCTable.propTypes = {
+  heads: PropTypes.array.isRequired,
+  onAddClick: PropTypes.func
+};
+export const component = CCTable;
+CCTable.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"CCTable\\",
+  \\"props\\": {
+    \\"heads\\": {
+      \\"type\\": {
+        \\"name\\": \\"array\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"onAddClick\\": {
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js
new file mode 100644
index 000000000000..2e66bdd696d2
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CCTable = (props) => <>{JSON.stringify(props)}</>;
+CCTable.propTypes = {
+  heads: PropTypes.array.isRequired,
+  onAddClick: PropTypes.func,
+};
+
+export const component = CCTable;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot
new file mode 100644
index 000000000000..3c8760699b96
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "heads",
+      "required": true,
+      "sbType": Object {
+        "name": "array",
+        "value": undefined,
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "array",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "onAddClick",
+      "required": false,
+      "sbType": Object {
+        "name": "function",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "func",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot
new file mode 100644
index 000000000000..69821e3c56b5
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = `
+"import React from 'react';
+
+const Foo = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));
+
+export const component = Foo;
+Foo.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Foo\\",
+  \\"props\\": {
+    \\"width\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"number\\"
+      },
+      \\"description\\": \\"@deprecated Do not use! Use \`size\` instead!\\\\n\\\\nWidth of foo\\"
+    },
+    \\"size\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"signature\\",
+        \\"type\\": \\"object\\",
+        \\"raw\\": \\"{ width: number; height: number }\\",
+        \\"signature\\": {
+          \\"properties\\": [{
+            \\"key\\": \\"width\\",
+            \\"value\\": {
+              \\"name\\": \\"number\\",
+              \\"required\\": true
+            }
+          }, {
+            \\"key\\": \\"height\\",
+            \\"value\\": {
+              \\"name\\": \\"number\\",
+              \\"required\\": true
+            }
+          }]
+        }
+      },
+      \\"description\\": \\"The size (replaces width)\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx
new file mode 100644
index 000000000000..1d9fa51da825
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface FooProps {
+  /**
+   * @deprecated Do not use! Use `size` instead!
+   *
+   * Width of foo
+   */
+  width: number;
+  /**
+   * The size (replaces width)
+   */
+  size: { width: number; height: number };
+}
+
+const Foo: React.FC<FooProps> = (props: FooProps) => <>{JSON.stringify(props)}</>;
+
+export const component = Foo;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot
new file mode 100644
index 000000000000..db5588270f7c
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "width",
+      "required": true,
+      "sbType": Object {
+        "name": "number",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "number",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "The size (replaces width)",
+      "name": "size",
+      "required": true,
+      "sbType": Object {
+        "name": "object",
+        "raw": "{ width: number; height: number }",
+        "value": Object {
+          "height": Object {
+            "name": "number",
+          },
+          "width": Object {
+            "name": "number",
+          },
+        },
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "signature",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/docgen.snapshot
new file mode 100644
index 000000000000..af6e21ceac74
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/docgen.snapshot
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9764-ts-extend-props 1`] = `
+"import React from 'react';
+
+const Radio = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));
+
+export const component = Radio;
+Radio.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Radio\\",
+  \\"props\\": {
+    \\"value\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"union\\",
+        \\"raw\\": \\"string | number\\",
+        \\"elements\\": [{
+          \\"name\\": \\"string\\"
+        }, {
+          \\"name\\": \\"number\\"
+        }]
+      },
+      \\"description\\": \\"The input content value\\"
+    },
+    \\"defaultChecked\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    },
+    \\"checked\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/input.tsx
new file mode 100644
index 000000000000..2abd61eed129
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/input.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface InputProps {
+  /**
+   * The input content value
+   */
+  value?: string | number;
+}
+
+interface RadioProps extends InputProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+}
+
+const Radio: React.FC<RadioProps> = (props: RadioProps) => <>{JSON.stringify(props)}</>;
+
+export const component = Radio;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot
new file mode 100644
index 000000000000..3f3b110e6ddb
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9764-ts-extend-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "The input content value",
+      "name": "value",
+      "required": false,
+      "sbType": Object {
+        "name": "union",
+        "raw": "string | number",
+        "value": Array [
+          Object {
+            "name": "string",
+          },
+          Object {
+            "name": "number",
+          },
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "defaultChecked",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "checked",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/docgen.snapshot
new file mode 100644
index 000000000000..e029b62e2a13
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/docgen.snapshot
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9827-ts-default-values 1`] = `
+"import React from 'react';
+
+const Hello = ({
+  title
+}) => {
+  return /*#__PURE__*/React.createElement(\\"div\\", {
+    className: \\"hello\\"
+  }, \\"Hello Component \\", title);
+};
+
+Hello.defaultProps = {
+  title: 'this is the default :)'
+};
+export const component = Hello;
+Hello.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Hello\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'this is the default :)'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"\\"
+    },
+    \\"foo\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    },
+    \\"bar\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"Array\\",
+        \\"elements\\": [{
+          \\"name\\": \\"string\\"
+        }],
+        \\"raw\\": \\"string[]\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/input.tsx
new file mode 100644
index 000000000000..373829aac3b3
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/input.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface HelloProps {
+  title: string;
+  foo: boolean;
+  bar?: string[];
+}
+
+const Hello = ({ title }: HelloProps) => {
+  return <div className="hello">Hello Component {title}</div>;
+};
+
+Hello.defaultProps = {
+  title: 'this is the default :)',
+};
+
+export const component = Hello;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot
new file mode 100644
index 000000000000..5d944694e62b
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9827-ts-default-values 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'this is the default :)'",
+      },
+      "description": "",
+      "name": "title",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "foo",
+      "required": true,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "bar",
+      "required": false,
+      "sbType": Object {
+        "name": "array",
+        "raw": "string[]",
+        "value": Array [
+          Object {
+            "name": "string",
+          },
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "Array",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/docgen.snapshot
new file mode 100644
index 000000000000..2af0f01d2944
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/docgen.snapshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9832-ts-enum-export 1`] = `
+"import React from 'react';
+export let EnumWithExtraProps;
+
+(function (EnumWithExtraProps) {
+  EnumWithExtraProps[\\"key1\\"] = \\"key1\\";
+  EnumWithExtraProps[\\"key2\\"] = \\"key2\\";
+})(EnumWithExtraProps || (EnumWithExtraProps = {}));
+
+export const component = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"hello\\");
+component.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"component\\"
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/input.tsx
new file mode 100644
index 000000000000..3072adb5705e
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/input.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export enum EnumWithExtraProps {
+  key1 = 'key1',
+  key2 = 'key2',
+}
+
+export const component = () => <div>hello</div>;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/properties.snapshot
new file mode 100644
index 000000000000..85dec505d2c5
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/properties.snapshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9832-ts-enum-export 1`] = `
+Object {
+  "rows": Array [],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot
new file mode 100644
index 000000000000..82936b526eef
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9922-ts-component-props 1`] = `
+"import React from 'react';
+
+const Button = ({
+  children,
+  onClick
+}) => /*#__PURE__*/React.createElement(\\"button\\", {
+  onClick: onClick,
+  type: \\"button\\"
+}, children);
+
+const WrappedButton = ({
+  spacing,
+  ...buttonProps
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  style: {
+    padding: spacing
+  }
+}, /*#__PURE__*/React.createElement(Button, buttonProps));
+
+export const component = WrappedButton;
+WrappedButton.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"WrappedButton\\",
+  \\"props\\": {
+    \\"spacing\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"number\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx
new file mode 100644
index 000000000000..797836d2c0d5
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent, ComponentProps, HTMLAttributes } from 'react';
+
+type Props = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+const Button: FunctionComponent<Props> = ({ children, onClick }) => (
+  <button onClick={onClick} type="button">
+    {children}
+  </button>
+);
+
+type WrappedProps = {
+  spacing: number;
+} & ComponentProps<typeof Button>;
+
+const WrappedButton: FunctionComponent<WrappedProps> = ({
+  spacing,
+  ...buttonProps
+}: WrappedProps) => (
+  <div style={{ padding: spacing }}>
+    <Button {...buttonProps} />
+  </div>
+);
+
+export const component = WrappedButton;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot
new file mode 100644
index 000000000000..d9342f6004e2
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9922-ts-component-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "spacing",
+      "required": true,
+      "sbType": Object {
+        "name": "number",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "number",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/docgen.snapshot
new file mode 100644
index 000000000000..aedd22813aab
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/docgen.snapshot
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties js-class-component 1`] = `
+"/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * Component description
+ */
+
+class ErrorBox extends React.Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement(\\"div\\", {
+      className: \\"error-box\\"
+    }, children);
+  }
+
+}
+
+ErrorBox.propTypes = {
+  /**
+   * PropTypes description
+   */
+  children: PropTypes.node.isRequired
+};
+ErrorBox.__docgenInfo = {
+  \\"description\\": \\"Component description\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"ErrorBox\\",
+  \\"props\\": {
+    \\"children\\": {
+      \\"type\\": {
+        \\"name\\": \\"node\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"PropTypes description\\"
+    }
+  }
+};
+export default ErrorBox;
+export const component = ErrorBox;"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/input.js b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/input.js
new file mode 100644
index 000000000000..c94bb47ca22b
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/input.js
@@ -0,0 +1,24 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Component description
+ */
+class ErrorBox extends React.Component {
+  render() {
+    const { children } = this.props;
+
+    return <div className="error-box">{children}</div>;
+  }
+}
+
+ErrorBox.propTypes = {
+  /**
+   * PropTypes description
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default ErrorBox;
+export const component = ErrorBox;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot
new file mode 100644
index 000000000000..abceadfadeaf
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties js-class-component 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "PropTypes description",
+      "name": "children",
+      "required": true,
+      "sbType": Object {
+        "name": "other",
+        "value": "node",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "node",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/docgen.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/docgen.snapshot
new file mode 100644
index 000000000000..5905ae39b421
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/docgen.snapshot
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-function-component 1`] = `
+"import React from 'react';
+
+/**
+ * The world's most _basic_ button
+ */
+export const Button = ({
+  onClick
+}) => /*#__PURE__*/React.createElement(\\"button\\", {
+  onClick: onClick,
+  type: \\"button\\"
+}, \\"hello\\");
+Button.defaultProps = {
+  primary: true,
+  secondary: false
+};
+export const component = Button;
+Button.__docgenInfo = {
+  \\"description\\": \\"The world's most _basic_ button\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"primary\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"true\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"Is primary?\\"
+    },
+    \\"secondary\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"default is false\\"
+    },
+    \\"onClick\\": {
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"signature\\",
+        \\"type\\": \\"function\\",
+        \\"raw\\": \\"() => void\\",
+        \\"signature\\": {
+          \\"arguments\\": [],
+          \\"return\\": {
+            \\"name\\": \\"void\\"
+          }
+        }
+      },
+      \\"description\\": \\"Simple click handler\\"
+    }
+  }
+};"
+`;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/input.tsx b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/input.tsx
new file mode 100644
index 000000000000..fdeea8fa6c8a
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/input.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ButtonProps {
+  /**
+   * Simple click handler
+   */
+  onClick?: () => void;
+
+  /**
+   * Is primary?
+   */
+  primary?: boolean;
+
+  /**
+   * default is false
+   */
+  secondary?: boolean;
+}
+
+/**
+ * The world's most _basic_ button
+ */
+export const Button: React.FC<ButtonProps> = ({ onClick }: ButtonProps) => (
+  <button onClick={onClick} type="button">
+    hello
+  </button>
+);
+
+Button.defaultProps = {
+  primary: true,
+  secondary: false,
+};
+
+export const component = Button;
diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot
new file mode 100644
index 000000000000..85ea3277565e
--- /dev/null
+++ b/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-function-component 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "true",
+      },
+      "description": "Is primary?",
+      "name": "primary",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "default is false",
+      "name": "secondary",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "Simple click handler",
+      "name": "onClick",
+      "required": false,
+      "sbType": Object {
+        "name": "function",
+        "raw": "() => void",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "signature",
+      },
+    },
+  ],
+}
+`;
diff --git a/addons/docs/src/frameworks/react/config.ts b/addons/docs/src/frameworks/react/config.ts
index 11c34986a0a6..c84f20f7025f 100644
--- a/addons/docs/src/frameworks/react/config.ts
+++ b/addons/docs/src/frameworks/react/config.ts
@@ -1,15 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { addParameters } from '@storybook/client-api';
 import { StoryFn } from '@storybook/addons';
-import { extractProps } from './extractProps';
+import { extractArgTypes } from './extractArgTypes';
 import { extractComponentDescription } from '../../lib/docgen';
 
-addParameters({
+export const parameters = {
   docs: {
-    // react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
+    inlineStories: true,
     // NOTE: that the result is a react element. Hooks support is provided by the outer code.
     prepareForInline: (storyFn: StoryFn) => storyFn(),
-    extractProps,
+    extractArgTypes,
     extractComponentDescription,
   },
-});
+};
diff --git a/addons/docs/src/frameworks/react/extractArgTypes.ts b/addons/docs/src/frameworks/react/extractArgTypes.ts
new file mode 100644
index 000000000000..fa35147a79ad
--- /dev/null
+++ b/addons/docs/src/frameworks/react/extractArgTypes.ts
@@ -0,0 +1,36 @@
+import { PropDef, PropsTableRowsProps } from '@storybook/components';
+import { ArgTypes } from '@storybook/api';
+import { ArgTypesExtractor } from '../../lib/docgen';
+import { extractProps } from './extractProps';
+
+export const extractArgTypes: ArgTypesExtractor = (component) => {
+  if (component) {
+    const props = extractProps(component);
+    const { rows } = props as PropsTableRowsProps;
+    if (rows) {
+      return rows.reduce((acc: ArgTypes, row: PropDef) => {
+        const { type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row;
+        let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
+        try {
+          // eslint-disable-next-line no-eval
+          defaultValue = eval(defaultValue);
+          // eslint-disable-next-line no-empty
+        } catch {}
+
+        acc[row.name] = {
+          ...row,
+          defaultValue,
+          type: { required, ...sbType },
+          table: {
+            type,
+            jsDocTags,
+            defaultValue: defaultSummary,
+          },
+        };
+        return acc;
+      }, {});
+    }
+  }
+
+  return null;
+};
diff --git a/addons/docs/src/frameworks/react/extractProps.ts b/addons/docs/src/frameworks/react/extractProps.ts
index 20d3032054c6..e087abbfa380 100644
--- a/addons/docs/src/frameworks/react/extractProps.ts
+++ b/addons/docs/src/frameworks/react/extractProps.ts
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { isForwardRef, isMemo } from 'react-is';
 import { PropDef } from '@storybook/components';
 import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen';
-import { Component } from '../../blocks/shared';
+import { Component } from '../../blocks/types';
 import { enhancePropTypesProps } from './propTypes/handleProp';
 import { enhanceTypeScriptProps } from './typeScript/handleProp';
 
@@ -12,7 +12,7 @@ export interface PropDefMap {
 
 const propTypesMap = new Map();
 
-Object.keys(PropTypes).forEach(typeName => {
+Object.keys(PropTypes).forEach((typeName) => {
   // @ts-ignore
   const type = PropTypes[typeName];
 
@@ -26,7 +26,7 @@ function getPropDefs(component: Component, section: string): PropDef[] {
   // eslint-disable-next-line react/forbid-foreign-prop-types
   if (!hasDocgen(component) && !component.propTypes) {
     if (isForwardRef(component) || component.render) {
-      processedComponent = component.render().type;
+      processedComponent = component.render({}).type;
     }
     if (isMemo(component)) {
       processedComponent = component.type().type;
@@ -44,10 +44,10 @@ function getPropDefs(component: Component, section: string): PropDef[] {
     case TypeSystem.TYPESCRIPT:
       return enhanceTypeScriptProps(extractedProps);
     default:
-      return extractedProps.map(x => x.propDef);
+      return extractedProps.map((x) => x.propDef);
   }
 }
 
-export const extractProps: PropsExtractor = component => ({
+export const extractProps: PropsExtractor = (component) => ({
   rows: getPropDefs(component, 'props'),
 });
diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts
index 09ead809bc50..80012d0f0552 100644
--- a/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts
@@ -1,4 +1,3 @@
-import { isNil } from 'lodash';
 import { PropDefaultValue } from '@storybook/components';
 import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
 import {
@@ -19,7 +18,7 @@ import { getPrettyIdentifier } from './prettyIdentifier';
 function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
   const { identifier } = inferedType as InspectionFunction;
 
-  if (!isNil(identifier)) {
+  if (identifier != null) {
     return createSummaryValue(
       getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
       generateCode(ast)
@@ -42,7 +41,7 @@ function generateElement(
   const { inferedType } = inspectionResult;
   const { identifier } = inferedType as InspectionElement;
 
-  if (!isNil(identifier)) {
+  if (identifier != null) {
     if (!isHtmlTag(identifier)) {
       const prettyIdentifier = getPrettyIdentifier(
         inferedType as InspectionIdentifiableInferedType
diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
index 9adcce0091f9..e9caa16b9fac 100644
--- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
@@ -1,5 +1,7 @@
 import { PropDefaultValue, PropDef } from '@storybook/components';
-import { isNil, isPlainObject, isArray, isFunction, isString } from 'lodash';
+import isPlainObject from 'lodash/isPlainObject';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
 // @ts-ignore
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
@@ -20,7 +22,7 @@ export interface TypeResolvers {
 }
 
 function isReactElement(element: any): boolean {
-  return !isNil(element.$$typeof);
+  return element.$$typeof != null;
 }
 
 export function extractFunctionName(func: Function, propName: string): string {
@@ -34,7 +36,7 @@ export function extractFunctionName(func: Function, propName: string): string {
   return null;
 }
 
-const stringResolver: TypeResolver = rawDefaultProp => {
+const stringResolver: TypeResolver = (rawDefaultProp) => {
   return createSummaryValue(rawDefaultProp);
 };
 
@@ -44,7 +46,7 @@ function generateReactObject(rawDefaultProp: any) {
 
   const jsx = reactElementToJSXString(rawDefaultProp);
 
-  if (!isNil(displayName)) {
+  if (displayName != null) {
     const prettyIdentifier = getPrettyElementIdentifier(displayName);
 
     return createSummaryValue(prettyIdentifier, prettyIdentifier !== jsx ? jsx : undefined);
@@ -65,8 +67,8 @@ function generateReactObject(rawDefaultProp: any) {
   return createSummaryValue(ELEMENT_CAPTION, jsx);
 }
 
-const objectResolver: TypeResolver = rawDefaultProp => {
-  if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) {
+const objectResolver: TypeResolver = (rawDefaultProp) => {
+  if (isReactElement(rawDefaultProp) && rawDefaultProp.type != null) {
     return generateReactObject(rawDefaultProp);
   }
 
@@ -76,7 +78,7 @@ const objectResolver: TypeResolver = rawDefaultProp => {
     return generateObject(inspectionResult);
   }
 
-  if (isArray(rawDefaultProp)) {
+  if (Array.isArray(rawDefaultProp)) {
     const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
 
     return generateArray(inspectionResult);
@@ -92,7 +94,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
   // Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
   if (isFunction(rawDefaultProp.render)) {
     isElement = true;
-  } else if (!isNil(rawDefaultProp.prototype) && isFunction(rawDefaultProp.prototype.render)) {
+  } else if (rawDefaultProp.prototype != null && isFunction(rawDefaultProp.prototype.render)) {
     isElement = true;
   } else {
     let innerElement;
@@ -110,7 +112,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
         innerElement = rawDefaultProp();
       }
 
-      if (!isNil(innerElement)) {
+      if (innerElement != null) {
         if (isReactElement(innerElement)) {
           isElement = true;
         }
@@ -121,12 +123,12 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
   }
 
   const funcName = extractFunctionName(rawDefaultProp, propDef.name);
-  if (!isNil(funcName)) {
+  if (funcName != null) {
     if (isElement) {
       return createSummaryValue(getPrettyElementIdentifier(funcName));
     }
 
-    if (!isNil(inspectionResult)) {
+    if (inspectionResult != null) {
       inspectionResult = inspectValue(rawDefaultProp.toString());
     }
 
@@ -138,7 +140,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
   return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
 };
 
-const defaultResolver: TypeResolver = rawDefaultProp => {
+const defaultResolver: TypeResolver = (rawDefaultProp) => {
   return createSummaryValue(rawDefaultProp.toString());
 };
 
@@ -168,8 +170,7 @@ export function createDefaultValueFromRawDefaultProp(
 ): PropDefaultValue {
   try {
     // Keep the extra () otherwise it will fail for functions.
-    // eslint-disable-next-line prettier/prettier
-    switch (typeof (rawDefaultProp)) {
+    switch (typeof rawDefaultProp) {
       case 'string':
         return typeResolvers.string(rawDefaultProp, propDef);
       case 'object':
diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
index 8ffe6fad77a4..2685f05efaf3 100644
--- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
@@ -233,7 +233,7 @@ describe('parse', () => {
       { name: 'boolean (true)', value: 'true' },
       { name: 'boolean (false)', value: 'false' },
       { name: 'null', value: 'null' },
-    ].forEach(x => {
+    ].forEach((x) => {
       it(`support ${x.name}`, () => {
         const result = parse(x.value);
         const inferedType = result.inferedType as InspectionLiteral;
diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
index 60b552abc2fc..26a085fcdb9b 100644
--- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
@@ -1,9 +1,7 @@
 import { Parser } from 'acorn';
-// @ts-ignore
 import jsx from 'acorn-jsx';
-import { isNil } from 'lodash';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import estree from 'estree';
-// @ts-ignore
 import * as acornWalk from 'acorn-walk';
 import {
   InspectionType,
@@ -24,6 +22,7 @@ interface ParsingResult<T> {
 }
 
 const ACORN_WALK_VISITORS = {
+  // @ts-ignore
   ...acornWalk.base,
   JSXElement: () => {},
 };
@@ -32,17 +31,18 @@ const acornParser = Parser.extend(jsx());
 
 // Cannot use "estree.Identifier" type because this function also support "JSXIdentifier".
 function extractIdentifierName(identifierNode: any) {
-  return !isNil(identifierNode) ? identifierNode.name : null;
+  return identifierNode != null ? identifierNode.name : null;
 }
 
 function filterAncestors(ancestors: estree.Node[]): estree.Node[] {
-  return ancestors.filter(x => x.type === 'ObjectExpression' || x.type === 'ArrayExpression');
+  return ancestors.filter((x) => x.type === 'ObjectExpression' || x.type === 'ArrayExpression');
 }
 
 function calculateNodeDepth(node: estree.Expression): number {
   const depths: number[] = [];
 
   acornWalk.ancestor(
+    // @ts-ignore
     node,
     {
       ObjectExpression(_: any, ancestors: estree.Node[]) {
@@ -82,6 +82,7 @@ function parseFunction(
 
   // If there is at least a JSXElement in the body of the function, then it's a React component.
   acornWalk.simple(
+    // @ts-ignore
     funcNode.body,
     {
       JSXElement(node: any) {
@@ -91,7 +92,7 @@ function parseFunction(
     ACORN_WALK_VISITORS
   );
 
-  const isJsx = !isNil(innerJsxElementNode);
+  const isJsx = innerJsxElementNode != null;
 
   const inferedType: InspectionFunction | InspectionElement = {
     type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
@@ -100,7 +101,7 @@ function parseFunction(
   };
 
   const identifierName = extractIdentifierName((funcNode as estree.FunctionExpression).id);
-  if (!isNil(identifierName)) {
+  if (identifierName != null) {
     inferedType.identifier = identifierName;
   }
 
@@ -117,6 +118,7 @@ function parseClass(
 
   // If there is at least a JSXElement in the body of the class, then it's a React component.
   acornWalk.simple(
+    // @ts-ignore
     classNode.body,
     {
       JSXElement(node: any) {
@@ -127,7 +129,7 @@ function parseClass(
   );
 
   const inferedType: any = {
-    type: !isNil(innerJsxElementNode) ? InspectionType.ELEMENT : InspectionType.CLASS,
+    type: innerJsxElementNode != null ? InspectionType.ELEMENT : InspectionType.CLASS,
     identifier: extractIdentifierName(classNode.id),
   };
 
@@ -143,7 +145,7 @@ function parseJsxElement(jsxElementNode: any): ParsingResult<InspectionElement>
   };
 
   const identifierName = extractIdentifierName(jsxElementNode.openingElement.name);
-  if (!isNil(identifierName)) {
+  if (identifierName != null) {
     inferedType.identifier = identifierName;
   }
 
@@ -212,13 +214,13 @@ export function parse(value: string): ParsingResult<InspectionInferedType> {
     ast,
   };
 
-  if (!isNil(ast.body[0])) {
+  if (ast.body[0] != null) {
     const rootNode = ast.body[0];
 
     switch (rootNode.type) {
       case 'ExpressionStatement': {
         const expressionResult = parseExpression(rootNode.expression);
-        if (!isNil(expressionResult)) {
+        if (expressionResult != null) {
           parsingResult = expressionResult as any;
         }
         break;
diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts
index 84a9e55f5620..f75ea0edbe4f 100644
--- a/addons/docs/src/frameworks/react/propTypes/createType.ts
+++ b/addons/docs/src/frameworks/react/propTypes/createType.ts
@@ -1,4 +1,3 @@
-import { isNil } from 'lodash';
 import { PropType } from '@storybook/components';
 import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
 import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
@@ -74,7 +73,7 @@ function createTypeDef({
     name,
     short,
     compact,
-    full: !isNil(full) ? full : short,
+    full: full != null ? full : short,
     inferedType,
   };
 }
@@ -137,7 +136,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
     case InspectionType.ELEMENT: {
       const { identifier } = inferedType as InspectionElement;
 
-      short = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
+      short = identifier != null && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
       compact = splitIntoLines(value).length === 1 ? value : null;
       full = value;
       break;
@@ -167,7 +166,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
 }
 
 function generateCustom({ raw }: DocgenPropType): TypeDef {
-  if (!isNil(raw)) {
+  if (raw != null) {
     return generateTypeFromString(raw, PropTypesType.CUSTOM);
   }
 
@@ -181,8 +180,8 @@ function generateCustom({ raw }: DocgenPropType): TypeDef {
 function generateFunc(extractedProp: ExtractedProp): TypeDef {
   const { jsDocTags } = extractedProp;
 
-  if (!isNil(jsDocTags)) {
-    if (!isNil(jsDocTags.params) || !isNil(jsDocTags.returns)) {
+  if (jsDocTags != null) {
+    if (jsDocTags.params != null || jsDocTags.returns != null) {
       return createTypeDef({
         name: PropTypesType.FUNC,
         short: generateShortFuncSignature(jsDocTags.params, jsDocTags.returns),
@@ -210,8 +209,8 @@ function generateShape(type: DocgenPropType, extractedProp: ExtractedProp): Type
   return createTypeDef({
     name: PropTypesType.SHAPE,
     short: OBJECT_CAPTION,
-    compact: depth === 1 ? prettyObject(ast, true) : null,
-    full: prettyObject(ast),
+    compact: depth === 1 && ast ? prettyObject(ast, true) : null,
+    full: ast ? prettyObject(ast) : null,
   });
 }
 
@@ -225,7 +224,7 @@ function generateObjectOf(type: DocgenPropType, extractedProp: ExtractedProp): T
   return createTypeDef({
     name: PropTypesType.OBJECTOF,
     short: objectOf(short),
-    compact: !isNil(compact) ? objectOf(compact) : null,
+    compact: compact != null ? objectOf(compact) : null,
     full: objectOf(full),
   });
 }
@@ -248,7 +247,7 @@ function generateUnion(type: DocgenPropType, extractedProp: ExtractedProp): Type
     return createTypeDef({
       name: PropTypesType.UNION,
       short: values.short.join(' | '),
-      compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
+      compact: values.compact.every((x: string) => x != null) ? values.compact.join(' | ') : null,
       full: values.full.join(' | '),
     });
   }
@@ -280,7 +279,7 @@ function generateEnum(type: DocgenPropType): TypeDef {
     return createTypeDef({
       name: PropTypesType.ENUM,
       short: values.short.join(' | '),
-      compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
+      compact: values.compact.every((x: string) => x != null) ? values.compact.join(' | ') : null,
       full: values.full.join(' | '),
     });
   }
@@ -300,7 +299,7 @@ function createArrayOfObjectTypeDef(short: string, compact: string, full: string
   return createTypeDef({
     name: PropTypesType.ARRAYOF,
     short: braceAfter(short),
-    compact: !isNil(compact) ? braceAround(compact) : null,
+    compact: compact != null ? braceAround(compact) : null,
     full: braceAround(full),
   });
 }
@@ -361,7 +360,7 @@ export function createType(extractedProp: ExtractedProp): PropType {
   const { type } = extractedProp.docgenInfo;
 
   // A type could be null if a defaultProp has been provided without a type definition.
-  if (isNil(type)) {
+  if (type == null) {
     return null;
   }
 
@@ -376,7 +375,7 @@ export function createType(extractedProp: ExtractedProp): PropType {
       case PropTypesType.ARRAYOF: {
         const { short, compact, full } = generateType(type, extractedProp);
 
-        if (!isNil(compact)) {
+        if (compact != null) {
           if (!isTooLongForTypeSummary(compact)) {
             return createSummaryValue(compact);
           }
diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
index 63624c418958..0d6b6c251d86 100644
--- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
+++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
@@ -1,12 +1,11 @@
-import { isNil } from 'lodash';
 import { ExtractedJsDocParam, ExtractedJsDocReturns } from '../../../lib/jsdocParser';
 
 export function generateFuncSignature(
   params: ExtractedJsDocParam[],
   returns: ExtractedJsDocReturns
 ): string {
-  const hasParams = !isNil(params);
-  const hasReturns = !isNil(returns);
+  const hasParams = params != null;
+  const hasReturns = returns != null;
 
   if (!hasParams && !hasReturns) {
     return '';
@@ -19,7 +18,7 @@ export function generateFuncSignature(
       const prettyName = x.getPrettyName();
       const typeName = x.getTypeName();
 
-      if (!isNil(typeName)) {
+      if (typeName != null) {
         return `${prettyName}: ${typeName}`;
       }
 
@@ -42,8 +41,8 @@ export function generateShortFuncSignature(
   params: ExtractedJsDocParam[],
   returns: ExtractedJsDocReturns
 ): string {
-  const hasParams = !isNil(params);
-  const hasReturns = !isNil(returns);
+  const hasParams = params != null;
+  const hasReturns = returns != null;
 
   if (!hasParams && !hasReturns) {
     return '';
diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
index 71417d46effe..cd0f24000ac5 100644
--- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
@@ -3,7 +3,7 @@
 import { PropDef } from '@storybook/components';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Component } from '../../../blocks/shared';
+import { Component } from '../../../blocks/types';
 import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
 import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
 
@@ -251,7 +251,7 @@ describe('enhancePropTypesProp', () => {
       'element',
       'elementType',
       'node',
-    ].forEach(x => {
+    ].forEach((x) => {
       it(`should return '${x}' when type is ${x}`, () => {
         const component = createTestComponent({
           type: {
@@ -1173,7 +1173,7 @@ describe('enhancePropTypesProp', () => {
         { type: 'number', defaultProp: 1 },
         { type: 'boolean', defaultProp: true },
         { type: 'symbol', defaultProp: Symbol('hey!') },
-      ].forEach(x => {
+      ].forEach((x) => {
         it(`should support ${x.type}`, () => {
           const component = createTestComponent(null);
 
@@ -1327,7 +1327,7 @@ describe('enhancePropTypesProp', () => {
         expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
-      ['element', 'elementType'].forEach(x => {
+      ['element', 'elementType'].forEach((x) => {
         it(`should support inlined React class component for ${x}`, () => {
           const component = createTestComponent(null, x);
 
diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts
index 819b223cbdbb..f85b1ccb5605 100644
--- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts
+++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts
@@ -1,9 +1,8 @@
-import { isNil } from 'lodash';
 import { PropDef } from '@storybook/components';
 import { ExtractedProp } from '../../../lib/docgen';
 import { createType } from './createType';
 import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
-import { Component } from '../../../blocks/shared';
+import { Component } from '../../../blocks/types';
 import { keepOriginalDefinitionOrder } from './sortProps';
 import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers';
 
@@ -11,25 +10,25 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultPro
   const { propDef } = extractedProp;
 
   const newtype = createType(extractedProp);
-  if (!isNil(newtype)) {
+  if (newtype != null) {
     propDef.type = newtype;
   }
 
   const { defaultValue } = extractedProp.docgenInfo;
-  if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
+  if (defaultValue != null && defaultValue.value != null) {
     const newDefaultValue = createDefaultValue(defaultValue.value);
 
-    if (!isNil(newDefaultValue)) {
+    if (newDefaultValue != null) {
       propDef.defaultValue = newDefaultValue;
     }
-  } else if (!isNil(rawDefaultProp)) {
+  } else if (rawDefaultProp != null) {
     const newDefaultValue = createDefaultValueFromRawDefaultProp(
       rawDefaultProp,
       propDef,
       rawDefaultPropTypeResolvers
     );
 
-    if (!isNil(newDefaultValue)) {
+    if (newDefaultValue != null) {
       propDef.defaultValue = newDefaultValue;
     }
   }
@@ -41,8 +40,8 @@ export function enhancePropTypesProps(
   extractedProps: ExtractedProp[],
   component: Component
 ): PropDef[] {
-  const rawDefaultProps = !isNil(component.defaultProps) ? component.defaultProps : {};
-  const enhancedProps = extractedProps.map(x =>
+  const rawDefaultProps = component.defaultProps != null ? component.defaultProps : {};
+  const enhancedProps = extractedProps.map((x) =>
     enhancePropTypesProp(x, rawDefaultProps[x.propDef.name])
   );
 
diff --git a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
index 452396222a93..923067c65c67 100644
--- a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
+++ b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
@@ -1,4 +1,3 @@
-import { isNil } from 'lodash';
 import { TypeResolver, extractFunctionName, createTypeResolvers } from '../lib/defaultValues';
 import { createSummaryValue } from '../../../lib';
 import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib';
@@ -12,7 +11,7 @@ const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => {
   const isElement = type.summary === 'element' || type.summary === 'elementType';
 
   const funcName = extractFunctionName(rawDefaultProp, name);
-  if (!isNil(funcName)) {
+  if (funcName != null) {
     // Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
     if (isElement) {
       return createSummaryValue(getPrettyElementIdentifier(funcName));
diff --git a/addons/docs/src/frameworks/react/propTypes/sortProps.ts b/addons/docs/src/frameworks/react/propTypes/sortProps.ts
index 9061ee0ded52..b676481edd18 100644
--- a/addons/docs/src/frameworks/react/propTypes/sortProps.ts
+++ b/addons/docs/src/frameworks/react/propTypes/sortProps.ts
@@ -1,6 +1,5 @@
 import { PropDef } from '@storybook/components';
-import { isNil } from 'lodash';
-import { Component } from '../../../blocks/shared';
+import { Component } from '../../../blocks/types';
 
 // react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component.
 // This function re-order them by their original definition order.
@@ -11,10 +10,10 @@ export function keepOriginalDefinitionOrder(
   // eslint-disable-next-line react/forbid-foreign-prop-types
   const { propTypes } = component;
 
-  if (!isNil(propTypes)) {
+  if (propTypes != null) {
     return Object.keys(propTypes)
-      .map(x => extractedProps.find(y => y.name === x))
-      .filter(x => x);
+      .map((x) => extractedProps.find((y) => y.name === x))
+      .filter((x) => x);
   }
 
   return extractedProps;
diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx
new file mode 100644
index 000000000000..cb1d3d6a10fa
--- /dev/null
+++ b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import mapValues from 'lodash/mapValues';
+import { storiesOf } from '@storybook/react';
+import { ArgsTable } from '@storybook/components';
+import { Args } from '@storybook/api';
+import { combineParameters } from '@storybook/client-api';
+
+import { extractArgTypes } from './extractArgTypes';
+import { inferControls } from '../common/inferControls';
+import { Component } from '../../blocks';
+
+const argsTableProps = (component: Component) => {
+  const argTypes = extractArgTypes(component);
+  const controls = inferControls(argTypes);
+  const rows = combineParameters(argTypes, controls);
+  return { rows };
+};
+
+const ArgsStory = ({ component }: any) => {
+  const { rows } = argsTableProps(component);
+  const initialArgs = mapValues(rows, (argType) => argType.defaultValue) as Args;
+
+  const [args, setArgs] = useState(initialArgs);
+  return (
+    <>
+      <table>
+        <tr>
+          <th>key</th>
+          <th>val</th>
+        </tr>
+        {Object.entries(args).map(([key, val]) => (
+          <tr key={key}>
+            <td>{key}</td>
+            <td>{JSON.stringify(val, null, 2)}</td>
+          </tr>
+        ))}
+      </table>
+      <ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
+    </>
+  );
+};
+
+const typescriptFixtures = [
+  'aliases',
+  'arrays',
+  'enums',
+  'functions',
+  'interfaces',
+  'intersections',
+  'records',
+  'scalars',
+  'tuples',
+  'unions',
+];
+
+const typescriptStories = storiesOf('ArgTypes/TypeScript', module);
+typescriptFixtures.forEach((fixture) => {
+  // eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow
+  const { Component } = require(`../../lib/sbtypes/__testfixtures__/typescript/${fixture}`);
+  typescriptStories.add(fixture, () => <ArgsStory component={Component} />);
+});
+
+const proptypesFixtures = ['arrays', 'enums', 'misc', 'objects', 'react', 'scalars'];
+
+const proptypesStories = storiesOf('ArgTypes/PropTypes', module);
+proptypesFixtures.forEach((fixture) => {
+  // eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow
+  const { Component } = require(`../../lib/sbtypes/__testfixtures__/proptypes/${fixture}`);
+  proptypesStories.add(fixture, () => <ArgsStory component={Component} />);
+});
+
+const issuesFixtures = [
+  'js-class-component',
+  'ts-function-component',
+  '9399-js-proptypes-shape',
+  '8663-js-styled-components',
+  '9626-js-default-values',
+  '9668-js-proptypes-no-jsdoc',
+  '8143-ts-react-fc-generics',
+  '8143-ts-imported-types',
+  '8279-js-styled-docgen',
+  '8140-js-prop-types-oneof',
+  '9023-js-hoc',
+  '8740-ts-multi-props',
+  '9556-ts-react-default-exports',
+  '9592-ts-styled-props',
+  '9591-ts-import-types',
+  '9721-ts-deprecated-jsdoc',
+  '9827-ts-default-values',
+  '9586-js-react-memo',
+  '9575-ts-camel-case',
+  '9493-ts-display-name',
+  '8894-9511-ts-forward-ref',
+  '9465-ts-type-props',
+  '8428-js-static-prop-types',
+  '9764-ts-extend-props',
+  '9922-ts-component-props',
+];
+
+const issuesStories = storiesOf('ArgTypes/Issues', module);
+issuesFixtures.forEach((fixture) => {
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  const { component } = require(`./__testfixtures__/${fixture}/input`);
+
+  issuesStories.add(fixture, () => <ArgsStory component={component} />);
+});
diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/addons/docs/src/frameworks/react/react-properties.test.ts
new file mode 100644
index 000000000000..3be8aff69215
--- /dev/null
+++ b/addons/docs/src/frameworks/react/react-properties.test.ts
@@ -0,0 +1,67 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs';
+
+import { transformFileSync, transformSync } from '@babel/core';
+import requireFromString from 'require-from-string';
+
+import { extractProps } from './extractProps';
+import { normalizeNewlines } from '../../lib/utils';
+
+// File hierarchy:
+// __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+
+const transformToModule = (inputCode: string) => {
+  const options = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            esmodules: true,
+          },
+        },
+      ],
+    ],
+  };
+  const { code } = transformSync(inputCode, options);
+  return normalizeNewlines(code);
+};
+
+const annotateWithDocgen = (inputPath: string) => {
+  const options = {
+    presets: ['@babel/typescript', '@babel/react'],
+    plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+    babelrc: false,
+  };
+  const { code } = transformFileSync(inputPath, options);
+  return normalizeNewlines(code);
+};
+
+describe('react component properties', () => {
+  const fixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {
+    if (testEntry.isDirectory()) {
+      const testDir = path.join(fixturesDir, testEntry.name);
+      const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
+      if (testFile) {
+        it(testEntry.name, () => {
+          const inputPath = path.join(testDir, testFile);
+
+          // snapshot the output of babel-plugin-react-docgen
+          const docgenPretty = annotateWithDocgen(inputPath);
+          expect(docgenPretty).toMatchSpecificSnapshot(path.join(testDir, 'docgen.snapshot'));
+
+          // transform into an uglier format that's works with require-from-string
+          const docgenModule = transformToModule(docgenPretty);
+
+          // snapshot the output of component-properties/react
+          const { component } = requireFromString(docgenModule);
+          const properties = extractProps(component);
+          expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
+        });
+      }
+    }
+  });
+});
diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx
index a0cd380901bb..4cbfe60f5345 100644
--- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx
@@ -2,7 +2,7 @@
 
 import { PropDef } from '@storybook/components';
 import React from 'react';
-import { Component } from '../../../blocks/shared';
+import { Component } from '../../../blocks/types';
 import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
 import { enhanceTypeScriptProp } from './handleProp';
 
@@ -278,7 +278,7 @@ describe('enhanceTypeScriptProp', () => {
         { type: 'number', defaultProp: 1 },
         { type: 'boolean', defaultProp: true },
         { type: 'symbol', defaultProp: Symbol('hey!') },
-      ].forEach(x => {
+      ].forEach((x) => {
         it(`should support ${x.type}`, () => {
           const component = createTestComponent(null);
 
@@ -432,7 +432,7 @@ describe('enhanceTypeScriptProp', () => {
         expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
-      ['element', 'elementType'].forEach(x => {
+      ['element', 'elementType'].forEach((x) => {
         it(`should support inlined React class component for ${x}`, () => {
           const component = createTestComponent(null, x);
 
diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.ts
index 9f840806de52..a63a4f2e3724 100644
--- a/addons/docs/src/frameworks/react/typeScript/handleProp.ts
+++ b/addons/docs/src/frameworks/react/typeScript/handleProp.ts
@@ -1,4 +1,3 @@
-import { isNil } from 'lodash';
 import { PropDef } from '@storybook/components';
 import { ExtractedProp } from '../../../lib/docgen';
 import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
@@ -7,15 +6,15 @@ export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultPr
   const { propDef } = extractedProp;
 
   const { defaultValue } = extractedProp.docgenInfo;
-  if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
+  if (defaultValue != null && defaultValue.value != null) {
     const newDefaultValue = createDefaultValue(defaultValue.value);
-    if (!isNil(newDefaultValue)) {
+    if (newDefaultValue != null) {
       propDef.defaultValue = newDefaultValue;
     }
-  } else if (!isNil(rawDefaultProp)) {
+  } else if (rawDefaultProp != null) {
     const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
 
-    if (!isNil(newDefaultValue)) {
+    if (newDefaultValue != null) {
       propDef.defaultValue = newDefaultValue;
     }
   }
@@ -24,5 +23,5 @@ export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultPr
 }
 
 export function enhanceTypeScriptProps(extractedProps: ExtractedProp[]): PropDef[] {
-  return extractedProps.map(enhanceTypeScriptProp);
+  return extractedProps.map((prop) => enhanceTypeScriptProp(prop));
 }
diff --git a/addons/docs/src/frameworks/vue/config.tsx b/addons/docs/src/frameworks/vue/config.tsx
index 680e46165797..f796827b56ba 100644
--- a/addons/docs/src/frameworks/vue/config.tsx
+++ b/addons/docs/src/frameworks/vue/config.tsx
@@ -1,18 +1,18 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import toReact from '@egoist/vue-to-react';
 import { StoryFn } from '@storybook/addons';
 import { addParameters } from '@storybook/client-api';
-import { extractProps } from './extractProps';
+import { extractArgTypes } from './extractArgTypes';
 import { extractComponentDescription } from '../../lib/docgen';
 
 addParameters({
   docs: {
+    inlineStories: true,
     prepareForInline: (storyFn: StoryFn) => {
       const Story = toReact(storyFn());
       return <Story />;
     },
-    extractProps,
+    extractArgTypes,
     extractComponentDescription,
   },
 });
diff --git a/addons/docs/src/frameworks/vue/extractArgTypes.ts b/addons/docs/src/frameworks/vue/extractArgTypes.ts
new file mode 100644
index 000000000000..8ee12409c1d2
--- /dev/null
+++ b/addons/docs/src/frameworks/vue/extractArgTypes.ts
@@ -0,0 +1,35 @@
+import { ArgTypes } from '@storybook/api';
+import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
+import { convert } from '../../lib/sbtypes';
+import { trimQuotes } from '../../lib/sbtypes/utils';
+
+const SECTIONS = ['props', 'events', 'slots'];
+
+const trim = (val: any) => (val && typeof val === 'string' ? trimQuotes(val) : val);
+
+export const extractArgTypes: ArgTypesExtractor = (component) => {
+  if (!hasDocgen(component)) {
+    return null;
+  }
+  const results: ArgTypes = {};
+  SECTIONS.forEach((section) => {
+    const props = extractComponentProps(component, section);
+    props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
+      const { name, type, description, defaultValue, required } = propDef;
+      const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
+      results[name] = {
+        name,
+        description,
+        type: { required, ...sbType },
+        defaultValue: defaultValue && trim(defaultValue.detail || defaultValue.summary),
+        table: {
+          type,
+          jsDocTags,
+          defaultValue,
+          category: section,
+        },
+      };
+    });
+  });
+  return results;
+};
diff --git a/addons/docs/src/frameworks/vue/extractProps.ts b/addons/docs/src/frameworks/vue/extractProps.ts
deleted file mode 100644
index f4a26acc76cf..000000000000
--- a/addons/docs/src/frameworks/vue/extractProps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { PropDef } from '@storybook/components';
-import { PropsExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
-
-const SECTIONS = ['props', 'events', 'slots'];
-
-export const extractProps: PropsExtractor = component => {
-  if (!hasDocgen(component)) {
-    return null;
-  }
-  const sections: Record<string, PropDef[]> = {};
-  SECTIONS.forEach(section => {
-    sections[section] = extractComponentProps(component, section).map(x => x.propDef);
-  });
-  return { sections };
-};
diff --git a/addons/docs/src/frameworks/vue/preset.ts b/addons/docs/src/frameworks/vue/preset.ts
index 527ce55570c9..f74526599697 100644
--- a/addons/docs/src/frameworks/vue/preset.ts
+++ b/addons/docs/src/frameworks/vue/preset.ts
@@ -1,8 +1,14 @@
-export function webpack(webpackConfig: any = {}, options: any = {}) {
+export function webpackFinal(webpackConfig: any = {}, options: any = {}) {
   webpackConfig.module.rules.push({
     test: /\.vue$/,
     loader: 'vue-docgen-loader',
     enforce: 'post',
+    options: {
+      docgenOptions: {
+        alias: webpackConfig.resolve.alias,
+        ...options.vueDocgenOptions,
+      },
+    },
   });
   return webpackConfig;
 }
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/custom-elements.snapshot b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/custom-elements.snapshot
new file mode 100644
index 000000000000..162254124055
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/custom-elements.snapshot
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web-components component properties lit-element-demo-card 1`] = `
+Object {
+  "tags": Array [
+    Object {
+      "attributes": Array [
+        Object {
+          "default": "false",
+          "description": "Indicates that the back of the card is shown",
+          "name": "back-side",
+          "type": "boolean",
+        },
+        Object {
+          "default": "\\"Your Message\\"",
+          "description": "Header message",
+          "name": "header",
+          "type": "string",
+        },
+        Object {
+          "default": "[]",
+          "description": "Data rows",
+          "name": "rows",
+          "type": "object",
+        },
+      ],
+      "cssProperties": Array [
+        Object {
+          "description": "Header font size",
+          "name": "--demo-wc-card-header-font-size",
+        },
+        Object {
+          "description": "Font color for front",
+          "name": "--demo-wc-card-front-color",
+        },
+        Object {
+          "description": "Font color for back",
+          "name": "--demo-wc-card-back-color",
+        },
+      ],
+      "description": "This is a container looking like a card with a back and front side you can switch",
+      "events": Array [
+        Object {
+          "description": "Fires whenever it switches between front/back",
+          "name": "side-changed",
+        },
+      ],
+      "name": "input",
+      "path": "dummy-path-to-component",
+      "properties": Array [
+        Object {
+          "attribute": "back-side",
+          "default": "false",
+          "description": "Indicates that the back of the card is shown",
+          "name": "backSide",
+          "type": "boolean",
+        },
+        Object {
+          "attribute": "header",
+          "default": "\\"Your Message\\"",
+          "description": "Header message",
+          "name": "header",
+          "type": "string",
+        },
+        Object {
+          "attribute": "rows",
+          "default": "[]",
+          "description": "Data rows",
+          "name": "rows",
+          "type": "object",
+        },
+      ],
+      "slots": Array [
+        Object {
+          "description": "This is an unnamed slot (the default slot)",
+          "name": "",
+        },
+      ],
+    },
+  ],
+  "version": "experimental",
+}
+`;
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js
new file mode 100644
index 000000000000..b56ff4c87b0a
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js
@@ -0,0 +1,198 @@
+import { CustomEvent } from 'global';
+import { LitElement, html, css } from 'lit-element';
+
+const demoWcCardStyle = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 250px;
+    height: 200px;
+    border-radius: 10px;
+    transform-style: preserve-3d;
+    transition: all 0.8s ease;
+  }
+
+  .header {
+    font-weight: bold;
+    font-size: var(--demo-wc-card-header-font-size, 16px);
+    text-align: center;
+  }
+
+  .content {
+    padding: 20px 10px 0 10px;
+    flex-grow: 1;
+  }
+
+  .footer {
+    display: flex;
+  }
+
+  dl {
+    margin: 0;
+    text-align: left;
+  }
+
+  dd {
+    margin-left: 15px;
+  }
+
+  button {
+    border-radius: 15px;
+    width: 30px;
+    height: 30px;
+    background: #fff;
+    border: 1px solid #ccc;
+    color: #000;
+    font-size: 21px;
+    line-height: 27px;
+    font-weight: bold;
+    cursor: pointer;
+    margin: 5px;
+  }
+
+  .note {
+    flex-grow: 1;
+    color: #666;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: left;
+    padding-top: 15px;
+  }
+
+  :host([back-side]) {
+    transform: rotateY(180deg);
+  }
+
+  #front,
+  #back {
+    position: absolute;
+    width: 250px;
+    box-sizing: border-box;
+    box-shadow: #ccc 3px 3px 2px 1px;
+    padding: 10px;
+    display: flex;
+    flex-flow: column;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 10px;
+    backface-visibility: hidden;
+    overflow: hidden;
+  }
+
+  #front {
+    background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);
+    color: var(--demo-wc-card-front-color, #000);
+  }
+
+  #back {
+    background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);
+    color: var(--demo-wc-card-back-color, #fff);
+    text-align: center;
+    transform: rotateY(180deg) translate3d(0px, 0, 1px);
+  }
+
+  #back .note {
+    color: #fff;
+  }
+`;
+
+/**
+ * This is a container looking like a card with a back and front side you can switch
+ *
+ * @slot - This is an unnamed slot (the default slot)
+ * @fires side-changed - Fires whenever it switches between front/back
+ * @cssprop --demo-wc-card-header-font-size - Header font size
+ * @cssprop --demo-wc-card-front-color - Font color for front
+ * @cssprop --demo-wc-card-back-color - Font color for back
+ */
+export class DemoWcCard extends LitElement {
+  static get properties() {
+    return {
+      backSide: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'back-side',
+      },
+      header: { type: String },
+      rows: { type: Object },
+    };
+  }
+
+  static get styles() {
+    return demoWcCardStyle;
+  }
+
+  constructor() {
+    super();
+
+    /**
+     * Indicates that the back of the card is shown
+     */
+    this.backSide = false;
+
+    /**
+     * Header message
+     */
+    this.header = 'Your Message';
+
+    /**
+     * Data rows
+     */
+    this.rows = [];
+  }
+
+  toggle() {
+    this.backSide = !this.backSide;
+  }
+
+  render() {
+    return html`
+      <div id="front">
+        <div class="header">
+          ${this.header}
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <div class="note">A</div>
+          <button @click=${this.toggle}>></button>
+        </div>
+      </div>
+      <div id="back">
+        <div class="header">
+          ${this.header}
+        </div>
+
+        <div class="content">
+          ${this.rows.length === 0
+            ? html``
+            : html`
+                <dl>
+                  ${this.rows.map(
+                    (row) => html`
+                      <dt>${row.header}</dt>
+                      <dd>${row.value}</dd>
+                    `
+                  )}
+                </dl>
+              `}
+        </div>
+        <div class="footer">
+          <div class="note">B</div>
+          <button @click=${this.toggle}>></button>
+        </div>
+      </div>
+    `;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) {
+      this.dispatchEvent(new CustomEvent('side-changed'));
+    }
+  }
+}
+
+// eslint-disable-next-line no-undef
+customElements.define('input', DemoWcCard);
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot
new file mode 100644
index 000000000000..39817364930f
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web-components component properties lit-element-demo-card 1`] = `
+Object {
+  "": Object {
+    "description": "This is an unnamed slot (the default slot)",
+    "name": "",
+    "required": false,
+    "table": Object {
+      "category": "slots",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-back-color": Object {
+    "description": "Font color for back",
+    "name": "--demo-wc-card-back-color",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-front-color": Object {
+    "description": "Font color for front",
+    "name": "--demo-wc-card-front-color",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-header-font-size": Object {
+    "description": "Header font size",
+    "name": "--demo-wc-card-header-font-size",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "back-side": Object {
+    "description": "Indicates that the back of the card is shown",
+    "name": "back-side",
+    "required": false,
+    "table": Object {
+      "category": "attributes",
+      "defaultValue": Object {
+        "summary": "false",
+      },
+      "type": Object {
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "backSide": Object {
+    "description": "Indicates that the back of the card is shown",
+    "name": "backSide",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "false",
+      },
+      "type": Object {
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+    },
+  },
+  "header": Object {
+    "description": "Header message",
+    "name": "header",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "\\"Your Message\\"",
+      },
+      "type": Object {
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+    },
+  },
+  "rows": Object {
+    "description": "Data rows",
+    "name": "rows",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "[]",
+      },
+      "type": Object {
+        "summary": "object",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
+  "side-changed": Object {
+    "description": "Fires whenever it switches between front/back",
+    "name": "side-changed",
+    "required": false,
+    "table": Object {
+      "category": "events",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+}
+`;
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/custom-elements.snapshot b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/custom-elements.snapshot
new file mode 100644
index 000000000000..c1416386b1b1
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/custom-elements.snapshot
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web-components component properties lit-html-welcome 1`] = `
+Object {
+  "tags": Array [
+    Object {
+      "name": "input",
+      "path": "dummy-path-to-component",
+    },
+  ],
+  "version": "experimental",
+}
+`;
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/input.js b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/input.js
new file mode 100644
index 000000000000..30e6edec7cf2
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/input.js
@@ -0,0 +1,61 @@
+import { html } from 'lit-html';
+
+export const Welcome = () => html`
+  <div class="main">
+    <h1>Welcome to Storybook for Web Components</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" href="#" data-sb-kind="Demo Card" data-sb-story="Front">stories</a>
+    </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>
+
+  <style>
+    .main {
+      padding: 15px;
+      line-height: 1.4;
+      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+      background-color: #ffffff;
+    }
+
+    .logo {
+      width: 256px;
+      margin: 15px;
+    }
+
+    .code {
+      font-size: 15px;
+      font-weight: 600;
+      padding: 2px 5px;
+      border: 1px solid #eae9e9;
+      border-radius: 4px;
+      background-color: #f3f2f2;
+      color: #3a3a3a;
+    }
+  </style>
+`;
+
+// eslint-disable-next-line no-undef
+customElements.define('input', Welcome);
diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot
new file mode 100644
index 000000000000..a0d337eb0697
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web-components component properties lit-html-welcome 1`] = `Object {}`;
diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
index 76083ba119f6..18eec305f12e 100644
--- a/addons/docs/src/frameworks/web-components/config.js
+++ b/addons/docs/src/frameworks/web-components/config.js
@@ -1,66 +1,16 @@
 /* global window */
 /* eslint-disable import/no-extraneous-dependencies */
 import { addParameters } from '@storybook/client-api';
-import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
 import React from 'react';
 import { render } from 'lit-html';
-
-function mapData(data) {
-  return data.map(item => ({
-    name: item.name,
-    type: { summary: item.type },
-    required: '',
-    description: item.description,
-    defaultValue: { summary: item.defaultValue },
-  }));
-}
-
-function isEmpty(obj) {
-  return Object.entries(obj).length === 0 && obj.constructor === Object;
-}
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
 
 addParameters({
   docs: {
-    extractProps: tagName => {
-      const customElements = getCustomElements();
-      if (isValidComponent(tagName) && isValidMetaData(customElements)) {
-        const metaData = customElements.tags.find(
-          tag => tag.name.toUpperCase() === tagName.toUpperCase()
-        );
-        const sections = {};
-        if (metaData.attributes) {
-          sections.attributes = mapData(metaData.attributes);
-        }
-        if (metaData.properties) {
-          sections.props = mapData(metaData.properties);
-        }
-        if (metaData.events) {
-          sections.events = mapData(metaData.events);
-        }
-        if (metaData.slots) {
-          sections.slots = mapData(metaData.slots);
-        }
-        if (metaData.cssProperties) {
-          sections.css = mapData(metaData.cssProperties);
-        }
-        return isEmpty(sections) ? false : { sections };
-      }
-      return false;
-    },
-    extractComponentDescription: tagName => {
-      const customElements = getCustomElements();
-      if (isValidComponent(tagName) && isValidMetaData(customElements)) {
-        const metaData = customElements.tags.find(
-          tag => tag.name.toUpperCase() === tagName.toUpperCase()
-        );
-        if (metaData && metaData.description) {
-          return metaData.description;
-        }
-      }
-      return false;
-    },
+    extractArgTypes,
+    extractComponentDescription,
     inlineStories: true,
-    prepareForInline: storyFn => {
+    prepareForInline: (storyFn) => {
       class Story extends React.Component {
         constructor(props) {
           super(props);
diff --git a/addons/docs/src/frameworks/web-components/custom-elements.ts b/addons/docs/src/frameworks/web-components/custom-elements.ts
new file mode 100644
index 000000000000..e46edcb7fdf6
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/custom-elements.ts
@@ -0,0 +1,91 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
+import { ArgTypes } from '@storybook/api';
+
+interface TagItem {
+  name: string;
+  type: string;
+  description: string;
+  default?: any;
+  defaultValue?: any;
+}
+
+interface Tag {
+  name: string;
+  description: string;
+  attributes?: TagItem[];
+  properties?: TagItem[];
+  events?: TagItem[];
+  slots?: TagItem[];
+  cssProperties?: TagItem[];
+}
+
+interface CustomElements {
+  tags: Tag[];
+}
+
+interface Sections {
+  attributes?: any;
+  properties?: any;
+  events?: any;
+  slots?: any;
+  css?: any;
+}
+
+function mapData(data: TagItem[], category: string) {
+  return (
+    data &&
+    data.reduce((acc, item) => {
+      const type = category === 'properties' ? { name: item.type } : { name: 'void' };
+      acc[item.name] = {
+        name: item.name,
+        required: false,
+        description: item.description,
+        type,
+        table: {
+          category,
+          type: { summary: item.type },
+          defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
+        },
+      };
+      return acc;
+    }, {} as ArgTypes)
+  );
+}
+
+function isEmpty(obj: object) {
+  return Object.entries(obj).length === 0 && obj.constructor === Object;
+}
+
+export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
+  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
+    return null;
+  }
+  const metaData = customElements.tags.find(
+    (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
+  );
+  const argTypes = {
+    ...mapData(metaData.attributes, 'attributes'),
+    ...mapData(metaData.properties, 'properties'),
+    ...mapData(metaData.events, 'events'),
+    ...mapData(metaData.slots, 'slots'),
+    ...mapData(metaData.cssProperties, 'css'),
+  };
+  return argTypes;
+};
+
+export const extractArgTypes = (tagName: string) => {
+  const customElements: CustomElements = getCustomElements();
+  return extractArgTypesFromElements(tagName, customElements);
+};
+
+export const extractComponentDescription = (tagName: string) => {
+  const customElements: CustomElements = getCustomElements();
+  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
+    return null;
+  }
+  const metaData = customElements.tags.find(
+    (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
+  );
+  return metaData && metaData.description;
+};
diff --git a/addons/docs/src/frameworks/web-components/web-components-properties.test.ts b/addons/docs/src/frameworks/web-components/web-components-properties.test.ts
new file mode 100644
index 000000000000..9f4581fdcb57
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/web-components-properties.test.ts
@@ -0,0 +1,61 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs';
+import tmp from 'tmp';
+import { sync as spawnSync } from 'cross-spawn';
+
+// File hierarchy:
+// __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+
+const runWebComponentsAnalyzer = (inputPath: string) => {
+  const { name: tmpDir, removeCallback } = tmp.dirSync();
+  const customElementsFile = `${tmpDir}/custom-elements.json`;
+  spawnSync('wca', ['analyze', inputPath, '--outFile', customElementsFile], {
+    stdio: 'inherit',
+  });
+  const output = fs.readFileSync(customElementsFile, 'utf8');
+  try {
+    removeCallback();
+  } catch (e) {
+    //
+  }
+  return output;
+};
+
+describe('web-components component properties', () => {
+  // we need to mock lit-html and dynamically require custom-elements
+  // because lit-html is distributed as ESM not CJS
+  // https://github.com/Polymer/lit-html/issues/516
+  jest.mock('lit-html', () => {});
+  // eslint-disable-next-line global-require
+  const { extractArgTypesFromElements } = require('./custom-elements');
+
+  const fixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {
+    if (testEntry.isDirectory()) {
+      const testDir = path.join(fixturesDir, testEntry.name);
+      const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
+      if (testFile) {
+        it(testEntry.name, () => {
+          const inputPath = path.join(testDir, testFile);
+
+          // snapshot the output of wca
+          const customElementsJson = runWebComponentsAnalyzer(inputPath);
+          const customElements = JSON.parse(customElementsJson);
+          customElements.tags.forEach((tag: any) => {
+            // eslint-disable-next-line no-param-reassign
+            tag.path = 'dummy-path-to-component';
+          });
+          expect(customElements).toMatchSpecificSnapshot(
+            path.join(testDir, 'custom-elements.snapshot')
+          );
+
+          // snapshot the properties
+          const properties = extractArgTypesFromElements('input', customElements);
+          expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
+        });
+      }
+    }
+  });
+});
diff --git a/addons/docs/src/lib/docgen/createPropDef.ts b/addons/docs/src/lib/docgen/createPropDef.ts
index 9d844cf00fb5..2fb88bd66d78 100644
--- a/addons/docs/src/lib/docgen/createPropDef.ts
+++ b/addons/docs/src/lib/docgen/createPropDef.ts
@@ -1,4 +1,3 @@
-import { isNil } from 'lodash';
 import { PropDef, PropDefaultValue } from '@storybook/components';
 import { TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
 import { JsDocParsingResult } from '../jsdocParser';
@@ -6,6 +5,7 @@ import { createSummaryValue } from '../utils';
 import { createFlowPropDef } from './flow/createPropDef';
 import { isDefaultValueBlacklisted } from './utils/defaultValue';
 import { createTsPropDef } from './typeScript/createPropDef';
+import { convert } from '../sbtypes';
 
 export type PropDefFactory = (
   propName: string,
@@ -15,11 +15,11 @@ export type PropDefFactory = (
 
 function createType(type: DocgenType) {
   // A type could be null if a defaultProp has been provided without a type definition.
-  return !isNil(type) ? createSummaryValue(type.name) : null;
+  return type != null ? createSummaryValue(type.name) : null;
 }
 
 function createDefaultValue(defaultValue: DocgenPropDefaultValue): PropDefaultValue {
-  if (!isNil(defaultValue)) {
+  if (defaultValue != null) {
     const { value } = defaultValue;
 
     if (!isDefaultValueBlacklisted(value)) {
@@ -46,20 +46,23 @@ function applyJsDocResult(propDef: PropDef, jsDocParsingResult: JsDocParsingResu
   if (jsDocParsingResult.includesJsDoc) {
     const { description, extractedTags } = jsDocParsingResult;
 
-    if (!isNil(description)) {
+    if (description != null) {
       // eslint-disable-next-line no-param-reassign
       propDef.description = jsDocParsingResult.description;
     }
 
-    const hasParams = !isNil(extractedTags.params);
-    const hasReturns = !isNil(extractedTags.returns) && !isNil(extractedTags.returns.type);
+    const hasParams = extractedTags.params != null;
+    const hasReturns = extractedTags.returns != null && extractedTags.returns.type != null;
 
     if (hasParams || hasReturns) {
       // eslint-disable-next-line no-param-reassign
       propDef.jsDocTags = {
         params:
           hasParams &&
-          extractedTags.params.map(x => ({ name: x.getPrettyName(), description: x.description })),
+          extractedTags.params.map((x) => ({
+            name: x.getPrettyName(),
+            description: x.description,
+          })),
         returns: hasReturns && { description: extractedTags.returns.description },
       };
     }
@@ -70,18 +73,21 @@ function applyJsDocResult(propDef: PropDef, jsDocParsingResult: JsDocParsingResu
 
 export const javaScriptFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
   const propDef = createBasicPropDef(propName, docgenInfo.type, docgenInfo);
+  propDef.sbType = convert(docgenInfo);
 
   return applyJsDocResult(propDef, jsDocParsingResult);
 };
 
 export const tsFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
   const propDef = createTsPropDef(propName, docgenInfo);
+  propDef.sbType = convert(docgenInfo);
 
   return applyJsDocResult(propDef, jsDocParsingResult);
 };
 
 export const flowFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
   const propDef = createFlowPropDef(propName, docgenInfo);
+  propDef.sbType = convert(docgenInfo);
 
   return applyJsDocResult(propDef, jsDocParsingResult);
 };
diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.test.ts b/addons/docs/src/lib/docgen/extractDocgenProps.test.ts
index d2b7c57aa0a5..921d329893f8 100644
--- a/addons/docs/src/lib/docgen/extractDocgenProps.test.ts
+++ b/addons/docs/src/lib/docgen/extractDocgenProps.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 
-import { Component } from '../../blocks/shared';
+import { Component } from '../../blocks/types';
 import { extractComponentProps } from './extractDocgenProps';
 
 const DOCGEN_SECTION = 'props';
@@ -53,7 +53,7 @@ function createComponent(docgenInfo: Record<string, any>): Component {
   return component;
 }
 
-TypeSystems.forEach(x => {
+TypeSystems.forEach((x) => {
   describe(`${x.name}`, () => {
     it('should map defaults docgen info properly', () => {
       const component = createComponent({
diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.ts b/addons/docs/src/lib/docgen/extractDocgenProps.ts
index 939b522d6f09..e66468b02b90 100644
--- a/addons/docs/src/lib/docgen/extractDocgenProps.ts
+++ b/addons/docs/src/lib/docgen/extractDocgenProps.ts
@@ -1,6 +1,5 @@
-import { isNil } from 'lodash';
 import { PropDef } from '@storybook/components';
-import { Component } from '../../blocks/shared';
+import { Component } from '../../blocks/types';
 import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser';
 import { DocgenInfo, TypeSystem } from './types';
 import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils';
@@ -16,15 +15,15 @@ export interface ExtractedProp {
 export type ExtractProps = (component: Component, section: string) => ExtractedProp[];
 
 const getTypeSystem = (docgenInfo: DocgenInfo): TypeSystem => {
-  if (!isNil(docgenInfo.type)) {
+  if (docgenInfo.type != null) {
     return TypeSystem.JAVASCRIPT;
   }
 
-  if (!isNil(docgenInfo.flowType)) {
+  if (docgenInfo.flowType != null) {
     return TypeSystem.FLOW;
   }
 
-  if (!isNil(docgenInfo.tsType)) {
+  if (docgenInfo.tsType != null) {
     return TypeSystem.TYPESCRIPT;
   }
 
@@ -46,10 +45,10 @@ export const extractComponentSectionObject = (docgenSection: any) => {
   const createPropDef = getPropDefFactory(typeSystem);
 
   return docgenPropsKeys
-    .map(propName => {
+    .map((propName) => {
       const docgenInfo = docgenSection[propName];
 
-      return !isNil(docgenInfo)
+      return docgenInfo != null
         ? extractProp(propName, docgenInfo, typeSystem, createPropDef)
         : null;
     })
@@ -93,5 +92,5 @@ function extractProp(
 }
 
 export function extractComponentDescription(component?: Component): string {
-  return !isNil(component) && getDocgenDescription(component);
+  return component != null && getDocgenDescription(component);
 }
diff --git a/addons/docs/src/lib/docgen/flow/createDefaultValue.ts b/addons/docs/src/lib/docgen/flow/createDefaultValue.ts
index 0bec4162d388..a9be5f0fe9d4 100644
--- a/addons/docs/src/lib/docgen/flow/createDefaultValue.ts
+++ b/addons/docs/src/lib/docgen/flow/createDefaultValue.ts
@@ -1,5 +1,4 @@
 import { PropDefaultValue } from '@storybook/components';
-import { isNil } from 'lodash';
 import { DocgenPropDefaultValue, DocgenPropType } from '../types';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../utils';
 import { isDefaultValueBlacklisted } from '../utils/defaultValue';
@@ -8,7 +7,7 @@ export function createDefaultValue(
   defaultValue: DocgenPropDefaultValue,
   type: DocgenPropType
 ): PropDefaultValue {
-  if (!isNil(defaultValue)) {
+  if (defaultValue != null) {
     const { value } = defaultValue;
 
     if (!isDefaultValueBlacklisted(value)) {
diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
index 0b6a4e7156df..be904ce7af72 100644
--- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
+++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
@@ -13,7 +13,7 @@ function createDocgenInfo({ flowType, ...others }: Partial<DocgenInfo>): DocgenI
 
 describe('type', () => {
   ['string', 'number', 'boolean', 'any', 'void', 'Object', 'String', 'MyClass', 'literal'].forEach(
-    x => {
+    (x) => {
       it(`should support ${x}`, () => {
         const docgenInfo = createDocgenInfo({
           flowType: { name: x },
@@ -27,7 +27,7 @@ describe('type', () => {
     }
   );
 
-  ['Array', 'Class', 'MyClass'].forEach(x => {
+  ['Array', 'Class', 'MyClass'].forEach((x) => {
     it(`should support untyped ${x}`, () => {
       const docgenInfo = createDocgenInfo({
         flowType: { name: x },
diff --git a/addons/docs/src/lib/docgen/flow/createType.ts b/addons/docs/src/lib/docgen/flow/createType.ts
index 24530648f4e7..5cf193fb53bf 100644
--- a/addons/docs/src/lib/docgen/flow/createType.ts
+++ b/addons/docs/src/lib/docgen/flow/createType.ts
@@ -1,5 +1,4 @@
 import { PropType } from '@storybook/components';
-import { isNil } from 'lodash';
 import { DocgenFlowType } from '../types';
 import { createSummaryValue, isTooLongForTypeSummary } from '../../utils';
 
@@ -13,19 +12,19 @@ interface DocgenFlowUnionType extends DocgenFlowType {
 }
 
 function generateUnion({ name, raw, elements }: DocgenFlowUnionType): PropType {
-  if (!isNil(raw)) {
+  if (raw != null) {
     return createSummaryValue(raw);
   }
 
-  if (!isNil(elements)) {
-    return createSummaryValue(elements.map(x => x.value).join(' | '));
+  if (elements != null) {
+    return createSummaryValue(elements.map((x) => x.value).join(' | '));
   }
 
   return createSummaryValue(name);
 }
 
 function generateFuncSignature({ type, raw }: DocgenFlowType): PropType {
-  if (!isNil(raw)) {
+  if (raw != null) {
     return createSummaryValue(raw);
   }
 
@@ -33,7 +32,7 @@ function generateFuncSignature({ type, raw }: DocgenFlowType): PropType {
 }
 
 function generateObjectSignature({ type, raw }: DocgenFlowType): PropType {
-  if (!isNil(raw)) {
+  if (raw != null) {
     return !isTooLongForTypeSummary(raw) ? createSummaryValue(raw) : createSummaryValue(type, raw);
   }
 
@@ -47,7 +46,7 @@ function generateSignature(flowType: DocgenFlowType): PropType {
 }
 
 function generateDefault({ name, raw }: DocgenFlowType): PropType {
-  if (!isNil(raw)) {
+  if (raw != null) {
     return !isTooLongForTypeSummary(raw) ? createSummaryValue(raw) : createSummaryValue(name, raw);
   }
 
@@ -56,7 +55,7 @@ function generateDefault({ name, raw }: DocgenFlowType): PropType {
 
 export function createType(type: DocgenFlowType): PropType {
   // A type could be null if a defaultProp has been provided without a type definition.
-  if (isNil(type)) {
+  if (type == null) {
     return null;
   }
 
diff --git a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts b/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts
index f63067c49b3a..14bfcf67b687 100644
--- a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts
+++ b/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts
@@ -1,11 +1,10 @@
 import { PropDefaultValue } from '@storybook/components';
-import { isNil } from 'lodash';
 import { DocgenInfo } from '../types';
 import { createSummaryValue } from '../../utils';
 import { isDefaultValueBlacklisted } from '../utils/defaultValue';
 
 export function createDefaultValue({ defaultValue }: DocgenInfo): PropDefaultValue {
-  if (!isNil(defaultValue)) {
+  if (defaultValue != null) {
     const { value } = defaultValue;
 
     if (!isDefaultValueBlacklisted(value)) {
diff --git a/addons/docs/src/lib/docgen/typeScript/createType.ts b/addons/docs/src/lib/docgen/typeScript/createType.ts
index a1e1edbafef9..c2022c90d4f3 100644
--- a/addons/docs/src/lib/docgen/typeScript/createType.ts
+++ b/addons/docs/src/lib/docgen/typeScript/createType.ts
@@ -1,11 +1,10 @@
 import { PropType } from '@storybook/components';
-import { isNil } from 'lodash';
 import { DocgenInfo } from '../types';
 import { createSummaryValue } from '../../utils';
 
 export function createType({ tsType, required }: DocgenInfo): PropType {
   // A type could be null if a defaultProp has been provided without a type definition.
-  if (isNil(tsType)) {
+  if (tsType == null) {
     return null;
   }
 
diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts
index b59af2b3ec99..f95a54e84641 100644
--- a/addons/docs/src/lib/docgen/types.ts
+++ b/addons/docs/src/lib/docgen/types.ts
@@ -1,8 +1,11 @@
 import { PropsTableProps } from '@storybook/components';
-import { Component } from '../../blocks/shared';
+import { ArgTypes } from '@storybook/api';
+import { Component } from '../../blocks/types';
 
 export type PropsExtractor = (component: Component) => PropsTableProps | null;
 
+export type ArgTypesExtractor = (component: Component) => ArgTypes | null;
+
 export interface DocgenType {
   name: string;
   description?: string;
diff --git a/addons/docs/src/lib/docgen/utils/defaultValue.ts b/addons/docs/src/lib/docgen/utils/defaultValue.ts
index 0757f9eef6e6..e85efb4546a2 100644
--- a/addons/docs/src/lib/docgen/utils/defaultValue.ts
+++ b/addons/docs/src/lib/docgen/utils/defaultValue.ts
@@ -1,5 +1,5 @@
 const BLACKLIST = ['null', 'undefined'];
 
 export function isDefaultValueBlacklisted(value: string): boolean {
-  return BLACKLIST.some(x => x === value);
+  return BLACKLIST.some((x) => x === value);
 }
diff --git a/addons/docs/src/lib/docgen/utils/docgenInfo.ts b/addons/docs/src/lib/docgen/utils/docgenInfo.ts
index 623047c7e380..da7f21f7a06d 100644
--- a/addons/docs/src/lib/docgen/utils/docgenInfo.ts
+++ b/addons/docs/src/lib/docgen/utils/docgenInfo.ts
@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 
-import { isNil } from 'lodash';
-import { Component } from '../../../blocks/shared';
+import { Component } from '../../../blocks/types';
 import { str } from './string';
 
 export function hasDocgen(component: Component): boolean {
@@ -9,7 +8,7 @@ export function hasDocgen(component: Component): boolean {
 }
 
 export function isValidDocgenSection(docgenSection: any) {
-  return !isNil(docgenSection) && Object.keys(docgenSection).length > 0;
+  return docgenSection != null && Object.keys(docgenSection).length > 0;
 }
 
 export function getDocgenSection(component: Component, section: string): any {
diff --git a/addons/docs/src/lib/jsdocParser.test.ts b/addons/docs/src/lib/jsdocParser.test.ts
index eb2b539d3bb3..e3ec359b9b94 100644
--- a/addons/docs/src/lib/jsdocParser.test.ts
+++ b/addons/docs/src/lib/jsdocParser.test.ts
@@ -121,7 +121,7 @@ describe('parseJsDoc', () => {
       expect(extractedTags.params[1].name).toBe('anotherEvent');
     });
 
-    ['@arg', '@argument'].forEach(x => {
+    ['@arg', '@argument'].forEach((x) => {
       it(`should support ${x} alias`, () => {
         const { extractedTags } = parseJsDoc(`${x} {SyntheticEvent} event - React event`);
 
diff --git a/addons/docs/src/lib/jsdocParser.ts b/addons/docs/src/lib/jsdocParser.ts
index d489baf76d23..1b9f971856e9 100644
--- a/addons/docs/src/lib/jsdocParser.ts
+++ b/addons/docs/src/lib/jsdocParser.ts
@@ -1,5 +1,4 @@
 import doctrine, { Annotation } from 'doctrine';
-import { isNil } from 'lodash';
 
 export interface ExtractedJsDocParam {
   name: string;
@@ -35,7 +34,7 @@ export interface JsDocParsingResult {
 export type ParseJsDoc = (value?: string, options?: JsDocParsingOptions) => JsDocParsingResult;
 
 function containsJsDoc(value?: string): boolean {
-  return !isNil(value) && value.includes('@');
+  return value != null && value.includes('@');
 }
 
 function parse(content: string, tags: string[]): Annotation {
@@ -112,8 +111,8 @@ function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
         case 'arg':
         case 'argument': {
           const paramTag = extractParam(tag);
-          if (!isNil(paramTag)) {
-            if (isNil(extractedTags.params)) {
+          if (paramTag != null) {
+            if (extractedTags.params == null) {
               extractedTags.params = [];
             }
             extractedTags.params.push(paramTag);
@@ -122,7 +121,7 @@ function extractJsDocTags(ast: doctrine.Annotation): ExtractedJsDoc {
         }
         case 'returns': {
           const returnsTag = extractReturns(tag);
-          if (!isNil(returnsTag)) {
+          if (returnsTag != null) {
             extractedTags.returns = returnsTag;
           }
           break;
@@ -140,7 +139,7 @@ function extractParam(tag: doctrine.Tag): ExtractedJsDocParam {
   const paramName = tag.name;
 
   // When the @param doesn't have a name but have a type and a description, "null-null" is returned.
-  if (!isNil(paramName) && paramName !== 'null-null') {
+  if (paramName != null && paramName !== 'null-null') {
     return {
       name: tag.name,
       type: tag.type,
@@ -156,7 +155,7 @@ function extractParam(tag: doctrine.Tag): ExtractedJsDocParam {
         return tag.name;
       },
       getTypeName: () => {
-        return !isNil(tag.type) ? extractTypeName(tag.type) : null;
+        return tag.type != null ? extractTypeName(tag.type) : null;
       },
     };
   }
@@ -165,7 +164,7 @@ function extractParam(tag: doctrine.Tag): ExtractedJsDocParam {
 }
 
 function extractReturns(tag: doctrine.Tag): ExtractedJsDocReturns {
-  if (!isNil(tag.type)) {
+  if (tag.type != null) {
     return {
       type: tag.type,
       description: tag.description,
@@ -185,7 +184,7 @@ function extractTypeName(type: doctrine.Type): string {
 
   if (type.type === 'RecordType') {
     const recordFields = type.fields.map((field: doctrine.type.FieldType) => {
-      if (!isNil(field.value)) {
+      if (field.value != null) {
         const valueTypeName = extractTypeName(field.value);
 
         return `${field.key}: ${valueTypeName}`;
@@ -209,7 +208,7 @@ function extractTypeName(type: doctrine.Type): string {
   }
 
   if (type.type === 'TypeApplication') {
-    if (!isNil(type.expression)) {
+    if (type.expression != null) {
       if ((type.expression as doctrine.type.NameExpression).name === 'Array') {
         const arrayType = extractTypeName(type.applications[0]);
 
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/arrays.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/arrays.js
new file mode 100644
index 000000000000..0f1ebcdae092
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/arrays.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  optionalArray: PropTypes.array,
+  arrayOfStrings: PropTypes.arrayOf(PropTypes.string),
+  arrayOfShape: PropTypes.arrayOf(
+    PropTypes.shape({
+      active: PropTypes.bool,
+    })
+  ),
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/enums.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/enums.js
new file mode 100644
index 000000000000..60f51359b6f5
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/enums.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  oneOfNumber: PropTypes.oneOf([1, 2, 3]),
+  oneOfString: PropTypes.oneOf(['static', 'timed']),
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/misc.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/misc.js
new file mode 100644
index 000000000000..e662474d1ab1
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/misc.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  // An object that could be one of many types
+  optionalUnion: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.instanceOf(Object),
+  ]),
+  optionalMessage: PropTypes.instanceOf(Object),
+  // A value of any data type
+  requiredAny: PropTypes.any.isRequired,
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/objects.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/objects.js
new file mode 100644
index 000000000000..09036cf88088
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/objects.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  optionalObject: PropTypes.object,
+  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
+  optionalObjectWithShape: PropTypes.shape({
+    color: PropTypes.string,
+    fontSize: PropTypes.number,
+  }),
+  optionalObjectWithStrictShape: PropTypes.exact({
+    name: PropTypes.string,
+    quantity: PropTypes.number,
+  }),
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/react.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/react.js
new file mode 100644
index 000000000000..fd54e9307663
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/react.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  // Anything that can be rendered: numbers, strings, elements or an array
+  // (or fragment) containing these types.
+  optionalNode: PropTypes.node,
+  // A React element.
+  optionalElement: PropTypes.element,
+  // A React element type (ie. MyComponent).
+  optionalElementType: PropTypes.elementType,
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/scalars.js b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/scalars.js
new file mode 100644
index 000000000000..7e74151596b0
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/scalars.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Component = (props) => <>JSON.stringify(props)</>;
+Component.propTypes = {
+  optionalBool: PropTypes.bool,
+  optionalFunc: PropTypes.func,
+  optionalNumber: PropTypes.number,
+  optionalString: PropTypes.string,
+  optionalSymbol: PropTypes.symbol,
+};
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/aliases.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/aliases.tsx
new file mode 100644
index 000000000000..a5ec67cd4724
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/aliases.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+type StringAlias = string;
+type NumberAlias = number;
+type AliasesIntersection = StringAlias & NumberAlias;
+type AliasesUnion = StringAlias | NumberAlias;
+interface GenericAlias<T> {
+  value: T;
+}
+interface Props {
+  typeAlias: StringAlias;
+  aliasesIntersection: AliasesIntersection;
+  aliasesUnion: AliasesUnion;
+  genericAlias: GenericAlias<string>;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/arrays.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/arrays.tsx
new file mode 100644
index 000000000000..74c8a4d56a07
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/arrays.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface Point {
+  x: number;
+  y: number;
+}
+interface Props {
+  arrayOfPoints: Point[];
+  arrayOfInlineObjects: { w: number; h: number }[];
+  arrayOfPrimitive: string[];
+  arrayOfComplexObject: ItemInterface[];
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/enums.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/enums.tsx
new file mode 100644
index 000000000000..9cf04170aab9
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/enums.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+
+enum DefaultEnum {
+  TopLeft,
+  TopRight,
+  TopCenter,
+}
+enum NumericEnum {
+  TopLeft = 0,
+  TopRight,
+  TopCenter,
+}
+enum StringEnum {
+  TopLeft = 'top-left',
+  TopRight = 'top-right',
+  TopCenter = 'top-center',
+}
+interface Props {
+  defaultEnum: DefaultEnum;
+  numericEnum: NumericEnum;
+  stringEnum: StringEnum;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/functions.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/functions.tsx
new file mode 100644
index 000000000000..cbe35a3ac0fc
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/functions.tsx
@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface Props {
+  onClick?: () => void;
+  voidFunc: () => void;
+  funcWithArgsAndReturns: (a: string, b: string) => string;
+  funcWithUnionArg: (a: string | number) => string;
+  funcWithMultipleUnionReturns: () => string | ItemInterface;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/interfaces.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/interfaces.tsx
new file mode 100644
index 000000000000..3f931b09c087
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/interfaces.tsx
@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface GenericInterface<T> {
+  value: T;
+}
+interface Props {
+  interface: ItemInterface;
+  genericInterface: GenericInterface<string>;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/intersections.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/intersections.tsx
new file mode 100644
index 000000000000..a075158cd580
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/intersections.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface PersonInterface {
+  name: string;
+}
+type InterfaceIntersection = ItemInterface & PersonInterface;
+interface Props {
+  intersectionType: InterfaceIntersection;
+  intersectionWithInlineType: ItemInterface & { inlineValue: string };
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/records.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/records.tsx
new file mode 100644
index 000000000000..b8e541f35aba
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/records.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface Props {
+  recordOfPrimitive: Record<string, number>;
+  recordOfComplexObject: Record<string, ItemInterface>;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/scalars.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/scalars.tsx
new file mode 100644
index 000000000000..44f533a01b49
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/scalars.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+interface Props {
+  any: any;
+  string: string;
+  bool: boolean;
+  number: number;
+  symbol: symbol;
+  readonly readonlyPrimitive: string;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/tuples.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/tuples.tsx
new file mode 100644
index 000000000000..490fbd61aa66
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/tuples.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+interface Props {
+  tupleOfPrimitive: [string, number];
+  tupleWithComplexType: [string, ItemInterface];
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/unions.tsx b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/unions.tsx
new file mode 100644
index 000000000000..eb8bbfc406ff
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/__testfixtures__/typescript/unions.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+type Kind = 'default' | 'action';
+enum DefaultEnum {
+  TopLeft,
+  TopRight,
+  TopCenter,
+}
+enum NumericEnum {
+  TopLeft = 0,
+  TopRight,
+  TopCenter,
+}
+type EnumUnion = DefaultEnum | NumericEnum;
+interface Props {
+  kind?: Kind;
+  inlinedNumericLiteralUnion: 0 | 1;
+  enumUnion: EnumUnion;
+}
+export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
diff --git a/addons/docs/src/lib/sbtypes/convert.test.ts b/addons/docs/src/lib/sbtypes/convert.test.ts
new file mode 100644
index 000000000000..337586d82f4f
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/convert.test.ts
@@ -0,0 +1,806 @@
+import 'jest-specific-snapshot';
+import mapValues from 'lodash/mapValues';
+import { transformSync } from '@babel/core';
+import requireFromString from 'require-from-string';
+import fs from 'fs';
+
+import { convert } from './convert';
+import { normalizeNewlines } from '../utils';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => JSON.stringify(val, null, 2),
+  test: (val) => typeof val !== 'string',
+});
+
+describe('storybook type system', () => {
+  describe('TypeScript', () => {
+    it('scalars', () => {
+      const input = readFixture('typescript/functions.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface Props {
+          onClick?: () => void;
+          voidFunc: () => void;
+          funcWithArgsAndReturns: (a: string, b: string) => string;
+          funcWithUnionArg: (a: string | number) => string;
+          funcWithMultipleUnionReturns: () => string | ItemInterface;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "onClick": {
+            "raw": "() => void",
+            "name": "function"
+          },
+          "voidFunc": {
+            "raw": "() => void",
+            "name": "function"
+          },
+          "funcWithArgsAndReturns": {
+            "raw": "(a: string, b: string) => string",
+            "name": "function"
+          },
+          "funcWithUnionArg": {
+            "raw": "(a: string | number) => string",
+            "name": "function"
+          },
+          "funcWithMultipleUnionReturns": {
+            "raw": "() => string | ItemInterface",
+            "name": "function"
+          }
+        }
+      `);
+    });
+    it('functions', () => {
+      const input = readFixture('typescript/functions.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface Props {
+          onClick?: () => void;
+          voidFunc: () => void;
+          funcWithArgsAndReturns: (a: string, b: string) => string;
+          funcWithUnionArg: (a: string | number) => string;
+          funcWithMultipleUnionReturns: () => string | ItemInterface;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "onClick": {
+            "raw": "() => void",
+            "name": "function"
+          },
+          "voidFunc": {
+            "raw": "() => void",
+            "name": "function"
+          },
+          "funcWithArgsAndReturns": {
+            "raw": "(a: string, b: string) => string",
+            "name": "function"
+          },
+          "funcWithUnionArg": {
+            "raw": "(a: string | number) => string",
+            "name": "function"
+          },
+          "funcWithMultipleUnionReturns": {
+            "raw": "() => string | ItemInterface",
+            "name": "function"
+          }
+        }
+      `);
+    });
+    it('enums', () => {
+      const input = readFixture('typescript/enums.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        enum DefaultEnum {
+          TopLeft,
+          TopRight,
+          TopCenter,
+        }
+        enum NumericEnum {
+          TopLeft = 0,
+          TopRight,
+          TopCenter,
+        }
+        enum StringEnum {
+          TopLeft = 'top-left',
+          TopRight = 'top-right',
+          TopCenter = 'top-center',
+        }
+        interface Props {
+          defaultEnum: DefaultEnum;
+          numericEnum: NumericEnum;
+          stringEnum: StringEnum;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "defaultEnum": {
+            "name": "other",
+            "value": "DefaultEnum"
+          },
+          "numericEnum": {
+            "name": "other",
+            "value": "NumericEnum"
+          },
+          "stringEnum": {
+            "name": "other",
+            "value": "StringEnum"
+          }
+        }
+      `);
+    });
+    it('unions', () => {
+      const input = readFixture('typescript/unions.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        type Kind = 'default' | 'action';
+        enum DefaultEnum {
+          TopLeft,
+          TopRight,
+          TopCenter,
+        }
+        enum NumericEnum {
+          TopLeft = 0,
+          TopRight,
+          TopCenter,
+        }
+        type EnumUnion = DefaultEnum | NumericEnum;
+        interface Props {
+          kind?: Kind;
+          inlinedNumericLiteralUnion: 0 | 1;
+          enumUnion: EnumUnion;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "kind": {
+            "raw": "'default' | 'action'",
+            "name": "union",
+            "value": [
+              {
+                "name": "other",
+                "value": "literal"
+              },
+              {
+                "name": "other",
+                "value": "literal"
+              }
+            ]
+          },
+          "inlinedNumericLiteralUnion": {
+            "raw": "0 | 1",
+            "name": "union",
+            "value": [
+              {
+                "name": "other",
+                "value": "literal"
+              },
+              {
+                "name": "other",
+                "value": "literal"
+              }
+            ]
+          },
+          "enumUnion": {
+            "raw": "DefaultEnum | NumericEnum",
+            "name": "union",
+            "value": [
+              {
+                "name": "other",
+                "value": "DefaultEnum"
+              },
+              {
+                "name": "other",
+                "value": "NumericEnum"
+              }
+            ]
+          }
+        }
+      `);
+    });
+    it('intersections', () => {
+      const input = readFixture('typescript/intersections.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface PersonInterface {
+          name: string;
+        }
+        type InterfaceIntersection = ItemInterface & PersonInterface;
+        interface Props {
+          intersectionType: InterfaceIntersection;
+          intersectionWithInlineType: ItemInterface & { inlineValue: string };
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "intersectionType": {
+            "raw": "ItemInterface & PersonInterface",
+            "name": "intersection",
+            "value": [
+              {
+                "name": "other",
+                "value": "ItemInterface"
+              },
+              {
+                "name": "other",
+                "value": "PersonInterface"
+              }
+            ]
+          },
+          "intersectionWithInlineType": {
+            "raw": "ItemInterface & { inlineValue: string }",
+            "name": "intersection",
+            "value": [
+              {
+                "name": "other",
+                "value": "ItemInterface"
+              },
+              {
+                "raw": "{ inlineValue: string }",
+                "name": "object",
+                "value": {
+                  "inlineValue": {
+                    "name": "string"
+                  }
+                }
+              }
+            ]
+          }
+        }
+      `);
+    });
+    it('arrays', () => {
+      const input = readFixture('typescript/arrays.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface Point {
+          x: number;
+          y: number;
+        }
+        interface Props {
+          arrayOfPoints: Point[];
+          arrayOfInlineObjects: { w: number; h: number }[];
+          arrayOfPrimitive: string[];
+          arrayOfComplexObject: ItemInterface[];
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "arrayOfPoints": {
+            "raw": "Point[]",
+            "name": "array",
+            "value": [
+              {
+                "name": "other",
+                "value": "Point"
+              }
+            ]
+          },
+          "arrayOfInlineObjects": {
+            "raw": "{ w: number; h: number }[]",
+            "name": "array",
+            "value": [
+              {
+                "raw": "{ w: number; h: number }",
+                "name": "object",
+                "value": {
+                  "w": {
+                    "name": "number"
+                  },
+                  "h": {
+                    "name": "number"
+                  }
+                }
+              }
+            ]
+          },
+          "arrayOfPrimitive": {
+            "raw": "string[]",
+            "name": "array",
+            "value": [
+              {
+                "name": "string"
+              }
+            ]
+          },
+          "arrayOfComplexObject": {
+            "raw": "ItemInterface[]",
+            "name": "array",
+            "value": [
+              {
+                "name": "other",
+                "value": "ItemInterface"
+              }
+            ]
+          }
+        }
+      `);
+    });
+    it('interfaces', () => {
+      const input = readFixture('typescript/interfaces.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface GenericInterface<T> {
+          value: T;
+        }
+        interface Props {
+          interface: ItemInterface;
+          genericInterface: GenericInterface<string>;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "interface": {
+            "name": "other",
+            "value": "ItemInterface"
+          },
+          "genericInterface": {
+            "raw": "GenericInterface<string>",
+            "name": "other",
+            "value": "GenericInterface"
+          }
+        }
+      `);
+    });
+    it('records', () => {
+      const input = readFixture('typescript/records.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface Props {
+          recordOfPrimitive: Record<string, number>;
+          recordOfComplexObject: Record<string, ItemInterface>;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "recordOfPrimitive": {
+            "raw": "Record<string, number>",
+            "name": "other",
+            "value": "Record"
+          },
+          "recordOfComplexObject": {
+            "raw": "Record<string, ItemInterface>",
+            "name": "other",
+            "value": "Record"
+          }
+        }
+      `);
+    });
+    it('aliases', () => {
+      const input = readFixture('typescript/aliases.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        type StringAlias = string;
+        type NumberAlias = number;
+        type AliasesIntersection = StringAlias & NumberAlias;
+        type AliasesUnion = StringAlias | NumberAlias;
+        interface GenericAlias<T> {
+          value: T;
+        }
+        interface Props {
+          typeAlias: StringAlias;
+          aliasesIntersection: AliasesIntersection;
+          aliasesUnion: AliasesUnion;
+          genericAlias: GenericAlias<string>;
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "typeAlias": {
+            "name": "string"
+          },
+          "aliasesIntersection": {
+            "raw": "StringAlias & NumberAlias",
+            "name": "intersection",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              }
+            ]
+          },
+          "aliasesUnion": {
+            "raw": "StringAlias | NumberAlias",
+            "name": "union",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              }
+            ]
+          },
+          "genericAlias": {
+            "raw": "GenericAlias<string>",
+            "name": "other",
+            "value": "GenericAlias"
+          }
+        }
+      `);
+    });
+    it('tuples', () => {
+      const input = readFixture('typescript/tuples.tsx');
+      expect(input).toMatchInlineSnapshot(`
+        "import React, { FC } from 'react';
+
+        interface ItemInterface {
+          text: string;
+          value: string;
+        }
+        interface Props {
+          tupleOfPrimitive: [string, number];
+          tupleWithComplexType: [string, ItemInterface];
+        }
+        export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
+        "
+      `);
+      expect(convertTs(input)).toMatchInlineSnapshot(`
+        {
+          "tupleOfPrimitive": {
+            "raw": "[string, number]",
+            "name": "other",
+            "value": "tuple"
+          },
+          "tupleWithComplexType": {
+            "raw": "[string, ItemInterface]",
+            "name": "other",
+            "value": "tuple"
+          }
+        }
+      `);
+    });
+  });
+  describe('PropTypes', () => {
+    it('scalars', () => {
+      const input = readFixture('proptypes/scalars.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          optionalBool: PropTypes.bool,
+          optionalFunc: PropTypes.func,
+          optionalNumber: PropTypes.number,
+          optionalString: PropTypes.string,
+          optionalSymbol: PropTypes.symbol,
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "optionalBool": {
+            "name": "boolean"
+          },
+          "optionalFunc": {
+            "name": "function"
+          },
+          "optionalNumber": {
+            "name": "number"
+          },
+          "optionalString": {
+            "name": "string"
+          },
+          "optionalSymbol": {
+            "name": "symbol"
+          }
+        }
+      `);
+    });
+    it('arrays', () => {
+      const input = readFixture('proptypes/arrays.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          optionalArray: PropTypes.array,
+          arrayOfStrings: PropTypes.arrayOf(PropTypes.string),
+          arrayOfShape: PropTypes.arrayOf(
+            PropTypes.shape({
+              active: PropTypes.bool,
+            })
+          ),
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "optionalArray": {
+            "name": "array"
+          },
+          "arrayOfStrings": {
+            "name": "array",
+            "value": {
+              "name": "string"
+            }
+          },
+          "arrayOfShape": {
+            "name": "array",
+            "value": {
+              "name": "object",
+              "value": {
+                "active": {
+                  "name": "boolean"
+                }
+              }
+            }
+          }
+        }
+      `);
+    });
+    it('enums', () => {
+      const input = readFixture('proptypes/enums.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          oneOfNumber: PropTypes.oneOf([1, 2, 3]),
+          oneOfString: PropTypes.oneOf(['static', 'timed']),
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "oneOfNumber": {
+            "name": "enum",
+            "value": [
+              "1",
+              "2",
+              "3"
+            ]
+          },
+          "oneOfString": {
+            "name": "enum",
+            "value": [
+              "static",
+              "timed"
+            ]
+          }
+        }
+      `);
+    });
+    it('misc', () => {
+      const input = readFixture('proptypes/misc.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          // An object that could be one of many types
+          optionalUnion: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.instanceOf(Object),
+          ]),
+          optionalMessage: PropTypes.instanceOf(Object),
+          // A value of any data type
+          requiredAny: PropTypes.any.isRequired,
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "optionalUnion": {
+            "name": "union",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              },
+              {
+                "name": "other",
+                "value": "instanceOf(Object)"
+              }
+            ]
+          },
+          "optionalMessage": {
+            "name": "other",
+            "value": "instanceOf(Object)"
+          },
+          "requiredAny": {
+            "name": "other",
+            "value": "any"
+          }
+        }
+      `);
+    });
+    it('objects', () => {
+      const input = readFixture('proptypes/objects.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          optionalObject: PropTypes.object,
+          optionalObjectOf: PropTypes.objectOf(PropTypes.number),
+          optionalObjectWithShape: PropTypes.shape({
+            color: PropTypes.string,
+            fontSize: PropTypes.number,
+          }),
+          optionalObjectWithStrictShape: PropTypes.exact({
+            name: PropTypes.string,
+            quantity: PropTypes.number,
+          }),
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "optionalObject": {
+            "name": "object"
+          },
+          "optionalObjectOf": {
+            "name": "objectOf",
+            "value": {
+              "name": "number"
+            }
+          },
+          "optionalObjectWithShape": {
+            "name": "object",
+            "value": {
+              "color": {
+                "name": "string"
+              },
+              "fontSize": {
+                "name": "number"
+              }
+            }
+          },
+          "optionalObjectWithStrictShape": {
+            "name": "object",
+            "value": {
+              "name": {
+                "name": "string"
+              },
+              "quantity": {
+                "name": "number"
+              }
+            }
+          }
+        }
+      `);
+    });
+    it('react', () => {
+      const input = readFixture('proptypes/react.js');
+      expect(input).toMatchInlineSnapshot(`
+        "import React from 'react';
+        import PropTypes from 'prop-types';
+
+        export const Component = (props) => <>JSON.stringify(props)</>;
+        Component.propTypes = {
+          // Anything that can be rendered: numbers, strings, elements or an array
+          // (or fragment) containing these types.
+          optionalNode: PropTypes.node,
+          // A React element.
+          optionalElement: PropTypes.element,
+          // A React element type (ie. MyComponent).
+          optionalElementType: PropTypes.elementType,
+        };
+        "
+      `);
+      expect(convertJs(input)).toMatchInlineSnapshot(`
+        {
+          "optionalNode": {
+            "name": "other",
+            "value": "node"
+          },
+          "optionalElement": {
+            "name": "other",
+            "value": "element"
+          },
+          "optionalElementType": {
+            "name": "other",
+            "value": "elementType"
+          }
+        }
+      `);
+    });
+  });
+});
+
+const readFixture = (fixture: string) =>
+  fs.readFileSync(`${__dirname}/__testfixtures__/${fixture}`).toString();
+
+const transformToModule = (inputCode: string) => {
+  const options = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            esmodules: true,
+          },
+        },
+      ],
+    ],
+  };
+  const { code } = transformSync(inputCode, options);
+  return normalizeNewlines(code);
+};
+
+const annotateWithDocgen = (inputCode: string, filename: string) => {
+  const options = {
+    presets: ['@babel/typescript', '@babel/react'],
+    plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+    babelrc: false,
+    filename,
+  };
+  const { code } = transformSync(inputCode, options);
+  return normalizeNewlines(code);
+};
+
+const convertCommon = (code: string, fileExt: string) => {
+  const docgenPretty = annotateWithDocgen(code, `temp.${fileExt}`);
+  const { Component } = requireFromString(transformToModule(docgenPretty));
+  // eslint-disable-next-line no-underscore-dangle
+  const { props = {} } = Component.__docgenInfo || {};
+  const types = mapValues(props, (prop) => convert(prop));
+  return types;
+};
+
+const convertTs = (code: string) => convertCommon(code, 'tsx');
+
+const convertJs = (code: string) => convertCommon(code, 'js');
diff --git a/addons/docs/src/lib/sbtypes/convert.ts b/addons/docs/src/lib/sbtypes/convert.ts
new file mode 100644
index 000000000000..9b7b0fb4df27
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/convert.ts
@@ -0,0 +1,11 @@
+import { DocgenInfo } from '../docgen/types';
+import { convert as tsConvert, TSType } from './typescript';
+import { convert as propTypesConvert } from './proptypes';
+
+export const convert = (docgenInfo: DocgenInfo) => {
+  const { type, tsType } = docgenInfo;
+  if (type != null) return propTypesConvert(type);
+  if (tsType != null) return tsConvert(tsType as TSType);
+
+  return null;
+};
diff --git a/addons/docs/src/lib/sbtypes/index.ts b/addons/docs/src/lib/sbtypes/index.ts
new file mode 100644
index 000000000000..0ef743fdb7ef
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/index.ts
@@ -0,0 +1,2 @@
+export * from './convert';
+export * from './types';
diff --git a/addons/docs/src/lib/sbtypes/proptypes/convert.ts b/addons/docs/src/lib/sbtypes/proptypes/convert.ts
new file mode 100644
index 000000000000..105e18477826
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/proptypes/convert.ts
@@ -0,0 +1,49 @@
+/* eslint-disable no-case-declarations */
+import mapValues from 'lodash/mapValues';
+import { PTType } from './types';
+import { SBType } from '../types';
+import { trimQuotes } from '../utils';
+
+const SIGNATURE_REGEXP = /^\(.*\) => /;
+
+export const convert = (type: PTType): SBType | any => {
+  const { name, raw, computed, value } = type;
+  const base: any = {};
+  if (typeof raw !== 'undefined') base.raw = raw;
+
+  switch (name) {
+    case 'enum': {
+      const values = computed ? value : value.map((v: PTType) => trimQuotes(v.value));
+      return { ...base, name, value: values };
+    }
+    case 'string':
+    case 'number':
+    case 'symbol':
+      return { ...base, name };
+    case 'func':
+      return { ...base, name: 'function' };
+    case 'bool':
+    case 'boolean':
+      return { ...base, name: 'boolean' };
+    case 'arrayOf':
+    case 'array':
+      return { ...base, name: 'array', value: value && convert(value as PTType) };
+    case 'object':
+      return { ...base, name };
+    case 'objectOf':
+      return { ...base, name, value: convert(value as PTType) };
+    case 'shape':
+    case 'exact':
+      const values = mapValues(value, (field) => convert(field));
+      return { ...base, name: 'object', value: values };
+    case 'union':
+      return { ...base, name: 'union', value: value.map((v: PTType) => convert(v)) };
+    case 'instanceOf':
+    case 'element':
+    case 'elementType':
+    default:
+      const otherVal = value ? `${name}(${value})` : name;
+      const otherName = SIGNATURE_REGEXP.test(name) ? 'function' : 'other';
+      return { ...base, name: otherName, value: otherVal };
+  }
+};
diff --git a/addons/docs/src/lib/sbtypes/proptypes/index.ts b/addons/docs/src/lib/sbtypes/proptypes/index.ts
new file mode 100644
index 000000000000..0ef743fdb7ef
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/proptypes/index.ts
@@ -0,0 +1,2 @@
+export * from './convert';
+export * from './types';
diff --git a/addons/docs/src/lib/sbtypes/proptypes/types.ts b/addons/docs/src/lib/sbtypes/proptypes/types.ts
new file mode 100644
index 000000000000..8f5e2aff2483
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/proptypes/types.ts
@@ -0,0 +1,11 @@
+interface PTBaseType {
+  name: string;
+  description?: string;
+  required?: boolean;
+}
+
+export type PTType = PTBaseType & {
+  value?: any;
+  raw?: string;
+  computed?: boolean;
+};
diff --git a/addons/docs/src/lib/sbtypes/types.ts b/addons/docs/src/lib/sbtypes/types.ts
new file mode 100644
index 000000000000..d0fbed123f3f
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/types.ts
@@ -0,0 +1,42 @@
+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}
+
+export type SBScalarType = SBBaseType & {
+  name: 'boolean' | 'string' | 'number' | 'function';
+};
+
+export type SBArrayType = SBBaseType & {
+  name: 'array';
+  value: SBType;
+};
+export type SBObjectType = SBBaseType & {
+  name: 'object';
+  value: Record<string, SBType>;
+};
+export type SBEnumType = SBBaseType & {
+  name: 'enum';
+  value: (string | number)[];
+};
+export type SBIntersectionType = SBBaseType & {
+  name: 'intersection';
+  value: SBType[];
+};
+export type SBUnionType = SBBaseType & {
+  name: 'union';
+  value: SBType[];
+};
+export type SBOtherType = SBBaseType & {
+  name: 'other';
+  value: string;
+};
+
+export type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
diff --git a/addons/docs/src/lib/sbtypes/typescript/convert.ts b/addons/docs/src/lib/sbtypes/typescript/convert.ts
new file mode 100644
index 000000000000..a53d0d79cbce
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/typescript/convert.ts
@@ -0,0 +1,45 @@
+/* eslint-disable no-case-declarations */
+import { TSType, TSSigType } from './types';
+import { SBType } from '../types';
+
+const convertSig = (type: TSSigType) => {
+  switch (type.type) {
+    case 'function':
+      return { name: 'function' };
+    case 'object':
+      const values: any = {};
+      type.signature.properties.forEach((prop) => {
+        values[prop.key] = convert(prop.value);
+      });
+      return {
+        name: 'object',
+        value: values,
+      };
+    default:
+      throw new Error(`Unknown: ${type}`);
+  }
+};
+
+export const convert = (type: TSType): SBType | void => {
+  const { name, raw } = type;
+  const base: any = {};
+  if (typeof raw !== 'undefined') base.raw = raw;
+  switch (type.name) {
+    case 'string':
+    case 'number':
+    case 'symbol':
+    case 'boolean': {
+      return { ...base, name };
+    }
+    case 'Array': {
+      return { ...base, name: 'array', value: type.elements.map(convert) };
+    }
+    case 'signature':
+      return { ...base, ...convertSig(type) };
+    case 'union':
+    case 'intersection':
+      return { ...base, name, value: type.elements.map(convert) };
+    default:
+      return { ...base, name: 'other', value: name };
+  }
+};
diff --git a/addons/docs/src/lib/sbtypes/typescript/index.ts b/addons/docs/src/lib/sbtypes/typescript/index.ts
new file mode 100644
index 000000000000..0ef743fdb7ef
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/typescript/index.ts
@@ -0,0 +1,2 @@
+export * from './convert';
+export * from './types';
diff --git a/addons/docs/src/lib/sbtypes/typescript/types.ts b/addons/docs/src/lib/sbtypes/typescript/types.ts
new file mode 100644
index 000000000000..dee016d76734
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/typescript/types.ts
@@ -0,0 +1,46 @@
+interface TSBaseType {
+  name: string;
+  type?: string;
+  raw?: string;
+  required?: boolean;
+}
+
+type TSArgType = TSType;
+
+type TSCombinationType = TSBaseType & {
+  name: 'union' | 'intersection';
+  elements: TSType[];
+};
+
+type TSFuncSigType = TSBaseType & {
+  name: 'signature';
+  type: 'function';
+  signature: {
+    arguments: TSArgType[];
+    return: TSType;
+  };
+};
+
+type TSObjectSigType = TSBaseType & {
+  name: 'signature';
+  type: 'object';
+  signature: {
+    properties: {
+      key: string;
+      value: TSType;
+    }[];
+  };
+};
+
+type TSScalarType = TSBaseType & {
+  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
+};
+
+type TSArrayType = TSBaseType & {
+  name: 'Array';
+  elements: TSType[];
+};
+
+export type TSSigType = TSObjectSigType | TSFuncSigType;
+
+export type TSType = TSScalarType | TSCombinationType | TSSigType | TSArrayType;
diff --git a/addons/docs/src/lib/sbtypes/utils.ts b/addons/docs/src/lib/sbtypes/utils.ts
new file mode 100644
index 000000000000..00d59c295b7f
--- /dev/null
+++ b/addons/docs/src/lib/sbtypes/utils.ts
@@ -0,0 +1,2 @@
+const QUOTE_REGEX = /^['"]|['"]$/g;
+export const trimQuotes = (str: string) => str.replace(QUOTE_REGEX, '');
diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts
index 4a0af2fb7a5b..44725a086956 100644
--- a/addons/docs/src/lib/utils.ts
+++ b/addons/docs/src/lib/utils.ts
@@ -14,3 +14,5 @@ export function isTooLongForDefaultValueSummary(value: string): boolean {
 export function createSummaryValue(summary: string, detail?: string): PropSummaryValue {
   return { summary, detail };
 }
+
+export const normalizeNewlines = (string: string) => string.replace(/\\r\\n/g, '\\n');
diff --git a/addons/docs/src/mdx/__testfixtures__/component-args.mdx b/addons/docs/src/mdx/__testfixtures__/component-args.mdx
new file mode 100644
index 000000000000..d9a1c2d8e8b9
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/component-args.mdx
@@ -0,0 +1,10 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }} />
+
+# Args
+
+<Story name="component notes">
+  <Button>Component notes</Button>
+</Story>
diff --git a/addons/docs/src/mdx/__testfixtures__/component-args.output.snapshot b/addons/docs/src/mdx/__testfixtures__/component-args.output.snapshot
new file mode 100644
index 000000000000..b65eeb6621bd
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/component-args.output.snapshot
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin component-args.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = (name) =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta
+        title=\\"Button\\"
+        args={{
+          a: 1,
+          b: 2,
+        }}
+        argTypes={{
+          a: {
+            name: 'A',
+          },
+          b: {
+            name: 'B',
+          },
+        }}
+        mdxType=\\"Meta\\"
+      />
+      <h1>{\`Args\`}</h1>
+      <Story name=\\"component notes\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">Component notes</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const componentNotes = () => <Button>Component notes</Button>;
+componentNotes.storyName = 'component notes';
+componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
+
+const componentMeta = {
+  title: 'Button',
+  args: {
+    a: 1,
+    b: 2,
+  },
+  argTypes: {
+    a: {
+      name: 'A',
+    },
+    b: {
+      name: 'B',
+    },
+  },
+  includeStories: ['componentNotes'],
+};
+
+const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;
diff --git a/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot b/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
index 28cd4ed4165d..c0ce6f96d3fa 100644
--- a/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -33,19 +33,23 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const componentNotes = () => <Button>Component notes</Button>;
-componentNotes.story = {};
-componentNotes.story.name = 'component notes';
-componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>' };
-
-const componentMeta = { title: 'Button', id: 'button-id', includeStories: ['componentNotes'] };
+componentNotes.storyName = 'component notes';
+componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
+
+const componentMeta = {
+  title: 'Button',
+  id: 'button-id',
+  component: Button,
+  includeStories: ['componentNotes'],
+};
 
-const mdxStoryNameToId = { 'component notes': 'button-id--component-notes' };
+const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot b/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
index bded3c333d21..b79d26aa3598 100644
--- a/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -25,7 +25,7 @@ function MDXContent({ components, ...props }) {
       <Meta
         title=\\"Button\\"
         decorators={[
-          storyFn => (
+          (storyFn) => (
             <div
               style={{
                 backgroundColor: 'yellow',
@@ -40,7 +40,7 @@ function MDXContent({ components, ...props }) {
       <h1>{\`Decorated story\`}</h1>
       <Story
         name=\\"one\\"
-        decorators={[storyFn => <div className=\\"local\\">{storyFn()}</div>]}
+        decorators={[(storyFn) => <div className=\\"local\\">{storyFn()}</div>]}
         mdxType=\\"Story\\"
       >
         <Button mdxType=\\"Button\\">One</Button>
@@ -52,15 +52,14 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.story = {};
-one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
-one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
+one.storyName = 'one';
+one.parameters = { storySource: { source: '<Button>One</Button>' } };
+one.decorators = [(storyFn) => <div className=\\"local\\">{storyFn()}</div>];
 
 const componentMeta = {
   title: 'Button',
   decorators: [
-    storyFn => (
+    (storyFn) => (
       <div
         style={{
           backgroundColor: 'yellow',
@@ -73,13 +72,13 @@ const componentMeta = {
   includeStories: ['one'],
 };
 
-const mdxStoryNameToId = { one: 'button--one' };
+const mdxStoryNameToKey = { one: 'one' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot b/addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot
index 59f28b9c4b4b..9b920702c186 100644
--- a/addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -38,17 +38,17 @@ export const __page = () => {
   throw new Error('Docs-only story');
 };
 
-__page.story = { parameters: { docsOnly: true } };
+__page.parameters = { docsOnly: true };
 
 const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/meta-quotes-in-title.output.snapshot b/addons/docs/src/mdx/__testfixtures__/meta-quotes-in-title.output.snapshot
index 64bb0d0c7608..48f6b3857e47 100644
--- a/addons/docs/src/mdx/__testfixtures__/meta-quotes-in-title.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/meta-quotes-in-title.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -32,17 +32,17 @@ export const __page = () => {
   throw new Error('Docs-only story');
 };
 
-__page.story = { parameters: { docsOnly: true } };
+__page.parameters = { docsOnly: true };
 
 const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot b/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
index 39a4e7fab4ae..10a7d2266b03 100644
--- a/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 export const two = 2;
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -40,24 +40,22 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.story = {};
-one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
+one.storyName = 'one';
+one.parameters = { storySource: { source: '<Button>One</Button>' } };
 
 export const helloStory = () => <Button>Hello button</Button>;
-helloStory.story = {};
-helloStory.story.name = 'hello story';
-helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloStory.storyName = 'hello story';
+helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
-const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };
+const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot b/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
index 600811ad42ad..15ef9b0d4cc2 100644
--- a/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -49,15 +49,13 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const componentNotes = () => <Button>Component notes</Button>;
-componentNotes.story = {};
-componentNotes.story.name = 'component notes';
-componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>' };
+componentNotes.storyName = 'component notes';
+componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
 
 export const storyNotes = () => <Button>Story notes</Button>;
-storyNotes.story = {};
-storyNotes.story.name = 'story notes';
-storyNotes.story.parameters = {
-  mdxSource: '<Button>Story notes</Button>',
+storyNotes.storyName = 'story notes';
+storyNotes.parameters = {
+  storySource: { source: '<Button>Story notes</Button>' },
   ...{
     notes: 'story notes',
   },
@@ -68,19 +66,17 @@ const componentMeta = {
   parameters: {
     notes: 'component notes',
   },
+  component: Button,
   includeStories: ['componentNotes', 'storyNotes'],
 };
 
-const mdxStoryNameToId = {
-  'component notes': 'button--component-notes',
-  'story notes': 'button--story-notes',
-};
+const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot b/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
index cc9e55f146d8..17b6711fa28d 100644
--- a/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -53,30 +53,29 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const helloButton = () => <Button>Hello button</Button>;
-helloButton.story = {};
-helloButton.story.name = 'hello button';
-helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloButton.storyName = 'hello button';
+helloButton.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 export const two = () => <Button>Two</Button>;
-two.story = {};
-two.story.name = 'two';
-two.story.parameters = { mdxSource: '<Button>Two</Button>' };
+two.storyName = 'two';
+two.parameters = { storySource: { source: '<Button>Two</Button>' } };
 
 const componentMeta = {
   title: 'Button',
   parameters: {
     notes: 'component notes',
   },
+  component: Button,
   includeStories: ['helloButton', 'two'],
 };
 
-const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };
+const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-args.mdx b/addons/docs/src/mdx/__testfixtures__/story-args.mdx
new file mode 100644
index 000000000000..57a20578d9ec
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/story-args.mdx
@@ -0,0 +1,10 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" />
+
+# Args
+
+<Story name="component notes" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}>
+  <Button>Component notes</Button>
+</Story>
diff --git a/addons/docs/src/mdx/__testfixtures__/story-args.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-args.output.snapshot
new file mode 100644
index 000000000000..ef73decd1034
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/story-args.output.snapshot
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin story-args.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = (name) =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
+      <h1>{\`Args\`}</h1>
+      <Story
+        name=\\"component notes\\"
+        args={{
+          a: 1,
+          b: 2,
+        }}
+        argTypes={{
+          a: {
+            name: 'A',
+          },
+          b: {
+            name: 'B',
+          },
+        }}
+        mdxType=\\"Story\\"
+      >
+        <Button mdxType=\\"Button\\">Component notes</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const componentNotes = () => <Button>Component notes</Button>;
+componentNotes.storyName = 'component notes';
+componentNotes.argTypes = {
+  a: {
+    name: 'A',
+  },
+  b: {
+    name: 'B',
+  },
+};
+componentNotes.args = {
+  a: 1,
+  b: 2,
+};
+componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
+
+const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
+
+const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;
diff --git a/addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot
index ba937af8a3ee..870d3523fb66 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-current.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Story } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -31,13 +31,13 @@ MDXContent.isMDXComponent = true;
 
 const componentMeta = { includeStories: [] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
index a37003d15677..b8029e35582b 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -33,19 +33,18 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const text = () => 'Plain text';
-text.story = {};
-text.story.name = 'text';
-text.story.parameters = { mdxSource: \\"'Plain text'\\" };
+text.storyName = 'text';
+text.parameters = { storySource: { source: \\"'Plain text'\\" } };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
 
-const mdxStoryNameToId = { text: 'text--text' };
+const mdxStoryNameToKey = { text: 'text' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
index a0b17d0ba010..eb138416630f 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -43,42 +43,38 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.story = {};
-one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
+one.storyName = 'one';
+one.parameters = { storySource: { source: '<Button>One</Button>' } };
 
 export const helloStory = () => <Button>Hello button</Button>;
-helloStory.story = {};
-helloStory.story.name = 'hello story';
-helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloStory.storyName = 'hello story';
+helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 export const wPunctuation = () => <Button>with punctuation</Button>;
-wPunctuation.story = {};
-wPunctuation.story.name = 'w/punctuation';
-wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };
+wPunctuation.storyName = 'w/punctuation';
+wPunctuation.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
 
 export const _1FineDay = () => <Button>starts with number</Button>;
-_1FineDay.story = {};
-_1FineDay.story.name = '1 fine day';
-_1FineDay.story.parameters = { mdxSource: '<Button>starts with number</Button>' };
+_1FineDay.storyName = '1 fine day';
+_1FineDay.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
 
 const componentMeta = {
   title: 'Button',
   includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
 };
 
-const mdxStoryNameToId = {
-  one: 'button--one',
-  'hello story': 'button--hello-story',
-  'w/punctuation': 'button--w-punctuation',
-  '1 fine day': 'button--1-fine-day',
+const mdxStoryNameToKey = {
+  one: 'one',
+  'hello story': 'helloStory',
+  'w/punctuation': 'wPunctuation',
+  '1 fine day': '_1FineDay',
 };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
index 6f5d19b494d8..aa80e8d0d73d 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Meta, Story } from '@storybook/addon-docs/blocks';
 export const basicFn = () => <Button mdxType=\\"Button\\" />;
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -37,19 +37,18 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const basic = assertIsFn(basicFn);
-basic.story = {};
-basic.story.name = 'basic';
-basic.story.parameters = { mdxSource: 'basicFn' };
+basic.storyName = 'basic';
+basic.parameters = { storySource: { source: 'basicFn' } };
 
 const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
 
-const mdxStoryNameToId = { basic: 'story-function-var--basic' };
+const mdxStoryNameToKey = { basic: 'basic' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
index 495335bfdcd8..fd2ebef1d98d 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
@@ -4,7 +4,7 @@ exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
 "/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -39,22 +39,23 @@ export const functionStory = () => {
   btn.addEventListener('click', action('Click'));
   return btn;
 };
-functionStory.story = {};
-functionStory.story.name = 'function';
-functionStory.story.parameters = {
-  mdxSource:
-    \\"() => {\\\\n  const btn = document.createElement('button');\\\\n  btn.innerHTML = 'Hello Button';\\\\n  btn.addEventListener('click', action('Click'));\\\\n  return btn;\\\\n}\\",
+functionStory.storyName = 'function';
+functionStory.parameters = {
+  storySource: {
+    source:
+      \\"() => {\\\\n  const btn = document.createElement('button');\\\\n  btn.innerHTML = 'Hello Button';\\\\n  btn.addEventListener('click', action('Click'));\\\\n  return btn;\\\\n}\\",
+  },
 };
 
 const componentMeta = { includeStories: ['functionStory'] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = { function: 'functionStory' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-multiple-children.mdx b/addons/docs/src/mdx/__testfixtures__/story-multiple-children.mdx
new file mode 100644
index 000000000000..02e3ebed2453
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/story-multiple-children.mdx
@@ -0,0 +1,10 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Multiple" />
+
+# Multiple children
+
+<Story  name="multiple children">
+   <p>Hello Child #1</p>
+   <p>Hello Child #2</p>
+</Story>
diff --git a/addons/docs/src/mdx/__testfixtures__/story-multiple-children.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-multiple-children.output.snapshot
new file mode 100644
index 000000000000..e760b63f1e60
--- /dev/null
+++ b/addons/docs/src/mdx/__testfixtures__/story-multiple-children.output.snapshot
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin story-multiple-children.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = (name) =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Multiple\\" mdxType=\\"Meta\\" />
+      <h1>{\`Multiple children\`}</h1>
+      <Story name=\\"multiple children\\" mdxType=\\"Story\\">
+        <p>Hello Child #1</p>
+        <p>Hello Child #2</p>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const multipleChildren = () => (
+  <>
+    <p>Hello Child #1</p>
+    <p>Hello Child #2</p>
+  </>
+);
+multipleChildren.storyName = 'multiple children';
+multipleChildren.parameters = {
+  storySource: { source: '<p>Hello Child #1</p>\\\\n<p>Hello Child #2</p>' },
+};
+
+const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };
+
+const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;
diff --git a/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
index bcd7e17e4b99..aab6752d89d0 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
@@ -8,7 +8,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
 import { Welcome, Button } from '@storybook/angular/demo';
 import { linkTo } from '@storybook/addon-links';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -51,22 +51,23 @@ export const toStorybook = () => ({
     declarations: [Welcome],
   },
 });
-toStorybook.story = {};
-toStorybook.story.name = 'to storybook';
-toStorybook.story.parameters = {
-  mdxSource:
-    '{\\\\n  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n  props: {\\\\n    showApp: linkTo(\\\\'Button\\\\')\\\\n  },\\\\n  moduleMetadata: {\\\\n    declarations: [Welcome]\\\\n  }\\\\n}',
+toStorybook.storyName = 'to storybook';
+toStorybook.parameters = {
+  storySource: {
+    source:
+      '{\\\\n  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n  props: {\\\\n    showApp: linkTo(\\\\'Button\\\\')\\\\n  },\\\\n  moduleMetadata: {\\\\n    declarations: [Welcome]\\\\n  }\\\\n}',
+  },
 };
 
 const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
 
-const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
+const mdxStoryNameToKey = { 'to storybook': 'toStorybook' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot
index a00522b285b8..831e749ecaa7 100644
--- a/addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/story-references.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Story } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -31,13 +31,13 @@ MDXContent.isMDXComponent = true;
 
 const componentMeta = { includeStories: [] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/title-template-string.output.snapshot b/addons/docs/src/mdx/__testfixtures__/title-template-string.output.snapshot
index b6f807d4daf8..bf2d68da5617 100644
--- a/addons/docs/src/mdx/__testfixtures__/title-template-string.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/title-template-string.output.snapshot
@@ -7,7 +7,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 import { Meta, Story } from '@storybook/addon-docs/blocks';
 import { titleFunction } from '../title-generators';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -33,17 +33,17 @@ export const __page = () => {
   throw new Error('Docs-only story');
 };
 
-__page.story = { parameters: { docsOnly: true } };
+__page.parameters = { docsOnly: true };
 
 const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot b/addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot
index 854a773b70cb..b9b591c2c0c0 100644
--- a/addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot
+++ b/addons/docs/src/mdx/__testfixtures__/vanilla.output.snapshot
@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 
-const makeShortcode = name =>
+const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
       'Component ' +
@@ -32,13 +32,13 @@ MDXContent.isMDXComponent = true;
 
 const componentMeta = { includeStories: [] };
 
-const mdxStoryNameToId = {};
+const mdxStoryNameToKey = {};
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
   page: () => (
-    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
       <MDXContent />
     </AddContext>
   ),
diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js
index 5c2f788143cc..be7d6952ba29 100644
--- a/addons/docs/src/mdx/mdx-compiler-plugin.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.js
@@ -3,7 +3,6 @@ const parser = require('@babel/parser');
 const generate = require('@babel/generator').default;
 const camelCase = require('lodash/camelCase');
 const jsStringEscape = require('js-string-escape');
-const { toId, storyNameFromExport } = require('@storybook/csf');
 
 // Generate the MDX as is, but append named exports for every
 // story in the contents
@@ -14,14 +13,14 @@ const META_REGEX = /^<Meta[\s>]/;
 const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
 
 function getAttr(elt, what) {
-  const attr = elt.attributes.find(n => n.name.name === what);
+  const attr = elt.attributes.find((n) => n.name.name === what);
   return attr && attr.value;
 }
 
-const isReserved = name => RESERVED.exec(name);
-const startsWithNumber = name => /^\d/.exec(name);
+const isReserved = (name) => RESERVED.exec(name);
+const startsWithNumber = (name) => /^\d/.exec(name);
 
-const sanitizeName = name => {
+const sanitizeName = (name) => {
   let key = camelCase(name);
   if (startsWithNumber(key)) {
     key = `_${key}`;
@@ -33,6 +32,15 @@ const sanitizeName = name => {
 
 const getStoryKey = (name, counter) => (name ? sanitizeName(name) : `story${counter}`);
 
+function genAttribute(key, element) {
+  const value = getAttr(element, key);
+  if (value && value.expression) {
+    const { code } = generate(value.expression, {});
+    return code;
+  }
+  return undefined;
+}
+
 function genStoryExport(ast, context) {
   let storyName = getAttr(ast.openingElement, 'name');
   let storyId = getAttr(ast.openingElement, 'id');
@@ -53,61 +61,73 @@ function genStoryExport(ast, context) {
   const statements = [];
   const storyKey = getStoryKey(storyName, context.counter);
 
-  let body = ast.children.find(n => n.type !== 'JSXText');
+  const bodyNodes = ast.children.filter((n) => n.type !== 'JSXText');
   let storyCode = null;
-
-  if (!body) {
+  let storyVal = null;
+  if (!bodyNodes.length) {
     // plain text node
     const { code } = generate(ast.children[0], {});
     storyCode = `'${code}'`;
+    storyVal = `() => (
+      ${storyCode}
+    )`;
   } else {
-    if (body.type === 'JSXExpressionContainer') {
-      // FIXME: handle fragments
-      body = body.expression;
+    const bodyParts = bodyNodes.map((bodyNode) => {
+      const body = bodyNode.type === 'JSXExpressionContainer' ? bodyNode.expression : bodyNode;
+      const { code } = generate(body, {});
+      return { code, body };
+    });
+    // if we have more than two children
+    // 1. Add line breaks
+    // 2. Enclose in <> ... </>
+    storyCode = bodyParts.map(({ code }) => code).join('\n');
+    const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
+    // keep track if an indentifier or function call
+    // avoid breaking change for 5.3
+    switch (bodyParts.length === 1 && bodyParts[0].body.type) {
+      // We don't know what type the identifier is, but this code
+      // assumes it's a function from CSF. Let's see who complains!
+      case 'Identifier':
+        storyVal = `assertIsFn(${storyCode})`;
+        break;
+      case 'ArrowFunctionExpression':
+        storyVal = `(${storyCode})`;
+        break;
+      default:
+        storyVal = `() => (
+          ${storyReactCode}
+        )`;
+        break;
     }
-    const { code } = generate(body, {});
-    storyCode = code;
-  }
-
-  let storyVal = null;
-  switch (body && body.type) {
-    // We don't know what type the identifier is, but this code
-    // assumes it's a function from CSF. Let's see who complains!
-    case 'Identifier':
-      storyVal = `assertIsFn(${storyCode})`;
-      break;
-    case 'ArrowFunctionExpression':
-      storyVal = `(${storyCode})`;
-      break;
-    default:
-      storyVal = `() => (
-        ${storyCode}
-      )`;
-      break;
   }
 
   statements.push(`export const ${storyKey} = ${storyVal};`);
-  statements.push(`${storyKey}.story = {};`);
 
   // always preserve the name, since CSF exports can get modified by displayName
-  statements.push(`${storyKey}.story.name = '${storyName}';`);
+  statements.push(`${storyKey}.storyName = '${storyName}';`);
+
+  const argTypes = genAttribute('argTypes', ast.openingElement);
+  if (argTypes) statements.push(`${storyKey}.argTypes = ${argTypes};`);
+
+  const args = genAttribute('args', ast.openingElement);
+  if (args) statements.push(`${storyKey}.args = ${args};`);
 
   let parameters = getAttr(ast.openingElement, 'parameters');
   parameters = parameters && parameters.expression;
   const source = jsStringEscape(storyCode);
+  const sourceParam = `storySource: { source: '${source}' }`;
   if (parameters) {
     const { code: params } = generate(parameters, {});
-    // FIXME: hack in the story's source as a parameter
-    statements.push(`${storyKey}.story.parameters = { mdxSource: '${source}', ...${params} };`);
+    statements.push(`${storyKey}.parameters = { ${sourceParam}, ...${params} };`);
   } else {
-    statements.push(`${storyKey}.story.parameters = { mdxSource: '${source}' };`);
+    statements.push(`${storyKey}.parameters = { ${sourceParam} };`);
   }
 
   let decorators = getAttr(ast.openingElement, 'decorators');
   decorators = decorators && decorators.expression;
   if (decorators) {
     const { code: decos } = generate(decorators, {});
-    statements.push(`${storyKey}.story.decorators = ${decos};`);
+    statements.push(`${storyKey}.decorators = ${decos};`);
   }
 
   // eslint-disable-next-line no-param-reassign
@@ -139,8 +159,6 @@ function genPreviewExports(ast, context) {
 function genMeta(ast, options) {
   let title = getAttr(ast.openingElement, 'title');
   let id = getAttr(ast.openingElement, 'id');
-  let parameters = getAttr(ast.openingElement, 'parameters');
-  let decorators = getAttr(ast.openingElement, 'decorators');
   if (title) {
     if (title.type === 'StringLiteral') {
       title = "'".concat(jsStringEscape(title.value), "'");
@@ -159,19 +177,22 @@ function genMeta(ast, options) {
     }
   }
   id = id && `'${id.value}'`;
-  if (parameters && parameters.expression) {
-    const { code: params } = generate(parameters.expression, {});
-    parameters = params;
-  }
-  if (decorators && decorators.expression) {
-    const { code: decos } = generate(decorators.expression, {});
-    decorators = decos;
-  }
+  const parameters = genAttribute('parameters', ast.openingElement);
+  const decorators = genAttribute('decorators', ast.openingElement);
+  const component = genAttribute('component', ast.openingElement);
+  const subcomponents = genAttribute('subcomponents', ast.openingElement);
+  const args = genAttribute('args', ast.openingElement);
+  const argTypes = genAttribute('argTypes', ast.openingElement);
+
   return {
     title,
     id,
     parameters,
     decorators,
+    component,
+    subcomponents,
+    args,
+    argTypes,
   };
 }
 
@@ -198,13 +219,13 @@ function getExports(node, counter, options) {
   return null;
 }
 
-// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
-// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
+// insert `mdxStoryNameToKey` and `mdxComponentMeta` into the context so that we
+// can reconstruct the Story ID dynamically from the `name` at render time
 const wrapperJs = `
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
   ...(componentMeta.parameters.docs || {}),
-  page: () => <AddContext mdxStoryNameToId={mdxStoryNameToId}><MDXContent /></AddContext>,
+  page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}><MDXContent /></AddContext>,
 };
 `.trim();
 
@@ -222,18 +243,18 @@ function stringifyMeta(meta) {
   return result;
 }
 
-const hasStoryChild = node => {
+const hasStoryChild = (node) => {
   if (node.openingElement && node.openingElement.name.name === 'Story') {
     return node;
   }
   if (node.children && node.children.length > 0) {
-    return node.children.find(child => hasStoryChild(child));
+    return node.children.find((child) => hasStoryChild(child));
   }
   return null;
 };
 
 function extractExports(node, options) {
-  node.children.forEach(child => {
+  node.children.forEach((child) => {
     if (child.type === 'jsx') {
       try {
         const ast = parser.parseExpression(child.value, { plugins: ['jsx'] });
@@ -255,7 +276,7 @@ function extractExports(node, options) {
               value: encodeURI(
                 ast.children
                   .map(
-                    el =>
+                    (el) =>
                       generate(el, {
                         quotes: 'double',
                       }).code
@@ -293,7 +314,7 @@ function extractExports(node, options) {
     counter: 0,
     storyNameToKey: {},
   };
-  node.children.forEach(n => {
+  node.children.forEach((n) => {
     const exports = getExports(n, context, options);
     if (exports) {
       const { stories, meta } = exports;
@@ -314,7 +335,7 @@ function extractExports(node, options) {
   if (metaExport) {
     if (!storyExports.length) {
       storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');
-      storyExports.push('__page.story = { parameters: { docsOnly: true } };');
+      storyExports.push('__page.parameters = { docsOnly: true };');
       includeStories.push('__page');
     }
   } else {
@@ -322,23 +343,12 @@ function extractExports(node, options) {
   }
   metaExport.includeStories = JSON.stringify(includeStories);
 
-  const { title, id: componentId } = metaExport;
-  const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce(
-    (acc, [storyName, storyKey]) => {
-      if (title) {
-        acc[storyName] = toId(componentId || title, storyNameFromExport(storyKey));
-      }
-      return acc;
-    },
-    {}
-  );
-
   const fullJsx = [
     'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
     defaultJsx,
     ...storyExports,
     `const componentMeta = ${stringifyMeta(metaExport)};`,
-    `const mdxStoryNameToId = ${JSON.stringify(mdxStoryNameToId)};`,
+    `const mdxStoryNameToKey = ${JSON.stringify(context.storyNameToKey)};`,
     wrapperJs,
     'export default componentMeta;',
   ].join('\n\n');
@@ -348,7 +358,7 @@ function extractExports(node, options) {
 
 function createCompiler(mdxOptions) {
   return function compiler(options = {}) {
-    this.Compiler = tree => extractExports(tree, options, mdxOptions);
+    this.Compiler = (tree) => extractExports(tree, options, mdxOptions);
   };
 }
 
diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.test.js b/addons/docs/src/mdx/mdx-compiler-plugin.test.js
index 5945010318bc..0a01ee227d3e 100644
--- a/addons/docs/src/mdx/mdx-compiler-plugin.test.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.test.js
@@ -28,9 +28,9 @@ const inputRegExp = /\.mdx$/;
 describe('docs-mdx-compiler-plugin', () => {
   const transformFixturesDir = path.join(__dirname, '__testfixtures__');
   fs.readdirSync(transformFixturesDir)
-    .filter(fileName => inputRegExp.test(fileName))
-    .filter(fileName => fileName !== 'story-missing-props.mdx')
-    .forEach(fixtureFile => {
+    .filter((fileName) => inputRegExp.test(fileName))
+    .filter((fileName) => fileName !== 'story-missing-props.mdx')
+    .forEach((fixtureFile) => {
       it(fixtureFile, async () => {
         const inputPath = path.join(transformFixturesDir, fixtureFile);
         const code = await generate(inputPath);
diff --git a/addons/docs/src/mdx/title-generators.js b/addons/docs/src/mdx/title-generators.js
index 6f4c8b526ef2..ddab959fab21 100644
--- a/addons/docs/src/mdx/title-generators.js
+++ b/addons/docs/src/mdx/title-generators.js
@@ -1 +1 @@
-export const titleFunction = title => `Addons/Docs/${title}`;
+export const titleFunction = (title) => `Addons/Docs/${title}`;
diff --git a/addons/docs/src/preset.ts b/addons/docs/src/preset.ts
index c41a4752e6d7..e7348adfb3a4 100644
--- a/addons/docs/src/preset.ts
+++ b/addons/docs/src/preset.ts
@@ -1,57 +1,12 @@
-import * as commonPreset from './frameworks/common/preset';
-
-// Map a framework to a preset file that gets executed
-type Preset = any;
-type FrameworkPresetMapper = (framework: string) => string | void;
-
-const PRESET_METHODS = [
-  'babel',
-  'babelDefault',
-  'managerBabel',
-  'webpack',
-  'webpackFinal',
-  'managerWebpack',
-  'addons',
-  'entries',
-  'config',
-];
-
-function getFrameworkPreset(frameworkPresetFile: string): Preset {
-  // eslint-disable-next-line import/no-dynamic-require, global-require
-  return require(frameworkPresetFile);
-}
-
-// Create a composite preset that applies the base preset &
-// appends any framework-specific extensions as needed
-function withFrameworkExtensions(basePreset: Preset, mapper: FrameworkPresetMapper): Preset {
-  const extended: Preset = {};
-  PRESET_METHODS.forEach(method => {
-    extended[method] = (existing: any, options: any) => {
-      let updated = existing;
-
-      const baseMethod = basePreset[method];
-      if (baseMethod) {
-        updated = baseMethod(updated, options);
-      }
-
-      const frameworkPresetFile = mapper(options.framework);
-      if (frameworkPresetFile) {
-        const frameworkPreset = getFrameworkPreset(frameworkPresetFile);
-        const frameworkMethod = frameworkPreset[method];
-        if (frameworkMethod) updated = frameworkMethod(updated, options);
-      }
-
-      return updated;
-    };
-  });
-  return extended;
-}
-
-module.exports = withFrameworkExtensions(commonPreset, framework => {
+const getFrameworkPresets = (framework: string) => {
   try {
-    return require.resolve(`./frameworks/${framework}/preset`) as string;
+    return [require.resolve(`./frameworks/${framework}/preset`)];
   } catch (err) {
     // there is no custom config for the user's framework, do nothing
-    return null;
+    return [];
   }
-});
+};
+
+module.exports = ({ framework }: any) => {
+  return [require.resolve('./frameworks/common/preset'), ...getFrameworkPresets(framework)];
+};
diff --git a/addons/docs/src/register.ts b/addons/docs/src/register.ts
index e241774a707c..b36d05086ddb 100644
--- a/addons/docs/src/register.ts
+++ b/addons/docs/src/register.ts
@@ -1,11 +1,11 @@
 import addons, { types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID } from './shared';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.TAB,
     title: 'Docs',
-    route: ({ storyId }) => `/docs/${storyId}`,
+    route: ({ storyId, refId }) => (refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`),
     match: ({ viewMode }) => viewMode === 'docs',
     render: () => null,
   });
diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts
index dc9928da3997..91ec717a4f9c 100644
--- a/addons/docs/src/typings.d.ts
+++ b/addons/docs/src/typings.d.ts
@@ -1,8 +1,9 @@
 declare module '@mdx-js/react';
-declare module '@storybook/addon-docs/mdx-compiler-plugin';
-declare module '@storybook/addon-docs/blocks';
 declare module 'global';
-declare module 'react-is';
 declare module '@egoist/vue-to-react';
-declare module "remark-slug";
-declare module "remark-external-links";
+declare module 'remark-slug';
+declare module 'remark-external-links';
+declare module 'babel-plugin-react-docgen';
+declare module 'require-from-string';
+declare module 'styled-components';
+declare module 'acorn-jsx';
diff --git a/addons/docs/tsconfig.json b/addons/docs/tsconfig.json
index eac4a67bed71..793e61d30a1e 100644
--- a/addons/docs/tsconfig.json
+++ b/addons/docs/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env", "jest"]
+    "types": ["webpack-env", "jest", "node"]
   },
   "include": ["src/**/*"],
   "exclude": ["src/**.test.ts"]
diff --git a/addons/docs/vue/README.md b/addons/docs/vue/README.md
index 0a322acaeb23..925e4c7a3f28 100644
--- a/addons/docs/vue/README.md
+++ b/addons/docs/vue/README.md
@@ -2,16 +2,20 @@
   <img src="../docs/media/vue-hero.png" width="100%" />
 </center>
 
-# Storybook Docs for Vue
+<h1>Storybook Docs for Vue</h1>
+
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
 
 To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Vue specifics, read on!
 
 - [Installation](#installation)
+- [Preset options](#preset-options)
 - [DocsPage](#docspage)
+- [Props tables](#props-tables)
 - [MDX](#mdx)
-- [Inline stories](#inline-stories)
+- [Inline Stories](#inline-stories)
 - [More resources](#more-resources)
 
 ## Installation
@@ -22,19 +26,46 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs@next
 ```
 
-Then add the following to your `.storybook/main.js` presets:
+Then add the following to your `.storybook/main.js` addons:
 
 ```js
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
+  addons: ['@storybook/addon-docs'],
 };
 ```
 
+## Preset options
+
+The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
+
+```js
+const path = require('path');
+
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            '@': path.resolve(__dirname, '../'),
+          },
+        },
+      },
+    },
+  ],
+};
+```
+
+The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-docgen-api`'s docs](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#options-docgenoptions) for available configuration options.
+
 ## DocsPage
 
 When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
 
-Props tables for your components requires a few more steps. Docs for Vue relies on [Addon-vue-info](https://github.com/pocka/storybook-addon-vue-info)'s loader. It supports `props`, `events`, and `slots` as first class prop types.
+## Props tables
+
+Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
 
 Finally, be sure to fill in the `component` field in your story metadata:
 
@@ -72,7 +103,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
 
@@ -104,7 +135,7 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
 
 Storybook Docs renders all Vue stories inside IFrames, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter).
 
-Starting in 5.3, you can also render stories inline, and in 6.0 this will become the default behavior. To render inline, update `.storybook/preview.js`:
+Starting in 5.3, you can also render stories inline, and in 6.0 this has become the default behavior. To render inline, update `.storybook/preview.js`:
 
 ```js
 import { addParameters } from '@storybook/vue';
@@ -120,7 +151,6 @@ addParameters({
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
-- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/vue/preset.js b/addons/docs/vue/preset.js
deleted file mode 100644
index 09cb6c49e5e5..000000000000
--- a/addons/docs/vue/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/makePreset').default('vue');
diff --git a/addons/docs/web-components/README.md b/addons/docs/web-components/README.md
index 9713f42e1fed..0f5cfb8c6410 100644
--- a/addons/docs/web-components/README.md
+++ b/addons/docs/web-components/README.md
@@ -1,4 +1,9 @@
-# Storybook Docs for Web Components
+<h1>Storybook Docs for Web Components</h1>
+
+- [Installation](#installation)
+- [Props tables](#props-tables)
+- [Stories not inline](#stories-not-inline)
+- [More resources](#more-resources)
 
 ## Installation
 
@@ -22,9 +27,9 @@
   };
   ```
 
-### custom-elements.json
+## Props tables
 
-In order to get documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
+In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
 
 You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
 
@@ -35,7 +40,16 @@ Known analyzers that output `custom-elements.json`:
 - [stenciljs](https://stenciljs.com/)
   - Supports Stencil (but does not have all metadata)
 
-It basically looks like this:
+To generate this file with Stencil, add `docs-vscode` to outputTargets in `stencil.config.ts`:
+
+```
+{
+  type: 'docs-vscode',
+  file: 'custom-elements.json'
+},
+```
+
+The file looks something like this:
 
 ```json
 {
@@ -83,3 +97,11 @@ or add it to individual stories.
 ```js
 <Story inline={false} />
 ```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/web-components/preset.js b/addons/docs/web-components/preset.js
deleted file mode 100644
index bb92eefa1c08..000000000000
--- a/addons/docs/web-components/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/makePreset').default('web-components');
diff --git a/addons/essentials/README.md b/addons/essentials/README.md
index 1a09f22a8dbe..f89346d497da 100644
--- a/addons/essentials/README.md
+++ b/addons/essentials/README.md
@@ -8,7 +8,9 @@ Each addon is documented and maintained by the core team and will be upgraded al
 
 Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
 
+- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
 - [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
+- [Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs)
 - [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
 
 ## Installation
@@ -23,7 +25,7 @@ And then add the following line to your `.storybook/main.js`:
 
 ```js
 module.exports = {
-  presets: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials'],
 };
 ```
 
@@ -31,7 +33,7 @@ module.exports = {
 
 Essentials is "zero config." That means that comes with a recommended configuration out of the box.
 
-If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `package.json` on startup and if detects one of its addons is already installed, it will skip that addon's configuration entirely.
+If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.js` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
 
 ## Disabling addons
 
@@ -39,8 +41,8 @@ Yuu can disable any of Essential's addons using the following configuration sche
 
 ```js
 module.exports = {
-  presets: [{
-    name: '@storybook/addon-essentials'],
+  addons: [{
+    name: '@storybook/addon-essentials',
     options: {
       <addon-key>: false,
     }
@@ -48,4 +50,4 @@ module.exports = {
 };
 ```
 
-Valid addon keys include: `backgrounds`, `viewport`
+Valid addon keys include: `actions`, `backgrounds`, `docs`, `viewport`.
diff --git a/addons/essentials/package.json b/addons/essentials/package.json
index ffe5ceaf0984..c5cf193a3be2 100644
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -17,33 +17,47 @@
     "directory": "addons/essentials"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "README.md"
+    "README.md",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/node-logger": "5.3.0-rc.0",
-    "ts-dedent": "^1.1.0"
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "core-js": "^3.0.1",
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.11"
+    "@types/jest": "^25.1.1",
+    "@types/webpack-env": "^1.15.2"
   },
   "peerDependencies": {
     "babel-loader": "^8.0.0",
     "react": "^16.8.0",
+    "react-dom": "*",
     "react-is": "^16.8.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts
index fc9dbd0f1255..d95fb32acf88 100644
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@@ -1,32 +1,40 @@
-import fs from 'fs';
+import path from 'path';
 import { logger } from '@storybook/node-logger';
 
-type PresetOptions = {
+interface PresetOptions {
+  configDir?: string;
   backgrounds?: any;
   viewport?: any;
-};
+  docs?: any;
+}
 
-let packageJson: any = {};
-if (fs.existsSync('./package.json')) {
+const requireMain = (configDir: string) => {
+  let main = {};
+  const mainFile = path.join(process.cwd(), configDir, 'main');
   try {
-    packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
+    // eslint-disable-next-line global-require,import/no-dynamic-require
+    main = require(mainFile);
   } catch (err) {
-    logger.error(`Error reading package.json: ${err.message}`);
+    logger.warn(`Unable to find main.js: ${mainFile}`);
   }
-}
-
-const isInstalled = (addon: string) => {
-  const { dependencies, devDependencies } = packageJson;
-  return (dependencies && dependencies[addon]) || (devDependencies && devDependencies[addon]);
+  return main;
 };
 
-const makeAddon = (key: string) => `@storybook/addon-${key}`;
+export function addons(options: PresetOptions = {}) {
+  const checkInstalled = (addon: string, main: any) => {
+    const existingAddon = main.addons?.find((entry: string | { name: string }) => {
+      const name = typeof entry === 'string' ? entry : entry.name;
+      return name?.startsWith(addon);
+    });
+    if (existingAddon) {
+      logger.warn(`Found existing addon ${JSON.stringify(existingAddon)}, skipping.`);
+    }
+    return !!existingAddon;
+  };
 
-export function addons(entry: any[] = [], options: PresetOptions = {}) {
-  const registerAddons = ['backgrounds', 'viewport']
-    .filter(key => (options as any)[key] !== false)
-    .map(key => makeAddon(key))
-    .filter(addon => !isInstalled(addon))
-    .map(addon => `${addon}/register`);
-  return [...entry, ...registerAddons];
+  const main = requireMain(options.configDir);
+  return ['actions', 'docs', 'backgrounds', 'viewport']
+    .filter((key) => (options as any)[key] !== false)
+    .map((key) => `@storybook/addon-${key}`)
+    .filter((addon) => !checkInstalled(addon, main));
 }
diff --git a/addons/essentials/tsconfig.json b/addons/essentials/tsconfig.json
index eac4a67bed71..793e61d30a1e 100644
--- a/addons/essentials/tsconfig.json
+++ b/addons/essentials/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env", "jest"]
+    "types": ["webpack-env", "jest", "node"]
   },
   "include": ["src/**/*"],
   "exclude": ["src/**.test.ts"]
diff --git a/addons/events/README.md b/addons/events/README.md
index bf2db1622938..1b7278e10943 100644
--- a/addons/events/README.md
+++ b/addons/events/README.md
@@ -9,14 +9,14 @@ This [storybook](https://storybooks.js.org) ([source](https://github.com/storybo
 ### Getting Started
 
 ```sh
-npm i --save-dev @storybook/addon-events
+npm i --save-dev @storybook/addon-events event-emitter
 ```
 
 within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-events/register']
+  addons: ['@storybook/addon-events']
 }
 ```
 
@@ -24,13 +24,13 @@ Then write your stories like this:
 
 ```js
 import withEvents from '@storybook/addon-events';
-import EventEmiter from 'event-emiter';
+import EventEmitter from 'event-emitter';
 
 import Logger from './Logger';
 import * as EVENTS from './events';
 
-const emiter = new EventEmiter();
-const emit = emiter.emit.bind(emiter);
+const emitter = new EventEmitter();
+const emit = emitter.emit.bind(emitter);
 
 export default {
   title: 'withEvents',
@@ -89,6 +89,6 @@ export default {
 }
 
 export const defaultView = () => (
-  <Logger emiter={emiter} />
+  <Logger emitter={emitter} />
 );
 ```
diff --git a/addons/events/package.json b/addons/events/package.json
index 307a205b75fe..1bbbadef3a12 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -18,38 +18,49 @@
     "directory": "addons/events"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "format-json": "^1.0.3",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-textarea-autosize": "^7.0.4",
-    "util-deprecate": "^1.0.2"
+    "react-textarea-autosize": "^8.0.1",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.2"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/events/src/components/Event.tsx b/addons/events/src/components/Event.tsx
index 43759c0c3180..e1001465471d 100644
--- a/addons/events/src/components/Event.tsx
+++ b/addons/events/src/components/Event.tsx
@@ -1,5 +1,4 @@
 import React, { ChangeEvent, Component } from 'react';
-import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import isEqual from 'lodash/isEqual';
 
@@ -109,19 +108,7 @@ interface ItemState {
 }
 
 class Item extends Component<ItemProps, ItemState> {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    onEmit: PropTypes.func.isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    payload: PropTypes.any,
-  };
-
-  static defaultProps = {
-    payload: {},
-  };
-
-  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
+  static getDerivedStateFromProps = ({ payload = {} }: ItemProps, { prevPayload }: ItemState) => {
     if (!isEqual(payload, prevPayload)) {
       const payloadString = json.plain(payload);
       const refinedPayload = getJSONFromString(payloadString);
@@ -155,7 +142,7 @@ class Item extends Component<ItemProps, ItemState> {
       newState.failed = true;
     }
 
-    this.setState(state => ({ ...state, ...newState }));
+    this.setState((state) => ({ ...state, ...newState }));
   };
 
   onEmitClick = () => {
diff --git a/addons/events/src/components/Panel.tsx b/addons/events/src/components/Panel.tsx
index ed1ff169fde5..29ddc47705a0 100644
--- a/addons/events/src/components/Panel.tsx
+++ b/addons/events/src/components/Panel.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 import { API } from '@storybook/api';
@@ -24,15 +23,6 @@ interface EventsPanelState {
 }
 
 export default class EventsPanel extends Component<EventsPanelProps, EventsPanelState> {
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    api: PropTypes.shape({
-      emit: PropTypes.func,
-      off: PropTypes.func,
-      on: PropTypes.func,
-    }).isRequired,
-  };
-
   state: EventsPanelState = {
     events: [],
   };
@@ -63,7 +53,7 @@ export default class EventsPanel extends Component<EventsPanelProps, EventsPanel
     const { active } = this.props;
     return active ? (
       <Wrapper>
-        {events.map(event => (
+        {events.map((event) => (
           <Event key={event.name} {...event} onEmit={this.onEmit} />
         ))}
       </Wrapper>
diff --git a/addons/events/src/deprecated.js b/addons/events/src/deprecated.js
deleted file mode 100644
index 68b210effff7..000000000000
--- a/addons/events/src/deprecated.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// TODO remove in 6.0
-import addons from '@storybook/addons';
-import CoreEvents from '@storybook/core-events';
-import deprecate from 'util-deprecate';
-
-import { EVENTS } from './constants';
-
-let prevEvents;
-let currentEmit;
-
-const onEmit = event => {
-  currentEmit(event.name, event.payload);
-};
-
-const subscription = () => {
-  const channel = addons.getChannel();
-  channel.on(EVENTS.EMIT, onEmit);
-  return () => {
-    prevEvents = null;
-    addons.getChannel().emit(EVENTS.ADD, []);
-    channel.removeListener(EVENTS.EMIT, onEmit);
-  };
-};
-
-const addEvents = ({ emit, events }) => {
-  if (prevEvents !== events) {
-    addons.getChannel().emit(EVENTS.ADD, events);
-    prevEvents = events;
-  }
-  currentEmit = emit;
-  addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
-};
-
-export const WithEvents = deprecate(({ children, ...options }) => {
-  addEvents(options);
-  return children;
-}, `<WithEvents> usage is deprecated, use .addDecorator(withEvents({emit, events})) instead`);
diff --git a/addons/events/src/index.ts b/addons/events/src/index.ts
index db09b493cad1..9eb0633e7025 100644
--- a/addons/events/src/index.ts
+++ b/addons/events/src/index.ts
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import addons from '@storybook/addons';
 import CoreEvents from '@storybook/core-events';
-import deprecate from 'util-deprecate';
 
 import { EVENTS } from './constants';
 
@@ -49,15 +48,7 @@ interface Options {
   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: Options) => {
-  if (options.children) {
-    return WithEvents(options);
-  }
   return (storyFn: () => ReactNode) => {
     addEvents(options);
     return storyFn();
diff --git a/addons/events/src/manager.tsx b/addons/events/src/manager.tsx
index 6cc77ebfdadc..c5d543fe7fd2 100644
--- a/addons/events/src/manager.tsx
+++ b/addons/events/src/manager.tsx
@@ -5,7 +5,7 @@ import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 export function register() {
-  addons.register(ADDON_ID, api => {
+  addons.register(ADDON_ID, (api) => {
     addons.addPanel(PANEL_ID, {
       title: 'Events',
       render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
diff --git a/addons/google-analytics/README.md b/addons/google-analytics/README.md
index 3026e4c6b69f..841bab0872ba 100644
--- a/addons/google-analytics/README.md
+++ b/addons/google-analytics/README.md
@@ -16,7 +16,7 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-google-analytics/register']
+  addons: ['@storybook/addon-google-analytics']
 }
 ```
 
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 3880c31ad0e2..6fa2c90aef1b 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-google-analytics",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook addon for google analytics",
   "keywords": [
     "addon",
@@ -20,14 +20,20 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "react-ga": "^2.5.7"
+    "react-ga": "^2.5.7",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^15.6.2 || ^16.0",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/addons/google-analytics/src/register.ts b/addons/google-analytics/src/register.ts
index 297d9759de3d..b2c85d647726 100644
--- a/addons/google-analytics/src/register.ts
+++ b/addons/google-analytics/src/register.ts
@@ -4,7 +4,7 @@ import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-eve
 
 import ReactGA from 'react-ga';
 
-addons.register('storybook/google-analytics', api => {
+addons.register('storybook/google-analytics', (api) => {
   ReactGA.initialize(window.STORYBOOK_GA_ID, window.STORYBOOK_REACT_GA_OPTIONS);
 
   api.on(STORY_CHANGED, () => {
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index 4b6a679d1826..99e9781a06f2 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "addon",
@@ -16,32 +16,46 @@
     "directory": "addons/graphql"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-classes": "^7.9.2",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@types/webpack": "^4.41.9",
+    "babel-loader": "^8.0.6",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "graphiql": "^0.16.0",
-    "graphql": "^14.2.1",
-    "prop-types": "^15.7.2"
+    "graphiql": "^0.17.5",
+    "graphql": "^15.0.0",
+    "prop-types": "^15.7.2",
+    "regenerator-runtime": "^0.13.3",
+    "webpack": "^4.43.0"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/graphql/preset.js b/addons/graphql/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/graphql/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/graphql/src/components/FullScreen/index.tsx b/addons/graphql/src/components/FullScreen/index.tsx
index abec3ffcfe00..692b699be613 100644
--- a/addons/graphql/src/components/FullScreen/index.tsx
+++ b/addons/graphql/src/components/FullScreen/index.tsx
@@ -1,10 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import { style } from './style';
 
 export const FullScreen: FunctionComponent = ({ children }) => {
   return <div style={style.wrapper}>{children}</div>;
 };
-
-FullScreen.defaultProps = { children: null };
-FullScreen.propTypes = { children: PropTypes.node };
diff --git a/addons/graphql/src/manager.tsx b/addons/graphql/src/manager.tsx
index 255fc79d2037..1febdc1fce98 100644
--- a/addons/graphql/src/manager.tsx
+++ b/addons/graphql/src/manager.tsx
@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import GraphiQL from 'graphiql';
 import 'graphiql/graphiql.css';
 
@@ -16,8 +15,15 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
   return active ? (
     <Consumer>
       {({ api, state }: Combo) => {
-        const story = state.storiesHash[state.storyId];
-        const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
+        const story = api.getData(state.storyId);
+        const parameters = story
+          ? api.getCurrentParameter<{
+              query: string;
+              variables: Record<string, any>;
+              url: string;
+              fetcher: ReturnType<typeof getDefaultFetcher>;
+            }>(PARAM_KEY)
+          : null;
 
         if (parameters) {
           const query = reIndentQuery(parameters.query);
@@ -32,8 +38,5 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
     </Consumer>
   ) : null;
 };
-GQL.propTypes = {
-  active: PropTypes.bool.isRequired,
-};
 
 export default GQL;
diff --git a/addons/graphql/src/preset.ts b/addons/graphql/src/preset.ts
new file mode 100644
index 000000000000..ac617a523797
--- /dev/null
+++ b/addons/graphql/src/preset.ts
@@ -0,0 +1,26 @@
+import { join } from 'path';
+import { ContextReplacementPlugin, Configuration } from 'webpack';
+
+export const managerWebpack = async (config: Configuration) => {
+  // See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
+
+  config.plugins.push(
+    new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/)
+  );
+
+  config.module.rules.push({
+    test: /\.js$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          sourceType: 'unambiguous',
+          plugins: [[require.resolve('@babel/plugin-transform-classes'), { loose: true }]],
+        },
+      },
+    ],
+    include: new RegExp(join('node_modules', 'graphql-')),
+  });
+
+  return config;
+};
diff --git a/addons/info/README.md b/addons/info/README.md
deleted file mode 100644
index 7a19479ec3f8..000000000000
--- a/addons/info/README.md
+++ /dev/null
@@ -1,338 +0,0 @@
-# Storybook Info Addon
-
-Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
-Useful when you want to display usage or other types of documentation alongside your story.
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)
-
-## Installation
-
-Install the following npm module:
-
-```sh
-npm i -D @storybook/addon-info
-```
-
-## Basic usage
-
-Then, add `withInfo` as a decorator to your book of stories.
-It is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.
-
-It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
-
-```js
-// Globally in your .storybook/preview.js.
-import { addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-addDecorator(withInfo); 
-```
-
-or
-
-```js
-export default {
-  title: 'Component',
-  decorators: [withInfo],
-};
-```
-
-Then, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.
-A complete list of possible configurations can be found [in a later section](#setting-global-options).
-This can be done per book of stories:
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-  parameters: {
-    info: {},
-  },
-};
-```
-
-...or for each story individually:
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-};
-
-export const defaultView = () => <Component />;
-defaultView = {
-  parameters: {
-    info: { inline: true },
-  },
-};
-```
-
-It is also possible to disable the `info` addon entirely.
-Depending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.
-
-```
-info: {
-  disable: true,
-}
-```
-
-## Markdown
-
-The `info` addon also supports markdown.
-To use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.
-
-```js
-info: {
-  text: `
-    description or documentation about my component, supports markdown
-
-    ~~~js
-    <Button>Click Here</Button>
-    ~~~
-  `,
-}
-```
-
-## Setting Global Options
-
-To configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.
-
-```js
-import { withInfo } from '@storybook/addon-info';
-
-addDecorator(
-  withInfo({
-    header: false,
-  })
-);
-```
-
-Configuration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.
-In order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.
-
-## Options and Defaults
-
-```js
-{
-  /**
-   * Text to display with storybook component
-   */
-  text?: string;
-  /**
-   * Displays info inline vs click button to view
-   * @default false
-   */
-  inline: boolean,
-  /**
-   * Toggles display of header with component name and description
-   * @default true
-   */
-  header: boolean,
-  /**
-   * Displays the source of story Component
-   * @default true
-   */
-  source: boolean,
-  /**
-   * Components used in story
-   * Displays Prop Tables with these components
-   * @default []
-   */
-  propTables: Array<React.ComponentType>,
-  /**
-   * Exclude Components from being shown in Prop Tables section
-   * Accepts an array of component classes or functions
-   * @default []
-   */
-  propTablesExclude: Array<React.ComponentType>,
-  /**
-   * Overrides styles of addon. The object should follow this shape:
-   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.
-   * This prop can also accept a function which has the default stylesheet passed as an argument
-   */
-  styles: Object | Function,
-  /**
-   * Overrides components used to display markdown
-   * @default {}
-   */
-  components: { [key: string]: React.ComponentType },
-  /**
-   * Max props to display per line in source code
-   * @default 3
-   */
-  maxPropsIntoLine: number,
-  /**
-   * Displays the first 10 characters of the prop name
-   * @default 3
-   */
-  maxPropObjectKeys: number,
-  /**
-   * Displays the first 10 items in the default prop array
-   * @default 3
-   */
-  maxPropArrayLength: number,
-  /**
-   * Displays the first 100 characters in the default prop string
-   * @default 50
-   */
-  maxPropStringLength: number,
-  /**
-   * Override the component used to render the props table
-   * @default PropTable
-   */
-  TableComponent: React.ComponentType,
-  /**
-   * Will exclude any respective properties whose name is included in array
-   * @default []
-   */
-  excludedPropTypes: Array<string>,
-}
-```
-
-### Rendering a Custom Table
-
-The `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.
-
-```js
-  {
-    propDefinitions: Array<{
-      property: string, // The name of the prop
-      propType: Object | string, // The prop type. TODO: info about what this object is...
-      required: boolean, // True if the prop is required
-      description: string, // The description of the prop
-      defaultValue: any // The default value of the prop
-    }>
-  }
-```
-
-Example:
-
-```js
-// button.js
-// @flow
-import React from 'react';
-
-const paddingStyles = {
-  small: '4px 8px',
-  medium: '8px 16px',
-};
-
-const Button = ({
-  size,
-  ...rest
-}: {
-  /** The size of the button */
-  size: 'small' | 'medium',
-}) => {
-  const style = {
-    padding: paddingStyles[size] || '',
-  };
-  return <button style={style} {...rest} />;
-};
-Button.defaultProps = {
-  size: 'medium',
-};
-
-export default Button;
-```
-
-```js
-// stories.js
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import Button from './button';
-
-export default {
-  title: 'Button',
-  component: Button,
-  parameters: {
-    info: TableComponent,
-  },
-};
-
-const Red = props => <span style={{ color: 'red' }} {...props} />;
-
-const TableComponent = ({ propDefinitions }) => {
-  const props = propDefinitions.map(
-    ({ property, propType, required, description, defaultValue }) => {
-      return (
-        <tr key={property}>
-          <td>
-            {property}
-            {required ? <Red>*</Red> : null}
-          </td>
-          <td>{propType.name}</td>
-          <td>{defaultValue}</td>
-          <td>{description}</td>
-        </tr>
-      );
-    }
-  );
-
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>name</th>
-          <th>type</th>
-          <th>default</th>
-          <th>description</th>
-        </tr>
-      </thead>
-      <tbody>{props}</tbody>
-    </table>
-  );
-};
-
-export const defaultView = () => <Button />;
-```
-
-### React Docgen Integration
-
-React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.
-When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.
-
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/** Button component description */
-const DocgenButton = ({ disabled, label, style, onClick }) => (
-  <button disabled={disabled} style={style} onClick={onClick}>
-    {label}
-  </button>
-);
-
-DocgenButton.defaultProps = {
-  disabled: false,
-  onClick: () => {},
-  style: {},
-};
-
-DocgenButton.propTypes = {
-  /** Boolean indicating whether the button should render as disabled */
-  disabled: PropTypes.bool,
-  /** button label. */
-  label: PropTypes.string.isRequired,
-  /** onClick handler */
-  onClick: PropTypes.func,
-  /** component styles */
-  style: PropTypes.shape,
-};
-
-export default DocgenButton;
-```
-
-Comments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.
-
-## The FAQ
-
-**Components lose their names on static build**
-
-Component names also get minified with other javascript code when building for production.
-When creating components, set the `displayName` static property to show the correct component name on static builds.
diff --git a/addons/info/docs/home-screenshot.png b/addons/info/docs/home-screenshot.png
deleted file mode 100644
index e31189043753..000000000000
Binary files a/addons/info/docs/home-screenshot.png and /dev/null differ
diff --git a/addons/info/package.json b/addons/info/package.json
deleted file mode 100644
index e4cae57ca153..000000000000
--- a/addons/info/package.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
-  "name": "@storybook/addon-info",
-  "version": "5.3.0-rc.0",
-  "description": "A Storybook addon to show additional information for your stories.",
-  "keywords": [
-    "addon",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/info",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/info"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "marksy": "^7.0.0",
-    "nested-object-assign": "^1.0.3",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.3",
-    "react-addons-create-fragment": "^15.6.2",
-    "react-element-to-jsx-string": "^14.0.2",
-    "react-is": "^16.8.3",
-    "react-lifecycles-compat": "^3.0.4",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "react-test-renderer": "^16.8.3"
-  },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
deleted file mode 100644
index 7dc48103b4f2..000000000000
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,10004 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`addon Info should render <Info /> and external markdown 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info="<h1>HTML Mock</h1>"
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={Array []}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render <Info /> and markdown 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info="# Test story
-## with markdown info
-containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={Array []}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render <Info /> for memoized component 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <Memo(TestComponent)
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </Memo(TestComponent)>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render component description if story kind matches component 1`] = `
-.emotion-10 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5 code {
-  padding-right: 10px;
-}
-
-.emotion-5 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-5 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.string {
-  color: #A31515;
-}
-
-.emotion-5 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-5 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-5 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.function {
-  color: #393A34;
-}
-
-.emotion-5 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-5 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-5 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-5 * .token.tag {
-  color: #800000;
-}
-
-.emotion-5 * .token.selector {
-  color: #800000;
-}
-
-.emotion-5 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-5 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-5 * .namespace {
-  opacity: 0.7;
-}
-
-.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-9 {
-  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-8 {
-  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-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  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-8:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-8 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-8:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<Info>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={
-      Object {
-        "kind": "TestComponent",
-        "name": "Basic test",
-      }
-    }
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={true}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            TestComponent
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            Basic test
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div
-      id="story-root"
-      style={Object {}}
-    >
-      <div>
-        It's a 
-        Basic test
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <H1
-          context={Object {}}
-          id="awesome-test-component-description"
-          key="0"
-        >
-          <h1
-            id="awesome-test-component-description"
-            style={
-              Object {
-                "borderBottom": "1px solid #eee",
-                "fontSize": "40px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Awesome test component description
-          </h1>
-        </H1>
-        <H2
-          context={Object {}}
-          id="awesome-test-component-description-with-markdown-support"
-          key="1"
-        >
-          <h2
-            id="awesome-test-component-description-with-markdown-support"
-            style={
-              Object {
-                "fontSize": "30px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            with markdown support
-          </h2>
-        </H2>
-        <P
-          context={Object {}}
-          key="4"
-        >
-          <p>
-            <strong
-              key="2"
-            >
-              bold
-            </strong>
-             
-            <em
-              key="3"
-            >
-              cursive
-            </em>
-          </p>
-        </P>
-        <Code
-          code="a;"
-          key="5"
-          language="js"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="js"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="js"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    a
-                                                    <span
-                                                      className="token punctuation"
-                                                      key="code-segement1"
-                                                    >
-                                                      ;
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
-            }
-          }
-        >
-          Story Source
-        </h1>
-        <Code
-          code="<div>
-  It's a Basic test story:
-  <TestComponent
-    array={[
-      1,
-      2,
-      3
-    ]}
-    bool
-    func={function noRefCheck() {}}
-    number={7}
-    obj={{
-      a: 'a',
-      b: 'b'
-    }}
-    string=\\"seven\\"
-  />
-</div>"
-          format={false}
-          language="jsx"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="jsx"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="jsx"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement0"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement1"
-                                                    >
-                                                      
-  It's a Basic test story:
-  
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement2"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        <span
-                                                          className="token class-name"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          TestComponent
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-2"
-                                                      >
-                                                        array
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-3"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          [
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          1
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          2
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          3
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-12"
-                                                        >
-                                                          ]
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-5"
-                                                      >
-                                                        bool
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-7"
-                                                      >
-                                                        func
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-8"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token keyword"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          function
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token function"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          noRefCheck
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          (
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          )
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-10"
-                                                      >
-                                                        number
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-11"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          7
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-13"
-                                                      >
-                                                        obj
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-14"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        
-      a
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          'a'
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      b
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-11"
-                                                        >
-                                                          'b'
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-14"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-16"
-                                                      >
-                                                        string
-                                                      </span>
-                                                      <span
-                                                        className="token attr-value"
-                                                        key="code-segment-1-17"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          "
-                                                        </span>
-                                                        seven
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          "
-                                                        </span>
-                                                      </span>
-                                                      
-  
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-19"
-                                                      >
-                                                        /&gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement3"
-                                                    >
-                                                      
-
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement4"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;/
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-      </div>
-    </div>
-  </Story>
-</Info>
-`;
-
-exports[`addon Info should render component description if story name matches component 1`] = `
-.emotion-10 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5 code {
-  padding-right: 10px;
-}
-
-.emotion-5 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-5 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.string {
-  color: #A31515;
-}
-
-.emotion-5 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-5 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-5 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.function {
-  color: #393A34;
-}
-
-.emotion-5 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-5 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-5 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-5 * .token.tag {
-  color: #800000;
-}
-
-.emotion-5 * .token.selector {
-  color: #800000;
-}
-
-.emotion-5 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-5 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-5 * .namespace {
-  opacity: 0.7;
-}
-
-.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-9 {
-  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-8 {
-  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-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  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-8:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-8 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-8:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<Info>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={
-      Object {
-        "kind": "Test Components",
-        "name": "TestComponent",
-      }
-    }
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={true}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Test Components
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            TestComponent
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div
-      id="story-root"
-      style={Object {}}
-    >
-      <div>
-        It's a 
-        TestComponent
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <H1
-          context={Object {}}
-          id="awesome-test-component-description"
-          key="0"
-        >
-          <h1
-            id="awesome-test-component-description"
-            style={
-              Object {
-                "borderBottom": "1px solid #eee",
-                "fontSize": "40px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Awesome test component description
-          </h1>
-        </H1>
-        <H2
-          context={Object {}}
-          id="awesome-test-component-description-with-markdown-support"
-          key="1"
-        >
-          <h2
-            id="awesome-test-component-description-with-markdown-support"
-            style={
-              Object {
-                "fontSize": "30px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            with markdown support
-          </h2>
-        </H2>
-        <P
-          context={Object {}}
-          key="4"
-        >
-          <p>
-            <strong
-              key="2"
-            >
-              bold
-            </strong>
-             
-            <em
-              key="3"
-            >
-              cursive
-            </em>
-          </p>
-        </P>
-        <Code
-          code="a;"
-          key="5"
-          language="js"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="js"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="js"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    a
-                                                    <span
-                                                      className="token punctuation"
-                                                      key="code-segement1"
-                                                    >
-                                                      ;
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
-            }
-          }
-        >
-          Story Source
-        </h1>
-        <Code
-          code="<div>
-  It's a TestComponent story:
-  <TestComponent
-    array={[
-      1,
-      2,
-      3
-    ]}
-    bool
-    func={function noRefCheck() {}}
-    number={7}
-    obj={{
-      a: 'a',
-      b: 'b'
-    }}
-    string=\\"seven\\"
-  />
-</div>"
-          format={false}
-          language="jsx"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="jsx"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{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-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;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;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="jsx"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement0"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement1"
-                                                    >
-                                                      
-  It's a TestComponent story:
-  
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement2"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        <span
-                                                          className="token class-name"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          TestComponent
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-2"
-                                                      >
-                                                        array
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-3"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          [
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          1
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          2
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          3
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-12"
-                                                        >
-                                                          ]
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-5"
-                                                      >
-                                                        bool
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-7"
-                                                      >
-                                                        func
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-8"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token keyword"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          function
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token function"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          noRefCheck
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          (
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          )
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-10"
-                                                      >
-                                                        number
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-11"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          7
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-13"
-                                                      >
-                                                        obj
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-14"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        
-      a
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          'a'
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      b
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-11"
-                                                        >
-                                                          'b'
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-14"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-16"
-                                                      >
-                                                        string
-                                                      </span>
-                                                      <span
-                                                        className="token attr-value"
-                                                        key="code-segment-1-17"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          "
-                                                        </span>
-                                                        seven
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          "
-                                                        </span>
-                                                      </span>
-                                                      
-  
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-19"
-                                                      >
-                                                        /&gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement3"
-                                                    >
-                                                      
-
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement4"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;/
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-      </div>
-    </div>
-  </Story>
-</Info>
-`;
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
deleted file mode 100644
index f2ad6453a5de..000000000000
--- a/addons/info/src/components/PropTable.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PropVal from './PropVal';
-import PrettyPropType from './types/PrettyPropType';
-
-const Table = props => <table {...props} />;
-const Td = props => <td style={{ paddingRight: 10, verticalAlign: 'top' }} {...props} />;
-const Tr = props => <tr {...props} />;
-const Th = props => <th style={{ textAlign: 'left', verticalAlign: 'top' }} {...props} />;
-const Tbody = props => <tbody {...props} />;
-const Thead = props => <thead {...props} />;
-
-export const multiLineText = input => {
-  if (!input) {
-    return input;
-  }
-  const text = String(input);
-  const arrayOfText = text.split(/\r?\n|\r/g);
-  const isSingleLine = arrayOfText.length < 2;
-  return isSingleLine
-    ? text
-    : arrayOfText.map((lineOfText, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${lineOfText}.${i}`}>
-          {i > 0 && <br />} {lineOfText}
-        </span>
-      ));
-};
-
-const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => {
-  if (excludedPropTypes.length === 0) {
-    return propDefinitions;
-  }
-
-  return propDefinitions.filter(
-    propDefinition => !excludedPropTypes.includes(propDefinition.property)
-  );
-};
-
-export default function PropTable(props) {
-  const {
-    type,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    propDefinitions,
-    excludedPropTypes,
-  } = props;
-
-  if (!type) {
-    return null;
-  }
-
-  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
-
-  if (!includedPropDefinitions.length) {
-    return <small>No propTypes defined!</small>;
-  }
-
-  const propValProps = {
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-  };
-
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>property</Th>
-          <Th>propType</Th>
-          <Th>required</Th>
-          <Th>default</Th>
-          <Th>description</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {includedPropDefinitions.map(row => (
-          <Tr key={row.property}>
-            <Td>{row.property}</Td>
-            <Td>
-              <PrettyPropType propType={row.propType} />
-            </Td>
-            <Td>{row.required ? 'yes' : '-'}</Td>
-            <Td>
-              {row.defaultValue === undefined ? (
-                '-'
-              ) : (
-                <PropVal val={row.defaultValue} {...propValProps} valueStyles={{}} />
-              )}
-            </Td>
-            <Td>{multiLineText(row.description)}</Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  );
-}
-
-PropTable.displayName = 'PropTable';
-PropTable.defaultProps = {
-  type: null,
-  propDefinitions: [],
-  excludedPropTypes: [],
-};
-PropTable.propTypes = {
-  type: PropTypes.func,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-  propDefinitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      property: PropTypes.string.isRequired,
-      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-      required: PropTypes.bool,
-      description: PropTypes.string,
-      defaultValue: PropTypes.any,
-    })
-  ),
-};
diff --git a/addons/info/src/components/PropTable.test.js b/addons/info/src/components/PropTable.test.js
deleted file mode 100644
index 43547f6b6eb7..000000000000
--- a/addons/info/src/components/PropTable.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-
-import PropTable, { multiLineText } from './PropTable';
-
-describe('PropTable', () => {
-  describe('multiLineText', () => {
-    const singleLine = 'Foo bar baz';
-    const unixMultiLineText = 'foo \n bar \n baz';
-    const windowsMultiLineText = 'foo \r bar \r baz';
-    const duplicatedMultiLine = 'foo\nfoo\nfoo';
-    const propDefinitions = [
-      {
-        defaultValue: undefined,
-        description: '',
-        propType: { name: 'string' },
-        property: 'foo',
-        required: false,
-      },
-    ];
-    const FooComponent = () => <div />;
-    const propTableProps = {
-      type: FooComponent,
-      maxPropArrayLength: 5,
-      maxPropObjectKeys: 5,
-      maxPropStringLength: 5,
-      propDefinitions,
-    };
-
-    it('should include all propTypes by default', () => {
-      const wrapper = shallow(<PropTable {...propTableProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should exclude excluded propTypes', () => {
-      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
-      const wrapper = shallow(<PropTable {...props} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should return a blank string for a null input', () => {
-      expect(multiLineText(null)).toBe(null);
-    });
-    it('should return a blank string for an undefined input', () => {
-      expect(multiLineText(undefined)).toBe(undefined);
-    });
-    it('should cast a number to a string', () => {
-      expect(multiLineText(1)).toBe('1');
-    });
-    it('should return its input for a single line of text', () => {
-      expect(multiLineText(singleLine)).toBe(singleLine);
-    });
-    it('should return an array for unix multiline text', () => {
-      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
-    });
-    it('should return an array for windows multiline text', () => {
-      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
-    });
-    it('should return an array with unique keys for duplicated multiline text', () => {
-      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
-      const keys = wrappers.map(wrapper => wrapper.key());
-      const deDup = new Set(keys);
-      expect(keys).toHaveLength(deDup.size);
-    });
-    it('should have 2 br tags for 3 lines of text', () => {
-      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-});
diff --git a/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap b/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap
deleted file mode 100644
index d4aef4cc698a..000000000000
--- a/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
-<small>
-  No propTypes defined!
-</small>
-`;
-
-exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
-Array [
-  <span>
-     
-    foo 
-  </span>,
-  <span>
-    <br />
-     
-     bar 
-  </span>,
-  <span>
-    <br />
-     
-     baz
-  </span>,
-]
-`;
-
-exports[`PropTable multiLineText should include all propTypes by default 1`] = `
-<Table>
-  <Thead>
-    <Tr>
-      <Th>
-        property
-      </Th>
-      <Th>
-        propType
-      </Th>
-      <Th>
-        required
-      </Th>
-      <Th>
-        default
-      </Th>
-      <Th>
-        description
-      </Th>
-    </Tr>
-  </Thead>
-  <Tbody>
-    <Tr
-      key="foo"
-    >
-      <Td
-        isMonospace={true}
-      >
-        foo
-      </Td>
-      <Td
-        isMonospace={true}
-      >
-        <PrettyPropType
-          depth={1}
-          propType={
-            Object {
-              "name": "string",
-            }
-          }
-        />
-      </Td>
-      <Td
-        isMonospace={false}
-      >
-        -
-      </Td>
-      <Td
-        isMonospace={false}
-      >
-        -
-      </Td>
-      <Td
-        isMonospace={false}
-      />
-    </Tr>
-  </Tbody>
-</Table>
-`;
diff --git a/addons/info/src/components/PropTable/components/Table.js b/addons/info/src/components/PropTable/components/Table.js
deleted file mode 100644
index 893470b04ab3..000000000000
--- a/addons/info/src/components/PropTable/components/Table.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import '../style.css';
-
-const Table = ({ children }) => <table className="info-table">{children}</table>;
-
-Table.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Table;
diff --git a/addons/info/src/components/PropTable/components/Table.test.js b/addons/info/src/components/PropTable/components/Table.test.js
deleted file mode 100644
index 6910f2548e7c..000000000000
--- a/addons/info/src/components/PropTable/components/Table.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Table from './Table';
-
-describe('PropTable/Table', () => {
-  it('renders a table html node with one child element', () => {
-    const wrapper = shallow(
-      <Table>
-        <div>foo bar</div>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a table html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Table>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Tbody.js b/addons/info/src/components/PropTable/components/Tbody.js
deleted file mode 100644
index ef77ac517bef..000000000000
--- a/addons/info/src/components/PropTable/components/Tbody.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Tbody = ({ children }) => <tbody>{children}</tbody>;
-
-Tbody.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Tbody;
diff --git a/addons/info/src/components/PropTable/components/Tbody.test.js b/addons/info/src/components/PropTable/components/Tbody.test.js
deleted file mode 100644
index 901a7900ac59..000000000000
--- a/addons/info/src/components/PropTable/components/Tbody.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Tbody from './Tbody';
-
-describe('PropTable/Tbody', () => {
-  it('renders a tbody html node with children', () => {
-    const wrapper = shallow(
-      <Tbody>
-        <div>foo bar</div>
-      </Tbody>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tbody html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Tbody>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Tbody>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Td.js b/addons/info/src/components/PropTable/components/Td.js
deleted file mode 100644
index a429e6bc633e..000000000000
--- a/addons/info/src/components/PropTable/components/Td.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import '../style.css';
-
-const Td = ({ isMonospace, children }) => (
-  <td className={isMonospace ? 'info-table-monospace' : null}>{children}</td>
-);
-
-Td.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.arrayOf(PropTypes.element),
-  ]),
-  isMonospace: PropTypes.bool,
-};
-
-Td.defaultProps = {
-  isMonospace: false,
-  children: null,
-};
-
-export default Td;
diff --git a/addons/info/src/components/PropTable/components/Td.test.js b/addons/info/src/components/PropTable/components/Td.test.js
deleted file mode 100644
index e5b8dc663253..000000000000
--- a/addons/info/src/components/PropTable/components/Td.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Td from './Td';
-
-describe('PropTable/Td', () => {
-  it('renders a td html node child element', () => {
-    const wrapper = shallow(
-      <Td>
-        <div>foo bar</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node child element', () => {
-    const wrapper = shallow(
-      <Td isMonospace>
-        <div>foo bar</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a td html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Td>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Td isMonospace>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a td html node with one child node', () => {
-    const wrapper = shallow(<Td>foo bar</Td>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node with one child node', () => {
-    const wrapper = shallow(<Td isMonospace>foo bar</Td>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Th.js b/addons/info/src/components/PropTable/components/Th.js
deleted file mode 100644
index acf43b6664e0..000000000000
--- a/addons/info/src/components/PropTable/components/Th.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Th = ({ children }) => <th>{children}</th>;
-
-Th.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
-};
-
-export default Th;
diff --git a/addons/info/src/components/PropTable/components/Th.test.js b/addons/info/src/components/PropTable/components/Th.test.js
deleted file mode 100644
index cd84814d1721..000000000000
--- a/addons/info/src/components/PropTable/components/Th.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Th from './Th';
-
-describe('PropTable/Th', () => {
-  it('renders a th html node with react element children', () => {
-    const wrapper = shallow(
-      <Th>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Th>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a th html node with html node children', () => {
-    const wrapper = shallow(<Th>foo bar baz</Th>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a th html node with one child node', () => {
-    const wrapper = shallow(<Th>foo bar</Th>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Thead.js b/addons/info/src/components/PropTable/components/Thead.js
deleted file mode 100644
index 0abe57156f86..000000000000
--- a/addons/info/src/components/PropTable/components/Thead.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Thead = ({ children }) => <thead>{children}</thead>;
-
-Thead.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Thead;
diff --git a/addons/info/src/components/PropTable/components/Thead.test.js b/addons/info/src/components/PropTable/components/Thead.test.js
deleted file mode 100644
index d1a96fccd72c..000000000000
--- a/addons/info/src/components/PropTable/components/Thead.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Thead from './Thead';
-
-describe('PropTable/Thead', () => {
-  it('renders a thead html node with children', () => {
-    const wrapper = shallow(
-      <Thead>
-        <div>foo bar</div>
-      </Thead>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a thead html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Thead>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Thead>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Tr.js b/addons/info/src/components/PropTable/components/Tr.js
deleted file mode 100644
index 103e8ad5449f..000000000000
--- a/addons/info/src/components/PropTable/components/Tr.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Tr = ({ children }) => <tr>{children}</tr>;
-
-Tr.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Tr;
diff --git a/addons/info/src/components/PropTable/components/Tr.test.js b/addons/info/src/components/PropTable/components/Tr.test.js
deleted file mode 100644
index 071e87001f25..000000000000
--- a/addons/info/src/components/PropTable/components/Tr.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Tr from './Tr';
-import Td from './Td';
-
-describe('PropTable/Tr', () => {
-  it('renders a tr html node with react element children', () => {
-    const wrapper = shallow(
-      <Tr>
-        <Td>foo bar</Td>
-        <Td>baz</Td>
-      </Tr>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tr html node with html node children', () => {
-    const wrapper = shallow(<Tr>foo bar baz</Tr>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tr html node with one child node', () => {
-    const wrapper = shallow(<Tr>foo bar</Tr>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap
deleted file mode 100644
index c245e98aca7a..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Table renders a table html node with multiple children elements 1`] = `
-<table
-  className="info-table"
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</table>
-`;
-
-exports[`PropTable/Table renders a table html node with one child element 1`] = `
-<table
-  className="info-table"
->
-  <div>
-    foo bar
-  </div>
-</table>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap
deleted file mode 100644
index 70840d14f0a8..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Tbody renders a tbody html node with children 1`] = `
-<tbody>
-  <div>
-    foo bar
-  </div>
-</tbody>
-`;
-
-exports[`PropTable/Tbody renders a tbody html node with multiple children elements 1`] = `
-<tbody>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</tbody>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap
deleted file mode 100644
index 4e2d98f83b5f..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Td renders a monospace td html node child element 1`] = `
-<td
-  className="info-table-monospace"
->
-  <div>
-    foo bar
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a monospace td html node with multiple children elements 1`] = `
-<td
-  className="info-table-monospace"
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a monospace td html node with one child node 1`] = `
-<td
-  className="info-table-monospace"
->
-  foo bar
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node child element 1`] = `
-<td
-  className={null}
->
-  <div>
-    foo bar
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node with multiple children elements 1`] = `
-<td
-  className={null}
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node with one child node 1`] = `
-<td
-  className={null}
->
-  foo bar
-</td>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap
deleted file mode 100644
index c7c55c291314..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Th renders a th html node with html node children 1`] = `
-<th>
-  foo bar baz
-</th>
-`;
-
-exports[`PropTable/Th renders a th html node with one child node 1`] = `
-<th>
-  foo bar
-</th>
-`;
-
-exports[`PropTable/Th renders a th html node with react element children 1`] = `
-<th>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</th>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap
deleted file mode 100644
index a5ba8a5330f7..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Thead renders a thead html node with children 1`] = `
-<thead>
-  <div>
-    foo bar
-  </div>
-</thead>
-`;
-
-exports[`PropTable/Thead renders a thead html node with multiple children elements 1`] = `
-<thead>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</thead>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap
deleted file mode 100644
index 9ba2d695e37b..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Tr renders a tr html node with html node children 1`] = `
-<tr>
-  foo bar baz
-</tr>
-`;
-
-exports[`PropTable/Tr renders a tr html node with one child node 1`] = `
-<tr>
-  foo bar
-</tr>
-`;
-
-exports[`PropTable/Tr renders a tr html node with react element children 1`] = `
-<tr>
-  <Td
-    isMonospace={false}
-  >
-    foo bar
-  </Td>
-  <Td
-    isMonospace={false}
-  >
-    baz
-  </Td>
-</tr>
-`;
diff --git a/addons/info/src/components/PropTable/index.js b/addons/info/src/components/PropTable/index.js
deleted file mode 100644
index 6e6a033943ee..000000000000
--- a/addons/info/src/components/PropTable/index.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PrettyPropType from '../types/PrettyPropType';
-import PropVal from '../PropVal';
-import Table from './components/Table';
-import Tbody from './components/Tbody';
-import Td from './components/Td';
-import Th from './components/Th';
-import Thead from './components/Thead';
-import Tr from './components/Tr';
-
-export const multiLineText = input => {
-  if (!input) {
-    return input;
-  }
-  const text = String(input);
-  const arrayOfText = text.split(/\r?\n|\r/g);
-  const isSingleLine = arrayOfText.length < 2;
-  return isSingleLine
-    ? text
-    : arrayOfText.map((lineOfText, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${lineOfText}.${i}`}>
-          {i > 0 && <br />} {lineOfText}
-        </span>
-      ));
-};
-
-const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => {
-  if (excludedPropTypes.length === 0) {
-    return propDefinitions;
-  }
-
-  return propDefinitions.filter(
-    propDefinition => !excludedPropTypes.includes(propDefinition.property)
-  );
-};
-
-export default function PropTable(props) {
-  const {
-    type,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    propDefinitions,
-    excludedPropTypes,
-  } = props;
-
-  if (!type) {
-    return null;
-  }
-
-  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
-
-  if (!includedPropDefinitions.length) {
-    return <small>No propTypes defined!</small>;
-  }
-
-  const propValProps = {
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-  };
-
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>property</Th>
-          <Th>propType</Th>
-          <Th>required</Th>
-          <Th>default</Th>
-          <Th>description</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {includedPropDefinitions.map(row => (
-          <Tr key={row.property}>
-            <Td isMonospace>{row.property}</Td>
-            <Td isMonospace>
-              <PrettyPropType propType={row.propType} />
-            </Td>
-            <Td>{row.required ? 'yes' : '-'}</Td>
-            <Td>
-              {row.defaultValue === undefined ? (
-                '-'
-              ) : (
-                <PropVal val={row.defaultValue} {...propValProps} valueStyles={{}} />
-              )}
-            </Td>
-            <Td>{multiLineText(row.description)}</Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  );
-}
-
-PropTable.displayName = 'PropTable';
-PropTable.defaultProps = {
-  type: null,
-  propDefinitions: [],
-  excludedPropTypes: [],
-};
-PropTable.propTypes = {
-  type: PropTypes.func,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-  propDefinitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      property: PropTypes.string.isRequired,
-      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-      required: PropTypes.bool,
-      description: PropTypes.string,
-      defaultValue: PropTypes.any,
-    })
-  ),
-};
diff --git a/addons/info/src/components/PropTable/index.test.js b/addons/info/src/components/PropTable/index.test.js
deleted file mode 100644
index 0a6bb05eb1a7..000000000000
--- a/addons/info/src/components/PropTable/index.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-
-import PropTable, { multiLineText } from './index';
-
-describe('PropTable', () => {
-  describe('multiLineText', () => {
-    const singleLine = 'Foo bar baz';
-    const unixMultiLineText = 'foo \n bar \n baz';
-    const windowsMultiLineText = 'foo \r bar \r baz';
-    const duplicatedMultiLine = 'foo\nfoo\nfoo';
-    const propDefinitions = [
-      {
-        defaultValue: undefined,
-        description: '',
-        propType: { name: 'string' },
-        property: 'foo',
-        required: false,
-      },
-    ];
-    const FooComponent = () => <div />;
-    const propTableProps = {
-      type: FooComponent,
-      maxPropArrayLength: 5,
-      maxPropObjectKeys: 5,
-      maxPropStringLength: 5,
-      propDefinitions,
-    };
-
-    it('should include all propTypes by default', () => {
-      const wrapper = shallow(<PropTable {...propTableProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should exclude excluded propTypes', () => {
-      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
-      const wrapper = shallow(<PropTable {...props} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should return a blank string for a null input', () => {
-      expect(multiLineText(null)).toBe(null);
-    });
-
-    it('should return a blank string for an undefined input', () => {
-      expect(multiLineText(undefined)).toBe(undefined);
-    });
-
-    it('should cast a number to a string', () => {
-      expect(multiLineText(1)).toBe('1');
-    });
-
-    it('should return its input for a single line of text', () => {
-      expect(multiLineText(singleLine)).toBe(singleLine);
-    });
-
-    it('should return an array for unix multiline text', () => {
-      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
-    });
-
-    it('should return an array for windows multiline text', () => {
-      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
-    });
-
-    it('should return an array with unique keys for duplicated multiline text', () => {
-      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
-      const keys = wrappers.map(wrapper => wrapper.key());
-      const deDup = new Set(keys);
-      expect(keys).toHaveLength(deDup.size);
-    });
-
-    it('should have 2 br tags for 3 lines of text', () => {
-      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-});
diff --git a/addons/info/src/components/PropTable/style.css b/addons/info/src/components/PropTable/style.css
deleted file mode 100644
index 010f200df8b4..000000000000
--- a/addons/info/src/components/PropTable/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.info-table {
-  width: 100%;
-}
-
-.info-table, .info-table td, .info-table th {
-  border-collapse: collapse;
-  border: 1px solid #cccccc;
-  color: #444444;
-  margin-top: 0.25rem;
-  padding-right: 0.5rem;
-  padding: 0.25rem;
-  text-align: left;
-  vertical-align: top;
-}
-
-.info-table-monospace {
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 0.88em;
-}
diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
deleted file mode 100644
index e7527d749566..000000000000
--- a/addons/info/src/components/PropVal.js
+++ /dev/null
@@ -1,274 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import createFragment from 'react-addons-create-fragment';
-
-const getValueStyles = (codeColors = {}) => ({
-  func: {
-    color: codeColors.func || '#170',
-  },
-
-  attr: {
-    color: codeColors.attr || '#666',
-  },
-
-  object: {
-    color: codeColors.object || '#666',
-  },
-
-  array: {
-    color: codeColors.array || '#666',
-  },
-
-  number: {
-    color: codeColors.number || '#a11',
-  },
-
-  string: {
-    color: codeColors.string || '#22a',
-    wordBreak: 'break-word',
-  },
-
-  bool: {
-    color: codeColors.bool || '#a11',
-  },
-
-  empty: {
-    color: '#444',
-  },
-});
-
-function indent(breakIntoNewLines, level, isBlock) {
-  return (
-    breakIntoNewLines && (
-      <span>
-        <br />
-        {`${Array(level).join('  ')}  `}
-        {!isBlock && '  '}
-      </span>
-    )
-  );
-}
-
-function PreviewArray({
-  val,
-  level,
-  maxPropArrayLength,
-  maxPropStringLength,
-  maxPropsIntoLine,
-  valueStyles,
-}) {
-  const items = {};
-  const breakIntoNewLines = val.length > maxPropsIntoLine;
-  val.slice(0, maxPropArrayLength).forEach((item, i) => {
-    items[`n${i}`] = (
-      <span>
-        {indent(breakIntoNewLines, level)}
-        <PropVal
-          val={item}
-          level={level + 1}
-          valueStyles={valueStyles}
-          maxPropStringLength={maxPropStringLength}
-          maxPropsIntoLine={maxPropsIntoLine}
-        />
-      </span>
-    );
-    items[`c${i}`] = ',';
-  });
-  if (val.length > maxPropArrayLength) {
-    items.last = <span>{indent(breakIntoNewLines, level)}…</span>;
-  } else {
-    delete items[`c${val.length - 1}`];
-  }
-
-  return (
-    <span style={valueStyles.array}>
-      [{createFragment(items)}
-      {indent(breakIntoNewLines, level, true)}]
-    </span>
-  );
-}
-
-PreviewArray.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  level: PropTypes.number.isRequired,
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }).isRequired,
-};
-
-function PreviewObject({
-  val,
-  level,
-  maxPropObjectKeys,
-  maxPropStringLength,
-  maxPropsIntoLine,
-  valueStyles,
-}) {
-  const names = Object.keys(val);
-  const items = {};
-  const breakIntoNewLines = names.length > maxPropsIntoLine;
-  names.slice(0, maxPropObjectKeys).forEach((name, i) => {
-    items[`k${i}`] = (
-      <span>
-        {indent(breakIntoNewLines, level)}
-        <span style={valueStyles.attr}>{name}</span>
-      </span>
-    );
-    items[`c${i}`] = ': ';
-    items[`v${i}`] = (
-      <PropVal
-        val={val[name]}
-        level={level + 1}
-        valueStyles={valueStyles}
-        maxPropStringLength={maxPropStringLength}
-        maxPropsIntoLine={maxPropsIntoLine}
-      />
-    );
-    items[`m${i}`] = ',';
-  });
-  if (names.length > maxPropObjectKeys) {
-    items.rest = <span>{indent(breakIntoNewLines, level)}…</span>;
-  } else {
-    delete items[`m${names.length - 1}`];
-  }
-  return (
-    <span style={valueStyles.object}>
-      {'{'}
-      {createFragment(items)}
-      {indent(breakIntoNewLines, level, true)}
-      {'}'}
-    </span>
-  );
-}
-
-PreviewObject.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  level: PropTypes.number.isRequired,
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }).isRequired,
-};
-
-function PropVal(props) {
-  const {
-    level,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    maxPropsIntoLine,
-    theme,
-  } = props;
-  let { val } = props;
-  const { codeColors } = theme || {};
-  let content = null;
-  const valueStyles = props.valueStyles || getValueStyles(codeColors);
-
-  if (typeof val === 'number') {
-    content = <span style={valueStyles.number}>{val}</span>;
-  } else if (typeof val === 'string') {
-    if (val.length > maxPropStringLength) {
-      val = `${val.slice(0, maxPropStringLength)}…`;
-    }
-    if (level > 1) {
-      val = `'${val}'`;
-    }
-    content = <span style={valueStyles.string}>{val}</span>;
-  } else if (typeof val === 'boolean') {
-    content = <span style={valueStyles.bool}>{`${val}`}</span>;
-  } else if (Array.isArray(val)) {
-    content = (
-      <PreviewArray
-        {...{
-          val,
-          level,
-          maxPropArrayLength,
-          maxPropStringLength,
-          maxPropsIntoLine,
-          valueStyles,
-        }}
-      />
-    );
-  } else if (typeof val === 'function') {
-    content = <span style={valueStyles.func}>{val.name || 'anonymous'}</span>;
-  } else if (!val) {
-    content = <span style={valueStyles.empty}>{`${val}`}</span>;
-  } else if (typeof val !== 'object') {
-    content = <span>…</span>;
-  } else if (React.isValidElement(val)) {
-    content = (
-      <span style={valueStyles.object}>
-        {`<${val.type.displayName || val.type.name || val.type} />`}
-      </span>
-    );
-  } else {
-    content = (
-      <PreviewObject
-        {...{
-          val,
-          level,
-          maxPropObjectKeys,
-          maxPropStringLength,
-          maxPropsIntoLine,
-          valueStyles,
-        }}
-      />
-    );
-  }
-
-  return content;
-}
-
-PropVal.defaultProps = {
-  val: null,
-  maxPropObjectKeys: 3,
-  maxPropArrayLength: 3,
-  maxPropStringLength: 50,
-  maxPropsIntoLine: 3,
-  level: 1,
-  theme: {},
-  valueStyles: null,
-};
-
-PropVal.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-  maxPropsIntoLine: PropTypes.number,
-  level: PropTypes.number,
-  theme: PropTypes.shape({
-    codeColors: PropTypes.object,
-  }),
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }),
-};
-
-export default PropVal;
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
deleted file mode 100644
index 722c4aa8be28..000000000000
--- a/addons/info/src/components/Props.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import PropVal from './PropVal';
-import { getType } from '../react-utils';
-
-const stylesheet = {
-  propStyle: {},
-  propNameStyle: {},
-  propValueStyle: {},
-};
-
-export default function Props(props) {
-  const {
-    maxPropsIntoLine,
-    maxPropArrayLength,
-    maxPropObjectKeys,
-    maxPropStringLength,
-    node,
-    singleLine,
-  } = props;
-  const nodeProps = node.props;
-  const { defaultProps } = getType(node.type);
-  if (!nodeProps || typeof nodeProps !== 'object') {
-    return <span />;
-  }
-
-  const { propValueStyle, propNameStyle } = stylesheet;
-
-  const names = Object.keys(nodeProps).filter(
-    name =>
-      name[0] !== '_' &&
-      name !== 'children' &&
-      (!defaultProps || nodeProps[name] !== defaultProps[name])
-  );
-
-  const breakIntoNewLines = names.length > maxPropsIntoLine;
-  const endingSpace = singleLine ? ' ' : '';
-
-  const items = [];
-  names.forEach((name, i) => {
-    items.push(
-      <span key={name}>
-        {breakIntoNewLines ? (
-          <span>
-            <br />
-            &nbsp;&nbsp;
-          </span>
-        ) : (
-          ' '
-        )}
-        <span style={propNameStyle}>{name}</span>
-        {/* Use implicit true: */}
-        {(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && (
-          <span>
-            =
-            <span style={propValueStyle}>
-              {typeof nodeProps[name] === 'string' ? '"' : '{'}
-              <PropVal
-                val={nodeProps[name]}
-                maxPropObjectKeys={maxPropObjectKeys}
-                maxPropArrayLength={maxPropArrayLength}
-                maxPropStringLength={maxPropStringLength}
-                maxPropsIntoLine={maxPropsIntoLine}
-              />
-              {typeof nodeProps[name] === 'string' ? '"' : '}'}
-            </span>
-          </span>
-        )}
-
-        {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
-      </span>
-    );
-  });
-
-  return <span>{items}</span>;
-}
-
-Props.defaultProps = {
-  singleLine: false,
-};
-
-Props.propTypes = {
-  node: PropTypes.node.isRequired,
-  singleLine: PropTypes.bool,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-};
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
deleted file mode 100644
index 42f5026f0808..000000000000
--- a/addons/info/src/components/Story.js
+++ /dev/null
@@ -1,442 +0,0 @@
-/* eslint no-underscore-dangle: 0 */
-
-import React, { Fragment, Component, createElement } from 'react';
-import { isForwardRef } from 'react-is';
-import { polyfill } from 'react-lifecycles-compat';
-import PropTypes from 'prop-types';
-import global from 'global';
-
-import marksy from 'marksy';
-import jsxToString from 'react-element-to-jsx-string';
-import { Code } from './markdown';
-import { getDisplayName, getType } from '../react-utils';
-
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const { STORYBOOK_REACT_CLASSES } = global;
-
-const stylesheetBase = {
-  button: {
-    base: {
-      fontFamily: 'sans-serif',
-      fontSize: 12,
-      display: 'block',
-      position: 'fixed',
-      border: 'none',
-      background: '#027ac5',
-      color: '#fff',
-      padding: '5px 15px',
-      cursor: 'pointer',
-    },
-    topRight: {
-      top: 0,
-      right: 0,
-      borderRadius: '0 0 0 5px',
-    },
-  },
-  info: {
-    position: 'fixed',
-    background: 'white',
-    top: 0,
-    left: 0,
-    height: '100vh',
-    width: '100vw',
-    overflow: 'auto',
-    zIndex: 99999,
-  },
-  children: {
-    position: 'relative',
-    zIndex: 0,
-  },
-  infoBody: {
-    fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
-    color: 'black',
-    fontWeight: 300,
-    lineHeight: 1.45,
-    fontSize: '15px',
-    padding: '20px 40px 40px',
-    borderRadius: '2px',
-    backgroundColor: '#fff',
-  },
-  infoContent: {
-    marginBottom: 0,
-  },
-  infoStory: {},
-  jsxInfoContent: {
-    borderTop: '1px solid #eee',
-    margin: '20px 0 0 0',
-  },
-  header: {
-    h1: {
-      margin: 0,
-      padding: 0,
-      fontSize: '35px',
-    },
-    h2: {
-      margin: '0 0 10px 0',
-      padding: 0,
-      fontWeight: 400,
-      fontSize: '22px',
-    },
-    h3: {
-      margin: '0 0 10px 0',
-      padding: 0,
-      fontWeight: 400,
-      fontSize: '18px',
-    },
-    body: {
-      borderBottom: '1px solid #eee',
-      paddingTop: 10,
-      marginBottom: 10,
-    },
-  },
-  source: {
-    h1: {
-      margin: '20px 0 0 0',
-      padding: '0 0 5px 0',
-      fontSize: '25px',
-      borderBottom: '1px solid #EEE',
-    },
-  },
-  propTableHead: {
-    margin: '20px 0 0 0',
-  },
-};
-
-class Story extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = {
-      open: false,
-    };
-    this.marksy = marksy({
-      createElement,
-      elements: props.components,
-    });
-  }
-
-  _renderStory() {
-    const { stylesheet } = this.state;
-    const { children } = this.props;
-
-    return (
-      <div id="story-root" style={stylesheet.infoStory}>
-        {children}
-      </div>
-    );
-  }
-
-  _renderInline() {
-    const { stylesheet } = this.state;
-
-    return (
-      <Fragment>
-        {this._renderInlineHeader()}
-        {this._renderStory()}
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody}>
-            {this._getInfoContent()}
-            {this._getComponentDescription()}
-            {this._getSourceCode()}
-            {this._getPropTables()}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
-  _renderInlineHeader() {
-    const { stylesheet } = this.state;
-
-    const infoHeader = this._getInfoHeader();
-
-    return (
-      infoHeader && (
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody}>{infoHeader}</div>
-        </div>
-      )
-    );
-  }
-
-  _renderOverlay() {
-    const { stylesheet, open } = this.state;
-    const { children } = this.props;
-
-    const buttonStyle = {
-      ...stylesheet.button.base,
-      ...stylesheet.button.topRight,
-    };
-
-    const infoStyle = { ...stylesheet.info };
-    if (!open) {
-      infoStyle.display = 'none';
-    }
-
-    const openOverlay = () => {
-      this.setState({ open: true });
-      return false;
-    };
-
-    const closeOverlay = () => {
-      this.setState({ open: false });
-      return false;
-    };
-
-    return (
-      <Fragment>
-        <div style={stylesheet.children}>{children}</div>
-        <button
-          type="button"
-          style={buttonStyle}
-          onClick={openOverlay}
-          className="info__show-button"
-        >
-          Show Info
-        </button>
-        {open ? (
-          <div style={infoStyle} className="info__overlay">
-            <button
-              type="button"
-              style={buttonStyle}
-              onClick={closeOverlay}
-              className="info__close-button"
-            >
-              ×
-            </button>
-            <div style={stylesheet.infoPage}>
-              <div style={stylesheet.infoBody}>
-                {this._getInfoHeader()}
-                {this._getInfoContent()}
-                {this._getComponentDescription()}
-                {this._getSourceCode()}
-                {this._getPropTables()}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </Fragment>
-    );
-  }
-
-  _getInfoHeader() {
-    const { stylesheet } = this.state;
-    const { context, showHeader } = this.props;
-
-    if (!context || !showHeader) {
-      return null;
-    }
-
-    return (
-      <div style={stylesheet.header.body}>
-        <h1 style={stylesheet.header.h1}>{context.kind}</h1>
-        <h2 style={stylesheet.header.h2}>{context.name}</h2>
-      </div>
-    );
-  }
-
-  _getInfoContent() {
-    const { info, showInline } = this.props;
-    const { stylesheet } = this.state;
-
-    if (!info) {
-      return '';
-    }
-
-    if (React.isValidElement(info)) {
-      return (
-        <div style={showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>{info}</div>
-      );
-    }
-
-    const lines = info.split('\n');
-    while (lines[0].trim() === '') {
-      lines.shift();
-    }
-    let padding = 0;
-    const matches = lines[0].match(/^ */);
-    if (matches) {
-      padding = matches[0].length;
-    }
-    const source = lines.map(s => s.slice(padding)).join('\n');
-
-    return <Fragment>{this.marksy(source).tree}</Fragment>;
-  }
-
-  _getComponentDescription() {
-    const {
-      context: { kind, name },
-    } = this.props;
-    let retDiv = null;
-
-    const validMatches = [kind, name];
-
-    if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
-      Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
-        if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
-          const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
-          retDiv = <Fragment>{this.marksy(componentDescription).tree}</Fragment>;
-        }
-      });
-    }
-
-    return retDiv;
-  }
-
-  _getSourceCode() {
-    const { showSource, children } = this.props;
-    const { stylesheet } = this.state;
-
-    if (!showSource) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <h1 style={stylesheet.source.h1}>Story Source</h1>
-        <Code code={jsxToString(children)} language="jsx" format={false} />
-      </Fragment>
-    );
-  }
-
-  _getPropTables() {
-    const {
-      children,
-      propTablesExclude,
-      propTableCompare,
-      maxPropObjectKeys,
-      maxPropArrayLength,
-      maxPropStringLength,
-      excludedPropTypes,
-    } = this.props;
-    let { propTables } = this.props;
-    const { stylesheet } = this.state;
-    const types = new Map();
-
-    if (!propTables) {
-      return null;
-    }
-
-    if (!children) {
-      return null;
-    }
-
-    propTables.forEach(type => {
-      types.set(type, true);
-    });
-
-    // depth-first traverse and collect types
-    const extract = innerChildren => {
-      if (!innerChildren) {
-        return;
-      }
-      if (Array.isArray(innerChildren)) {
-        innerChildren.forEach(extract);
-        return;
-      }
-      if (innerChildren.props && innerChildren.props.children) {
-        extract(innerChildren.props.children);
-      }
-      if (isForwardRef(innerChildren)) {
-        try {
-          // this might fail because of hooks being used
-          extract(innerChildren.type.render(innerChildren.props));
-        } catch (e) {
-          // do nothing
-        }
-      }
-      if (
-        typeof innerChildren === 'string' ||
-        typeof innerChildren.type === 'string' ||
-        (propTables.length > 0 && // if propTables is set and has items in it
-          !propTables.includes(innerChildren.type)) || // ignore types that are missing from propTables
-        (Array.isArray(propTablesExclude) && // also ignore excluded types
-          propTablesExclude.some(Comp => propTableCompare(innerChildren, Comp)))
-      ) {
-        return;
-      }
-
-      if (innerChildren.type && !types.has(innerChildren.type)) {
-        types.set(innerChildren.type, true);
-      }
-    };
-
-    // extract components from children
-    extract(children);
-
-    const array = Array.from(types.keys());
-    array.sort((a, b) => (getDisplayName(a) > getDisplayName(b) ? 1 : -1));
-
-    propTables = array.map((type, i) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <div key={`${getDisplayName(type)}_${i}`}>
-        <h3 style={stylesheet.propTableHead}>"{getDisplayName(type)}" Component</h3>
-        <this.props.PropTable
-          type={getType(type)}
-          maxPropObjectKeys={maxPropObjectKeys}
-          maxPropArrayLength={maxPropArrayLength}
-          maxPropStringLength={maxPropStringLength}
-          excludedPropTypes={excludedPropTypes}
-        />
-      </div>
-    ));
-
-    if (!propTables || propTables.length === 0) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <h1 style={stylesheet.source.h1}>Prop Types</h1>
-        {propTables}
-      </Fragment>
-    );
-  }
-
-  render() {
-    const { showInline } = this.props;
-    return showInline ? this._renderInline() : this._renderOverlay();
-  }
-}
-
-Story.getDerivedStateFromProps = ({ styles }) => ({ stylesheet: styles(stylesheetBase) });
-
-Story.displayName = 'Story';
-
-Story.propTypes = {
-  context: PropTypes.shape({
-    kind: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  propTables: PropTypes.arrayOf(PropTypes.func),
-  propTablesExclude: PropTypes.arrayOf(PropTypes.func),
-  propTableCompare: PropTypes.func.isRequired,
-  showInline: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  showSource: PropTypes.bool,
-  // eslint-disable-next-line react/no-unused-prop-types
-  styles: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  components: PropTypes.shape({}),
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-};
-
-Story.defaultProps = {
-  context: null,
-  info: '',
-  children: null,
-  propTables: null,
-  propTablesExclude: [],
-  showInline: false,
-  showHeader: true,
-  showSource: true,
-  components: {},
-  excludedPropTypes: [],
-};
-
-polyfill(Story);
-
-export default Story;
diff --git a/addons/info/src/components/__snapshots__/PropTable.test.js.snap b/addons/info/src/components/__snapshots__/PropTable.test.js.snap
deleted file mode 100644
index d153afdfd080..000000000000
--- a/addons/info/src/components/__snapshots__/PropTable.test.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
-<small>
-  No propTypes defined!
-</small>
-`;
-
-exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
-Array [
-  <span>
-     
-    foo 
-  </span>,
-  <span>
-    <br />
-     
-     bar 
-  </span>,
-  <span>
-    <br />
-     
-     baz
-  </span>,
-]
-`;
-
-exports[`PropTable multiLineText should include all propTypes by default 1`] = `
-<Table>
-  <Thead>
-    <Tr>
-      <Th>
-        property
-      </Th>
-      <Th>
-        propType
-      </Th>
-      <Th>
-        required
-      </Th>
-      <Th>
-        default
-      </Th>
-      <Th>
-        description
-      </Th>
-    </Tr>
-  </Thead>
-  <Tbody>
-    <Tr
-      key="foo"
-    >
-      <Td>
-        foo
-      </Td>
-      <Td>
-        <PrettyPropType
-          depth={1}
-          propType={
-            Object {
-              "name": "string",
-            }
-          }
-        />
-      </Td>
-      <Td>
-        -
-      </Td>
-      <Td>
-        -
-      </Td>
-      <Td />
-    </Tr>
-  </Tbody>
-</Table>
-`;
diff --git a/addons/info/src/components/makeTableComponent.js b/addons/info/src/components/makeTableComponent.js
deleted file mode 100644
index 8842bcbcaaef..000000000000
--- a/addons/info/src/components/makeTableComponent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable no-underscore-dangle,react/forbid-foreign-prop-types */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const PropTypesMap = new Map();
-
-Object.keys(PropTypes).forEach(typeName => {
-  const type = PropTypes[typeName];
-
-  PropTypesMap.set(type, typeName);
-  PropTypesMap.set(type.isRequired, typeName);
-});
-
-const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
-
-const hasDocgen = type => isNotEmpty(type.__docgenInfo);
-
-const propsFromDocgen = type => {
-  const props = {};
-  const docgenInfoProps = type.__docgenInfo.props;
-
-  Object.keys(docgenInfoProps).forEach(property => {
-    const docgenInfoProp = docgenInfoProps[property];
-    const defaultValueDesc = docgenInfoProp.defaultValue || {};
-    const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
-
-    props[property] = {
-      property,
-      propType,
-      required: docgenInfoProp.required,
-      description: docgenInfoProp.description,
-      defaultValue: defaultValueDesc.value,
-    };
-  });
-
-  return props;
-};
-
-const propsFromPropTypes = type => {
-  const props = {};
-
-  if (type.propTypes) {
-    Object.keys(type.propTypes).forEach(property => {
-      const typeInfo = type.propTypes[property];
-      const required = typeInfo.isRequired === undefined;
-      const docgenInfo =
-        type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
-      const description = docgenInfo ? docgenInfo.description : null;
-      let propType = PropTypesMap.get(typeInfo) || 'other';
-
-      if (propType === 'other') {
-        if (docgenInfo && docgenInfo.type) {
-          propType = docgenInfo.type.name;
-        }
-      }
-
-      props[property] = { property, propType, required, description };
-    });
-  }
-
-  if (type.defaultProps) {
-    Object.keys(type.defaultProps).forEach(property => {
-      const value = type.defaultProps[property];
-
-      if (value === undefined) {
-        return;
-      }
-
-      if (!props[property]) {
-        props[property] = { property };
-      }
-
-      props[property].defaultValue = value;
-    });
-  }
-
-  return props;
-};
-
-export default function makeTableComponent(Component) {
-  const TableComponent = props => {
-    const { type } = props;
-    if (!type) {
-      return null;
-    }
-
-    const propDefinitionsMap = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
-    const propDefinitions = Object.values(propDefinitionsMap);
-
-    return <Component propDefinitions={propDefinitions} {...props} />;
-  };
-
-  TableComponent.propTypes = {
-    type: PropTypes.func.isRequired,
-  };
-
-  return TableComponent;
-}
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
deleted file mode 100644
index 4e6b24ba7de2..000000000000
--- a/addons/info/src/components/markdown/code.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SyntaxHighlighter } from '@storybook/components';
-import { ThemeProvider, convert } from '@storybook/theming';
-
-const Code = ({ code, language = 'plaintext', ...rest }) => (
-  <ThemeProvider theme={convert()}>
-    <SyntaxHighlighter bordered copyable format={false} language={language} {...rest}>
-      {code}
-    </SyntaxHighlighter>
-  </ThemeProvider>
-);
-Code.propTypes = {
-  language: PropTypes.string.isRequired,
-  code: PropTypes.string.isRequired,
-};
-
-export { Code };
-
-export function Blockquote({ children }) {
-  const style = {
-    fontSize: '1.88em',
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    borderLeft: '8px solid #fafafa',
-    padding: '1rem',
-  };
-  return <blockquote style={style}>{children}</blockquote>;
-}
-
-Blockquote.propTypes = { children: PropTypes.node };
-Blockquote.defaultProps = { children: null };
-
-export { default as Pre } from './pre/pre';
diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js
deleted file mode 100644
index 57da398d6422..000000000000
--- a/addons/info/src/components/markdown/htags.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const defaultProps = {
-  children: null,
-  id: null,
-};
-const propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string,
-};
-
-export function H1({ id, children }) {
-  const styles = {
-    borderBottom: '1px solid #eee',
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '40px',
-  };
-  return (
-    <h1 id={id} style={styles}>
-      {children}
-    </h1>
-  );
-}
-
-H1.defaultProps = defaultProps;
-H1.propTypes = propTypes;
-
-export function H2({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '30px',
-  };
-  return (
-    <h2 id={id} style={styles}>
-      {children}
-    </h2>
-  );
-}
-
-H2.defaultProps = defaultProps;
-H2.propTypes = propTypes;
-
-export function H3({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '22px',
-    textTransform: 'uppercase',
-  };
-  return (
-    <h3 id={id} style={styles}>
-      {children}
-    </h3>
-  );
-}
-
-H3.defaultProps = defaultProps;
-H3.propTypes = propTypes;
-
-export function H4({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '20px',
-  };
-  return (
-    <h4 id={id} style={styles}>
-      {children}
-    </h4>
-  );
-}
-
-H4.defaultProps = defaultProps;
-H4.propTypes = propTypes;
-
-export function H5({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '18px',
-  };
-  return (
-    <h5 id={id} style={styles}>
-      {children}
-    </h5>
-  );
-}
-
-H5.defaultProps = defaultProps;
-H5.propTypes = propTypes;
-
-export function H6({ id, children }) {
-  const styles = {
-    fontWeight: 400,
-    margin: 0,
-    padding: 0,
-    fontSize: '18px',
-  };
-  return (
-    <h6 id={id} style={styles}>
-      {children}
-    </h6>
-  );
-}
-
-H6.defaultProps = defaultProps;
-H6.propTypes = propTypes;
diff --git a/addons/info/src/components/markdown/index.js b/addons/info/src/components/markdown/index.js
deleted file mode 100644
index 2c9ff6ea3064..000000000000
--- a/addons/info/src/components/markdown/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { H1, H2, H3, H4, H5, H6 } from './htags';
-export { Code, Pre } from './code';
-export { P, A, LI, UL } from './text';
diff --git a/addons/info/src/components/markdown/pre/copy.js b/addons/info/src/components/markdown/pre/copy.js
deleted file mode 100644
index 8142b089573e..000000000000
--- a/addons/info/src/components/markdown/pre/copy.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable no-undef */
-export default function copy(str) {
-  const tmp = document.createElement('TEXTAREA');
-  const focus = document.activeElement;
-
-  tmp.value = str;
-
-  document.body.appendChild(tmp);
-  tmp.select();
-  document.execCommand('copy');
-  document.body.removeChild(tmp);
-  focus.focus();
-}
diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
deleted file mode 100644
index cf44fa8c3b53..000000000000
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function CopyButton({ onClick, toggled }) {
-  const toggleText = 'Copied!';
-  const text = 'Copy';
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      style={{
-        backgroundColor: 'rgb(255, 255, 255)',
-        cursor: 'pointer',
-        fontSize: '13px',
-        alignSelf: 'flex-start',
-        flexShrink: '0',
-        overflow: 'hidden',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(238, 238, 238)',
-        borderImage: 'initial',
-        borderRadius: 3,
-        padding: '3px 10px',
-      }}
-    >
-      {toggled ? toggleText : text}
-    </button>
-  );
-}
-
-CopyButton.propTypes = {
-  onClick: PropTypes.func,
-  toggled: PropTypes.bool,
-};
-
-CopyButton.defaultProps = {
-  onClick: () => {},
-  toggled: false,
-};
-
-export default CopyButton;
diff --git a/addons/info/src/components/markdown/pre/pre.js b/addons/info/src/components/markdown/pre/pre.js
deleted file mode 100644
index 160b2c09a964..000000000000
--- a/addons/info/src/components/markdown/pre/pre.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import CopyButton from './copyButton';
-import copy from './copy';
-
-const TOGGLE_TIMEOUT = 1800;
-
-class Pre extends React.Component {
-  state = {
-    copied: false,
-  };
-
-  setRef = elem => {
-    this.pre = elem;
-  };
-
-  handleClick = () => {
-    const text = this.pre && this.pre.innerText;
-
-    if (!text) {
-      return;
-    }
-
-    copy(text);
-    this.setState({ copied: true });
-
-    clearTimeout(this.timeout);
-
-    this.timeout = setTimeout(() => {
-      this.setState({ copied: false });
-    }, TOGGLE_TIMEOUT);
-  };
-
-  render() {
-    const { theme, children } = this.props;
-    const { pre } = theme;
-    const { copied } = this.state;
-
-    return (
-      <pre
-        style={{
-          ...{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            fontSize: '.88em',
-            fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-            backgroundColor: '#fafafa',
-            padding: '.5rem',
-            lineHeight: 1.5,
-            overflowX: 'scroll',
-          },
-          ...pre,
-        }}
-      >
-        <div ref={this.setRef}>{children}</div>
-        <CopyButton onClick={this.handleClick} toggled={copied} />
-      </pre>
-    );
-  }
-}
-
-Pre.propTypes = {
-  children: PropTypes.node,
-  theme: PropTypes.shape({
-    pre: PropTypes.object,
-  }),
-};
-
-Pre.defaultProps = {
-  children: null,
-  theme: {},
-};
-
-export default Pre;
diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js
deleted file mode 100644
index 356a4575cd5e..000000000000
--- a/addons/info/src/components/markdown/text.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const defaultProps = { children: null };
-const propTypes = { children: PropTypes.node };
-
-export function P({ children }) {
-  return <p>{children}</p>;
-}
-
-P.defaultProps = defaultProps;
-P.propTypes = propTypes;
-
-export function LI({ children }) {
-  return <li>{children}</li>;
-}
-
-LI.defaultProps = defaultProps;
-LI.propTypes = propTypes;
-
-export function UL({ children }) {
-  return <ul>{children}</ul>;
-}
-
-UL.defaultProps = defaultProps;
-UL.propTypes = propTypes;
-
-export function A({ href, children }) {
-  const style = {
-    color: '#3498db',
-  };
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={style}>
-      {children}
-    </a>
-  );
-}
-
-A.defaultProps = defaultProps;
-A.propTypes = { children: PropTypes.node, href: PropTypes.string.isRequired };
diff --git a/addons/info/src/components/types/ArrayOf.js b/addons/info/src/components/types/ArrayOf.js
deleted file mode 100644
index 28f1dffe8156..000000000000
--- a/addons/info/src/components/types/ArrayOf.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const ArrayOf = ({ propType }) => (
-  <span>
-    <span>[</span>
-    <span>
-      <PrettyPropType propType={getPropTypes(propType)} />
-    </span>
-    <span>]</span>
-  </span>
-);
-
-ArrayOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default ArrayOf;
diff --git a/addons/info/src/components/types/Enum.js b/addons/info/src/components/types/Enum.js
deleted file mode 100644
index 2de8d4830a87..000000000000
--- a/addons/info/src/components/types/Enum.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const Enum = ({ propType }) => (
-  <span>
-    {getPropTypes(propType)
-      .map(({ value }) => value)
-      .join(' | ')}
-  </span>
-);
-
-Enum.propTypes = {
-  propType: TypeInfo.isRequired,
-};
diff --git a/addons/info/src/components/types/InstanceOf.js b/addons/info/src/components/types/InstanceOf.js
deleted file mode 100644
index 786c77fdd399..000000000000
--- a/addons/info/src/components/types/InstanceOf.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const InstanceOf = ({ propType }) => <span>{getPropTypes(propType)}</span>;
-
-InstanceOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default InstanceOf;
diff --git a/addons/info/src/components/types/Literal.js b/addons/info/src/components/types/Literal.js
deleted file mode 100644
index 83b222e40788..000000000000
--- a/addons/info/src/components/types/Literal.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo } from './proptypes';
-
-const Literal = ({ propType }) => <span>{propType.value}</span>;
-
-Literal.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default Literal;
diff --git a/addons/info/src/components/types/ObjectOf.js b/addons/info/src/components/types/ObjectOf.js
deleted file mode 100644
index 48a56d91026f..000000000000
--- a/addons/info/src/components/types/ObjectOf.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const ObjectOf = ({ propType }) => (
-  <span>
-    {'{[<key>]: '}
-    <PrettyPropType propType={getPropTypes(propType)} />
-    {'}'}
-  </span>
-);
-
-ObjectOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default ObjectOf;
diff --git a/addons/info/src/components/types/OneOf.js b/addons/info/src/components/types/OneOf.js
deleted file mode 100644
index deacfa4633e8..000000000000
--- a/addons/info/src/components/types/OneOf.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const joinValues = propTypes => propTypes.map(({ value }) => value).join(' | ');
-
-const OneOf = ({ propType }) => {
-  const propTypes = getPropTypes(propType);
-  return <span>{`oneOf ${Array.isArray(propTypes) ? joinValues(propTypes) : propTypes}`}</span>;
-};
-
-OneOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default OneOf;
diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js
deleted file mode 100644
index 2b269d0dad68..000000000000
--- a/addons/info/src/components/types/OneOfType.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const OneOfType = ({ propType }) => {
-  const propTypes = getPropTypes(propType);
-  return (
-    <span>
-      {propTypes
-        .map((value, i) => {
-          const key = `${value.name}${value.value ? `-${value.value}` : ''}`;
-          return [
-            <PrettyPropType key={key} propType={value} />,
-            i < propTypes.length - 1 ? <span key={`${key}-separator`}> | </span> : null,
-          ];
-        })
-        .reduce((acc, tuple) => acc.concat(tuple), [])}
-    </span>
-  );
-};
-OneOfType.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-export default OneOfType;
diff --git a/addons/info/src/components/types/PrettyPropType.js b/addons/info/src/components/types/PrettyPropType.js
deleted file mode 100644
index ff7ea413614b..000000000000
--- a/addons/info/src/components/types/PrettyPropType.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable import/no-cycle */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import Shape from './Shape';
-import OneOfType from './OneOfType';
-import ArrayOf from './ArrayOf';
-import ObjectOf from './ObjectOf';
-import OneOf from './OneOf';
-import InstanceOf from './InstanceOf';
-import Signature from './Signature';
-import Literal from './Literal';
-
-import { TypeInfo } from './proptypes';
-
-// propType -> Component map - these are a bit more complex prop types to display
-const propTypeComponentMap = new Map([
-  ['shape', Shape],
-  ['union', OneOfType],
-  ['arrayOf', ArrayOf],
-  ['objectOf', ObjectOf],
-  // Might be overkill to have below proptypes as separate components *shrug*
-  ['literal', Literal],
-  ['enum', OneOf],
-  ['instanceOf', InstanceOf],
-  ['signature', Signature],
-]);
-
-const PrettyPropType = props => {
-  const { propType, depth } = props;
-  if (!propType) {
-    return <span>unknown</span>;
-  }
-
-  if (propTypeComponentMap.has(propType.name)) {
-    const Component = propTypeComponentMap.get(propType.name);
-    return <Component propType={propType} depth={depth} />;
-  }
-
-  // Otherwise, propType does not have a dedicated component, display proptype name by default
-  return <span>{propType.name || propType}</span>;
-};
-
-PrettyPropType.displayName = 'PrettyPropType';
-
-PrettyPropType.defaultProps = {
-  propType: null,
-  depth: 1,
-};
-
-PrettyPropType.propTypes = {
-  propType: TypeInfo,
-  depth: PropTypes.number,
-};
-
-export default PrettyPropType;
diff --git a/addons/info/src/components/types/PropertyLabel.js b/addons/info/src/components/types/PropertyLabel.js
deleted file mode 100644
index d5ad3d896fab..000000000000
--- a/addons/info/src/components/types/PropertyLabel.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const styles = {
-  hasProperty: {
-    whiteSpace: 'nowrap',
-  },
-};
-
-const PropertyLabel = ({ property, required }) => {
-  if (!property) return null;
-
-  return (
-    <span style={styles.hasProperty}>
-      {property}
-      {required ? '' : '?'}:&nbsp;
-    </span>
-  );
-};
-
-PropertyLabel.propTypes = {
-  property: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-PropertyLabel.defaultProps = {
-  property: '',
-  required: false,
-};
-
-export default PropertyLabel;
diff --git a/addons/info/src/components/types/Shape.js b/addons/info/src/components/types/Shape.js
deleted file mode 100644
index a9f1b6c5affc..000000000000
--- a/addons/info/src/components/types/Shape.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint-disable import/no-cycle */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import PropertyLabel from './PropertyLabel';
-
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const MARGIN_SIZE = 15;
-
-const HighlightButton = props => (
-  <button
-    type="button"
-    {...props}
-    style={{
-      display: 'inline-block',
-      background: 'none',
-      border: '0 none',
-      color: 'gray',
-      cursor: 'pointer',
-    }}
-  />
-);
-
-class Shape extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      minimized: false,
-    };
-  }
-
-  handleToggle = () => {
-    const { minimized } = this.state;
-    this.setState({
-      minimized: !minimized,
-    });
-  };
-
-  render() {
-    const { propType, depth } = this.props;
-    const { minimized } = this.state;
-
-    const propTypes = getPropTypes(propType);
-    return (
-      <span>
-        <HighlightButton onClick={this.handleToggle}>{'{'}</HighlightButton>
-        <HighlightButton onClick={this.handleToggle}>...</HighlightButton>
-        {!minimized &&
-          Object.keys(propTypes).map(childProperty => (
-            <div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
-              <PropertyLabel
-                property={childProperty}
-                required={propTypes[childProperty].required}
-              />
-              <PrettyPropType depth={depth + 1} propType={propTypes[childProperty]} />,
-            </div>
-          ))}
-
-        <HighlightButton onClick={this.handleToggle}>{'}'}</HighlightButton>
-      </span>
-    );
-  }
-}
-
-Shape.propTypes = {
-  propType: TypeInfo,
-  depth: PropTypes.number.isRequired,
-};
-
-Shape.defaultProps = {
-  propType: null,
-};
-
-export default Shape;
diff --git a/addons/info/src/components/types/Signature.js b/addons/info/src/components/types/Signature.js
deleted file mode 100644
index 3e0de0fb570d..000000000000
--- a/addons/info/src/components/types/Signature.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo } from './proptypes';
-
-const Signature = ({ propType }) => <span>{propType.raw}</span>;
-
-Signature.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default Signature;
diff --git a/addons/info/src/components/types/proptypes.js b/addons/info/src/components/types/proptypes.js
deleted file mode 100644
index ae5e28f942d1..000000000000
--- a/addons/info/src/components/types/proptypes.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import PropTypes, { oneOfType } from 'prop-types';
-
-export const TypeInfo = oneOfType([
-  PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.any,
-  }),
-  PropTypes.string,
-]);
-
-export const getPropTypes = propType =>
-  typeof propType === 'string' ? propType : propType.value || propType.elements;
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
deleted file mode 100644
index 32223bf6693d..000000000000
--- a/addons/info/src/index.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import nestedObjectAssign from 'nested-object-assign';
-import deprecate from 'util-deprecate';
-import { makeDecorator } from '@storybook/addons';
-import { logger } from '@storybook/client-logger';
-import Story from './components/Story';
-import PropTable from './components/PropTable/index';
-import makeTableComponent from './components/makeTableComponent';
-import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
-
-const defaultOptions = {
-  inline: false,
-  header: true,
-  source: true,
-  propTables: [],
-  propTableCompare: (element, Component) =>
-    // https://github.com/gaearon/react-hot-loader#checking-element-types
-    typeof reactHotLoaderGlobal === 'undefined'
-      ? element.type === Component
-      : // eslint-disable-next-line no-undef
-        reactHotLoaderGlobal.areComponentsEqual(element.type, Component),
-  TableComponent: PropTable,
-  maxPropsIntoLine: 3,
-  maxPropObjectKeys: 3,
-  maxPropArrayLength: 3,
-  maxPropStringLength: 50,
-};
-
-const defaultComponents = {
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  code: Code,
-  p: P,
-  a: A,
-  li: LI,
-  ul: UL,
-};
-
-let hasWarned = false;
-
-function addInfo(storyFn, context, infoOptions) {
-  const options = {
-    ...defaultOptions,
-    ...infoOptions,
-  };
-
-  // props.propTables can only be either an array of components or null
-  // propTables option is allowed to be set to 'false' (a boolean)
-  // if the option is false, replace it with null to avoid react warnings
-  if (!options.propTables) {
-    options.propTables = null;
-  }
-
-  const components = { ...defaultComponents };
-  if (options && options.components) {
-    Object.assign(components, options.components);
-  }
-  if (options && options.marksyConf) {
-    if (!hasWarned) {
-      logger.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"');
-      hasWarned = true;
-    }
-
-    Object.assign(components, options.marksyConf);
-  }
-  const props = {
-    info: options.text,
-    context,
-    showInline: Boolean(options.inline),
-    showHeader: Boolean(options.header),
-    showSource: Boolean(options.source),
-    styles:
-      typeof options.styles === 'function'
-        ? options.styles
-        : s => nestedObjectAssign({}, s, options.styles),
-    propTables: options.propTables,
-    propTablesExclude: options.propTablesExclude,
-    propTableCompare: options.propTableCompare,
-    PropTable: makeTableComponent(options.TableComponent),
-    components,
-    maxPropObjectKeys: options.maxPropObjectKeys,
-    maxPropArrayLength: options.maxPropArrayLength,
-    maxPropsIntoLine: options.maxPropsIntoLine,
-    maxPropStringLength: options.maxPropStringLength,
-    excludedPropTypes: options.excludedPropTypes,
-  };
-  return <Story {...props}>{storyFn(context)}</Story>;
-}
-
-export const withInfo = makeDecorator({
-  name: 'withInfo',
-  parameterName: 'info',
-  allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
-    const storyOptions = parameters || options;
-    const infoOptions = typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
-    const mergedOptions =
-      typeof infoOptions === 'string' ? infoOptions : { ...options, ...infoOptions };
-    return addInfo(getStory, context, mergedOptions);
-  },
-});
-
-export { Story };
-
-export function setDefaults(newDefaults) {
-  return deprecate(
-    () => Object.assign(defaultOptions, newDefaults),
-    'setDefaults is deprecated. Instead, you can pass options into withInfo(options) directly, or use the info parameter.'
-  )();
-}
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
deleted file mode 100644
index 7152f4a58b82..000000000000
--- a/addons/info/src/index.test.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { withInfo, setDefaults } from '.';
-import externalMdDocs from '../README.md';
-
-const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
-  <div>
-    <h1>{String(func)}</h1>
-    <h2>{String(obj)}</h2>
-    <h3>{String(array)}</h3>
-    <h4>{String(number)}</h4>
-    <h5>{String(string)}</h5>
-    <h6>{String(bool)}</h6>
-    <p>{String(empty)}</p>
-    <a href="#">test</a>
-    <code>storiesOf</code>
-    <ul>
-      <li>1</li>
-      <li>2</li>
-    </ul>
-  </div>
-);
-
-const reactClassPath = 'some/path/TestComponent.jsx';
-const storybookReactClassMock = {
-  name: 'TestComponent',
-  path: reactClassPath,
-  docgenInfo: {
-    description: `
-# Awesome test component description
-## with markdown support
-**bold** *cursive*
-\`\`\`js
-a;
-\`\`\``,
-    name: 'TestComponent',
-  },
-};
-
-const testOptions = { propTables: false };
-
-const testMarkdown = `# Test story
-## with markdown info
-containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;
-
-describe('addon Info', () => {
-  const createStoryFn = Component => ({ name }) => (
-    <div>
-      It's a {name} story:
-      <Component
-        func={x => x + 1}
-        obj={{ a: 'a', b: 'b' }}
-        array={[1, 2, 3]}
-        number={7}
-        string="seven"
-        bool
-      />
-    </div>
-  );
-  const storyFn = createStoryFn(TestComponent);
-
-  it('should render <Info /> and markdown', () => {
-    const Info = withInfo(testMarkdown)(storyFn);
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-  it('should render <Info /> and external markdown', () => {
-    const Info = withInfo(externalMdDocs)(storyFn);
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-  it('should render with text options', () => {
-    const Info = withInfo({ text: 'some text here' })(storyFn);
-    mount(<Info />);
-  });
-  it('should render with missed info', () => {
-    setDefaults(testOptions);
-    const Info = withInfo()(storyFn);
-    mount(<Info />);
-  });
-  it('should render <Info /> for memoized component', () => {
-    const MemoizedTestComponent = React.memo(TestComponent);
-    const Info = withInfo()(createStoryFn(MemoizedTestComponent));
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-
-  it('should render component description if story kind matches component', () => {
-    const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
-
-    const Info = () =>
-      withInfo({ inline: true, propTables: false })(storyFn, {
-        kind: 'TestComponent',
-        name: 'Basic test',
-      });
-
-    expect(mount(<Info />)).toMatchSnapshot();
-
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
-  });
-
-  it('should render component description if story name matches component', () => {
-    const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
-
-    const Info = () =>
-      withInfo({ inline: true, propTables: false })(storyFn, {
-        kind: 'Test Components',
-        name: 'TestComponent',
-      });
-
-    expect(mount(<Info />)).toMatchSnapshot();
-
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
-  });
-});
diff --git a/addons/info/src/react-utils.js b/addons/info/src/react-utils.js
deleted file mode 100644
index c85ff7bb90eb..000000000000
--- a/addons/info/src/react-utils.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { isMemo } from 'react-is';
-
-export function getType(typeOrMemo) {
-  return isMemo(typeOrMemo) ? typeOrMemo.type : typeOrMemo;
-}
-
-export function getDisplayName(typeOrMemo) {
-  if (typeof typeOrMemo === 'string') {
-    return typeOrMemo;
-  }
-
-  const type = getType(typeOrMemo);
-  return type.displayName || type.name || 'Unknown';
-}
diff --git a/addons/jest/README.md b/addons/jest/README.md
index fa3b1f2433b8..10b97de36c56 100644
--- a/addons/jest/README.md
+++ b/addons/jest/README.md
@@ -4,7 +4,7 @@ Brings Jest results in storybook.
 
 [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
 
-[![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook-addon-jest/master/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
+[![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
 
 > Checkout the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
 
@@ -73,8 +73,8 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-jest/register']
-}
+  addons: ['@storybook/addon-jest'],
+};
 ```
 
 ## Usage
@@ -92,13 +92,9 @@ export default {
   decorators: [withTests({ results })],
 };
 
-export const defaultView = () => (
-  <div>Jest results in storybook</div>
-);
-defaultView.story = {
-  parameters: {
-    jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
-  },
+export const defaultView = () => <div>Jest results in storybook</div>;
+defaultView.parameters = {
+  jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
 };
 ```
 
@@ -126,13 +122,9 @@ export default {
   title: 'MyComponent',
 };
 
-export const defaultView = () => (
-  <div>Jest results in storybook</div>
-);
-defaultView.story = {
-  parameters: {
-    jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
-  },
+export const defaultView = () => <div>Jest results in storybook</div>;
+defaultView.parameters = {
+  jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
 };
 ```
 
@@ -147,13 +139,9 @@ export default {
   title: 'MyComponent',
 };
 
-export const defaultView = () => (
-  <div>Jest results in storybook</div>
-);
-defaultView.story = {
-  parameters: {
-    jest: { disable: true },
-  },
+export const defaultView = () => <div>Jest results in storybook</div>;
+defaultView.parameters = {
+  jest: { disable: true },
 };
 ```
 
diff --git a/addons/jest/docs/storybook-addon-jest.gif b/addons/jest/docs/storybook-addon-jest.gif
index 4b6c71b6f9f1..4e94db960f21 100644
Binary files a/addons/jest/docs/storybook-addon-jest.gif and b/addons/jest/docs/storybook-addon-jest.gif differ
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 7fba6ed7a0fa..3405ac8de5e1 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -22,36 +22,47 @@
   },
   "license": "MIT",
   "author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
     "react-sizeme": "^2.5.2",
-    "upath": "^1.1.0",
-    "util-deprecate": "^1.0.2"
+    "regenerator-runtime": "^0.13.3",
+    "upath": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.2"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/jest/src/components/Message.tsx b/addons/jest/src/components/Message.tsx
index b87dccac668a..d58451260d02 100644
--- a/addons/jest/src/components/Message.tsx
+++ b/addons/jest/src/components/Message.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 const positiveConsoleRegex = /\[32m(.*?)\[39m/;
@@ -51,10 +51,6 @@ const StatusColor = styled.strong<{ status: string }>(({ status, theme }) => ({
   fontWeight: 500,
 }));
 
-const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
-  padding: 5,
-});
-
 const colorizeText: (msg: string, type: string) => MsgElement[] = (msg: string, type: string) => {
   if (type) {
     return msg
@@ -77,12 +73,9 @@ const getConvertedText: (msg: string) => MsgElement[] = (msg: string) => {
 
   if (!msg) return elementArray;
 
-  const splitText = msg
-    .split(/\[2m/)
-    .join('')
-    .split(/\[22m/);
+  const splitText = msg.split(/\[2m/).join('').split(/\[22m/);
 
-  splitText.forEach(element => {
+  splitText.forEach((element) => {
     if (element && element.trim()) {
       if (
         element.indexOf(failStartToken) > -1 &&
@@ -114,12 +107,7 @@ const getTestDetail: (msg: string) => TestDetail = (msg: string) => {
     const current = lines[index];
     const next = lines[index + 1];
 
-    if (
-      current
-        .trim()
-        .toLowerCase()
-        .indexOf(stackTraceStartToken) === 0
-    ) {
+    if (current.trim().toLowerCase().indexOf(stackTraceStartToken) === 0) {
       testDetail.stackTrace += `${current.trim()}\n`;
     } else if (current.trim().indexOf(titleEndToken) > -1) {
       let title;
@@ -148,7 +136,7 @@ interface MessageProps {
   msg: string;
 }
 
-export const Message = (props: any) => {
+export const Message: FunctionComponent<MessageProps> = (props) => {
   const { msg } = props;
 
   const detail: TestDetail = getTestDetail(msg);
diff --git a/addons/jest/src/components/Result.tsx b/addons/jest/src/components/Result.tsx
index 14cbe8d50c16..43545d03939a 100644
--- a/addons/jest/src/components/Result.tsx
+++ b/addons/jest/src/components/Result.tsx
@@ -1,4 +1,4 @@
-import React, { Component, Fragment, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import Message from './Message';
@@ -41,10 +41,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
 }));
 
 const capitalizeFirstLetter = (text: string) => {
-  return text
-    .charAt(0)
-    .toUpperCase()
-    .concat(text.slice(1));
+  return text.charAt(0).toUpperCase().concat(text.slice(1));
 };
 
 interface ResultProps {
diff --git a/addons/jest/src/index.ts b/addons/jest/src/index.ts
index 8deb37063493..2e90287ab39c 100644
--- a/addons/jest/src/index.ts
+++ b/addons/jest/src/index.ts
@@ -1,5 +1,4 @@
-import addons, { Parameters, StoryFn } from '@storybook/addons';
-import deprecate from 'util-deprecate';
+import addons, { Parameters } from '@storybook/addons';
 import { normalize, sep } from 'upath';
 import { ADD_TESTS } from './shared';
 
@@ -12,7 +11,7 @@ const findTestResults = (
   jestTestResults: { testResults: { name: string }[] },
   jestTestFilesExt: string
 ) =>
-  Object.values(testFiles).map(name => {
+  Object.values(testFiles).map((name) => {
     const fileName = `${sep}${name}${jestTestFilesExt}`;
 
     if (jestTestResults && jestTestResults.testResults) {
@@ -21,7 +20,7 @@ const findTestResults = (
       return {
         fileName,
         name,
-        result: jestTestResults.testResults.find(test =>
+        result: jestTestResults.testResults.find((test) =>
           Boolean(normalize(test.name).match(fileNamePattern))
         ),
       };
@@ -55,14 +54,6 @@ export const withTests = (userOptions: { results: any; filesExt?: string }) => {
   const options = { ...defaultOptions, ...userOptions };
 
   return (...args: any[]) => {
-    if (typeof args[0] === 'string') {
-      return deprecate((storyFn: StoryFn<any>, { kind }: Parameters) => {
-        emitAddTests({ kind, story: storyFn, testFiles: (args as any) as string[], options });
-
-        return storyFn();
-      }, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
-    }
-
     const [storyFn, { kind, parameters = {} }] = args;
     let { jest: testFiles } = parameters;
 
diff --git a/addons/jest/src/register.tsx b/addons/jest/src/register.tsx
index 6537ad61373a..4db72017ce74 100644
--- a/addons/jest/src/register.tsx
+++ b/addons/jest/src/register.tsx
@@ -4,9 +4,9 @@ import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 import Panel from './components/Panel';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
-    title: 'tests',
+    title: 'Tests',
     render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
diff --git a/addons/knobs/README.md b/addons/knobs/README.md
index 4f8caa1a6ce3..a7bcd2683c47 100644
--- a/addons/knobs/README.md
+++ b/addons/knobs/README.md
@@ -23,35 +23,34 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-knobs/register']
-}
+  addons: ['@storybook/addon-knobs'],
+};
 ```
 
 Now, write your stories with Knobs.
 
 ### With React
+
 ```js
-import React from "react";
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import React from 'react';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 export default {
-  title: "Storybook Knobs",
-  decorators: [withKnobs]
+  title: 'Storybook Knobs',
+  decorators: [withKnobs],
 };
 // Add the `withKnobs` decorator to add knobs support to your stories.
 // You can also configure `withKnobs` as a global decorator.
 
 // Knobs for React props
 export const withAButton = () => (
-  <button disabled={boolean("Disabled", false)}>
-    {text("Label", "Hello Storybook")}
-  </button>
+  <button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>
 );
 
 // Knobs as dynamic variables.
 export const asDynamicVariables = () => {
-  const name = text("Name", "James");
-  const age = number("Age", 35);
+  const name = text('Name', 'James');
+  const age = number('Age', 35);
   const content = `I am ${name} and I'm ${age} years old.`;
 
   return <div>{content}</div>;
@@ -59,7 +58,9 @@ export const asDynamicVariables = () => {
 ```
 
 ### With Vue.js
+
 MyButton.story.js:
+
 ```js
 import { storiesOf } from '@storybook/vue';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
@@ -67,8 +68,8 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import MyButton from './MyButton.vue';
 
 export default {
-  title: "Storybook Knobs",
-  decorators: [withKnobs]
+  title: 'Storybook Knobs',
+  decorators: [withKnobs],
 };
 
 // Assign `props` to the story's component, calling
@@ -76,21 +77,22 @@ export default {
 // then pass the story's prop data to the component’s prop in
 // the template with `v-bind:` or by placing the prop within
 // the component’s slot.
-export const withKnobs = () => ({
+export const exampleWithKnobs = () => ({
   components: { MyButton },
   props: {
     isDisabled: {
-      default: boolean('Disabled', false)
+      default: boolean('Disabled', false),
     },
     text: {
-      default: text('Text', 'Hello Storybook')
-    }
+      default: text('Text', 'Hello Storybook'),
+    },
   },
-  template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`
+  template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`,
 });
 ```
 
 MyButton.vue:
+
 ```vue
 <template>
   <button :disabled="isDisabled">
@@ -103,14 +105,15 @@ export default {
   props: {
     isDisabled: {
       type: Boolean,
-      default: false
-    }
-  }
-}
+      default: false,
+    },
+  },
+};
 </script>
 ```
 
 ### With Angular
+
 ```js
 import { storiesOf } from '@storybook/angular';
 import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
@@ -118,8 +121,8 @@ import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
 import { Button } from '@storybook/angular/demo';
 
 export default {
-  title: "Storybook Knobs",
-  decorators: [withKnobs]
+  title: 'Storybook Knobs',
+  decorators: [withKnobs],
 };
 
 export const withKnobs = () => ({
@@ -131,9 +134,10 @@ export const withKnobs = () => ({
 ```
 
 ### With Ember
+
 ```js
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'StoryBook with Knobs',
@@ -160,9 +164,9 @@ export const inGroups = () => {
   const personalGroupId = 'personal info';
   const generalGroupId = 'general info';
 
-  const name = text("Name", "James", personalGroupId);
-  const age = number("Age", 35, personalGroupId);
-  const message = text("Hello!", 35, generalGroupId);
+  const name = text('Name', 'James', personalGroupId);
+  const age = number('Age', 35, { min: 0, max: 99 }, personalGroupId);
+  const message = text('Hello!', 35, generalGroupId);
   const content = `
     I am ${name} and I'm ${age} years old.
     ${message}
@@ -245,10 +249,10 @@ import { number } from '@storybook/addon-knobs';
 const label = 'Temperature';
 const defaultValue = 73;
 const options = {
-   range: true,
-   min: 60,
-   max: 90,
-   step: 1,
+  range: true,
+  min: 60,
+  max: 90,
+  step: 1,
 };
 const groupId = 'GROUP-ID1';
 
@@ -345,7 +349,7 @@ Options can also be an array:
 ```js
 import { select } from '@storybook/addon-knobs';
 const label = 'Cats';
-const options = ['linus', 'eleanor', 'lover']
+const options = ['linus', 'eleanor', 'lover'];
 const defaultValue = 'eleanor';
 const groupId = 'GROUP-ID2';
 const value = select(label, options, defaultValue, groupId);
@@ -369,7 +373,7 @@ const arrayOfObjects = [
 ];
 const defaultValue = arrayOfObjects[0];
 const groupId = 'GROUP-ID3';
-const value = select(label, options, defaultValue, groupId);
+const value = select(label, arrayOfObjects, defaultValue, groupId);
 ```
 
 ### radio buttons
@@ -393,7 +397,7 @@ const value = radios(label, options, defaultValue, groupId);
 
 ### options
 
-Configurable UI for selecting a value from a set of options. 
+Configurable UI for selecting a value from a set of options.
 
 ```js
 import { optionsKnob as options } from '@storybook/addon-knobs';
@@ -406,13 +410,15 @@ const valuesObj = {
 };
 const defaultValue = 'kiwi';
 const optionsObj = {
-  display: 'inline-radio'
+  display: 'inline-radio',
 };
 const groupId = 'GROUP-ID1';
 
 const value = options(label, valuesObj, defaultValue, optionsObj, groupId);
 ```
+
 > The display property for `optionsObj` accepts:
+>
 > - `radio`
 > - `inline-radio`
 > - `check`
@@ -459,8 +465,8 @@ If your component needs the date in a different form you can wrap the `date` fun
 
 ```js
 function myDateKnob(name, defaultValue) {
-  const stringTimestamp = date(name, defaultValue)
-  return new Date(stringTimestamp)
+  const stringTimestamp = date(name, defaultValue);
+  return new Date(stringTimestamp);
 }
 ```
 
@@ -494,20 +500,16 @@ export default {
   decorators: [withKnobs],
 };
 
-export const defaultView = () => (
-  <div />
-);
-defaultView.story = {
-  parameters: {
-    knobs: {
-      // Doesn't emit events while user is typing.
-      timestamps: true,
-
-      // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
-      // You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
-      escapeHTML: true,
-    }
-  }
+export const defaultView = () => <div />;
+defaultView.parameters = {
+  knobs: {
+    // Doesn't emit events while user is typing.
+    timestamps: true,
+
+    // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
+    // You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
+    escapeHTML: true,
+  },
 };
 ```
 
@@ -518,9 +520,8 @@ If you are using Typescript, make sure you have the type definitions installed f
 - node
 - react
 
-You can install them using: (*assuming you are using Typescript >2.0.*)
+You can install them using: (_assuming you are using Typescript >2.0._)
 
 ```sh
 yarn add @types/node @types/react --dev
 ```
-
diff --git a/addons/knobs/angular.js b/addons/knobs/angular.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/angular.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/docs/demo.gif b/addons/knobs/docs/demo.gif
index 847a0f77ec0b..12206cb0653d 100644
Binary files a/addons/knobs/docs/demo.gif and b/addons/knobs/docs/demo.gif differ
diff --git a/addons/knobs/html.js b/addons/knobs/html.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/html.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/marko.js b/addons/knobs/marko.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/marko.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/mithril.js b/addons/knobs/mithril.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/mithril.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index 07d665af93d8..1b1cc9d97cae 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook Addon Prop Editor Component",
   "keywords": [
     "addon",
@@ -16,48 +16,61 @@
     "directory": "addons/knobs"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "@types/react-color": "^3.0.1",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "escape-html": "^1.0.3",
-    "fast-deep-equal": "^2.0.1",
+    "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "qs": "^6.6.0",
     "react-color": "^2.17.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-select": "^3.0.8"
+    "react-select": "^3.0.8",
+    "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.5",
     "@types/escape-html": "0.0.20",
     "@types/react-lifecycles-compat": "^3.0.1",
-    "@types/react-select": "^3.0.4"
+    "@types/react-select": "^3.0.12",
+    "@types/webpack-env": "^1.15.2",
+    "enzyme": "^3.11.0"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/knobs/polymer.js b/addons/knobs/polymer.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/polymer.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/react.js b/addons/knobs/react.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/react.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/knobs/src/KnobManager.ts b/addons/knobs/src/KnobManager.ts
index f59430f73e37..db2f872572b0 100644
--- a/addons/knobs/src/KnobManager.ts
+++ b/addons/knobs/src/KnobManager.ts
@@ -3,7 +3,6 @@
 import { navigator } from 'global';
 import escape from 'escape-html';
 import { getQueryParams } from '@storybook/client-api';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Channel } from '@storybook/channels';
 
 import KnobStore, { KnobStoreKnob } from './KnobStore';
@@ -49,6 +48,7 @@ function escapeStrings(obj: any): any {
 interface KnobManagerOptions {
   escapeHTML?: boolean;
   disableDebounce?: boolean;
+  disableForceUpdate?: boolean;
 }
 
 export default class KnobManager {
diff --git a/addons/knobs/src/KnobStore.ts b/addons/knobs/src/KnobStore.ts
index b8ddf0e0b063..cc3699e3f1f2 100644
--- a/addons/knobs/src/KnobStore.ts
+++ b/addons/knobs/src/KnobStore.ts
@@ -63,7 +63,7 @@ export default class KnobStore {
   }
 
   markAllUnused() {
-    Object.keys(this.store).forEach(knobName => {
+    Object.keys(this.store).forEach((knobName) => {
       this.store[knobName].used = false;
     });
   }
diff --git a/addons/knobs/src/__types__/knob-test-cases.ts b/addons/knobs/src/__types__/knob-test-cases.ts
index 50c6f988ad72..19a147f5000b 100644
--- a/addons/knobs/src/__types__/knob-test-cases.ts
+++ b/addons/knobs/src/__types__/knob-test-cases.ts
@@ -15,7 +15,6 @@ import {
 } from '../index';
 
 // Note: this is a helper to batch test return types and avoid "declared but never read" errors
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 function expectKnobOfType<T>(..._: T[]) {}
 
 const groupId = 'GROUP-ID1';
diff --git a/addons/knobs/src/components/Panel.tsx b/addons/knobs/src/components/Panel.tsx
index e9cb4fa9ffc0..bcb9bd3baf42 100644
--- a/addons/knobs/src/components/Panel.tsx
+++ b/addons/knobs/src/components/Panel.tsx
@@ -126,7 +126,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
     const { api } = this.props;
 
     if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
-      Object.keys(knobs).forEach(name => {
+      Object.keys(knobs).forEach((name) => {
         const knob = knobs[name];
         // For the first time, get values from the URL and set them.
         if (!this.loadedFromUrl) {
@@ -192,7 +192,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
 
       const queryParams: { [key: string]: any } = {};
 
-      Object.keys(newKnobs).forEach(n => {
+      Object.keys(newKnobs).forEach((n) => {
         const knob = newKnobs[n];
         queryParams[`knob-${n}`] = getKnobControl(knob.type).serialize(knob.value);
       });
@@ -219,9 +219,9 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
     const groups: Record<string, PanelKnobGroups> = {};
     const groupIds: string[] = [];
 
-    const knobKeysArray = Object.keys(knobs).filter(key => knobs[key].used);
+    const knobKeysArray = Object.keys(knobs).filter((key) => knobs[key].used);
 
-    knobKeysArray.forEach(key => {
+    knobKeysArray.forEach((key) => {
       const knobKeyGroupId = knobs[key].groupId || DEFAULT_GROUP_ID;
       groupIds.push(knobKeyGroupId);
       groups[knobKeyGroupId] = {
@@ -229,7 +229,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
           <TabWrapper key={knobKeyGroupId} active={active}>
             <PropForm
               knobs={knobsArray.filter(
-                knob => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
+                (knob) => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
               )}
               onFieldChange={this.handleChange}
               onFieldClick={this.handleClick}
@@ -240,7 +240,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
       };
     });
 
-    const knobsArray = knobKeysArray.map(key => knobs[key]);
+    const knobsArray = knobKeysArray.map((key) => knobs[key]);
 
     if (knobsArray.length === 0) {
       return (
@@ -252,6 +252,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
               href="https://github.com/storybookjs/storybook/tree/master/addons/knobs"
               target="_blank"
               withArrow
+              cancel={false}
             >
               dynamically interact with components
             </Link>
@@ -264,9 +265,9 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
     const sortEntries = (g: Record<string, PanelKnobGroups>): [string, PanelKnobGroups][] => {
       const unsortedKeys = Object.keys(g);
       if (unsortedKeys.includes(DEFAULT_GROUP_ID)) {
-        const sortedKeys = unsortedKeys.filter(key => key !== DEFAULT_GROUP_ID);
+        const sortedKeys = unsortedKeys.filter((key) => key !== DEFAULT_GROUP_ID);
         sortedKeys.push(DEFAULT_GROUP_ID);
-        return sortedKeys.map<[string, PanelKnobGroups]>(key => [key, g[key]]);
+        return sortedKeys.map<[string, PanelKnobGroups]>((key) => [key, g[key]]);
       }
       return Object.entries(g);
     };
diff --git a/addons/knobs/src/components/PropForm.tsx b/addons/knobs/src/components/PropForm.tsx
index 2acd26559c11..de3fce776531 100644
--- a/addons/knobs/src/components/PropForm.tsx
+++ b/addons/knobs/src/components/PropForm.tsx
@@ -47,7 +47,7 @@ export default class PropForm extends Component<PropFormProps> {
 
     return (
       <Form>
-        {knobs.map(knob => {
+        {knobs.map((knob) => {
           const changeHandler = this.makeChangeHandler(knob.name, knob.type);
           const InputType: ComponentType<any> = getKnobControl(knob.type) || InvalidType;
 
diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js
index a01dbb2c6595..65f1cb163b69 100644
--- a/addons/knobs/src/components/__tests__/Panel.js
+++ b/addons/knobs/src/components/__tests__/Panel.js
@@ -18,7 +18,7 @@ const createTestApi = () => ({
 // is a workaround
 jest.mock('react', () => {
   const r = jest.requireActual('react');
-  return { ...r, memo: x => x };
+  return { ...r, memo: (x) => x };
 });
 
 describe('Panel', () => {
@@ -50,7 +50,7 @@ describe('Panel', () => {
           handlers[e] = handler;
         },
         emit: jest.fn(),
-        getQueryParam: key => testQueryParams[key],
+        getQueryParam: (key) => testQueryParams[key],
         setQueryParams: jest.fn(),
       };
 
@@ -146,7 +146,7 @@ describe('Panel', () => {
       const wrapper = root.update().find(Panel);
 
       const formWrapper = wrapper.find(PropForm);
-      const knobs = formWrapper.map(formInstanceWrapper => formInstanceWrapper.prop('knobs'));
+      const knobs = formWrapper.map((formInstanceWrapper) => formInstanceWrapper.prop('knobs'));
 
       expect(knobs).toMatchSnapshot();
 
@@ -182,7 +182,7 @@ describe('Panel', () => {
       const titles = wrapper
         .find(TabsState)
         .find('button')
-        .map(child => child.prop('children'));
+        .map((child) => child.prop('children'));
       expect(titles).toEqual(['foo', 'bar']);
 
       const knobs = wrapper.find(PropForm);
@@ -222,10 +222,10 @@ describe('Panel', () => {
       const titles = wrapper
         .find(TabsState)
         .find('button')
-        .map(child => child.prop('children'));
+        .map((child) => child.prop('children'));
       expect(titles).toEqual(['foo', DEFAULT_GROUP_ID]);
 
-      const knobs = wrapper.find(PropForm).map(propForm => propForm.prop('knobs'));
+      const knobs = wrapper.find(PropForm).map((propForm) => propForm.prop('knobs'));
       // there are props with no groupId so Other should also have its own PropForm
       expect(knobs.length).toEqual(titles.length);
       expect(knobs).toMatchSnapshot();
diff --git a/addons/knobs/src/components/types/Boolean.tsx b/addons/knobs/src/components/types/Boolean.tsx
index bd04676a62e6..393363679b32 100644
--- a/addons/knobs/src/components/types/Boolean.tsx
+++ b/addons/knobs/src/components/types/Boolean.tsx
@@ -34,14 +34,14 @@ const BooleanType: FunctionComponent<BooleanTypeProps> & {
     id={knob.name}
     name={knob.name}
     type="checkbox"
-    onChange={e => onChange(e.target.checked)}
+    onChange={(e) => onChange(e.target.checked)}
     checked={knob.value}
   />
 );
 
 BooleanType.defaultProps = {
   knob: {} as any,
-  onChange: value => value,
+  onChange: (value) => value,
 };
 
 BooleanType.propTypes = {
diff --git a/addons/knobs/src/components/types/Checkboxes.tsx b/addons/knobs/src/components/types/Checkboxes.tsx
index 3eec4306ba7b..4c343d450646 100644
--- a/addons/knobs/src/components/types/Checkboxes.tsx
+++ b/addons/knobs/src/components/types/Checkboxes.tsx
@@ -51,7 +51,7 @@ const CheckboxLabel = styled.label({
 export default class CheckboxesType extends Component<CheckboxesTypeProps, CheckboxesTypeState> {
   static defaultProps: CheckboxesTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
     isInline: false,
   };
 
@@ -95,7 +95,7 @@ export default class CheckboxesType extends Component<CheckboxesTypeProps, Check
   };
 
   renderCheckboxList = ({ options }: CheckboxesTypeKnob) =>
-    Object.keys(options).map(key => this.renderCheckbox(key, options[key]));
+    Object.keys(options).map((key) => this.renderCheckbox(key, options[key]));
 
   renderCheckbox = (label: string, value: string) => {
     const { knob } = this.props;
diff --git a/addons/knobs/src/components/types/Color.tsx b/addons/knobs/src/components/types/Color.tsx
index abe313978bf4..c738e2763ada 100644
--- a/addons/knobs/src/components/types/Color.tsx
+++ b/addons/knobs/src/components/types/Color.tsx
@@ -56,7 +56,7 @@ export default class ColorType extends Component<ColorTypeProps, ColorTypeState>
 
   static defaultProps: ColorTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
   };
 
   static serialize = (value: ColorTypeKnobValue) => value;
@@ -129,7 +129,7 @@ export default class ColorType extends Component<ColorTypeProps, ColorTypeState>
         <Swatch style={colorStyle} />
         {displayColorPicker ? (
           <Popover
-            ref={e => {
+            ref={(e) => {
               if (e) this.popover = e;
             }}
           >
diff --git a/addons/knobs/src/components/types/Date.tsx b/addons/knobs/src/components/types/Date.tsx
index 8c921532492d..93753275cb6d 100644
--- a/addons/knobs/src/components/types/Date.tsx
+++ b/addons/knobs/src/components/types/Date.tsx
@@ -42,7 +42,7 @@ const formatTime = (date: Date) => {
 export default class DateType extends Component<DateTypeProps, DateTypeState> {
   static defaultProps: DateTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
   };
 
   static propTypes = {
diff --git a/addons/knobs/src/components/types/Files.tsx b/addons/knobs/src/components/types/Files.tsx
index a038ca3ff7df..a19738e267ac 100644
--- a/addons/knobs/src/components/types/Files.tsx
+++ b/addons/knobs/src/components/types/Files.tsx
@@ -21,7 +21,7 @@ const FileInput = styled(Form.Input)({
 });
 
 function fileReaderPromise(file: File) {
-  return new Promise<string>(resolve => {
+  return new Promise<string>((resolve) => {
     const fileReader = new FileReader();
     fileReader.onload = (e: Event) => resolve((e.currentTarget as FileReader).result as string);
     fileReader.readAsDataURL(file);
@@ -51,7 +51,7 @@ const FilesType: FunctionComponent<FilesTypeProps> & {
 
 FilesType.defaultProps = {
   knob: {} as any,
-  onChange: value => value,
+  onChange: (value) => value,
 };
 
 FilesType.propTypes = {
diff --git a/addons/knobs/src/components/types/Number.tsx b/addons/knobs/src/components/types/Number.tsx
index 7778976f0e24..bc242b009ef3 100644
--- a/addons/knobs/src/components/types/Number.tsx
+++ b/addons/knobs/src/components/types/Number.tsx
@@ -14,11 +14,8 @@ export interface NumberTypeKnobOptions {
   step?: number;
 }
 
-export interface NumberTypeKnob
-  extends KnobControlConfig<NumberTypeKnobValue>,
-    NumberTypeKnobOptions {
-  value: NumberTypeKnobValue;
-}
+export type NumberTypeKnob = KnobControlConfig<NumberTypeKnobValue> &
+  NumberTypeKnobOptions & { value?: NumberTypeKnobValue };
 
 interface NumberTypeProps extends KnobControlProps<NumberTypeKnobValue | null> {
   knob: NumberTypeKnob;
@@ -69,7 +66,7 @@ export default class NumberType extends Component<NumberTypeProps> {
 
   static defaultProps: NumberTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
   };
 
   static serialize = (value: NumberTypeKnobValue | null | undefined) =>
diff --git a/addons/knobs/src/components/types/Object.tsx b/addons/knobs/src/components/types/Object.tsx
index ade9fff10a74..8ff178d25dc2 100644
--- a/addons/knobs/src/components/types/Object.tsx
+++ b/addons/knobs/src/components/types/Object.tsx
@@ -25,12 +25,12 @@ class ObjectType<T> extends Component<ObjectTypeProps<T>> {
 
   static defaultProps: ObjectTypeProps<any> = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
   };
 
-  static serialize: { <T>(object: T): string } = object => JSON.stringify(object);
+  static serialize: { <T>(object: T): string } = (object) => JSON.stringify(object);
 
-  static deserialize: { <T>(value: string): T } = value => (value ? JSON.parse(value) : {});
+  static deserialize: { <T>(value: string): T } = (value) => (value ? JSON.parse(value) : {});
 
   static getDerivedStateFromProps<T>(
     props: ObjectTypeProps<T>,
diff --git a/addons/knobs/src/components/types/Options.tsx b/addons/knobs/src/components/types/Options.tsx
index 54a49191fe70..a13be29e0c2d 100644
--- a/addons/knobs/src/components/types/Options.tsx
+++ b/addons/knobs/src/components/types/Options.tsx
@@ -63,13 +63,13 @@ interface OptionsSelectValueItem {
   label: string;
 }
 
-const serialize: { <T>(value: T): T } = value => value;
-const deserialize: { <T>(value: T): T } = value => value;
+const serialize: { <T>(value: T): T } = (value) => value;
+const deserialize: { <T>(value: T): T } = (value) => value;
 
 const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   serialize: typeof serialize;
   deserialize: typeof deserialize;
-} = props => {
+} = (props) => {
   const { knob, onChange } = props;
   const { display } = knob.optionsObj;
 
@@ -84,19 +84,20 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
   }
 
   if (display === 'select' || display === 'multi-select') {
-    const options: OptionsSelectValueItem[] = Object.keys(knob.options).map(key => ({
+    const options: OptionsSelectValueItem[] = Object.keys(knob.options).map((key) => ({
       value: knob.options[key],
       label: key,
     }));
 
     const isMulti = display === 'multi-select';
-    const optionsIndex = options.findIndex(i => i.value === knob.value);
+    const optionsIndex = options.findIndex((i) => i.value === knob.value);
     let defaultValue: typeof options | typeof options[0] = options[optionsIndex];
     let handleChange: ReactSelectOnChangeFn = (e: OptionsSelectValueItem) => onChange(e.value);
 
     if (isMulti) {
-      defaultValue = options.filter(i => knob.value.includes(i.value));
-      handleChange = (values: OptionsSelectValueItem[]) => onChange(values.map(item => item.value));
+      defaultValue = options.filter((i) => knob.value.includes(i.value));
+      handleChange = (values: OptionsSelectValueItem[]) =>
+        onChange(values.map((item) => item.value));
     }
 
     return (
@@ -115,7 +116,7 @@ const OptionsType: FunctionComponent<OptionsTypeProps<any>> & {
 OptionsType.defaultProps = {
   knob: {} as any,
   display: 'select',
-  onChange: value => value,
+  onChange: (value) => value,
 };
 
 OptionsType.propTypes = {
diff --git a/addons/knobs/src/components/types/Radio.tsx b/addons/knobs/src/components/types/Radio.tsx
index 4c102661f374..7cee7cfeea43 100644
--- a/addons/knobs/src/components/types/Radio.tsx
+++ b/addons/knobs/src/components/types/Radio.tsx
@@ -41,7 +41,7 @@ const RadioLabel = styled.label({
 class RadiosType extends Component<RadiosTypeProps> {
   static defaultProps: RadiosTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
     isInline: false,
   };
 
@@ -61,9 +61,9 @@ class RadiosType extends Component<RadiosTypeProps> {
 
   renderRadioButtonList({ options }: RadiosTypeKnob) {
     if (Array.isArray(options)) {
-      return options.map(val => this.renderRadioButton(val, val));
+      return options.map((val) => this.renderRadioButton(val, val));
     }
-    return Object.keys(options).map(key => this.renderRadioButton(key, options[key]));
+    return Object.keys(options).map((key) => this.renderRadioButton(key, options[key]));
   }
 
   renderRadioButton(label: string, value: RadiosTypeKnobValue) {
@@ -79,7 +79,7 @@ class RadiosType extends Component<RadiosTypeProps> {
           id={id}
           name={name}
           value={opts.value || undefined}
-          onChange={e => onChange(e.target.value)}
+          onChange={(e) => onChange(e.target.value)}
           checked={value === knob.value}
         />
         <RadioLabel htmlFor={id}>{label}</RadioLabel>
diff --git a/addons/knobs/src/components/types/Select.tsx b/addons/knobs/src/components/types/Select.tsx
index 50a5d52b5648..49c87db80cfe 100644
--- a/addons/knobs/src/components/types/Select.tsx
+++ b/addons/knobs/src/components/types/Select.tsx
@@ -32,14 +32,14 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
   const { options } = knob;
 
   const callbackReduceArrayOptions = (acc: any, option: any, i: number) => {
-    if (typeof option !== 'object') return { ...acc, [option]: option };
+    if (typeof option !== 'object' || option === null) return { ...acc, [option]: option };
     const label = option.label || option.key || i;
     return { ...acc, [label]: option };
   };
 
   const entries = Array.isArray(options) ? options.reduce(callbackReduceArrayOptions, {}) : options;
 
-  const selectedKey = Object.keys(entries).find(key => {
+  const selectedKey = Object.keys(entries).find((key) => {
     const { value: knobVal } = knob;
     const entryVal = entries[key];
 
@@ -69,7 +69,7 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
 
 SelectType.defaultProps = {
   knob: {} as any,
-  onChange: value => value,
+  onChange: (value) => value,
 };
 
 SelectType.propTypes = {
diff --git a/addons/knobs/src/components/types/Text.tsx b/addons/knobs/src/components/types/Text.tsx
index f09c8b526ca9..57db9c6941cc 100644
--- a/addons/knobs/src/components/types/Text.tsx
+++ b/addons/knobs/src/components/types/Text.tsx
@@ -5,13 +5,13 @@ import { Form } from '@storybook/components';
 import { KnobControlConfig, KnobControlProps } from './types';
 
 type TextTypeKnobValue = string;
-export type TextTypeKnob = KnobControlConfig<TextTypeKnobValue>;
+export type TextTypeKnob = KnobControlConfig<TextTypeKnobValue> & { value?: TextTypeKnobValue };
 type TextTypeProps = KnobControlProps<TextTypeKnobValue>;
 
 export default class TextType extends Component<TextTypeProps> {
   static defaultProps: TextTypeProps = {
     knob: {} as any,
-    onChange: value => value,
+    onChange: (value) => value,
   };
 
   static propTypes = {
diff --git a/addons/knobs/src/deprecated.js b/addons/knobs/src/deprecated.js
deleted file mode 100644
index 5bc204f7316f..000000000000
--- a/addons/knobs/src/deprecated.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  withKnobs,
-  knob,
-  text,
-  boolean,
-  number,
-  color,
-  object,
-  array,
-  date,
-  select,
-  files,
-  button,
-} from '.';
-
-export {
-  withKnobs,
-  knob,
-  text,
-  boolean,
-  number,
-  color,
-  object,
-  array,
-  date,
-  select,
-  files,
-  button,
-};
diff --git a/addons/knobs/src/index.ts b/addons/knobs/src/index.ts
index 6f8e757aa231..1e940fcb8117 100644
--- a/addons/knobs/src/index.ts
+++ b/addons/knobs/src/index.ts
@@ -128,7 +128,6 @@ export const withKnobs = makeDecorator({
   name: 'withKnobs',
   parameterName: 'knobs',
   skipIfNoParametersOrOptions: false,
-  allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const storyOptions = parameters || options;
     const allOptions = { ...defaultOptions, ...storyOptions };
diff --git a/addons/knobs/src/preset/addDecorator.ts b/addons/knobs/src/preset/addDecorator.ts
index 08d985c0e190..364246df2610 100644
--- a/addons/knobs/src/preset/addDecorator.ts
+++ b/addons/knobs/src/preset/addDecorator.ts
@@ -1,4 +1,3 @@
-import { addDecorator } from '@storybook/client-api';
 import { withKnobs } from '../index';
 
-addDecorator(withKnobs);
+export const decorators = [withKnobs];
diff --git a/addons/knobs/src/preset/index.ts b/addons/knobs/src/preset/index.ts
index 0bce78742e0d..8660a5368c50 100644
--- a/addons/knobs/src/preset/index.ts
+++ b/addons/knobs/src/preset/index.ts
@@ -1,8 +1,8 @@
-type KnobsOptions = {
+interface KnobsOptions {
   addDecorator?: boolean;
-};
+}
 
-export function addons(entry: any[] = [], options: any) {
+export function managerEntries(entry: any[] = [], options: any) {
   return [...entry, require.resolve('../register')];
 }
 
diff --git a/addons/knobs/src/register.tsx b/addons/knobs/src/register.tsx
index 8acbc9a5ea80..98083e05e5a0 100644
--- a/addons/knobs/src/register.tsx
+++ b/addons/knobs/src/register.tsx
@@ -3,7 +3,7 @@ import addons from '@storybook/addons';
 import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
     title: 'Knobs',
     render: ({ active, key }) => <Panel api={api} key={key} active={active} />,
diff --git a/addons/knobs/src/registerKnobs.ts b/addons/knobs/src/registerKnobs.ts
index 0c2be7e5b105..40980934e736 100644
--- a/addons/knobs/src/registerKnobs.ts
+++ b/addons/knobs/src/registerKnobs.ts
@@ -37,10 +37,12 @@ function knobChanged(change: KnobStoreKnob) {
   const knobOptions = knobStore.get(name);
   knobOptions.value = value;
 
-  if (!manager.options.disableDebounce) {
-    debouncedResetAndForceUpdate();
-  } else {
-    resetAndForceUpdate();
+  if (!manager.options.disableForceUpdate && !knobOptions.disableForceUpdate) {
+    if (!manager.options.disableDebounce && !knobOptions.disableDebounce) {
+      debouncedResetAndForceUpdate();
+    } else {
+      resetAndForceUpdate();
+    }
   }
 }
 
diff --git a/addons/knobs/src/type-defs.ts b/addons/knobs/src/type-defs.ts
index ddc8c2de34e3..469dbdc6f83b 100644
--- a/addons/knobs/src/type-defs.ts
+++ b/addons/knobs/src/type-defs.ts
@@ -18,7 +18,12 @@ export type Mutable<T> = {
   -readonly [P in keyof T]: T[P] extends readonly (infer U)[] ? U[] : T[P];
 };
 
-type KnobPlus<T extends KnobType, K> = K & { type: T; groupId?: string };
+type KnobPlus<T extends KnobType, K> = K & {
+  type: T;
+  groupId?: string;
+  disableDebounce?: boolean;
+  disableForceUpdate?: boolean;
+};
 
 export type Knob<T extends KnobType = any> = T extends 'text'
   ? KnobPlus<T, Pick<TextTypeKnob, 'value'>>
diff --git a/addons/knobs/vue.js b/addons/knobs/vue.js
deleted file mode 100644
index c22c26b6732d..000000000000
--- a/addons/knobs/vue.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/deprecated');
diff --git a/addons/links/README.md b/addons/links/README.md
index 22a7c0cf2a65..6ca46168c971 100644
--- a/addons/links/README.md
+++ b/addons/links/README.md
@@ -16,7 +16,7 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-links/register']
+  addons: ['@storybook/addon-links']
 }
 ```
 
@@ -150,4 +150,4 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
 >Go to Second</LinkTo>
 ```
 
-To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/lib/components/src/navigation/routed_link.js#L4-L9) for reference. 
+To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/addons/links/src/react/components/RoutedLink.js#L20-L24) for reference. 
diff --git a/addons/links/package.json b/addons/links/package.json
index 335b74c26e13..b3bb898363ce 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -16,35 +16,49 @@
     "directory": "addons/links"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
-    "@storybook/router": "5.3.0-rc.0",
+    "@storybook/router": "6.0.0-beta.21",
+    "@types/qs": "^6.9.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "prop-types": "^15.7.2",
     "qs": "^6.6.0",
-    "ts-dedent": "^1.1.0"
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.2",
+    "enzyme": "^3.11.0"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/links/preset.js b/addons/links/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/links/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/links/register.js b/addons/links/register.js
index 9232e6c069d5..cc38cb06f1f2 100644
--- a/addons/links/register.js
+++ b/addons/links/register.js
@@ -1 +1 @@
-require('./dist/manager').register();
+require('./dist/register');
diff --git a/addons/links/src/constants.ts b/addons/links/src/constants.ts
index 8cd994edd00a..7fb1ad05b5d3 100644
--- a/addons/links/src/constants.ts
+++ b/addons/links/src/constants.ts
@@ -1,4 +1,5 @@
 export const ADDON_ID = 'storybook/links';
+export const PARAM_KEY = `links`;
 
 export default {
   NAVIGATE: `${ADDON_ID}/navigate`,
diff --git a/addons/links/src/manager.ts b/addons/links/src/manager.ts
deleted file mode 100644
index d5aa5b788989..000000000000
--- a/addons/links/src/manager.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import addons from '@storybook/addons';
-
-import EVENTS, { ADDON_ID } from './constants';
-
-export const register = () => {
-  addons.register(ADDON_ID, api => {
-    const channel = addons.getChannel();
-
-    channel.on(EVENTS.REQUEST, ({ kind, name }) => {
-      const id = api.storyId(kind, name);
-      api.emit(EVENTS.RECEIVE, id);
-    });
-  });
-};
diff --git a/addons/links/src/preset/addDecorator.ts b/addons/links/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..ff68743b1a37
--- /dev/null
+++ b/addons/links/src/preset/addDecorator.ts
@@ -0,0 +1,3 @@
+import { withLinks } from '../index';
+
+export const decorators = [withLinks];
diff --git a/addons/links/src/preset/index.ts b/addons/links/src/preset/index.ts
new file mode 100644
index 000000000000..1234ed30130f
--- /dev/null
+++ b/addons/links/src/preset/index.ts
@@ -0,0 +1,15 @@
+interface LinkOptions {
+  addDecorator?: boolean;
+}
+
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: LinkOptions = {}) {
+  const linkConfig = [];
+  if (addDecorator) {
+    linkConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...linkConfig];
+}
diff --git a/addons/links/src/preview.test.js b/addons/links/src/preview.test.js
index 46647a36a37e..88008541f0d2 100644
--- a/addons/links/src/preview.test.js
+++ b/addons/links/src/preview.test.js
@@ -17,6 +17,8 @@ jest.mock('global', () => ({
       kind: 'kind',
     })),
   },
+  window: global,
+  __STORYBOOK_LOGGER: console,
   __STORYBOOK_CLIENT_API__: {
     raw: jest.fn(() => [
       {
@@ -49,7 +51,7 @@ describe('preview', () => {
     it('should select the kind (only) provided', () => {
       const channel = { emit: jest.fn() };
       addons.getChannel.mockReturnValue(channel);
-      __STORYBOOK_STORY_STORE__.fromId.mockImplementation(input => null);
+      __STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) => null);
 
       const handler = linkTo('kind');
       handler();
@@ -64,7 +66,7 @@ describe('preview', () => {
       const channel = { emit: jest.fn() };
       addons.getChannel.mockReturnValue(channel);
       // simulate a currently selected, but not found as ID
-      __STORYBOOK_STORY_STORE__.fromId.mockImplementation(input =>
+      __STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) =>
         !input
           ? {
               kind: 'kind',
@@ -85,7 +87,7 @@ describe('preview', () => {
     it('should select the id provided', () => {
       const channel = { emit: jest.fn() };
       addons.getChannel.mockReturnValue(channel);
-      __STORYBOOK_STORY_STORE__.fromId.mockImplementation(input =>
+      __STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) =>
         input === 'kind--story'
           ? {
               story: 'name',
@@ -106,7 +108,7 @@ describe('preview', () => {
     it('should handle functions returning strings', () => {
       const channel = { emit: jest.fn() };
       addons.getChannel.mockReturnValue(channel);
-      __STORYBOOK_STORY_STORE__.fromId.mockImplementation(input => null);
+      __STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) => null);
 
       const handler = linkTo(
         (a, b) => a + b,
diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts
index 0aeb0ebd9ed8..07e319cf7d93 100644
--- a/addons/links/src/preview.ts
+++ b/addons/links/src/preview.ts
@@ -5,10 +5,11 @@ import {
   __STORYBOOK_CLIENT_API__ as clientApi,
 } from 'global';
 import qs from 'qs';
-import addons from '@storybook/addons';
+import addons, { makeDecorator } from '@storybook/addons';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
 import { toId } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
+import { PARAM_KEY } from './constants';
 
 interface ParamsId {
   storyId: string;
@@ -74,7 +75,7 @@ export const linkTo = (
 };
 
 export const hrefTo = (kind: string, name: string): Promise<string> => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const { storyId } = storyStore.getSelection();
     const current = storyStore.fromId(storyId);
     resolve(generateUrl(toId(kind || current.kind, name)));
@@ -109,8 +110,12 @@ const off = () => {
   }
 };
 
-export const withLinks = (storyFn: () => void) => {
-  on();
-  addons.getChannel().once(STORY_CHANGED, off);
-  return storyFn();
-};
+export const withLinks = makeDecorator({
+  name: 'withLinks',
+  parameterName: PARAM_KEY,
+  wrapper: (getStory, context, { parameters }) => {
+    on();
+    addons.getChannel().once(STORY_CHANGED, off);
+    return getStory(context);
+  },
+});
diff --git a/addons/links/src/react/components/RoutedLink.js b/addons/links/src/react/components/RoutedLink.js
index a78b69f48a95..7f83ddec6a51 100644
--- a/addons/links/src/react/components/RoutedLink.js
+++ b/addons/links/src/react/components/RoutedLink.js
@@ -10,11 +10,11 @@ import React from 'react';
 
 const LEFT_BUTTON = 0;
 // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-const isPlainLeftClick = e =>
+const isPlainLeftClick = (e) =>
   e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 
 export default class RoutedLink extends React.Component {
-  onClick = e => {
+  onClick = (e) => {
     const { onClick } = this.props;
 
     if (isPlainLeftClick(e)) {
diff --git a/addons/links/src/react/components/link.test.js b/addons/links/src/react/components/link.test.js
index b38b6bf2bc9d..fd174ebe9d11 100644
--- a/addons/links/src/react/components/link.test.js
+++ b/addons/links/src/react/components/link.test.js
@@ -14,6 +14,7 @@ jest.mock('global', () => ({
       search: 'search',
     },
   },
+  window: global,
   __STORYBOOK_STORY_STORE__: {
     getSelection: jest.fn(() => ({ id: 1 })),
     fromId: jest.fn(() => ({})),
diff --git a/addons/links/src/react/components/link.tsx b/addons/links/src/react/components/link.tsx
index 5627923cb24e..fccca70d04a5 100644
--- a/addons/links/src/react/components/link.tsx
+++ b/addons/links/src/react/components/link.tsx
@@ -66,7 +66,7 @@ export default class LinkTo extends PureComponent<Props, State> {
     const { href } = this.state;
 
     return (
-      <a href={href} onClick={e => cancelled(e, this.handleClick)} {...rest}>
+      <a href={href} onClick={(e) => cancelled(e, this.handleClick)} {...rest}>
         {children}
       </a>
     );
diff --git a/addons/links/src/register.ts b/addons/links/src/register.ts
new file mode 100644
index 000000000000..5c082e8a04fb
--- /dev/null
+++ b/addons/links/src/register.ts
@@ -0,0 +1,12 @@
+import addons from '@storybook/addons';
+
+import EVENTS, { ADDON_ID } from './constants';
+
+addons.register(ADDON_ID, (api) => {
+  const channel = addons.getChannel();
+
+  channel.on(EVENTS.REQUEST, ({ kind, name }) => {
+    const id = api.storyId(kind, name);
+    api.emit(EVENTS.RECEIVE, id);
+  });
+});
diff --git a/addons/notes/README.md b/addons/notes/README.md
deleted file mode 100644
index 15f1ed96edd5..000000000000
--- a/addons/notes/README.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Storybook Addon Notes
-
-Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-![Storybook Addon Notes Demo](docs/demo.png)
-
-## Getting Started
-
-**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**
-
-```sh
-yarn add -D @storybook/addon-notes
-```
-
-within `.storybook/main.js`:
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-notes/register']
-}
-```
-
-Alternatively register the notes addon into a panel. Choose only one, not both.
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-notes/register-panel']
-}
-```
-
-Now, you can use the `notes` parameter to add a note to each story.
-
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-  parameters: {
-    notes: 'some documentation here',
-  },
-};
-```
-
-## Using Markdown
-
-Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
-
-```js
-import Component from './Component';
-import markdown from './someMarkdownText.md';
-
-export default {
-  title: 'Component',
-};
-
-export const withMarkdown = () => <Component />;
-withmarkdown.story = {
-  parameters: {
-    notes: { markdown },
-  }
-};
-```
-
-## Giphy
-
-When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `cheese` of the query prop is used to search and return the first result returned by Giphy.
-
-```md
-# Title
-
-<Giphy query='cheese' />
-```
-
-## Multiple Notes Sections
-
-If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.
-
-```js
-import { storiesOf } from '@storybook/react';
-import Component from './Component';
-
-import intro from './intro.md';
-import design from './design.md';
-
-export default {
-  title: 'Component',
-  parameters: {
-    notes: { Introduction: intro, 'Design Notes': design },
-  },
-};
-```
diff --git a/addons/notes/docs/demo.png b/addons/notes/docs/demo.png
deleted file mode 100644
index 1584dcef9ad5..000000000000
Binary files a/addons/notes/docs/demo.png and /dev/null differ
diff --git a/addons/notes/package.json b/addons/notes/package.json
deleted file mode 100644
index 6744aa425139..000000000000
--- a/addons/notes/package.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "name": "@storybook/addon-notes",
-  "version": "5.3.0-rc.0",
-  "description": "Write notes for your Storybook stories.",
-  "keywords": [
-    "addon",
-    "notes",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/notes",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/notes"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/public_api.js",
-  "types": "dist/public_api.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/router": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "markdown-to-jsx": "^6.10.3",
-    "memoizerific": "^1.11.3",
-    "prop-types": "^15.7.2",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@types/prop-types": "^15.5.9",
-    "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.14.0"
-  },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/notes/register-panel.js b/addons/notes/register-panel.js
deleted file mode 100644
index b345979c2c39..000000000000
--- a/addons/notes/register-panel.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register.js').default('panel');
diff --git a/addons/notes/register.js b/addons/notes/register.js
deleted file mode 100644
index 752a851655c2..000000000000
--- a/addons/notes/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register.js').default('tab');
diff --git a/addons/notes/src/Panel.test.js b/addons/notes/src/Panel.test.js
deleted file mode 100644
index 13ef69d336c9..000000000000
--- a/addons/notes/src/Panel.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Link } from '@reach/router';
-import { SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components';
-import { SyntaxHighlighter, NotesLink } from './Panel';
-
-describe('NotesPanel', () => {
-  describe('SyntaxHighlighter component', () => {
-    it('should return code if className is undefined', () => {
-      const wrapper = shallow(<SyntaxHighlighter>some text</SyntaxHighlighter>);
-      const code = wrapper.find('code');
-      expect(code.exists()).toBeTruthy();
-      expect(code.text()).toBe('some text');
-    });
-    it('should return SyntaxHighlighterBase if there is a className prop', () => {
-      const wrapper = shallow(
-        <SyntaxHighlighter className="lang-jsx">some text</SyntaxHighlighter>
-      );
-      const syntaxHighlighterBase = wrapper.find(SyntaxHighlighterBase);
-      expect(syntaxHighlighterBase.exists()).toBeTruthy();
-      expect(syntaxHighlighterBase.prop('language')).toBe('jsx');
-    });
-  });
-
-  describe('NotesLink component', () => {
-    it('should render storybook links with @storybook/router Link', () => {
-      const component = mount(
-        <NotesLink href="/story/addon-notes" title="title">
-          Storybook Link
-        </NotesLink>
-      );
-      expect(component.find(Link).prop('to')).toBe('/?path=/story/addon-notes');
-      expect(component.find(Link).prop('title')).toBe('title');
-    });
-    it('should render absolute links as <a>', () => {
-      const component = mount(
-        <NotesLink href="https://example.com" title="title">
-          Storybook Link
-        </NotesLink>
-      );
-      expect(component.find('a').prop('href')).toBe('https://example.com');
-      expect(component.find('a').prop('title')).toBe('title');
-    });
-  });
-});
diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
deleted file mode 100644
index d13879abd9f7..000000000000
--- a/addons/notes/src/Panel.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import React, { ReactElement, Fragment, ReactNode } from 'react';
-import { types } from '@storybook/addons';
-import { API, Consumer, Combo } from '@storybook/api';
-import { Link as RouterLink } from '@storybook/router';
-import { styled } from '@storybook/theming';
-
-import {
-  SyntaxHighlighter as SyntaxHighlighterBase,
-  Placeholder,
-  DocumentWrapper,
-  Link,
-  TabWrapper,
-  TabsState,
-} from '@storybook/components';
-import Markdown from 'markdown-to-jsx';
-import Giphy from './giphy';
-
-import { formatter } from './formatter';
-
-import { PARAM_KEY, Parameters } from './shared';
-
-const Panel = styled.div<{}>(({ theme }) => ({
-  padding: '3rem 40px',
-  boxSizing: 'border-box',
-  width: '100%',
-  maxWidth: 980,
-  margin: '0 auto',
-  ...(theme.addonNotesTheme || {}),
-}));
-
-interface Props {
-  active: boolean;
-  api: API;
-}
-
-function read(param: Parameters | undefined): Record<string, string> | string | undefined {
-  if (!param) {
-    return undefined;
-  }
-  if (typeof param === 'string') {
-    return param;
-  }
-  if ('disable' in param) {
-    return undefined;
-  }
-  if ('text' in param) {
-    return param.text;
-  }
-  if ('markdown' in param) {
-    return param.markdown;
-  }
-  if (typeof param === 'object') {
-    return param;
-  }
-  return undefined;
-}
-
-interface SyntaxHighlighterProps {
-  className?: string;
-  children: ReactElement;
-  [key: string]: any;
-}
-export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighlighterProps) => {
-  // markdown-to-jsx does not add className to inline code
-  if (typeof className !== 'string') {
-    return <code>{children}</code>;
-  }
-  // className: "lang-jsx"
-  const language = className.split('-');
-  return (
-    <SyntaxHighlighterBase
-      language={language[1] || 'plaintext'}
-      bordered
-      format={false}
-      copyable
-      {...props}
-    >
-      {children}
-    </SyntaxHighlighterBase>
-  );
-};
-
-interface NotesLinkProps {
-  href: string;
-  children: ReactElement;
-}
-export const NotesLink = ({ href, children, ...props }: NotesLinkProps) => {
-  /* https://github.com/sindresorhus/is-absolute-url/blob/master/index.js */
-  const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/.test(href);
-  const isAnchorUrl = /^#.*/.test(href);
-
-  if (isAbsoluteUrl || isAnchorUrl) {
-    return (
-      <a href={href} {...props}>
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <RouterLink to={href} {...props}>
-      {children}
-    </RouterLink>
-  );
-};
-
-// use our SyntaxHighlighter component in place of a <code> element when
-// converting markdown to react elements
-const defaultOptions = {
-  overrides: {
-    code: SyntaxHighlighter,
-    a: NotesLink,
-    Giphy: {
-      component: Giphy,
-    },
-  },
-};
-
-interface Overrides {
-  overrides: {
-    [type: string]: ReactNode;
-  };
-}
-type Options = typeof defaultOptions & Overrides;
-
-const mapper = ({
-  state,
-  api,
-}: Combo): { value?: string | Record<string, string>; options: Options } => {
-  const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
-    (acc, [k, v]) => ({ ...acc, [k]: v.render }),
-    {}
-  );
-  const options = {
-    ...defaultOptions,
-    overrides: { ...defaultOptions.overrides, ...extraElements },
-  };
-
-  const story = state.storiesHash[state.storyId];
-  const value = read(story ? api.getParameters(story.id, PARAM_KEY) : undefined);
-
-  return { options, value };
-};
-
-const NotesPanel = ({ active }: Props) => {
-  if (!active) {
-    return null;
-  }
-
-  return (
-    <Consumer filter={mapper}>
-      {({ options, value }: { options: Options; value?: string | Record<string, string> }) => {
-        if (!value) {
-          return (
-            <Placeholder>
-              <Fragment>No notes yet</Fragment>
-              <Fragment>
-                Learn how to&nbsp;
-                <Link
-                  href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
-                  target="_blank"
-                  withArrow
-                  secondary
-                  cancel={false}
-                >
-                  document components in Markdown
-                </Link>
-              </Fragment>
-            </Placeholder>
-          );
-        }
-
-        if (typeof value === 'string' || Object.keys(value).length === 1) {
-          const md = typeof value === 'object' ? Object.values(value)[0] : value;
-
-          return (
-            <Panel className="addon-notes-container">
-              <DocumentWrapper>
-                <Markdown options={options}>{formatter(md)}</Markdown>
-              </DocumentWrapper>
-            </Panel>
-          );
-        }
-
-        const groups: { title: string; render: (props: { active: boolean }) => void }[] = [];
-
-        Object.entries(value).forEach(([title, docs]) => {
-          groups.push({
-            title,
-            render: ({ active: isActive }) => (
-              <TabWrapper key={title} active={isActive}>
-                <Panel>
-                  <DocumentWrapper>
-                    <Markdown options={options}>{formatter(docs)}</Markdown>
-                  </DocumentWrapper>
-                </Panel>
-              </TabWrapper>
-            ),
-          });
-        });
-
-        return (
-          <div className="addon-notes-container">
-            <TabsState>
-              {groups.map(group => (
-                <div id={group.title} key={group.title} title={group.title}>
-                  {group.render}
-                </div>
-              ))}
-            </TabsState>
-          </div>
-        );
-      }}
-    </Consumer>
-  );
-};
-
-export default NotesPanel;
diff --git a/addons/notes/src/formatter.ts b/addons/notes/src/formatter.ts
deleted file mode 100644
index cb2f406fb710..000000000000
--- a/addons/notes/src/formatter.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import memoize from 'memoizerific';
-
-export const formatter = memoize(2)((code: string) => {
-  // code provided to the component is often coming from template literals, which preserve whitespace.
-  // sometimes the first line doesn't have padding, but the second does.
-  // we split the code-string into lines, then if we find padding on line 0 or 1,
-  // we assume that padding is bad, and remove that much padding on all following lines
-  return code
-    .split(/\n/)
-    .reduce(
-      (acc, i, index) => {
-        const match = i.match(/^((:?\s|\t)+)/);
-        const padding = match ? match[1] : '';
-
-        if (acc.firstIndent === '' && padding && index < 3) {
-          return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding };
-        }
-        return {
-          result: `${acc.result}\n${i.replace(acc.firstIndent, '').replace(/\s*$/, '')}`,
-          firstIndent: acc.firstIndent,
-        };
-      },
-      { firstIndent: '', result: '' }
-    )
-    .result.trim();
-});
diff --git a/addons/notes/src/giphy.tsx b/addons/notes/src/giphy.tsx
deleted file mode 100644
index 1111ce453564..000000000000
--- a/addons/notes/src/giphy.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fetch } from 'global';
-import React, { Component } from 'react';
-
-import { logger } from '@storybook/client-logger';
-
-interface Props {
-  query: string;
-}
-interface State {
-  src: string | null;
-}
-export default class Giphy extends Component<Props, State> {
-  state: State = {
-    src: null,
-  };
-
-  componentDidMount() {
-    const { query } = this.props;
-    // TODO: replace this api_key, and make it configurable
-    // note: I have requested a production api_key:
-    // it's pending: bluXZc8ZAre19mvTtVi900CdsJhbVTEK
-    fetch(`http://api.giphy.com/v1/gifs/search?limit=1&api_key=dc6zaTOxFJmzC&q=${query}`)
-      .then((response: { ok: any; json: () => void }) => response.ok && response.json())
-      .then((data: { data: { images: { original: { url: string } } }[] }) => {
-        this.setState({
-          src: data.data[0].images.original.url,
-        });
-      })
-      .catch((e: any) => logger.error(e));
-  }
-
-  render() {
-    const { src } = this.state;
-    // TODO: we should have a nice looking <Img /> component
-    return src ? <img src={src} alt="" /> : null;
-  }
-}
diff --git a/addons/notes/src/index.ts b/addons/notes/src/index.ts
deleted file mode 100644
index f1ed9aea6602..000000000000
--- a/addons/notes/src/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
-import deprecate from 'util-deprecate';
-
-// todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
-export const withNotes = makeDecorator({
-  name: 'withNotes',
-  parameterName: 'notes',
-  skipIfNoParametersOrOptions: true,
-  allowDeprecatedUsage: true,
-
-  wrapper: deprecate(
-    (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
-      const storyOptions = parameters || options;
-
-      const { text, markdown } =
-        typeof storyOptions === 'string'
-          ? {
-              text: storyOptions,
-              markdown: undefined,
-            }
-          : storyOptions;
-
-      if (!text && !markdown) {
-        throw new Error(
-          `Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties`
-        );
-      }
-
-      return getStory(context);
-    },
-    'withNotes is deprecated'
-  ),
-});
-
-export const withMarkdownNotes = deprecate((text: string, options: any) => {},
-'withMarkdownNotes is deprecated');
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/notes/src/public_api.ts b/addons/notes/src/public_api.ts
deleted file mode 100644
index dc0dc8965a31..000000000000
--- a/addons/notes/src/public_api.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '.';
diff --git a/addons/notes/src/register.tsx b/addons/notes/src/register.tsx
deleted file mode 100644
index a5c6c0bf896a..000000000000
--- a/addons/notes/src/register.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import addons, { types } from '@storybook/addons';
-
-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';
-
-export default function register(type: types) {
-  addons.register(ADDON_ID, api => {
-    addons.add(PANEL_ID, {
-      type,
-      title: 'Notes',
-      route: ({ storyId }) => `/info/${storyId}`, // todo add type
-      match: ({ viewMode }) => viewMode === 'info', // todo add type
-      render: ({ active, key }) => <Panel api={api} active={active} key={key} />,
-      paramKey: PARAM_KEY,
-    });
-  });
-}
diff --git a/addons/notes/src/shared.ts b/addons/notes/src/shared.ts
deleted file mode 100644
index 708819358328..000000000000
--- a/addons/notes/src/shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const ADDON_ID = 'storybookjs/notes';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PARAM_KEY = `notes`;
-
-interface TextParameter {
-  text: string;
-}
-interface MarkdownParameter {
-  markdown: string;
-}
-interface DisabledParameter {
-  disable: boolean;
-}
-type TabsParameter = Record<string, string>;
-
-export type Parameters =
-  | string
-  | TextParameter
-  | MarkdownParameter
-  | DisabledParameter
-  | TabsParameter;
diff --git a/addons/notes/src/typings.d.ts b/addons/notes/src/typings.d.ts
deleted file mode 100644
index 7d209326fbef..000000000000
--- a/addons/notes/src/typings.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// There are no types for markdown-to-jsx
-declare module 'markdown-to-jsx' {
-  const Markdown: any;
-  export default Markdown;
-}
-
-declare module 'global';
diff --git a/addons/notes/tsconfig.json b/addons/notes/tsconfig.json
deleted file mode 100644
index 8876bb6737a1..000000000000
--- a/addons/notes/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}
diff --git a/addons/ondevice-actions/README.md b/addons/ondevice-actions/README.md
deleted file mode 100644
index 5853c8695b0f..000000000000
--- a/addons/ondevice-actions/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Storybook Actions Addon for react-native
-
-Storybook Actions Addon allows you to log events/actions inside stories in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions).
-Refer to its documentation to understand how to use actions**
-
-## Installation
-
-```sh
-yarn add -D @storybook/addon-ondevice-actions @storybook/addon-actions
-```
-
-## Configuration
-
-Create a file called `rn-addons.js` in your storybook config.
-
-Add following content to it:
-
-```js
-import '@storybook/addon-ondevice-actions/register';
-```
-
-Then import `rn-addons.js` next to your `getStorybookUI` call.
-
-```js
-import './rn-addons';
-```
-
-See [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
deleted file mode 100644
index 3028b4a5bc9f..000000000000
--- a/addons/ondevice-actions/package.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "@storybook/addon-ondevice-actions",
-  "version": "5.3.0-rc.0",
-  "description": "Action Logger addon for react-native storybook",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "fast-deep-equal": "^2.0.1"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "5.3.0-rc.0"
-  },
-  "peerDependencies": {
-    "@storybook/addon-actions": "*",
-    "react": "*",
-    "react-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/ondevice-actions/register.js b/addons/ondevice-actions/register.js
deleted file mode 100644
index e69edbea3ed1..000000000000
--- a/addons/ondevice-actions/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist').register();
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
deleted file mode 100644
index 158fbc2a0aee..000000000000
--- a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-disable no-nested-ternary */
-import React, { Component } from 'react';
-import { Button, View, Text } from 'react-native';
-
-const theme = {
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
-  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
-
-  ARROW_COLOR: '#6e6e6e',
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  ARROW_ANIMATION_DURATION: '0',
-};
-
-class Inspect extends Component<{ name?: string; value: any }, { expanded: boolean }> {
-  state = { expanded: false };
-
-  render() {
-    const { name, value } = this.props;
-    const { expanded } = this.state;
-    const toggle = (
-      <View style={{ width: 40, height: 40 }}>
-        {name &&
-        ((Array.isArray(value) && value.length) ||
-          (value &&
-            typeof value === 'object' &&
-            !Array.isArray(value) &&
-            Object.keys(value).length)) ? (
-          <Button
-            onPress={() => this.setState(s => ({ expanded: !s.expanded }))}
-            title={!expanded ? '▶' : '▼'}
-          />
-        ) : null}
-      </View>
-    );
-
-    const nameComponent = name ? (
-      <Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
-    ) : null;
-
-    if (Array.isArray(value)) {
-      if (name) {
-        return (
-          <>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              {toggle}
-              {nameComponent}
-              <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
-            </View>
-            {expanded ? (
-              <View style={{ marginLeft: 40 }}>
-                {value.map((v, i) => (
-                  <View key={i} style={{ marginLeft: 40 }}>
-                    <Inspect value={v} />
-                  </View>
-                ))}
-                <View style={{ marginLeft: 20 }}>
-                  <Text>]</Text>
-                </View>
-              </View>
-            ) : null}
-          </>
-        );
-      }
-      return (
-        <View>
-          <Text>[</Text>
-          {value.map((v, i) => (
-            <View key={i} style={{ marginLeft: 20 }}>
-              <Inspect value={v} />
-            </View>
-          ))}
-          <Text>]</Text>
-        </View>
-      );
-    }
-    if (value && typeof value === 'object' && !(value instanceof RegExp)) {
-      if (name) {
-        return (
-          <>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              {toggle}
-              {nameComponent}
-              <Text>
-                {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
-              </Text>
-            </View>
-            {expanded ? (
-              <View style={{ marginLeft: 40 }}>
-                {Object.entries(value).map(([key, v]) => (
-                  <View key={key}>
-                    <Inspect name={key} value={v} />
-                  </View>
-                ))}
-                <View style={{ marginLeft: 20 }}>
-                  <Text>{'}'}</Text>
-                </View>
-              </View>
-            ) : null}
-          </>
-        );
-      }
-      return (
-        <View>
-          <Text>{'{'}</Text>
-          {Object.entries(value).map(([key, v]) => (
-            <View key={key}>
-              <Inspect name={key} value={v} />
-            </View>
-          ))}
-          <Text>{'}'}</Text>
-        </View>
-      );
-    }
-    if (name) {
-      return (
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {toggle}
-          {nameComponent}
-          <Text>: </Text>
-          <Value value={value} />
-        </View>
-      );
-    }
-    return (
-      <View>
-        <Value value={value} />
-      </View>
-    );
-  }
-}
-
-function Value({ value }: { value: any }) {
-  if (value === null) {
-    return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
-  }
-  if (value === undefined) {
-    return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
-  }
-  if (value instanceof RegExp) {
-    return (
-      <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {`/${value.source}/${value.flags}`}
-      </Text>
-    );
-  }
-  switch (typeof value) {
-    case 'string':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
-      );
-    case 'number':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
-      );
-    case 'boolean':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
-      );
-    case 'function':
-      return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
-    default:
-      return <Text>{JSON.stringify(value)}</Text>;
-  }
-}
-
-export default Inspect;
diff --git a/addons/ondevice-actions/src/components/ActionLogger/index.tsx b/addons/ondevice-actions/src/components/ActionLogger/index.tsx
deleted file mode 100644
index 1081214c3bf3..000000000000
--- a/addons/ondevice-actions/src/components/ActionLogger/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Button, View, Text, ScrollView } from 'react-native';
-import { ActionDisplay } from '@storybook/addon-actions';
-import Inspect from './Inspect';
-
-interface ActionLoggerProps {
-  actions: ActionDisplay[];
-  onClear: () => void;
-}
-
-export const ActionLogger: FunctionComponent<ActionLoggerProps> = ({ actions, onClear }) => (
-  <ScrollView>
-    <ScrollView horizontal>
-      <View>
-        {actions.map((action: ActionDisplay) => (
-          <View key={action.id} style={{ flexDirection: 'row' }}>
-            <View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
-            <View style={{ flexGrow: 1 }}>
-              <Inspect name={action.data.name} value={action.data.args || action.data} />
-            </View>
-          </View>
-        ))}
-      </View>
-    </ScrollView>
-    <View>
-      <Button onPress={onClear} title="CLEAR" />
-    </View>
-  </ScrollView>
-);
-
-export default ActionLogger;
diff --git a/addons/ondevice-actions/src/containers/ActionLogger/index.tsx b/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
deleted file mode 100644
index 9ea3ffa3c0c7..000000000000
--- a/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import deepEqual from 'fast-deep-equal';
-
-import { addons } from '@storybook/addons';
-import { SELECT_STORY } from '@storybook/core-events';
-import { ActionDisplay, EVENT_ID } from '@storybook/addon-actions';
-
-import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
-
-interface ActionLoggerProps {
-  active: boolean;
-}
-
-interface ActionLoggerState {
-  actions: ActionDisplay[];
-}
-
-const safeDeepEqual = (a: any, b: any): boolean => {
-  try {
-    return deepEqual(a, b);
-  } catch (e) {
-    return false;
-  }
-};
-
-export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
-  private channel = addons.getChannel();
-
-  constructor(props: ActionLoggerProps) {
-    super(props);
-
-    this.state = { actions: [] };
-  }
-
-  componentDidMount() {
-    this.channel.addListener(EVENT_ID, this.addAction);
-    this.channel.addListener(SELECT_STORY, this.handleStoryChange);
-  }
-
-  componentWillUnmount() {
-    this.channel.removeListener(SELECT_STORY, this.handleStoryChange);
-    this.channel.removeListener(EVENT_ID, this.addAction);
-  }
-
-  handleStoryChange = () => {
-    const { actions } = this.state;
-    if (actions.length > 0 && actions[0].options.clearOnStoryChange) {
-      this.clearActions();
-    }
-  };
-
-  addAction = (action: ActionDisplay) => {
-    this.setState((prevState: ActionLoggerState) => {
-      const actions = [...prevState.actions];
-      const previous = actions.length && actions[0];
-      if (previous && safeDeepEqual(previous.data, action.data)) {
-        previous.count++; // eslint-disable-line
-      } else {
-        action.count = 1; // eslint-disable-line
-        actions.unshift(action);
-      }
-      return { actions: actions.slice(0, action.options.limit) };
-    });
-  };
-
-  clearActions = () => {
-    this.setState({ actions: [] });
-  };
-
-  render() {
-    const { actions = [] } = this.state;
-    const { active } = this.props;
-    const props = {
-      actions,
-      onClear: this.clearActions,
-    };
-    return active ? <ActionLoggerComponent {...props} /> : null;
-  }
-}
diff --git a/addons/ondevice-actions/src/index.tsx b/addons/ondevice-actions/src/index.tsx
deleted file mode 100644
index 657f6d2dc38f..000000000000
--- a/addons/ondevice-actions/src/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import addons from '@storybook/addons';
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions';
-import ActionLogger from './containers/ActionLogger';
-
-export function register() {
-  addons.register(ADDON_ID, () => {
-    addons.addPanel(PANEL_ID, {
-      title: 'Actions',
-      render: ({ active, key }) => <ActionLogger key={key} active={active} />,
-      paramKey: PARAM_KEY,
-    });
-  });
-}
diff --git a/addons/ondevice-actions/tsconfig.json b/addons/ondevice-actions/tsconfig.json
deleted file mode 100644
index 9b69fbfdaed4..000000000000
--- a/addons/ondevice-actions/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
-}
diff --git a/addons/ondevice-backgrounds/README.md b/addons/ondevice-backgrounds/README.md
deleted file mode 100644
index 24527443d5a2..000000000000
--- a/addons/ondevice-backgrounds/README.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Storybook Backgrounds Addon for react-native
-
-Storybook Backgrounds Addon for react-native can be used to change background colors of your stories right from the device.
-
-<img src="docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
-
-## Installation
-
-```sh
-yarn add -D @storybook/addon-ondevice-backgrounds
-```
-
-## Configuration
-
-Create a file called `rn-addons.js` in your storybook config.
-
-Add following content to it:
-
-```js
-import '@storybook/addon-ondevice-backgrounds/register';
-```
-
-Then import `rn-addons.js` next to your `getStorybookUI` call.
-
-```js
-import './rn-addons';
-```
-
-## Usage
-
-react-native users will have to import `storiesOf` from `@storybook/react-native` and are required to add the `withBackgrounds` decorator.
-
-Then write your stories like this:
-
-```js
-import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-
-addDecorator(withBackgrounds);
-
-storiesOf('Button', module)
-  .addParameters({
-    backgrounds: [
-      { name: 'dark', value: '#222222' },
-      { name: 'light', value: '#eeeeee', default: true },
-    ],
-  })
-  .add('with text', () => <Text>Click me</Text>);
-```
-
-See [web backgrounds addon](../backgrounds#usage) for detailed usage and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
diff --git a/addons/ondevice-backgrounds/docs/demo.gif b/addons/ondevice-backgrounds/docs/demo.gif
deleted file mode 100644
index b36edd000016..000000000000
Binary files a/addons/ondevice-backgrounds/docs/demo.gif and /dev/null differ
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
deleted file mode 100644
index 6281630a3c41..000000000000
--- a/addons/ondevice-backgrounds/package.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "5.3.0-rc.0",
-  "description": "A react-native storybook addon to show different backgrounds for your preview",
-  "keywords": [
-    "addon",
-    "background",
-    "react",
-    "storybook"
-  ],
-  "homepage": "https://storybook.js.org",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/ondevice-backgrounds"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/ondevice-backgrounds/register.js b/addons/ondevice-backgrounds/register.js
deleted file mode 100644
index cc38cb06f1f2..000000000000
--- a/addons/ondevice-backgrounds/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register');
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
deleted file mode 100644
index 8d36e6491f94..000000000000
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable 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 { AddonStore } from '@storybook/addons';
-import { API } from '@storybook/api';
-import { StoryStore } from '@storybook/client-api';
-
-import Swatch from './Swatch';
-import BackgroundEvents, { PARAM_KEY } from './constants';
-import { Background } from './index';
-
-const codeSample = `
-import { storiesOf } from '@storybook/react-native';
-import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-
-addDecorator(withBackgrounds);
-
-storiesOf('First Component', module)
-  .addParameters({
-    backgrounds: [
-      { name: 'warm', value: 'hotpink', default: true },
-      { name: 'cool', value: 'deepskyblue' },
-    ],
-  })
-  .add("First Button", () => <Button>Click me</Button>);
-`.trim();
-
-const Instructions = () => (
-  <View>
-    <Text style={{ fontSize: 16 }}>Setup Instructions</Text>
-    <Text>
-      Please add the background decorator definition to your story. The background decorate accepts
-      an array of items, which should include a name for your color (preferably the css class name)
-      and the corresponding color / image value.
-    </Text>
-    <Text>
-      Below is an example of how to add the background decorator to your story definition.
-    </Text>
-    <Text>{codeSample}</Text>
-  </View>
-);
-
-export type Channel = ReturnType<AddonStore['getChannel']>;
-type Selection = ReturnType<StoryStore['fromId']>;
-interface BackgroundPanelProps {
-  channel: Channel;
-  api: API;
-  active: boolean;
-}
-
-interface BackgroundPanelState {
-  selection: Selection;
-}
-
-export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
-  componentDidMount() {
-    this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
-  }
-
-  componentWillUnmount() {
-    this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
-  }
-
-  setBackgroundFromSwatch = (background: string) => {
-    this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
-  };
-
-  onStorySelected = (selection: Selection) => {
-    this.setState({ selection });
-  };
-
-  render() {
-    const { active, api } = this.props;
-
-    if (!active || !this.state) {
-      return null;
-    }
-
-    const story = api
-      .store()
-      .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
-    const backgrounds: Background[] = story.parameters[PARAM_KEY];
-
-    return (
-      <View>
-        {backgrounds ? (
-          backgrounds.map(({ value, name }) => (
-            <View key={`${name} ${value}`}>
-              <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
-            </View>
-          ))
-        ) : (
-          <Instructions />
-        )}
-      </View>
-    );
-  }
-}
diff --git a/addons/ondevice-backgrounds/src/Swatch.tsx b/addons/ondevice-backgrounds/src/Swatch.tsx
deleted file mode 100644
index cd55fe629b18..000000000000
--- a/addons/ondevice-backgrounds/src/Swatch.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity, View, Text } from 'react-native';
-
-interface SwatchProps {
-  name: string;
-  value: string;
-  setBackground: (background: string) => void;
-}
-
-const Swatch: FunctionComponent<SwatchProps> = ({ name, value, setBackground }) => (
-  <TouchableOpacity
-    style={{
-      borderRadius: 4,
-      borderWidth: 1,
-      borderColor: 'rgba(0,0,0,0.2)',
-      marginTop: 10,
-      marginBottom: 20,
-      marginHorizontal: 10,
-    }}
-    onPress={() => setBackground(value)}
-  >
-    <View style={{ flex: 1, backgroundColor: value, height: 40 }} />
-    <View style={{ padding: 4, flexDirection: 'row', justifyContent: 'space-between' }}>
-      <Text>{name}:</Text>
-      <Text>{value}</Text>
-    </View>
-  </TouchableOpacity>
-);
-
-Swatch.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  setBackground: PropTypes.func.isRequired,
-};
-
-export default Swatch;
diff --git a/addons/ondevice-backgrounds/src/constants.ts b/addons/ondevice-backgrounds/src/constants.ts
deleted file mode 100644
index d28430f5e05c..000000000000
--- a/addons/ondevice-backgrounds/src/constants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const PARAM_KEY = 'backgrounds';
-export const ADDON_ID = 'storybook-addon-background';
-export const PANEL_ID = `${ADDON_ID}/background-panel`;
-
-export default {
-  SET: `${ADDON_ID}:set`,
-  UNSET: `${ADDON_ID}:unset`,
-  UPDATE_BACKGROUND: `${ADDON_ID}:update`,
-};
diff --git a/addons/ondevice-backgrounds/src/container.tsx b/addons/ondevice-backgrounds/src/container.tsx
deleted file mode 100644
index ba57b6d4fd5c..000000000000
--- a/addons/ondevice-backgrounds/src/container.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import { View } from 'react-native';
-import Constants from './constants';
-import { Channel } from './BackgroundPanel';
-
-interface ContainerProps {
-  initialBackground: string;
-  channel: Channel;
-}
-
-interface ContainerState {
-  background: string;
-}
-
-export default class Container extends Component<ContainerProps, ContainerState> {
-  constructor(props: ContainerProps) {
-    super(props);
-    this.state = { background: props.initialBackground || '' };
-  }
-
-  componentDidMount() {
-    const { channel } = this.props;
-    channel.on(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
-  }
-
-  componentWillUnmount() {
-    const { channel } = this.props;
-    channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
-  }
-
-  onBackgroundChange = (background: string) => {
-    this.setState({ background });
-  };
-
-  render() {
-    const { background } = this.state;
-    const { children } = this.props;
-
-    return (
-      <View style={{ flex: 1, backgroundColor: background || 'transparent' }}>{children}</View>
-    );
-  }
-}
diff --git a/addons/ondevice-backgrounds/src/index.tsx b/addons/ondevice-backgrounds/src/index.tsx
deleted file mode 100644
index f9d1c8a0b848..000000000000
--- a/addons/ondevice-backgrounds/src/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import addons, { makeDecorator } from '@storybook/addons';
-
-import Events from './constants';
-import Container from './container';
-
-export interface Background {
-  name: string;
-  value: string;
-  default?: boolean;
-}
-
-export const withBackgrounds = makeDecorator({
-  name: 'withBackgrounds',
-  parameterName: 'backgrounds',
-  skipIfNoParametersOrOptions: true,
-  allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
-    const data = parameters || options || [];
-    const backgrounds: Background[] = Array.isArray(data) ? data : Object.values(data);
-
-    let background = 'transparent';
-    if (backgrounds.length !== 0) {
-      addons.getChannel().emit(Events.SET, backgrounds);
-
-      const defaultOrFirst = backgrounds.find(x => x.default) || backgrounds[0];
-
-      if (defaultOrFirst) {
-        background = defaultOrFirst.value;
-      }
-    }
-
-    return (
-      <Container initialBackground={background} channel={addons.getChannel()}>
-        {getStory(context)}
-      </Container>
-    );
-  },
-});
diff --git a/addons/ondevice-backgrounds/src/register.tsx b/addons/ondevice-backgrounds/src/register.tsx
deleted file mode 100644
index 39e1046517b8..000000000000
--- a/addons/ondevice-backgrounds/src/register.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import addons from '@storybook/addons';
-
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
-import BackgroundPanel from './BackgroundPanel';
-
-addons.register(ADDON_ID, api => {
-  const channel = addons.getChannel();
-  addons.addPanel(PANEL_ID, {
-    title: 'Backgrounds',
-    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
-    paramKey: PARAM_KEY,
-  });
-});
diff --git a/addons/ondevice-backgrounds/tsconfig.json b/addons/ondevice-backgrounds/tsconfig.json
deleted file mode 100644
index 8876bb6737a1..000000000000
--- a/addons/ondevice-backgrounds/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}
diff --git a/addons/ondevice-knobs/README.md b/addons/ondevice-knobs/README.md
deleted file mode 100644
index 3c17c1275377..000000000000
--- a/addons/ondevice-knobs/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Storybook Knobs Addon for react-native
-
-Storybook Knobs Addon allows you to edit react props using the Storybook UI using variables inside stories in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs).
-Refer to its documentation to understand how to use knobs**
-
-## Installation
-
-```sh
-yarn add -D @storybook/addon-ondevice-knobs @storybook/addon-knobs
-```
-
-## Configuration
-
-Create a file called `rn-addons.js` in your storybook config.
-
-Add following content to it:
-
-```js
-import '@storybook/addon-ondevice-knobs/register';
-```
-
-Then import `rn-addons.js` next to your `getStorybookUI` call.
-
-```js
-import './rn-addons';
-```
-
-See [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs) to learn how to write stories with knobs and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
deleted file mode 100644
index c5f2cc2b8dd6..000000000000
--- a/addons/ondevice-knobs/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "@storybook/addon-ondevice-knobs",
-  "version": "5.3.0-rc.0",
-  "description": "Display storybook story knobs on your deviced.",
-  "keywords": [
-    "addon",
-    "knobs",
-    "ondevice",
-    "react-native",
-    "storybook"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/ondevice-knobs"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@emotion/native": "^10.0.14",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "deep-equal": "^1.0.1",
-    "prop-types": "^15.7.2",
-    "react-native-color-picker": "^0.4.0",
-    "react-native-modal-datetime-picker": "^7.4.2",
-    "react-native-modal-selector": "^1.0.2",
-    "react-native-switch": "^1.5.0"
-  },
-  "peerDependencies": {
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "react": "*",
-    "react-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/ondevice-knobs/register.js b/addons/ondevice-knobs/register.js
deleted file mode 100644
index 66453c4cafe9..000000000000
--- a/addons/ondevice-knobs/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/index').register();
diff --git a/addons/ondevice-knobs/src/GroupTabs.js b/addons/ondevice-knobs/src/GroupTabs.js
deleted file mode 100644
index e423304468e5..000000000000
--- a/addons/ondevice-knobs/src/GroupTabs.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { ScrollView, Text, TouchableOpacity } from 'react-native';
-import styled from '@emotion/native';
-
-const Label = styled.Text(({ theme, active }) => ({
-  color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
-  fontSize: 17,
-}));
-
-class GroupTabs extends Component {
-  renderTab(name, group) {
-    let { title } = group;
-    if (typeof title === 'function') {
-      title = title();
-    }
-
-    const { onGroupSelect, selectedGroup } = this.props;
-
-    return (
-      <TouchableOpacity
-        style={{
-          marginTop: 5,
-          marginRight: 15,
-          paddingBottom: 10,
-        }}
-        key={name}
-        onPress={() => onGroupSelect(name)}
-      >
-        <Label active={selectedGroup === name}>{title}</Label>
-      </TouchableOpacity>
-    );
-  }
-
-  render() {
-    const { groups } = this.props;
-
-    const entries = groups ? Object.entries(groups) : null;
-
-    return entries && entries.length ? (
-      <ScrollView
-        horizontal
-        style={{
-          marginHorizontal: 10,
-          flexDirection: 'row',
-          marginBottom: 10,
-          borderBottomWidth: 1,
-          borderBottomColor: '#ccc',
-        }}
-      >
-        {entries.map(([key, value]) => this.renderTab(key, value))}
-      </ScrollView>
-    ) : (
-      <Text>no groups available</Text>
-    );
-  }
-}
-
-GroupTabs.defaultProps = {
-  groups: {},
-  onGroupSelect: () => {},
-  selectedGroup: null,
-};
-
-GroupTabs.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  groups: PropTypes.object,
-  onGroupSelect: PropTypes.func,
-  selectedGroup: PropTypes.string,
-};
-
-export default GroupTabs;
diff --git a/addons/ondevice-knobs/src/PropField.js b/addons/ondevice-knobs/src/PropField.js
deleted file mode 100644
index dfde3288ceb6..000000000000
--- a/addons/ondevice-knobs/src/PropField.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
-import React from 'react';
-import styled from '@emotion/native';
-import TypeMap from './types';
-
-const InvalidType = () => <Text style={{ margin: 10 }}>Invalid Type</Text>;
-
-const Label = styled.Text(({ theme }) => ({
-  marginLeft: 10,
-  fontSize: 14,
-  color: theme.labelColor,
-  fontWeight: 'bold',
-}));
-
-const PropField = ({ onChange, onPress, knob }) => {
-  const InputType = TypeMap[knob.type] || InvalidType;
-
-  return (
-    <View>
-      {!knob.hideLabel ? <Label>{`${knob.label || knob.name}`}</Label> : null}
-      <InputType knob={knob} onChange={onChange} onPress={onPress} />
-    </View>
-  );
-};
-
-PropField.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    label: PropTypes.string,
-    value: PropTypes.any,
-    hideLabel: PropTypes.bool,
-    type: PropTypes.oneOf([
-      'text',
-      'number',
-      'color',
-      'boolean',
-      'object',
-      'select',
-      'array',
-      'date',
-      'button',
-    ]),
-  }).isRequired,
-  onChange: PropTypes.func.isRequired,
-  onPress: PropTypes.func.isRequired,
-};
-
-export default PropField;
diff --git a/addons/ondevice-knobs/src/PropForm.js b/addons/ondevice-knobs/src/PropForm.js
deleted file mode 100644
index e0c35334cf1b..000000000000
--- a/addons/ondevice-knobs/src/PropForm.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint no-underscore-dangle: 0 */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import PropField from './PropField';
-
-export default class PropForm extends React.Component {
-  makeChangeHandler(name, type) {
-    return value => {
-      const { onFieldChange } = this.props;
-      const change = { name, type, value };
-      onFieldChange(change);
-    };
-  }
-
-  render() {
-    const { knobs, onFieldClick } = this.props;
-
-    return (
-      <View>
-        {knobs.map(knob => {
-          const changeHandler = this.makeChangeHandler(knob.name, knob.type);
-          return (
-            <PropField
-              key={knob.name}
-              name={knob.name}
-              type={knob.type}
-              value={knob.value}
-              knob={knob}
-              onChange={changeHandler}
-              onPress={onFieldClick}
-            />
-          );
-        })}
-      </View>
-    );
-  }
-}
-
-PropForm.displayName = 'PropForm';
-
-PropForm.defaultProps = {
-  knobs: [],
-};
-
-PropForm.propTypes = {
-  knobs: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      value: PropTypes.any,
-    })
-  ),
-  onFieldChange: PropTypes.func.isRequired,
-  onFieldClick: PropTypes.func.isRequired,
-};
diff --git a/addons/ondevice-knobs/src/index.js b/addons/ondevice-knobs/src/index.js
deleted file mode 100644
index 34e4793351bc..000000000000
--- a/addons/ondevice-knobs/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import addons from '@storybook/addons';
-import Panel from './panel';
-
-export { withKnobs } from '@storybook/addon-knobs';
-
-export function register() {
-  addons.register('RNKNOBS', () => {
-    const channel = addons.getChannel();
-    addons.addPanel('RNKNOBS', {
-      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-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js
deleted file mode 100644
index 489ac5adaa94..000000000000
--- a/addons/ondevice-knobs/src/panel.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import PropTypes from 'prop-types';
-import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
-import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs';
-import styled from '@emotion/native';
-import GroupTabs from './GroupTabs';
-import PropForm from './PropForm';
-
-const getTimestamp = () => +new Date();
-
-const DEFAULT_GROUP_ID = 'Other';
-
-const Touchable = styled.TouchableOpacity(({ theme }) => ({
-  borderRadius: 2,
-  borderWidth: 1,
-  borderColor: theme.borderColor,
-  padding: 4,
-  margin: 10,
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-const ResetButton = styled.Text(({ theme }) => ({
-  color: theme.buttonTextColor,
-}));
-
-export default class Panel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.setKnobs = this.setKnobs.bind(this);
-    this.reset = this.reset.bind(this);
-    this.setOptions = this.setOptions.bind(this);
-    this.onGroupSelect = this.onGroupSelect.bind(this);
-
-    this.state = { knobs: {}, groupId: DEFAULT_GROUP_ID };
-    this.options = {};
-
-    this.lastEdit = getTimestamp();
-    this.loadedFromUrl = false;
-  }
-
-  componentDidMount() {
-    const { channel } = this.props;
-
-    channel.on(SET, this.setKnobs);
-    channel.on(SET_OPTIONS, this.setOptions);
-    channel.on(SELECT_STORY, this.reset);
-    channel.emit(FORCE_RE_RENDER);
-  }
-
-  componentWillUnmount() {
-    const { channel } = this.props;
-    channel.removeListener(SET, this.setKnobs);
-    channel.removeListener(SELECT_STORY, this.reset);
-  }
-
-  onGroupSelect(name) {
-    this.setState({ groupId: name });
-  }
-
-  setOptions(options = { timestamps: false }) {
-    this.options = options;
-  }
-
-  setKnobs({ knobs, timestamp }) {
-    if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
-      this.setState({ knobs });
-    }
-  }
-
-  reset = () => {
-    const { channel } = this.props;
-    this.setState({ knobs: {} });
-    channel.emit(RESET);
-  };
-
-  emitChange(changedKnob) {
-    const { channel } = this.props;
-    channel.emit(CHANGE, changedKnob);
-  }
-
-  handleChange(changedKnob) {
-    this.lastEdit = getTimestamp();
-    const { knobs } = this.state;
-    const { name } = changedKnob;
-    const newKnobs = { ...knobs };
-    newKnobs[name] = {
-      ...newKnobs[name],
-      ...changedKnob,
-    };
-
-    this.setState({ knobs: newKnobs });
-
-    this.setState(
-      { knobs: newKnobs },
-      this.emitChange(
-        changedKnob.type === 'number'
-          ? { ...changedKnob, value: parseFloat(changedKnob.value) }
-          : changedKnob
-      )
-    );
-  }
-
-  handleClick(knob) {
-    const { channel } = this.props;
-
-    channel.emit(CLICK, knob);
-  }
-
-  render() {
-    const { active } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    const { knobs, groupId: stateGroupId } = this.state;
-
-    const groups = {};
-    const groupIds = [];
-
-    let knobsArray = Object.keys(knobs);
-
-    const knobsWithGroups = knobsArray.filter(key => knobs[key].groupId);
-
-    knobsWithGroups.forEach(key => {
-      const knobKeyGroupId = knobs[key].groupId;
-      groupIds.push(knobKeyGroupId);
-      groups[knobKeyGroupId] = {
-        render: () => <Text id={knobKeyGroupId}>{knobKeyGroupId}</Text>,
-        title: knobKeyGroupId,
-      };
-    });
-
-    const allHaveGroups = groupIds.length > 0 && knobsArray.length === knobsWithGroups.length;
-
-    // If all of the knobs are assigned to a group, we don't need the default group.
-    const groupId =
-      stateGroupId === DEFAULT_GROUP_ID && allHaveGroups
-        ? knobs[knobsWithGroups[0]].groupId
-        : stateGroupId;
-
-    if (groupIds.length > 0) {
-      if (!allHaveGroups) {
-        groups[DEFAULT_GROUP_ID] = {
-          render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
-          title: DEFAULT_GROUP_ID,
-        };
-      }
-
-      if (groupId === DEFAULT_GROUP_ID) {
-        knobsArray = knobsArray.filter(key => !knobs[key].groupId);
-      }
-
-      if (groupId !== DEFAULT_GROUP_ID) {
-        knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
-      }
-    }
-
-    knobsArray = knobsArray.map(key => knobs[key]);
-
-    if (knobsArray.length === 0) {
-      return <Text>NO KNOBS</Text>;
-    }
-
-    return (
-      <View style={{ flex: 1, paddingTop: 10 }}>
-        {groupIds.length > 0 && (
-          <GroupTabs groups={groups} onGroupSelect={this.onGroupSelect} selectedGroup={groupId} />
-        )}
-        <View>
-          <PropForm
-            knobs={knobsArray}
-            onFieldChange={this.handleChange}
-            onFieldClick={this.handleClick}
-          />
-        </View>
-        <Touchable onPress={this.reset}>
-          <ResetButton>RESET</ResetButton>
-        </Touchable>
-      </View>
-    );
-  }
-}
-
-Panel.propTypes = {
-  active: PropTypes.bool.isRequired,
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }).isRequired,
-  onReset: PropTypes.object, // eslint-disable-line
-};
diff --git a/addons/ondevice-knobs/src/types/Array.js b/addons/ondevice-knobs/src/types/Array.js
deleted file mode 100644
index 88b781ea14e4..000000000000
--- a/addons/ondevice-knobs/src/types/Array.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from '@emotion/native';
-
-const Input = styled.TextInput(({ theme }) => ({
-  borderWidth: 1,
-  borderColor: theme.borderColor,
-  borderRadius: 2,
-  fontSize: 13,
-  padding: 5,
-  margin: 10,
-  color: theme.labelColor,
-}));
-
-function formatArray(value, separator) {
-  if (value === '') {
-    return [];
-  }
-  return value.split(separator);
-}
-
-const ArrayType = ({ knob, onChange }) => (
-  <Input
-    id={knob.name}
-    underlineColorAndroid="transparent"
-    autoCapitalize="none"
-    value={knob.value.join(knob.separator)}
-    onChangeText={e => onChange(formatArray(e, knob.separator))}
-  />
-);
-
-ArrayType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-ArrayType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.array,
-    separator: PropTypes.string,
-  }),
-  onChange: PropTypes.func,
-};
-
-ArrayType.serialize = value => value;
-ArrayType.deserialize = value => {
-  if (Array.isArray(value)) return value;
-
-  return Object.keys(value)
-    .sort()
-    .reduce((array, key) => [...array, value[key]], []);
-};
-
-export default ArrayType;
diff --git a/addons/ondevice-knobs/src/types/Boolean.js b/addons/ondevice-knobs/src/types/Boolean.js
deleted file mode 100644
index 5b38c266d1a6..000000000000
--- a/addons/ondevice-knobs/src/types/Boolean.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import { Switch } from 'react-native-switch';
-import React from 'react';
-
-class BooleanType extends React.Component {
-  onValueChange = () => {
-    const { onChange, knob } = this.props;
-    onChange(!knob.value);
-  };
-
-  render() {
-    const { knob } = this.props;
-
-    return (
-      <View style={{ margin: 10 }}>
-        <Switch id={knob.name} onValueChange={this.onValueChange} value={knob.value} />
-      </View>
-    );
-  }
-}
-
-BooleanType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-BooleanType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.bool,
-  }),
-  onChange: PropTypes.func,
-};
-
-BooleanType.serialize = value => (value ? String(value) : null);
-BooleanType.deserialize = value => value === 'true';
-
-export default BooleanType;
diff --git a/addons/ondevice-knobs/src/types/Button.js b/addons/ondevice-knobs/src/types/Button.js
deleted file mode 100644
index 5b5a4238a672..000000000000
--- a/addons/ondevice-knobs/src/types/Button.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import styled from '@emotion/native';
-
-const Label = styled.Text(({ theme }) => ({
-  fontSize: 17,
-  color: theme.labelColor,
-}));
-
-const ButtonType = ({ knob, onPress }) => (
-  <TouchableOpacity style={{ margin: 10 }} onPress={() => onPress(knob)}>
-    <Label>{knob.name}</Label>
-  </TouchableOpacity>
-);
-
-ButtonType.defaultProps = {
-  knob: {},
-};
-
-ButtonType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-  }),
-  onPress: PropTypes.func.isRequired,
-};
-
-ButtonType.serialize = value => value;
-ButtonType.deserialize = value => value;
-
-export default ButtonType;
diff --git a/addons/ondevice-knobs/src/types/Color.js b/addons/ondevice-knobs/src/types/Color.js
deleted file mode 100644
index 102cae7ad1cc..000000000000
--- a/addons/ondevice-knobs/src/types/Color.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Text, Modal, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
-import { ColorPicker, fromHsv } from 'react-native-color-picker';
-import styled from '@emotion/native';
-
-const Touchable = styled.TouchableOpacity(({ theme, color }) => ({
-  borderColor: theme.borderColor,
-  width: 30,
-  height: 20,
-  borderRadius: 2,
-  borderWidth: 1,
-  margin: 10,
-  backgroundColor: color,
-}));
-
-class ColorType extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      displayColorPicker: false,
-    };
-  }
-
-  openColorPicker = () => {
-    this.setState({
-      displayColorPicker: true,
-    });
-  };
-
-  closeColorPicker = () => {
-    this.setState({
-      displayColorPicker: false,
-    });
-  };
-
-  onChangeColor = color => {
-    const { onChange } = this.props;
-
-    onChange(fromHsv(color));
-  };
-
-  render() {
-    const { knob } = this.props;
-    const { displayColorPicker } = this.state;
-    return (
-      <View>
-        <Touchable color={knob.value} onPress={this.openColorPicker} />
-        <Modal
-          supportedOrientations={['portrait', 'landscape']}
-          transparent
-          visible={displayColorPicker}
-          onRequestClose={this.closeColorPicker}
-        >
-          <TouchableWithoutFeedback onPress={this.closeColorPicker}>
-            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-              <TouchableWithoutFeedback>
-                <View
-                  style={{
-                    backgroundColor: 'white',
-                    borderWidth: 1,
-                    borderColor: 'rgb(247, 244, 244)',
-                    width: 250,
-                    height: 250,
-                    padding: 10,
-                  }}
-                >
-                  <TouchableOpacity
-                    onPress={this.closeColorPicker}
-                    style={{ alignSelf: 'flex-end', padding: 5 }}
-                  >
-                    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>X</Text>
-                  </TouchableOpacity>
-                  <ColorPicker
-                    onColorSelected={this.onChangeColor}
-                    defaultColor={knob.value}
-                    style={{ flex: 1 }}
-                  />
-                </View>
-              </TouchableWithoutFeedback>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      </View>
-    );
-  }
-}
-
-ColorType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.string,
-  }),
-  onChange: PropTypes.func,
-};
-ColorType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-ColorType.serialize = value => value;
-ColorType.deserialize = value => value;
-
-export default ColorType;
diff --git a/addons/ondevice-knobs/src/types/Date.js b/addons/ondevice-knobs/src/types/Date.js
deleted file mode 100644
index 7776ba2959f2..000000000000
--- a/addons/ondevice-knobs/src/types/Date.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
-import DateTimePicker from 'react-native-modal-datetime-picker';
-import styled from '@emotion/native';
-
-const Touchable = styled.TouchableOpacity(({ theme }) => ({
-  borderColor: theme.borderColor,
-  borderWidth: 1,
-  borderRadius: 2,
-  padding: 5,
-}));
-
-const Label = styled.Text(({ theme }) => ({
-  fontSize: 13,
-  color: theme.labelColor,
-}));
-
-// TODO seconds support
-class DateType extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      isDateVisible: false,
-      isTimeVisible: false,
-    };
-  }
-
-  showDatePicker = () => {
-    this.setState({ isDateVisible: true });
-  };
-
-  showTimePicker = () => {
-    this.setState({ isTimeVisible: true });
-  };
-
-  hidePicker = () => {
-    this.setState({ isDateVisible: false, isTimeVisible: false });
-  };
-
-  onDatePicked = date => {
-    const value = date.valueOf();
-    const { onChange } = this.props;
-    onChange(value);
-    this.hidePicker();
-  };
-
-  render() {
-    const { knob } = this.props;
-
-    const { isTimeVisible, isDateVisible } = this.state;
-    const d = new Date(knob.value);
-
-    // https://stackoverflow.com/a/30272803
-    const dateString = [
-      `0${d.getDate()}`.slice(-2),
-      `0${d.getMonth() + 1}`.slice(-2),
-      d.getFullYear(),
-    ].join('-');
-    const timeString = `${`0${d.getHours()}`.slice(-2)}:${`0${d.getMinutes()}`.slice(-2)}`;
-
-    return (
-      <View style={{ margin: 10 }}>
-        <View style={{ flexDirection: 'row' }}>
-          <Touchable onPress={this.showDatePicker}>
-            <Label>{dateString}</Label>
-          </Touchable>
-          <Touchable
-            style={{
-              marginLeft: 5,
-            }}
-            onPress={this.showTimePicker}
-          >
-            <Label>{timeString}</Label>
-          </Touchable>
-        </View>
-        <DateTimePicker
-          date={d}
-          isVisible={isTimeVisible || isDateVisible}
-          mode={isTimeVisible ? 'time' : 'date'}
-          onConfirm={this.onDatePicked}
-          onCancel={this.hidePicker}
-        />
-      </View>
-    );
-  }
-}
-DateType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-DateType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.number,
-  }),
-  onChange: PropTypes.func,
-};
-
-DateType.serialize = value => String(value);
-DateType.deserialize = value => parseFloat(value);
-
-export default DateType;
diff --git a/addons/ondevice-knobs/src/types/Number.js b/addons/ondevice-knobs/src/types/Number.js
deleted file mode 100644
index dbd4946ce4f4..000000000000
--- a/addons/ondevice-knobs/src/types/Number.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { View, Slider } from 'react-native';
-import styled from '@emotion/native';
-
-const Input = styled.TextInput(({ theme }) => ({
-  borderWidth: 1,
-  borderColor: theme.borderColor,
-  borderRadius: 2,
-  fontSize: 13,
-  padding: 5,
-  color: theme.labelColor,
-}));
-
-class NumberType extends React.Component {
-  constructor(props) {
-    super(props);
-    this.renderNormal = this.renderNormal.bind(this);
-    this.renderRange = this.renderRange.bind(this);
-  }
-
-  numberTransformer = x => {
-    if (Number.isNaN(Number(x))) {
-      return x.substr(0, x.length - 1);
-    }
-
-    return x;
-  };
-
-  onChangeNormal = value => {
-    const { onChange } = this.props;
-
-    if (!Number.isNaN(value)) {
-      onChange(value);
-    }
-  };
-
-  renderNormal() {
-    const { knob } = this.props;
-
-    return (
-      <Input
-        autoCapitalize="none"
-        underlineColorAndroid="transparent"
-        value={(knob.value || '').toString()}
-        transformer={this.numberTransformer}
-        keyboardType="numeric"
-        onChangeText={this.onChangeNormal}
-      />
-    );
-  }
-
-  renderRange() {
-    const { knob, onChange } = this.props;
-
-    return (
-      <Slider
-        value={knob.value}
-        minimumValue={knob.min}
-        maximumValue={knob.max}
-        step={knob.step}
-        onSlidingComplete={val => onChange(parseFloat(val))}
-      />
-    );
-  }
-
-  render() {
-    const { knob } = this.props;
-
-    return (
-      <View style={{ margin: 10 }}>{knob.range ? this.renderRange() : this.renderNormal()}</View>
-    );
-  }
-}
-
-NumberType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-NumberType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    step: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    range: PropTypes.bool,
-  }),
-  onChange: PropTypes.func,
-};
-
-NumberType.serialize = value => String(value);
-NumberType.deserialize = value => parseFloat(value);
-
-export default NumberType;
diff --git a/addons/ondevice-knobs/src/types/Object.js b/addons/ondevice-knobs/src/types/Object.js
deleted file mode 100644
index 87d8725baaf4..000000000000
--- a/addons/ondevice-knobs/src/types/Object.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import deepEqual from 'deep-equal';
-import styled from '@emotion/native';
-
-const Input = styled.TextInput(({ theme }) => ({
-  borderWidth: 1,
-  borderRadius: 2,
-  fontSize: 13,
-  padding: 5,
-  margin: 10,
-  borderColor: theme.borderColor,
-  color: theme.labelColor,
-}));
-
-class ObjectType extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {};
-  }
-
-  getJSONString() {
-    const { json, jsonString } = this.state;
-    const { knob } = this.props;
-
-    // If there is an error in the JSON, we need to give that errored JSON.
-    if (this.failed) return jsonString;
-
-    // If the editor value and the knob value is the same, we need to return the
-    // editor value as it allow user to add new fields to the JSON.
-    if (deepEqual(json, knob.value)) return jsonString;
-
-    // If the knob's value is different from the editor, it seems like
-    // there's a outside change and we need to get that.
-    return JSON.stringify(knob.value, null, 2);
-  }
-
-  handleChange = value => {
-    const { onChange } = this.props;
-
-    const withReplacedQuotes = value
-      .replace(/[\u2018\u2019]/g, "'")
-      .replace(/[\u201C\u201D]/g, '"');
-
-    const newState = {
-      jsonString: withReplacedQuotes,
-    };
-
-    try {
-      newState.json = JSON.parse(withReplacedQuotes.trim());
-
-      onChange(newState.json);
-      this.failed = false;
-    } catch (err) {
-      this.failed = true;
-    }
-
-    this.setState(newState);
-  };
-
-  render() {
-    const { knob } = this.props;
-    const jsonString = this.getJSONString();
-    const extraStyle = {};
-
-    if (this.failed) {
-      extraStyle.borderWidth = 1;
-      extraStyle.borderColor = '#fadddd';
-      extraStyle.backgroundColor = '#fff5f5';
-    }
-
-    return (
-      <Input
-        id={knob.name}
-        style={extraStyle}
-        value={jsonString}
-        onChangeText={this.handleChange}
-        multiline
-        autoCapitalize="none"
-        underlineColorAndroid="transparent"
-      />
-    );
-  }
-}
-
-ObjectType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-ObjectType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  }),
-  onChange: PropTypes.func,
-};
-
-ObjectType.serialize = object => JSON.stringify(object);
-ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
-
-export default ObjectType;
diff --git a/addons/ondevice-knobs/src/types/Select.js b/addons/ondevice-knobs/src/types/Select.js
deleted file mode 100644
index 530131bc4d5b..000000000000
--- a/addons/ondevice-knobs/src/types/Select.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint no-underscore-dangle: 0 */
-
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import React from 'react';
-import ModalPicker from 'react-native-modal-selector';
-import styled from '@emotion/native';
-
-const Input = styled.TextInput(({ theme }) => ({
-  borderWidth: 1,
-  borderRadius: 2,
-  padding: 5,
-  margin: 10,
-  borderColor: theme.borderColor,
-  color: theme.labelColor,
-}));
-
-class SelectType extends React.Component {
-  getOptions = ({ options }) => {
-    if (Array.isArray(options)) {
-      return options.map(val => ({ key: val, label: val }));
-    }
-
-    return Object.keys(options).map(key => ({ label: key, key: options[key] }));
-  };
-
-  render() {
-    const { knob, onChange } = this.props;
-
-    const options = this.getOptions(knob);
-
-    const active = options.filter(({ key }) => knob.value === key)[0];
-    const selected = active && active.label;
-
-    return (
-      <View>
-        <ModalPicker
-          data={options}
-          initValue={knob.value}
-          onChange={option => onChange(option.key)}
-          animationType="none"
-        >
-          <Input
-            editable={false}
-            value={selected}
-            autoCapitalize="none"
-            underlineColorAndroid="transparent"
-          />
-        </ModalPicker>
-      </View>
-    );
-  }
-}
-
-SelectType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-SelectType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.string,
-    options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-    selectV2: PropTypes.bool,
-  }),
-  onChange: PropTypes.func,
-};
-
-SelectType.serialize = value => value;
-SelectType.deserialize = value => value;
-
-export default SelectType;
diff --git a/addons/ondevice-knobs/src/types/Text.js b/addons/ondevice-knobs/src/types/Text.js
deleted file mode 100644
index e806e73f810e..000000000000
--- a/addons/ondevice-knobs/src/types/Text.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from '@emotion/native';
-
-const Input = styled.TextInput(({ theme }) => ({
-  borderWidth: 1,
-  borderColor: theme.borderColor,
-  borderRadius: 2,
-  fontSize: 13,
-  padding: 5,
-  margin: 10,
-  color: theme.labelColor,
-}));
-
-const TextType = ({ knob, onChange }) => (
-  <Input
-    id={knob.name}
-    value={knob.value}
-    onChangeText={onChange}
-    autoCapitalize="none"
-    underlineColorAndroid="transparent"
-  />
-);
-
-TextType.defaultProps = {
-  knob: {},
-  onChange: value => value,
-};
-
-TextType.propTypes = {
-  knob: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.string,
-  }),
-  onChange: PropTypes.func,
-};
-
-TextType.serialize = value => value;
-TextType.deserialize = value => value;
-
-export default TextType;
diff --git a/addons/ondevice-knobs/src/types/index.js b/addons/ondevice-knobs/src/types/index.js
deleted file mode 100644
index ebd51deb858e..000000000000
--- a/addons/ondevice-knobs/src/types/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import TextType from './Text';
-import NumberType from './Number';
-import ColorType from './Color';
-import BooleanType from './Boolean';
-import ObjectType from './Object';
-import SelectType from './Select';
-import ArrayType from './Array';
-import DateType from './Date';
-import ButtonType from './Button';
-
-export default {
-  text: TextType,
-  number: NumberType,
-  color: ColorType,
-  boolean: BooleanType,
-  object: ObjectType,
-  select: SelectType,
-  array: ArrayType,
-  date: DateType,
-  button: ButtonType,
-};
diff --git a/addons/ondevice-notes/README.md b/addons/ondevice-notes/README.md
deleted file mode 100644
index 9d5329d210a9..000000000000
--- a/addons/ondevice-notes/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Storybook Notes Addon for react-native
-
-The Notes Addon allows you to write notes (text or markdown) for your stories in [Storybook](https://storybook.js.org).
-
-![Storybook Addon Notes Demo](docs/demo.png)
-
-## Installation
-
-```sh
-yarn add -D @storybook/addon-ondevice-notes
-```
-
-## Configuration
-
-Create a file called `rn-addons.js` in your storybook config.
-
-Add following content to it:
-
-```js
-import '@storybook/addon-ondevice-notes/register';
-```
-
-Then import `rn-addons.js` next to your `getStorybookUI` call.
-
-```js
-import './rn-addons';
-```
-
-## Usage
-
-Use the `notes` parameter to add a note to stories:
-
-```js
-import { storiesOf } from '@storybook/react-native';
-
-import Component from './Component';
-
-storiesOf('Component', module).add('with some emoji', () => <Component />, {
-  notes: 'A small component',
-});
-```
-
-See the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
diff --git a/addons/ondevice-notes/docs/demo.png b/addons/ondevice-notes/docs/demo.png
deleted file mode 100644
index 3aa3082cb3a8..000000000000
Binary files a/addons/ondevice-notes/docs/demo.png and /dev/null differ
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
deleted file mode 100644
index 5b4095649818..000000000000
--- a/addons/ondevice-notes/package.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "@storybook/addon-ondevice-notes",
-  "version": "5.3.0-rc.0",
-  "description": "Write notes for your react-native Storybook stories.",
-  "keywords": [
-    "addon",
-    "notes",
-    "react-native",
-    "storybook"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/ondevice-notes"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.20",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "prop-types": "^15.7.2",
-    "react-native-simple-markdown": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/ondevice-notes/register.js b/addons/ondevice-notes/register.js
deleted file mode 100644
index 18cdafda57c4..000000000000
--- a/addons/ondevice-notes/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register.js');
diff --git a/addons/ondevice-notes/src/components/Notes.tsx b/addons/ondevice-notes/src/components/Notes.tsx
deleted file mode 100644
index b27360ad81d6..000000000000
--- a/addons/ondevice-notes/src/components/Notes.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Markdown from 'react-native-simple-markdown';
-import { AddonStore } from '@storybook/addons';
-import { API } from '@storybook/api';
-import { ThemeContext } from '@emotion/core';
-
-export const PARAM_KEY = `notes`;
-
-interface NotesProps {
-  channel: ReturnType<AddonStore['getChannel']>;
-  api: API;
-  active: boolean;
-}
-
-export const Notes = ({ active, api }: NotesProps) => {
-  if (!active) {
-    return null;
-  }
-
-  const selection = api.store().getSelection();
-
-  if (!selection) {
-    return null;
-  }
-
-  const story = api.store().fromId(selection.storyId);
-  const text = story.parameters[PARAM_KEY];
-
-  const textAfterFormatted: string = text ? text.trim() : '';
-
-  return (
-    <View style={{ padding: 10, flex: 1 }}>
-      <ThemeContext.Consumer>
-        {theme => (
-          <Markdown styles={{ text: { color: (theme as any).labelColor } }}>
-            {textAfterFormatted}
-          </Markdown>
-        )}
-      </ThemeContext.Consumer>
-    </View>
-  );
-};
diff --git a/addons/ondevice-notes/src/index.ts b/addons/ondevice-notes/src/index.ts
deleted file mode 100644
index 6c03530f0864..000000000000
--- a/addons/ondevice-notes/src/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { logger } from '@storybook/client-logger';
-
-// eslint-disable-next-line no-undef
-if (__DEV__) {
-  logger.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
-}
diff --git a/addons/ondevice-notes/src/register.tsx b/addons/ondevice-notes/src/register.tsx
deleted file mode 100644
index fa663581ac21..000000000000
--- a/addons/ondevice-notes/src/register.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import addons from '@storybook/addons';
-import { Notes } from './components/Notes';
-
-export const PARAM_KEY = `notes`;
-
-addons.register('storybook/notes', api => {
-  const channel = addons.getChannel();
-  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/ondevice-notes/src/typings.d.ts b/addons/ondevice-notes/src/typings.d.ts
deleted file mode 100644
index eead99469329..000000000000
--- a/addons/ondevice-notes/src/typings.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'react-native-simple-markdown' {
-  const Markdown: any;
-  export default Markdown;
-}
diff --git a/addons/ondevice-notes/tsconfig.json b/addons/ondevice-notes/tsconfig.json
deleted file mode 100644
index 24ef9bc68916..000000000000
--- a/addons/ondevice-notes/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}
diff --git a/addons/options/README.md b/addons/options/README.md
deleted file mode 100644
index 854cc8b45c54..000000000000
--- a/addons/options/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Options Addon is deprecated as of Storybook 5.0
-
-Please read https://storybook.js.org/docs/configurations/options-parameter/ to learn about storybook's options and setting them.
diff --git a/addons/options/docs/screenshot.png b/addons/options/docs/screenshot.png
deleted file mode 100644
index 7226f009f35c..000000000000
Binary files a/addons/options/docs/screenshot.png and /dev/null differ
diff --git a/addons/options/package.json b/addons/options/package.json
deleted file mode 100644
index bc3c266eb093..000000000000
--- a/addons/options/package.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "name": "@storybook/addon-options",
-  "version": "5.3.0-rc.0",
-  "description": "Options addon for storybook",
-  "keywords": [
-    "addon",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/options",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/options"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "docs/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "types": "dist/public_api.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "util-deprecate": "^1.0.2"
-  },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/addons/options/register.js b/addons/options/register.js
deleted file mode 100644
index cc38cb06f1f2..000000000000
--- a/addons/options/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register');
diff --git a/addons/options/src/constants.ts b/addons/options/src/constants.ts
deleted file mode 100644
index ba5ec2b90d5c..000000000000
--- a/addons/options/src/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// addons, panels and events get unique names using a prefix
-export const ADDON_ID = 'storybookjs/options';
-
-export default {
-  SET: `${ADDON_ID}/options-event`,
-};
diff --git a/addons/options/src/index.ts b/addons/options/src/index.ts
deleted file mode 100644
index e7e403924a85..000000000000
--- a/addons/options/src/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import deprecate from 'util-deprecate';
-import addons, { makeDecorator } from '@storybook/addons';
-
-import EVENTS from './constants';
-
-function emitOptions(options: any) {
-  const channel = addons.getChannel();
-  if (!channel) {
-    throw new Error(
-      'Failed to find addon channel. This may be due to https://github.com/storybookjs/storybook/issues/1192.'
-    );
-  }
-
-  // since 'undefined' and 'null' are the valid values we don't want to
-  // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
-  channel.emit(EVENTS.SET, {
-    options,
-  });
-}
-
-// setOptions function will send Storybook UI options when the channel is
-// ready. If called before, options will be cached until it can be sent.
-let globalOptions = {};
-export const setOptions = deprecate((options: any) => {
-  globalOptions = options;
-  emitOptions(options);
-}, '`setOptions(options)` is deprecated. Please use the `withOptions(options)` decorator globally.');
-
-export const withOptions = makeDecorator({
-  name: 'withOptions',
-  parameterName: 'options',
-  skipIfNoParametersOrOptions: false,
-  wrapper: deprecate((getStory, context, { options: inputOptions, parameters }) => {
-    // do not send hierarchy related options over the channel
-    const { hierarchySeparator, hierarchyRootSeparator, ...change }: any = {
-      ...globalOptions,
-      ...inputOptions,
-      ...parameters,
-    };
-
-    if (Object.keys(change).length) {
-      emitOptions({
-        ...globalOptions,
-        ...inputOptions,
-        ...parameters,
-      });
-    }
-
-    // MUTATION !
-    // eslint-disable-next-line no-param-reassign
-    (context as any).options = {
-      ...globalOptions,
-      ...inputOptions,
-      ...parameters,
-    };
-
-    return getStory({
-      ...context,
-      options: {
-        ...globalOptions,
-        ...inputOptions,
-        ...parameters,
-      },
-    } as any);
-  }, 'withOptions is deprecated, use addParameters({ options: {} }) instead'),
-});
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/options/src/public_api.ts b/addons/options/src/public_api.ts
deleted file mode 100644
index c327fdba2b68..000000000000
--- a/addons/options/src/public_api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ADDON_ID } from './constants';
-export { setOptions, withOptions } from './index';
diff --git a/addons/options/src/register.ts b/addons/options/src/register.ts
deleted file mode 100644
index 8cec35efa859..000000000000
--- a/addons/options/src/register.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import addons from '@storybook/addons';
-import deprecate from 'util-deprecate';
-import EVENTS, { ADDON_ID } from './constants';
-
-addons.register(
-  ADDON_ID,
-  deprecate(api => {
-    const channel = addons.getChannel();
-
-    channel.on(EVENTS.SET, data => {
-      api.setOptions(data.options);
-    });
-  }, 'storybook-addon-options is deprecated and will stop working soon')
-);
diff --git a/addons/options/src/typings.d.ts b/addons/options/src/typings.d.ts
deleted file mode 100644
index 2b6c3a6d4280..000000000000
--- a/addons/options/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-let module: any;
diff --git a/addons/options/tsconfig.json b/addons/options/tsconfig.json
deleted file mode 100644
index 1d10f46e8b7f..000000000000
--- a/addons/options/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ]
-}
diff --git a/addons/queryparams/README.md b/addons/queryparams/README.md
index 8f3402004371..0befd0e5e69a 100644
--- a/addons/queryparams/README.md
+++ b/addons/queryparams/README.md
@@ -1,6 +1,6 @@
 # storybook-addon-queryparams
 
-This storybook addon can be helpful if your components need special query parameters to work the way you want them.
+This storybook addon can be helpful if your components need special query parameters to work the way you want them to. It allows you to mock query params per story so that you can easily reproduce different states of your component.
 
 ## Getting started
 
@@ -10,23 +10,57 @@ First, install the addon.
 $ yarn add @storybook/addon-queryparams --dev
 ```
 
-import the `withQuery` decorator so the url will be changed before rendering stories.
+Register it by adding it in the addons attribute in your `main.js` file (create this file inside your storybook config directory if needed).
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-queryparams'],
+};
+```
+
+In your story, add the `withQuery` decorator and define the query parameters you want to mock:
 
 ```js
 import React from 'react';
-import { storiesOf, addDecorator } from '@storybook/react';
+import { Button } from '@storybook/react/demo';
 import { withQuery } from '@storybook/addon-queryparams';
 
+export default {
+  title: 'Button',
+  component: Button,
+  decorators: [withQuery],
+  parameters: {
+    query: {
+      mock: 'Hello world!',
+    },
+  },
+};
+
+export const WithMockedSearch = () => {
+  const urlParams = new URLSearchParams(document.location.search);
+  const mockedParam = urlParams.get('mock');
+  return <div>Mocked value: {mockedParam}</div>;
+};
+```
+
+<details>
+  <summary>Example with storiesOf API</summary>
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
 storiesOf('button', module)
-  .addDecorator(withQuery)
   .addParameters({
     query: {
-      mock: true,
-    }
+      mock: 'Hello World!',
+    },
   })
-  .add('Prints the document.search', () => (
-    <div>
-      This is the current document.search: {document.search}, it includes `mock`!
-    </div>
-  ));
+  .add('Prints the mocked parameter', () => {
+    const urlParams = new URLSearchParams(document.location.search);
+    const mockedParam = urlParams.get('mock');
+    return <div>Mocked value: {mockedParam}</div>;
+  });
 ```
+
+</details>
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 3a54936d194f..291a72e4054c 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-queryparams",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "parameter addon for storybook",
   "keywords": [
     "addon",
@@ -17,33 +17,47 @@
     "directory": "addons/addon-queryparams"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "qs": "^6.6.0",
     "react": "^16.8.3",
-    "ts-dedent": "^1.1.0"
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.2"
+  },
+  "peerDependencies": {
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/queryparams/preset.js b/addons/queryparams/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/queryparams/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/queryparams/src/index.ts b/addons/queryparams/src/index.ts
index a84100160ad0..62138a138ba8 100644
--- a/addons/queryparams/src/index.ts
+++ b/addons/queryparams/src/index.ts
@@ -8,6 +8,7 @@ import { PARAM_KEY } from './constants';
 export const withQuery = makeDecorator({
   name: 'withQuery',
   parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: true,
   wrapper: (getStory: StoryGetter, context: StoryContext, { parameters }) => {
     const { location } = document;
     const currentQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
diff --git a/addons/queryparams/src/preset/addDecorator.ts b/addons/queryparams/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..f04053309f79
--- /dev/null
+++ b/addons/queryparams/src/preset/addDecorator.ts
@@ -0,0 +1,3 @@
+import { withQuery } from '../index';
+
+export const decorators = [withQuery];
diff --git a/addons/queryparams/src/preset/index.ts b/addons/queryparams/src/preset/index.ts
new file mode 100644
index 000000000000..af12e51942ac
--- /dev/null
+++ b/addons/queryparams/src/preset/index.ts
@@ -0,0 +1,11 @@
+interface QueryParamsOptions {
+  addDecorator?: boolean;
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: QueryParamsOptions = {}) {
+  const queryParamsConfig = [];
+  if (addDecorator) {
+    queryParamsConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...queryParamsConfig];
+}
diff --git a/addons/storyshots/storyshots-core/.eslintrc.js b/addons/storyshots/storyshots-core/.eslintrc.js
index d6e90d6d46a8..d52d94baae34 100644
--- a/addons/storyshots/storyshots-core/.eslintrc.js
+++ b/addons/storyshots/storyshots-core/.eslintrc.js
@@ -4,7 +4,6 @@ module.exports = {
       '@storybook/angular',
       '@storybook/html',
       '@storybook/react',
-      '@storybook/react-native',
       '@storybook/preact',
       '@storybook/vue',
       '@storybook/svelte',
diff --git a/addons/storyshots/storyshots-core/.storybook/configTest.js b/addons/storyshots/storyshots-core/.storybook/configTest.js
index 8ae32982a9b9..9c163a43e4d4 100644
--- a/addons/storyshots/storyshots-core/.storybook/configTest.js
+++ b/addons/storyshots/storyshots-core/.storybook/configTest.js
@@ -3,7 +3,7 @@ import { configure } from '@storybook/react';
 const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
 
 const loadStories = () => {
-  const result = req.keys().map(filename => req(filename));
+  const result = req.keys().map((filename) => req(filename));
   // eslint-disable-next-line global-require
   require('../stories/directly_required');
   return result;
diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md
index e2696305ef77..61a9fe18b430 100644
--- a/addons/storyshots/storyshots-core/README.md
+++ b/addons/storyshots/storyshots-core/README.md
@@ -16,26 +16,45 @@ Add the following module into your app.
 yarn add @storybook/addon-storyshots --dev
 ```
 
+## Configure Storyshots for HTML snapshots
+
+Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
+Then add following content to it:
+
+```js
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots();
+```
+
+That's all.
+
+Now run your Jest test command. (Usually, `npm test`.) Then you can see all of your stories are converted as Jest snapshot tests.
+
+![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/storyshots/storyshots-core/docs/storyshots.png)
+
 ## Configure your app for Jest
+
 In many cases, for example Create React App, it's already configured for Jest. You need to create a filename with the extension `.test.js`.
 
 If you still need to configure jest you can use the resources mentioned below:
 
--   [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
--   [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). ***paid content***
+- [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
+- [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). **_paid content_**
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 >
-> Note: Make sure you have added the ```json``` extension to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
+> Note: Make sure you have added the `json` extension to `moduleFileExtensions` in `jest.config.json`. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): `Cannot find module 'spdx-license-ids' from 'scan.js'`.
 >
-> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.
-
+> Note: Please make sure you are using `jsdom` as the testEnvironment on your jest config file.
 
 ### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)
 
-Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories). 
+**NOTE**: if you are using Storybook 5.3's `main.js` to list story files, this is no longer needed.
+
+Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories).
 
-1) If you're using the `storiesOf` API, you can integrate it this way:
+1. If you're using the `storiesOf` API, you can integrate it this way:
 
 ```js
 import { configure } from '@storybook/react';
@@ -43,13 +62,13 @@ import { configure } from '@storybook/react';
 const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once
 
 function loadStories() {
-  req.keys().forEach(filename => req(filename));
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
 ```
 
-2) If you're using Component Story Format (CSF), you'll integrate it like so:
+2. If you're using Component Story Format (CSF), you'll integrate it like so:
 
 ```js
 import { configure } from '@storybook/react';
@@ -57,7 +76,7 @@ import { configure } from '@storybook/react';
 const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once
 
 configure(req, module);
-``` 
+```
 
 The problem here is that it will work only during the build with webpack,
 other tools may lack this feature. Since Storyshot is running under Jest,
@@ -80,11 +99,13 @@ Next, it needs to be registered and loaded before each test. To register it, cre
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 registerRequireContextHook();
 ```
+
 That file needs to be added as a setup file for Jest. To do that, add (or create) a property in Jest's config called [`setupFiles`](https://jestjs.io/docs/en/configuration.html#setupfiles-array). Add the file name and path to this array.
 
 ```json
 setupFiles: ['<rootDir>/.jest/register-context.js']
 ```
+
 Finally, add the plugin to `.babelrc`:
 
 ```json
@@ -98,6 +119,7 @@ Finally, add the plugin to `.babelrc`:
   }
 }
 ```
+
 The plugin is only added to the test environment otherwise it could replace webpack's version of it.
 
 #### Option 2: Macro
@@ -118,6 +140,7 @@ const req = requireContext('../stories', true, /\.stories\.js$/);
 ```
 
 ### Configure Jest for React
+
 StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
 [doesn't](#deps-issue) install it, so you need to install it separately.
 
@@ -126,6 +149,7 @@ yarn add react-test-renderer --dev
 ```
 
 ### Configure Jest for Angular
+
 StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but
 [doesn't](#deps-issue) install it, so you need to install it separately.
 
@@ -135,6 +159,7 @@ yarn add jest-preset-angular
 
 If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
+
 ```js
 module.exports = {
   globals: {
@@ -147,7 +172,9 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
 };
 ```
+
 ### Configure Jest for Vue
+
 StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but
 [doesn't](#deps-issue) install it, so you need to install it separately.
 
@@ -157,20 +184,20 @@ yarn add jest-vue-preprocessor
 
 If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
+
 ```js
 module.exports = {
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
   },
-  transformIgnorePatterns: [
-    '/node_modules/(?!(@storybook/.*\\.vue$))',
-  ],
+  transformIgnorePatterns: ['/node_modules/(?!(@storybook/.*\\.vue$))'],
   moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
 };
 ```
 
 ### Configure Jest for Preact
+
 StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
 [doesn't](#deps-issue) install it, so you need to install it separately.
 
@@ -180,7 +207,7 @@ yarn add preact-render-to-json --dev
 
 ### Configure Jest for MDX Docs Add-On Stories
 
-If using the [Docs add-on](../../docs/README.md) with 
+If using the [Docs add-on](../../docs/README.md) with
 [MDX stories](../../docs/docs/mdx.md) you will need
 to configure Jest to transform MDX stories into something Storyshots can understand:
 
@@ -196,6 +223,7 @@ Add the following to your Jest configuration:
 ```
 
 ### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
+
 Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
 
 `dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
@@ -208,24 +236,6 @@ Storyshots addon is currently supporting React, Angular and Vue. Each framework
 
 For more information read npm [docs](https://docs.npmjs.com/files/package.json#dependencies)
 
-## Configure Storyshots for HTML snapshots
-
-Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
-Then add following content to it:
-
-```js
-import initStoryshots from '@storybook/addon-storyshots';
-
-initStoryshots();
-```
-
-That's all.
-
-Now run your Jest test command. (Usually, `npm test`.) Then you can see all of your stories are converted as Jest snapshot tests.
-
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/storyshots/storyshots-core/docs/storyshots.png)
-
-
 ### Using `createNodeMock` to mock refs
 
 `react-test-renderer` doesn't provide refs for rendered components. By
@@ -236,34 +246,33 @@ out elements that rely on refs, you will have to use the
 Here is an example of how to specify the `createNodeMock` option in Storyshots:
 
 ```js
-import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'
-import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs'
+import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
+import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs';
 
 initStoryshots({
   test: snapshotWithOptions({
     createNodeMock: (element) => {
       if (element.type === TextareaThatUsesRefs) {
-        return document.createElement('textarea')
+        return document.createElement('textarea');
       }
     },
   }),
-})
+});
 ```
 
 Provide a function to have story-specific options:
 
-
 ```js
 initStoryshots({
-  test: snapshotWithOptions(story =>({
+  test: snapshotWithOptions((story) => ({
     createNodeMock: (element) => {
-      if(story.name == 'foobar') {
-        return null
+      if (story.name == 'foobar') {
+        return null;
       }
-      return element
+      return element;
     },
   })),
-})
+});
 ```
 
 ### StoryShots for async rendered components
@@ -278,28 +287,28 @@ Add _stories of UserForm_ in the file: UserForm.story.jsx
 
 ```jsx
 /* global module */
-import React from "react";
-import { QueryRenderer } from "react-relay";
-import { storiesOf } from "@storybook/react";
+import React from 'react';
+import { QueryRenderer } from 'react-relay';
+import { storiesOf } from '@storybook/react';
 
 // Use the same queries used in YOUR app routes
-import { newUserFormQuery, editUserFormQuery } from "app/routes";
-import UserFormContainer from "app/users/UserForm";
+import { newUserFormQuery, editUserFormQuery } from 'app/routes';
+import UserFormContainer from 'app/users/UserForm';
 
 // YOUR function to generate a Relay Environment mock.
 // See https://github.com/1stdibs/relay-mock-network-layer for more info
-import getEnvironment from "test/support/relay-environment-mock";
+import getEnvironment from 'test/support/relay-environment-mock';
 
 // User test data YOU generated for your tests
-import { user } from "test/support/data/index";
+import { user } from 'test/support/data/index';
 
 // Use this function to return a new Environment for each story
 const Environment = () =>
   getEnvironment({
     mocks: {
-      Node: () => ({ __typename: "User" }),
-      User: () => user
-    }
+      Node: () => ({ __typename: 'User' }),
+      User: () => user,
+    },
   });
 
 /**
@@ -326,23 +335,23 @@ const renderStory = (query, environment, variables = {}) => (
   />
 );
 
-storiesOf("users/UserForm", module)
-  .add("New User", () => {
+storiesOf('users/UserForm', module)
+  .add('New User', () => {
     const environment = new Environment();
     return renderStory(newUserFormQuery, environment);
   })
-  .add("Editing User", () => {
+  .add('Editing User', () => {
     const environment = new Environment();
     return renderStory(editUserFormQuery, environment, { id: user.id });
-  })
+  });
 ```
 
 Then, init Storyshots for async component in the file: StoryShots.test.js
 
 ```jsx
-import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
-import { mount } from "enzyme";
-import toJson from "enzyme-to-json";
+import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
 
 // Runner
 initStoryshots({
@@ -350,7 +359,7 @@ initStoryshots({
   test: ({
     story,
     context,
-    done // --> callback passed to test method when asyncJest option is true
+    done, // --> callback passed to test method when asyncJest option is true
   }) => {
     const converter = new Stories2SnapsConverter();
     const snapshotFilename = converter.getSnapshotFileName(context);
@@ -369,17 +378,17 @@ initStoryshots({
       }
 
       done();
-    }, waitTime)
+    }, waitTime);
   },
   // other options here
 });
-
 ```
+
 NOTICE that When using the `asyncJest: true` option, you also must specify a `test` method that calls the `done()` callback.
 
 This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
 
-Whenever you change you're data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
+Whenever you change your data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
 
 ## Options
 
@@ -403,8 +412,8 @@ initStoryshots({
 
 By default, Storyshots assumes the config directory path for your project as below:
 
--   Storybook for React: `.storybook`
--   Storybook for React Native: `storybook`
+- Storybook for React: `.storybook`
+- Storybook for React Native: `storybook`
 
 If you are using a different config directory path, you could change it like this:
 
@@ -412,7 +421,7 @@ If you are using a different config directory path, you could change it like thi
 import initStoryshots from '@storybook/addon-storyshots';
 
 initStoryshots({
-  configPath: '.my-storybook-config-dir'
+  configPath: '.my-storybook-config-dir',
 });
 ```
 
@@ -431,15 +440,14 @@ original one. It also may be useful for separating tests to different test confi
 
 ```js
 initStoryshots({
-  configPath: '.my-storybook-config-dir/testConfig1.js'
+  configPath: '.my-storybook-config-dir/testConfig1.js',
 });
 
 initStoryshots({
-  configPath: '.my-storybook-config-dir/testConfig2.js'
+  configPath: '.my-storybook-config-dir/testConfig2.js',
 });
 ```
 
-
 ### `suite`
 
 By default, Storyshots groups stories inside a Jest test suite called "Storyshots". You could change it like this:
@@ -448,7 +456,7 @@ By default, Storyshots groups stories inside a Jest test suite called "Storyshot
 import initStoryshots from '@storybook/addon-storyshots';
 
 initStoryshots({
-  suite: 'MyStoryshots'
+  suite: 'MyStoryshots',
 });
 ```
 
@@ -460,7 +468,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
 import initStoryshots from '@storybook/addon-storyshots';
 
 initStoryshots({
-  storyKindRegex: /^MyComponent$/
+  storyKindRegex: /^MyComponent$/,
 });
 ```
 
@@ -472,7 +480,7 @@ If you want to run all stories except stories of a specific kind, you can write
 import initStoryshots from '@storybook/addon-storyshots';
 
 initStoryshots({
-  storyKindRegex:/^((?!.*?DontTest).)*$/
+  storyKindRegex: /^((?!.*?DontTest).)*$/,
 });
 ```
 
@@ -487,7 +495,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
 import initStoryshots from '@storybook/addon-storyshots';
 
 initStoryshots({
-  storyNameRegex: /buttons/
+  storyNameRegex: /buttons/,
 });
 ```
 
@@ -531,7 +539,6 @@ initStoryshots({
 If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
 For that, you can pass an enzyme-compatible snapshotSerializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) with the `snapshotSerializer` option (see below).
 
-
 ### `snapshotSerializers`
 
 Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
@@ -547,8 +554,9 @@ initStoryshots({
 ```
 
 This option needs to be set if either:
-* the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
-* serializers not specified in your jest config should be used when snapshotting stories.
+
+- the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
+- serializers not specified in your jest config should be used when snapshotting stories.
 
 ### `serializer` (deprecated)
 
@@ -567,6 +575,7 @@ initStoryshots({
 This option only needs to be set if the default `snapshotSerializers` is not set in your jest config.
 
 ### `stories2snapsConverter`
+
 This parameter should be an instance of the [`Stories2SnapsConverter`](src/Stories2SnapsConverter.js) (or a derived from it) Class that is used to convert story-file name to snapshot-file name and vice versa.
 
 By default, the instance of this class is created with these default options:
@@ -590,7 +599,6 @@ initStoryshots({
     storiesExtensions: ['.foo'],
   }),
 });
-
 ```
 
 ## Exports
@@ -618,6 +626,7 @@ Like the default, but allows you to specify a set of options for the renderer, j
 
 Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object.
 If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
+
 ```js
 // jest.config.js
 module.exports = {
@@ -668,10 +677,26 @@ initStoryshots({
     if (snapshotFileName) {
       expect(toJson(shallowTree)).toMatchSpecificSnapshot(snapshotFileName);
     }
-  }
+  },
 });
 ```
 
 ### `asyncJest`
 
 Enables Jest `done()` callback in the StoryShots tests for async testing. See [StoryShots for async rendered components](#storyshots-for-async-rendered-components) for more info.
+
+## Story Parameters
+
+### `disable`
+
+Some stories are difficult or impossible to snapshot, such as those covering components that use external DOM-modifying libraries, and those that deliberately throw errors. It is possible to skip stories like these by giving them a parameter of `storyshots: {disable: true}`. There is also a shorthand for this, `storyshots: false`.
+
+```js
+export const Exception = () => {
+  throw new Error('storyFn threw an error! WHOOPS');
+};
+Exception.storyName = 'story throws exception';
+Exception.parameters = {
+  storyshots: { disable: true },
+};
+```
diff --git a/addons/storyshots/storyshots-core/injectFileName.js b/addons/storyshots/storyshots-core/injectFileName.js
index c8f946bab571..991bce4fc5f3 100644
--- a/addons/storyshots/storyshots-core/injectFileName.js
+++ b/addons/storyshots/storyshots-core/injectFileName.js
@@ -4,7 +4,7 @@ const getNextTransformer = (fileName, config) => {
   const self = config.transform.find(([pattern]) => new RegExp(pattern).test(fileName));
   return new ScriptTransformer({
     ...config,
-    transform: config.transform.filter(entry => entry !== self),
+    transform: config.transform.filter((entry) => entry !== self),
   });
 };
 
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index a0c34385a0e2..214f4f177e37 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "keywords": [
     "addon",
@@ -16,15 +16,15 @@
     "directory": "addons/storyshots/storyshots-core"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "build-storybook": "build-storybook",
     "example": "jest storyshot.test",
@@ -32,32 +32,44 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@jest/transform": "^24.9.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
+    "@jest/transform": "^26.0.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
     "@types/glob": "^7.1.1",
-    "@types/jest": "^24.0.16",
+    "@types/jest": "^25.1.1",
     "@types/jest-specific-snapshot": "^0.5.3",
     "babel-plugin-require-context-hook": "^1.0.0",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",
-    "jest-specific-snapshot": "^2.0.0",
+    "jest-specific-snapshot": "^3.0.0",
+    "pretty-format": "^25.5.0",
     "read-pkg-up": "^7.0.0",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
     "babel-loader": "^8.0.6",
+    "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.4.1",
     "jest-emotion": "^10.0.17",
     "react": "^16.8.3"
   },
+  "peerDependencies": {
+    "react-dom": "*"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
index d26baf6ab696..0176f2e48b1e 100644
--- a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
+++ b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
@@ -36,7 +36,7 @@ describe('getPossibleStoriesFiles', () => {
     const storyshots = 'test/__snapshots__/foo.web.stories.storyshot';
 
     const result = target.getPossibleStoriesFiles(storyshots);
-    const platformAgnosticResult = result.map(path => path.replace(/\\|\//g, '/'));
+    const platformAgnosticResult = result.map((path) => path.replace(/\\|\//g, '/'));
 
     expect(platformAgnosticResult).toEqual([
       'test/foo.web.stories.js',
diff --git a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
index a2514260446b..85425bae4d72 100644
--- a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
+++ b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
@@ -43,7 +43,7 @@ export class Stories2SnapsConverter {
           To fix it, add following to your jest.config.js:
               transform: {
                 // should be above any other js transform like babel-jest
-                '^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
+                '^.+\\.stories\\.js$': '@storybook/addon-storyshots/injectFileName',
               }
         `
       );
@@ -57,7 +57,7 @@ export class Stories2SnapsConverter {
     const { dir, name } = path.parse(storyshotFile);
     const { storiesExtensions } = this.options;
 
-    return storiesExtensions.map(ext =>
+    return storiesExtensions.map((ext) =>
       path.format({
         dir: path.dirname(dir),
         name,
diff --git a/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts b/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
index 06e0b9108145..25adf62c8343 100644
--- a/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
+++ b/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
@@ -25,6 +25,7 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
   };
 }
 
+// @ts-ignore
 function ensureOptionsDefaults(options: StoryshotsOptions) {
   const {
     suite = 'Storyshots',
@@ -49,7 +50,7 @@ function ensureOptionsDefaults(options: StoryshotsOptions) {
     testMethod,
     snapshotSerializers,
     integrityOptions,
-  };
+  } as any;
 }
 
 export default ensureOptionsDefaults;
diff --git a/addons/storyshots/storyshots-core/src/api/index.ts b/addons/storyshots/storyshots-core/src/api/index.ts
index e77be5ede88f..b2f2a3f325a3 100644
--- a/addons/storyshots/storyshots-core/src/api/index.ts
+++ b/addons/storyshots/storyshots-core/src/api/index.ts
@@ -14,7 +14,7 @@ const methods: TestMethod[] = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll
 function callTestMethodGlobals(
   testMethod: { [key in TestMethod]?: Function & { timeout?: number } } & { [key in string]: any }
 ) {
-  methods.forEach(method => {
+  methods.forEach((method) => {
     if (typeof testMethod[method] === 'function') {
       global[method](testMethod[method], testMethod[method].timeout);
     }
@@ -70,10 +70,10 @@ function testStorySnapshots(options: StoryshotsOptions = {}) {
         }
         return acc;
       },
-      [] as Array<{
+      [] as {
         kind: string;
         children: any[];
-      }>
+      }[]
     );
 
   if (data.length) {
diff --git a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
index 4f3538d9a275..f11563e7ce5d 100644
--- a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
+++ b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
@@ -4,15 +4,6 @@ import glob from 'glob';
 import { describe, it } from 'global';
 import dedent from 'ts-dedent';
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace,no-redeclare
-  namespace jest {
-    interface Matchers<R, T> {
-      notToBeAbandoned(stories2snapsConverter: any): R;
-    }
-  }
-}
-
 expect.extend({
   notToBeAbandoned(storyshots, stories2snapsConverter) {
     const abandonedStoryshots = storyshots.filter((fileName: string) => {
@@ -59,6 +50,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
       const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
       const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
 
+      // @ts-ignore
       expect(storyshots).notToBeAbandoned(stories2snapsConverter);
     });
   });
diff --git a/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts b/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts
index 55f197980b50..a2564022f4e6 100644
--- a/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts
+++ b/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts
@@ -11,7 +11,7 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
     it(
       name,
       () =>
-        new Promise(done =>
+        new Promise((done) =>
           testMethod({
             done,
             story: item,
diff --git a/addons/storyshots/storyshots-core/src/frameworks/SupportedFramework.ts b/addons/storyshots/storyshots-core/src/frameworks/SupportedFramework.ts
index 5ed9e544b7b4..8e25cc610a25 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/SupportedFramework.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/SupportedFramework.ts
@@ -6,4 +6,5 @@ export type SupportedFramework =
   | 'riot'
   | 'react-native'
   | 'svelte'
-  | 'vue';
+  | 'vue'
+  | 'rax';
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
index 63296e55cd25..aa55a1a1d2d3 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts
@@ -45,7 +45,7 @@ const extractNgModuleMetadata = (importItem: any): NgModule => {
   }
 
   const ngModuleDecorator: NgModule | undefined = decorators.find(
-    decorator => decorator instanceof NgModule
+    (decorator) => decorator instanceof NgModule
   );
   if (!ngModuleDecorator) {
     return null;
@@ -58,7 +58,7 @@ const getExistenceOfComponentInModules = (
   declarations: any[],
   imports: any[]
 ): boolean => {
-  if (declarations && declarations.some(declaration => declaration === component)) {
+  if (declarations && declarations.some((declaration) => declaration === component)) {
     // Found component in declarations array
     return true;
   }
@@ -66,7 +66,7 @@ const getExistenceOfComponentInModules = (
     return false;
   }
 
-  return imports.some(importItem => {
+  return imports.some((importItem) => {
     const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
     if (!extractedNgModuleMetadata) {
       // Not an NgModule
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
index ea3a5fbfbaa6..0b7f2685ee7e 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
@@ -7,17 +7,17 @@ import { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function setupAngularJestPreset() {
   // Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
-  require.requireActual('core-js');
-  require.requireActual('core-js/modules/es.promise');
-  // require.requireActual('core-js/es6/reflect');
-  // require.requireActual('core-js/es7/reflect');
+  jest.requireActual('core-js');
+  jest.requireActual('core-js/modules/es.promise');
+  // jest.requireActual('core-js/es6/reflect');
+  // jest.requireActual('core-js/es7/reflect');
 
   // Angular + Jest + Storyshots = Crazy Shit:
-  // We need to require 'jest-preset-angular/setupJest' before any storybook code
-  // is running inside jest -  one of the things that `jest-preset-angular/setupJest` does is
+  // We need to require 'jest-preset-angular/build/setupJest' before any storybook code
+  // is running inside jest -  one of the things that `jest-preset-angular/build/setupJest` does is
   // extending the `window.Reflect` with all the needed metadata functions, that are required
   // for emission of the TS decorations like 'design:paramtypes'
-  require.requireActual('jest-preset-angular/setupJest');
+  jest.requireActual('jest-preset-angular/build/setupJest');
 }
 
 function test(options: StoryshotsOptions): boolean {
@@ -29,13 +29,13 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   setupAngularJestPreset();
 
-  const storybook = require.requireActual('@storybook/angular');
+  const storybook = jest.requireActual('@storybook/angular');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'angular' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for angular');
     },
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
index 77b926157785..2e55f4bcaebb 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
+import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
+import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { TestBed } from '@angular/core/testing';
 // eslint-disable-next-line import/no-extraneous-dependencies
diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts
new file mode 100644
index 000000000000..76c88463876a
--- /dev/null
+++ b/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts
@@ -0,0 +1,52 @@
+import { getPreviewFile, getMainFile } from './configure';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs', () => require('../../../../../__mocks__/fs'));
+const setupFiles = (files: Record<string, string>) => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+describe('preview files', () => {
+  it.each`
+    filepath
+    ${'preview.ts'}
+    ${'preview.tsx'}
+    ${'preview.js'}
+    ${'preview.jsx'}
+    ${'config.ts'}
+    ${'config.tsx'}
+    ${'config.js'}
+    ${'config.jsx'}
+  `('resolves a valid preview file from $filepath', ({ filepath }) => {
+    setupFiles({ [`test/${filepath}`]: 'true' });
+
+    expect(getPreviewFile('test/')).toEqual(`test/${filepath}`);
+  });
+
+  it('returns false when none of the paths exist', () => {
+    setupFiles(Object.create(null));
+
+    expect(getPreviewFile('test/')).toEqual(false);
+  });
+});
+
+describe('main files', () => {
+  it.each`
+    filepath
+    ${'main.ts'}
+    ${'main.tsx'}
+    ${'main.js'}
+    ${'main.jsx'}
+  `('resolves a valid main file path from $filepath', ({ filepath }) => {
+    setupFiles({ [`test/${filepath}`]: 'true' });
+
+    expect(getMainFile('test/')).toEqual(`test/${filepath}`);
+  });
+
+  it('returns false when none of the paths exist', () => {
+    setupFiles(Object.create(null));
+
+    expect(getPreviewFile('test/')).toEqual(false);
+  });
+});
diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.ts
index fd2689eb27d2..3ba9c866346e 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/configure.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/configure.ts
@@ -21,37 +21,19 @@ interface Output {
   files: string[];
 }
 
-const getPreviewFile = (configDir: string): string | false => {
-  const preview = path.join(configDir, 'preview.js');
-  const previewTS = path.join(configDir, 'preview.ts');
-  const config = path.join(configDir, 'config.js');
-  const configTS = path.join(configDir, 'config.ts');
-
-  if (isFile(previewTS)) {
-    return previewTS;
-  }
-  if (isFile(preview)) {
-    return preview;
-  }
-  if (isFile(configTS)) {
-    return configTS;
-  }
-  if (isFile(config)) {
-    return config;
-  }
+const supportedExtensions = ['ts', 'tsx', 'js', 'jsx'];
 
-  return false;
-};
+const resolveFile = (configDir: string, supportedFilenames: string[]) =>
+  supportedFilenames
+    .flatMap((filename) =>
+      supportedExtensions.map((ext) => path.join(configDir, `${filename}.${ext}`))
+    )
+    .find(isFile) || false;
 
-const getMainFile = (configDir: string): string | false => {
-  const main = path.join(configDir, 'main.js');
+export const getPreviewFile = (configDir: string): string | false =>
+  resolveFile(configDir, ['preview', 'config']);
 
-  if (isFile(main)) {
-    return main;
-  }
-
-  return false;
-};
+export const getMainFile = (configDir: string): string | false => resolveFile(configDir, ['main']);
 
 function getConfigPathParts(input: string): Output {
   const configDir = path.resolve(input);
@@ -66,18 +48,15 @@ function getConfigPathParts(input: string): Output {
       output.files.push(preview);
     }
     if (main) {
-      const { stories = [] } = require.requireActual(main);
+      const { stories = [] } = jest.requireActual(main);
 
       output.stories = stories.map(
         (pattern: string | { path: string; recursive: boolean; match: string }) => {
           const { path: basePath, recursive, match } = toRequireContext(pattern);
+          const regex = new RegExp(match);
+
           // eslint-disable-next-line no-underscore-dangle
-          return global.__requireContext(
-            configDir,
-            basePath,
-            recursive,
-            new RegExp(match.slice(1, -1))
-          );
+          return global.__requireContext(configDir, basePath, recursive, regex);
         }
       );
     }
@@ -102,8 +81,8 @@ function configure(
 
   const { files, stories } = getConfigPathParts(configPath);
 
-  files.forEach(f => {
-    require.requireActual(f);
+  files.forEach((f) => {
+    jest.requireActual(f);
   });
 
   if (stories && stories.length) {
diff --git a/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts b/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts
index 2a09368902c3..0ea2ed2eaf5b 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts
@@ -11,17 +11,17 @@ const isDirectory = (source: string) => fs.lstatSync(source).isDirectory();
 function getLoaders(): Loader[] {
   return fs
     .readdirSync(__dirname)
-    .map(name => path.join(__dirname, name))
+    .map((name) => path.join(__dirname, name))
     .filter(isDirectory)
-    .map(framework => path.join(framework, loaderScriptName))
+    .map((framework) => path.join(framework, loaderScriptName))
     .filter(fs.existsSync)
-    .map(loader => require(loader).default);
+    .map((loader) => require(loader).default);
 }
 
 function loadFramework(options: StoryshotsOptions) {
   const loaders = getLoaders();
 
-  const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
+  const loader = loaders.find((frameworkLoader) => frameworkLoader.test(options));
 
   if (!loader) {
     throw new Error(
diff --git a/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
index 5a720e978d3a..9ca3cd51c88d 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
@@ -10,13 +10,13 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'html';
 
-  const storybook = require.requireActual('@storybook/html');
+  const storybook = jest.requireActual('@storybook/html');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'html' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for HTML');
     },
diff --git a/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
index 09eaa79a0698..eac1ef7d64a1 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
@@ -15,13 +15,13 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'preact';
 
-  const storybook = require.requireActual('@storybook/preact');
+  const storybook = jest.requireActual('@storybook/preact');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'preact' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for preact');
     },
diff --git a/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
new file mode 100644
index 000000000000..9ea737584e50
--- /dev/null
+++ b/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
@@ -0,0 +1,33 @@
+import global from 'global';
+import configure from '../configure';
+import hasDependency from '../hasDependency';
+import { Loader } from '../Loader';
+import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+
+function test(options: StoryshotsOptions): boolean {
+  return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax'));
+}
+
+function load(options: StoryshotsOptions) {
+  global.STORYBOOK_ENV = 'rax';
+
+  const storybook = jest.requireActual('@storybook/rax');
+
+  configure({ ...options, storybook });
+
+  return {
+    framework: 'rax' as const,
+    renderTree: jest.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for rax');
+    },
+    storybook,
+  };
+}
+
+const raxLoader: Loader = {
+  load,
+  test,
+};
+
+export default raxLoader;
diff --git a/addons/storyshots/storyshots-core/src/frameworks/rax/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/rax/renderTree.ts
new file mode 100644
index 000000000000..6046f0f6cc60
--- /dev/null
+++ b/addons/storyshots/storyshots-core/src/frameworks/rax/renderTree.ts
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-unresolved
+import raxTestRenderer from 'rax-test-renderer';
+
+function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
+  const storyElement = story.render();
+  const currentRenderer = renderer || raxTestRenderer.create;
+  const tree = currentRenderer(storyElement, rendererOptions);
+
+  return tree;
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
index e1eab01b8758..29d89154e613 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
@@ -20,11 +20,11 @@ function configure(options: StoryshotsOptions, storybook: any) {
   }
 
   const resolvedConfigPath = path.resolve(configPath);
-  require.requireActual(resolvedConfigPath);
+  jest.requireActual(resolvedConfigPath);
 }
 
 function load(options: StoryshotsOptions) {
-  const storybook = require.requireActual('@storybook/react-native');
+  const storybook = jest.requireActual('@storybook/react-native');
 
   configure(options, storybook);
 
diff --git a/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
index 54383dce00f0..7d6e4388394f 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
@@ -8,14 +8,14 @@ function test(options: StoryshotsOptions): boolean {
 }
 
 function load(options: StoryshotsOptions) {
-  const storybook = require.requireActual('@storybook/react');
+  const storybook = jest.requireActual('@storybook/react');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'react' as const,
-    renderTree: require.requireActual('./renderTree').default,
-    renderShallowTree: require.requireActual('./renderShallowTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
+    renderShallowTree: jest.requireActual('./renderShallowTree').default,
     storybook,
   };
 }
diff --git a/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts
index 2d989a6e44a4..e9302c054b72 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts
@@ -1,8 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import reactTestRenderer from 'react-test-renderer';
 
 function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
-  const storyElement = story.render();
+  const StoryFn = story.render;
+  const storyElement = React.createElement(StoryFn);
   const currentRenderer = renderer || reactTestRenderer.create;
   const tree = currentRenderer(storyElement, rendererOptions);
 
diff --git a/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
index 3223c5cf3895..bd2f7ce499af 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
@@ -5,7 +5,7 @@ import { Loader } from '../Loader';
 import { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function mockRiotToIncludeCompiler() {
-  jest.mock('riot', () => require.requireActual('riot/riot.js'));
+  jest.mock('riot', () => jest.requireActual('riot/riot.js'));
 }
 
 function test(options: StoryshotsOptions): boolean {
@@ -16,13 +16,13 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'riot';
   mockRiotToIncludeCompiler();
 
-  const storybook = require.requireActual('@storybook/riot');
+  const storybook = jest.requireActual('@storybook/riot');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'riot' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for riot');
     },
diff --git a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts
index ea866224600c..4800a1c3c737 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts
@@ -1,6 +1,6 @@
 import { document } from 'global';
 
-const riotForStorybook = require.requireActual('@storybook/riot');
+const riotForStorybook = jest.requireActual('@storybook/riot');
 
 function bootstrapADocumentAndReturnANode() {
   const rootElement = document.createElement('div');
@@ -12,10 +12,11 @@ function bootstrapADocumentAndReturnANode() {
 
 function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }: any) {
   if (!rootElement.firstChild) {
+    const { kind, name } = context;
     riotForStorybook.render({
       storyFn: () => result,
-      selectedKind: context.kind,
-      selectedStory: context.name,
+      kind,
+      name,
     });
   }
 }
diff --git a/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
index 4ae5b02acfd3..b0ba76277558 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
@@ -13,13 +13,13 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'svelte';
 
-  const storybook = require.requireActual('@storybook/svelte');
+  const storybook = jest.requireActual('@storybook/svelte');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'svelte' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for svelte');
     },
diff --git a/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts b/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
index 2433026458a5..4ab5fad6fa36 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
@@ -5,7 +5,7 @@ import { Loader } from '../Loader';
 import { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function mockVueToIncludeCompiler() {
-  jest.mock('vue', () => require.requireActual('vue/dist/vue.common.js'));
+  jest.mock('vue', () => jest.requireActual('vue/dist/vue.common.js'));
 }
 
 function test(options: StoryshotsOptions): boolean {
@@ -16,13 +16,13 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'vue';
   mockVueToIncludeCompiler();
 
-  const storybook = require.requireActual('@storybook/vue');
+  const storybook = jest.requireActual('@storybook/vue');
 
   configure({ ...options, storybook });
 
   return {
     framework: 'vue' as const,
-    renderTree: require.requireActual('./renderTree').default,
+    renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for vue');
     },
diff --git a/addons/storyshots/storyshots-core/src/test-bodies.ts b/addons/storyshots/storyshots-core/src/test-bodies.ts
index 7fef69e0a145..d85fbe646a59 100644
--- a/addons/storyshots/storyshots-core/src/test-bodies.ts
+++ b/addons/storyshots/storyshots-core/src/test-bodies.ts
@@ -21,10 +21,20 @@ export const snapshotWithOptions = (
   const result = renderTree(story, context, optionsOrCallOptions(options, story));
 
   function match(tree: any) {
+    let target = tree;
+    const isReact = story.parameters.framework === 'react';
+
+    if (isReact && typeof tree.childAt === 'function') {
+      target = tree.childAt(0);
+    }
+    if (isReact && Array.isArray(tree.children)) {
+      [target] = tree.children;
+    }
+
     if (snapshotFileName) {
-      expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+      expect(target).toMatchSpecificSnapshot(snapshotFileName);
     } else {
-      expect(tree).toMatchSnapshot();
+      expect(target).toMatchSnapshot();
     }
 
     if (typeof tree.unmount === 'function') {
diff --git a/addons/storyshots/storyshots-core/src/typings.d.ts b/addons/storyshots/storyshots-core/src/typings.d.ts
index f334e98658b3..3f7c7d2cc952 100644
--- a/addons/storyshots/storyshots-core/src/typings.d.ts
+++ b/addons/storyshots/storyshots-core/src/typings.d.ts
@@ -2,5 +2,6 @@ declare module 'global';
 declare module 'jest-preset-angular/*';
 declare module 'preact-render-to-json';
 declare module 'react-test-renderer*';
+declare module 'rax-test-renderer*';
 declare module '@storybook/core/server';
 declare module 'babel-plugin-require-context-hook/register';
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
index 75ec281cdcdc..2c7cbf790b68 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -246,7 +246,7 @@ exports[`Storyshots Welcome MDX to Storybook 1`] = `
               }
             }
           >
-            src/stories/index.js
+            src/stories/1-Button.stories.js
           </code>
         </InlineCode>
         .)
@@ -450,7 +450,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
               }
             }
           >
-            src/stories/index.js
+            src/stories/1-Button.stories.js
           </code>
         </InlineCode>
         .)
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
index 445c7ba9a4fa..caccf51b2609 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
@@ -139,7 +139,7 @@ exports[`Storyshots Welcome MDX to Storybook 1`] = `
     </InlineCode>
      stories located at 
     <InlineCode>
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </InlineCode>
     .)
   </p>
@@ -213,7 +213,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     </InlineCode>
      stories located at 
     <InlineCode>
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </InlineCode>
     .)
   </p>
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
index 445c7ba9a4fa..caccf51b2609 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
@@ -139,7 +139,7 @@ exports[`Storyshots Welcome MDX to Storybook 1`] = `
     </InlineCode>
      stories located at 
     <InlineCode>
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </InlineCode>
     .)
   </p>
@@ -213,7 +213,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     </InlineCode>
      stories located at 
     <InlineCode>
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </InlineCode>
     .)
   </p>
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
index 30257648479e..8a70ef0ff961 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
@@ -213,7 +213,7 @@ exports[`Storyshots Welcome MDX to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </p>
@@ -387,7 +387,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </p>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
index ca2cef9114f7..d6e03732318b 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
@@ -31,6 +31,4 @@ export default {
 };
 
 export const withTimeout = () => <AsyncTestComponent />;
-withTimeout.story = {
-  name: `with ${TIMEOUT}ms timeout simulating async operation`,
-};
+withTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
index 1fc8a7b33e07..23ef66e18e57 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
@@ -21,6 +21,4 @@ export const withSomeEmoji = () => (
   </Button>
 );
 
-withSomeEmoji.story = {
-  name: 'with some emoji',
-};
+withSomeEmoji.storyName = 'with some emoji';
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index df42de0bc96f..c1ffd1fbe5c5 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -13,6 +13,4 @@ export default {
 
 export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
-  name: 'to Storybook',
-};
+toStorybook.storyName = 'to Storybook';
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
index 4662f49c8761..9f31125b1177 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
@@ -117,7 +117,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </p>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
index 97712dfd14e0..357ca8ea27ac 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
@@ -117,7 +117,7 @@ exports[`Storyshots Welcome MDX to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </p>
@@ -291,7 +291,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </p>
diff --git a/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js b/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js
index d5e9116c05e6..ceaa1447deff 100644
--- a/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js
+++ b/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js
@@ -21,7 +21,7 @@ class AnotherStories2SnapsConverter extends Stories2SnapsConverter {
 
     const [fileName] = name.split('@');
 
-    return storiesExtensions.map(ext =>
+    return storiesExtensions.map((ext) =>
       path.format({
         dir: path.dirname(dir),
         name: fileName,
@@ -38,7 +38,7 @@ initStoryshots({
   config: ({ configure }) =>
     configure(() => {
       // eslint-disable-next-line global-require
-      require('../stories/directly_required');
+      require('./directly_required');
     }, module),
   test: multiSnapshotWithOptions(),
 });
diff --git a/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js b/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js
index 6cd8a9a684e4..a21a0172c629 100644
--- a/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js
+++ b/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js
@@ -4,7 +4,7 @@ import initStoryshots, { shallowSnapshot } from '../dist';
 initStoryshots({
   framework: 'react',
   configPath: path.join(__dirname, '..', '.storybook'),
-  test: data =>
+  test: (data) =>
     shallowSnapshot({
       ...data,
     }),
diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md
index 718c0c012435..ce6919b987a7 100644
--- a/addons/storyshots/storyshots-puppeteer/README.md
+++ b/addons/storyshots/storyshots-puppeteer/README.md
@@ -8,9 +8,11 @@ Add the following modules into your app.
 npm install @storybook/addon-storyshots-puppeteer puppeteer --save-dev
 ```
 
+⚠️ As of Storybook 5.3 `puppeteer` is no more included in addon dependencies and must be added to your project directly.
+
 ## Configure Storyshots for Puppeteeer tests
 
-/\*\ **React-native** is **not supported** by this test function.
+⚠️ **React-native** is **not supported** by this test function.
 
 When willing to run Puppeteer tests for your stories, you have two options:
 
@@ -20,6 +22,7 @@ When willing to run Puppeteer tests for your stories, you have two options:
 Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
 
 ## _puppeteerTest_
+
 Allows to define arbitrary Puppeteer tests as `story.parameters.puppeteerTest` function.
 
 You can either create a new Storyshots instance or edit the one you previously used:
@@ -32,17 +35,16 @@ initStoryshots({ suite: 'Puppeteer storyshots', test: puppeteerTest() });
 ```
 
 Then, in your stories:
+
 ```js
 export const myExample = () => {
   ...
 };
-myExample.story = {
-  parameters: {
-    async puppeteerTest(page) {
-      const element = await page.$('<some-selector>');
-      await element.click();
-      expect(something).toBe(something);
-    },
+myExample.parameters = {
+  async puppeteerTest(page) {
+    const element = await page.$('<some-selector>');
+    await element.click();
+    expect(something).toBe(something);
   },
 };
 ```
@@ -78,7 +80,10 @@ import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
 
 initStoryshots({
   suite: 'Puppeteer storyshots',
-  test: puppeteerTest({ storybookUrl: 'file:///path/to/my/storybook-static' }),
+  test: puppeteerTest({
+    storybookUrl: 'file:///path/to/my/storybook-static',
+    // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}'
+  }),
 });
 ```
 
@@ -88,12 +93,14 @@ You might use `getGotoOptions` to specify options when the storybook is navigati
 
 ```js
 import initStoryshots from '@storybook/addon-storyshots';
-import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
+import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
+
 const getGotoOptions = ({ context, url }) => {
   return {
     waitUntil: 'networkidle0',
   };
 };
+
 initStoryshots({
   suite: 'Puppeteer storyshots',
   test: puppeteerTest({ storybookUrl: 'http://localhost:6006', getGotoOptions }),
@@ -125,7 +132,7 @@ import initStoryshots from '@storybook/addon-storyshots';
 import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
 import puppeteer from 'puppeteer';
 
-(async function() {
+(async function () {
   initStoryshots({
     suite: 'Puppeteer storyshots',
     test: puppeteerTest({
@@ -209,18 +216,20 @@ This can be achieved by adding a step before running the test ie: `npm run build
 If you run the Puppeteer storyshots against a running Storybook in dev mode, you don't have to worry about the stories being up-to-date because the dev-server is watching changes and rebuilds automatically.
 
 ## _axeTest_
+
 Runs [Axe](https://www.deque.com/axe/) accessibility checks and verifies that they pass using [jest-puppeteer-axe](https://github.com/WordPress/gutenberg/tree/master/packages/jest-puppeteer-axe).
 
 ```js
 import initStoryshots from '@storybook/addon-storyshots';
 import { axeTest } from '@storybook/addon-storyshots-puppeteer';
 
-axeTest({ suite: 'A11y checks', test: axeTest() });
+initStoryshots({ suite: 'A11y checks', test: axeTest() });
 ```
 
 For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
 
 ## _imageSnapshots_
+
 Generates and compares screenshots of your stories using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
 
 ```js
@@ -246,14 +255,14 @@ const getMatchOptions = ({ context: { kind, story }, url }) => {
   };
 };
 const beforeScreenshot = (page, { context: { kind, story }, url }) => {
-  return new Promise(resolve =>
+  return new Promise((resolve) =>
     setTimeout(() => {
       resolve();
     }, 600)
   );
 };
 const afterScreenshot = ({ image, context }) => {
-  return new Promise(resolve =>
+  return new Promise((resolve) =>
     setTimeout(() => {
       resolve();
     }, 600)
@@ -261,7 +270,12 @@ const afterScreenshot = ({ image, context }) => {
 };
 initStoryshots({
   suite: 'Image storyshots',
-  test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot, afterScreenshot }),
+  test: imageSnapshot({
+    storybookUrl: 'http://localhost:6006',
+    getMatchOptions,
+    beforeScreenshot,
+    afterScreenshot,
+  }),
 });
 ```
 
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 71a0687c3116..cc46a1438abc 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -16,41 +16,49 @@
     "directory": "addons/storyshots/storyshots-puppeteer"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@hypnosphi/jest-puppeteer-axe": "^1.4.0",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "5.3.0-rc.0",
+    "@storybook/node-logger": "6.0.0-beta.21",
     "@types/jest-image-snapshot": "^2.8.0",
+    "@wordpress/jest-puppeteer-axe": "^1.5.0",
     "core-js": "^3.0.1",
-    "jest-image-snapshot": "^2.8.2",
+    "jest-image-snapshot": "^3.0.1",
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
+    "@storybook/csf": "0.0.1",
     "@types/puppeteer": "^2.0.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "puppeteer": "^1.12.2 || ^2.0.0"
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "puppeteer": "^2.0.0 || ^3.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a",
   "peerDependenciesMeta": {
     "puppeteer": {
       "optional": true
     }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
   }
 }
diff --git a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
index 4bac493cc6f2..d0f8ddbddf07 100644
--- a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
@@ -1,46 +1,50 @@
+import { toId } from '@storybook/csf';
+
 import { constructUrl } from '../url';
 
 jest.mock('@storybook/node-logger');
 
+const id = toId('someKind', 'someStory');
+
 describe('Construct URL for Storyshots', () => {
   it('can use a url without path and without query params', () => {
-    expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path (but slash) and without query params', () => {
-    expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001/', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path and with query params', () => {
-    expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
     );
   });
 
   it('can use a url without path (buth slash) and with query params', () => {
-    expect(constructUrl('http://localhost:9001/?hello=world', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
     );
   });
 
   it('can use a url with some path and query params', () => {
-    expect(
-      constructUrl('http://localhost:9001/nice-path?hello=world', 'someKind', 'someStory')
-    ).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+    );
   });
 
   it('can use a url with some path (slash) and query params', () => {
-    expect(
-      constructUrl('http://localhost:9001/nice-path/?hello=world', 'someKind', 'someStory')
-    ).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+    );
   });
 
   it('can use a url with file protocol', () => {
-    expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('file://users/storybook', id)).toEqual(
       'file://users/storybook/iframe.html?id=somekind--somestory'
     );
   });
diff --git a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
index 920af43c09e9..02ad85001608 100644
--- a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
@@ -1,4 +1,4 @@
-import '@hypnosphi/jest-puppeteer-axe';
+import '@wordpress/jest-puppeteer-axe';
 import { defaultCommonConfig, CommonConfig } from './config';
 import { puppeteerTest } from './puppeteerTest';
 
diff --git a/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts b/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
index 49083c46ea66..fbdd5233e5c1 100644
--- a/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
@@ -19,7 +19,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
   let page: Page; // Hold ref to the page to screenshot.
 
   const testFn = async ({ context }: any) => {
-    const { kind, framework, name } = context;
+    const { kind, framework, name, id } = context;
     if (framework === 'react-native') {
       // Skip tests since RN is not a browser environment.
       logger.error(
@@ -29,7 +29,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
       return;
     }
 
-    const url = constructUrl(storybookUrl, kind, name);
+    const url = constructUrl(storybookUrl, id);
     const options = { context, url };
     if (testBody.filter != null && !testBody.filter(options)) {
       return;
diff --git a/addons/storyshots/storyshots-puppeteer/src/url.ts b/addons/storyshots/storyshots-puppeteer/src/url.ts
index 6c5a1eaef648..f9f75a90cfff 100644
--- a/addons/storyshots/storyshots-puppeteer/src/url.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/url.ts
@@ -1,10 +1,6 @@
-import { toId } from '@storybook/csf';
-
 import { URL } from 'url';
 
-export const constructUrl = (storybookUrl: string, kind: string, story: string) => {
-  const id = toId(kind, story);
-
+export const constructUrl = (storybookUrl: string, id: string) => {
   const storyUrl = `/iframe.html?id=${id}`;
   const { protocol, host, pathname, search } = new URL(storybookUrl);
   const pname = pathname.replace(/\/$/, ''); // removes trailing /
diff --git a/addons/storysource/README.md b/addons/storysource/README.md
index cce9a9e99a43..3b3c1ea1e69c 100644
--- a/addons/storysource/README.md
+++ b/addons/storysource/README.md
@@ -18,29 +18,33 @@ You can add configuration for this addon by using a preset or by using the addon
 
 ### Install using preset
 
-Add the following to your `.storybook/presets.js` exports:
+Add the following to your `.storybook/main.js` exports:
 
 ```js
-module.exports = ['@storybook/addon-storysource/preset'];
+module.exports = {
+  addons: ['@storybook/addon-storysource'],
+};
 ```
 
-You can pass configurations into the addon-storysource loader in your `.storybook/presets.js` file, e.g.:
+You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
 
-```javascript
-module.exports = [
-  {
-    name: '@storybook/addon-storysource/preset',
-    options: {
-      rule: {
-        // test: [/\.stories\.jsx?$/], This is default
-        include: [path.resolve(__dirname, '../src')], // You can specify directories
-      },
-      loaderOptions: {
-        prettierConfig: { printWidth: 80, singleQuote: false },
+```js
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          // test: [/\.stories\.jsx?$/], This is default
+          include: [path.resolve(__dirname, '../src')], // You can specify directories
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        },
       },
     },
-  },
-];
+  ],
+};
 ```
 
 ## Loader Options
diff --git a/addons/storysource/docs/demo.gif b/addons/storysource/docs/demo.gif
index 2f388596b5e5..e46a4f561fcf 100644
Binary files a/addons/storysource/docs/demo.gif and b/addons/storysource/docs/demo.gif differ
diff --git a/addons/storysource/loader.js b/addons/storysource/loader.js
deleted file mode 100644
index cde76952e169..000000000000
--- a/addons/storysource/loader.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const deprecate = require('util-deprecate');
-
-deprecate(() => {},
-'@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.')();
-
-module.exports = require('@storybook/source-loader');
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 8def523c07b5..1c8c34fc2bef 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Stories addon for storybook",
   "keywords": [
     "addon",
@@ -16,38 +16,46 @@
     "directory": "addons/storysource"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/router": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/router": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "estraverse": "^4.2.0",
-    "loader-utils": "^1.2.3",
-    "prettier": "^1.16.4",
+    "loader-utils": "^2.0.0",
+    "prettier": "^2.0.5",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^11.0.2",
-    "regenerator-runtime": "^0.13.3",
-    "util-deprecate": "^1.0.2"
+    "react": "^16.9.17",
+    "react-syntax-highlighter": "^12.2.1",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.27",
+    "@types/react-syntax-highlighter": "^11.0.4"
   },
   "peerDependencies": {
     "@storybook/source-loader": "*",
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
deleted file mode 100644
index 30ddeb8cf58c..000000000000
--- a/addons/storysource/src/StoryPanel.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-import { Link } from '@storybook/router';
-import { SyntaxHighlighter } from '@storybook/components';
-
-import createElement from 'react-syntax-highlighter/dist/esm/create-element';
-import { EVENT_ID } from './events';
-
-const StyledStoryLink = styled(Link)(({ theme }) => ({
-  display: 'block',
-  textDecoration: 'none',
-  borderRadius: theme.appBorderRadius,
-  color: 'inherit',
-
-  '&:hover': {
-    background: theme.background.hoverable,
-  },
-}));
-
-const SelectedStoryHighlight = styled.div(({ theme }) => ({
-  background: theme.background.hoverable,
-  borderRadius: theme.appBorderRadius,
-}));
-
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
-}));
-
-const areLocationsEqual = (a, b) =>
-  a.startLoc.line === b.startLoc.line &&
-  a.startLoc.col === b.startLoc.col &&
-  a.endLoc.line === b.endLoc.line &&
-  a.endLoc.col === b.endLoc.col;
-
-const getLocationKeys = locationsMap =>
-  locationsMap
-    ? Array.from(Object.keys(locationsMap)).sort(
-        (key1, key2) => locationsMap[key1].startLoc.line - locationsMap[key2].startLoc.line
-      )
-    : [];
-
-export default class StoryPanel extends Component {
-  state = { source: 'loading source...' };
-
-  componentDidMount() {
-    this.mounted = true;
-    const { api } = this.props;
-
-    api.on(EVENT_ID, this.listener);
-  }
-
-  componentDidUpdate() {
-    if (this.selectedStoryRef) {
-      this.selectedStoryRef.scrollIntoView();
-    }
-  }
-
-  componentWillUnmount() {
-    const { api } = this.props;
-
-    api.off(EVENT_ID, this.listener);
-  }
-
-  setSelectedStoryRef = ref => {
-    this.selectedStoryRef = ref;
-  };
-
-  listener = ({ edition: { source }, location: { currentLocation, locationsMap } }) => {
-    const locationsKeys = getLocationKeys(locationsMap);
-    this.setState({
-      source,
-      currentLocation,
-      locationsMap,
-      locationsKeys,
-    });
-  };
-
-  createPart = (rows, stylesheet, useInlineStyles) =>
-    rows.map((node, i) =>
-      createElement({
-        node,
-        stylesheet,
-        useInlineStyles,
-        key: `code-segement${i}`,
-      })
-    );
-
-  createStoryPart = (rows, stylesheet, useInlineStyles, location, id) => {
-    const { currentLocation } = this.state;
-    const first = location.startLoc.line - 1;
-    const last = location.endLoc.line;
-
-    const storyRows = rows.slice(first, last);
-    const story = this.createPart(storyRows, stylesheet, useInlineStyles);
-    const storyKey = `${first}-${last}`;
-
-    if (location && currentLocation && areLocationsEqual(location, currentLocation)) {
-      return (
-        <SelectedStoryHighlight key={storyKey} ref={this.setSelectedStoryRef}>
-          {story}
-        </SelectedStoryHighlight>
-      );
-    }
-
-    return (
-      <StyledStoryLink to={`/story/${id}`} key={storyKey}>
-        {story}
-      </StyledStoryLink>
-    );
-  };
-
-  createParts = (rows, stylesheet, useInlineStyles) => {
-    const { locationsMap, locationsKeys } = this.state;
-
-    const parts = [];
-    let lastRow = 0;
-
-    locationsKeys.forEach(key => {
-      const location = locationsMap[key];
-      const first = location.startLoc.line - 1;
-      const last = location.endLoc.line;
-
-      const start = this.createPart(rows.slice(lastRow, first), stylesheet, useInlineStyles);
-      const storyPart = this.createStoryPart(rows, stylesheet, useInlineStyles, location, key);
-
-      parts.push(start);
-      parts.push(storyPart);
-
-      lastRow = last;
-    });
-
-    const lastPart = this.createPart(rows.slice(lastRow), stylesheet, useInlineStyles);
-
-    parts.push(lastPart);
-
-    return parts;
-  };
-
-  lineRenderer = ({ rows, stylesheet, useInlineStyles }) => {
-    const { locationsMap, locationsKeys } = this.state;
-
-    // because of the usage of lineRenderer, all lines will be wrapped in a span
-    // these spans will receive all classes on them for some reason
-    // which makes colours casecade incorrectly
-    // this removed that list of classnames
-    const myrows = rows.map(({ properties, ...rest }) => ({
-      ...rest,
-      properties: { className: [] },
-    }));
-
-    if (!locationsMap || !locationsKeys.length) {
-      return this.createPart(myrows, stylesheet, useInlineStyles);
-    }
-
-    const parts = this.createParts(myrows, stylesheet, useInlineStyles);
-
-    return <span>{parts}</span>;
-  };
-
-  render() {
-    const { active } = this.props;
-    const { source } = this.state;
-
-    return active ? (
-      <StyledSyntaxHighlighter
-        language="jsx"
-        showLineNumbers="true"
-        renderer={this.lineRenderer}
-        format={false}
-        copyable={false}
-        padded
-      >
-        {source}
-      </StyledSyntaxHighlighter>
-    ) : null;
-  }
-}
-
-StoryPanel.propTypes = {
-  active: PropTypes.bool.isRequired,
-  api: PropTypes.shape({
-    selectStory: PropTypes.func.isRequired,
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    off: PropTypes.func,
-  }).isRequired,
-};
diff --git a/addons/storysource/src/StoryPanel.tsx b/addons/storysource/src/StoryPanel.tsx
new file mode 100644
index 000000000000..dd4c1c7b51ab
--- /dev/null
+++ b/addons/storysource/src/StoryPanel.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { API } from '@storybook/api';
+import { styled } from '@storybook/theming';
+import { Link } from '@storybook/router';
+import {
+  SyntaxHighlighter,
+  SyntaxHighlighterProps,
+  SyntaxHighlighterRendererProps,
+  createSyntaxHighlighterElement,
+} from '@storybook/components';
+
+import { SourceBlock, LocationsMap } from '@storybook/source-loader';
+import { Story } from '@storybook/api/dist/lib/stories';
+
+const StyledStoryLink = styled(Link)<{ to: string; key: string }>(({ theme }) => ({
+  display: 'block',
+  textDecoration: 'none',
+  borderRadius: theme.appBorderRadius,
+  color: 'inherit',
+
+  '&:hover': {
+    background: theme.background.hoverable,
+  },
+}));
+
+const SelectedStoryHighlight = styled.div(({ theme }) => ({
+  background: theme.background.hoverable,
+  borderRadius: theme.appBorderRadius,
+}));
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<SyntaxHighlighterProps>(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+}));
+
+const areLocationsEqual = (a: SourceBlock, b: SourceBlock): boolean =>
+  a.startLoc.line === b.startLoc.line &&
+  a.startLoc.col === b.startLoc.col &&
+  a.endLoc.line === b.endLoc.line &&
+  a.endLoc.col === b.endLoc.col;
+
+interface StoryPanelProps {
+  api: API;
+}
+
+interface SourceParams {
+  source: string;
+  locationsMap: LocationsMap;
+}
+export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
+  const [state, setState] = React.useState<SourceParams & { currentLocation?: SourceBlock }>({
+    source: 'loading source...',
+    locationsMap: {},
+  });
+
+  const story: Story | undefined = api.getCurrentStoryData() as Story;
+  const selectedStoryRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (story) {
+      const {
+        parameters: {
+          // @ts-ignore
+          storySource: { source, locationsMap } = { source: '', locationsMap: {} },
+        } = {},
+      } = story;
+      const currentLocation = locationsMap
+        ? locationsMap[
+            Object.keys(locationsMap).find((key: string) => {
+              const sourceLoaderId = key.split('--');
+              return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
+            })
+          ]
+        : undefined;
+      setState({ source, locationsMap, currentLocation });
+    }
+  }, [story ? story.id : null]);
+  React.useEffect(() => {
+    if (selectedStoryRef.current) {
+      selectedStoryRef.current.scrollIntoView();
+    }
+  }, [selectedStoryRef.current]);
+
+  const { source, locationsMap, currentLocation } = state;
+
+  const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) =>
+    rows.map((node, i) =>
+      createSyntaxHighlighterElement({
+        node,
+        stylesheet,
+        useInlineStyles,
+        key: `code-segement${i}`,
+      })
+    );
+
+  const createStoryPart = ({
+    rows,
+    stylesheet,
+    useInlineStyles,
+    location,
+    id,
+    refId,
+  }: SyntaxHighlighterRendererProps & { location: SourceBlock; id: string; refId?: string }) => {
+    const first = location.startLoc.line - 1;
+    const last = location.endLoc.line;
+
+    const storyRows = rows.slice(first, last);
+    const storySource = createPart({ rows: storyRows, stylesheet, useInlineStyles });
+    const storyKey = `${first}-${last}`;
+
+    if (currentLocation && areLocationsEqual(location, currentLocation)) {
+      return (
+        <SelectedStoryHighlight key={storyKey} ref={selectedStoryRef}>
+          {storySource}
+        </SelectedStoryHighlight>
+      );
+    }
+    return (
+      <StyledStoryLink to={refId ? `/story/${refId}_${id}` : `/story/${id}`} key={storyKey}>
+        {storySource}
+      </StyledStoryLink>
+    );
+  };
+
+  const createParts = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) => {
+    const parts = [];
+    let lastRow = 0;
+
+    Object.keys(locationsMap).forEach((key) => {
+      const location = locationsMap[key];
+      const first = location.startLoc.line - 1;
+      const last = location.endLoc.line;
+      const { kind, refId } = story;
+      // source loader ids are different from story id
+      const sourceIdParts = key.split('--');
+      const id = api.storyId(kind, sourceIdParts[sourceIdParts.length - 1]);
+      const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
+      const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });
+
+      parts.push(start);
+      parts.push(storyPart);
+
+      lastRow = last;
+    });
+
+    const lastPart = createPart({ rows: rows.slice(lastRow), stylesheet, useInlineStyles });
+
+    parts.push(lastPart);
+
+    return parts;
+  };
+
+  const lineRenderer = ({
+    rows,
+    stylesheet,
+    useInlineStyles,
+  }: SyntaxHighlighterRendererProps): React.ReactNode => {
+    // because of the usage of lineRenderer, all lines will be wrapped in a span
+    // these spans will receive all classes on them for some reason
+    // which makes colours casecade incorrectly
+    // this removed that list of classnames
+    const myrows = rows.map(({ properties, ...rest }) => ({
+      ...rest,
+      properties: { className: [] },
+    }));
+
+    if (!locationsMap || !Object.keys(locationsMap).length) {
+      return createPart({ rows: myrows, stylesheet, useInlineStyles });
+    }
+
+    const parts = createParts({ rows: myrows, stylesheet, useInlineStyles });
+
+    return <span>{parts}</span>;
+  };
+  return (
+    <StyledSyntaxHighlighter
+      language="jsx"
+      showLineNumbers
+      renderer={lineRenderer}
+      format={false}
+      copyable={false}
+      padded
+    >
+      {source}
+    </StyledSyntaxHighlighter>
+  );
+};
diff --git a/addons/storysource/src/events.js b/addons/storysource/src/events.js
deleted file mode 100644
index 80572092f96e..000000000000
--- a/addons/storysource/src/events.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ADDON_ID = 'storybook/source-loader';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const EVENT_ID = `${ADDON_ID}/set`;
diff --git a/addons/storysource/src/events.ts b/addons/storysource/src/events.ts
new file mode 100644
index 000000000000..9436b8a75114
--- /dev/null
+++ b/addons/storysource/src/events.ts
@@ -0,0 +1,2 @@
+export const ADDON_ID = 'storybook/source-loader';
+export const PANEL_ID = `${ADDON_ID}/panel`;
diff --git a/addons/storysource/src/index.js b/addons/storysource/src/index.js
deleted file mode 100644
index 0bd2bb285dc3..000000000000
--- a/addons/storysource/src/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ADDON_ID, PANEL_ID, EVENT_ID } from './events';
-import { withStorySource } from './preview';
-
-export { ADDON_ID, PANEL_ID, EVENT_ID, withStorySource };
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/storysource/src/index.ts b/addons/storysource/src/index.ts
new file mode 100644
index 000000000000..a5cd9202f547
--- /dev/null
+++ b/addons/storysource/src/index.ts
@@ -0,0 +1,7 @@
+import { ADDON_ID, PANEL_ID } from './events';
+
+export { ADDON_ID, PANEL_ID };
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
diff --git a/addons/storysource/src/manager.js b/addons/storysource/src/manager.js
deleted file mode 100644
index 4ca5c8414056..000000000000
--- a/addons/storysource/src/manager.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import addons from '@storybook/addons';
-
-import StoryPanel from './StoryPanel';
-import { ADDON_ID, PANEL_ID } from '.';
-
-export function register() {
-  addons.register(ADDON_ID, api => {
-    addons.addPanel(PANEL_ID, {
-      title: 'Story',
-      render: ({ active, key }) => <StoryPanel key={key} api={api} active={active} />,
-      paramKey: 'storysource',
-    });
-  });
-}
diff --git a/addons/storysource/src/manager.tsx b/addons/storysource/src/manager.tsx
new file mode 100644
index 000000000000..1d5351c1cac5
--- /dev/null
+++ b/addons/storysource/src/manager.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import addons from '@storybook/addons';
+
+import { StoryPanel } from './StoryPanel';
+import { ADDON_ID, PANEL_ID } from '.';
+
+export function register() {
+  addons.register(ADDON_ID, (api) => {
+    addons.addPanel(PANEL_ID, {
+      title: 'Story',
+      render: ({ active, key }) => (active ? <StoryPanel key={key} api={api} /> : null),
+      paramKey: 'storysource',
+    });
+  });
+}
diff --git a/addons/storysource/src/preset.js b/addons/storysource/src/preset.js
index 34ff01a97f17..3bf0a6d9fab6 100644
--- a/addons/storysource/src/preset.js
+++ b/addons/storysource/src/preset.js
@@ -24,8 +24,8 @@ function webpack(webpackConfig = {}, options = {}) {
   };
 }
 
-function addons(entry = []) {
+function managerEntries(entry = []) {
   return [...entry, require.resolve('@storybook/addon-storysource/register')];
 }
 
-module.exports = { webpack, addons };
+module.exports = { webpack, managerEntries };
diff --git a/addons/storysource/src/preview.js b/addons/storysource/src/preview.js
deleted file mode 100644
index 93a15a9ed92e..000000000000
--- a/addons/storysource/src/preview.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import addons from '@storybook/addons';
-import { EVENT_ID } from './events';
-
-const getLocation = (context, locationsMap) => locationsMap[context.id];
-
-function setStorySource(context, source, locationsMap) {
-  const currentLocation = getLocation(context, locationsMap);
-
-  addons.getChannel().emit(EVENT_ID, {
-    source,
-    currentLocation,
-    locationsMap,
-  });
-}
-
-export function withStorySource(source, locationsMap = {}) {
-  return (storyFn, context) => {
-    setStorySource(context, source, locationsMap);
-    return storyFn();
-  };
-}
diff --git a/addons/storysource/theming-light-dark.png b/addons/storysource/theming-light-dark.png
new file mode 100644
index 000000000000..e162bc2e0d89
Binary files /dev/null and b/addons/storysource/theming-light-dark.png differ
diff --git a/addons/centered/tsconfig.json b/addons/storysource/tsconfig.json
similarity index 100%
rename from addons/centered/tsconfig.json
rename to addons/storysource/tsconfig.json
diff --git a/addons/toolbars/README.md b/addons/toolbars/README.md
new file mode 100644
index 000000000000..4fc67c669dfd
--- /dev/null
+++ b/addons/toolbars/README.md
@@ -0,0 +1,226 @@
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/toolbars/docs/hero.gif" width="100%" />
+</center>
+
+<h1>Storybook Addon Toolbars</h1>
+
+The Toolbars addon controls global story rendering options from Storybook's toolbar UI. It's a general purpose addon that can be used to:
+
+- set a theme for your components
+- set your components' internationalization (i18n) locale
+- configure just about anything in Storybook that makes use of a global variable
+
+Toolbars is built on top of [Storybook Args](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs) (SB6.0+): dynamic variables that trigger a story re-render when they are set.
+
+- [Get started](#get-started)
+  - [Installation](#installation)
+  - [Configure menu UI](#configure-menu-ui)
+  - [Create a decorator](#create-a-decorator)
+- [Advanced usage](#advanced-usage)
+  - [Advanced menu configuration](#advanced-menu-configuration)
+  - [Consuming global args from within a story](#consuming-global-args-from-within-a-story)
+  - [Consuming global args from within an addon](#consuming-global-args-from-within-an-addon)
+- [FAQs](#faqs)
+  - [How does this compare to `addon-contexts`?](#how-does-this-compare-to-addon-contexts)
+
+## Get started
+
+To get started with `addon-toolbars`:
+
+1. [install the addon](#installation),
+2. [configure the menu UI](#configure-menu-ui)
+3. [Create a decorator to implement custom logic](#create-a-decorator).
+
+### Installation
+
+First, install the package:
+
+```sh
+npm install @storybook/addon-toolbars -D # or yarn
+```
+
+Then add it to your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-toolbars'],
+};
+```
+
+### Configure menu UI
+
+Addon-toolbars has a simple, declarative syntax for configuring toolbar menus. You can add toolbars by adding `globalArgTypes` with a `toolbar` annotation, in `.storybook/preview.js`:
+
+```js
+export const globalArgTypes = {
+  theme: {
+    name: 'Theme'
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      // array of plain string values or MenuItem shape (see below)
+      items: ['light', 'dark'],
+    },
+  },
+};
+```
+
+You should see a dropdown in your toolbar with options `light` and `dark`.
+
+### Create a decorator
+
+Now, let's wire it up! We can consume our new `theme` global arg in a decorator using the `context.globalArgs.theme` value.
+
+For example, suppose you are using `styled-components`. You can add a theme provider decorator to your `.storybook/preview.js` config:
+
+```ts
+import { ThemeProvider } from 'styled-components';
+import { StoryContext, StoryGetter, StoryWrapper } from '@storybook/addons';
+
+const withThemeProvider: StoryWrapper = (Story: StoryGetter, context: StoryContext) => {
+  // context.globalArgs.theme here will be either 'light' or 'dark'
+  // getTheme being a function retrieving the actual theme object from that value
+  const theme = getTheme(context.globalArgs.theme);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Story {...context} />
+    </ThemeProvider>
+  );
+};
+
+export const decorators = [withThemeProvider];
+```
+
+## Advanced usage
+
+The previous section shows the common case. There are two advanced use cases: (1) [advanced menu configurations](#advanced-menu-configuration), (2) [consuming global args inside a story](#consuming-global-args-from-within-a-story).
+
+### Advanced menu configuration
+
+The default menu configuration is simple: everything's a string! However, the Toolbars addon also support configuration options to tweak the appearance of the menu:
+
+```ts
+type MenuItem {
+  /**
+   * The string value of the menu that gets set in the global args
+   */
+  value: string,
+  /**
+   * The main text of the title
+   */
+  title: string,
+  /**
+   * A string that gets shown in left side of the menu, if set
+   */
+  left?: string,
+  /**
+   * A string that gets shown in right side of the menu, if set
+   */
+  right?: string,
+  /**
+   * An icon that gets shown in the toolbar if this item is selected
+   */
+  icon?: icon,
+}
+```
+
+Thus if you want to show right-justified flags for an internationalization locale, you might set up the following configuration in `.storybook/preview.js`:
+
+```js
+export const globalArgTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'fr', right: '🇫🇷', title: 'Français' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' },
+      ],
+    },
+  },
+};
+```
+
+### Consuming global args from within a story
+
+The recommended usage, as shown in the examples above, is to consume global args from within a decorator and implement a global setting that applies to all stories. But sometimes it's useful to use toolbar options inside individual stories.
+
+Storybook's `globalArgs` are available via the story context:
+
+```js
+const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'es': return 'Hola!';
+    case 'fr': return 'Bonjour!';
+    case 'kr': return '안녕하세요!';
+    case 'zh': return '你好!';
+    default:
+      return 'Hello!',
+  }
+}
+
+export const StoryWithLocale = (args, { globalArgs: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <>{caption}</>;
+};
+```
+
+**NOTE:** In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passes as the second argument:
+
+```js
+export const StoryWithLocale = ({ globalArgs: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <>{caption}</>;
+};
+```
+
+### Consuming global args from within an addon
+
+There is a hook available in `@storybook/api` to retrieve the global args: `useGlobalArgs()`
+
+Following the previous example of the ThemeProvider, if you want for instance to display the current theme inside a Panel:
+
+```js
+import { useGlobalArgs } from '@storybook/api';
+import { AddonPanel, Placeholder, Separator, Source, Spaced, Title } from '@storybook/components';
+
+const ThemePanel = props => {
+  const [{ theme: themeName }] = useGlobalArgs();
+  const theme = getTheme(themeName);
+
+  return (
+    <AddonPanel {...props}>
+      {theme ? (
+        <Spaced row={3} outer={1}>
+          <Title>{theme.name}</Title>
+          <p>The full theme object/p>
+          <Source code={JSON.stringify(theme, null, 2)} language="js" copyable padded showLineNumbers />
+        </Spaced>
+      ) : (
+        <Placeholder>No theme selected</Placeholder>
+      )}
+    </AddonPanel>
+  );
+};
+```
+
+## FAQs
+
+### How does this compare to `addon-contexts`?
+
+`Addon-toolbars` is the successor to `addon-contexts`, which provided convenient global toolbars in Storybook's toolbar.
+
+The primary difference between the two packages is that `addon-toolbars` makes use of Storybook's new **Story Args** feature, which has the following advantages:
+
+- **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
+
+- **Ergonomics**. Global args are easy to consume [in stories](#consuming-global-args-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs), or even in other addons.
+
+* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.
diff --git a/addons/toolbars/docs/hero.gif b/addons/toolbars/docs/hero.gif
new file mode 100644
index 000000000000..0a07b42c403c
Binary files /dev/null and b/addons/toolbars/docs/hero.gif differ
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
new file mode 100644
index 000000000000..85d94aac88e1
--- /dev/null
+++ b/addons/toolbars/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@storybook/addon-toolbars",
+  "version": "6.0.0-beta.21",
+  "description": "Storybook toolbars addon",
+  "keywords": [
+    "addon",
+    "storybook",
+    "theming",
+    "i18n",
+    "internationalization"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/addons/toolbars",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/toolbars"
+  },
+  "license": "MIT",
+  "main": "dist/register.js",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "core-js": "^3.0.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/addons/toolbars/preset.js b/addons/toolbars/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/toolbars/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js
new file mode 100644
index 000000000000..06b5a5887266
--- /dev/null
+++ b/addons/toolbars/register.js
@@ -0,0 +1 @@
+export * from './dist/register';
diff --git a/addons/toolbars/src/components/MenuToolbar.tsx b/addons/toolbars/src/components/MenuToolbar.tsx
new file mode 100644
index 000000000000..161108e36d51
--- /dev/null
+++ b/addons/toolbars/src/components/MenuToolbar.tsx
@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { useGlobalArgs } from '@storybook/api';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { NormalizedToolbarArgType } from '../types';
+
+export type MenuToolbarProps = NormalizedToolbarArgType & { id: string };
+
+export const MenuToolbar: FC<MenuToolbarProps> = ({
+  id,
+  name,
+  description,
+  toolbar: { icon, items },
+}) => {
+  const [globalArgs, updateGlobalArgs] = useGlobalArgs();
+  const selectedValue = globalArgs[id];
+  const active = selectedValue != null;
+  const selectedItem = active && items.find((item) => item.value === selectedValue);
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => {
+        const links = items.map((item) => {
+          const { value, left, title, right } = item;
+          return {
+            id: value,
+            left,
+            title,
+            right,
+            active: selectedValue === value,
+            onClick: () => {
+              updateGlobalArgs({ [id]: value });
+              onHide();
+            },
+          };
+        });
+        return <TooltipLinkList links={links} />;
+      }}
+      closeOnClick
+    >
+      <IconButton key={name} active={active} title={description}>
+        <Icons icon={(selectedItem && selectedItem.icon) || icon} />
+      </IconButton>
+    </WithTooltip>
+  );
+};
diff --git a/addons/toolbars/src/components/ToolbarManager.tsx b/addons/toolbars/src/components/ToolbarManager.tsx
new file mode 100644
index 000000000000..215ae20c9080
--- /dev/null
+++ b/addons/toolbars/src/components/ToolbarManager.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { useGlobalArgTypes } from '@storybook/api';
+import { Separator } from '@storybook/components';
+
+import { ToolbarArgType } from '../types';
+import { MenuToolbar } from './MenuToolbar';
+
+const normalize = (key: string, argType: ToolbarArgType) => ({
+  ...argType,
+  name: argType.name || key,
+  description: argType.description || key,
+  toolbar: {
+    ...argType.toolbar,
+    items: argType.toolbar.items.map((item) =>
+      typeof item === 'string' ? { value: item, title: item } : item
+    ),
+  },
+});
+
+/**
+ * A smart component for handling manager-preview interactions.
+ */
+export const ToolbarManager: FC = () => {
+  const globalArgTypes = useGlobalArgTypes();
+  const keys = Object.keys(globalArgTypes).filter((key) => !!globalArgTypes[key].toolbar);
+  if (!keys.length) return null;
+
+  return (
+    <>
+      <Separator />
+      {keys.map((key) => {
+        const normalizedConfig = normalize(key, globalArgTypes[key] as ToolbarArgType);
+        return <MenuToolbar key={key} id={key} {...normalizedConfig} />;
+      })}
+    </>
+  );
+};
diff --git a/addons/toolbars/src/constants.ts b/addons/toolbars/src/constants.ts
new file mode 100644
index 000000000000..1be8012f12e3
--- /dev/null
+++ b/addons/toolbars/src/constants.ts
@@ -0,0 +1,2 @@
+export const ID = 'addon-toolbars' as const;
+export const PARAM = 'toolbars' as const;
diff --git a/addons/toolbars/src/preset/index.ts b/addons/toolbars/src/preset/index.ts
new file mode 100644
index 000000000000..0e20177db06c
--- /dev/null
+++ b/addons/toolbars/src/preset/index.ts
@@ -0,0 +1,3 @@
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
diff --git a/addons/toolbars/src/register.tsx b/addons/toolbars/src/register.tsx
new file mode 100644
index 000000000000..552f00c81ed5
--- /dev/null
+++ b/addons/toolbars/src/register.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import addons, { types } from '@storybook/addons';
+import { ToolbarManager } from './components/ToolbarManager';
+import { ID } from './constants';
+
+addons.register(ID, (api) =>
+  addons.add(ID, {
+    title: ID,
+    type: types.TOOL,
+    match: () => true,
+    render: () => <ToolbarManager />,
+  })
+);
diff --git a/addons/toolbars/src/types.ts b/addons/toolbars/src/types.ts
new file mode 100644
index 000000000000..6e9b38ddf9d0
--- /dev/null
+++ b/addons/toolbars/src/types.ts
@@ -0,0 +1,27 @@
+import { IconsProps } from '@storybook/components';
+import { ArgType } from '@storybook/api';
+
+export interface ToolbarItem {
+  value: string;
+  icon?: IconsProps['icon'];
+  left?: string;
+  right?: string;
+  title?: string;
+}
+
+export interface NormalizedToolbarConfig {
+  icon?: IconsProps['icon'];
+  items: ToolbarItem[];
+}
+
+export type NormalizedToolbarArgType = ArgType & {
+  toolbar: NormalizedToolbarConfig;
+};
+
+export type ToolbarConfig = NormalizedToolbarConfig & {
+  items: string[] | ToolbarItem[];
+};
+
+export type ToolbarArgType = ArgType & {
+  toolbar: ToolbarConfig;
+};
diff --git a/addons/toolbars/tsconfig.json b/addons/toolbars/tsconfig.json
new file mode 100644
index 000000000000..eac4a67bed71
--- /dev/null
+++ b/addons/toolbars/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "jest"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**.test.ts"]
+}
diff --git a/addons/viewport/README.md b/addons/viewport/README.md
index 853c64491b53..9cbc5d51d780 100644
--- a/addons/viewport/README.md
+++ b/addons/viewport/README.md
@@ -24,7 +24,7 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-viewport/register'],
+  addons: ['@storybook/addon-viewport'],
 };
 ```
 
@@ -35,7 +35,7 @@ You should now be able to see the viewport addon icon in the the toolbar at the
 The viewport addon is configured by story parameters with the `viewport` key. To configure globally, import `addParameters` from your app layer in your `preview.js` file.
 
 ```js
-import { addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/client-api';
 
 addParameters({
   viewport: {
@@ -53,6 +53,12 @@ Options can take a object with the following keys:
 
 Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area.
 
+### disable : Boolean
+
+---
+
+Disable viewport addon per component, story or global.
+
 ### viewports : Object
 
 ---
@@ -97,14 +103,17 @@ Parameters can be configured for a whole set of stories or a single story via th
 export default {
   title: 'Stories',
   parameters: {
-    viewport: { defaultViewport: 'iphone6' },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6'
+    },
   };
 };
 
 export const myStory = () => <div />;
-myStory.story = {
-  parameters: {
-    viewport: { defaultViewport: 'iphonex' },
+myStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex'
   },
 };
 ```
@@ -116,7 +125,7 @@ myStory.story = {
 The default viewports being used is [`MINIMAL_VIEWPORTS`](src/defaults.ts). If you'd like to use a more granular list of devices, you can use [`INITIAL_VIEWPORTS`](src/defaults.ts) like so in your `.storybook/preview.js` file.
 
 ```js
-import { addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/client-api';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 addParameters({
@@ -131,7 +140,7 @@ addParameters({
 This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by calling `addParameters` with the two devices as `viewports` in `.storybook/preview.js` file.
 
 ```js
-import { addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/client-api';
 
 const customViewports = {
   kindleFire2: {
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index c784002d1a0b..39178131f0ea 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "addon",
@@ -16,39 +16,44 @@
     "directory": "addons/viewport"
   },
   "license": "MIT",
+  "main": "dist/preview.js",
+  "types": "dist/preview.d.ts",
   "files": [
     "dist/**/*",
-    "docs/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/preview.js",
-  "types": "dist/preview.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.7.2",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@types/util-deprecate": "^1.0.0"
+    "regenerator-runtime": "^0.13.3"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
index 98d38e5addd7..ee4bf351ec6f 100644
--- a/addons/viewport/src/Tool.tsx
+++ b/addons/viewport/src/Tool.tsx
@@ -35,7 +35,7 @@ const baseViewports: ViewportItem[] = [responsiveViewport];
 
 const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => {
   return list
-    .map(i => {
+    .map((i) => {
       switch (i.id) {
         case responsiveViewport.id: {
           if (active.id === i.id) {
@@ -135,7 +135,7 @@ export const ViewportTool: FunctionComponent = memo(
     });
     const list = toList(viewports);
 
-    if (!list.find(i => i.id === defaultViewport)) {
+    if (!list.find((i) => i.id === defaultViewport)) {
       console.warn(
         `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
       );
@@ -151,9 +151,9 @@ export const ViewportTool: FunctionComponent = memo(
 
     const { selected, isRotated } = state;
     const item =
-      list.find(i => i.id === selected) ||
-      list.find(i => i.id === defaultViewport) ||
-      list.find(i => i.default) ||
+      list.find((i) => i.id === selected) ||
+      list.find((i) => i.id === defaultViewport) ||
+      list.find((i) => i.default) ||
       responsiveViewport;
 
     const ref = useRef<ViewportStyles>();
@@ -203,8 +203,7 @@ export const ViewportTool: FunctionComponent = memo(
                   margin: `auto`,
                   transition: 'width .3s, height .3s',
                   position: 'relative',
-                  border: `${theme.layoutMargin}px solid black`,
-                  borderRadius: theme.appBorderRadius,
+                  border: `1px solid black`,
                   boxShadow:
                     '0 0 100px 1000px rgba(0,0,0,0.5), 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
 
diff --git a/addons/viewport/src/defaults.ts b/addons/viewport/src/defaults.ts
index 8a67ec92d3a4..6fd59c4e3eee 100644
--- a/addons/viewport/src/defaults.ts
+++ b/addons/viewport/src/defaults.ts
@@ -92,8 +92,8 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
   galaxys9: {
     name: 'Galaxy S9',
     styles: {
-      height: '1480px',
-      width: '720px',
+      height: '740px',
+      width: '360px',
     },
     type: 'mobile',
   },
diff --git a/addons/viewport/src/legacy_preview/index.ts b/addons/viewport/src/legacy_preview/index.ts
deleted file mode 100644
index de7b43e50a02..000000000000
--- a/addons/viewport/src/legacy_preview/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import deprecate from 'util-deprecate';
-
-export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from '../defaults';
-
-export const configureViewport = deprecate(() => {},
-'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
diff --git a/addons/viewport/src/models/Viewport.ts b/addons/viewport/src/models/Viewport.ts
index c96a7ac003ec..76a5eb096777 100644
--- a/addons/viewport/src/models/Viewport.ts
+++ b/addons/viewport/src/models/Viewport.ts
@@ -4,11 +4,6 @@ export interface Viewport {
   name: string;
   styles: Styles;
   type: 'desktop' | 'mobile' | 'tablet' | 'other';
-  /*
-   * @deprecated
-   * Deprecated option?
-   */
-  default?: boolean;
 }
 
 export interface ViewportStyles {
diff --git a/addons/viewport/src/models/ViewportAddonParameter.ts b/addons/viewport/src/models/ViewportAddonParameter.ts
index e0f826f9586b..84e278d91f9c 100644
--- a/addons/viewport/src/models/ViewportAddonParameter.ts
+++ b/addons/viewport/src/models/ViewportAddonParameter.ts
@@ -4,9 +4,4 @@ export interface ViewportAddonParameter {
   disable?: boolean;
   defaultViewport?: string;
   viewports?: ViewportMap;
-  /*
-   * @deprecated
-   * The viewport parameter `onViewportChange` is no longer supported
-   */
-  onViewportChange?: never;
 }
diff --git a/addons/viewport/src/preview.ts b/addons/viewport/src/preview.ts
index 9f198c8b135f..05f32144967d 100644
--- a/addons/viewport/src/preview.ts
+++ b/addons/viewport/src/preview.ts
@@ -1,6 +1 @@
-export {
-  configureViewport,
-  DEFAULT_VIEWPORT,
-  INITIAL_VIEWPORTS,
-  MINIMAL_VIEWPORTS,
-} from './legacy_preview';
+export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults';
diff --git a/app/angular/package.json b/app/angular/package.json
index f558168729d2..6fc3e81ce749 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/angular"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,26 +22,38 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@storybook/node-logger": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@types/webpack-env": "^1.15.2",
+    "autoprefixer": "^9.7.6",
     "core-js": "^3.0.1",
-    "fork-ts-checker-webpack-plugin": "^3.0.1",
+    "fork-ts-checker-webpack-plugin": "^4.0.3",
     "global": "^4.3.2",
+    "postcss-loader": "^3.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "regenerator-runtime": "^0.13.3",
     "sass-loader": "^8.0.0",
     "strip-json-comments": "^3.0.1",
     "ts-loader": "^6.0.1",
-    "tsconfig-paths-webpack-plugin": "^3.2.0"
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "webpack": "^4.43.0"
   },
   "devDependencies": {
-    "@types/autoprefixer": "^9.4.0",
-    "@types/webpack-env": "^1.14.0",
-    "webpack": "^4.33.0"
+    "@types/autoprefixer": "^9.4.0"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">=0.8.9",
@@ -59,11 +64,9 @@
     "@angular/forms": ">=6.0.0",
     "@angular/platform-browser": ">=6.0.0",
     "@angular/platform-browser-dynamic": ">=6.0.0",
-    "autoprefixer": "^8.1.0",
-    "babel-loader": "^7.0.0 || ^8.0.0",
+    "@babel/core": "*",
     "rxjs": "^6.0.0",
     "typescript": "^3.4.0",
-    "webpack": "^4.32.0",
     "zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0"
   },
   "engines": {
@@ -72,5 +75,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/angular/src/client/index.ts b/app/angular/src/client/index.ts
index b235d2b3b634..823d2918762b 100644
--- a/app/angular/src/client/index.ts
+++ b/app/angular/src/client/index.ts
@@ -9,10 +9,10 @@ export {
   raw,
 } from './preview';
 
+export { StoryFnAngularReturnType as IStory } from './preview/types';
+
 export { moduleMetadata } from './preview/angular/decorators';
 
-// tsc wants to use NodeModule instead of WebpackModule
-declare const module: any;
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts
index 7856bf8f8947..f0a094788c9d 100644
--- a/app/angular/src/client/preview/angular/components/app.component.ts
+++ b/app/angular/src/client/preview/angular/components/app.component.ts
@@ -50,7 +50,7 @@ export class AppComponent implements OnInit, OnDestroy {
         ChangeDetectorRef
       );
 
-      this.subscription = this.data.subscribe(newData => {
+      this.subscription = this.data.subscribe((newData) => {
         this.setProps(instance, newData);
         childChangeDetectorRef.markForCheck();
         // Must detect changes on the current component in order to update any changes in child component's @HostBinding properties (angular/angular#22560)
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
index b5a2170a244b..b747cb3db557 100644
--- a/app/angular/src/client/preview/angular/helpers.ts
+++ b/app/angular/src/client/preview/angular/helpers.ts
@@ -69,7 +69,7 @@ const extractNgModuleMetadata = (importItem: any): NgModule => {
   }
 
   const ngModuleDecorator: NgModule | undefined = decorators.find(
-    decorator => decorator instanceof NgModule
+    (decorator) => decorator instanceof NgModule
   );
   if (!ngModuleDecorator) {
     return null;
@@ -82,7 +82,7 @@ const getExistenceOfComponentInModules = (
   declarations: any[],
   imports: any[]
 ): boolean => {
-  if (declarations && declarations.some(declaration => declaration === component)) {
+  if (declarations && declarations.some((declaration) => declaration === component)) {
     // Found component in declarations array
     return true;
   }
@@ -90,7 +90,7 @@ const getExistenceOfComponentInModules = (
     return false;
   }
 
-  return imports.some(importItem => {
+  return imports.some((importItem) => {
     const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
     if (!extractedNgModuleMetadata) {
       // Not an NgModule
@@ -161,8 +161,8 @@ const draw = (newModule: DynamicComponentType): void => {
     platform = platformBrowserDynamic();
     promises.push(platform.bootstrapModule(newModule));
   } else {
-    Promise.all(promises).then(modules => {
-      modules.forEach(mod => mod.destroy());
+    Promise.all(promises).then((modules) => {
+      modules.forEach((mod) => mod.destroy());
 
       insertDynamicRoot();
       promises = [];
diff --git a/app/angular/src/client/preview/types.ts b/app/angular/src/client/preview/types.ts
index 2b0349a4a79c..47ab69bdad10 100644
--- a/app/angular/src/client/preview/types.ts
+++ b/app/angular/src/client/preview/types.ts
@@ -20,10 +20,6 @@ export interface IStorybookStory {
   render: () => any;
 }
 
-// @deprecated Use IStorybookSection instead
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IStoribookSection extends IStorybookSection {}
-
 export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
diff --git a/app/angular/src/demo/button.component.ts b/app/angular/src/demo/button.component.ts
index 7d3f76ab9dc7..da804e507b7d 100644
--- a/app/angular/src/demo/button.component.ts
+++ b/app/angular/src/demo/button.component.ts
@@ -2,9 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button-component',
-  template: `
-    <button (click)="onClick.emit($event)">{{ text }}</button>
-  `,
+  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
   styles: [
     `
       button {
diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts
index fb7ec1935646..25c22a7e3ea9 100644
--- a/app/angular/src/server/__tests__/angular-cli_config.test.ts
+++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts
@@ -70,4 +70,13 @@ describe('angular-cli_config', () => {
     expect(projectConfig).toBe(null);
     expect(config).toBe(baseConfig);
   });
+
+  it('should return empty `buildOptions.budgets` by default', () => {
+    const config = getAngularCliWebpackConfigOptions(__dirname as Path);
+    expect(config).toMatchObject({
+      buildOptions: {
+        budgets: [],
+      },
+    });
+  });
 });
diff --git a/app/angular/src/server/__tests__/angular.json b/app/angular/src/server/__tests__/angular.json
index b04b1d60b447..d703e396ff22 100644
--- a/app/angular/src/server/__tests__/angular.json
+++ b/app/angular/src/server/__tests__/angular.json
@@ -75,13 +75,6 @@
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     },
@@ -95,13 +88,6 @@
             "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "angular-cli:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     }
diff --git a/app/angular/src/server/__tests__/ts_config.test.ts b/app/angular/src/server/__tests__/ts_config.test.ts
index 046001787ad8..1b84a549f06d 100644
--- a/app/angular/src/server/__tests__/ts_config.test.ts
+++ b/app/angular/src/server/__tests__/ts_config.test.ts
@@ -20,6 +20,9 @@ describe('ts_config', () => {
 
     expect(config).toEqual({
       transpileOnly: true,
+      compilerOptions: {
+        emitDecoratorMetadata: true,
+      },
       configFile: 'tsconfig.json',
     });
   });
@@ -31,6 +34,9 @@ describe('ts_config', () => {
 
     expect(config).toEqual({
       transpileOnly: true,
+      compilerOptions: {
+        emitDecoratorMetadata: true,
+      },
     });
   });
 });
diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts
index fd98d622cb84..89f649667b11 100644
--- a/app/angular/src/server/angular-cli_config.ts
+++ b/app/angular/src/server/angular-cli_config.ts
@@ -47,13 +47,17 @@ function getTsConfigOptions(tsConfigPath: Path) {
 }
 
 export function getAngularCliConfig(dirToSearch: string) {
-  const fname = path.join(dirToSearch, 'angular.json');
+  const possibleConfigNames = ['angular.json', 'workspace.json'];
+  const possibleConfigPaths = possibleConfigNames.map((name) => path.join(dirToSearch, name));
 
-  if (!fs.existsSync(fname)) {
+  const validIndex = possibleConfigPaths.findIndex((configPath) => fs.existsSync(configPath));
+
+  if (validIndex === -1) {
+    logger.error(`Could not find angular.json using ${possibleConfigPaths[0]}`);
     return undefined;
   }
 
-  return JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
+  return JSON.parse(stripJsonComments(fs.readFileSync(possibleConfigPaths[validIndex], 'utf8')));
 }
 
 export function getLeadingAngularCliProject(ngCliConfig: any) {
@@ -67,9 +71,26 @@ export function getLeadingAngularCliProject(ngCliConfig: any) {
     throw new Error('angular.json must have projects entry.');
   }
 
-  const fallbackProject = defaultProject && projects[defaultProject];
-  const firstProject = projects[Object.keys(projects)[0]];
-  return projects.storybook || fallbackProject || firstProject;
+  let projectName;
+  const firstProjectName = Object.keys(projects)[0];
+  if (projects.storybook) {
+    projectName = 'storybook';
+  } else if (defaultProject && projects[defaultProject]) {
+    projectName = defaultProject;
+  } else if (projects[firstProjectName]) {
+    projectName = firstProjectName;
+  }
+
+  const project = projects[projectName];
+  if (!project) {
+    logger.error(`Could not find angular project '${projectName}' in angular.json.`);
+  } else {
+    logger.info(`=> Using angular project '${projectName}' for configuring Storybook.`);
+  }
+  if (project && !project.architect.build) {
+    logger.error(`architect.build is not defined for project '${projectName}'.`);
+  }
+  return project;
 }
 
 export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
@@ -89,6 +110,10 @@ export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
   const projectRoot = path.resolve(dirToSearch, project.root);
   const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path;
   const tsConfig = getTsConfigOptions(tsConfigPath);
+  const budgets = projectOptions.budgets || [];
+  const scripts = projectOptions.scripts || [];
+  const outputPath = projectOptions.outputPath || 'dist/storybook-angular';
+  const styles = projectOptions.styles || [];
 
   return {
     root: dirToSearch,
@@ -101,6 +126,10 @@ export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
       optimization: {},
       ...projectOptions,
       assets: normalizedAssets,
+      budgets,
+      scripts,
+      styles,
+      outputPath,
     },
   };
 }
diff --git a/app/angular/src/server/angular-cli_utils.ts b/app/angular/src/server/angular-cli_utils.ts
index 72469eda51ad..75d2d6763d3f 100644
--- a/app/angular/src/server/angular-cli_utils.ts
+++ b/app/angular/src/server/angular-cli_utils.ts
@@ -45,7 +45,7 @@ function isStylingRule(rule: RuleSetRule) {
 }
 
 export function filterOutStylingRules(config: Configuration) {
-  return config.module.rules.filter(rule => !isStylingRule(rule));
+  return config.module.rules.filter((rule) => !isStylingRule(rule));
 }
 
 export function isBuildAngularInstalled() {
diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.ts b/app/angular/src/server/create-fork-ts-checker-plugin.ts
index f8881492f3d9..594fe5a25384 100644
--- a/app/angular/src/server/create-fork-ts-checker-plugin.ts
+++ b/app/angular/src/server/create-fork-ts-checker-plugin.ts
@@ -3,7 +3,7 @@ import { logger } from '@storybook/node-logger';
 
 import { Options } from 'ts-loader';
 
-export default function(tsLoaderOptions: Partial<Options>) {
+export default function (tsLoaderOptions: Partial<Options>) {
   if (tsLoaderOptions && tsLoaderOptions.configFile) {
     return new ForkTsCheckerWebpackPlugin({
       tsconfig: tsLoaderOptions.configFile,
diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts
index 8521d9c07b88..5b0239b58a72 100644
--- a/app/angular/src/server/framework-preset-angular.ts
+++ b/app/angular/src/server/framework-preset-angular.ts
@@ -51,7 +51,6 @@ export function webpack(
     },
     resolve: {
       ...config.resolve,
-      extensions: ['.ts', '.tsx', ...config.resolve.extensions],
     },
     plugins: [
       ...config.plugins,
diff --git a/app/angular/src/server/ngx-template-loader/index.ts b/app/angular/src/server/ngx-template-loader/index.ts
index 6e2d2381ee14..10ff4359f567 100644
--- a/app/angular/src/server/ngx-template-loader/index.ts
+++ b/app/angular/src/server/ngx-template-loader/index.ts
@@ -26,7 +26,7 @@ const replaceStringsWithRequires = (string: string) => {
   });
 };
 
-export default function(source: string) {
+export default function (source: string) {
   const styleProperty = 'styles';
   const templateProperty = 'template';
 
diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts
index 4d703cf796d2..6fe610be208f 100644
--- a/app/angular/src/server/options.ts
+++ b/app/angular/src/server/options.ts
@@ -1,4 +1,3 @@
-// tslint:disable-next-line: no-var-requires
 const packageJson = require('../../package.json');
 
 export default {
diff --git a/app/angular/src/server/ts_config.ts b/app/angular/src/server/ts_config.ts
index 2613f61db337..bb0581335f0b 100644
--- a/app/angular/src/server/ts_config.ts
+++ b/app/angular/src/server/ts_config.ts
@@ -10,10 +10,13 @@ function resolveTsConfig(tsConfigPath: string): string | undefined {
   return undefined;
 }
 
-export default function(configDir: string) {
+export default function (configDir: string) {
   const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
   return {
     transpileOnly: true,
+    compilerOptions: {
+      emitDecoratorMetadata: true,
+    },
     configFile: configFilePath || undefined,
   };
 }
diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json
index 6c12e1098876..8a9ea247510b 100644
--- a/app/angular/tsconfig.json
+++ b/app/angular/tsconfig.json
@@ -3,7 +3,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "dist",
-    "types": [],
+    "types": ["webpack-env"],
     "rootDir": "./src",
     "resolveJsonModule": true
   }
diff --git a/app/aurelia/README.md b/app/aurelia/README.md
new file mode 100644
index 000000000000..fb3507ebb761
--- /dev/null
+++ b/app/aurelia/README.md
@@ -0,0 +1,23 @@
+# Storybook for Aurelia
+
+Storybook for Aurelia is a UI development environment for your Aurelia components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-aurelia-app
+npx -p @storybook/cli sb init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
diff --git a/app/polymer/bin/build.js b/app/aurelia/bin/build.js
similarity index 100%
rename from app/polymer/bin/build.js
rename to app/aurelia/bin/build.js
diff --git a/app/polymer/bin/index.js b/app/aurelia/bin/index.js
similarity index 100%
rename from app/polymer/bin/index.js
rename to app/aurelia/bin/index.js
diff --git a/app/aurelia/demo.d.ts b/app/aurelia/demo.d.ts
new file mode 100644
index 000000000000..0183b7ef451b
--- /dev/null
+++ b/app/aurelia/demo.d.ts
@@ -0,0 +1,4 @@
+declare module '@storybook/aurelia/demo' {
+  export const Button: any;
+  export const Welcome: any;
+}
diff --git a/app/aurelia/demo.js b/app/aurelia/demo.js
new file mode 100644
index 000000000000..64bcd548d7e8
--- /dev/null
+++ b/app/aurelia/demo.js
@@ -0,0 +1,5 @@
+/* eslint-disable global-require */
+module.exports = {
+  Welcome: require('./dist/demo/welcome').default,
+  Button: require('./dist/demo/button').default,
+};
diff --git a/app/aurelia/package.json b/app/aurelia/package.json
new file mode 100644
index 000000000000..2e3559997744
--- /dev/null
+++ b/app/aurelia/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@storybook/aurelia",
+  "version": "6.0.0-beta.21",
+  "description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/aurelia",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/aurelia"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "fork-ts-checker-webpack-plugin": "^4.0.3",
+    "global": "^4.3.2",
+    "ts-loader": "^6.0.1",
+    "webpack": "^4.33.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.0.10",
+    "@types/webpack-env": "^1.15.1",
+    "css-loader": "^3.0.0",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^3.0.0",
+    "htmlhint": "^0.11.0",
+    "node-sass": "^4.12.0",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^0.23.0",
+    "typescript": "latest",
+    "webpack": "^4.33.0"
+  },
+  "peerDependencies": {
+    "aurelia": "dev"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/app/aurelia/src/client/index.ts b/app/aurelia/src/client/index.ts
new file mode 100644
index 000000000000..2f61014c86b1
--- /dev/null
+++ b/app/aurelia/src/client/index.ts
@@ -0,0 +1,6 @@
+export * from './preview';
+
+declare const module: any;
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
diff --git a/app/aurelia/src/client/preview/decorators.ts b/app/aurelia/src/client/preview/decorators.ts
new file mode 100644
index 000000000000..25b97e3cd639
--- /dev/null
+++ b/app/aurelia/src/client/preview/decorators.ts
@@ -0,0 +1,45 @@
+import { StoryFn } from '@storybook/addons';
+import { IRegistry, IContainer } from 'aurelia';
+import { StoryFnAureliaReturnType } from './types';
+
+export const addRegistries = (...items: IRegistry[]) => (
+  storyFn: StoryFn<StoryFnAureliaReturnType>
+) => {
+  const story = storyFn();
+  story.items = story.items || [];
+  story.items.push(...items);
+
+  return {
+    ...story,
+    items,
+  };
+};
+
+export interface Component {
+  item?: unknown;
+  aliases?: string[];
+}
+
+export const addComponents = (...components: Component[] | unknown[]) => (
+  storyFn: StoryFn<StoryFnAureliaReturnType>
+) => {
+  const story = storyFn();
+  story.components = story.components || [];
+  story.components.push(...components);
+
+  return {
+    ...story,
+    components,
+  };
+};
+
+export const addContainer = (container: IContainer) => (
+  storyFn: StoryFn<StoryFnAureliaReturnType>
+) => {
+  const story = storyFn();
+
+  return {
+    ...story,
+    container,
+  };
+};
diff --git a/app/aurelia/src/client/preview/globals.ts b/app/aurelia/src/client/preview/globals.ts
new file mode 100644
index 000000000000..7b7c2bf07135
--- /dev/null
+++ b/app/aurelia/src/client/preview/globals.ts
@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'aurelia';
diff --git a/app/aurelia/src/client/preview/index.ts b/app/aurelia/src/client/preview/index.ts
new file mode 100644
index 000000000000..909bac8c3ac3
--- /dev/null
+++ b/app/aurelia/src/client/preview/index.ts
@@ -0,0 +1,104 @@
+import { Constructable, CustomElement } from 'aurelia';
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { text, boolean, number, date } from '@storybook/addon-knobs';
+
+import './globals';
+import render from './render';
+import { IStorybookSection, StoryFnAureliaReturnType } from './types';
+import { addRegistries, addContainer, Component, addComponents } from './decorators';
+
+const framework = 'Aurelia';
+
+interface ClientApi extends ClientStoryApi<Partial<StoryFnAureliaReturnType>> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export { StoryFnAureliaReturnType, addRegistries, addContainer, Component, addComponents };
+
+export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;
+
+export function generateKnobsFor(CustomElementClass: Constructable) {
+  const def = CustomElement.getDefinition(CustomElementClass);
+  const bindables = def && def.bindables;
+
+  if (!bindables) return class {};
+  const result = class {} as any;
+  const elementConstructed = new CustomElementClass() as any;
+
+  Object.keys(bindables)
+    .map((y) => bindables[y])
+    .forEach((bindableDef) => {
+      const bindable = bindableDef.property;
+      const currentVal = elementConstructed[bindable];
+      switch (typeof currentVal) {
+        case 'boolean':
+          result[bindable] = boolean(bindable, elementConstructed[bindable]);
+          return;
+        case 'string':
+          result[bindable] = text(bindable, elementConstructed[bindable] || 'lorem ipsum');
+          return;
+        case 'number':
+        case 'bigint':
+          result[bindable] = number(bindable, elementConstructed[bindable] || 0);
+          return;
+        case 'undefined':
+          if (bindable.toLocaleLowerCase().includes('is')) {
+            result[bindable] = boolean(bindable, elementConstructed[bindable]);
+            return;
+          }
+          if (
+            bindable.toLocaleLowerCase().includes('count') ||
+            bindable.toLocaleLowerCase().includes('max') ||
+            bindable.toLocaleLowerCase().includes('min')
+          ) {
+            result[bindable] = number(bindable, elementConstructed[bindable] || 0);
+            return;
+          }
+          if (
+            bindable.toLocaleLowerCase().includes('date') ||
+            bindable.toLocaleLowerCase().includes('time')
+          ) {
+            result[bindable] = date(bindable, elementConstructed[bindable] || new Date());
+            return;
+          }
+          result[bindable] = text(bindable, elementConstructed[bindable] || 'lorem ipsum');
+          return;
+        case 'object':
+          if (currentVal instanceof Date) {
+            result[bindable] = date(bindable, elementConstructed[bindable] || new Date());
+            return;
+          }
+          if (currentVal instanceof Date) {
+            result[bindable] = date(bindable, elementConstructed[bindable] || new Date());
+            return;
+          }
+          return;
+        default:
+          result[bindable] = text(bindable, elementConstructed[bindable] || 'lorem ipsum');
+      }
+    });
+  return result;
+}
diff --git a/app/aurelia/src/client/preview/render.ts b/app/aurelia/src/client/preview/render.ts
new file mode 100644
index 000000000000..64a06c1ac0c2
--- /dev/null
+++ b/app/aurelia/src/client/preview/render.ts
@@ -0,0 +1,82 @@
+import { document } from 'global';
+import {
+  Aurelia,
+  INode,
+  JitHtmlBrowserConfiguration,
+  DebugConfiguration,
+  CustomElement,
+  Constructable,
+  IViewModel,
+} from 'aurelia';
+import { RenderMainArgs } from './types';
+import { generateKnobsFor } from '.';
+
+const host = document.getElementById('root'); // the root iframe provided by storybook
+let previousAurelia: Aurelia;
+export default async function render({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+}: RenderMainArgs) {
+  const element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting an Aurelia component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: `
+        Did you forget to return the Aurelia component from the story?
+        Use "() => ({ template: '<custom-component></custom-component>' })" when defining the story.
+      `,
+    });
+  }
+  showMain();
+
+  if (previousAurelia) {
+    await previousAurelia.stop().wait();
+  }
+
+  previousAurelia = new Aurelia(element.container);
+  if (element.items && element.items.length > 0) {
+    previousAurelia.register(...element.items);
+  } else {
+    previousAurelia.register(JitHtmlBrowserConfiguration, DebugConfiguration);
+  }
+
+  if (element.components && element.components.length > 0) {
+    previousAurelia.container.register(...element.components);
+  }
+
+  const isConstructable = element.state && element.state.prototype;
+  let { template } = element;
+  if (element.customElement) {
+    const def = CustomElement.getDefinition(element.customElement);
+    template = `<${def.name} ${Object.keys(def.bindables)
+      .map((key) => `${def.bindables[key].attribute}.bind="${def.bindables[key].property}" `)
+      .join(' ')}  ></${def.name}>`;
+    previousAurelia.register(element.customElement);
+  }
+
+  let State: Constructable = class {};
+  if (element.state) {
+    State = isConstructable ? element.state : State;
+  } else if (element.customElement) {
+    State = generateKnobsFor(element.customElement);
+  }
+
+  const App = CustomElement.define({ name: 'app', template }, State as Constructable);
+
+  let app: IViewModel<INode>;
+  if ((element.customElement || element.state) && !isConstructable) {
+    app = Object.assign(new App(), element.state || State);
+  }
+
+  await previousAurelia
+    .app({
+      host,
+      component: app || App,
+    })
+    .start()
+    .wait();
+}
diff --git a/app/aurelia/src/client/preview/types.ts b/app/aurelia/src/client/preview/types.ts
new file mode 100644
index 000000000000..9f399b5a9f61
--- /dev/null
+++ b/app/aurelia/src/client/preview/types.ts
@@ -0,0 +1,35 @@
+import { StoryFn } from '@storybook/addons';
+import { IRegistry, IContainer, Constructable } from 'aurelia';
+import { Component } from './decorators';
+
+export interface RenderMainArgs {
+  storyFn: StoryFn<Partial<StoryFnAureliaReturnType>>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  showException: (...args: any[]) => void;
+  forceRender: boolean;
+}
+export interface StoryFnAureliaReturnType {
+  customElement: Constructable;
+  components: Component[] | unknown[];
+  template: unknown;
+  items: IRegistry[];
+  container: IContainer;
+  state: any;
+}
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
diff --git a/app/aurelia/src/demo/button.ts b/app/aurelia/src/demo/button.ts
new file mode 100644
index 000000000000..86cac656b57c
--- /dev/null
+++ b/app/aurelia/src/demo/button.ts
@@ -0,0 +1,28 @@
+import { customElement, bindable } from 'aurelia';
+
+@customElement({
+  name: 'storybook-button-component',
+  template: `
+  <template>
+    <button click.delegate="onClick($event)">\${text}</button>
+    <style>
+    button {
+      border: 1px solid #eee;
+      border-radius: 3px;
+      background-color: #ffffff;
+      cursor: pointer;
+      font-size: 15px;
+      padding: 3px 10px;
+      margin: 10px;
+    }
+    </style>
+    </template>
+  `,
+})
+export default class Button {
+  @bindable()
+  text = '';
+
+  @bindable()
+  onClick: MouseEvent;
+}
diff --git a/app/aurelia/src/demo/index.ts b/app/aurelia/src/demo/index.ts
new file mode 100644
index 000000000000..9463e32d9b59
--- /dev/null
+++ b/app/aurelia/src/demo/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export { default as Welcome } from './welcome';
diff --git a/app/aurelia/src/demo/welcome.ts b/app/aurelia/src/demo/welcome.ts
new file mode 100644
index 000000000000..109911b7de2e
--- /dev/null
+++ b/app/aurelia/src/demo/welcome.ts
@@ -0,0 +1,79 @@
+import { bindable, customElement } from 'aurelia';
+
+@customElement({
+  name: 'storybook-welcome-component',
+  template: `
+    <main>
+      <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
+        <span class="inline-code">src/stories</span> 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 click.delegate="showApp($event)" role="button" tabIndex="0">stories</a> for a component
+        called <span class="inline-code">Button</span> .
+      </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 <span class="inline-code">Button</span> stories located at
+        <span class="inline-code">src/stories/index.js</span>.)
+      </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"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Writing Stories
+        </a>
+        section in our documentation.
+      </p>
+      <p class="note">
+        <b>NOTE:</b> <br />
+        Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
+        webpack loaders and plugins you are using in this project.
+      </p>
+    </main>
+ <style>
+      main {
+        padding: 15px;
+        line-height: 1.4;
+        font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+        background-color: #ffffff;
+      }
+
+      .note {
+        opacity: 0.5;
+      }
+
+      .inline-code {
+        font-size: 15px;
+        font-weight: 600;
+        padding: 2px 5px;
+        border: 1px solid #eae9e9;
+        border-radius: 4px;
+        background-color: #f3f2f2;
+        color: #3a3a3a;
+      }
+
+      a {
+        color: #1474f3;
+        text-decoration: none;
+        border-bottom: 1px solid #1474f3;
+        padding-bottom: 2px;
+      }
+      </style>
+    `,
+})
+export default class Welcome {
+  @bindable()
+  showApp: MouseEvent;
+}
diff --git a/app/aurelia/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/aurelia/src/server/__tests__/create-fork-ts-checker-plugin.test.ts
new file mode 100644
index 000000000000..02d82e734f25
--- /dev/null
+++ b/app/aurelia/src/server/__tests__/create-fork-ts-checker-plugin.test.ts
@@ -0,0 +1,35 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import getTsLoaderOptions from '../ts_config';
+import createForkTsCheckerInstance from '../create-fork-ts-checker-plugin';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs', () => require('../../../../../__mocks__/fs'));
+jest.mock('path', () => ({
+  resolve: () => 'tsconfig.json',
+}));
+jest.mock('@storybook/node-logger');
+
+const setupFiles = (files: any) => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+describe('create-fork-ts-checker-plugin.test', () => {
+  it('should create a ForkTsCheckerWebpackPlugin instance', () => {
+    setupFiles({ 'tsconfig.json': '{}' });
+
+    const tsLoaderOptions = getTsLoaderOptions('.foo');
+
+    // todo resolve any
+    const instance: any = createForkTsCheckerInstance(tsLoaderOptions);
+
+    expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
+    expect(instance.tsconfig).toEqual(tsLoaderOptions.configFile);
+  });
+
+  it('should create a ForkTsCheckerWebpackPlugin instance without passing options', () => {
+    // add proper typing
+    const instance = createForkTsCheckerInstance({} as any);
+    expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
+  });
+});
diff --git a/app/aurelia/src/server/__tests__/ts_config.test.ts b/app/aurelia/src/server/__tests__/ts_config.test.ts
new file mode 100644
index 000000000000..046001787ad8
--- /dev/null
+++ b/app/aurelia/src/server/__tests__/ts_config.test.ts
@@ -0,0 +1,36 @@
+import getTsLoaderOptions from '../ts_config';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs', () => require('../../../../../__mocks__/fs'));
+jest.mock('path', () => ({
+  resolve: () => 'tsconfig.json',
+}));
+jest.mock('@storybook/node-logger');
+
+const setupFiles = (files: any) => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+describe('ts_config', () => {
+  it('should return the config with the path to the tsconfig.json', () => {
+    setupFiles({ 'tsconfig.json': '{}' });
+
+    const config = getTsLoaderOptions('.foo');
+
+    expect(config).toEqual({
+      transpileOnly: true,
+      configFile: 'tsconfig.json',
+    });
+  });
+
+  it('should return object with transpileOnly: true when there is no tsconfig.json', () => {
+    setupFiles({});
+
+    const config = getTsLoaderOptions('.foo');
+
+    expect(config).toEqual({
+      transpileOnly: true,
+    });
+  });
+});
diff --git a/app/ember/src/server/build.js b/app/aurelia/src/server/build.ts
similarity index 100%
rename from app/ember/src/server/build.js
rename to app/aurelia/src/server/build.ts
diff --git a/app/aurelia/src/server/create-fork-ts-checker-plugin.ts b/app/aurelia/src/server/create-fork-ts-checker-plugin.ts
new file mode 100644
index 000000000000..594fe5a25384
--- /dev/null
+++ b/app/aurelia/src/server/create-fork-ts-checker-plugin.ts
@@ -0,0 +1,16 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { logger } from '@storybook/node-logger';
+
+import { Options } from 'ts-loader';
+
+export default function (tsLoaderOptions: Partial<Options>) {
+  if (tsLoaderOptions && tsLoaderOptions.configFile) {
+    return new ForkTsCheckerWebpackPlugin({
+      tsconfig: tsLoaderOptions.configFile,
+      async: false,
+    });
+  }
+
+  logger.info('=> Using default options for ForkTsCheckerWebpackPlugin');
+  return new ForkTsCheckerWebpackPlugin();
+}
diff --git a/app/aurelia/src/server/framework-preset-aurelia.ts b/app/aurelia/src/server/framework-preset-aurelia.ts
new file mode 100644
index 000000000000..13b8f813948b
--- /dev/null
+++ b/app/aurelia/src/server/framework-preset-aurelia.ts
@@ -0,0 +1,50 @@
+import { Configuration } from 'webpack';
+import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
+import getTsLoaderOptions from './ts_config';
+
+export function webpack(
+  config: Configuration,
+  { configDir }: { configDir: string }
+): Configuration {
+  const tsLoaderOptions = getTsLoaderOptions(configDir);
+  return {
+    ...config,
+    resolve: {
+      ...config.resolve,
+      extensions: [...config.resolve.extensions, '.ts', '.js'],
+      modules: [...config.resolve.modules, 'src', 'node_modules'],
+    },
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
+        {
+          test: /\.css$/i,
+          issuer: [{ not: [{ test: /\.html$/i }] }],
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.css$/i,
+          issuer: [{ test: /\.html$/i }],
+          // CSS required in templates cannot be extracted safely
+          // because Aurelia would try to require it again in runtime
+          use: 'css-loader',
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+          issuer: /\.[tj]s$/i,
+        },
+        {
+          test: /\.scss$/,
+          use: ['css-loader', 'sass-loader'],
+          issuer: /\.html?$/i,
+        },
+        { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
+        { test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ },
+      ],
+    },
+    plugins: [...config.plugins, createForkTsCheckerInstance(tsLoaderOptions)],
+  };
+}
diff --git a/app/ember/src/server/index.js b/app/aurelia/src/server/index.ts
similarity index 100%
rename from app/ember/src/server/index.js
rename to app/aurelia/src/server/index.ts
diff --git a/app/aurelia/src/server/options.ts b/app/aurelia/src/server/options.ts
new file mode 100644
index 000000000000..cfb411ee844d
--- /dev/null
+++ b/app/aurelia/src/server/options.ts
@@ -0,0 +1,7 @@
+const packageJson = require('../../package.json');
+
+export default {
+  packageJson,
+  framework: 'aurelia',
+  frameworkPresets: [require.resolve('./framework-preset-aurelia.js')],
+};
diff --git a/app/aurelia/src/server/ts_config.ts b/app/aurelia/src/server/ts_config.ts
new file mode 100644
index 000000000000..e26ab3f056d6
--- /dev/null
+++ b/app/aurelia/src/server/ts_config.ts
@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+import { logger } from '@storybook/node-logger';
+
+function resolveTsConfig(tsConfigPath: string): string | undefined {
+  if (fs.existsSync(tsConfigPath)) {
+    logger.info('=> Found custom tsconfig.json');
+    return tsConfigPath;
+  }
+  return undefined;
+}
+
+export default function (configDir: string) {
+  const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
+  return {
+    transpileOnly: true,
+    configFile: configFilePath || undefined,
+  };
+}
diff --git a/app/polymer/standalone.js b/app/aurelia/standalone.js
similarity index 100%
rename from app/polymer/standalone.js
rename to app/aurelia/standalone.js
diff --git a/app/aurelia/tsconfig.json b/app/aurelia/tsconfig.json
new file mode 100644
index 000000000000..00d522bf81d1
--- /dev/null
+++ b/app/aurelia/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "types": [
+      "webpack-env"
+    ],
+    "rootDir": "./src",
+    "resolveJsonModule": true
+  }
+}
\ No newline at end of file
diff --git a/app/aurelia/typings.d.ts b/app/aurelia/typings.d.ts
new file mode 100644
index 000000000000..690e93343de2
--- /dev/null
+++ b/app/aurelia/typings.d.ts
@@ -0,0 +1,5 @@
+declare module '@storybook/core/*';
+declare module 'global';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;
diff --git a/app/ember/package.json b/app/ember/package.json
index ec0ae48cc166..f46c339b92e8 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
   "bugs": {
@@ -12,13 +12,6 @@
     "directory": "app/ember"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "jsnext:main": "src/client/index.js",
   "bin": {
@@ -26,22 +19,32 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@ember/test-helpers": "^1.5.0",
-    "@storybook/core": "5.3.0-rc.0",
+    "@ember/test-helpers": "^1.7.0",
+    "@storybook/core": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "babel-plugin-ember-modules-api-polyfill": "^2.4.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
-    "ember-source": "^3.4.0"
+    "@babel/core": "*",
+    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
+    "babel-plugin-htmlbars-inline-precompile": "2 || 3",
+    "ember-source": "^3.16.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -49,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/app/ember/src/client/index.js b/app/ember/src/client/index.ts
similarity index 100%
rename from app/ember/src/client/index.js
rename to app/ember/src/client/index.ts
diff --git a/app/ember/src/client/preview/globals.js b/app/ember/src/client/preview/globals.ts
similarity index 100%
rename from app/ember/src/client/preview/globals.js
rename to app/ember/src/client/preview/globals.ts
diff --git a/app/ember/src/client/preview/index.js b/app/ember/src/client/preview/index.js
deleted file mode 100644
index df20b1c1352a..000000000000
--- a/app/ember/src/client/preview/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { start } from '@storybook/core/client';
-
-import './globals';
-import render from './render';
-
-const { configure: coreConfigure, clientApi, forceReRender } = start(render);
-
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
-
-const framework = 'ember';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(...args, framework);
-
-export { forceReRender };
diff --git a/app/ember/src/client/preview/index.ts b/app/ember/src/client/preview/index.ts
new file mode 100644
index 000000000000..1b159f531b64
--- /dev/null
+++ b/app/ember/src/client/preview/index.ts
@@ -0,0 +1,22 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
+
+export const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw,
+} = clientApi;
+
+const framework = 'ember';
+export const storiesOf = (...args: any) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any) => coreConfigure(...args, framework);
+
+export { forceReRender };
diff --git a/app/ember/src/client/preview/render.js b/app/ember/src/client/preview/render.js
deleted file mode 100644
index 05fad4a429cf..000000000000
--- a/app/ember/src/client/preview/render.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint-disable no-undef */
-import { window, document } from 'global';
-import dedent from 'ts-dedent';
-
-const rootEl = document.getElementById('root');
-
-const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
-const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
-  autoboot: false,
-  rootElement: rootEl,
-  ...config.APP,
-});
-
-let lastPromise = app.boot();
-let hasRendered = false;
-
-function render(options, el) {
-  const { template, context = {}, element } = options;
-
-  if (hasRendered) {
-    lastPromise = lastPromise.then(instance => instance.destroy());
-  }
-
-  lastPromise = lastPromise
-    .then(() => {
-      const appInstancePrivate = app.buildInstance();
-      return appInstancePrivate.boot().then(() => appInstancePrivate);
-    })
-    .then(instance => {
-      instance.register(
-        'component:story-mode',
-        Ember.Component.extend({
-          layout: template || options,
-          ...context,
-        })
-      );
-
-      const component = instance.lookup('component:story-mode');
-
-      if (element) {
-        component.appendTo(element);
-
-        element.appendTo(el);
-      } else {
-        component.appendTo(el);
-      }
-      hasRendered = true;
-
-      return instance;
-    });
-}
-
-export default function renderMain({
-  storyFn,
-  selectedKind,
-  selectedStory,
-  showMain,
-  showError,
-  // forceRender,
-}) {
-  const element = storyFn();
-
-  if (!element) {
-    showError({
-      title: `Expecting a Ember element from the story: "${selectedStory}" of "${selectedKind}".`,
-      description: dedent`
-        Did you forget to return the Ember element from the story?
-        Use "() => hbs('{{component}}')" or "() => { return {
-          template: hbs\`{{component}}\`
-        } }" when defining the story.
-      `,
-    });
-    return;
-  }
-
-  showMain();
-  render(element, rootEl);
-}
diff --git a/app/ember/src/client/preview/render.ts b/app/ember/src/client/preview/render.ts
new file mode 100644
index 000000000000..cc86ccb25fe9
--- /dev/null
+++ b/app/ember/src/client/preview/render.ts
@@ -0,0 +1,78 @@
+import { window, document } from 'global';
+import dedent from 'ts-dedent';
+import { RenderContext, ElementArgs, OptionsArgs } from './types';
+
+declare let Ember: any;
+
+const rootEl = document.getElementById('root');
+
+const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
+const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
+  autoboot: false,
+  rootElement: rootEl,
+  ...config.APP,
+});
+
+let lastPromise = app.boot();
+let hasRendered = false;
+let isRendering = false;
+
+function render(options: OptionsArgs, el: ElementArgs) {
+  if (isRendering) return;
+  isRendering = true;
+
+  const { template, context = {}, element } = options;
+
+  if (hasRendered) {
+    lastPromise = lastPromise.then((instance: any) => instance.destroy());
+  }
+
+  lastPromise = lastPromise
+    .then(() => {
+      const appInstancePrivate = app.buildInstance();
+      return appInstancePrivate.boot().then(() => appInstancePrivate);
+    })
+    .then((instance: any) => {
+      instance.register(
+        'component:story-mode',
+        Ember.Component.extend({
+          layout: template || options,
+          ...context,
+        })
+      );
+
+      const component = instance.lookup('component:story-mode');
+
+      if (element) {
+        component.appendTo(element);
+
+        element.appendTo(el);
+      } else {
+        component.appendTo(el);
+      }
+      hasRendered = true;
+      isRendering = false;
+
+      return instance;
+    });
+}
+
+export default function renderMain({ storyFn, kind, name, showMain, showError }: RenderContext) {
+  const element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
+      description: dedent`
+        Did you forget to return the Ember element from the story?
+        Use "() => hbs('{{component}}')" or "() => { return {
+          template: hbs\`{{component}}\`
+        } }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  render(element, rootEl);
+}
diff --git a/app/ember/src/client/preview/types.ts b/app/ember/src/client/preview/types.ts
new file mode 100644
index 000000000000..b8d96b2b7d55
--- /dev/null
+++ b/app/ember/src/client/preview/types.ts
@@ -0,0 +1,16 @@
+export { RenderContext } from '@storybook/core';
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface ElementArgs {
+  el: HTMLElement;
+}
+
+export interface OptionsArgs {
+  template: any;
+  context: any;
+  element: any;
+}
diff --git a/app/polymer/src/server/build.js b/app/ember/src/server/build.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/polymer/src/server/build.js
rename to app/ember/src/server/build.ts
diff --git a/app/ember/src/server/framework-preset-babel-ember.js b/app/ember/src/server/framework-preset-babel-ember.js
deleted file mode 100644
index 10439b8fb7cb..000000000000
--- a/app/ember/src/server/framework-preset-babel-ember.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { precompile } from 'ember-source/dist/ember-template-compiler';
-
-export function babel(config) {
-  const babelConfigPlugins = config.plugins || [];
-
-  const extraPlugins = [
-    [require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
-    [require.resolve('babel-plugin-ember-modules-api-polyfill')],
-  ];
-
-  return {
-    ...config,
-    plugins: [].concat(babelConfigPlugins, extraPlugins),
-  };
-}
diff --git a/app/ember/src/server/framework-preset-babel-ember.ts b/app/ember/src/server/framework-preset-babel-ember.ts
new file mode 100644
index 000000000000..7ba0eea11ab9
--- /dev/null
+++ b/app/ember/src/server/framework-preset-babel-ember.ts
@@ -0,0 +1,26 @@
+import { precompile } from 'ember-source/dist/ember-template-compiler';
+import { Configuration } from 'webpack'; // eslint-disable-line
+
+export function babel(config: Configuration) {
+  const babelConfigPlugins = config.plugins || [];
+
+  const extraPlugins = [
+    [
+      require.resolve('babel-plugin-htmlbars-inline-precompile'),
+      {
+        precompile,
+        modules: {
+          'ember-cli-htmlbars': 'hbs',
+          'ember-cli-htmlbars-inline-precompile': 'default',
+          'htmlbars-inline-precompile': 'default',
+        },
+      },
+    ],
+    [require.resolve('babel-plugin-ember-modules-api-polyfill')],
+  ];
+
+  return {
+    ...config,
+    plugins: [].concat(babelConfigPlugins, extraPlugins),
+  };
+}
diff --git a/app/polymer/src/server/index.js b/app/ember/src/server/index.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/polymer/src/server/index.js
rename to app/ember/src/server/index.ts
diff --git a/app/ember/src/server/options.js b/app/ember/src/server/options.js
deleted file mode 100644
index b5b03fad7e64..000000000000
--- a/app/ember/src/server/options.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import packageJson from '../../package.json';
-
-export default {
-  packageJson,
-  framework: 'ember',
-  frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
-};
diff --git a/app/ember/src/server/options.ts b/app/ember/src/server/options.ts
new file mode 100644
index 000000000000..f268bb9fbde2
--- /dev/null
+++ b/app/ember/src/server/options.ts
@@ -0,0 +1,7 @@
+const packageJson = require('../../package.json');
+
+export default {
+  packageJson,
+  framework: 'ember',
+  frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
+};
diff --git a/app/ember/src/typings.d.ts b/app/ember/src/typings.d.ts
new file mode 100644
index 000000000000..f8360cbb3808
--- /dev/null
+++ b/app/ember/src/typings.d.ts
@@ -0,0 +1,3 @@
+declare module '@storybook/core/*';
+declare module 'ember-source/dist/ember-template-compiler';
+declare module 'global';
diff --git a/app/ember/tsconfig.json b/app/ember/tsconfig.json
new file mode 100644
index 000000000000..94fbbf981593
--- /dev/null
+++ b/app/ember/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*", "package.json"],
+  "exclude": ["src/**/*.test.*"]
+}
\ No newline at end of file
diff --git a/app/html/package.json b/app/html/package.json
index 0f31b1b6c968..b16b46f116a1 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/html"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,21 +22,31 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@types/webpack-env": "^1.13.9",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@types/webpack-env": "^1.15.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
+    "html-loader": "^1.0.0",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0"
+    "@babel/core": "*",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -51,5 +54,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/html/src/client/preview/render.ts b/app/html/src/client/preview/render.ts
index 103ecf65bf5b..a885d4d9ad96 100644
--- a/app/html/src/client/preview/render.ts
+++ b/app/html/src/client/preview/render.ts
@@ -1,17 +1,17 @@
 import { document, Node } from 'global';
 import dedent from 'ts-dedent';
-import { RenderMainArgs } from './types';
+import { RenderContext } from './types';
 
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain,
   showError,
   forceRender,
-}: RenderMainArgs) {
+}: RenderContext) {
   const element = storyFn();
 
   showMain();
@@ -27,7 +27,7 @@ export default function renderMain({
     rootElement.appendChild(element);
   } else {
     showError({
-      title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
diff --git a/app/html/src/client/preview/types.ts b/app/html/src/client/preview/types.ts
index 36432e1a4558..d12d2266fbaf 100644
--- a/app/html/src/client/preview/types.ts
+++ b/app/html/src/client/preview/types.ts
@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/addons';
+export { RenderContext } from '@storybook/core';
 
 export type StoryFnHtmlReturnType = string | Node;
 
@@ -16,12 +16,3 @@ export interface ShowErrorArgs {
   title: string;
   description: string;
 }
-
-export interface RenderMainArgs {
-  storyFn: () => StoryFn<StoryFnHtmlReturnType>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  forceRender: boolean;
-}
diff --git a/app/html/src/server/options.ts b/app/html/src/server/options.ts
index 1d349ea837db..33d4bf3928ea 100644
--- a/app/html/src/server/options.ts
+++ b/app/html/src/server/options.ts
@@ -1,4 +1,3 @@
-// tslint:disable-next-line: no-var-requires
 const packageJson = require('../../package.json');
 
 export default {
diff --git a/app/marionette/README.md b/app/marionette/README.md
new file mode 100644
index 000000000000..fffc49bd35d5
--- /dev/null
+++ b/app/marionette/README.md
@@ -0,0 +1,25 @@
+# Storybook for Marionette.js 
+
+---
+
+Storybook for Marionette.js is a UI development environment for your Marionette.js components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-app
+npx -p @storybook/cli sb init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
\ No newline at end of file
diff --git a/app/marionette/bin/build.js b/app/marionette/bin/build.js
new file mode 100755
index 000000000000..26142ec0af29
--- /dev/null
+++ b/app/marionette/bin/build.js
@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');
diff --git a/app/react-native-server/bin/index.js b/app/marionette/bin/index.js
similarity index 100%
rename from app/react-native-server/bin/index.js
rename to app/marionette/bin/index.js
diff --git a/app/marionette/package.json b/app/marionette/package.json
new file mode 100644
index 000000000000..1457920afc10
--- /dev/null
+++ b/app/marionette/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@storybook/marionette",
+  "version": "6.0.0-beta.21",
+  "description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/marionette",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/marionette"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "6.0.0-beta.21",
+    "common-tags": "^1.8.0",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "html-loader": "^1.0.0",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "backbone.marionette": "*"
+  },
+  "peerDependencies": {
+    "@babel/core": "*",
+    "backbone": "*",
+    "backbone.marionette": "*",
+    "react": "*",
+    "react-dom": "*",
+    "underscore": "*"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/app/marionette/src/client/index.js b/app/marionette/src/client/index.js
new file mode 100644
index 000000000000..c3f87077b852
--- /dev/null
+++ b/app/marionette/src/client/index.js
@@ -0,0 +1,15 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+  load,
+} from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
diff --git a/app/marionette/src/client/preview/element_check.js b/app/marionette/src/client/preview/element_check.js
new file mode 100644
index 000000000000..61d71cc68d4b
--- /dev/null
+++ b/app/marionette/src/client/preview/element_check.js
@@ -0,0 +1,20 @@
+import Marionette from 'backbone.marionette';
+
+const allMarionetteViewConstructors = [
+  'View',
+  'CompositeView',
+  'CollectionView',
+  'NextCollectionView',
+];
+const viewConstructorsSupportedByMarionette = allMarionetteViewConstructors
+  .filter((constructorName) => constructorName in Marionette)
+  .map((constructorName) => Marionette[constructorName]);
+
+// accepts an element and return true if renderable else return false
+const isMarionetteRenderable = (element) => {
+  return viewConstructorsSupportedByMarionette.find(
+    (Constructor) => element instanceof Constructor
+  );
+};
+
+export default isMarionetteRenderable;
diff --git a/app/marionette/src/client/preview/globals.js b/app/marionette/src/client/preview/globals.js
new file mode 100644
index 000000000000..168d2f7c49ac
--- /dev/null
+++ b/app/marionette/src/client/preview/globals.js
@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'marionette';
diff --git a/app/marionette/src/client/preview/index.js b/app/marionette/src/client/preview/index.js
new file mode 100644
index 000000000000..0128a027102c
--- /dev/null
+++ b/app/marionette/src/client/preview/index.js
@@ -0,0 +1,22 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw,
+} = clientApi;
+
+const framework = 'marionette';
+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/marionette/src/client/preview/render.js b/app/marionette/src/client/preview/render.js
new file mode 100644
index 000000000000..c236aa3b4cfc
--- /dev/null
+++ b/app/marionette/src/client/preview/render.js
@@ -0,0 +1,40 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+import Marionette from 'backbone.marionette';
+import isMarionetteRenderable from './element_check';
+
+const rootEl = document.getElementById('root');
+const rootRegion = new Marionette.Region({ el: rootEl });
+
+function render(view) {
+  rootRegion.show(view);
+}
+
+export default function renderMain({ storyFn, kind, name, showMain, showError }) {
+  const element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Marionette View from the story: "${name}" of "${kind}".`,
+      description: stripIndents`
+        Did you forget to return the React element from the story?
+        Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  if (!isMarionetteRenderable(element)) {
+    showError({
+      title: `Expecting a valid Marionette View from the story: "${name}" of "${kind}".`,
+      description: stripIndents`
+        Seems like you are not returning a correct Marionette View from the story.
+        Could you double check that?
+      `,
+    });
+    return;
+  }
+
+  render(element);
+  showMain();
+}
diff --git a/app/marionette/src/server/build.js b/app/marionette/src/server/build.js
new file mode 100755
index 000000000000..d8abf06a4396
--- /dev/null
+++ b/app/marionette/src/server/build.js
@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);
diff --git a/app/marionette/src/server/framework-preset-marionette.js b/app/marionette/src/server/framework-preset-marionette.js
new file mode 100644
index 000000000000..df8a5ec614e1
--- /dev/null
+++ b/app/marionette/src/server/framework-preset-marionette.js
@@ -0,0 +1,3 @@
+export function webpack(config) {
+  return config;
+}
diff --git a/app/marionette/src/server/index.js b/app/marionette/src/server/index.js
new file mode 100755
index 000000000000..774d96025a84
--- /dev/null
+++ b/app/marionette/src/server/index.js
@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);
diff --git a/app/marionette/src/server/options.js b/app/marionette/src/server/options.js
new file mode 100644
index 000000000000..a1ea7a38f6d8
--- /dev/null
+++ b/app/marionette/src/server/options.js
@@ -0,0 +1,6 @@
+import packageJson from '../../package.json';
+
+export default {
+  packageJson,
+  frameworkPresets: [require.resolve('./framework-preset-marionette.js')],
+};
diff --git a/app/marionette/standalone.js b/app/marionette/standalone.js
new file mode 100644
index 000000000000..1b1febe0d3bb
--- /dev/null
+++ b/app/marionette/standalone.js
@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;
diff --git a/app/marko/package.json b/app/marko/package.json
index 282a5f047aec..fd920f6e07e6 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,34 +15,38 @@
     "directory": "app/marko"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@marko/webpack": "^2.0.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
+    "@marko/webpack": "^2.1.0",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "marko": "^4.15.2"
+    "@babel/core": "*",
+    "marko": "^4.15.2",
+    "react": "*",
+    "react-dom": "*",
+    "webpack": "^4"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -50,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/app/marko/src/client/preview/render.js b/app/marko/src/client/preview/render.js
index 688359beaacb..f314429c8384 100644
--- a/app/marko/src/client/preview/render.js
+++ b/app/marko/src/client/preview/render.js
@@ -6,21 +6,24 @@ import { logger } from '@storybook/client-logger';
 const rootEl = document.getElementById('root');
 let activeComponent = null; // currently loaded marko component.
 let activeTemplate = null; // template for the currently loaded component.
+let activeStoryFn = null; // used to determine if we've switched stories.
 
 export default function renderMain({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain,
   showError,
   parameters,
   // forceRender,
 }) {
+  const isSameStory = activeStoryFn === storyFn;
   const config = storyFn();
+  activeStoryFn = storyFn;
 
   if (!config || !(config.appendTo || config.component || parameters.component)) {
     showError({
-      title: `Expecting an object with a component property to be returned from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting an object with a component property to be returned from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the component from the story?
         Use "() => ({ component: MyComponent, input: { hello: 'world' } })" when defining the story.
@@ -43,7 +46,7 @@ export default function renderMain({
   } else {
     const template = config.component || parameters.component;
 
-    if (activeTemplate === template) {
+    if (isSameStory && activeTemplate === template) {
       // When rendering the same template with new input, we reuse the same instance.
       activeComponent.input = config.input;
       activeComponent.update();
@@ -53,10 +56,7 @@ export default function renderMain({
       }
 
       activeTemplate = template;
-      activeComponent = activeTemplate
-        .renderSync(config.input)
-        .appendTo(rootEl)
-        .getComponent();
+      activeComponent = activeTemplate.renderSync(config.input).appendTo(rootEl).getComponent();
     }
   }
 
diff --git a/app/marko/src/demo/Welcome.marko b/app/marko/src/demo/Welcome.marko
index cd0daa81798b..4580889dd3b4 100644
--- a/app/marko/src/demo/Welcome.marko
+++ b/app/marko/src/demo/Welcome.marko
@@ -28,5 +28,5 @@ a {
 </style>
 
 <div id="app">
-  <h1>Welcome to Storybook for Marko</h1>
+  <h1>Welcome to storybook</h1>
 </div>
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 208449fe5c91..11b664752398 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/mithril"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,26 +22,37 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
     "@types/mithril": "^2.0.0",
+    "@types/webpack-env": "^1.15.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
     "mithril": "^1.1.6"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "mithril": "^1.1.6"
+    "@babel/core": "*",
+    "mithril": "^1.1.6",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -56,5 +60,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/mithril/src/client/preview/render.ts b/app/mithril/src/client/preview/render.ts
index a368489d5055..285e68a387b9 100644
--- a/app/mithril/src/client/preview/render.ts
+++ b/app/mithril/src/client/preview/render.ts
@@ -4,22 +4,16 @@ import { document } from 'global';
 import m from 'mithril';
 import dedent from 'ts-dedent';
 
-import { RenderMainArgs } from './types';
+import { RenderContext } from './types';
 
 const rootEl = document.getElementById('root');
 
-export default function renderMain({
-  storyFn,
-  selectedKind,
-  selectedStory,
-  showMain,
-  showError,
-}: RenderMainArgs) {
+export default function renderMain({ storyFn, kind, name, showMain, showError }: RenderContext) {
   const element = storyFn();
 
   if (!element) {
     const error = {
-      title: `Expecting a Mithril element from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a Mithril element from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the Mithril element from the story?
         Use "() => MyComp" or "() => { return MyComp; }" when defining the story.
diff --git a/app/mithril/src/client/preview/types.ts b/app/mithril/src/client/preview/types.ts
index c9755ab82eb0..2e49c6bb73af 100644
--- a/app/mithril/src/client/preview/types.ts
+++ b/app/mithril/src/client/preview/types.ts
@@ -1,5 +1,7 @@
 import m from 'mithril';
 
+export { RenderContext } from '@storybook/core';
+
 export interface IStorybookStory {
   name: string;
   render: () => any;
@@ -16,13 +18,3 @@ export interface ShowErrorArgs {
   title: string;
   description: string;
 }
-
-export interface RenderMainArgs {
-  storyFn: () => StoryFnMithrilReturnType;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  showException: (err: Error) => void;
-  forceRender: boolean;
-}
diff --git a/app/polymer/README.md b/app/polymer/README.md
deleted file mode 100644
index d2b25e666537..000000000000
--- a/app/polymer/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Storybook for Polymer
-
-Storybook for polymer is a UI development environment for your Polymer components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-> Storybook for Polymer is at the **EXPERIMENTAL** stage!
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-polymer-app
-npx -p @storybook/cli sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
----
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
-
-## Polymer Notes
-
-- This is super super experimental, if you want to use this, expect some bugs, and missing features.
-- We're looking for help to support this. If you're a member of the Polymer community and like this project, please help us!
-  If you need any onboarding from us, we're happy to help you in any way!
diff --git a/app/polymer/package.json b/app/polymer/package.json
deleted file mode 100644
index 0b8d95d2b478..000000000000
--- a/app/polymer/package.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "name": "@storybook/polymer",
-  "version": "5.3.0-rc.0",
-  "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/polymer",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/polymer"
-  },
-  "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/client/index.js",
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/core": "5.3.0-rc.0",
-    "@webcomponents/webcomponentsjs": "^1.2.0",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0",
-    "webpack": "^4.33.0"
-  },
-  "devDependencies": {
-    "lit-html": "^1.0.0",
-    "polymer-webpack-loader": "^2.0.3"
-  },
-  "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "lit-html": "^1.0.0",
-    "polymer-webpack-loader": "^2.0.2"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/app/polymer/src/client/preview/globals.js b/app/polymer/src/client/preview/globals.js
deleted file mode 100644
index ddb4205926a8..000000000000
--- a/app/polymer/src/client/preview/globals.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@webcomponents/webcomponentsjs/webcomponents-lite';
-import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
-
-import { window } from 'global';
-
-window.STORYBOOK_ENV = 'polymer';
diff --git a/app/polymer/src/client/preview/index.js b/app/polymer/src/client/preview/index.js
deleted file mode 100644
index 8ccdb4865d0b..000000000000
--- a/app/polymer/src/client/preview/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { start } from '@storybook/core/client';
-
-import './globals';
-import render from './render';
-
-const { configure: coreConfigure, clientApi, forceReRender } = start(render);
-
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
-
-const framework = 'polymer';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(...args, framework);
-
-export { forceReRender };
diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js
deleted file mode 100644
index b691510f0354..000000000000
--- a/app/polymer/src/client/preview/render.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { document } from 'global';
-import dedent from 'ts-dedent';
-import { render, TemplateResult } from 'lit-html';
-
-const rootElement = document.getElementById('root');
-
-export default function renderMain({
-  storyFn,
-  selectedKind,
-  selectedStory,
-  showMain,
-  showError,
-  forceRender,
-}) {
-  const element = storyFn();
-
-  if (!element) {
-    showError({
-      title: `Expecting a Polymer component from the story: "${selectedStory}" of "${selectedKind}".`,
-      description: dedent`
-        Did you forget to return the Polymer component from the story?
-        Use "() => '&lt;your-component-name&gt;&lt;/your-component-name\&gt;'" when defining the story.
-      `,
-    });
-    return;
-  }
-
-  showMain();
-  if (typeof element === 'string') {
-    rootElement.innerHTML = element;
-  } else if (element instanceof TemplateResult) {
-    // `render` stores the TemplateInstance in the Node and tries to update based on that.
-    // Since we reuse `rootElement` for all stories, remove the stored instance first.
-    // But forceRender means that it's the same story, so we want too keep the state in that case.
-    if (!forceRender || !rootElement.querySelector('[id="root-inner"]')) {
-      rootElement.innerHTML = '<div id="root-inner"></div>';
-    }
-    const renderTo = rootElement.querySelector('[id="root-inner"]');
-
-    render(element, renderTo);
-  } else {
-    rootElement.innerHTML = '';
-    rootElement.appendChild(element);
-  }
-}
diff --git a/app/polymer/src/server/framework-preset-polymer.js b/app/polymer/src/server/framework-preset-polymer.js
deleted file mode 100644
index c1c615b7d114..000000000000
--- a/app/polymer/src/server/framework-preset-polymer.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { IgnorePlugin } from 'webpack';
-
-export function webpack(config) {
-  return {
-    ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules,
-        {
-          test: /\.html$/,
-          use: [
-            ...config.module.rules[0].use,
-            {
-              loader: require.resolve('polymer-webpack-loader'),
-              options: { processStyleLinks: true },
-            },
-          ],
-        },
-      ],
-    },
-    plugins: [
-      ...config.plugins,
-      // See https://github.com/webcomponents/webcomponentsjs/issues/794#issuecomment-386554298
-      new IgnorePlugin(/^vertx$/),
-    ],
-  };
-}
diff --git a/app/polymer/src/server/options.js b/app/polymer/src/server/options.js
deleted file mode 100644
index 7d832b7cebcc..000000000000
--- a/app/polymer/src/server/options.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import packageJson from '../../package.json';
-
-export default {
-  packageJson,
-  framework: 'polymer',
-  frameworkPresets: [require.resolve('./framework-preset-polymer.js')],
-};
diff --git a/app/preact/package.json b/app/preact/package.json
index fe3ce9e4202c..cacb51f75522 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/preact"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,26 +22,35 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@types/webpack-env": "^1.13.9",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@types/webpack-env": "^1.15.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "preact": "^8.4.2"
+    "preact": "^10.4.0"
   },
   "peerDependencies": {
-    "@babel/core": "7.0.1",
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "preact": "^8.4.2"
+    "@babel/core": "*",
+    "preact": "^10.0.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -56,5 +58,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/preact/src/client/preview/render.tsx b/app/preact/src/client/preview/render.tsx
index c9ff924f4ef6..693b5451270e 100644
--- a/app/preact/src/client/preview/render.tsx
+++ b/app/preact/src/client/preview/render.tsx
@@ -1,23 +1,16 @@
 import { h, render } from 'preact';
 import { document } from 'global';
 import dedent from 'ts-dedent';
-import { RenderMainArgs } from './types';
+import { RenderContext } from './types';
 
-let renderedStory: Element;
 const rootElement = document ? document.getElementById('root') : null;
 
-export default function renderMain({
-  storyFn,
-  selectedKind,
-  selectedStory,
-  showMain,
-  showError,
-}: RenderMainArgs) {
+export default function renderMain({ storyFn, kind, name, showMain, showError }: RenderContext) {
   const element = storyFn();
 
   if (!element) {
     showError({
-      title: `Expecting a Preact element from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a Preact element from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the Preact element from the story?
         Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
@@ -26,9 +19,9 @@ export default function renderMain({
     return;
   }
 
-  render(null, rootElement, renderedStory);
+  render(null, rootElement);
 
   showMain();
 
-  renderedStory = render(element, rootElement);
+  render(element, rootElement);
 }
diff --git a/app/preact/src/client/preview/types.ts b/app/preact/src/client/preview/types.ts
index d961b76f5c5b..4ba69cc4e252 100644
--- a/app/preact/src/client/preview/types.ts
+++ b/app/preact/src/client/preview/types.ts
@@ -1,4 +1,6 @@
-import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+
+export { RenderContext } from '@storybook/core';
 
 export type StoryFnPreactReturnType = string | Node | preact.JSX.Element;
 
@@ -7,15 +9,6 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface RenderMainArgs {
-  storyFn: () => StoryFn<StoryFnPreactReturnType>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  forceRender: boolean;
-}
-
 export interface IStorybookStory {
   name: string;
   render: () => any;
diff --git a/app/rax/package.json b/app/rax/package.json
index 387eaca19a37..1c2c2da840ca 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/rax",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Rax: Develop Rax Component in isolation.",
   "keywords": [
     "rax",
@@ -16,40 +16,43 @@
     "directory": "app/rax"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.3.0-rc.0",
+    "@storybook/core": "6.0.0-beta.21",
     "babel-preset-rax": "^1.0.0-beta.0",
     "core-js": "^3.0.1",
     "driver-dom": "^2.0.0",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
     "rax": "^1.1.0"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "rax": "^0.4.0 || ^1.0.0"
+    "@babel/core": "*",
+    "rax": "^0.4.0 || ^1.0.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/app/rax/src/client/preview/render.js b/app/rax/src/client/preview/render.js
index 2652c257aed9..fc1b4c93f8f7 100644
--- a/app/rax/src/client/preview/render.js
+++ b/app/rax/src/client/preview/render.js
@@ -8,8 +8,8 @@ const rootElement = document ? document.getElementById('root') : null;
 
 export default function renderMain({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain,
   showError,
   // forceRender,
@@ -18,7 +18,7 @@ export default function renderMain({
 
   if (!Element) {
     showError({
-      title: `Expecting a Rax element from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a Rax element from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the Rax element from the story?
         Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
deleted file mode 100644
index e58feefd74d4..000000000000
--- a/app/react-native-server/package.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "name": "@storybook/react-native-server",
-  "version": "5.3.0-rc.0",
-  "description": "A better way to develop React Native Components for your app",
-  "keywords": [
-    "react",
-    "react-native",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/react-native-server",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git"
-  },
-  "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "bin": {
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/channel-websocket": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/ui": "5.3.0-rc.0",
-    "commander": "^4.0.1",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "react": "^16.6.0",
-    "react-dom": "^16.8.3",
-    "uuid": "^3.3.2",
-    "webpack": "^4.33.0",
-    "ws": "^7.1.2"
-  },
-  "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/app/react-native-server/readme.md b/app/react-native-server/readme.md
deleted file mode 100644
index 2a1c211e808e..000000000000
--- a/app/react-native-server/readme.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Storybook Server for React Native
-Additional package for @storybook/react-native to support a web server and browser UI that runs alongside the RN on-device UI
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Usage
-After setting up Storybook for React Native install this package. 
-
-```shell
-npm install --save-dev @storybook/react-native-server
-```
-
-Then run `npx storybook start`
diff --git a/app/react-native-server/src/client/manager/components/PreviewHelp.js b/app/react-native-server/src/client/manager/components/PreviewHelp.js
deleted file mode 100644
index 40b37bd11d1e..000000000000
--- a/app/react-native-server/src/client/manager/components/PreviewHelp.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-
-const styles = {
-  main: {
-    margin: 15,
-    maxWidth: 600,
-    lineHeight: 1.4,
-    fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-  },
-
-  code: {
-    fontSize: 15,
-    fontWeight: 600,
-    padding: '2px 5px',
-    border: '1px solid #eae9e9',
-    borderRadius: 4,
-    backgroundColor: '#f3f2f2',
-    color: '#3a3a3a',
-  },
-
-  codeBlock: {
-    backgroundColor: '#f3f2f2',
-    padding: '1px 10px',
-    margin: '10px 0',
-  },
-};
-
-const PreviewHelp = () => (
-  <div style={styles.main}>
-    <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 {<span style={styles.code}>storybook/stories</span>}{' '}
-      directory. A story is a single state of one or more UI components. You can have as many
-      stories as you want. Basically a story is like a visual test case.
-    </p>
-    <p>
-      To see your Storybook stories on the device, you should start your mobile app for the&nbsp;
-      <span style={styles.code}>&lt;platform&gt;</span> of your choice (typically ios or android).
-      (Note that due to an implementation detail, your stories will only show up in the left-pane
-      after your device has connected to this storybook server.)
-    </p>
-    <p>
-      For <span style={styles.code}>create-react-native-app</span> apps:
-    </p>
-    <div style={styles.codeBlock}>
-      <pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
-    </div>
-    <p>
-      For <span style={styles.code}>react-native init</span> apps:
-    </p>
-    <div style={styles.codeBlock}>
-      <pre style={styles.instructionsCode}>react-native run-&lt;platform&gt;</pre>
-    </div>
-  </div>
-);
-
-export { PreviewHelp as default };
diff --git a/app/react-native-server/src/client/manager/index.js b/app/react-native-server/src/client/manager/index.js
deleted file mode 100644
index 75acecbeb656..000000000000
--- a/app/react-native-server/src/client/manager/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* global storybookOptions */
-import { location, document } from 'global';
-import renderStorybookUI from '@storybook/ui';
-import Provider from './provider';
-
-const rootEl = document.getElementById('root');
-renderStorybookUI(rootEl, new Provider({ url: location.host, options: storybookOptions }));
diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js
deleted file mode 100644
index 4d54264b5de3..000000000000
--- a/app/react-native-server/src/client/manager/provider.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Consumer } from '@storybook/api';
-import { Provider } from '@storybook/ui';
-import createChannel from '@storybook/channel-websocket';
-import addons from '@storybook/addons';
-import Events from '@storybook/core-events';
-import uuid from 'uuid';
-import PreviewHelp from './components/PreviewHelp';
-
-const mapper = ({ state, api }) => ({
-  api,
-  storiesHash: state.storiesHash,
-  storyId: state.storyId,
-  viewMode: state.viewMode,
-});
-
-export default class ReactProvider extends Provider {
-  constructor({ url: domain, options }) {
-    super();
-
-    const { secured, host, port } = options;
-    const websocketType = secured ? 'wss' : 'ws';
-    let url = `${websocketType}://${domain}`;
-
-    if (options.manualId) {
-      this.pairedId = uuid();
-      url += `/pairedId=${this.pairedId}`;
-    }
-
-    const channel = this.channel || createChannel({ url });
-
-    addons.setChannel(channel);
-    channel.emit(Events.CHANNEL_CREATED, {
-      host,
-      pairedId: this.pairedId,
-      port,
-      secured,
-    });
-
-    this.addons = addons;
-    this.channel = channel;
-    this.options = options;
-  }
-
-  getElements(type) {
-    return addons.getElements(type);
-  }
-
-  getConfig() {
-    return this.addons.getConfig();
-  }
-
-  renderPreview() {
-    return (
-      <Consumer filter={mapper} pure>
-        {({ storiesHash, storyId, api, viewMode }) => {
-          if (storiesHash[storyId]) {
-            api.emit(Events.SET_CURRENT_STORY, { storyId });
-          }
-          return viewMode === 'story' ? <PreviewHelp /> : null;
-        }}
-      </Consumer>
-    );
-  }
-
-  handleAPI(api) {
-    addons.loadAddons(api);
-    api.emit(Events.GET_STORIES);
-  }
-}
diff --git a/app/react-native-server/src/server/cli.js b/app/react-native-server/src/server/cli.js
deleted file mode 100644
index 4f7a538ad603..000000000000
--- a/app/react-native-server/src/server/cli.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import path from 'path';
-import program from 'commander';
-
-export function parseList(str) {
-  return str.split(',');
-}
-
-function getCli() {
-  program
-    .option('-h, --host <host>', 'host to listen on', 'localhost')
-    .option('-p, --port <port>', 'port to listen on', str => parseInt(str, 10), 7007)
-    .option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
-    .option('-i, --manual-id', 'allow multiple users to work with same storybook')
-    .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
-    .option(
-      '--https',
-      'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
-    )
-    .option(
-      '--ssl-ca <ca>',
-      'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
-      parseList
-    )
-    .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
-    .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
-    .option('--smoke-test', 'Exit after successful start')
-    .option('--ci', "CI mode (skip interactive prompts, don't open browser")
-    .option('--quiet', 'Suppress verbose build output')
-    .parse(process.argv);
-
-  const configDir = path.resolve(program.configDir || './storybook');
-
-  return {
-    ...program,
-    configDir,
-  };
-}
-
-export default getCli;
diff --git a/app/react-native-server/src/server/index.js b/app/react-native-server/src/server/index.js
deleted file mode 100755
index 7fca2b694fde..000000000000
--- a/app/react-native-server/src/server/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-#!/usr/bin/env node
-
-import querystring from 'querystring';
-import ws from 'ws';
-import storybook from '@storybook/core/standalone';
-
-import extendOptions from './options';
-import getCli from './cli';
-
-export default class Server {
-  constructor(options) {
-    this.attachWS = this.attachWS.bind(this);
-    this.options = extendOptions(options, this.attachWS);
-  }
-
-  start() {
-    return storybook(this.options);
-  }
-
-  attachWS(server) {
-    this.wsServer = new ws.Server({ server });
-    this.wsServer.on('connection', (s, req) => this.handleWS(s, req));
-  }
-
-  handleWS(socket, req) {
-    if (this.options.manualId) {
-      const params = req.url ? querystring.parse(req.url.substr(1)) : {};
-
-      if (params.pairedId) {
-        socket.pairedId = params.pairedId; // eslint-disable-line
-      }
-    }
-
-    socket.on('message', data => {
-      this.wsServer.clients.forEach(c => {
-        if (!this.options.manualId || (socket.pairedId && socket.pairedId === c.pairedId)) {
-          c.send(data);
-        }
-      });
-    });
-  }
-}
-
-const server = new Server(getCli());
-server.start();
diff --git a/app/react-native-server/src/server/options.js b/app/react-native-server/src/server/options.js
deleted file mode 100644
index 873b3caab164..000000000000
--- a/app/react-native-server/src/server/options.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { managerPreset } from '@storybook/core/server';
-import packageJson from '../../package.json';
-
-function extendOptions(options, extendServer) {
-  const { manualId, https: secured, host, port } = options;
-  const storybookOptions = { manualId, secured, host, port };
-
-  return {
-    ...options,
-    framework: 'react-native',
-    extendServer,
-    packageJson,
-    mode: 'dev',
-    ignorePreview: true,
-    corePresets: [
-      {
-        name: managerPreset,
-        options: { managerEntry: require.resolve('../client/manager') },
-      },
-      {
-        name: require.resolve('./rn-options-preset.js'),
-        options: { storybookOptions },
-      },
-    ],
-  };
-}
-
-export default extendOptions;
diff --git a/app/react-native-server/src/server/rn-options-preset.js b/app/react-native-server/src/server/rn-options-preset.js
deleted file mode 100644
index 095342d722e4..000000000000
--- a/app/react-native-server/src/server/rn-options-preset.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import webpack from 'webpack';
-
-export async function managerWebpack(config, options) {
-  const { storybookOptions } = options;
-
-  return {
-    ...config,
-    plugins: [
-      ...config.plugins,
-      new webpack.DefinePlugin({
-        storybookOptions: JSON.stringify(storybookOptions),
-      }),
-    ],
-  };
-}
diff --git a/app/react-native/docs/addons.md b/app/react-native/docs/addons.md
deleted file mode 100644
index 543ae31bc5b7..000000000000
--- a/app/react-native/docs/addons.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Addons
-
-Storybook supports addons. You can read more about them [here](https://storybook.js.org/addons/introduction/)
-
-There is one big difference in React Native is that it has two types of addons: Addons that work in the browser
-and addons that work on the app itself (on device addons).
-
-## Browser addons
-Browser addons are default addons to storybook. You create a file called addons.js inside storybook and it is
-automatically added inside your browser.
-
-## On device addons
-On device addons are addons that are displayed in your app in addons panel.
-To use them you have to create a file called `rn-addons.js` next to your storybook entry.
-Because React Native does not dynamically resolve imports, you also have to manually import them.
-Example:
-**storybook/index.js**
-```
-import { getStorybookUI, configure } from '@storybook/react-native';
-import './rn-addons';
-// import stories
-configure(() => {
-  require($PATH_TO_STORIES);
-}, module);
-
-const StorybookUI = getStorybookUI();
-export default StorybookUI;
-```
-
-**storybook/rn-addons.js**
-```
-import '@storybook/addon-ondevice-knobs/register';
-import '@storybook/addon-ondevice-notes/register';
-...
-```
-
-This step is done automatically when you install Storybook for the first time and also described in [Manual Setup](https://github.com/storybookjs/storybook/blob/master/app/react-native/docs/manual-setup.md)
-
-## Compatibility
-Addon compatibility can be found [here](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-## Performance of on device addons
-Because on device addons are inside the app, they are also rerendered on every change. This can reduce performance a lot.
- 
-## Writing the on device addons
-On device addons use same addon store and api as web addons. The only difference in api is that you don't have `api` prop 
-and have to rely on channel for everything. 
-
-The main difference between browser and app addons is that the render has to be supported by React Native (View, Text).
-For more info about writing addons read [writing addons](https://storybook.js.org/addons/writing-addons/) section in 
-storybook documentation.  
diff --git a/app/react-native/docs/assets/readme/screenshot.png b/app/react-native/docs/assets/readme/screenshot.png
deleted file mode 100644
index 2097cf3c2603..000000000000
Binary files a/app/react-native/docs/assets/readme/screenshot.png and /dev/null differ
diff --git a/app/react-native/docs/manual-setup.md b/app/react-native/docs/manual-setup.md
deleted file mode 100644
index 4fb5be1480c7..000000000000
--- a/app/react-native/docs/manual-setup.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# Manual Setup
-
-First, install the `@storybook/react-native` module
-
-```sh
-yarn add @storybook/react-native --dev
-```
-
-Create a new directory called `storybook` in your project root and create an entry file (index.js) as given below.
-(Don't forget to replace "MyApplicationName" with your app name).
-
-**storybook/index.js**
-```js
-import { AppRegistry } from 'react-native';
-import { getStorybookUI, configure } from '@storybook/react-native';
-import './rn-addons';
-
-// import stories
-configure(() => {
-  // eslint-disable-next-line global-require
-  require('./stories');
-}, module);
-
-const StorybookUIRoot = getStorybookUI();
-
-AppRegistry.registerComponent('MyApplicationName', () => StorybookUIRoot);
-export default StorybookUIRoot;
-```
-
-Create a file called `rn-addons.js`
-In this file you can import on device addons.
-
-**storybook/rn-addons.js**
-```
-import '@storybook/addon-ondevice-knobs/register';
-import '@storybook/addon-ondevice-notes/register';
-...
-```
-
-
-Then write your first story in the `stories` directory like this:
-
-```js
-import { storiesOf } from '@storybook/react-native';
-import React from 'react';
-import { View, Text } from 'react-native';
-
-const style = {
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: '#F5FCFF'
-};
-const CenteredView = ({ children }) => (
-  <View style={style}>
-    {children}
-  </View>
-);
-
-storiesOf('CenteredView', module)
-  .add('default view', () => (
-    <CenteredView>
-      <Text>Hello Storybook</Text>
-    </CenteredView>
-  ));
-```
-
-Finally replace your app entry with
-```js
-import './storybook';
-```
-
-For example, if your entry app is named App.js/index.js (Expo/Vanilla). You can replace it with the following.
-
-```
-import StorybookUI from './storybook';
-
-export default StorybookUI;
-```
-
-If you cannot replace your entry point, make sure that the component exported from `./storybook` is displayed
-somewhere in your app. `StorybookUI` is a RN `View` component that can be embedded anywhere in your 
-RN application, e.g. on a tab or within an admin screen.
-
-## Server support
-
-If you want to support having a storybook server running install storybook server `npm install --save-dev @storybook/react-native-server`
-and add following NPM script into your `package.json` file:
-
-```json
-{
-  "scripts": {
-    "storybook": "storybook start"
-  }
-}
-```
-
-If you want to have addons inside browser, create a file named `addons.js` file in `storybook`. Here is a list of default addons:
-
-**storybook/addons.js**
-```js
-import '@storybook/addon-actions';
-import '@storybook/addon-links';
-```
-
diff --git a/app/react-native/docs/server.md b/app/react-native/docs/server.md
deleted file mode 100644
index fe4c53636024..000000000000
--- a/app/react-native/docs/server.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Storybook server
-Since storybook v5 the storybook server is a standalone package. To keep using storybook server make sure to install @storybook/react-native-server package.
-
-## Benefits of storybook server
-
-* ### Websockets connection
-The main benefit you get from running storybook server is that your app will be listening for websockets connection.
-That means that you can create your own tools that integrate with your storybook app.
-
-* ### IDE Plugins
-Having server running allows you to control your storybook view from inside web page or your ide.
-
-There is a plugin for [JetBrains IDEs](https://plugins.jetbrains.com/plugin/9910-storybook) and there is one 
-for [VS Code](https://github.com/orta/vscode-react-native-storybooks).
-
-
-* ### Web addons
-There are Storybook addons that work with React Native but do not have on device implementations.
-
-
-
diff --git a/app/react-native/docs/using-devices.md b/app/react-native/docs/using-devices.md
deleted file mode 100644
index 40032f9f5f20..000000000000
--- a/app/react-native/docs/using-devices.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Connecting Devices
-
-In order to work with React Native Storybook, one or more devices should be connected. Stories will only show when devices are available.
-
-## iOS simulator
-
--   Start with `react-native run-ios`
-
-## Android emulator
-
--   Get your AVD name with `emulator -list-avds`
--   Start the emulator `emulator -avd MY_AVD_NAME`
--   Forward port 8081 `adb reverse tcp:8081 tcp:8081`
--   Forward port 9001 `adb reverse tcp:9001 tcp:9001`
--   Start with `react-native run-android`
-
-### Issues
-**Problem**: If you run into a `No such file or directory` error
-
-**Solution**: You must run the emulator from its directory: `cd $(dirname $(which emulator)) && ./emulator -avd MY_AVD_NAME`
-
-## Android device
-
--   Connect your device with adb
--   Forward port 8081 `adb reverse tcp:8081 tcp:8081`
--   Forward port 9001 `adb reverse tcp:9001 tcp:9001`
--   Start with `react-native run-android`
diff --git a/app/react-native/package.json b/app/react-native/package.json
deleted file mode 100644
index 17636fe745d7..000000000000
--- a/app/react-native/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "@storybook/react-native",
-  "version": "5.3.0-rc.0",
-  "description": "A better way to develop React Native Components for your app",
-  "keywords": [
-    "react",
-    "react-native",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/react-native",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/react-native"
-  },
-  "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.20",
-    "@emotion/native": "^10.0.14",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/channel-websocket": "5.3.0-rc.0",
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "core-js": "^3.0.1",
-    "emotion-theming": "^10.0.19",
-    "react-native-swipe-gestures": "^1.0.4"
-  },
-  "devDependencies": {
-    "@types/react-native": "^0.57.57",
-    "react-native": "^0.57.8"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": ">=0.57.0"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
-}
diff --git a/app/react-native/readme.md b/app/react-native/readme.md
deleted file mode 100644
index 2786490b0a09..000000000000
--- a/app/react-native/readme.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# Storybook for React Native
-
-With Storybook for React Native you can design and develop individual React Native components without running your app.
-
-![Storybook Screenshot](docs/assets/readme/screenshot.png)
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Getting Started
-
-The `storybook` CLI tool can be used to add Storybook to your React Native app. Install the `storybook` tool if necessary and run it from your project directory with these commands:
-
-```shell
-cd my-rn-app
-npx -p @storybook/cli sb init
-```
-
-During installation it will ask if you want to install storybook server.
-It allows you to control the storybook from your web browser.
-
-The next thing you need to do is make Storybook UI visible in your app.
-
-### CRNA, React Native vanilla
-
-The easiest way to use Storybook is to replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
-
-```js
-export default from './storybook';
-```
-
-This will get you up and running quickly, but then you lose your app!
-There are multiple options here. for example, you can export conditionally:
-
-```js
-import StorybookUI from './storybook';
-
-import App from './app';
-
-module.exports = __DEV__ ? StorybookUI : App;
-```
-
-### React Native Navigation, other complex use cases
-
-`StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
-
-## Start Storybook server (optional)
-
-If you want to control storybook from browser/VS Code/websockets you need install and start the server.
-
-```sh
-npm run storybook
-```
-
-Now, you can open `<http://localhost:7007>` to view your storybook menus in the browser.
-
-## Start App
-
-To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
-
-For CRNA apps:
-
-```sh
-npm run <platform>
-```
-
-For RN apps:
-```sh
-react-native run-<platform>
-```
-
-Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
-
-If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
-`adb reverse tcp:7007 tcp:7007`
-
-## Start Command Parameters
-
-The following parameters can be passed to the start command:
-
-```
--h, --host <host>
-    host to listen on
--p, --port <port>
-    port to listen on
---https
-    whether server is running on https
--c, --config-dir [dir-name]
-    storybook config directory
--e, --environment [environment]
-    DEVELOPMENT/PRODUCTION environment for webpack
--i, --manual-id
-    allow multiple users to work with same storybook
---smoke-test
-    Exit after successful start
-```
-
-## getStorybookUI Options
-
-You can pass these parameters to getStorybookUI call in your storybook entry point:
-
-```
-{
-    onDeviceUI: Boolean (true)
-        -- display navigator and addons on the device
-    disableWebsockets: Boolean (false)
-        -- allows to display stories without running storybook server. Should be used with onDeviceUI
-    secured: Boolean (false)
-        -- use wss/https instead of ws/http
-    host: String (NativeModules.SourceCode.scriptURL)
-        -- host to use
-    port: Number (7007)
-        -- port to use
-    query: String ("")
-        -- additional query string to pass to websockets
-    isUIHidden: Boolean (false)
-        -- should the ui be closed initially.
-    tabOpen: Number (0)
-        -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
-    initialSelection: Object (null)
-        -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
-    shouldPersistSelection: Boolean (true)
-        -- initialize storybook with the last selected story.
-    shouldDisableKeyboardAvoidingView: Boolean (false)
-        -- Disable KeyboardAvoidingView wrapping Storybook's view
-    keyboardAvoidingViewVerticalOffset: Number (0)
-        -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
-}
-```
-
-## Learn More
-
-Check the `docs` directory in this repo for more advanced setup guides and other info.
diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
deleted file mode 100644
index a13cd197f7d9..000000000000
--- a/app/react-native/src/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable prefer-destructuring */
-import Preview from './preview';
-
-const preview = new Preview();
-
-const rawStoriesOf = preview.api().storiesOf.bind(preview);
-export const setAddon = preview.api().setAddon.bind(preview);
-export const addDecorator = preview.api().addDecorator.bind(preview);
-export const addParameters = preview.api().addParameters.bind(preview);
-export const clearDecorators = preview.api().clearDecorators.bind(preview);
-export const configure = preview.configure;
-export const getStorybook = preview.api().getStorybook.bind(preview);
-export const getStorybookUI = preview.getStorybookUI;
-export const raw = preview.api().raw.bind(preview);
-
-export const storiesOf = (...args: any[]) =>
-  rawStoriesOf(...args).addParameters({ framework: 'react-native' });
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
deleted file mode 100644
index 7bf42d8aba8e..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { PureComponent } from 'react';
-import {
-  Platform,
-  Keyboard,
-  Dimensions,
-  View,
-  EmitterSubscription,
-  LayoutChangeEvent,
-  KeyboardEvent,
-} from 'react-native';
-
-export interface PreviewDimens {
-  previewWidth: number;
-  previewHeight: number;
-}
-
-type Props = {
-  onLayout: (dimens: PreviewDimens) => void;
-} & PreviewDimens;
-
-// Android changes screen size when keyboard opens.
-// To avoid issues we use absolute positioned element with predefined screen size
-export default class AbsolutePositionedKeyboardAwareView extends PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-    this.keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      this.keyboardDidShowHandler
-    );
-    this.keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      this.keyboardDidHideHandler
-    );
-    Dimensions.addEventListener('change', this.removeKeyboardOnOrientationChange);
-  }
-
-  componentWillUnmount() {
-    this.keyboardDidShowListener.remove();
-    this.keyboardDidHideListener.remove();
-    Dimensions.removeEventListener('change', this.removeKeyboardOnOrientationChange);
-  }
-
-  keyboardDidShowHandler = (e: KeyboardEvent) => {
-    if (Platform.OS === 'android') {
-      const { previewWidth } = this.props;
-      // There is bug in RN android that keyboardDidShow event is called when you go from portrait to landscape.
-      // To make sure that this is keyboard event we check screen width
-      if (previewWidth === e.endCoordinates.width) {
-        this.keyboardOpen = true;
-      }
-    }
-  };
-
-  // When rotating screen from portrait to landscape with keyboard open on android it calls keyboardDidShow, but doesn't call
-  // keyboardDidHide. To avoid issues we set keyboardOpen to false immediately on keyboardChange.
-  removeKeyboardOnOrientationChange = () => {
-    if (Platform.OS === 'android') {
-      this.keyboardOpen = false;
-    }
-  };
-
-  keyboardDidHideHandler = () => {
-    if (this.keyboardOpen) {
-      this.keyboardOpen = false;
-    }
-  };
-
-  onLayoutHandler = ({ nativeEvent }: LayoutChangeEvent) => {
-    if (!this.keyboardOpen) {
-      const { width, height } = nativeEvent.layout;
-      const { onLayout } = this.props;
-
-      onLayout({
-        previewHeight: height,
-        previewWidth: width,
-      });
-    }
-  };
-
-  keyboardDidShowListener: EmitterSubscription;
-
-  keyboardDidHideListener: EmitterSubscription;
-
-  keyboardOpen: boolean;
-
-  render() {
-    const { children, previewWidth, previewHeight } = this.props;
-
-    return (
-      <View style={{ flex: 1 }} onLayout={this.onLayoutHandler}>
-        <View
-          style={
-            previewWidth === 0
-              ? { flex: 1 }
-              : { position: 'absolute', width: previewWidth, height: previewHeight }
-          }
-        >
-          {children}
-        </View>
-      </View>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx
deleted file mode 100644
index c24c4c3f0331..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { PureComponent } from 'react';
-import { SafeAreaView } from 'react-native';
-import styled from '@emotion/native';
-import addons from '@storybook/addons';
-import AddonsList from './list';
-import AddonWrapper from './wrapper';
-import { Label } from '../../Shared/text';
-
-const NoAddonContainer = styled.View({
-  flex: 1,
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const Container = styled.View(({ theme }) => ({
-  flex: 1,
-  backgroundColor: theme.backgroundColor,
-}));
-
-export default class Addons extends PureComponent<{}, { addonSelected: string }> {
-  panels = addons.getElements('panel');
-
-  constructor(props: {}) {
-    super(props);
-
-    this.state = {
-      addonSelected: Object.keys(this.panels)[0] || null,
-    };
-  }
-
-  onPressAddon = (addonSelected: string) => {
-    this.setState({ addonSelected });
-  };
-
-  render() {
-    const { addonSelected } = this.state;
-
-    if (Object.keys(this.panels).length === 0) {
-      return (
-        <SafeAreaView style={{ flex: 1 }}>
-          <NoAddonContainer>
-            <Label>No addons loaded.</Label>
-          </NoAddonContainer>
-        </SafeAreaView>
-      );
-    }
-
-    return (
-      <Container>
-        <SafeAreaView style={{ flex: 1 }}>
-          <AddonsList
-            onPressAddon={this.onPressAddon}
-            panels={this.panels}
-            addonSelected={addonSelected}
-          />
-          <AddonWrapper addonSelected={addonSelected} panels={this.panels} />
-        </SafeAreaView>
-      </Container>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/list.tsx b/app/react-native/src/preview/components/OnDeviceUI/addons/list.tsx
deleted file mode 100644
index c9b4c2504e6a..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/addons/list.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { PureComponent } from 'react';
-import { ScrollView } from 'react-native';
-import styled from '@emotion/native';
-import { Collection } from '@storybook/addons';
-import Button from '../navigation/button';
-
-const Container = styled.View(({ theme }) => ({
-  flexDirection: 'row',
-  borderBottomWidth: 1,
-  borderBottomColor: theme.borderColor,
-}));
-
-export interface Props {
-  panels: Collection;
-  addonSelected: string;
-  onPressAddon: (id: string) => void;
-}
-
-export default class AddonList extends PureComponent<Props> {
-  renderTab = (id: string, title: string) => {
-    const { addonSelected, onPressAddon } = this.props;
-
-    return (
-      <Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
-        {title.toUpperCase()}
-      </Button>
-    );
-  };
-
-  render() {
-    const { panels } = this.props;
-    const addonKeys = Object.keys(panels);
-
-    return (
-      <Container>
-        <ScrollView showsHorizontalScrollIndicator={false} horizontal>
-          {addonKeys.map(id => this.renderTab(id, panels[id].title))}
-        </ScrollView>
-      </Container>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.tsx b/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.tsx
deleted file mode 100644
index 1b101b4a2254..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { PureComponent } from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { Collection } from '@storybook/addons';
-
-export interface Props {
-  panels: Collection;
-  addonSelected: string;
-}
-
-const style = StyleSheet.create({
-  invisible: {
-    height: 0,
-    width: 0,
-    opacity: 0,
-    position: 'absolute',
-  },
-  flex: {
-    flex: 1,
-  },
-});
-
-export default class Wrapper extends PureComponent<Props> {
-  static defaultProps = {
-    addonSelected: '',
-  };
-
-  render() {
-    const { panels, addonSelected } = this.props;
-
-    const addonKeys = Object.keys(panels);
-
-    return addonKeys.map(id => {
-      const selected = addonSelected === id;
-
-      return (
-        <View key={id} style={selected ? style.flex : style.invisible}>
-          <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
-        </View>
-      );
-    });
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/animation.ts b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
deleted file mode 100644
index f19ef152fd80..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/animation.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Animated } from 'react-native';
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
-
-const PREVIEW_SCALE = 0.3;
-
-const panelWidth = (width: number) => width * (1 - PREVIEW_SCALE - 0.05);
-
-export const getNavigatorPanelPosition = (animatedValue: Animated.Value, previewWidth: number) => {
-  return [
-    {
-      transform: [
-        {
-          translateX: animatedValue.interpolate({
-            inputRange: [NAVIGATOR, PREVIEW],
-            outputRange: [0, -panelWidth(previewWidth) - 1],
-          }),
-        },
-      ],
-      width: panelWidth(previewWidth),
-    },
-  ];
-};
-
-export const getAddonPanelPosition = (animatedValue: Animated.Value, previewWidth: number) => {
-  return [
-    {
-      transform: [
-        {
-          translateX: animatedValue.interpolate({
-            inputRange: [PREVIEW, ADDONS],
-            outputRange: [previewWidth, previewWidth - panelWidth(previewWidth)],
-          }),
-        },
-      ],
-      width: panelWidth(previewWidth),
-    },
-  ];
-};
-
-export const getPreviewPosition = (
-  animatedValue: Animated.Value,
-  previewWidth: number,
-  previewHeight: number,
-  slideBetweenAnimation: boolean
-) => {
-  const translateX = previewWidth / 2 - (previewWidth * PREVIEW_SCALE) / 2 - 6;
-  const translateY = -(previewHeight / 2 - (previewHeight * PREVIEW_SCALE) / 2 - 12);
-
-  return {
-    transform: [
-      {
-        translateX: animatedValue.interpolate({
-          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-          outputRange: [translateX, 0, -translateX],
-        }),
-      },
-      {
-        translateY: animatedValue.interpolate({
-          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-          outputRange: [translateY, slideBetweenAnimation ? translateY : 0, translateY],
-        }),
-      },
-    ],
-  };
-};
-
-export const getPreviewScale = (animatedValue: Animated.Value, slideBetweenAnimation: boolean) => {
-  return {
-    transform: [
-      {
-        scale: animatedValue.interpolate({
-          inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-          outputRange: [PREVIEW_SCALE, slideBetweenAnimation ? PREVIEW_SCALE : 1, PREVIEW_SCALE],
-        }),
-      },
-    ],
-  };
-};
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
deleted file mode 100644
index 2d33bac60b5d..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { PureComponent } from 'react';
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  Animated,
-  FlexStyle,
-  SafeAreaView,
-  Dimensions,
-  TouchableOpacity,
-} from 'react-native';
-import styled from '@emotion/native';
-import addons from '@storybook/addons';
-import Channel from '@storybook/channels';
-import StoryListView from '../StoryListView';
-import StoryView from '../StoryView';
-import Addons from './addons';
-import Panel from './panel';
-import Navigation from './navigation';
-import AbsolutePositionedKeyboardAwareView, {
-  PreviewDimens,
-} from './absolute-positioned-keyboard-aware-view';
-import { PREVIEW } from './navigation/constants';
-import {
-  getPreviewPosition,
-  getPreviewScale,
-  getAddonPanelPosition,
-  getNavigatorPanelPosition,
-} from './animation';
-
-const ANIMATION_DURATION = 300;
-const IS_IOS = Platform.OS === 'ios';
-
-interface OnDeviceUIProps {
-  stories: any;
-  url?: string;
-  tabOpen?: number;
-  isUIHidden?: boolean;
-  shouldDisableKeyboardAvoidingView?: boolean;
-  keyboardAvoidingViewVerticalOffset?: number;
-}
-
-interface OnDeviceUIState {
-  tabOpen: number;
-  slideBetweenAnimation: boolean;
-  previewWidth: number;
-  previewHeight: number;
-}
-
-const flex = { flex: 1 };
-
-const Preview = styled.View<{ disabled: boolean }>(flex, ({ disabled, theme }) => ({
-  borderLeftWidth: disabled ? 0 : 1,
-  borderTopWidth: disabled ? 0 : 1,
-  borderRightWidth: disabled ? 0 : 1,
-  borderBottomWidth: disabled ? 0 : 1,
-  borderColor: disabled ? 'transparent' : theme.previewBorderColor,
-}));
-
-const absolutePosition: FlexStyle = { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 };
-
-export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceUIState> {
-  constructor(props: OnDeviceUIProps) {
-    super(props);
-    const tabOpen = props.tabOpen || PREVIEW;
-
-    this.state = {
-      tabOpen,
-      slideBetweenAnimation: false,
-      previewWidth: Dimensions.get('window').width,
-      previewHeight: Dimensions.get('window').height,
-    };
-    this.animatedValue = new Animated.Value(tabOpen);
-    this.channel = addons.getChannel();
-  }
-
-  onLayout = ({ previewWidth, previewHeight }: PreviewDimens) => {
-    this.setState({ previewWidth, previewHeight });
-  };
-
-  handleOpenPreview = () => {
-    this.handleToggleTab(PREVIEW);
-  };
-
-  handleToggleTab = (newTabOpen: number) => {
-    const { tabOpen } = this.state;
-    if (newTabOpen === tabOpen) {
-      return;
-    }
-    Animated.timing(this.animatedValue, {
-      toValue: newTabOpen,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: true,
-    }).start();
-    this.setState({
-      tabOpen: newTabOpen,
-      // True if swiping between navigator and addons
-      slideBetweenAnimation: tabOpen + newTabOpen === PREVIEW,
-    });
-    // close the keyboard opened from a TextInput from story list or knobs
-    if (newTabOpen === PREVIEW) {
-      Keyboard.dismiss();
-    }
-  };
-
-  animatedValue: Animated.Value;
-
-  channel: Channel;
-
-  render() {
-    const {
-      stories,
-      url,
-      isUIHidden,
-      shouldDisableKeyboardAvoidingView,
-      keyboardAvoidingViewVerticalOffset,
-    } = this.props;
-
-    const { tabOpen, slideBetweenAnimation, previewWidth, previewHeight } = this.state;
-
-    const previewWrapperStyles = [
-      flex,
-      getPreviewPosition(this.animatedValue, previewWidth, previewHeight, slideBetweenAnimation),
-    ];
-
-    const previewStyles = [flex, getPreviewScale(this.animatedValue, slideBetweenAnimation)];
-
-    return (
-      <SafeAreaView style={flex}>
-        <KeyboardAvoidingView
-          enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
-          behavior={IS_IOS ? 'padding' : null}
-          keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
-          style={flex}
-        >
-          <AbsolutePositionedKeyboardAwareView
-            onLayout={this.onLayout}
-            previewHeight={previewHeight}
-            previewWidth={previewWidth}
-          >
-            <Animated.View style={previewWrapperStyles}>
-              <Animated.View style={previewStyles}>
-                <Preview disabled={tabOpen === PREVIEW}>
-                  <StoryView url={url} onDevice stories={stories} />
-                </Preview>
-                {tabOpen !== PREVIEW ? (
-                  <TouchableOpacity style={absolutePosition} onPress={this.handleOpenPreview} />
-                ) : null}
-              </Animated.View>
-            </Animated.View>
-            <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-              <StoryListView stories={stories} />
-            </Panel>
-            <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
-              <Addons />
-            </Panel>
-          </AbsolutePositionedKeyboardAwareView>
-          <Navigation
-            tabOpen={tabOpen}
-            onChangeTab={this.handleToggleTab}
-            initialUiVisible={!isUIHidden}
-          />
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/bar.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/bar.tsx
deleted file mode 100644
index 6116c006d7ab..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/bar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { PureComponent } from 'react';
-import styled from '@emotion/native';
-import Button from './button';
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
-
-const Container = styled.View(({ theme }) => ({
-  flexDirection: 'row',
-  paddingHorizontal: 8,
-  backgroundColor: theme.backgroundColor,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: theme.borderColor,
-}));
-
-export interface Props {
-  index: number;
-  onPress: (id: number) => void;
-}
-
-export default class Bar extends PureComponent<Props> {
-  render() {
-    const { index, onPress } = this.props;
-    return (
-      <Container>
-        <Button onPress={onPress} id={NAVIGATOR} active={index === NAVIGATOR}>
-          NAVIGATOR
-        </Button>
-        <Button onPress={onPress} id={PREVIEW} active={index === PREVIEW}>
-          PREVIEW
-        </Button>
-        <Button onPress={onPress} id={ADDONS} active={index === ADDONS}>
-          ADDONS
-        </Button>
-      </Container>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx
deleted file mode 100644
index ccd90ae02937..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { PureComponent } from 'react';
-import { TouchableOpacity } from 'react-native';
-import styled from '@emotion/native';
-
-const ActiveBorder = styled.View<{ active: boolean }>(({ active, theme }) => ({
-  backgroundColor: active ? theme.borderColor : 'transparent',
-  height: 3,
-}));
-
-const ButtonText = styled.Text<{ active: boolean }>(({ theme, active }) => ({
-  color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
-  paddingHorizontal: 8,
-  paddingVertical: 10,
-  fontSize: 11,
-}));
-
-interface Props {
-  id: number | string;
-  active: boolean;
-  onPress: (id: number | string) => void;
-}
-
-export default class Button extends PureComponent<Props> {
-  onPress = () => {
-    const { onPress, id } = this.props;
-    onPress(id);
-  };
-
-  render() {
-    const { active, children } = this.props;
-
-    return (
-      <TouchableOpacity onPress={this.onPress} activeOpacity={0.8}>
-        <ButtonText active={active}>{children}</ButtonText>
-        <ActiveBorder active={active} />
-      </TouchableOpacity>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/constants.ts b/app/react-native/src/preview/components/OnDeviceUI/navigation/constants.ts
deleted file mode 100644
index 7c8f4bcbafeb..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const NAVIGATOR = -1;
-export const PREVIEW = 0;
-export const ADDONS = 1;
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
deleted file mode 100644
index 72ef1b584bda..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable react/destructuring-assignment */
-import React, { PureComponent } from 'react';
-import { View, SafeAreaView } from 'react-native';
-import GestureRecognizer from 'react-native-swipe-gestures';
-import Bar from './bar';
-import VisibilityButton from './visibility-button';
-
-const SWIPE_CONFIG = {
-  velocityThreshold: 0.2,
-  directionalOffsetThreshold: 80,
-};
-
-interface Props {
-  initialUiVisible?: boolean;
-  tabOpen: number;
-  onChangeTab: (index: number) => void;
-}
-
-export default class Navigation extends PureComponent<Props> {
-  state = {
-    isUIVisible: this.props.initialUiVisible !== undefined ? this.props.initialUiVisible : true,
-  };
-
-  handleToggleUI = () => {
-    const { isUIVisible } = this.state;
-
-    this.setState({ isUIVisible: !isUIVisible });
-  };
-
-  handleSwipeLeft = () => {
-    const { tabOpen, onChangeTab } = this.props;
-    if (tabOpen < 1) {
-      onChangeTab(tabOpen + 1);
-    }
-  };
-
-  handleSwipeRight = () => {
-    const { tabOpen, onChangeTab } = this.props;
-    if (tabOpen > -1) {
-      onChangeTab(tabOpen - 1);
-    }
-  };
-
-  render() {
-    const { tabOpen, onChangeTab } = this.props;
-    const { isUIVisible } = this.state;
-
-    return (
-      <View>
-        <SafeAreaView>
-          {isUIVisible && (
-            <GestureRecognizer
-              onSwipeLeft={this.handleSwipeLeft}
-              onSwipeRight={this.handleSwipeRight}
-              config={SWIPE_CONFIG}
-            >
-              <Bar index={tabOpen} onPress={onChangeTab} />
-            </GestureRecognizer>
-          )}
-          <View>
-            <VisibilityButton onPress={this.handleToggleUI} />
-          </View>
-        </SafeAreaView>
-      </View>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.tsx
deleted file mode 100644
index 57c4c3923f38..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { PureComponent } from 'react';
-import styled from '@emotion/native';
-
-interface Props {
-  onPress: () => void;
-}
-
-const Touchable = styled.TouchableOpacity({
-  backgroundColor: 'transparent',
-  position: 'absolute',
-  right: 8,
-  bottom: 12,
-  zIndex: 100,
-});
-
-const HideIcon = styled.Text(({ theme }) => ({
-  fontSize: 14,
-  color: theme.buttonTextColor,
-}));
-
-export default class VisibilityButton extends PureComponent<Props> {
-  render() {
-    const { onPress } = this.props;
-    return (
-      <Touchable
-        onPress={onPress}
-        testID="Storybook.OnDeviceUI.toggleUI"
-        accessibilityLabel="Storybook.OnDeviceUI.toggleUI"
-        hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
-      >
-        <HideIcon>□</HideIcon>
-      </Touchable>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/OnDeviceUI/panel.tsx b/app/react-native/src/preview/components/OnDeviceUI/panel.tsx
deleted file mode 100644
index 63520c02c57d..000000000000
--- a/app/react-native/src/preview/components/OnDeviceUI/panel.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import styled from '@emotion/native';
-
-const Container = styled(Animated.View)(({ theme }) => ({
-  backgroundColor: theme.backgroundColor,
-}));
-
-interface Props {
-  style: any[];
-}
-
-export default class Panel extends PureComponent<Props> {
-  render() {
-    const { children, style } = this.props;
-    return <Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>;
-  }
-}
diff --git a/app/react-native/src/preview/components/Shared/text.ts b/app/react-native/src/preview/components/Shared/text.ts
deleted file mode 100644
index 20db572032e9..000000000000
--- a/app/react-native/src/preview/components/Shared/text.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from '@emotion/native';
-
-export const Header = styled.Text<{ selected: boolean }>(
-  ({ theme }) => ({
-    fontSize: 20,
-    color: theme.headerTextColor,
-  }),
-  ({ selected }) => (selected ? { fontWeight: 'bold' } : {})
-);
-
-export const Name = styled.Text<{ selected: boolean }>(
-  ({ theme }) => ({
-    fontSize: 16,
-    color: theme.headerTextColor,
-  }),
-  ({ selected }) => (selected ? { fontWeight: 'bold' } : {})
-);
-
-export const Label = styled.Text(({ theme }) => ({
-  fontSize: 18,
-  color: theme.labelColor,
-}));
diff --git a/app/react-native/src/preview/components/Shared/theme.ts b/app/react-native/src/preview/components/Shared/theme.ts
deleted file mode 100644
index 3c762a7c5b49..000000000000
--- a/app/react-native/src/preview/components/Shared/theme.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const theme = {
-  backgroundColor: 'white',
-  headerTextColor: 'black',
-  labelColor: 'black',
-  borderColor: '#e6e6e6',
-  previewBorderColor: '#b3b3b3',
-  buttonTextColor: '#999999',
-  buttonActiveTextColor: '#444444',
-};
diff --git a/app/react-native/src/preview/components/StoryListView/index.tsx b/app/react-native/src/preview/components/StoryListView/index.tsx
deleted file mode 100644
index df1a202ee6dc..000000000000
--- a/app/react-native/src/preview/components/StoryListView/index.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { Component, FunctionComponent } from 'react';
-import { SafeAreaView } from 'react-native';
-import styled from '@emotion/native';
-import Events from '@storybook/core-events';
-import addons from '@storybook/addons';
-import { Header, Name } from '../Shared/text';
-
-const SearchBar = styled.TextInput(
-  {
-    borderTopLeftRadius: 5,
-    borderTopRightRadius: 5,
-    borderBottomLeftRadius: 5,
-    borderBottomRightRadius: 5,
-    fontSize: 16,
-    marginHorizontal: 5,
-    marginVertical: 5,
-    paddingHorizontal: 5,
-    paddingVertical: 5,
-  },
-  ({ theme }) => ({
-    backgroundColor: theme.borderColor,
-    color: theme.buttonActiveTextColor,
-  })
-);
-
-const HeaderContainer = styled.View({
-  paddingVertical: 5,
-});
-
-interface SectionProps {
-  title: string;
-  selected: boolean;
-}
-
-const SectionHeader: FunctionComponent<SectionProps> = ({ title, selected }: SectionProps) => (
-  <HeaderContainer key={title}>
-    <Header selected={selected}>{title}</Header>
-  </HeaderContainer>
-);
-
-interface ListItemProps {
-  title: string;
-  kind: string;
-  selected: boolean;
-  onPress: () => void;
-}
-
-const ItemTouchable = styled.TouchableOpacity({
-  paddingHorizontal: 16,
-  paddingVertical: 5,
-});
-
-const ListItem: FunctionComponent<ListItemProps> = ({ kind, title, selected, onPress }) => (
-  <ItemTouchable
-    key={title}
-    onPress={onPress}
-    activeOpacity={0.8}
-    testID={`Storybook.ListItem.${kind}.${title}`}
-    accessibilityLabel={`Storybook.ListItem.${title}`}
-  >
-    <Name selected={selected}>{title}</Name>
-  </ItemTouchable>
-);
-
-interface Props {
-  stories: any;
-}
-
-interface State {
-  data: any[];
-  originalData: any[];
-}
-
-const List = styled.SectionList({
-  flex: 1,
-  marginBottom: 40,
-});
-
-export default class StoryListView extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      data: [],
-      originalData: [],
-    };
-  }
-
-  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 = 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 });
-    }
-  };
-
-  handleChangeSearchText = (text: string) => {
-    const query = text.trim();
-    const { originalData: data } = this.state;
-
-    if (!query) {
-      this.setState({ data });
-      return;
-    }
-
-    const checkValue = (value: string) => value.toLowerCase().includes(query.toLowerCase());
-    const filteredData = data.reduce((acc, story) => {
-      const hasTitle = checkValue(story.title);
-      const hasKind = story.data.some((ref: any) => checkValue(ref.name));
-
-      if (hasTitle || hasKind) {
-        acc.push({
-          ...story,
-          // in case the query matches component's title, all of its stories will be shown
-          data: !hasTitle ? story.data.filter((ref: any) => checkValue(ref.name)) : story.data,
-        });
-      }
-
-      return acc;
-    }, []);
-
-    this.setState({ data: filteredData });
-  };
-
-  changeStory(storyId: string) {
-    const channel = addons.getChannel();
-    channel.emit(Events.SET_CURRENT_STORY, { storyId });
-  }
-
-  render() {
-    const { stories } = this.props;
-    const { storyId } = stories.getSelection();
-    const selectedStory = stories.fromId(storyId);
-    const { data } = this.state;
-
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <SearchBar
-          testID="Storybook.ListView.SearchBar"
-          clearButtonMode="while-editing"
-          disableFullscreenUI
-          onChangeText={this.handleChangeSearchText}
-          placeholder="Filter"
-          returnKeyType="search"
-        />
-        <List
-          testID="Storybook.ListView"
-          renderItem={({ item }) => (
-            <ListItem
-              title={item.name}
-              kind={item.kind}
-              selected={selectedStory && item.id === selectedStory.id}
-              onPress={() => this.changeStory(item.id)}
-            />
-          )}
-          renderSectionHeader={({ section: { title } }) => (
-            <SectionHeader title={title} selected={selectedStory && title === selectedStory.kind} />
-          )}
-          keyExtractor={(item, index) => item + index}
-          sections={data}
-          stickySectionHeadersEnabled={false}
-        />
-      </SafeAreaView>
-    );
-  }
-}
diff --git a/app/react-native/src/preview/components/StoryView/index.tsx b/app/react-native/src/preview/components/StoryView/index.tsx
deleted file mode 100644
index ffdfc229c5c1..000000000000
--- a/app/react-native/src/preview/components/StoryView/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react';
-import { View, Text } from 'react-native';
-import styled from '@emotion/native';
-import addons from '@storybook/addons';
-import Events from '@storybook/core-events';
-
-interface Props {
-  stories: any;
-  url: string;
-  onDevice?: boolean;
-}
-
-const HelpContainer = styled.View`
-  flex: 1;
-  padding-horizontal: 15;
-  padding-vertical: 15;
-  align-items: center;
-  justify-content: center;
-`;
-
-export default class StoryView extends Component<Props> {
-  componentDidMount() {
-    const channel = addons.getChannel();
-    channel.on(Events.STORY_RENDER, this.forceReRender);
-    channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
-  componentDidUpdate() {
-    const channel = addons.getChannel();
-    const { stories } = this.props;
-    const { storyId } = stories.getSelection();
-
-    if (storyId) {
-      channel.emit(Events.STORY_RENDERED, { storyId });
-    }
-  }
-
-  componentWillUnmount() {
-    const channel = addons.getChannel();
-    channel.removeListener(Events.STORY_RENDER, this.forceReRender);
-    channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
-  forceReRender = () => {
-    this.forceUpdate();
-  };
-
-  renderHelp = () => {
-    const { url } = this.props;
-    return (
-      <HelpContainer>
-        {url && url.length ? (
-          <Text>
-            Please open the Storybook UI ({url}) with a web browser and select a story for preview.
-          </Text>
-        ) : (
-          <Text>
-            Please open the Storybook UI with a web browser and select a story for preview.
-          </Text>
-        )}
-      </HelpContainer>
-    );
-  };
-
-  renderOnDeviceUIHelp = () => (
-    <HelpContainer>
-      <Text>Please open navigator and select a story to preview.</Text>
-    </HelpContainer>
-  );
-
-  render() {
-    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} testID={id} style={{ flex: 1 }}>
-          {storyFn()}
-        </View>
-      );
-    }
-
-    if (onDevice) {
-      return this.renderOnDeviceUIHelp();
-    }
-
-    return this.renderHelp();
-  }
-}
diff --git a/app/react-native/src/preview/index.tsx b/app/react-native/src/preview/index.tsx
deleted file mode 100644
index d39ccc675b7f..000000000000
--- a/app/react-native/src/preview/index.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import React, { PureComponent } from 'react';
-import { ThemeProvider } from 'emotion-theming';
-
-import addons from '@storybook/addons';
-import Events from '@storybook/core-events';
-import Channel from '@storybook/channels';
-import createChannel from '@storybook/channel-websocket';
-import { StoryStore, ClientApi } from '@storybook/client-api';
-import OnDeviceUI from './components/OnDeviceUI';
-import StoryView from './components/StoryView';
-import { theme } from './components/Shared/theme';
-// @ts-ignore
-import getHost from './rn-host-detect';
-
-const STORAGE_KEY = 'lastOpenedStory';
-
-interface AsyncStorage {
-  getItem: <T>(key: string) => Promise<T>;
-  setItem: <T>(key: string, value: T) => Promise<void>;
-}
-
-export type Params = {
-  onDeviceUI: boolean;
-  asyncStorage?: AsyncStorage | null;
-  resetStorybook: boolean;
-  disableWebsockets: boolean;
-  query: string;
-  host: string;
-  port: number;
-  secured: boolean;
-  initialSelection: any;
-  shouldPersistSelection: boolean;
-  tabOpen: number;
-  isUIHidden: boolean;
-  shouldDisableKeyboardAvoidingView: boolean;
-  keyboardAvoidingViewVerticalOffset: number;
-} & { theme: typeof theme };
-
-export default class Preview {
-  _clientApi: ClientApi;
-
-  _stories: StoryStore;
-
-  _addons: any;
-
-  _decorators: any[];
-
-  _asyncStorageStoryId: string;
-
-  _asyncStorage: AsyncStorage | null;
-
-  constructor() {
-    this._addons = {};
-    this._decorators = [];
-    this._stories = new StoryStore({ channel: null });
-    this._clientApi = new ClientApi({ storyStore: this._stories });
-  }
-
-  api = () => {
-    return this._clientApi;
-  };
-
-  configure = (loadStories: () => void, module: any) => {
-    loadStories();
-    if (module && module.hot) {
-      module.hot.accept(() => this._sendSetStories());
-      // TODO remove all global decorators on dispose
-    }
-  };
-
-  getStorybookUI = (params: Partial<Params> = {}) => {
-    let webUrl: string = null;
-    let channel: Channel = null;
-
-    if (params.asyncStorage === undefined) {
-      console.warn(
-        `
-Starting Storybook v5.3.0, we require to manually pass an asyncStorage prop. Pass null to disable or use one from @react-native-community or react-native itself.
-
-More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-native-async-storage
-      `.trim()
-      );
-    }
-
-    if (params.asyncStorage) {
-      this._asyncStorage = params.asyncStorage;
-    }
-
-    const onDeviceUI = params.onDeviceUI !== false;
-    const { initialSelection, shouldPersistSelection } = params;
-
-    try {
-      channel = addons.getChannel();
-    } catch (e) {
-      // getChannel throws if the channel is not defined,
-      // which is fine in this case (we will define it below)
-    }
-
-    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}`;
-
-        const query = params.query || '';
-        const { secured } = params;
-        const websocketType = secured ? 'wss' : 'ws';
-        const httpType = secured ? 'https' : 'http';
-
-        const url = `${websocketType}://${host}${port}/${query}`;
-        webUrl = `${httpType}://${host}${port}`;
-        channel = createChannel({
-          url,
-          async: onDeviceUI,
-          onError: () => {
-            this._setInitialStory(initialSelection, shouldPersistSelection);
-          },
-        });
-      }
-
-      addons.setChannel(channel);
-      this._stories.setChannel(channel);
-
-      channel.emit(Events.CHANNEL_CREATED);
-    }
-
-    channel.on(Events.GET_STORIES, () => this._sendSetStories());
-    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));
-
-    this._sendSetStories();
-
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const preview = this;
-
-    addons.loadAddons(this._clientApi);
-
-    const appliedTheme = { ...theme, ...params.theme };
-
-    // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
-    return class StorybookRoot extends PureComponent {
-      render() {
-        if (onDeviceUI) {
-          return (
-            <ThemeProvider theme={appliedTheme}>
-              <OnDeviceUI
-                stories={preview._stories}
-                url={webUrl}
-                isUIHidden={params.isUIHidden}
-                tabOpen={params.tabOpen}
-                shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
-                keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
-              />
-            </ThemeProvider>
-          );
-        }
-
-        return (
-          <ThemeProvider theme={appliedTheme}>
-            <StoryView stories={preview._stories} url={webUrl} />
-          </ThemeProvider>
-        );
-      }
-    };
-  };
-
-  _sendSetStories() {
-    const channel = addons.getChannel();
-    const stories = this._stories.extract();
-    channel.emit(Events.SET_STORIES, { stories });
-    channel.emit(Events.STORIES_CONFIGURED);
-  }
-
-  _setInitialStory = async (initialSelection: any, shouldPersistSelection = true) => {
-    const story = await this._getInitialStory(initialSelection, shouldPersistSelection)();
-
-    if (story) {
-      this._selectStory(story);
-    }
-  };
-
-  _getInitialStory = (initialSelection: any, shouldPersistSelection = true) => async () => {
-    let story = null;
-    if (initialSelection && this._checkStory(initialSelection)) {
-      story = initialSelection;
-    } else if (shouldPersistSelection) {
-      try {
-        let value = this._asyncStorageStoryId;
-        if (!value && this._asyncStorage) {
-          value = JSON.parse(await this._asyncStorage.getItem<string>(STORAGE_KEY));
-          this._asyncStorageStoryId = value;
-        }
-
-        if (this._checkStory(value)) {
-          story = value;
-        }
-      } catch (e) {
-        //
-      }
-    }
-
-    if (story) {
-      return this._getStory(story);
-    }
-
-    const stories = this._stories.raw();
-    if (stories && stories.length) {
-      return this._getStory(stories[0].id);
-    }
-
-    return null;
-  };
-
-  _getStory(storyId: string) {
-    return this._stories.fromId(storyId);
-  }
-
-  _selectStoryEvent({ storyId }: { storyId: string }) {
-    if (storyId) {
-      if (this._asyncStorage) {
-        this._asyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId)).catch(() => {});
-      }
-
-      const story = this._getStory(storyId);
-      this._selectStory(story);
-    }
-  }
-
-  _selectStory(story: any) {
-    const channel = addons.getChannel();
-
-    this._stories.setSelection({ storyId: story.id, viewMode: 'story' }, null);
-    channel.emit(Events.SELECT_STORY, story);
-  }
-
-  _checkStory(storyId: string) {
-    if (!storyId) {
-      return null;
-    }
-
-    const story = this._getStory(storyId);
-
-    if (story.storyFn === null) {
-      return null;
-    }
-
-    return story;
-  }
-}
diff --git a/app/react-native/src/preview/rn-host-detect.js b/app/react-native/src/preview/rn-host-detect.js
deleted file mode 100644
index 15f051f804b5..000000000000
--- a/app/react-native/src/preview/rn-host-detect.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable */
-
-'use strict'
-
-/*
- * It only for Debug Remotely mode for Android
- * When __DEV__ === false, we can't use window.require('NativeModules')
- */
-function getByRemoteConfig(hostname) {
-  var remoteModuleConfig = typeof window !== 'undefined' &&
-    window.__fbBatchedBridgeConfig &&
-    window.__fbBatchedBridgeConfig.remoteModuleConfig
-  if (
-    !Array.isArray(remoteModuleConfig) ||
-    hostname !== 'localhost' && hostname !== '127.0.0.1'
-  ) return { hostname: hostname, passed: false }
-
-  var constants = (
-    remoteModuleConfig.find(getConstants) || []
-  )[1]
-  if (constants) {
-    var serverHost = constants.ServerHost || hostname
-    return { hostname: serverHost.split(':')[0], passed: true }
-  }
-  return { hostname: hostname, passed: false }
-}
-
-function getConstants(config) {
-  return config && (config[0] === 'AndroidConstants' || config[0] === 'PlatformConstants')
-}
-
-function getByRNRequirePolyfill(hostname) {
-  var NativeModules
-  var PlatformConstants
-  var AndroidConstants
-  if (
-    typeof window === 'undefined' ||
-    !window.__DEV__ ||
-    typeof window.require !== 'function' ||
-    // RN >= 0.56
-    // TODO: Get NativeModules for RN >= 0.56
-    window.require.name === 'metroRequire'
-  ) {
-    return hostname
-  }
-  NativeModules = window.require('NativeModules')
-
-  if (
-    !NativeModules ||
-    (!NativeModules.PlatformConstants && !NativeModules.AndroidConstants)
-  ) {
-    return hostname
-  }
-  PlatformConstants = NativeModules.PlatformConstants
-  AndroidConstants = NativeModules.AndroidConstants
-
-  var serverHost = (PlatformConstants ?
-      PlatformConstants.ServerHost :
-      AndroidConstants.ServerHost
-  ) || hostname
-  return serverHost.split(':')[0]
-}
-
-/*
- * Get React Native server IP if hostname is `localhost`
- * On Android emulator, the IP of host is `10.0.2.2` (Genymotion: 10.0.3.2)
- */
-export default function getHost(hostname) {
-  // Check if it in React Native environment
-  if (
-    typeof __fbBatchedBridge !== 'object' ||
-    hostname !== 'localhost' && hostname !== '127.0.0.1'
-  ) {
-    return hostname
-  }
-  var result = getByRemoteConfig(hostname)
-
-  // Leave if get hostname by remote config successful
-  if (result.passed) {
-    return result.hostname
-  }
-
-  // Otherwise, use RN's require polyfill
-  return getByRNRequirePolyfill(hostname)
-}
diff --git a/app/react-native/src/typings.d.ts b/app/react-native/src/typings.d.ts
deleted file mode 100644
index 4f33c1f29b7d..000000000000
--- a/app/react-native/src/typings.d.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from 'react';
-import css from '@emotion/css';
-import {
-  CreateStyled,
-  CreateStyledComponentExtrinsic,
-} from '@emotion/styled-base';
-import ReactNative from 'react-native';
-import { theme } from './preview/components/Shared/theme'
-
-// https://github.com/emotion-js/emotion/pull/1176/
-// meanwhile: https://github.com/emotion-js/emotion/issues/839#issuecomment-500195354
-declare module '@emotion/native' {
-  type StyledReactNativeComponents =
-    | 'ActivityIndicator'
-    | 'ActivityIndicatorIOS'
-    | 'ART'
-    | 'Button'
-    | 'DatePickerIOS'
-    | 'DrawerLayoutAndroid'
-    | 'Image'
-    | 'ImageBackground'
-    | 'ImageEditor'
-    | 'ImageStore'
-    | 'KeyboardAvoidingView'
-    | 'ListView'
-    | 'MapView'
-    | 'Modal'
-    | 'NavigatorIOS'
-    | 'Picker'
-    | 'PickerIOS'
-    | 'ProgressBarAndroid'
-    | 'ProgressViewIOS'
-    | 'ScrollView'
-    | 'SegmentedControlIOS'
-    | 'Slider'
-    | 'SliderIOS'
-    | 'SnapshotViewIOS'
-    | 'Switch'
-    | 'RecyclerViewBackedScrollView'
-    | 'RefreshControl'
-    | 'SafeAreaView'
-    | 'StatusBar'
-    | 'SwipeableListView'
-    | 'SwitchAndroid'
-    | 'SwitchIOS'
-    | 'TabBarIOS'
-    | 'Text'
-    | 'TextInput'
-    | 'ToastAndroid'
-    | 'ToolbarAndroid'
-    | 'Touchable'
-    | 'TouchableHighlight'
-    | 'TouchableNativeFeedback'
-    | 'TouchableOpacity'
-    | 'TouchableWithoutFeedback'
-    | 'View'
-    | 'ViewPagerAndroid'
-    | 'WebView'
-    | 'FlatList'
-    | 'SectionList'
-    | 'VirtualizedList';
-
-  type StyledComponentsForReactNative<
-    T extends keyof typeof ReactNative,
-    ExtraProps,
-    Theme
-  > = {
-    [K in T]: CreateStyledComponentExtrinsic<
-      typeof ReactNative[K],
-      ExtraProps,
-      Theme
-    >;
-  };
-
-  type MyTheme = typeof theme;
-
-  export interface Styled<Theme extends object = MyTheme, ExtraProps = {}>
-    extends CreateStyled<Theme>,
-      StyledComponentsForReactNative<
-        StyledReactNativeComponents,
-        ExtraProps,
-        Theme
-      > {}
-
-  export {css};
-
-  const styled: Styled;
-  export default styled;
-}
\ No newline at end of file
diff --git a/app/react-native/tsconfig.json b/app/react-native/tsconfig.json
deleted file mode 100644
index 6a4f8e20e1b7..000000000000
--- a/app/react-native/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "./src",
-    "paths": {
-      "@emotion/native": ["src/typings.d.ts"]
-    }
-  },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
-}
diff --git a/app/react/README.md b/app/react/README.md
index 5576862408b1..c3958dd00321 100644
--- a/app/react/README.md
+++ b/app/react/README.md
@@ -35,7 +35,9 @@ This preset enables support for all Create React App features, including Sass/SC
 
 ## Typescript
 
-If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.
+`@storybook/react` is now exporting its own types to use with Typescript.
+You don't need to have `@types/storybook__react` installed anymore if it was your case.
+But you probably also need to use types from `@types/node @types/react`.
 
 ## Docs
 
diff --git a/app/react/package.json b/app/react/package.json
index 6963b134ee96..6f936521b67a 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/react"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,40 +22,47 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-constant-elements": "^7.2.0",
+    "@babel/plugin-transform-react-constant-elements": "^7.6.3",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@storybook/node-logger": "5.3.0-rc.0",
-    "@svgr/webpack": "^4.0.3",
-    "@types/webpack-env": "^1.13.7",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@svgr/webpack": "^5.4.0",
+    "@types/webpack-env": "^1.15.2",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
-    "babel-plugin-react-docgen": "^4.0.0-beta.1",
+    "babel-plugin-react-docgen": "^4.1.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.8.0",
     "prop-types": "^15.7.2",
-    "react-dev-utils": "^9.0.0",
+    "react-dev-utils": "^10.0.0",
+    "react-docgen-typescript-loader": "^3.7.2",
     "regenerator-runtime": "^0.13.3",
-    "semver": "^6.0.0",
-    "ts-dedent": "^1.1.0",
-    "webpack": "^4.33.0"
+    "@storybook/semver": "^7.3.2",
+    "ts-dedent": "^1.1.1",
+    "webpack": "^4.43.0"
   },
   "devDependencies": {
-    "@types/mini-css-extract-plugin": "^0.8.0",
-    "@types/node": "^12.12.11",
-    "@types/webpack": "^4.41.0"
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@types/node": "^14.0.10",
+    "@types/webpack": "^4.41.12"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.1",
-    "babel-loader": "^7.0.0 || ^8.0.0",
     "react": "*",
     "react-dom": "*"
   },
@@ -72,5 +72,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/react/src/client/preview/index.test.ts b/app/react/src/client/preview/index.test.ts
index bd25fc3ca828..6bd053669e7e 100644
--- a/app/react/src/client/preview/index.test.ts
+++ b/app/react/src/client/preview/index.test.ts
@@ -18,7 +18,7 @@ describe('preview', () => {
       () =>
         ({
           document: undefined,
-          window: undefined,
+          window: {},
         } as any)
     );
     const api = require('.');
diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx
index 8f4d897f9d4a..f7fe1ccc84c8 100644
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@@ -1,12 +1,13 @@
 import { document } from 'global';
-import React, { Component, ReactElement, StrictMode } from 'react';
+import React, { Component, FunctionComponent, ReactElement, StrictMode } from 'react';
 import ReactDOM from 'react-dom';
-import { RenderMainArgs } from './types';
+
+import { RenderContext } from './types';
 
 const rootEl = document ? document.getElementById('root') : null;
 
 const render = (node: ReactElement, el: Element) =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     ReactDOM.render(
       process.env.STORYBOOK_EXAMPLE_APP ? <StrictMode>{node}</StrictMode> : node,
       el,
@@ -47,11 +48,14 @@ class ErrorBoundary extends Component<{
 }
 
 export default async function renderMain({
-  storyFn: StoryFn,
+  storyFn,
   showMain,
   showException,
   forceRender,
-}: RenderMainArgs) {
+}: RenderContext) {
+  // storyFn has context bound in by now so can be treated as a function component with no args
+  const StoryFn = storyFn as FunctionComponent;
+
   const element = (
     <ErrorBoundary showMain={showMain} showException={showException}>
       <StoryFn />
diff --git a/app/react/src/client/preview/types.ts b/app/react/src/client/preview/types.ts
index 1b85b49c44ec..77efa5ee92e5 100644
--- a/app/react/src/client/preview/types.ts
+++ b/app/react/src/client/preview/types.ts
@@ -1,20 +1,13 @@
-import { FunctionComponent, ReactElement } from 'react';
+import { ReactElement } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+export { RenderContext } from '@storybook/client-api';
 
 export interface ShowErrorArgs {
   title: string;
   description: string;
 }
 
-export interface RenderMainArgs {
-  storyFn: FunctionComponent<any>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  showException: (err: Error) => void;
-  forceRender: boolean;
-}
-
 export type StoryFnReactReturnType = ReactElement<unknown>;
 
 export interface IStorybookStory {
diff --git a/app/react/src/demo/Welcome.tsx b/app/react/src/demo/Welcome.tsx
index e941571d3240..2d5d35e5000a 100644
--- a/app/react/src/demo/Welcome.tsx
+++ b/app/react/src/demo/Welcome.tsx
@@ -5,10 +5,9 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
 } from 'react';
-import PropTypes from 'prop-types';
 
 type MainProps = Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'style'>;
-const Main: FunctionComponent<MainProps> = props => (
+const Main: FunctionComponent<MainProps> = (props) => (
   <article
     {...props}
     style={{
@@ -25,18 +24,12 @@ type TitleProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHead
 const Title: FunctionComponent<TitleProps> = ({ children, ...props }) => (
   <h1 {...props}>{children}</h1>
 );
-Title.propTypes = {
-  children: PropTypes.node,
-};
-Title.defaultProps = {
-  children: undefined,
-};
 
 type NoteProps = Omit<
   DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>,
   'style'
 >;
-const Note: FunctionComponent<NoteProps> = props => (
+const Note: FunctionComponent<NoteProps> = (props) => (
   <p
     {...props}
     style={{
@@ -46,7 +39,7 @@ const Note: FunctionComponent<NoteProps> = props => (
 );
 
 type InlineCodeProps = Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'style'>;
-const InlineCode: FunctionComponent<InlineCodeProps> = props => (
+const InlineCode: FunctionComponent<InlineCodeProps> = (props) => (
   <code
     {...props}
     style={{
@@ -85,14 +78,6 @@ const Link: FunctionComponent<LinkProps> = ({ children, href, target, rel, ...pr
     {children}
   </a>
 );
-Link.propTypes = {
-  href: PropTypes.string,
-  children: PropTypes.node,
-};
-Link.defaultProps = {
-  href: undefined,
-  children: undefined,
-};
 
 type NavButtonProps = Omit<
   DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
@@ -120,16 +105,10 @@ const NavButton: FunctionComponent<NavButtonProps> = ({ children, onClick, ...pr
     {children}
   </button>
 );
-NavButton.propTypes = {
-  children: PropTypes.node,
-};
-NavButton.defaultProps = {
-  children: undefined,
-};
 
-type WelcomeProps = {
+interface WelcomeProps {
   showApp: () => void;
-};
+}
 const Welcome: FunctionComponent<WelcomeProps> = ({ showApp }) => (
   <Main>
     <Title>Welcome to storybook</Title>
@@ -151,7 +130,7 @@ const Welcome: FunctionComponent<WelcomeProps> = ({ showApp }) => (
       You can also edit those components and see changes right away.
       <br />
       (Try editing the <InlineCode>Button</InlineCode> stories located at&nbsp;
-      <InlineCode>src/stories/index.js</InlineCode>
+      <InlineCode>src/stories/1-Button.stories.js</InlineCode>
       .)
     </p>
     <p>
@@ -176,8 +155,5 @@ const Welcome: FunctionComponent<WelcomeProps> = ({ showApp }) => (
   </Main>
 );
 Welcome.displayName = 'Welcome';
-Welcome.defaultProps = {
-  showApp: null,
-};
 
 export { Welcome as default };
diff --git a/app/react/src/server/__mocks__/mockConfig.ts b/app/react/src/server/__mocks__/mockConfig.ts
deleted file mode 100644
index 34b2b5df9687..000000000000
--- a/app/react/src/server/__mocks__/mockConfig.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-class BaseTestPlugin1 {}
-class BaseTestPlugin2 {}
-
-export default {
-  devtool: 'cheap-eval-source-map',
-  resolve: {
-    extensions: ['.js', '.jsx'],
-    alias: {
-      baseAlias: 'base-alias',
-    },
-    modules: [],
-  },
-  module: {
-    noParse: /jquery/,
-    rules: [
-      {
-        test: /\.js$/,
-        include: 'app/baseSrc',
-        loader: 'babel-loader',
-        options: {},
-      },
-    ],
-  },
-  plugins: [new BaseTestPlugin1(), new BaseTestPlugin2()],
-};
diff --git a/app/react/src/server/__mocks__/mockRules.ts b/app/react/src/server/__mocks__/mockRules.ts
deleted file mode 100644
index 3c43a333672b..000000000000
--- a/app/react/src/server/__mocks__/mockRules.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-export default [
-  { parser: { requireEnsure: false } },
-  {
-    test: /\.(js|mjs|jsx|ts|tsx)$/,
-    enforce: 'pre',
-    use: [
-      {
-        options: {
-          formatter: '/mock_folder/node_modules/react-dev-utils/eslintFormatter.js',
-          eslintPath: '/mock_folder/node_modules/eslint/lib/api.js',
-          baseConfig: {
-            extends: ['/mock_folder/node_modules/eslint-config-react-app/index.js'],
-          },
-          ignore: false,
-          useEslintrc: false,
-        },
-        loader: '/mock_folder/node_modules/eslint-loader/index.js',
-      },
-    ],
-    include: '/mock_folder/src',
-  },
-  {
-    oneOf: [
-      {
-        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-        loader: '/mock_folder/node_modules/url-loader/dist/cjs.js',
-        options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' },
-      },
-      {
-        test: /\.(js|mjs|jsx|ts|tsx)$/,
-        include: '/mock_folder/src',
-        loader: '/mock_folder/node_modules/babel-loader/lib/index.js',
-        options: {
-          customize: '/mock_folder/node_modules/babel-preset-react-app/webpack-overrides.js',
-          babelrc: false,
-          configFile: false,
-          presets: ['/mock_folder/node_modules/babel-preset-react-app/index.js'],
-          cacheIdentifier:
-            'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@',
-          plugins: [
-            [
-              '/mock_folder/node_modules/babel-plugin-named-asset-import/index.js',
-              {
-                loaderMap: {
-                  svg: {
-                    ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                  },
-                },
-              },
-            ],
-          ],
-          cacheDirectory: true,
-          cacheCompression: false,
-          compact: false,
-        },
-      },
-      {
-        test: /\.(js|mjs)$/,
-        exclude: {},
-        loader: '/mock_folder/node_modules/babel-loader/lib/index.js',
-        options: {
-          babelrc: false,
-          configFile: false,
-          compact: false,
-          presets: [
-            ['/mock_folder/node_modules/babel-preset-react-app/dependencies.js', { helpers: true }],
-          ],
-          cacheDirectory: true,
-          cacheCompression: false,
-          cacheIdentifier:
-            'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@',
-          sourceMaps: false,
-        },
-      },
-      {
-        test: /\.css$/,
-        exclude: {},
-        use: [
-          '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
-          {
-            loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
-            options: { importLoaders: 1, sourceMap: false },
-          },
-          {
-            loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
-            options: { ident: 'postcss', sourceMap: false },
-          },
-        ],
-        sideEffects: true,
-      },
-      {
-        test: /\.module\.css$/,
-        use: [
-          '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
-          {
-            loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
-            options: { importLoaders: 1, sourceMap: false, modules: true },
-          },
-          {
-            loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
-            options: { ident: 'postcss', sourceMap: false },
-          },
-        ],
-      },
-      {
-        test: /\.(scss|sass)$/,
-        exclude: {},
-        use: [
-          '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
-          {
-            loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
-            options: { importLoaders: 2, sourceMap: false },
-          },
-          {
-            loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
-            options: { ident: 'postcss', sourceMap: false },
-          },
-          {
-            loader: '/mock_folder/node_modules/sass-loader/lib/loader.js',
-            options: { sourceMap: false },
-          },
-        ],
-        sideEffects: true,
-      },
-      {
-        test: /\.module\.(scss|sass)$/,
-        use: [
-          '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js',
-          {
-            loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js',
-            options: { importLoaders: 2, sourceMap: false, modules: true },
-          },
-          {
-            loader: '/mock_folder/node_modules/postcss-loader/src/index.js',
-            options: { ident: 'postcss', sourceMap: false },
-          },
-          {
-            loader: '/mock_folder/node_modules/sass-loader/lib/loader.js',
-            options: { sourceMap: false },
-          },
-        ],
-      },
-      {
-        loader: '/mock_folder/node_modules/file-loader/dist/cjs.js',
-        exclude: [{}, {}, {}],
-        options: { name: 'static/media/[name].[hash:8].[ext]' },
-      },
-    ],
-  },
-];
diff --git a/app/react/src/server/__mocks__/react-scripts-2-0-0/config/webpack.config.dev.js b/app/react/src/server/__mocks__/react-scripts-2-0-0/config/webpack.config.dev.js
deleted file mode 100644
index 072176e52878..000000000000
--- a/app/react/src/server/__mocks__/react-scripts-2-0-0/config/webpack.config.dev.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-class CRATestPlugin1 {}
-class CRATestPlugin2 {}
-
-module.exports = {
-  devtool: 'source-map',
-  resolve: {
-    extensions: [],
-    alias: {
-      'react-native': 'react-native-web',
-    },
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {},
-            loader: 'eslint-loader',
-          },
-        ],
-        include: 'app/src',
-      },
-      {
-        test: /\.(js|mjs|jsx|ts|tsx)$/,
-        include: 'app/src',
-        loader: 'babel-loader',
-        options: {},
-      },
-      {
-        test: cssRegex,
-        exclude: cssModuleRegex,
-        use: 'style-loader',
-        sideEffects: true,
-      },
-      {
-        test: cssModuleRegex,
-        use: 'style-loader',
-      },
-      {
-        test: sassRegex,
-        exclude: sassModuleRegex,
-        use: 'sass-loader',
-        sideEffects: true,
-      },
-      {
-        test: sassModuleRegex,
-        use: 'sass-loader',
-      },
-    ],
-  },
-  plugins: [new CRATestPlugin1(), new CRATestPlugin2()],
-  optimization: {
-    minimize: true,
-  },
-};
diff --git a/app/react/src/server/__mocks__/react-scripts-2-0-0/package.json b/app/react/src/server/__mocks__/react-scripts-2-0-0/package.json
deleted file mode 100644
index c83272b54adf..000000000000
--- a/app/react/src/server/__mocks__/react-scripts-2-0-0/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "react-scripts",
-  "version": "2.0.0"
-}
diff --git a/app/react/src/server/__mocks__/react-scripts-2-1-0/config/webpack.config.dev.js b/app/react/src/server/__mocks__/react-scripts-2-1-0/config/webpack.config.dev.js
deleted file mode 100644
index 072176e52878..000000000000
--- a/app/react/src/server/__mocks__/react-scripts-2-1-0/config/webpack.config.dev.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-class CRATestPlugin1 {}
-class CRATestPlugin2 {}
-
-module.exports = {
-  devtool: 'source-map',
-  resolve: {
-    extensions: [],
-    alias: {
-      'react-native': 'react-native-web',
-    },
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {},
-            loader: 'eslint-loader',
-          },
-        ],
-        include: 'app/src',
-      },
-      {
-        test: /\.(js|mjs|jsx|ts|tsx)$/,
-        include: 'app/src',
-        loader: 'babel-loader',
-        options: {},
-      },
-      {
-        test: cssRegex,
-        exclude: cssModuleRegex,
-        use: 'style-loader',
-        sideEffects: true,
-      },
-      {
-        test: cssModuleRegex,
-        use: 'style-loader',
-      },
-      {
-        test: sassRegex,
-        exclude: sassModuleRegex,
-        use: 'sass-loader',
-        sideEffects: true,
-      },
-      {
-        test: sassModuleRegex,
-        use: 'sass-loader',
-      },
-    ],
-  },
-  plugins: [new CRATestPlugin1(), new CRATestPlugin2()],
-  optimization: {
-    minimize: true,
-  },
-};
diff --git a/app/react/src/server/__mocks__/react-scripts-2-1-0/package.json b/app/react/src/server/__mocks__/react-scripts-2-1-0/package.json
deleted file mode 100644
index 14f78409f092..000000000000
--- a/app/react/src/server/__mocks__/react-scripts-2-1-0/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "react-scripts",
-  "version": "2.1.0"
-}
diff --git a/app/react/src/server/__snapshots__/cra-config.test.ts.snap b/app/react/src/server/__snapshots__/cra-config.test.ts.snap
deleted file mode 100644
index 73d95cb829ec..000000000000
--- a/app/react/src/server/__snapshots__/cra-config.test.ts.snap
+++ /dev/null
@@ -1,128 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`cra-config when used with react-scripts < 2.1.0 should apply styling webpack rules 1`] = `
-Object {
-  "devtool": "cheap-eval-source-map",
-  "module": Object {
-    "noParse": /jquery/,
-    "rules": Array [
-      Object {
-        "include": "app/baseSrc",
-        "loader": "babel-loader",
-        "options": Object {},
-        "test": /\\\\\\.js\\$/,
-      },
-      Object {
-        "exclude": /\\\\\\.module\\\\\\.css\\$/,
-        "sideEffects": true,
-        "test": /\\\\\\.css\\$/,
-        "use": "style-loader",
-      },
-      Object {
-        "test": /\\\\\\.module\\\\\\.css\\$/,
-        "use": "style-loader",
-      },
-      Object {
-        "exclude": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
-        "sideEffects": true,
-        "test": /\\\\\\.\\(scss\\|sass\\)\\$/,
-        "use": "sass-loader",
-      },
-      Object {
-        "test": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
-        "use": "sass-loader",
-      },
-    ],
-  },
-  "plugins": Array [
-    BaseTestPlugin1 {},
-    BaseTestPlugin2 {},
-  ],
-  "resolve": Object {
-    "alias": Object {
-      "baseAlias": "base-alias",
-    },
-    "extensions": Array [
-      ".js",
-      ".jsx",
-    ],
-    "modules": Array [],
-  },
-  "resolveLoader": Object {
-    "modules": Array [
-      "node_modules",
-      "/app/react/src/server/__mocks__/react-scripts-2-0-0/node_modules",
-    ],
-  },
-}
-`;
-
-exports[`cra-config when used with react-scripts >= 2.1.0 should apply Babel, styling rules and merge plugins 1`] = `
-Object {
-  "devtool": "cheap-eval-source-map",
-  "module": Object {
-    "noParse": /jquery/,
-    "rules": Array [
-      Object {
-        "include": "app/baseSrc",
-        "loader": "babel-loader",
-        "options": Object {},
-        "test": /\\\\\\.js\\$/,
-      },
-      Object {
-        "exclude": /\\\\\\.module\\\\\\.css\\$/,
-        "sideEffects": true,
-        "test": /\\\\\\.css\\$/,
-        "use": "style-loader",
-      },
-      Object {
-        "test": /\\\\\\.module\\\\\\.css\\$/,
-        "use": "style-loader",
-      },
-      Object {
-        "exclude": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
-        "sideEffects": true,
-        "test": /\\\\\\.\\(scss\\|sass\\)\\$/,
-        "use": "sass-loader",
-      },
-      Object {
-        "test": /\\\\\\.module\\\\\\.\\(scss\\|sass\\)\\$/,
-        "use": "sass-loader",
-      },
-      Object {
-        "include": Array [
-          "app/src",
-          "/test-project",
-        ],
-        "loader": "babel-loader",
-        "options": Object {},
-        "test": /\\\\\\.\\(js\\|mjs\\|jsx\\|ts\\|tsx\\)\\$/,
-      },
-    ],
-  },
-  "plugins": Array [
-    BaseTestPlugin1 {},
-    BaseTestPlugin2 {},
-    CRATestPlugin1 {},
-    CRATestPlugin2 {},
-  ],
-  "resolve": Object {
-    "alias": Object {
-      "baseAlias": "base-alias",
-    },
-    "extensions": Array [
-      ".js",
-      ".jsx",
-      ".ts",
-      ".tsx",
-    ],
-    "modules": Array [],
-  },
-  "resolveLoader": Object {
-    "modules": Array [
-      "node_modules",
-      "/app/react/src/server/__mocks__/react-scripts-2-1-0/node_modules",
-    ],
-  },
-}
-`;
diff --git a/app/react/src/server/cra-config.test.ts b/app/react/src/server/cra-config.test.ts
index 4c4425dd8482..c6b1a57c30ea 100644
--- a/app/react/src/server/cra-config.test.ts
+++ b/app/react/src/server/cra-config.test.ts
@@ -1,30 +1,18 @@
-/* eslint-disable jest/no-mocks-import */
 import fs from 'fs';
-import path from 'path';
-import {
-  applyCRAWebpackConfig,
-  getModulePath,
-  getReactScriptsPath,
-  getTypeScriptRules,
-} from './cra-config';
-import mockRules from './__mocks__/mockRules';
-import mockConfig from './__mocks__/mockConfig';
+import { getReactScriptsPath } from './cra-config';
 
 jest.mock('fs', () => ({
   realpathSync: jest.fn(() => '/test-project'),
   readFileSync: jest.fn(),
   existsSync: jest.fn(() => true),
 }));
-jest.mock('mini-css-extract-plugin', () => {});
 
 const SCRIPT_PATH = '.bin/react-scripts';
 
-const stripCwd = (loaderPath: string) => loaderPath.replace(process.cwd(), '');
-
 describe('cra-config', () => {
   describe('when used with the default react-scripts package', () => {
     beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(filePath =>
+      ((fs.realpathSync as unknown) as jest.Mock).mockImplementationOnce((filePath) =>
         filePath.replace(SCRIPT_PATH, `react-scripts/${SCRIPT_PATH}`)
       );
     });
@@ -38,7 +26,7 @@ describe('cra-config', () => {
 
   describe('when used with a custom react-scripts package', () => {
     beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(filePath =>
+      ((fs.realpathSync as unknown) as jest.Mock).mockImplementationOnce((filePath) =>
         filePath.replace(SCRIPT_PATH, `custom-react-scripts/${SCRIPT_PATH}`)
       );
     });
@@ -54,9 +42,9 @@ describe('cra-config', () => {
     beforeEach(() => {
       // In case of .bin/react-scripts is not symlink (like it happens on Windows),
       // realpathSync() method does not translate the path.
-      fs.realpathSync.mockImplementationOnce(filePath => filePath);
+      ((fs.realpathSync as unknown) as jest.Mock).mockImplementationOnce((filePath) => filePath);
 
-      fs.readFileSync.mockImplementationOnce(
+      ((fs.readFileSync as unknown) as jest.Mock).mockImplementationOnce(
         () => `#!/bin/sh
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
@@ -81,66 +69,4 @@ exit $ret`
       );
     });
   });
-
-  describe('when used with TypeScript', () => {
-    it('should return the correct config', () => {
-      const rules = getTypeScriptRules(mockRules, './.storybook');
-      expect(rules.length).toBe(2);
-    });
-
-    // Allows using TypeScript in the `.storybook` (or config) folder.
-    it('should add the Storybook config directory to `include` for all TS related rules', () => {
-      const rules = getTypeScriptRules(mockRules, './.storybook');
-      expect(
-        rules.every(rule => rule.include.find(filePath => filePath.includes('.storybook')))
-      ).toBe(true);
-    });
-
-    it('should get the baseUrl from a tsconfig.json', () => {
-      jest.spyOn(path, 'join').mockImplementation(() => 'project/tsconfig.json');
-      jest.mock(
-        'project/tsconfig.json',
-        () => ({
-          compilerOptions: {
-            baseUrl: 'src',
-          },
-        }),
-        { virtual: true }
-      );
-      expect(getModulePath()).toEqual('src');
-      path.join.mockRestore();
-    });
-  });
-
-  describe('when used with react-scripts < 2.1.0', () => {
-    beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(() =>
-        path.join(__dirname, '__mocks__/react-scripts-2-0-0/sub1/sub2')
-      );
-      getReactScriptsPath({ noCache: true });
-    });
-
-    it('should apply styling webpack rules', () => {
-      const webpackConfig = applyCRAWebpackConfig(mockConfig, '/test-project');
-      // We don't want full paths in snapshots.
-      webpackConfig.resolveLoader.modules = webpackConfig.resolveLoader.modules.map(stripCwd);
-      expect(webpackConfig).toMatchSnapshot();
-    });
-  });
-
-  describe('when used with react-scripts >= 2.1.0', () => {
-    beforeEach(() => {
-      fs.realpathSync.mockImplementationOnce(() =>
-        path.join(__dirname, '__mocks__/react-scripts-2-1-0/sub1/sub2')
-      );
-      getReactScriptsPath({ noCache: true });
-    });
-
-    it('should apply Babel, styling rules and merge plugins', () => {
-      const webpackConfig = applyCRAWebpackConfig(mockConfig, '/test-project');
-      // We don't want full paths in snapshots.
-      webpackConfig.resolveLoader.modules = webpackConfig.resolveLoader.modules.map(stripCwd);
-      expect(webpackConfig).toMatchSnapshot();
-    });
-  });
 });
diff --git a/app/react/src/server/cra-config.ts b/app/react/src/server/cra-config.ts
index a614d4a7f16e..ab6815c42382 100644
--- a/app/react/src/server/cra-config.ts
+++ b/app/react/src/server/cra-config.ts
@@ -1,18 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-import semver from 'semver';
-import { Configuration, Plugin, RuleSetRule } from 'webpack';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { normalizeCondition } from 'webpack/lib/RuleSet';
+import semver from '@storybook/semver';
 import { logger } from '@storybook/node-logger';
 
-const JSCONFIG = 'jsconfig.json';
-const TSCONFIG = 'tsconfig.json';
-
 const appDirectory = fs.realpathSync(process.cwd());
-const cssExtensions = ['.css', '.scss', '.sass'];
-const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass'];
-const typeScriptExtensions = ['.ts', '.tsx'];
 
 let reactScriptsPath: string;
 
@@ -69,146 +60,3 @@ export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
     return false;
   }
 }
-
-export const getRules = (extensions: string[]) => (rules: RuleSetRule[]) =>
-  rules.reduce((craRules, rule) => {
-    // If at least one extension satisfies the rule test, the rule is one
-    // we want to extract
-    if (rule.test && extensions.some(normalizeCondition(rule.test))) {
-      // If the base test is for extensions, return early
-      return craRules.concat(rule);
-    }
-
-    // Get any rules contained in rule.oneOf
-    if (!rule.test && rule.oneOf) {
-      craRules.push(...getRules(extensions)(rule.oneOf));
-    }
-
-    // Get any rules contained in rule.rules
-    if (!rule.test && rule.rules) {
-      craRules.push(...getRules(extensions)(rule.rules));
-    }
-
-    return craRules;
-  }, [] as RuleSetRule[]);
-
-const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
-
-export const getTypeScriptRules = (webpackConfigRules: RuleSetRule[], configDir: string) => {
-  const rules = getRules(typeScriptExtensions)(webpackConfigRules);
-
-  // Adds support for using TypeScript in the `.storybook` (or config) folder.
-  return rules.reduce((accRules, rule) => {
-    // Resolves an issue where this config is parsed twice (#4903).
-    if (typeof rule.include !== 'string') {
-      return [...accRules, rule];
-    }
-
-    return [
-      ...accRules,
-      {
-        ...rule,
-        include: [rule.include, path.resolve(configDir)],
-      },
-    ];
-  }, [] as RuleSetRule[]);
-};
-
-export const getModulePath = () => {
-  // As with CRA, we only support `jsconfig.json` if `tsconfig.json` doesn't exist.
-  let configName;
-  if (fs.existsSync(path.join(appDirectory, TSCONFIG))) {
-    configName = TSCONFIG;
-  } else if (fs.existsSync(path.join(appDirectory, JSCONFIG))) {
-    configName = JSCONFIG;
-  }
-
-  if (configName) {
-    // eslint-disable-next-line import/no-dynamic-require,global-require
-    const config = require(path.join(appDirectory, configName));
-    return config.compilerOptions && config.compilerOptions.baseUrl;
-  }
-  return false;
-};
-
-function mergePlugins(basePlugins: Plugin[], additionalPlugins: Plugin[]) {
-  return [...basePlugins, ...additionalPlugins].reduce((plugins, plugin) => {
-    if (
-      plugins.some(includedPlugin => includedPlugin.constructor.name === plugin.constructor.name)
-    ) {
-      return plugins;
-    }
-    return [...plugins, plugin];
-  }, []);
-}
-
-export function getCraWebpackConfig(mode: 'development' | 'production' | 'none') {
-  const pathToReactScripts = getReactScriptsPath();
-
-  const craWebpackConfig =
-    mode === 'production' ? 'config/webpack.config.prod.js' : 'config/webpack.config.dev.js';
-
-  let pathToWebpackConfig = path.join(pathToReactScripts, craWebpackConfig);
-
-  if (!fs.existsSync(pathToWebpackConfig)) {
-    pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config.js');
-  }
-
-  // eslint-disable-next-line import/no-dynamic-require,global-require
-  const webpackConfig = require(pathToWebpackConfig);
-
-  if (typeof webpackConfig === 'function') {
-    return webpackConfig(mode);
-  }
-
-  return webpackConfig;
-}
-
-export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: string): Configuration {
-  // Check if the user can use TypeScript (react-scripts version 2.1+).
-  const hasTsSupport = isReactScriptsInstalled('2.1.0');
-
-  const tsExtensions = hasTsSupport ? typeScriptExtensions : [];
-  const extensions = [...cssExtensions, ...tsExtensions];
-
-  // Support for this was added in `react-scripts@3.0.0`.
-  // https://github.com/facebook/create-react-app/pull/6656
-  const modulePath = isReactScriptsInstalled('3.0.0') && getModulePath();
-
-  // Remove any rules from baseConfig that test true for any one of the extensions
-  const filteredBaseRules = baseConfig.module.rules.filter(
-    rule => !rule.test || !extensions.some(normalizeCondition(rule.test))
-  );
-
-  //  Load create-react-app config
-  const craWebpackConfig = getCraWebpackConfig(baseConfig.mode);
-
-  const craStyleRules = getStyleRules(craWebpackConfig.module.rules);
-  const craTypeScriptRules = hasTsSupport
-    ? getTypeScriptRules(craWebpackConfig.module.rules, configDir)
-    : [];
-
-  //  Add css minification for production
-  const plugins = [...baseConfig.plugins];
-  if (baseConfig.mode === 'production') {
-    // @ts-ignore
-    plugins.push(new MiniCssExtractPlugin());
-  }
-
-  return {
-    ...baseConfig,
-    module: {
-      ...baseConfig.module,
-      rules: [...filteredBaseRules, ...craStyleRules, ...craTypeScriptRules],
-    },
-    plugins: mergePlugins(plugins, hasTsSupport ? craWebpackConfig.plugins : []),
-    resolve: {
-      ...baseConfig.resolve,
-      extensions: [...baseConfig.resolve.extensions, ...tsExtensions],
-      modules: baseConfig.resolve.modules.concat(modulePath || []),
-    },
-    resolveLoader: {
-      modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')],
-    },
-  };
-}
diff --git a/app/react/src/server/framework-preset-cra.ts b/app/react/src/server/framework-preset-cra.ts
index 6461659522b2..8239290acc53 100644
--- a/app/react/src/server/framework-preset-cra.ts
+++ b/app/react/src/server/framework-preset-cra.ts
@@ -1,11 +1,9 @@
-import path from 'path';
 import { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
-import { applyCRAWebpackConfig, getReactScriptsPath, isReactScriptsInstalled } from './cra-config';
+import { isReactScriptsInstalled } from './cra-config';
 
 type Preset = string | { name: string };
 
-// Disable the built-in preset if the new preset is detected.
 const checkForNewPreset = (presetsList: Preset[]) => {
   const hasNewPreset = presetsList.some((preset: Preset) => {
     const presetName = typeof preset === 'string' ? preset : preset.name;
@@ -15,63 +13,18 @@ const checkForNewPreset = (presetsList: Preset[]) => {
   if (!hasNewPreset) {
     logger.warn('Storybook support for Create React App is now a separate preset.');
     logger.warn(
-      'To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.'
+      'To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.'
     );
-    logger.warn('The built-in preset will be disabled in Storybook 6.0.');
-    return false;
+    logger.warn('The built-in preset has been disabled in Storybook 6.0.');
   }
-
-  return true;
 };
 
 export function webpackFinal(
   config: Configuration,
   { presetsList, configDir }: { presetsList: Preset[]; configDir: string }
 ) {
-  if (checkForNewPreset(presetsList)) {
-    return config;
-  }
-  if (!isReactScriptsInstalled()) {
-    logger.info('=> Using base config because react-scripts is not installed.');
-    return config;
-  }
-
-  logger.info('=> Loading create-react-app config.');
-  return applyCRAWebpackConfig(config, configDir);
-}
-
-export function managerWebpack(config: Configuration, { presetsList }: { presetsList: Preset[] }) {
-  if (!isReactScriptsInstalled() || checkForNewPreset(presetsList)) {
-    return config;
+  if (isReactScriptsInstalled()) {
+    checkForNewPreset(presetsList);
   }
-
-  return {
-    ...config,
-    resolveLoader: {
-      modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')],
-    },
-  };
-}
-
-export function babelDefault(config: Configuration, { presetsList }: { presetsList: Preset[] }) {
-  if (!isReactScriptsInstalled() || checkForNewPreset(presetsList)) {
-    return config;
-  }
-
-  return {
-    ...config,
-    presets: [require.resolve('babel-preset-react-app')],
-    plugins: [
-      [
-        require.resolve('babel-plugin-named-asset-import'),
-        {
-          loaderMap: {
-            svg: {
-              ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
-            },
-          },
-        },
-      ],
-    ],
-  };
+  return config;
 }
diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts
index 1b1f0e27ca87..33bde8f2862e 100644
--- a/app/react/src/server/framework-preset-react-docgen.test.ts
+++ b/app/react/src/server/framework-preset-react-docgen.test.ts
@@ -1,76 +1,36 @@
-import { TransformOptions } from '@babel/core';
 import * as preset from './framework-preset-react-docgen';
 
 describe('framework-preset-react-docgen', () => {
   const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
 
-  it('should return the config with the extra plugins when `plugins` is an array.', () => {
+  it('should return the config with the extra plugin', () => {
     const babelConfig = {
       babelrc: false,
       presets: ['env', 'foo-preset'],
       plugins: ['foo-plugin'],
     };
 
-    const config = preset.babel(babelConfig);
-
-    expect(config).toEqual({
-      babelrc: false,
-      plugins: [
-        'foo-plugin',
-        [
-          babelPluginReactDocgenPath,
-          {
-            DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-          },
-        ],
-      ],
-      presets: ['env', 'foo-preset'],
+    const config = preset.babel(babelConfig, {
+      typescriptOptions: { check: false, reactDocgen: 'react-docgen' },
     });
-  });
-
-  it('should return the config with the extra plugins when `plugins` is not an array.', () => {
-    const babelConfig: TransformOptions = {
-      babelrc: false,
-      presets: ['env', 'foo-preset'],
-      plugins: ['bar-plugin'],
-    };
-
-    const config = preset.babel(babelConfig);
 
     expect(config).toEqual({
       babelrc: false,
-      plugins: [
-        'bar-plugin',
-        [
-          babelPluginReactDocgenPath,
-          {
-            DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-          },
-        ],
-      ],
-      presets: ['env', 'foo-preset'],
-    });
-  });
-
-  it('should return the config only with the extra plugins when `plugins` is not present.', () => {
-    const babelConfig = {
-      babelrc: false,
+      plugins: ['foo-plugin'],
       presets: ['env', 'foo-preset'],
-    };
-
-    const config = preset.babel(babelConfig);
-
-    expect(config).toEqual({
-      babelrc: false,
-      plugins: [
-        [
-          babelPluginReactDocgenPath,
-          {
-            DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-          },
-        ],
+      overrides: [
+        {
+          test: /\.(mjs|tsx?|jsx?)$/,
+          plugins: [
+            [
+              babelPluginReactDocgenPath,
+              {
+                DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+              },
+            ],
+          ],
+        },
       ],
-      presets: ['env', 'foo-preset'],
     });
   });
 });
diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts
index fae63672c360..a525c8d03f94 100644
--- a/app/react/src/server/framework-preset-react-docgen.ts
+++ b/app/react/src/server/framework-preset-react-docgen.ts
@@ -1,22 +1,50 @@
-import { TransformOptions } from '@babel/core';
+import type { TransformOptions } from '@babel/core';
+import type { Configuration } from 'webpack';
+import type { StorybookOptions } from '@storybook/core/types';
 
-export function babel(config: TransformOptions) {
-  // Ensure plugins are defined or fallback to an array to avoid empty values.
-  const babelConfigPlugins = config.plugins || [];
-
-  const extraPlugins = [
-    [
-      require.resolve('babel-plugin-react-docgen'),
+export function babel(config: TransformOptions, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen } = typescriptOptions;
+  if (!reactDocgen) {
+    return config;
+  }
+  return {
+    ...config,
+    overrides: [
       {
-        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+        plugins: [
+          [
+            require.resolve('babel-plugin-react-docgen'),
+            {
+              DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+            },
+          ],
+        ],
       },
     ],
-  ];
+  };
+}
 
-  // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
-  // as a single value, if it is an `Array` it will spread.
+export function webpackFinal(config: Configuration, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions;
+  if (reactDocgen !== 'react-docgen-typescript') return config;
   return {
     ...config,
-    plugins: [].concat(babelConfigPlugins, extraPlugins),
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.tsx?$/,
+          // include: path.resolve(__dirname, "../src"),
+          use: [
+            {
+              loader: require.resolve('react-docgen-typescript-loader'),
+              options: reactDocgenTypescriptOptions,
+            },
+          ],
+        },
+      ],
+    },
   };
 }
diff --git a/app/react/src/typings.d.ts b/app/react/src/typings.d.ts
index 10c6c8e3f99c..fec12d9f09eb 100644
--- a/app/react/src/typings.d.ts
+++ b/app/react/src/typings.d.ts
@@ -1,4 +1,5 @@
 declare module '@storybook/core/*';
+declare module '@storybook/semver';
 declare module 'global';
 // todo check for correct types
 declare module 'webpack/lib/RuleSet';
diff --git a/app/riot/package.json b/app/riot/package.json
index 11f6e8f383b4..b8c6eafeb730 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/riot",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,43 +15,47 @@
     "directory": "app/riot"
   },
   "license": "MIT",
+  "main": "dist/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
   "files": [
     "bin/**/*",
     "dist/**/*",
     "README.md",
     "standalone.js",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/client/index.js",
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.3.0-rc.0",
+    "@storybook/core": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "raw-loader": "^3.1.0",
+    "raw-loader": "^4.0.1",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/preset-env": "^7.4.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0"
+    "@babel/preset-react": "^7.7.0"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
+    "@babel/core": "*",
+    "react": "*",
+    "react-dom": "*",
     "riot": "^3.0.0 || ^4.0.0",
     "riot-compiler": "^3.5.1 || ^4.0.0",
     "riot-hot-reload": "^1.0.0",
-    "riot-tag-loader": "^2.0.0 || ^3.0.0"
+    "riot-tag-loader": "^2.0.0 || ^3.0.0",
+    "webpack": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -59,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap b/app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap
index 6e5c63342819..b67db362d53c 100644
--- a/app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap
+++ b/app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap
@@ -1,7 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render a riot element can accept a constructor 1`] = `"<simpletest hacked=\\"true\\" test=\\"with a parameter\\"><div>HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
+exports[`render a riot element can accept a constructor 1`] = `
+<simpletest hacked="true"
+            test="with a parameter"
+>
+  <div>
+    HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+  </div>
+</simpletest>
+`;
 
-exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
+exports[`render a riot element can nest several tags 1`] = `
+<matriochka>
+  <div>
+    <tag1>
+      <div>
+        Inside tag1:
+        <ul>
+          <li>
+            <tag2>
+              <div>
+                Inside tag2:
+                <ul>
+                  <li>
+                    <tag3>
+                      <div>
+                        Inside tag3:
+                        <ul>
+                          <li>
+                            <tag4>
+                              <div>
+                                Inside tag4:
+                                <ul>
+                                  <li>
+                                    <tag5>
+                                      <div>
+                                        Inside tag5:
+                                        <ul>
+                                          <li>
+                                            Content
+                                          </li>
+                                        </ul>
+                                      </div>
+                                    </tag5>
+                                  </li>
+                                </ul>
+                              </div>
+                            </tag4>
+                          </li>
+                        </ul>
+                      </div>
+                    </tag3>
+                  </li>
+                </ul>
+              </div>
+            </tag2>
+          </li>
+        </ul>
+      </div>
+    </tag1>
+  </div>
+</matriochka>
+`;
 
-exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
+exports[`render a riot element can template some vars 1`] = `
+<simpletest test="with a parameter">
+  <div>
+    simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+  </div>
+</simpletest>
+`;
diff --git a/app/riot/src/client/preview/render.js b/app/riot/src/client/preview/render.js
index 3138feb94063..f17ee2596383 100644
--- a/app/riot/src/client/preview/render.js
+++ b/app/riot/src/client/preview/render.js
@@ -5,8 +5,8 @@ import { render as renderRiot } from './rendering';
 
 export default function renderMain({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain = () => {},
   showError = () => {},
 }) {
@@ -19,7 +19,7 @@ export default function renderMain({
   const rendered = renderRiot(element);
   if (!rendered) {
     showError({
-      title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a riot snippet or a riot component from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the component snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
diff --git a/app/riot/src/client/preview/rendering/stringified.js b/app/riot/src/client/preview/rendering/stringified.js
index d6a888e69a39..4a7a732b34a9 100644
--- a/app/riot/src/client/preview/rendering/stringified.js
+++ b/app/riot/src/client/preview/rendering/stringified.js
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import { mount, unregister, tag2 as tag } from 'riot';
 import * as riot from 'riot';
 import compiler from 'riot-compiler';
@@ -26,10 +25,7 @@ function compileText(code, rootName) {
     code.substring(sourceCodeEndOfHtml);
   const sourceCode =
     rootName === 'root' ? `<root>${sourceCodeReformatted}</root>` : sourceCodeReformatted;
-  return compiler
-    .compile(sourceCode, {})
-    .replace(alreadyCompiledMarker, '')
-    .trim();
+  return compiler.compile(sourceCode, {}).replace(alreadyCompiledMarker, '').trim();
 }
 
 export default function renderStringified({
@@ -38,10 +34,11 @@ export default function renderStringified({
   tagConstructor,
 }) {
   const tag2 = tag;
-  tags.forEach(oneTag => {
+  tags.forEach((input) => {
+    const oneTag = input || {};
     const rootName = oneTag.boundAs || guessRootName(oneTag);
-    const { content } = oneTag || {};
-    const code = content ? content.trim() : oneTag || '';
+    const { content } = oneTag;
+    const code = content ? content.trim() : input || '';
     const compiled = code.includes(alreadyCompiledMarker) ? code : compileText(code, rootName);
     unregister(rootName);
     eval(getRidOfRiotNoise(`${compiled}`)); // eslint-disable-line no-eval
diff --git a/app/server/README.md b/app/server/README.md
new file mode 100644
index 000000000000..37bc6240d2e3
--- /dev/null
+++ b/app/server/README.md
@@ -0,0 +1,25 @@
+# Storybook for Server
+
+---
+
+Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-app
+npx -p @storybook/cli sb init -t server
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
diff --git a/app/server/bin/build.js b/app/server/bin/build.js
new file mode 100755
index 000000000000..26142ec0af29
--- /dev/null
+++ b/app/server/bin/build.js
@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');
diff --git a/app/server/bin/index.js b/app/server/bin/index.js
new file mode 100755
index 000000000000..2e96258ce63d
--- /dev/null
+++ b/app/server/bin/index.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');
diff --git a/app/server/package.json b/app/server/package.json
new file mode 100644
index 000000000000..112a6be7d2e4
--- /dev/null
+++ b/app/server/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@storybook/server",
+  "version": "6.0.0-beta.21",
+  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/server",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/server"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/node-logger": "^5.2.8",
+    "@types/webpack-env": "^1.15.2",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "regenerator-runtime": "^0.13.3",
+    "safe-identifier": "^0.4.1",
+    "ts-dedent": "^1.1.1"
+  },
+  "devDependencies": {
+    "fs-extra": "^9.0.0"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+}
diff --git a/app/polymer/src/client/index.js b/app/server/src/client/index.ts
similarity index 100%
rename from app/polymer/src/client/index.js
rename to app/server/src/client/index.ts
diff --git a/app/server/src/client/preview/globals.ts b/app/server/src/client/preview/globals.ts
new file mode 100644
index 000000000000..90dca4aa3750
--- /dev/null
+++ b/app/server/src/client/preview/globals.ts
@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'SERVER';
diff --git a/app/server/src/client/preview/index.ts b/app/server/src/client/preview/index.ts
new file mode 100644
index 000000000000..bccce6b8ac26
--- /dev/null
+++ b/app/server/src/client/preview/index.ts
@@ -0,0 +1,43 @@
+import { start } from '@storybook/core/client';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+
+import './globals';
+import { renderMain as render, setFetchStoryHtml } from './render';
+import { StoryFnServerReturnType, IStorybookSection, ConfigureOptionsArgs } from './types';
+
+const framework = 'server';
+
+interface ClientApi extends ClientStoryApi<StoryFnServerReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule, options?: ConfigureOptionsArgs): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+const setRenderFetchAndConfigure: ClientApi['configure'] = (loader, module, options) => {
+  if (options && options.fetchStoryHtml) {
+    setFetchStoryHtml(options.fetchStoryHtml);
+  }
+  api.configure(loader, module, framework);
+};
+
+export const configure: ClientApi['configure'] = setRenderFetchAndConfigure;
+export const {
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  setAddon,
+  forceReRender,
+  getStorybook,
+  raw,
+} = api.clientApi;
diff --git a/app/server/src/client/preview/render.ts b/app/server/src/client/preview/render.ts
new file mode 100644
index 000000000000..904ac552a39b
--- /dev/null
+++ b/app/server/src/client/preview/render.ts
@@ -0,0 +1,61 @@
+import { document, fetch, Node } from 'global';
+import dedent from 'ts-dedent';
+import { RenderContext, FetchStoryHtmlType } from './types';
+
+const rootElement = document.getElementById('root');
+
+let fetchStoryHtml: FetchStoryHtmlType = async (url, path, params) => {
+  const fetchUrl = new URL(`${url}/${path}`);
+  fetchUrl.search = new URLSearchParams(params).toString();
+
+  const response = await fetch(fetchUrl);
+  return response.text();
+};
+
+export async function renderMain({
+  storyFn,
+  id,
+  kind,
+  name,
+  showMain,
+  showError,
+  forceRender,
+  parameters,
+}: RenderContext) {
+  const storyParams = storyFn();
+
+  const {
+    server: { url, id: storyId, params },
+  } = parameters;
+
+  const fetchId = storyId || id;
+  const fetchParams = { ...params, ...storyParams };
+  const element = await fetchStoryHtml(url, fetchId, fetchParams);
+
+  showMain();
+  if (typeof element === 'string') {
+    rootElement.innerHTML = element;
+  } else if (element instanceof Node) {
+    // Don't re-mount the element if it didn't change and neither did the story
+    if (rootElement.firstChild === element && forceRender === true) {
+      return;
+    }
+
+    rootElement.innerHTML = '';
+    rootElement.appendChild(element);
+  } else {
+    showError({
+      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
+      description: dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `,
+    });
+  }
+}
+
+export const setFetchStoryHtml: any = (fetchHtml: FetchStoryHtmlType) => {
+  if (fetchHtml !== undefined) {
+    fetchStoryHtml = fetchHtml;
+  }
+};
diff --git a/app/server/src/client/preview/types.ts b/app/server/src/client/preview/types.ts
new file mode 100644
index 000000000000..23bdf5b3a12c
--- /dev/null
+++ b/app/server/src/client/preview/types.ts
@@ -0,0 +1,24 @@
+export { RenderContext } from '@storybook/core';
+
+export type StoryFnServerReturnType = any;
+
+export type FetchStoryHtmlType = (url: string, id: string, params: any) => Promise<string | Node>;
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface ConfigureOptionsArgs {
+  fetchStoryHtml: FetchStoryHtmlType;
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/a11y.json b/app/server/src/lib/compiler/__testfixtures__/a11y.json
new file mode 100644
index 000000000000..c4496e6ab403
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/a11y.json
@@ -0,0 +1,14 @@
+{
+  "title": "Addons/a11y",
+  "parameters": {
+    "options": { "selectedPanel": "storybook/a11y/panel" }
+  },
+  "stories": [
+    {
+      "name": "Label",
+      "parameters": {
+        "server": { "id": "addons/a11y/label" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot b/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot
new file mode 100644
index 000000000000..204ba40358b1
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler a11y.json 1`] = `
+"
+export default {
+  title: 'Addons/a11y',
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/a11y/panel'
+    }
+  }
+};
+
+export const Label = () => {};
+Label.story = {
+  name: 'Label',
+  parameters: {
+    server: {
+      id: 'addons/a11y/label'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/actions.json b/app/server/src/lib/compiler/__testfixtures__/actions.json
new file mode 100644
index 000000000000..ac94c3527d1f
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/actions.json
@@ -0,0 +1,15 @@
+{
+  "title": "Addons/Actions",
+  "parameters": {
+    "options": { "selectedPanel": "storybook/actions/panel" }
+  },
+  "stories": [
+    {
+      "name": "Multiple actions + config",
+      "parameters": {
+        "actions": ["click", "contextmenu", { "clearOnStoryChange": false }],
+        "server": { "id": "addons/actions/story3" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/actions.snapshot b/app/server/src/lib/compiler/__testfixtures__/actions.snapshot
new file mode 100644
index 000000000000..0df7e9216ed8
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/actions.snapshot
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler actions.json 1`] = `
+"
+export default {
+  title: 'Addons/Actions',
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/actions/panel'
+    }
+  }
+};
+
+export const Multiple_actions_config = () => {};
+Multiple_actions_config.story = {
+  name: 'Multiple actions + config',
+  parameters: {
+    actions: [
+      'click',
+      'contextmenu',
+      {
+        clearOnStoryChange: false
+      }
+    ],
+    server: {
+      id: 'addons/actions/story3'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/backgrounds.json b/app/server/src/lib/compiler/__testfixtures__/backgrounds.json
new file mode 100644
index 000000000000..4c91c4f4c51c
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/backgrounds.json
@@ -0,0 +1,17 @@
+{
+  "title": "Addons/Backgrounds",
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ]
+  },
+  "stories": [
+    {
+      "name": "Story 1",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story1" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot b/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot
new file mode 100644
index 000000000000..c1408fd5dbc2
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler backgrounds.json 1`] = `
+"
+export default {
+  title: 'Addons/Backgrounds',
+  parameters: {
+    backgrounds: [
+      {
+        name: 'light',
+        value: '#eeeeee'
+      },
+      {
+        name: 'dark',
+        value: '#222222',
+        default: true
+      }
+    ]
+  }
+};
+
+export const Story_1 = () => {};
+Story_1.story = {
+  name: 'Story 1',
+  parameters: {
+    server: {
+      id: 'addons/backgrounds/story1'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json
new file mode 100644
index 000000000000..63909b27c77a
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json
@@ -0,0 +1,40 @@
+{
+  "title": "Kitchen Sink",
+  "addons": ["knobs"],
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ],
+    "options": { "selectedPanel": "storybook/a11y/panel" },
+    "server": { 
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "actions": ["click", "contextmenu", { "clearOnStoryChange": false }],
+        "notes": "My notes on some bold text",
+        "server": { 
+          "id": "demo/heading",
+          "params": { 
+            "color": "orange"
+          }
+        }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ]
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "notes": "My notes on a button",
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot
new file mode 100644
index 000000000000..e3648ad5eecf
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler kitchen_sink.json 1`] = `
+"import { array, boolean, color, date, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Kitchen Sink',
+  decorators: [
+    withKnobs
+  ],
+  parameters: {
+    backgrounds: [
+      {
+        name: 'light',
+        value: '#eeeeee'
+      },
+      {
+        name: 'dark',
+        value: '#222222',
+        default: true
+      }
+    ],
+    options: {
+      selectedPanel: 'storybook/a11y/panel'
+    },
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Heading = () => {
+  return {
+    name: text('Name', 'John Doe'),
+    age: number('Age', 44, {}),
+  };
+};
+Heading.story = {
+  name: 'Heading',
+  parameters: {
+    actions: [
+      'click',
+      'contextmenu',
+      {
+        clearOnStoryChange: false
+      }
+    ],
+    notes: 'My notes on some bold text',
+    server: {
+      id: 'demo/heading',
+      params: {
+        color: 'orange'
+      }
+    }
+  }
+};
+
+export const Button = () => {};
+Button.story = {
+  name: 'Button',
+  parameters: {
+    notes: 'My notes on a button',
+    server: {
+      id: 'demo/button'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/knobs.json b/app/server/src/lib/compiler/__testfixtures__/knobs.json
new file mode 100644
index 000000000000..fc10ce3062e8
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/knobs.json
@@ -0,0 +1,36 @@
+{
+  "title": "Addons/Knobs",
+  "addons": ["knobs"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/knobs/panel" }
+  },
+  "stories": [
+    {
+      "name": "Simple",
+      "parameters": {
+        "server": { "id": "addons/knobs/simple" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "date", "name": "Birthday", "value": "1960-12-25T00:42:03.600Z", "param": "birthday"},
+        { "type": "color", "name": "Favorite Color", "value": "red", "param": "favorite_color"},
+        { "type": "boolean", "name": "Active", "value": true, "param": "active"},
+        { "type": "number", "name": "Pets", "value": 2, "param": "pets"},
+        { "type": "array", "name": "Sports", "value": ["football", "baseball"], "param": "sports"},
+          { 
+            "type": "select",
+            "name": "Favorite Food",
+            "value": "Ice Cream",
+            "options": {
+              "hot_dog": "Hot Dog",
+              "pizza": "Pizza",
+              "burgers": "Burgers",
+              "ice_cream": "Ice Cream"
+            },
+            "param": "favorite_food"
+          },
+        { "type": "object", "name": "Other Things", "value": {"hair": "Brown", "eyes": "Blue"}, "param": "other_thinkgs"}
+      ]
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/knobs.snapshot b/app/server/src/lib/compiler/__testfixtures__/knobs.snapshot
new file mode 100644
index 000000000000..e6d54bc510de
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/knobs.snapshot
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler knobs.json 1`] = `
+"import { array, boolean, color, date, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Addons/Knobs',
+  decorators: [
+    withKnobs
+  ],
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/knobs/panel'
+    }
+  }
+};
+
+export const Simple = () => {
+  return {
+    name: text('Name', 'John Doe'),
+    birthday: new Date(date('Birthday', new Date('1960-12-25T00:42:03.600Z'))).toISOString(),
+    favorite_color: color('Favorite Color', 'red'),
+    active: boolean('Active', true),
+    pets: number('Pets', 2, {}),
+    sports: array('Sports', [
+      'football',
+      'baseball'
+    ], ',').join(','),
+    favorite_food: select('Favorite Food', {
+      hot_dog: 'Hot Dog',
+      pizza: 'Pizza',
+      burgers: 'Burgers',
+      ice_cream: 'Ice Cream'
+    }, 'Ice Cream'),
+    other_thinkgs: JSON.stringify(object('Other Things', {
+      hair: 'Brown',
+      eyes: 'Blue'
+    })),
+  };
+};
+Simple.story = {
+  name: 'Simple',
+  parameters: {
+    server: {
+      id: 'addons/knobs/simple'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/links.json b/app/server/src/lib/compiler/__testfixtures__/links.json
new file mode 100644
index 000000000000..ee192f0bec81
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/links.json
@@ -0,0 +1,13 @@
+{
+  "title": "Welcome",
+  "stories": [
+    {
+      "name": "Welcome",
+      "parameters": {
+        "server": {
+          "id": "welcome/welcome"
+        }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/links.snapshot b/app/server/src/lib/compiler/__testfixtures__/links.snapshot
new file mode 100644
index 000000000000..70dda862c9a9
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/links.snapshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler links.json 1`] = `
+"
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => {};
+Welcome.story = {
+  name: 'Welcome',
+  parameters: {
+    server: {
+      id: 'welcome/welcome'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.json b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.json
new file mode 100644
index 000000000000..207332142d29
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.json
@@ -0,0 +1,23 @@
+{
+  "title": "Demo",
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "server": { "id": "demo/heading" }
+      }
+    },
+    {
+      "name": "Headings",
+      "parameters": {
+        "server": { "id": "demo/headings" }
+      }
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot
new file mode 100644
index 000000000000..4e1bc924e2fc
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler multiple_stories.json 1`] = `
+"
+export default {
+  title: 'Demo',
+};
+
+export const Heading = () => {};
+Heading.story = {
+  name: 'Heading',
+  parameters: {
+    server: {
+      id: 'demo/heading'
+    }
+  }
+};
+
+export const Headings = () => {};
+Headings.story = {
+  name: 'Headings',
+  parameters: {
+    server: {
+      id: 'demo/headings'
+    }
+  }
+};
+
+export const Button = () => {};
+Button.story = {
+  name: 'Button',
+  parameters: {
+    server: {
+      id: 'demo/button'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/notes.json b/app/server/src/lib/compiler/__testfixtures__/notes.json
new file mode 100644
index 000000000000..9dc4e21c17d5
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/notes.json
@@ -0,0 +1,12 @@
+{
+  "title": "Addons/Notes",
+  "stories": [
+    {
+      "name": "Simple note",
+      "parameters": {
+        "notes": "My notes on some bold text",
+        "server": { "id": "addons/notes/story1" }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/notes.snapshot b/app/server/src/lib/compiler/__testfixtures__/notes.snapshot
new file mode 100644
index 000000000000..95760047ea4b
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/notes.snapshot
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler notes.json 1`] = `
+"
+export default {
+  title: 'Addons/Notes',
+};
+
+export const Simple_note = () => {};
+Simple_note.story = {
+  name: 'Simple note',
+  parameters: {
+    notes: 'My notes on some bold text',
+    server: {
+      id: 'addons/notes/story1'
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/params.json b/app/server/src/lib/compiler/__testfixtures__/params.json
new file mode 100644
index 000000000000..60f6b720cf42
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/params.json
@@ -0,0 +1,19 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Story",
+      "parameters": {
+        "server": {
+          "id": "params/story",
+          "params": { "message": "Hello World" }
+        }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/params.snapshot b/app/server/src/lib/compiler/__testfixtures__/params.snapshot
new file mode 100644
index 000000000000..c0517efed521
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/params.snapshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler params.json 1`] = `
+"
+export default {
+  title: 'Params',
+  parameters: {
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Story = () => {};
+Story.story = {
+  name: 'Story',
+  parameters: {
+    server: {
+      id: 'params/story',
+      params: {
+        message: 'Hello World'
+      }
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/__testfixtures__/params_override.json b/app/server/src/lib/compiler/__testfixtures__/params_override.json
new file mode 100644
index 000000000000..717be13a4ad3
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/params_override.json
@@ -0,0 +1,19 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Override",
+      "parameters": {
+        "server": {
+          "id": "params/override",
+          "params": { "message": "Hello World", "color": "green" }
+        }
+      }
+    }
+  ]
+}
diff --git a/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot b/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot
new file mode 100644
index 000000000000..897da9eaf040
--- /dev/null
+++ b/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-to-csf-compiler params_override.json 1`] = `
+"
+export default {
+  title: 'Params',
+  parameters: {
+    server: {
+      params: {
+        color: 'red'
+      }
+    }
+  }
+};
+
+export const Override = () => {};
+Override.story = {
+  name: 'Override',
+  parameters: {
+    server: {
+      id: 'params/override',
+      params: {
+        message: 'Hello World',
+        color: 'green'
+      }
+    }
+  }
+};
+"
+`;
diff --git a/app/server/src/lib/compiler/decorators/index.ts b/app/server/src/lib/compiler/decorators/index.ts
new file mode 100644
index 000000000000..77d988f10d0d
--- /dev/null
+++ b/app/server/src/lib/compiler/decorators/index.ts
@@ -0,0 +1,14 @@
+import { StorybookSection, Decorator } from '../types';
+import { knobsDecorator } from './knobs';
+
+const allDecorators: Record<string, Decorator> = {
+  knobs: knobsDecorator,
+};
+
+export function decorateSection(section: StorybookSection, addons: string[]): StorybookSection {
+  const decorators = Object.keys(allDecorators)
+    .filter((addon) => addons.includes(addon))
+    .map((addon) => allDecorators[addon]);
+
+  return decorators.reduce((sec, decorator) => decorator(sec), section);
+}
diff --git a/app/server/src/lib/compiler/decorators/knobs.ts b/app/server/src/lib/compiler/decorators/knobs.ts
new file mode 100644
index 000000000000..ac93b1842cc2
--- /dev/null
+++ b/app/server/src/lib/compiler/decorators/knobs.ts
@@ -0,0 +1,95 @@
+import dedent from 'ts-dedent';
+import { StorybookSection, StorybookStory } from '../types';
+import { decorateSimpleAddon, importMeta } from './utils';
+import { stringifyObject } from '../stringifier';
+
+type KnobType = 'text' | 'number' | 'color' | 'array' | 'boolean' | 'object' | 'date' | 'select';
+
+interface StoryKnob {
+  param: string;
+  type: KnobType;
+  name: string;
+  value: any;
+  [x: string]: any;
+}
+
+function stringifyKnob(knob: StoryKnob) {
+  const { param, type, name, value, ...opts } = knob;
+  const knobParam = param || name; // Todo: can we do away with this?
+  const level = 2;
+  const stringifiedValue = stringifyObject(value, level);
+  // TODO: Add group
+  const knobFunction = ((t) => {
+    switch (t) {
+      case 'text':
+        return `text('${name}', ${stringifiedValue})`;
+      case 'number':
+        return `number('${name}', ${stringifiedValue}, ${stringifyObject(opts, level)})`;
+      case 'color':
+        return `color('${name}', ${stringifiedValue})`;
+      case 'array': {
+        const separator = opts.separator || ',';
+        return `array('${name}', ${stringifiedValue}, '${separator}').join('${separator}')`;
+      }
+      case 'boolean':
+        return `boolean('${name}', ${stringifiedValue})`;
+      case 'object':
+        return `JSON.stringify(object('${name}', ${stringifiedValue}))`;
+      case 'date':
+        return `new Date(date('${name}', new Date(${stringifiedValue}))).toISOString()`;
+      case 'select':
+        return `select('${name}', ${stringifyObject(opts.options, level)}, ${stringifiedValue})`;
+      default:
+        return '';
+    }
+  })(type);
+
+  return `${knobParam}: ${knobFunction}`;
+}
+
+function stringifyStoryFunction(knobs: StoryKnob[], storyFn: string) {
+  if (!knobs || knobs.length === 0) return storyFn;
+
+  return dedent`
+    () => {
+      return {
+        ${knobs.map((knob: any) => `${stringifyKnob(knob)},`).join('\n    ')}
+      };
+    }
+  `;
+}
+
+function knobsStoryDecorator(story: StorybookStory): StorybookStory {
+  const { name, storyFn, knobs, ...options } = story;
+
+  return {
+    name,
+    storyFn: stringifyStoryFunction(knobs, storyFn),
+    ...options,
+  };
+}
+
+export function knobsDecorator(section: StorybookSection): StorybookSection {
+  const { title, imports, decorators, stories, ...options } = decorateSimpleAddon(section, 'knobs');
+  const { importName, moduleName } = importMeta('knobs');
+
+  const knobImports = [
+    importName,
+    'array',
+    'boolean',
+    'color',
+    'date',
+    'text',
+    'number',
+    'object',
+    'select',
+  ];
+
+  return {
+    title,
+    imports: { ...imports, ...{ [moduleName]: knobImports } },
+    decorators,
+    stories: stories.map((story) => knobsStoryDecorator(story)),
+    ...options,
+  };
+}
diff --git a/app/server/src/lib/compiler/decorators/utils.ts b/app/server/src/lib/compiler/decorators/utils.ts
new file mode 100644
index 000000000000..838df57a9d74
--- /dev/null
+++ b/app/server/src/lib/compiler/decorators/utils.ts
@@ -0,0 +1,21 @@
+import { StorybookSection } from '../types';
+
+export function importMeta(addon: string) {
+  return {
+    importName: `with${addon.charAt(0).toUpperCase() + addon.slice(1)}`,
+    moduleName: `@storybook/addon-${addon}`,
+  };
+}
+
+export function decorateSimpleAddon(section: StorybookSection, addon: string) {
+  const { title, imports, decorators, stories, ...options } = section;
+  const { importName, moduleName } = importMeta(addon);
+
+  return {
+    title,
+    imports: { ...imports, ...{ [moduleName]: [importName] } },
+    decorators: [...decorators, importName],
+    stories,
+    ...options,
+  };
+}
diff --git a/app/server/src/lib/compiler/index.ts b/app/server/src/lib/compiler/index.ts
new file mode 100644
index 000000000000..8b329fb991ea
--- /dev/null
+++ b/app/server/src/lib/compiler/index.ts
@@ -0,0 +1,38 @@
+import {
+  CompileCsfModuleArgs,
+  CompileStorybookSectionArgs,
+  CompileStorybookStoryArgs,
+  StorybookSection,
+  StorybookStory,
+} from './types';
+
+import { stringifySection } from './stringifier';
+import { decorateSection } from './decorators';
+
+function createStory(storyArgs: CompileStorybookStoryArgs): StorybookStory {
+  const { name, ...options } = storyArgs;
+
+  return {
+    name,
+    storyFn: '() => {}',
+    ...options,
+  };
+}
+
+function createSection(args: CompileStorybookSectionArgs): StorybookSection {
+  const { title, stories, ...options } = args;
+  return {
+    imports: {},
+    decorators: [],
+    title,
+    stories: stories.map((storyArgs) => createStory(storyArgs)),
+    ...options,
+  };
+}
+
+export function compileCsfModule(args: CompileCsfModuleArgs): string {
+  const { addons = [], ...compileSectionArgs } = args;
+  const storybookSection = createSection(compileSectionArgs);
+  const decoratedSection = decorateSection(storybookSection, addons);
+  return stringifySection(decoratedSection);
+}
diff --git a/app/server/src/lib/compiler/json-to-csf-compiler.test.ts b/app/server/src/lib/compiler/json-to-csf-compiler.test.ts
new file mode 100644
index 000000000000..503cf198a995
--- /dev/null
+++ b/app/server/src/lib/compiler/json-to-csf-compiler.test.ts
@@ -0,0 +1,24 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs-extra';
+import { compileCsfModule } from '.';
+
+const inputRegExp = /\.json$/;
+
+async function generate(filePath: string) {
+  const content = await fs.readFile(filePath, 'utf8');
+  return compileCsfModule(JSON.parse(content));
+}
+
+describe('json-to-csf-compiler', () => {
+  const transformFixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(transformFixturesDir)
+    .filter((fileName: string) => inputRegExp.test(fileName))
+    .forEach((fixtureFile: string) => {
+      it(fixtureFile, async () => {
+        const inputPath = path.join(transformFixturesDir, fixtureFile);
+        const code = await generate(inputPath);
+        expect(code).toMatchSpecificSnapshot(inputPath.replace(inputRegExp, '.snapshot'));
+      });
+    });
+});
diff --git a/app/server/src/lib/compiler/stringifier.ts b/app/server/src/lib/compiler/stringifier.ts
new file mode 100644
index 000000000000..7dff01084c54
--- /dev/null
+++ b/app/server/src/lib/compiler/stringifier.ts
@@ -0,0 +1,85 @@
+import dedent from 'ts-dedent';
+import { StorybookStory, StorybookSection } from './types';
+
+const { identifier } = require('safe-identifier');
+
+export function stringifyObject(object: any, level = 0, excludeOuterParams = false): string {
+  if (typeof object === 'string') {
+    return `'${object}'`;
+  }
+  const indent = '  '.repeat(level);
+  if (Array.isArray(object)) {
+    const arrayStrings: string[] = object.map((item: any) => stringifyObject(item, level + 1));
+    const arrayString = arrayStrings.join(`,\n${indent}  `);
+    if (excludeOuterParams) return arrayString;
+    return `[\n${indent}  ${arrayString}\n${indent}]`;
+  }
+  if (typeof object === 'object') {
+    let objectString = '';
+    if (Object.keys(object).length > 0) {
+      const objectStrings: string[] = Object.keys(object).map((key) => {
+        const value: string = stringifyObject(object[key], level + 1);
+        return `\n${indent}  ${key}: ${value}`;
+      });
+      objectString = objectStrings.join(',');
+    }
+    if (excludeOuterParams) return objectString;
+    if (objectString.length === 0) return '{}';
+    return `{${objectString}\n${indent}}`;
+  }
+
+  return object;
+}
+
+export function stringifyImports(imports: Record<string, string[]>): string {
+  if (Object.keys(imports).length === 0) return '';
+  return Object.entries(imports)
+    .map(([module, names]) => `import { ${names.sort().join(', ')} } from '${module}';\n`)
+    .join('');
+}
+
+export function stringifyDecorators(decorators: string[]): string {
+  return decorators && decorators.length > 0
+    ? `\n  decorators: [\n    ${decorators.join(',\n    ')}\n  ],`
+    : '';
+}
+
+export function stringifyDefault(section: StorybookSection): string {
+  const { title, imports, decorators, stories, ...options } = section;
+
+  const decoratorsString = stringifyDecorators(decorators);
+
+  const optionsString = stringifyObject(options, 0, true);
+
+  return dedent`
+  export default {
+    title: '${title}',${decoratorsString}${optionsString}
+  };
+  
+  `;
+}
+
+export function stringifyStory(story: StorybookStory): string {
+  const { name, storyFn, decorators, ...options } = story;
+  const storyId = identifier(name);
+
+  const decoratorsString = stringifyDecorators(decorators);
+  const optionsString = stringifyObject({ name, ...options }, 0, true);
+
+  let storyString = '';
+  if (decoratorsString.length > 0 || optionsString.length > 0) {
+    storyString = `${storyId}.story = {${decoratorsString}${optionsString}\n};\n`;
+  }
+  return `export const ${storyId} = ${storyFn};\n${storyString}`;
+}
+
+export function stringifySection(section: StorybookSection): string {
+  const sectionString = [
+    stringifyImports(section.imports),
+    stringifyDefault(section),
+    ...section.stories.map((story) => stringifyStory(story)),
+  ].join('\n');
+
+  // console.log('sectionString:\n', sectionString);
+  return sectionString;
+}
diff --git a/app/server/src/lib/compiler/types.ts b/app/server/src/lib/compiler/types.ts
new file mode 100644
index 000000000000..0de8dbd14f2b
--- /dev/null
+++ b/app/server/src/lib/compiler/types.ts
@@ -0,0 +1,31 @@
+export interface CompileStorybookStoryArgs {
+  name: string;
+  [x: string]: any;
+}
+
+export interface CompileStorybookSectionArgs {
+  title: string;
+  stories: CompileStorybookStoryArgs[];
+  [x: string]: any;
+}
+
+export interface CompileCsfModuleArgs extends CompileStorybookSectionArgs {
+  addons?: string[];
+}
+
+export interface StorybookStory {
+  name: string;
+  storyFn: string;
+  decorators?: string[];
+  [x: string]: any;
+}
+
+export interface StorybookSection {
+  imports: Record<string, string[]>;
+  decorators?: string[];
+  title: string;
+  stories: StorybookStory[];
+  [x: string]: any;
+}
+
+export type Decorator = (section: StorybookSection) => StorybookSection;
diff --git a/app/server/src/server/build.ts b/app/server/src/server/build.ts
new file mode 100644
index 000000000000..d8abf06a4396
--- /dev/null
+++ b/app/server/src/server/build.ts
@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);
diff --git a/app/server/src/server/framework-preset-server.ts b/app/server/src/server/framework-preset-server.ts
new file mode 100644
index 000000000000..2604c82e8b0f
--- /dev/null
+++ b/app/server/src/server/framework-preset-server.ts
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Configuration } from 'webpack';
+import path from 'path';
+
+export function webpack(config: Configuration) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          type: 'javascript/auto',
+          test: /\.stories\.json$/,
+          use: [
+            {
+              loader: path.resolve(__dirname, './loader.js'),
+            },
+          ],
+        },
+      ],
+    },
+  };
+}
diff --git a/app/server/src/server/index.ts b/app/server/src/server/index.ts
new file mode 100644
index 000000000000..774d96025a84
--- /dev/null
+++ b/app/server/src/server/index.ts
@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);
diff --git a/app/server/src/server/loader.ts b/app/server/src/server/loader.ts
new file mode 100644
index 000000000000..67b8aab46e0c
--- /dev/null
+++ b/app/server/src/server/loader.ts
@@ -0,0 +1,5 @@
+import { compileCsfModule } from '../lib/compiler';
+
+export default (content: string) => {
+  return compileCsfModule(JSON.parse(content));
+};
diff --git a/app/server/src/server/options.ts b/app/server/src/server/options.ts
new file mode 100644
index 000000000000..ee538806a875
--- /dev/null
+++ b/app/server/src/server/options.ts
@@ -0,0 +1,7 @@
+const packageJson = require('../../package.json');
+
+export default {
+  packageJson,
+  framework: 'server',
+  frameworkPresets: [require.resolve('./framework-preset-server.js')],
+};
diff --git a/app/server/src/typings.d.ts b/app/server/src/typings.d.ts
new file mode 100644
index 000000000000..690e93343de2
--- /dev/null
+++ b/app/server/src/typings.d.ts
@@ -0,0 +1,5 @@
+declare module '@storybook/core/*';
+declare module 'global';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;
diff --git a/app/server/standalone.js b/app/server/standalone.js
new file mode 100644
index 000000000000..1b1febe0d3bb
--- /dev/null
+++ b/app/server/standalone.js
@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;
diff --git a/app/server/tsconfig.json b/app/server/tsconfig.json
new file mode 100644
index 000000000000..82ce44329cc6
--- /dev/null
+++ b/app/server/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
+}
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 437c9e5aab2e..52316d7f4143 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/svelte"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,23 +22,34 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
-    "svelte": "^3.4.1",
+    "@types/webpack-env": "^1.15.2",
+    "svelte": "^3.18.1",
     "svelte-loader": "^2.13.4"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
+    "@babel/core": "*",
+    "react": "*",
+    "react-dom": "*",
     "svelte": "^3.1.0",
     "svelte-loader": "^2.9.1"
   },
@@ -55,5 +59,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts
index 76f8b005258a..cea239a2d152 100644
--- a/app/svelte/src/client/preview/render.ts
+++ b/app/svelte/src/client/preview/render.ts
@@ -1,6 +1,7 @@
+import { detach, insert, noop } from 'svelte/internal';
 import { document } from 'global';
 import dedent from 'ts-dedent';
-import { MountViewArgs, RenderMainArgs } from './types';
+import { MountViewArgs, RenderContext } from './types';
 
 type Component = any;
 
@@ -14,6 +15,32 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
+function createSlotFn(element: any) {
+  return [
+    function createSlot() {
+      return {
+        c: noop,
+        m: function mount(target: any, anchor: any) {
+          insert(target, element, anchor);
+        },
+        d: function destroy(detaching: boolean) {
+          if (detaching) {
+            detach(element);
+          }
+        },
+        l: noop,
+      };
+    },
+  ];
+}
+
+function createSlots(slots: Record<string, any>): Record<string, any> {
+  return Object.entries(slots).reduce((acc, [slotName, element]) => {
+    acc[slotName] = createSlotFn(element);
+    return acc;
+  }, {} as Record<string, any>);
+}
+
 function mountView({ Component, target, props, on, Wrapper, WrapperData }: MountViewArgs) {
   let component: Component;
 
@@ -23,8 +50,11 @@ function mountView({ Component, target, props, on, Wrapper, WrapperData }: Mount
 
     const wrapper = new Wrapper({
       target,
-      slots: { default: fragment },
-      props: WrapperData || {},
+      props: {
+        ...WrapperData,
+        $$slots: createSlots({ default: fragment }),
+        $$scope: {},
+      },
     });
     component.$on('destroy', () => {
       wrapper.$destroy(true);
@@ -35,7 +65,7 @@ function mountView({ Component, target, props, on, Wrapper, WrapperData }: Mount
 
   if (on) {
     // Attach svelte event listeners.
-    Object.keys(on).forEach(eventName => {
+    Object.keys(on).forEach((eventName) => {
       component.$on(eventName, on[eventName]);
     });
   }
@@ -43,13 +73,7 @@ function mountView({ Component, target, props, on, Wrapper, WrapperData }: Mount
   previousComponent = component;
 }
 
-export default function render({
-  storyFn,
-  selectedKind,
-  selectedStory,
-  showMain,
-  showError,
-}: RenderMainArgs) {
+export default function render({ storyFn, kind, name, showMain, showError }: RenderContext) {
   const {
     /** @type {SvelteComponent} */
     Component,
@@ -67,7 +91,7 @@ export default function render({
 
   if (!DefaultCompatComponent) {
     showError({
-      title: `Expecting a Svelte component from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the Svelte component configuration from the story?
         Use "() => ({ Component: YourComponent, data: {} })"
diff --git a/app/svelte/src/client/preview/types.ts b/app/svelte/src/client/preview/types.ts
index 31bf80ea6267..4382e18ca0ff 100644
--- a/app/svelte/src/client/preview/types.ts
+++ b/app/svelte/src/client/preview/types.ts
@@ -1,18 +1,10 @@
-import { StoryFn } from '@storybook/addons';
+export { RenderContext } from '@storybook/core';
 
 export interface ShowErrorArgs {
   title: string;
   description: string;
 }
 
-export interface RenderMainArgs {
-  storyFn: StoryFn<any>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-}
-
 export interface MountViewArgs {
   Component: any;
   target: any;
diff --git a/app/svelte/tsconfig.json b/app/svelte/tsconfig.json
index 9fc120ad0834..29fcd6ad6a26 100644
--- a/app/svelte/tsconfig.json
+++ b/app/svelte/tsconfig.json
@@ -11,4 +11,4 @@
   "exclude": [
     "src/**/*.test.*"
   ]
-}
\ No newline at end of file
+}
diff --git a/app/vue/README.md b/app/vue/README.md
index d9fb66ea933f..57f4901cc329 100644
--- a/app/vue/README.md
+++ b/app/vue/README.md
@@ -19,7 +19,7 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 
 ## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
 
-<https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate>
+<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
 
 ---
 
diff --git a/app/vue/package.json b/app/vue/package.json
index f509c861627a..0b9add749319 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -15,13 +15,6 @@
     "directory": "app/vue"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -29,30 +22,42 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@types/webpack-env": "^1.13.9",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@types/webpack-env": "^1.15.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0",
-    "webpack": "^4.33.0"
+    "ts-dedent": "^1.1.1",
+    "ts-loader": "^6.2.2",
+    "webpack": "^4.43.0"
   },
   "devDependencies": {
-    "@types/mini-css-extract-plugin": "^0.8.0",
-    "@types/node": "^12.12.11",
-    "@types/webpack": "^4.41.0",
-    "babel-preset-vue": "^2.0.2",
+    "@types/node": "^14.0.10",
+    "@types/webpack": "^4.41.12",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"
   },
   "peerDependencies": {
+    "@babel/core": "*",
     "babel-loader": "^7.0.0 || ^8.0.0",
+    "css-loader": "*",
+    "react": "*",
+    "react-dom": "*",
+    "ts-loader": "^6.2.2",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"
@@ -63,5 +68,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts
index f00ff8338602..eeb0edf34644 100644
--- a/app/vue/src/client/preview/index.ts
+++ b/app/vue/src/client/preview/index.ts
@@ -68,6 +68,8 @@ const defaultContext: StoryContext = {
   name: 'unspecified',
   kind: 'unspecified',
   parameters: {},
+  args: {},
+  globalArgs: {},
 };
 
 function decorateStory(
@@ -78,22 +80,13 @@ function decorateStory(
     (decorated: StoryFn<VueConstructor>, decorator) => (context: StoryContext = defaultContext) => {
       let story;
 
-      const decoratedStory = decorator(p => {
-        story = decorated(
-          p
-            ? {
-                ...context,
-                ...p,
-                parameters: {
-                  ...context.parameters,
-                  ...p.parameters,
-                },
-              }
-            : context
-        );
-
-        return story;
-      }, context);
+      const decoratedStory = decorator(
+        ({ parameters, ...innerContext }: StoryContext = {} as StoryContext) => {
+          story = decorated({ ...context, ...innerContext });
+          return story;
+        },
+        context
+      );
 
       if (!story) {
         story = decorated(context);
@@ -105,7 +98,7 @@ function decorateStory(
 
       return prepare(decoratedStory, story);
     },
-    context => prepare(storyFn(context))
+    (context) => prepare(storyFn(context))
   );
 }
 const framework = 'vue';
diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts
index 03967e7fa4f7..a5cdd49fa5b5 100644
--- a/app/vue/src/client/preview/render.ts
+++ b/app/vue/src/client/preview/render.ts
@@ -1,6 +1,6 @@
 import dedent from 'ts-dedent';
 import Vue from 'vue';
-import { RenderMainArgs } from './types';
+import { RenderContext } from './types';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
@@ -20,20 +20,20 @@ const root = new Vue({
 
 export default function render({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain,
   showError,
   showException,
   forceRender,
-}: RenderMainArgs) {
+}: RenderContext) {
   Vue.config.errorHandler = showException;
 
   const element = storyFn();
 
   if (!element) {
     showError({
-      title: `Expecting a Vue component from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting a Vue component from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the Vue component from the story?
         Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
diff --git a/app/vue/src/client/preview/types.ts b/app/vue/src/client/preview/types.ts
index 7f89facb4e23..94442a01779c 100644
--- a/app/vue/src/client/preview/types.ts
+++ b/app/vue/src/client/preview/types.ts
@@ -1,22 +1,12 @@
-import { Component, VueConstructor } from 'vue';
-import { StoryFn } from '@storybook/addons';
-// TODO, 'any' should be what is actually expected from a storyFn
+import { Component } from 'vue';
+
+export { RenderContext } from '@storybook/core';
 
 export interface ShowErrorArgs {
   title: string;
   description: string;
 }
 
-export interface RenderMainArgs {
-  storyFn: StoryFn<VueConstructor>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  showException: (...args: any[]) => void;
-  forceRender: boolean;
-}
-
 // TODO: some vue expert needs to look at this
 export type StoryFnVueReturnType = string | Component;
 
diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts
index aa063f3d0a4a..bf6f79b53ad5 100644
--- a/app/vue/src/server/framework-preset-vue.ts
+++ b/app/vue/src/server/framework-preset-vue.ts
@@ -14,6 +14,18 @@ export function webpack(config: Configuration) {
           loader: require.resolve('vue-loader'),
           options: {},
         },
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+                appendTsSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+        },
       ],
     },
     resolve: {
@@ -26,10 +38,3 @@ export function webpack(config: Configuration) {
     },
   };
 }
-
-export function babelDefault(config: any) {
-  return {
-    ...config,
-    presets: [...config.presets, require.resolve('babel-preset-vue')],
-  };
-}
diff --git a/app/web-components/README.md b/app/web-components/README.md
index 6de3e192d2a0..b8f57d205f53 100644
--- a/app/web-components/README.md
+++ b/app/web-components/README.md
@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx -p @storybook/cli sb init -t web-components
+npx -p @storybook/cli sb init -t web_components
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -60,7 +60,7 @@ For example if you have a library called `my-library` which is in es7 then you c
 // .storybook/main.js
 
 module.exports = { 
-  webpack: async config => {
+  webpackFinal: async config => {
     // find web-components rule for extra transpilation
     const webComponentsRule = config.module.rules.find(
       rule => rule.use && rule.use.options && rule.use.options.babelrc === false
diff --git a/app/web-components/package.json b/app/web-components/package.json
index 025e0aa8eb1f..70f0b4ee527a 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
@@ -17,13 +17,6 @@
     "directory": "app/web-components"
   },
   "license": "MIT",
-  "files": [
-    "bin/**/*",
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
   "main": "dist/client/index.js",
   "types": "dist/client/index.d.ts",
   "bin": {
@@ -31,27 +24,38 @@
     "start-storybook": "./bin/index.js",
     "storybook-server": "./bin/index.js"
   },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "ts3.5/**/*"
+  ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@types/webpack-env": "^1.13.9",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@types/webpack-env": "^1.15.2",
     "babel-plugin-bundled-import-meta": "^0.3.1",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
     "lit-html": "^1.0.0"
   },
   "peerDependencies": {
+    "@babel/core": "*",
     "babel-loader": "^7.0.0 || ^8.0.0",
-    "lit-html": "^1.0.0"
+    "lit-html": "^1.0.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -59,5 +63,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/app/web-components/src/client/preview/render.ts b/app/web-components/src/client/preview/render.ts
index 9f87fa36e607..77c5b87e36ba 100644
--- a/app/web-components/src/client/preview/render.ts
+++ b/app/web-components/src/client/preview/render.ts
@@ -1,18 +1,18 @@
 import { document, Node } from 'global';
 import dedent from 'ts-dedent';
 import { render, TemplateResult } from 'lit-html';
-import { RenderMainArgs } from './types';
+import { RenderContext } from './types';
 
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
   storyFn,
-  selectedKind,
-  selectedStory,
+  kind,
+  name,
   showMain,
   showError,
   forceRender,
-}: RenderMainArgs) {
+}: RenderContext) {
   const element = storyFn();
 
   showMain();
@@ -38,7 +38,7 @@ export default function renderMain({
     rootElement.appendChild(element);
   } else {
     showError({
-      title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
+      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
       description: dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
diff --git a/app/web-components/src/client/preview/types.ts b/app/web-components/src/client/preview/types.ts
index 36432e1a4558..59574c428128 100644
--- a/app/web-components/src/client/preview/types.ts
+++ b/app/web-components/src/client/preview/types.ts
@@ -1,6 +1,9 @@
-import { StoryFn } from '@storybook/addons';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TemplateResult, SVGTemplateResult } from 'lit-element';
 
-export type StoryFnHtmlReturnType = string | Node;
+export { RenderContext } from '@storybook/core';
+
+export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 
 export interface IStorybookStory {
   name: string;
@@ -16,12 +19,3 @@ export interface ShowErrorArgs {
   title: string;
   description: string;
 }
-
-export interface RenderMainArgs {
-  storyFn: () => StoryFn<StoryFnHtmlReturnType>;
-  selectedKind: string;
-  selectedStory: string;
-  showMain: () => void;
-  showError: (args: ShowErrorArgs) => void;
-  forceRender: boolean;
-}
diff --git a/app/web-components/src/server/options.ts b/app/web-components/src/server/options.ts
index 6dff94b2b6d2..ea9b2ee7aba4 100644
--- a/app/web-components/src/server/options.ts
+++ b/app/web-components/src/server/options.ts
@@ -1,4 +1,3 @@
-// tslint:disable-next-line: no-var-requires
 const packageJson = require('../../package.json');
 
 export default {
diff --git a/cypress.json b/cypress.json
index 0967ef424bce..f098c972a496 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1 +1,5 @@
-{}
+{
+  "defaultCommandTimeout": 20000,
+  "requestTimeout": 20000,
+  "responseTimeout": 60000
+}
diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json
index 373914272e56..ccb568d6c96d 100644
--- a/cypress/.eslintrc.json
+++ b/cypress/.eslintrc.json
@@ -1,5 +1,10 @@
 {
   "extends": [
     "plugin:cypress/recommended"
-  ]
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error", { "devDependencies": true }
+    ]
+  }
 }
diff --git a/cypress/generated/addon-action.spec.ts b/cypress/generated/addon-action.spec.ts
new file mode 100644
index 000000000000..8f7a2dc858b3
--- /dev/null
+++ b/cypress/generated/addon-action.spec.ts
@@ -0,0 +1,31 @@
+import { visit, clickAddon } from '../helper';
+
+describe('addon-action', () => {
+  before(() => {
+    visit();
+    cy.get('#button').click();
+  });
+
+  it('should trigger an action', () => {
+    // click on the button
+    cy.get('#button--text-with-action').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/button--text-with-action');
+
+    // check for selected element
+    cy.get('#button--text-with-action').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().contains('Trigger Action').click();
+
+    // click on addon
+    clickAddon('Actions');
+
+    // TODO @yannbf improve tab identifier on addons
+    // get the logs
+    cy.get('#storybook-panel-root')
+      .contains(/This was clicked/)
+      .should('be.visible');
+  });
+});
diff --git a/cypress/generated/addon-link.spec.ts b/cypress/generated/addon-link.spec.ts
new file mode 100644
index 000000000000..d94420c496c6
--- /dev/null
+++ b/cypress/generated/addon-link.spec.ts
@@ -0,0 +1,25 @@
+import { visit, clickAddon } from '../helper';
+
+describe('addon-link', () => {
+  before(() => {
+    visit();
+    cy.get('#button').click();
+  });
+
+  it('should redirect to another story', () => {
+    // click on the button
+    cy.get('#button--button-with-link-to-another-story').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/button--button-with-link-to-another-story');
+
+    // check for selected element
+    cy.get('#button--button-with-link-to-another-story').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().contains('Go to Welcome Story').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/welcome--to-storybook');
+  });
+});
diff --git a/cypress/generated/basic.spec.ts b/cypress/generated/basic.spec.ts
new file mode 100644
index 000000000000..f141a86ccad0
--- /dev/null
+++ b/cypress/generated/basic.spec.ts
@@ -0,0 +1,35 @@
+import { visit } from '../helper';
+
+describe('Basic Flow', () => {
+  before(() => {
+    visit();
+  });
+
+  it('should load welcome flow', () => {
+    // assert url changes
+    cy.url().should('include', 'path=/story/welcome--to-storybook');
+
+    // check for selected element
+    cy.get('#welcome--to-storybook').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().should('contain.text', 'Welcome to storybook');
+  });
+
+  describe('Button story', () => {
+    before(() => {
+      cy.get('#button').click();
+    });
+
+    it('should be visited succesfully', () => {
+      // assert url changes
+      cy.url().should('include', 'path=/story/button--text');
+
+      // check for selected element
+      cy.get('#button--text').should('have.class', 'selected');
+
+      // check for content
+      cy.getStoryElement().find('button').should('contain.text', 'Hello Button');
+    });
+  });
+});
diff --git a/cypress/helper.ts b/cypress/helper.ts
index 61c9920125e4..d886439d90b0 100644
--- a/cypress/helper.ts
+++ b/cypress/helper.ts
@@ -1,18 +1,22 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable jest/valid-expect */
-const baseUrl = 'http://localhost:8001';
-
 type StorybookApps = 'official-storybook';
 
-type Addons = 'Knobs';
+type Addons = 'Actions' | 'Knobs';
+
+const getUrl = (route: string) => {
+  const host = Cypress.env('location') || 'http://localhost:8001';
 
-export const visitExample = (app: StorybookApps, route = '') => {
+  return `${host}/${route}`;
+};
+
+export const visit = (route = '') => {
   return cy
     .clearLocalStorage()
-    .visit(`${baseUrl}/${app}/${route}`)
+    .visit(getUrl(route))
     .get(`#storybook-preview-iframe`)
-    .then({ timeout: 10000 }, iframe => {
-      return cy.wrap(iframe).should(() => {
+    .then({ timeout: 15000 }, (iframe) => {
+      return cy.wrap(iframe, { timeout: 10000 }).should(() => {
         const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
         const element: HTMLElement | null = content !== null ? content.documentElement : null;
 
@@ -26,14 +30,11 @@ export const visitExample = (app: StorybookApps, route = '') => {
 };
 
 export const clickAddon = (addonName: Addons) => {
-  return cy
-    .get(`[role=tablist] button[role=tab]`)
-    .contains(addonName)
-    .click();
+  return cy.get(`[role=tablist] button[role=tab]`).contains(addonName).click();
 };
 
 export const getStorybookPreview = () => {
-  return cy.get(`#storybook-preview-iframe`).then({ timeout: 10000 }, iframe => {
+  return cy.get(`#storybook-preview-iframe`).then({ timeout: 10000 }, (iframe) => {
     const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
     const element: HTMLElement | null = content !== null ? content.documentElement : null;
 
diff --git a/cypress/integration/knobs.spec.ts b/cypress/integration/knobs.spec.ts
index a670ef486b22..c5f65dca5341 100644
--- a/cypress/integration/knobs.spec.ts
+++ b/cypress/integration/knobs.spec.ts
@@ -1,18 +1,16 @@
-import { clickAddon, visitExample } from '../helper';
+import { clickAddon, visit } from '../helper';
 
 describe('Knobs', () => {
   beforeEach(() => {
-    visitExample('official-storybook', '?path=/story/addons-knobs-withknobs--tweaks-static-values');
+    visit('official-storybook/?path=/story/addons-knobs-withknobs--tweaks-static-values');
   });
 
   it('[text] it should change a string value', () => {
     clickAddon('Knobs');
 
-    cy.get('#Name')
-      .clear()
-      .type('John Doe');
+    cy.get('#Name').clear().type('John Doe');
 
-    cy.preview()
+    cy.getStoryElement()
       .console('info')
       .find('p')
       .eq(0)
diff --git a/cypress/integration/navigation.spec.ts b/cypress/integration/navigation.spec.ts
index 942cf47cc643..33f3ba29b7e1 100644
--- a/cypress/integration/navigation.spec.ts
+++ b/cypress/integration/navigation.spec.ts
@@ -1,14 +1,12 @@
-import { visitExample } from '../helper';
+import { visit } from '../helper';
 
 describe('Navigation', () => {
-  beforeEach(() => {
-    visitExample('official-storybook');
+  before(() => {
+    visit('official-storybook');
   });
 
   it('should search navigation item', () => {
-    cy.get('#storybook-explorer-searchfield')
-      .click()
-      .type('persisting the action logger');
+    cy.get('#storybook-explorer-searchfield').click().clear().type('persisting the action logger');
 
     cy.get('.sidebar-container a')
       .should('contain', 'Persisting the action logger')
@@ -16,9 +14,7 @@ describe('Navigation', () => {
   });
 
   it('should display no results after searching a non-existing navigation item', () => {
-    cy.get('#storybook-explorer-searchfield')
-      .click()
-      .type('zzzzzzzzzz');
+    cy.get('#storybook-explorer-searchfield').click().clear().type('zzzzzzzzzz');
 
     cy.get('.sidebar-container').should('contain', 'This filter resulted in 0 results');
   });
@@ -26,15 +22,15 @@ describe('Navigation', () => {
 
 describe('Routing', () => {
   it('should navigate to story addons-a11y-basebutton--default', () => {
-    visitExample('official-storybook');
-    cy.get('#exploreraddons-a11y-basebutton--label').click();
+    visit('official-storybook');
 
+    cy.get('#addons-a11y-basebutton--label').click();
     cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
   });
 
   it('should directly visit a certain story and render correctly', () => {
-    visitExample('official-storybook', '?path=/story/addons-a11y-basebutton--label');
+    visit('official-storybook/?path=/story/addons-a11y-basebutton--label');
 
-    cy.preview().should('contain.text', 'Testing the a11y addon');
+    cy.getStoryElement().should('contain.text', 'Testing the a11y addon');
   });
 });
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index e699dc68b670..6396b2eae7e9 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -14,7 +14,7 @@
 const wp = require('@cypress/webpack-preprocessor');
 const webpackConfig = require('./webpack.config');
 
-module.exports = on => {
+module.exports = (on) => {
   const options = {
     webpackOptions: webpackConfig,
   };
diff --git a/cypress/report-teamcity-metadata.ts b/cypress/report-teamcity-metadata.ts
new file mode 100644
index 000000000000..3a27544dddf0
--- /dev/null
+++ b/cypress/report-teamcity-metadata.ts
@@ -0,0 +1,73 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+import { testMetadata } from 'teamcity-service-messages';
+import { findSuitesAndTests } from 'mocha-list-tests';
+
+const testsDir = path.join(__dirname, 'integration');
+const videosDir = path.join(__dirname, 'videos');
+const screensDir = path.join(__dirname, 'screenshots');
+
+let prevFoundTests: string[] = [];
+function getTests(fileName: string) {
+  const { tests } = findSuitesAndTests(path.join(testsDir, fileName));
+  const newTests = tests.filter((test: string) => !prevFoundTests.includes(test));
+  prevFoundTests = tests;
+  return newTests.map((test: string) => test.split(/\./));
+}
+
+const fullTestName = (suite: string, testName: string) => `${suite}: ${testName}`;
+
+async function report() {
+  const hookFailures: { [file: string]: [string, string][] } = {};
+  const reports: any[] = [];
+  try {
+    const testFiles = await fs.readdir(screensDir);
+    await Promise.all(
+      testFiles.map(async (testFile) => {
+        const files = await fs.readdir(path.join(screensDir, testFile));
+        files.forEach((file) => {
+          const match = file.match(/^(.*) \(failed\).png$/);
+          if (match == null) {
+            return;
+          }
+
+          const [suite, test, hookPart] = match[1].split(' -- ');
+          let testName = test;
+          const hook = hookPart?.match(/^(.*) hook$/)?.[1];
+          if (hook != null) {
+            testName = `"${hook}" hook for "${test}"`;
+            hookFailures[testFile] = hookFailures[testFile] || [];
+            hookFailures[testFile].push([suite, testName]);
+          }
+          reports.push({
+            name: 'Screenshot',
+            testName: fullTestName(suite, testName),
+            type: 'image',
+            value: `screenshots.tar.gz!${testFile}/${file}`,
+          });
+        });
+      })
+    );
+  } catch (e) {
+    // ignore
+  }
+
+  const videoFiles = await fs.readdir(videosDir);
+  videoFiles.forEach((videoFile) => {
+    const testFile = videoFile.replace(/\.mp4$/, '');
+    const tests = [...getTests(testFile), ...(hookFailures[testFile] || [])];
+    tests.forEach(([suite, testName]) =>
+      reports.unshift({
+        name: 'Video',
+        testName: fullTestName(suite, testName),
+        type: 'video',
+        value: `videos.tar.gz!${videoFile}`,
+      })
+    );
+  });
+
+  reports.forEach(testMetadata);
+}
+
+report();
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index ecad1e42571a..11ee583da256 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect, no-unused-expressions, jest/valid-expect */
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -37,22 +36,14 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('preview', {}, () => {
-  return cy.get(`#storybook-preview-iframe`).then({ timeout: 10000 }, iframe => {
-    const content = iframe[0].contentDocument;
-    const element = content !== null ? content.documentElement : null;
-
-    return cy
-      .wrap(iframe)
-      .should(() => {
-        expect(element).not.null;
-
-        if (element !== null) {
-          expect(element.querySelector('#root > *')).not.null;
-        }
-      })
-      .then(() => {
-        return element.querySelector('#root');
-      });
-  });
+Cypress.Commands.add('getStoryElement', {}, () => {
+  cy.log('getStoryElement');
+  return cy
+    .get(`#storybook-preview-iframe`, { log: false })
+    .its('0.contentDocument.body', { log: false })
+    .should('not.be.empty')
+    .then((body) => cy.wrap(body, { log: false }))
+    .find('#root', { log: false })
+    .should('not.be.empty')
+    .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
new file mode 100644
index 000000000000..133f544ad620
--- /dev/null
+++ b/cypress/support/index.d.ts
@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+type LoggerMethod = 'log' | 'info' | 'debug';
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select the DOM element of a story in the canvas tab.
+     */
+    getStoryElement(): Chainable<Element>;
+
+    /**
+     * Returns the element while logging it.
+     */
+    console(method: LoggerMethod): Chainable<Element>;
+  }
+}
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 6375e4c73dfa..cae4f81611a5 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -4,7 +4,8 @@
     "baseUrl": "../node_modules",
     "target": "es5",
     "lib": ["es2017", "dom"],
-    "types": ["cypress"]
+    "types": ["cypress", "node"],
+    "esModuleInterop": true
   },
   "include": ["**/*.ts"]
 }
diff --git a/cypress/typings.d.ts b/cypress/typings.d.ts
new file mode 100644
index 000000000000..9c9be08dc12b
--- /dev/null
+++ b/cypress/typings.d.ts
@@ -0,0 +1,2 @@
+declare module 'mocha-list-tests';
+declare module 'teamcity-service-messages';
diff --git a/dev-kits/addon-decorator/package.json b/dev-kits/addon-decorator/package.json
index 0b89a2b5cd75..37f236a8da04 100644
--- a/dev-kits/addon-decorator/package.json
+++ b/dev-kits/addon-decorator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-decorator",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "decorator addon for storybook",
   "keywords": [
     "addon",
@@ -24,13 +24,20 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.4.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 5e0dcbd343cb..86907410aa1e 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "parameter addon for storybook",
   "keywords": [
     "addon",
@@ -24,19 +24,26 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/dev-kits/addon-parameter/src/register.tsx b/dev-kits/addon-parameter/src/register.tsx
index 924fb3d1b1ba..3bd8f0d56258 100644
--- a/dev-kits/addon-parameter/src/register.tsx
+++ b/dev-kits/addon-parameter/src/register.tsx
@@ -14,8 +14,9 @@ export const Content = () => {
     () =>
       results.length ? (
         <ol>
-          {results.map((i: string) => (
-            <li>{i}</li>
+          {results.map((i, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={index}>{i}</li>
           ))}
         </ol>
       ) : null,
diff --git a/dev-kits/addon-preview-wrapper/package.json b/dev-kits/addon-preview-wrapper/package.json
index 6fbfe3e5515c..40e08d9126b8 100644
--- a/dev-kits/addon-preview-wrapper/package.json
+++ b/dev-kits/addon-preview-wrapper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-preview-wrapper",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "preview wrapper addon for storybook",
   "keywords": [
     "addon",
@@ -24,11 +24,18 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
     "react": "^16.8.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/dev-kits/addon-preview-wrapper/src/register.tsx b/dev-kits/addon-preview-wrapper/src/register.tsx
index 6fe81015ff16..d7c3c86d3601 100644
--- a/dev-kits/addon-preview-wrapper/src/register.tsx
+++ b/dev-kits/addon-preview-wrapper/src/register.tsx
@@ -2,11 +2,15 @@ import React, { FunctionComponent } from 'react';
 import { addons, types } from '@storybook/addons';
 import { ADDON_ID } from './constants';
 
-const PreviewWrapper: FunctionComponent<{}> = p => (
-  <div className="my-edit-wrapper">
-    <button type="button" onClick={() => {}}>
-      Edit this page
-    </button>
+const PreviewWrapper: FunctionComponent<{}> = (p) => (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      boxShadow: 'inset 0 0 10px black',
+    }}
+  >
     {p.children}
   </div>
 );
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index a64a063bb83a..972af65ec386 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "roundtrip addon for storybook",
   "keywords": [
     "addon",
@@ -24,20 +24,27 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/dev-kits/addon-roundtrip/src/panel.tsx b/dev-kits/addon-roundtrip/src/panel.tsx
index a3349035fc46..52892f3bae0e 100644
--- a/dev-kits/addon-roundtrip/src/panel.tsx
+++ b/dev-kits/addon-roundtrip/src/panel.tsx
@@ -13,8 +13,9 @@ const Content = memo(({ results }: ContentProps) => (
   <Fragment>
     {results.length ? (
       <ol>
-        {results.map((i: string) => (
-          <li>{i}</li>
+        {results.map((i, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li key={index}>{i}</li>
         ))}
       </ol>
     ) : null}
@@ -39,7 +40,7 @@ export const Panel = () => {
             title: 'setState with options',
             onClick: () => setState(['bar'], { persistence: 'session' }),
           },
-          { title: 'setState with function', onClick: () => setState(s => [...s, 'baz']) },
+          { title: 'setState with function', onClick: () => setState((s) => [...s, 'baz']) },
         ]}
       />
     </Fragment>
diff --git a/docs/gatsby-browser.js b/docs/gatsby-browser.js
index a77f7e3a887d..61a7ca8c9e4c 100644
--- a/docs/gatsby-browser.js
+++ b/docs/gatsby-browser.js
@@ -1,6 +1,6 @@
 const { document } = require('global');
 
-exports.onRouteUpdate = location => {
+exports.onRouteUpdate = (location) => {
   if (location.hash) {
     setTimeout(() => {
       document.querySelector(`${location.hash}`).scrollIntoView();
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
index eb5ac5630a33..511197956edb 100644
--- a/docs/gatsby-config.js
+++ b/docs/gatsby-config.js
@@ -26,8 +26,11 @@ module.exports = {
         '/guides/guide-ember/',
         '/guides/guide-riot/',
         '/guides/guide-svelte/',
+        '/guides/guide-preact/',
+        '/guides/guide-web-components/',
       ],
       configurations: [
+        '/configurations/overview/',
         '/configurations/options-parameter/',
         '/configurations/default-config/',
         '/configurations/custom-webpack-config/',
@@ -38,6 +41,7 @@ module.exports = {
         '/configurations/serving-static-files/',
         '/configurations/env-vars/',
         '/configurations/theming/',
+        '/configurations/composition/',
         '/configurations/cli-options/',
         '/configurations/standalone-options/',
       ],
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
index e9676a818b3b..cf022ae1cb63 100644
--- a/docs/gatsby-node.js
+++ b/docs/gatsby-node.js
@@ -6,8 +6,8 @@ const sm = require('sitemap');
 
 function pagesToSitemap(pages) {
   return pages
-    .filter(p => !!p.path)
-    .map(p => ({
+    .filter((p) => !!p.path)
+    .map((p) => ({
       url: p.path,
       changefreq: 'daily',
       priority: 0.7,
@@ -100,7 +100,7 @@ module.exports = {
     }
 
     // Create pages.
-    result.data.allMarkdownRemark.edges.forEach(edge => {
+    result.data.allMarkdownRemark.edges.forEach((edge) => {
       createPage({
         path: edge.node.fields.slug, // required
         component: template,
diff --git a/docs/src/components/Docs/Content/index.js b/docs/src/components/Docs/Content/index.js
index 78e72085068a..80840bf3bfbb 100644
--- a/docs/src/components/Docs/Content/index.js
+++ b/docs/src/components/Docs/Content/index.js
@@ -20,11 +20,11 @@ const DocsContent = ({ title, content, editUrl, ...rest }) => (
       <div className="markdown">
         <ThemeProvider theme={convert(create({ base: 'light' }))}>
           {parse(content, {
-            replace: domNode => {
+            replace: (domNode) => {
               if (
                 domNode.name === 'pre' &&
                 domNode.children.find(
-                  n => n.name === 'code' && n.attribs.class && n.attribs.class.match(/^language-/)
+                  (n) => n.name === 'code' && n.attribs.class && n.attribs.class.match(/^language-/)
                 )
               ) {
                 const language = domNode.children[0].attribs.class.replace('language-', '');
diff --git a/docs/src/components/Docs/Nav/dropdown.js b/docs/src/components/Docs/Nav/dropdown.js
index 12b093b72037..c0baedc29236 100644
--- a/docs/src/components/Docs/Nav/dropdown.js
+++ b/docs/src/components/Docs/Nav/dropdown.js
@@ -12,7 +12,7 @@ class Nav extends React.Component {
   handleHeadingChange(event) {
     const { sections } = this.props;
     const selectedSectionId = event.target.value;
-    const section = sections.find(s => s.id === selectedSectionId);
+    const section = sections.find((s) => s.id === selectedSectionId);
     const itemId = section.items[0].id;
     this.changeRoute(selectedSectionId, itemId);
   }
@@ -50,7 +50,7 @@ class Nav extends React.Component {
     const selectedSectionId = selectedSection || sections[0].id;
     const selectedItemId = selectedItem || sections[0].items[0].id;
 
-    const selectedSectionData = sections.find(section => section.id === selectedSectionId);
+    const selectedSectionData = sections.find((section) => section.id === selectedSectionId);
     const navs = selectedSectionData.items;
 
     return redirect ? (
@@ -61,9 +61,9 @@ class Nav extends React.Component {
           <select
             className="custom-select custom-select-sm"
             value={selectedSectionId}
-            onChange={event => this.handleHeadingChange(event)}
+            onChange={(event) => this.handleHeadingChange(event)}
           >
-            {sections.map(section => this.renderHeadingOpts(section))}
+            {sections.map((section) => this.renderHeadingOpts(section))}
           </select>
         </div>
 
@@ -71,9 +71,9 @@ class Nav extends React.Component {
           <select
             className="custom-select custom-select-sm"
             value={selectedItemId}
-            onChange={event => this.handleNavChange(event)}
+            onChange={(event) => this.handleNavChange(event)}
           >
-            {navs.map(nav => this.renderNavOpts(nav))}
+            {navs.map((nav) => this.renderNavOpts(nav))}
           </select>
         </div>
       </div>
diff --git a/docs/src/components/Docs/Nav/index.js b/docs/src/components/Docs/Nav/index.js
index dd9bcf90c5d4..ecf34a14ca5d 100644
--- a/docs/src/components/Docs/Nav/index.js
+++ b/docs/src/components/Docs/Nav/index.js
@@ -5,11 +5,11 @@ import './style.css';
 
 const Nav = ({ sections, selectedSectionId, selectedItemId }) => (
   <div id="nav">
-    {sections.map(section => (
+    {sections.map((section) => (
       <div key={section.id}>
         <h3>{section.heading}</h3>
         <ul>
-          {section.items.map(item => {
+          {section.items.map((item) => {
             const cssClass =
               section.id === selectedSectionId && item.id === selectedItemId ? 'selected' : '';
 
diff --git a/docs/src/components/Header/index.js b/docs/src/components/Header/index.js
index 09e048ba1f4f..7be7f35ccf5a 100644
--- a/docs/src/components/Header/index.js
+++ b/docs/src/components/Header/index.js
@@ -44,7 +44,7 @@ Link.propTypes = {
 
 class Header extends React.Component {
   renderSections() {
-    return sections.map(section => (
+    return sections.map((section) => (
       <Link className="selected" key={section.id} to={section.href}>
         {section.caption}
       </Link>
diff --git a/docs/src/components/Homepage/Demo/images/storybook-intro.gif b/docs/src/components/Homepage/Demo/images/storybook-intro.gif
index 0407b00cf168..a73a4485222a 100644
Binary files a/docs/src/components/Homepage/Demo/images/storybook-intro.gif and b/docs/src/components/Homepage/Demo/images/storybook-intro.gif differ
diff --git a/docs/src/components/Homepage/Featured/index.js b/docs/src/components/Homepage/Featured/index.js
index 94f6054f7cc0..cdaba9535296 100644
--- a/docs/src/components/Homepage/Featured/index.js
+++ b/docs/src/components/Homepage/Featured/index.js
@@ -34,7 +34,7 @@ const Featured = ({ featuredStorybooks }) => (
     <div className="col-xs-12">
       <h2>Featured Storybooks</h2>
       <div className="row">
-        {featuredStorybooks.map(item => (
+        {featuredStorybooks.map((item) => (
           <Item {...item} />
         ))}
       </div>
diff --git a/docs/src/components/Homepage/UsedBy/index.js b/docs/src/components/Homepage/UsedBy/index.js
index d8ae690f116c..a3b3d0d88092 100644
--- a/docs/src/components/Homepage/UsedBy/index.js
+++ b/docs/src/components/Homepage/UsedBy/index.js
@@ -65,7 +65,7 @@ const UsedBy = ({ users }) => (
       <div className="used-by-contents">
         <h2 className="used-by-title">Used by these fine folks:</h2>
         <div className="used-by-users">
-          {users.map(user => (
+          {users.map((user) => (
             <User key={user.site} {...user} />
           ))}
         </div>
diff --git a/docs/src/new-components/basics/Link.js b/docs/src/new-components/basics/Link.js
index cf598638578f..0b1aa1224251 100644
--- a/docs/src/new-components/basics/Link.js
+++ b/docs/src/new-components/basics/Link.js
@@ -25,7 +25,7 @@ const linkStyles = css`
     color: ${darken(0.1, color.secondary)};
   }
 
-  ${props =>
+  ${(props) =>
     props.secondary &&
     css`
       color: ${color.mediumdark};
@@ -39,7 +39,7 @@ const linkStyles = css`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.tertiary &&
     css`
       color: ${color.dark};
@@ -53,7 +53,7 @@ const linkStyles = css`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.nochrome &&
     css`
       color: inherit;
@@ -65,7 +65,7 @@ const linkStyles = css`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.inverse &&
     css`
       color: ${color.lightest};
@@ -79,7 +79,7 @@ const linkStyles = css`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.isButton &&
     css`
       border: 0;
@@ -91,7 +91,7 @@ const linkStyles = css`
 `;
 
 const LinkInner = styled.span`
-  ${props =>
+  ${(props) =>
     props.withArrow &&
     css`
       > svg:last-of-type {
@@ -104,7 +104,7 @@ const LinkInner = styled.span`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.containsIcon &&
     css`
       svg {
diff --git a/docs/src/new-components/basics/ListItem.js b/docs/src/new-components/basics/ListItem.js
index 318aa62ec355..7d3cde3fe9a4 100644
--- a/docs/src/new-components/basics/ListItem.js
+++ b/docs/src/new-components/basics/ListItem.js
@@ -74,7 +74,7 @@ const Item = styled.a`
     }
   }
 
-  ${props =>
+  ${(props) =>
     props.active &&
     css`
       ${Title} {
@@ -92,7 +92,7 @@ const Item = styled.a`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.loading &&
     css`
       ${Title} {
@@ -102,7 +102,7 @@ const Item = styled.a`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.disabled &&
     css`
       cursor: not-allowed !important;
diff --git a/docs/src/new-components/basics/shared/site.js b/docs/src/new-components/basics/shared/site.js
index 3901a245b63e..1cd763373843 100644
--- a/docs/src/new-components/basics/shared/site.js
+++ b/docs/src/new-components/basics/shared/site.js
@@ -37,7 +37,7 @@ export const url = {
     mithril: `${npmApiBase}/@storybook/mithril`,
     marko: `${npmApiBase}/@storybook/marko`,
     riot: `${npmApiBase}/@storybook/riot`,
-    polymer: `${npmApiBase}/@storybook/polymer`,
+    'web-components': `${npmApiBase}/@storybook/web-components`,
     preact: `${npmApiBase}/@storybook/preact`,
   },
 
@@ -79,6 +79,7 @@ export const url = {
     mithril: `${docsUrl}/guides/guide-mithril/`,
     marko: `${docsUrl}/guides/guide-marko/`,
     riot: `${docsUrl}/guides/guide-riot/`,
+    webComponents: `${docsUrl}/guides/guide-web-components/`,
   },
 
   // Official addons
diff --git a/docs/src/new-components/basics/tooltip/Tooltip.js b/docs/src/new-components/basics/tooltip/Tooltip.js
index f59ed5924334..35fdd9561f6f 100644
--- a/docs/src/new-components/basics/tooltip/Tooltip.js
+++ b/docs/src/new-components/basics/tooltip/Tooltip.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { typography } from '../shared/styles';
 
-const ifPlacementEquals = (placement, value, fallback = 0) => props =>
+const ifPlacementEquals = (placement, value, fallback = 0) => (props) =>
   props['data-placement'].split('-')[0] === placement ? value : fallback;
 
 const ArrowSpacing = 8;
@@ -37,10 +37,10 @@ const Arrow = styled.div`
 `;
 
 const TooltipWrapper = styled.div`
-  display: ${props => (props.hidden ? 'none' : 'inline-block')};
+  display: ${(props) => (props.hidden ? 'none' : 'inline-block')};
   z-index: 2147483647;
 
-  ${props =>
+  ${(props) =>
     !props.hasChrome &&
     css`
       margin-bottom: ${ifPlacementEquals('top', 8)}px;
@@ -51,7 +51,7 @@ const TooltipWrapper = styled.div`
       margin-right: ${ifPlacementEquals('left', 8)}px;
     `};
 
-  ${props =>
+  ${(props) =>
     props.hasChrome &&
     css`
       margin-bottom: ${ifPlacementEquals('top', ArrowSpacing + 2)}px;
diff --git a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
index fe563238920f..5db1f661165b 100644
--- a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
@@ -16,7 +16,7 @@ storiesOf('basics/tooltip/TooltipLinkList', module)
   .addParameters({
     component: TooltipLinkList,
   })
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
index 52c5c7e3ff26..e9b3a14d34c5 100644
--- a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
@@ -8,7 +8,7 @@ storiesOf('basics/tooltip/TooltipMessage', module)
   .addParameters({
     component: TooltipMessage,
   })
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
index ea450f10121a..aa3f62b30183 100644
--- a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
@@ -8,7 +8,7 @@ storiesOf('basics/tooltip/TooltipNote', module)
   .addParameters({
     component: TooltipNote,
   })
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/docs/src/new-components/basics/tooltip/WithTooltip.js b/docs/src/new-components/basics/tooltip/WithTooltip.js
index 35b026961118..18e9fca4610e 100644
--- a/docs/src/new-components/basics/tooltip/WithTooltip.js
+++ b/docs/src/new-components/basics/tooltip/WithTooltip.js
@@ -14,7 +14,7 @@ const TargetContainer = styled.div`
 `;
 
 const TargetSvgContainer = styled.g`
-  cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
+  cursor: ${(props) => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
 function WithTooltip({
diff --git a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
index 685fca47716e..ff7b1ebe3e4e 100644
--- a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
@@ -49,7 +49,7 @@ storiesOf('basics/tooltip/WithTooltip', module)
   .addParameters({
     component: WithTooltip,
   })
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <ViewPort>
       <BackgroundBox>
         <Spacer />
diff --git a/docs/src/new-components/layout/Header.js b/docs/src/new-components/layout/Header.js
index d38338174982..d84630f015e1 100644
--- a/docs/src/new-components/layout/Header.js
+++ b/docs/src/new-components/layout/Header.js
@@ -76,7 +76,7 @@ const NavItem = styled.div`
   height: 3rem;
   vertical-align: top;
 
-  ${props =>
+  ${(props) =>
     props.showDesktop &&
     css`
       display: none;
@@ -85,7 +85,7 @@ const NavItem = styled.div`
       }
     `};
 
-  ${props =>
+  ${(props) =>
     props.showMobile &&
     css`
       @media (min-width: ${breakpoint * 1.333}px) {
@@ -100,7 +100,7 @@ const NavGroup = styled.div`
   left: 0;
   z-index: 1;
 
-  ${props =>
+  ${(props) =>
     props.right &&
     css`
       left: auto;
diff --git a/docs/src/new-components/lib/StoryLinkWrapper.js b/docs/src/new-components/lib/StoryLinkWrapper.js
index a43a69e9e9c1..5aed95ece15c 100644
--- a/docs/src/new-components/lib/StoryLinkWrapper.js
+++ b/docs/src/new-components/lib/StoryLinkWrapper.js
@@ -10,7 +10,7 @@ export default function StoryLinkWrapper({ href, passHref, children }) {
 
   return React.cloneElement(child, {
     href: passHref && href,
-    onClick: e => {
+    onClick: (e) => {
       e.preventDefault();
       onLinkClick(href);
     },
diff --git a/docs/src/pages/addons/addon-gallery/index.md b/docs/src/pages/addons/addon-gallery/index.md
index 37a856bb68f6..528f17acbd81 100644
--- a/docs/src/pages/addons/addon-gallery/index.md
+++ b/docs/src/pages/addons/addon-gallery/index.md
@@ -90,11 +90,19 @@ You can even run these tests inside a CI box.
 With this addon, you can showcase multiple components (or varying component states) within 1 story.
 Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
 
+### [Paddings](https://github.com/rbardini/storybook-addon-paddings)
+
+Add different paddings to your preview. Useful for checking how components behave when surrounded with white space.
+
 ### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
 
 Given possible values for each prop, renders your component with all combinations of prop values.
 Useful for finding edge cases or seeing all component states at once.
 
+### [Performance](https://github.com/atlassian-labs/storybook-addon-performance)
+
+This addon will help you better understand and debug performance for `React` components.
+
 ### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)
 
 Wraps your story into MuiThemeProvider.
diff --git a/docs/src/pages/addons/static/addon-actions-demo.gif b/docs/src/pages/addons/static/addon-actions-demo.gif
index 27138de47c53..21220819fd01 100644
Binary files a/docs/src/pages/addons/static/addon-actions-demo.gif and b/docs/src/pages/addons/static/addon-actions-demo.gif differ
diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md
index 1118517e21ef..09e0428ec965 100644
--- a/docs/src/pages/addons/using-addons/index.md
+++ b/docs/src/pages/addons/using-addons/index.md
@@ -3,6 +3,8 @@ id: 'using-addons'
 title: 'Using Addons'
 ---
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) and [links](https://github.com/storybookjs/storybook/tree/master/addons/links). But you can use any third party addons distributed via NPM.
 
 Here's how to do it.
@@ -12,18 +14,14 @@ We are going to use an addon called [Notes](https://github.com/storybookjs/story
 First, we need to install the addons:
 
 ```sh
-yarn add -D @storybook/addons @storybook/addon-actions @storybook/addon-knobs @storybook/addon-notes
+yarn add -D @storybook/addons @storybook/addon-actions @storybook/addon-knobs
 ```
 
 within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-notes/register',
-  ],
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
 };
 ```
 
@@ -57,10 +55,8 @@ export const buttonWithEmoji = () => (
     </span>
   </Button>
 );
-buttonWithEmoji.story = {
-  parameters: {
-    notes: 'A small component',
-  },
+buttonWithEmoji.parameters = {
+  notes: 'A small component',
 };
 ```
 
@@ -88,10 +84,8 @@ export const buttonWithEmoji = () => (
     </span>
   </Button>
 );
-buttonWithEmoji.story = {
-  parameters: {
-    notes: { disabled: true }
-  }
+buttonWithEmoji.parameters = {
+  notes: { disabled: true },
 };
 ```
 
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index 88c4a7f62256..05283f47127e 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -3,6 +3,8 @@ id: 'writing-addons'
 title: 'Writing Addons'
 ---
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 This is a complete guide on how to create addons for Storybook.
 
 ## Storybook Basics
@@ -72,11 +74,11 @@ const PANEL_ID = `${ADDON_ID}/panel`;
 
 const MyPanel = () => {
   const value = useParameter(PARAM_KEY, null);
-  
-  return <div>{value}</div>;
-}
+  const item = value ? value.data : '';
+  return <div>{item}</div>;
+};
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   const render = ({ active, key }) => (
     <AddonPanel active={active} key={key}>
       <MyPanel />
@@ -93,20 +95,47 @@ addons.register(ADDON_ID, api => {
 });
 ```
 
-### register the addon
+#### Register the addon
 
 within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['path/to/register.js']
-}
+  addons: ['path/to/addon'],
+};
 ```
 
-Now restart/rebuild storybook and the addon should show up!
+Now restart/rebuild storybook and the addon should show up!  
 When changing stories, the addon's onStoryChange method will be invoked with the new storyId.
 
-#### Note:
+#### TSX Addons
+
+When your addon needs additional typing or you want to keep it locally, you can register it within `.storybook/manager.tsx`
+and import there your TSX components to be compiled by webpack, not requiring an external package nor an additional build step.
+
+```tsx
+// manager.tsx
+
+import React from 'react';
+import { addons } from '@storybook/addons';
+import { AddonPanel } from '@storybook/components';
+import { ADDON_ID, PARAM_KEY, PANEL_ID, MyPanel } from './MyAddon';
+
+addons.register(ADDON_ID, (api) => {
+  addons.addPanel(PANEL_ID, {
+    title: 'My Addon',
+    paramKey: PARAM_KEY,
+    render: ({ active, key }) => (
+      <AddonPanel active={active} key={key}>
+        <MyPanel />
+      </AddonPanel>
+    ),
+  });
+});
+```
+
+#### Note
+
 If you get an error similar to:
 
 ```
@@ -126,11 +155,12 @@ It is likely because you do not have a `.babelrc` file or do not have it configu
 If we want to create a more complex addon, one that wraps the component being rendered for example, there are a few more steps.
 Essentially you can start communicating from and to the manager using the storybook API.
 
-Now we need to create two files, `register.js` and `index.js,`. `register.js` will be loaded by the manager (the outer frame) and `index.js` will be loaded in the iframe/preview. If you want your addon to be framework agnostic, THIS is the file where you need to be careful about that.
+Now we need to create two files, `register.js` and `index.js,`.  
+`register.js` will be loaded by the manager (the outer frame) and `index.js` will be loaded in the iframe/preview. If you want your addon to be framework agnostic, THIS is the file where you need to be careful about that.
 
 ## Creating a decorator
 
-Let's add the following content to the `index.js`. It will expose a decorator called `withFoo` which we use the `.addDecorator()` API to decorate all our stories.
+Let's add the following content to the `index.js`. It will expose a decorator called `withMyAddon` which we use the `.addDecorator()` API to decorate all our stories.
 
 The `@storybook/addons` package contains a `makeDecorator` function which we can use to create such a decorator:
 
@@ -152,8 +182,8 @@ export default makeDecorator({
     // we can also add subscriptions here using channel.on('eventName', callback);
 
     return getStory(context);
-  }
-})
+  },
+});
 ```
 
 In this case, our component can access something called the channel. It lets us communicate with the panel (in the manager).
@@ -176,15 +206,19 @@ import { AddonPanel } from '@storybook/components';
 
 const MyPanel = () => {
   const emit = useChannel({
-    STORY_RENDERED: id => { /* do something */ },
-    'my/customEvent': () => { /* so something */ },
+    STORY_RENDERED: (id) => {
+      /* do something */
+    },
+    'my/customEvent': () => {
+      /* so something */
+    },
   });
 
   return <button onClick={() => emit('my/otherEvent')}>click to emit</button>;
-}
+};
 
 // Register the addon with a unique name.
-addons.register('my/addon', api => {
+addons.register('my/addon', (api) => {
   // Also need to set a unique name to the panel.
   addons.addPanel('my/addon/panel', {
     title: 'My Addon',
@@ -215,12 +249,8 @@ A great way of preserving state even when your component is unmounted is using t
 export const Panel = () => {
   const [state, setState] = useAddonState('my/addon-id', 'initial state');
 
-  return (
-    <button onClick={() => setState('a new value')}>
-      the state = "{state}"
-    </button>
-  );
-}
+  return <button onClick={() => setState('a new value')}>the state = "{state}"</button>;
+};
 ```
 
 This will store your addon's state into storybook core state, and so when your component gets unmounted & remounted, the state will be restored.
@@ -233,8 +263,8 @@ within `.storybook/main.js`:
 
 ```js
 module.exports = {
-  addons: ['path/to/register.js']
-}
+  addons: ['path/to/addon'],
+};
 ```
 
 Then you need to start using the decorator:
@@ -251,21 +281,18 @@ export default {
   decorators: [withMyAddon],
 };
 
-export const defaultView = () => (
-  <Button>Hello Button</Button>
-);
-defaultView.story = {
-  parameters: {
-    myParameter: { data: 'awesome' },
-  },
+export const defaultView = () => <Button>Hello Button</Button>;
+defaultView.parameters = {
+  myParameter: { data: 'awesome' },
 };
 ```
 
 ### 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, {
@@ -291,7 +318,6 @@ export default {
     myAddon: { disable: true },
   },
 };
-
 ```
 
 ## Styling your addon
@@ -305,7 +331,7 @@ But if you do use emotion, you can use the active storybook theme, which benefit
 ## Re-using existing components
 
 Wouldn't it be awesome if we provided you with some common used components you could use to build out your own addon quickly and fit in right away?
-Good news! WE DO! We publish most of storybook's UI components as a package: `@storybook/components`. You can check them out in [our storybook](https://storybookjs.now.sh/) (pretty meta right?).
+Good news! WE DO! We publish most of storybook's UI components as a package: `@storybook/components`. You can check them out in [our storybook](https://storybookjs.netlify.com/) (pretty meta right?).
 
 ## Addon API
 
@@ -325,7 +351,7 @@ When you are developing your addon as a package, you can't use `npm link` to add
 ```json
 {
   "dependencies": {
-    "@storybook/addon-notes": "file:///home/username/myrepo"
+    "@storybook/addon-custom": "file:///home/username/myrepo"
   }
 }
 ```
diff --git a/docs/src/pages/basics/exporting-storybook/index.md b/docs/src/pages/basics/exporting-storybook/index.md
index a43f154e1bff..9b1a55a99d93 100644
--- a/docs/src/pages/basics/exporting-storybook/index.md
+++ b/docs/src/pages/basics/exporting-storybook/index.md
@@ -37,22 +37,16 @@ Additionally, you can deploy Storybook directly into GitHub pages with our [stor
 
 Or, you can export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information.
 
-## Deploying to ZEIT Now
+## Deploying to Vercel
 
-[ZEIT Now](https://zeit.co/home) is a cloud platform for websites and serverless APIs, that you can use to deploy your Storybook projects to your personal domain (or a free `.now.sh` suffixed URL).
+[Vercel](https://vercel.com/home) is a cloud platform for hosting static sites and Serverless Functions, that you can use to deploy your Storybook projects to your personal domain (or a free `.now.sh` suffixed URL).
 
-- Install the [Now CLI](https://github.com/zeit/now):
+To deploy your Storybook project to Vercel, all that's required is to connect your [Git repository](https://vercel.com/docs/v2/git-integrations) and import the project. The build command, project directory, and project type will be automatically detected upon import.
 
-```sh
-npm i -g now
-```
-
-- Configure your `build` script:
+If you are working with more than just a Storybook project in your repository, and just want to build Storybook for your deployment, be sure to set the `build` script in the `package.json` file to the following:
 
 ```
 `"build": "build-storybook -c .storybook -o build"`
 ```
 
-- Execute `now` on your terminal.
-
-[Example project](https://github.com/zeit/now-examples/tree/master/storybook) for reference.
+Once imported, a deployment will be created. From now on, every time you `git push`, a new [Preview Deployment](https://vercel.com/docs/v2/platform/deployments#preview) will be created. If pushing or merging to the default branch, a [Production Deployment](https://vercel.com/docs/v2/platform/deployments#production) will be triggered.
diff --git a/docs/src/pages/basics/faq/index.md b/docs/src/pages/basics/faq/index.md
index 69a66c41f18e..2ac41d671524 100644
--- a/docs/src/pages/basics/faq/index.md
+++ b/docs/src/pages/basics/faq/index.md
@@ -26,7 +26,7 @@ You can generally reuse webpack rules by placing them in a file that is `require
 
 ```js
 module.exports = {
-  webpack: async (baseConfig) => {
+  webpackFinal: async (baseConfig) => {
     const nextConfig = require('/path/to/next.config.js');
 
     // merge whatever from nextConfig into the webpack config storybook will use
diff --git a/docs/src/pages/basics/introduction/index.md b/docs/src/pages/basics/introduction/index.md
index d3beedd52bbe..2b20153738a3 100644
--- a/docs/src/pages/basics/introduction/index.md
+++ b/docs/src/pages/basics/introduction/index.md
@@ -18,4 +18,4 @@ Here are some featured Storybooks to see how it works:
 - [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
 - [Demo of React Native Web](https://necolas.github.io/react-native-web/docs/) - [source](https://github.com/necolas/react-native-web)
 
-Read the Learn Storybook [tutorial](https://www.learnstorybook.com) for a step by step guide to building an app with Storybook and to see how building components in isolation can supercharge your app development workflow.
+Read the Learn Storybook [tutorial](https://www.learnstorybook.com) for a step-by-step guide to building an app with Storybook and to see how building components in isolation can supercharge your app development workflow.
diff --git a/docs/src/pages/basics/live-examples/index.md b/docs/src/pages/basics/live-examples/index.md
index 4f236c045a10..4502bdfad346 100644
--- a/docs/src/pages/basics/live-examples/index.md
+++ b/docs/src/pages/basics/live-examples/index.md
@@ -5,57 +5,47 @@ title: 'Live Examples'
 
 ### Next release
 
-- [React Official](https://storybookjs-next.now.sh/official-storybook/)
-- [Vue](https://storybookjs-next.now.sh/vue-kitchen-sink/)
-- [Angular](https://storybookjs-next.now.sh/angular-cli/)
-- [Polymer](https://storybookjs-next.now.sh/polymer-cli/)
-- [Mithril](https://storybookjs-next.now.sh/mithril-kitchen-sink/)
-- [Marko](https://storybookjs-next.now.sh/marko-cli/)
-- [HTML](https://storybookjs-next.now.sh/html-kitchen-sink/)
-- [Svelte](https://storybookjs-next.now.sh/svelte-kitchen-sink/)
-- [Riot](https://storybookjs-next.now.sh/riot-kitchen-sink/)
-- [Ember](https://storybookjs-next.now.sh/ember-cli/)
-- [Preact](https://storybookjs-next.now.sh/preact-kitchen-sink/)
-- [Rax](https://storybookjs-next.now.sh/rax-kitchen-sink/)
+- [React Official](https://next--storybookjs.netlify.com/official-storybook/)
+- [Vue](https://next--storybookjs.netlify.com/vue-kitchen-sink/)
+- [Angular](https://next--storybookjs.netlify.com/angular-cli/)
+- [Mithril](https://next--storybookjs.netlify.com/mithril-kitchen-sink/)
+- [Marko](https://next--storybookjs.netlify.com/marko-cli/)
+- [HTML](https://next--storybookjs.netlify.com/html-kitchen-sink/)
+- [Svelte](https://next--storybookjs.netlify.com/svelte-kitchen-sink/)
+- [Riot](https://next--storybookjs.netlify.com/riot-kitchen-sink/)
+- [Ember](https://next--storybookjs.netlify.com/ember-cli/)
+- [Preact](https://next--storybookjs.netlify.com/preact-kitchen-sink/)
+- [Rax](https://next--storybookjs.netlify.com/rax-kitchen-sink/)
 
 ### Current release
 
-- [React Official](https://storybookjs.now.sh/official-storybook/)
-- [Vue](https://storybookjs.now.sh/vue-kitchen-sink/)
-- [Angular](https://storybookjs.now.sh/angular-cli/)
-- [Polymer](https://storybookjs.now.sh/polymer-cli/)
-- [Mithril](https://storybookjs.now.sh/mithril-kitchen-sink/)
-- [Marko](https://storybookjs.now.sh/marko-cli/)
-- [HTML](https://storybookjs.now.sh/html-kitchen-sink/)
-- [Svelte](https://storybookjs.now.sh/svelte-kitchen-sink/)
-- [Riot](https://storybookjs.now.sh/riot-kitchen-sink/)
-- [Ember](https://storybookjs.now.sh/ember-cli/)
-- [Preact](https://storybookjs.now.sh/preact-kitchen-sink/)
-- [Rax](https://storybookjs.now.sh/rax-kitchen-sink/)
-
-### 5.1
-
-- [React Official](https://storybooks-official.netlify.com)
-- [Vue](https://storybooks-vue.netlify.com/)
-- [Angular](https://storybooks-angular.netlify.com/)
-- [Polymer](https://storybooks-polymer.netlify.com/)
-- [Mithril](https://storybooks-mithril.netlify.com/)
-- [Marko](https://storybooks-marko.netlify.com/)
-- [HTML](https://storybooks-html.netlify.com/)
-- [Svelte](https://storybooks-svelte.netlify.com/)
-- [Riot](https://storybooks-riot.netlify.com/)
-- [Ember](https://storybooks-ember.netlify.com/)
-- [Preact](https://storybooks-preact.netlify.com/)
+- [React Official](https://storybookjs.netlify.com/official-storybook/)
+- [Vue](https://storybookjs.netlify.com/vue-kitchen-sink/)
+- [Angular](https://storybookjs.netlify.com/angular-cli/)
+- [Mithril](https://storybookjs.netlify.com/mithril-kitchen-sink/)
+- [Marko](https://storybookjs.netlify.com/marko-cli/)
+- [HTML](https://storybookjs.netlify.com/html-kitchen-sink/)
+- [Svelte](https://storybookjs.netlify.com/svelte-kitchen-sink/)
+- [Riot](https://storybookjs.netlify.com/riot-kitchen-sink/)
+- [Ember](https://storybookjs.netlify.com/ember-cli/)
+- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
+- [Rax](https://storybookjs.netlify.com/rax-kitchen-sink/)
+
+### 5.0
+
+- [React Official](https://release-5-0--storybooks-official.netlify.com/)
+- [Vue](https://release-5-0--storybooks-vue.netlify.com/)
+- [Angular](https://release-5-0--storybooks-angular.netlify.com/)
+- [Mithril](https://release-5-0--storybooks-mithril.netlify.com/)
+- [Marko](https://release-5-0--storybooks-marko.netlify.com/)
+- [HTML](https://release-5-0--storybooks-html.netlify.com/)
+- [Svelte](https://release-5-0--storybooks-svelte.netlify.com/)
+- [Riot](https://release-5-0--storybooks-riot.netlify.com/)
+- [Ember](https://release-5-0--storybooks-ember.netlify.com/)
+- [Preact](https://release-5-0--storybooks-preact.netlify.com/)
 
 ### 3.4
 
 - [React Official](https://release-3-4--storybooks-official.netlify.com)
 - [Vue](https://release-3-4--storybooks-vue.netlify.com/)
 - [Angular](https://release-3-4--storybooks-angular.netlify.com/)
-- [Polymer](https://release-3-4--storybooks-polymer.netlify.com/)
-
-### 3.3
-
-- [React Official](https://release-3-3--storybooks-official.netlify.com)
-- [Vue](https://release-3-3--storybooks-vue.netlify.com/)
-- [Angular](https://release-3-3--storybooks-angular.netlify.com/)
diff --git a/docs/src/pages/basics/toolbar-guide/index.md b/docs/src/pages/basics/toolbar-guide/index.md
new file mode 100644
index 000000000000..fcaaecc75a9d
--- /dev/null
+++ b/docs/src/pages/basics/toolbar-guide/index.md
@@ -0,0 +1,63 @@
+---
+id: 'toolbar-guide'
+title: 'Toolbar'
+---
+
+Storybook comes with a toolbar which is displayed by default as part of the layout with a default height of `40px`.
+
+The user can toggle whether to hide or display the toolbar. It is on display by default and set on the canvas tab. This feature can be toggled as one of the [Global options](https://storybook.js.org/docs/configurations/options-parameter/).
+
+To hide or display the toolbar, the user should toggle the `isToolshown` key in `config.js`,
+
+```jsx
+addParameter({
+  options: {
+    /**
+     * show/hide tool bar
+     * @type {Boolean}
+     */
+    isToolshown: true,
+  },
+});
+```
+
+The toolbar is not an addon but provides easy access to them. Both Canvas and docs are tabs within the toolbar. While on the canvas tab users have access to the following default features:
+
+- Zoom-in, zoom-out, and reset-zoom on the preview
+- Change the background of the preview
+- Adjust for color blindness emulation
+- Make the preview full screen
+- Open the canvas in a new tab
+- Copy canvas link
+
+On the other hand, the [DocsPage](https://github.com/storybookjs/storybook/tree/master/addons/docs#docspage) is also not an addon but the successor to addon-info. The user has access to the DocsPage when `Docs` is installed. It is added to the toolbar by default with zero config required.
+
+A user can [write custom addons](https://storybook.js.org/docs/addons/writing-addons/) and add them to the toolbar. This can be achieved by modifying a the value for `type` when registering an addon.
+
+For an addon to be displayed in the toolbar, the user must add the `TAB` type to the addon. The user must also add the `route` and `match` key/value pairs.
+
+```jsx
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+
+const ADDON_ID = 'myaddon';
+const PARAM_KEY = 'myAddon';
+const PANEL_ID = `${ADDON_ID}/tab`;
+
+addons.register(ADDON_ID, api => {
+  const render = ({ active, key }) => (
+    <div>
+      <SomeComponent />
+    </div>
+  );
+  const title = 'My Addon';
+
+  addons.add(PANEL_ID, {
+    type: types.TAB,
+    route: ({ storyId }) => `/info/${storyId}`,
+    match: ({ viewMode }) => viewMode === 'info',
+    title,
+    render,
+  });
+});
+```
diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md
index 6edbbcc82dbb..673b560e1242 100644
--- a/docs/src/pages/basics/writing-stories/index.md
+++ b/docs/src/pages/basics/writing-stories/index.md
@@ -3,6 +3,8 @@ id: 'writing-stories'
 title: 'Writing Stories'
 ---
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 A Storybook is a collection of stories. Each story represents a single visual state of a component.
 
 > Technically, a story is a function that returns something that can be rendered to screen.
@@ -157,14 +159,14 @@ import { configure } from '@storybook/react';
 const loaderFn = () => {
   const allExports = [require('./welcome.stories.js')];
   const req = require.context('../src/components', true, /\.stories\.js$/);
-  req.keys().forEach(fname => allExports.push(req(fname)));
+  req.keys().forEach((fname) => allExports.push(req(fname)));
   return allExports;
 };
 
 configure(loaderFn, module);
 ```
 
-Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use `require.context`.
+Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#requirecontext) to learn more about how to use `require.context`.
 
 If you are using the `storiesOf` API directly, or are using `@storybook/react-native` where CSF is unavailable, you should use a loader function with **no return value**:
 
@@ -178,7 +180,7 @@ const loaderFn = () => {
 
   // dynamic loading, unavailable in react-native
   const req = require.context('../src/components', true, /\.stories\.js$/);
-  req.keys().forEach(fname => req(fname));
+  req.keys().forEach((fname) => req(fname));
 };
 
 configure(loaderFn, module);
@@ -198,16 +200,25 @@ Here is an example of a global decorator which centers every story in the `.stor
 import React from 'react';
 import { addDecorator } from '@storybook/react';
 
-addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);
+addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);
 ```
 
 > \* In Vue projects you have to use the special component `<story/>` instead of the function parameter `storyFn` that is used in React projects, even if you are using JSX, for example:
+>
 > ```jsx
-> var decoratorVueJsx = () => ({ render() { return <div style={{ textAlign: 'center' }}><story/></div>} })
-> addDecorator(decoratorVueJsx)
-> 
-> var decoratorVueTemplate = () => { return { template: `<div style="text-align:center"><story/></div>` }
-> addDecorator(decoratorVueTemplate)
+> var decoratorVueJsx = () => ({
+>   render() {
+>     return (
+>       <div style={{ textAlign: 'center' }}>
+>         <story />
+>       </div>
+>     );
+>   },
+> });
+> addDecorator(decoratorVueJsx);
+>
+> var decoratorVueTemplate = () => ({ template: `<div style="text-align:center"><story/></div>` });
+> addDecorator(decoratorVueTemplate);
 > ```
 
 And here's an example of component/local decorators. The component decorator wraps all the stories in a yellow frame, and the story decorator wraps a single story in an additional red frame.
@@ -218,14 +229,12 @@ import MyComponent from './MyComponent';
 
 export default {
   title: 'MyComponent',
-  decorators: [storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>],
+  decorators: [(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>],
 };
 
 export const normal = () => <MyComponent />;
 export const special = () => <MyComponent text="The Boss" />;
-special.story = {
-  decorators: [storyFn => <div style={{ border: '5px solid red' }}>{storyFn()}</div>],
-};
+special.decorators = [(storyFn) => <div style={{ border: '5px solid red' }}>{storyFn()}</div>];
 ```
 
 Decorators are not only for story formatting, they are generally useful for any kind of context needed by a story.
@@ -267,8 +276,8 @@ export default {
 export const small = () => <MyComponent text="small" />;
 export const medium = () => <MyComponent text="medium" />;
 export const special = () => <MyComponent text="The Boss" />;
-special.story = {
-  parameters: { notes: specialNotes },
+special.parameters = {
+  notes: specialNotes,
 };
 ```
 
@@ -280,8 +289,8 @@ By default, search results will show up based on the file name of your stories.
 
 ```jsx
 export const callout = () => <Callout>Some children</Callout>;
-callout.story = {
-  parameters: { notes: 'popover tooltip' },
+callout.parameters = {
+  notes: 'popover tooltip',
 };
 ```
 
@@ -349,3 +358,33 @@ Multiple storybooks can be built for different kinds of stories or components in
   }
 }
 ```
+
+## Permalinking to stories
+
+Sometimes you might wish to change the name of a story or its position in the hierarchy, but preserve the link to the story or its documentation. Here's how to do it.
+
+Consider the following story:
+
+```js
+export default {
+  title: 'Foo/Bar',
+};
+
+export const Baz = () => <MyComponent />;
+```
+
+Storybook's ID-generation logic will give this the ID `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
+
+Now suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
+
+```js
+export default {
+  title: 'OtherFoo/Bar',
+  id: 'Foo/Bar', // or 'foo-bar' if you prefer
+};
+
+export const Baz = () => <MyComponent />;
+Baz.storyName = 'Moo';
+```
+
+Storybook will prioritize the `id` over the title for ID generation, if provided, and will prioritize the `story.name` over the export key for display.
diff --git a/docs/src/pages/configurations/add-custom-body/index.md b/docs/src/pages/configurations/add-custom-body/index.md
index edd3b344c829..9fe4baea6ddd 100644
--- a/docs/src/pages/configurations/add-custom-body/index.md
+++ b/docs/src/pages/configurations/add-custom-body/index.md
@@ -11,6 +11,16 @@ You can accomplish this by creating a file called `preview-body.html` inside the
 <div id="custom-root"></div>
 ```
 
+If using relative sizing in your project (like `rem` or `em`), you may update the base `font-size` by adding a `style` tag to `preview-body.html`:
+
+```html
+<style>
+  body {
+    font-size: 15px;
+  }
+</style>
+```
+
 That's it. Storybook will inject these tags to html body.
 
 > **Important**
diff --git a/docs/src/pages/configurations/composition/index.md b/docs/src/pages/configurations/composition/index.md
new file mode 100644
index 000000000000..e17f6436c783
--- /dev/null
+++ b/docs/src/pages/configurations/composition/index.md
@@ -0,0 +1,106 @@
+---
+id: 'composition'
+title: 'Storybook Composition'
+---
+
+Storybook composition is a feature that allows you to compose multiple storybook together. This can be useful if
+
+- you have a need for multiple frameworks
+- you have multiple teams using separate storybooks
+- you are using community component libraries
+
+---
+
+## Composing a storybook
+
+To compose another storybook into yours, all you need is the URL of storybook.
+
+Here's how you do it:
+
+```js
+// main.js
+module.exports = {
+  refs: {
+    // long form
+    example: {
+      title: 'My composed storybook',
+      url: 'https://next--storybookjs.netlify.app/ember-cli',
+    },
+    // shorthand
+    cra: 'https://next--storybookjs.netlify.app/cra-ts-kitchen-sink',
+  },
+}
+```
+
+The above code adds 2 refs to storybook.
+
+The storybooks being composed don't need to be of the same version or using the same framework.
+
+> Composing storybooks from < 6 is supported, as long as the storybooks are hosted on unique origins. If you want to compose multiple storybooks from the same origin, those must all be version 6 or higher.
+
+### Automatic loading
+
+The process above is actually often not even required! Storybook will auto-compose direct dependencies' storybooks if it's able to find them.
+
+The ref will be auto-loaded if the **direct dependency** has a field called `storybook` in it's `package.json` which looks like this:
+
+```json
+{
+  "storybook": {
+    "title": "My Package",
+    "url": "https://my.storybook-url.com"
+  }
+}
+```
+
+This is really useful if you depend on a component library that is also using storybook.
+
+Not only do you get to view all of their stories, but their documentation too, if they use [addon-docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)!
+
+## Preparing to have your storybook composed
+
+Publish your (static) storybook online using any hosting platform, ensuring CORS is enabled.
+
+When a user composes many storybooks together this may add considerable weight to the page-load.
+
+We want to make sure the user composing storybooks together isn't loading the entire storybook just to see the stories appear in the sidebar.
+
+To optimize the loading of refs we want to generate a `stories.json` file, which contains a static list of all the stories and the parameters needed to render in the sidebar.
+
+This can be done with the storybook-cli: `npx sb extract`. It requires you have a built storybook. 
+You may pass it 2 arguments for where you have storybook built, and where you wannt `stories.json` to be placed: `npx sb extract <where-your-storybook-static-is> <where-you-want-stories-json>`.
+
+For an example what this file should look like, see: [here](https://next--storybookjs.netlify.app/dev-kits/stories.json).
+
+### Authentication
+
+If you have some authentication layer on your hosted storybook, the composing the storybook will fail. Storybook will show a message in the sidebar if that happens.
+
+
+You can assist the user by creating a `metadata.json` file with a `authUrl` field, and ensure this file **is** loadable (even in the user is not authenticated):
+
+```json
+{
+  "authUrl": "https://example.com"
+}
+```
+
+Storybook will show a UI to assist the user to login, and then reload the composed storybook.
+
+## Advanced
+
+When you compose a storybook into your own, you get **all** the stories, in their original format. You may not agree with some names, or you might want to filter or sort some stories to your liking.
+
+You can add a 'mapper' to storybook that will be used to transform the received stories to something of your liking.
+
+```js
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  storyMapper: (ref, story) => {
+    return { ...a, kind: a.kind.replace('|', '/') };
+  }
+});
+```
+
+You can remove stories by returning `null`.
diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md
index efc86322827d..ac1d7e4da001 100644
--- a/docs/src/pages/configurations/custom-webpack-config/index.md
+++ b/docs/src/pages/configurations/custom-webpack-config/index.md
@@ -3,7 +3,9 @@ id: 'custom-webpack-config'
 title: 'Custom Webpack Config'
 ---
 
-You can customize Storybook's webpack setup by providing a `webpack` field in `main.js` file.
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
+You can customize Storybook's webpack setup by providing a `webpackFinal` field in `main.js` file.
 The value should be an async function that receives a webpack config and eventually returns a webpack config.
 
 Storybook has its own Webpack setup and a dev server.
@@ -157,7 +159,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config#webpa
 - Edit its contents:
   ```js
   module.exports = {
-    webpack: (config) => console.dir(config, { depth: null }) || config,
+    webpackFinal: (config) => console.dir(config, { depth: null }) || config,
   };
   ```
 - Then run storybook:
@@ -171,14 +173,14 @@ The console should log the entire config, for you to inspect.
 
 The value should export a `function`, it's first argument, is the config that storybook would use, if you were to not customize it. The second argument is an options object from storybook, this will have information about where config came from, whether we're in production of development mode etc.
 
-For example, here's a `.storybook/main.js` to add [SASS](http://sass-lang.com/) support:
+For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support:
 
 ```js
 const path = require('path');
 
 // Export a function. Accept the base config as the only param.
 module.exports = {
-  webpack: async (config, { configType }) => {
+  webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
@@ -207,7 +209,7 @@ Furthermore, `config` requires the `HtmlWebpackplugin` to generate the preview p
 
 ```js
 module.exports = {
-  webpack: (config) => {
+  webpackFinal: (config) => {
     config.plugins.push(...);
     return config;
   },
@@ -220,9 +222,7 @@ If you're using a non-standard Storybook config directory, you should put `main.
 
 ## Using Your Existing Config
 
-If you have an existing webpack config for your project and want to reuse this app's configuration, you can either:
-
-- Import your main webpack config into Storybook's `.storybook/main.js` and merge the 2 configs.
+If you have an existing webpack config for your project and want to reuse this app's configuration, you can import your main webpack config into Storybook's `.storybook/main.js` and merge the 2 configs:
 
 **Example**
 _replacing the loaders from storybook with the loaders from your app's `webpack.config.js`_
@@ -234,7 +234,7 @@ const path = require('path');
 const custom = require('../webpack.config.js');
 
 module.exports = {
-  webpack: (config) => {
+  webpackFinal: (config) => {
     return { ...config, module: { ...config.module, rules: custom.module.rules } };
   },
 };
diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index e60dea2d3dcd..f137efe8d3d9 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -37,12 +37,6 @@ addons.setConfig({
    */
   panelPosition: 'bottom',
 
-  /**
-   * display the top-level grouping as a "root" in the sidebar
-   * @type {Boolean}
-   */
-  showRoots: false,
-
   /**
    * sidebar tree animations
    * @type {Boolean}
@@ -66,22 +60,45 @@ addons.setConfig({
    */
   theme: undefined,
 
-  /**	
-   * id to select an addon panel	
-   * @type {String}	
-   */	
+  /**
+   * id to select an addon panel
+   * @type {String}
+   */
   selectedPanel: undefined,
+
+  /**
+   * Select the default active tab on Mobile.
+   * 'sidebar' | 'canvas' | 'addons'
+   * @type {('sidebar'|'canvas'|'addons')}
+   */
+  initialActive: 'sidebar',
 });
 ```
 
-### Sorting stories
+### showRoots
 
-Import and use `addParameters` with the `options` key in your `preview.js` file.
+Export `parameters` with the `options` key in your `preview.js` file.
 
 ```js
-import { addParameters, configure } from '@storybook/react';
+export const parameters = {
+  options: {
+    /**
+     * display the top-level grouping as a "root" in the sidebar
+     * @type {Boolean}
+     */
+    showRoots: false,
+  },
+});
+```
+
+### Sorting stories
+
+By default, stories are sorted in the order in which they were imported. This can be overridden by adding `storySort` to the `options` parameters in your `preview.js` file.
+
+The most powerful method of sorting is to provide a function to `storySort`. Any custom sorting can be achieved with this method.
 
-addParameters({
+```js
+export const parameters = {
   options: {
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
@@ -89,6 +106,50 @@ addParameters({
 };
 ```
 
+The `storySort` can also accept a configuration object.
+
+```js
+
+export parameters = {
+  options: {
+    storySort: {
+      method: 'alphabetical', // Optional, defaults to 'configure'.
+      order: ['Intro', 'Components'], // Optional, defaults to [].
+      locales: 'en-US', // Optional, defaults to system locale.
+    },
+  },
+};
+```
+
+To sort your stories alphabetically, set `method` to `'alphabetical'` and optionally set the `locales` string. To sort your stories using a custom list, use the `order` array; stories that don't match an item in the `order` list will appear after the items in the list.
+
+The `order` array can accept a nested array in order to sort 2nd-level story kinds. For example:
+
+```js
+export parameters = {
+  options: {
+    storySort: {
+      order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
+    },
+  },
+};
+```
+
+Which would result in this story ordering:
+
+1. `Intro` and then `Intro/*` stories
+2. `Pages` story
+3. `Pages/Home` and `Pages/Home/*` stories
+4. `Pages/Login` and `Pages/Login/*` stories
+5. `Pages/Admin` and `Pages/Admin/*` stories
+6. `Pages/*` stories
+7. `Components` and `Components/*` stories
+8. All other stories
+
+Note that the `order` option is independent of the `method` option; stories are sorted first by the `order` array and then by either the `method: 'alphabetical'` or the default `configure()` import order.
+
+### Theming
+
 For more information on configuring the `theme`, see [theming](../theming/).
 
 ### Per-story options
diff --git a/docs/src/pages/configurations/overview/index.md b/docs/src/pages/configurations/overview/index.md
new file mode 100644
index 000000000000..5c9de8814fb8
--- /dev/null
+++ b/docs/src/pages/configurations/overview/index.md
@@ -0,0 +1,72 @@
+---
+id: 'overview'
+title: 'Configuration overview'
+---
+
+For CLI options see: [here](../cli-options).
+
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
+## Main configuration
+
+Storybook has a few files it uses for configuration, and they are grouped together into a directory (default: `.storybook`).
+
+The most important file is the `main.js` file. This is where general config is declared.
+
+Here's a minimal example of that file:
+
+```js
+module.exports = {
+  stories: ['../src/components/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-essentials',
+  ],
+};
+```
+
+`stories` is a list of [glob](https://www.npmjs.com/package/glob) patterns that tells where your stories are located, relative to the configuration file.
+
+`logLevel` is a setting that tells storybook to only log to a specific level. Options are: `trace`, `debug`, `info`, `warn`, `error` and `silent`.
+
+The `addons` field can refer to traditional [addons](../../addons/introduction), but it can also include [presets](/docs/presets/introduction/), which are able to extend the config further.
+
+### `main.js` is a  Preset
+The `main.js` file is actually a preset! So if you know how to configure storybook, then you know how to write a preset, and vice-versa!
+So the `main.js` API is equal to [that of presets](../../presets/writing-presets/#presets-api).
+
+
+## Manager & preview
+
+Storybook works by being split into 2 applications ("manager" and "preview"), which communicate with each other over a postMessage channel.
+
+The preview application is essentially just your stories with a framework-agnostic 'router'. It renders whichever story the  manager application tells it to render.
+
+The manager application renders the UI of [addons](../../addons/introduction), the navigator and [toolbar](../../basics/toolbar-guide/).
+
+There are two extra config files, if you need to configure the runtime of Manager or Preview.
+
+In `preview.js` you can add global [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters):
+
+```js
+// preview.js
+import { addDecorator } from '@storybook/svelte';
+import { withKnobs } from '@storybook/addon-knobs';
+
+addDecorator(withKnobs);
+```
+
+In `manager.js` you can add [UI options](../options-parameter/#global-options).
+
+```js
+// manager.js
+import { themes } from '@storybook/theming/create';
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  theme: themes.dark,
+});
+```
+
+## webpack
+
+For how to customize webpack, [view the customize webpack section](../custom-webpack-config/)
diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md
index c02a8698c8e6..4ed3ad2d176a 100644
--- a/docs/src/pages/configurations/theming/index.md
+++ b/docs/src/pages/configurations/theming/index.md
@@ -5,12 +5,22 @@ title: 'Theming Storybook'
 
 Storybook is theme-able!
 
+> Note that theming storybook changed recently, to be in `manager.js` (introduced in 5.3). But addon-docs is not yet compatible with this new way of configuring the theme.
+> 
+> See here how to use theme storybook in a way that addon-docs will be themed as well: https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/theming.md
+
 ## Global theming
 
 It's possible to theme Storybook globally.
 
 We've created two basic themes that look good out of the box: "normal" (a light theme) and "dark" (a dark theme). Unless you've set your preferred color scheme as dark Storybook will use the light theme as default.
 
+Make sure you have installed `@storybook/addons` and `@storybook/theming` packages.
+```sh
+npm install @storybook/addons --save-dev
+npm install @storybook/theming --save-dev
+```
+
 As an example, you can tell Storybook to use the "dark" theme by modifying `.storybook/manager.js`:
 
 ```js
@@ -20,7 +30,6 @@ import { themes } from '@storybook/theming';
 addons.setConfig({
   theme: themes.dark,
 });
-
 ```
 
 When setting a theme, set a full theme object. The theme is replaced, not combined.
diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md
index 17e08d3bf8f3..9996c71fc295 100644
--- a/docs/src/pages/configurations/typescript-config/index.md
+++ b/docs/src/pages/configurations/typescript-config/index.md
@@ -3,234 +3,56 @@ id: 'typescript-config'
 title: 'TypeScript Config'
 ---
 
-This is a central reference for using Storybook with TypeScript.
+Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.
 
-## Typescript configuration presets
+- [Default configuration](#default-configuration)
+- [Main.js configuration](#mainjs-configuration)
+- [Manual configuration](#manual-configuration)
+- [More Resources](#more-resources)
 
-The easiest way to write and configure your stories in TypeScript is by using [Storybook presets](../../presets/introduction).
+## Default configuration
 
-If you're using Create React App (CRA) and have configured it to work with TS, you should use the [CRA preset](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app), which configures Storybook to reuse CRA's TS handling.
+The base Typescript configuration uses `babel-loader` for Typescript transpilation, and optionally `fork-ts-checker-webpack-plugin` for checking.
 
-If you're not using CRA, the next best thing is to use the [Typescript preset](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript), which configures `ts-loader` under the hood.
+Each framework uses the base configuration unless otherwise specified:
 
-If you need more control than the TypeScript preset offers, read on for manual configuration instructions.
+- **Angular** ignores the base and uses `ts-loader` and `ngx-template-loader`.
+- **Vue** ignores the uses `ts-loader` and applies it to both `.tsx?` and `.vue` files.
+- **React** adds `react-docgen-typescript-loader` the base.
 
-> If using TypeScript, some addons require features available in TS version 3.4+.
+## Main.js configuration
 
-## Setting up TypeScript with awesome-typescript-loader
+To make it easier to configure Typescript handling, we've added a new field, `typescript`, to [`main.js`](../overview/index.md).
 
-### Dependencies you may need
-
-```bash
-yarn add -D typescript
-yarn add -D awesome-typescript-loader
-yarn add -D @storybook/addon-info react-docgen-typescript-loader # optional but recommended
-yarn add -D jest "@types/jest" ts-jest #testing
-```
-
-We have had the best experience using `awesome-typescript-loader`, but other tutorials may use `ts-loader`, so be sure to configure accordingly. You can even use `babel-loader` with a `ts-loader` configuration.
-
-### Setting up TypeScript to work with Storybook
-
-We [configure storybook's webpack](/configurations/custom-webpack-config/#full-control-mode--default) by changing `.storybook/main.js`:
-
-```js
-module.exports = {
-  webpack: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('awesome-typescript-loader'),
-        },
-        // Optional
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
-};
-```
-
-The above example shows a working Webpack config with the [TSDocgen plugin](https://github.com/strothj/react-docgen-typescript-loader) integrated. This plugin is not necessary to use Storybook and the section marked `// optional` can be safely removed if the features of TSDocgen are not required.
-
-### `tsconfig.json`
-
-```json
-{
-  "compilerOptions": {
-    "outDir": "build/lib",
-    "module": "commonjs",
-    "target": "es5",
-    "lib": ["es5", "es6", "es7", "es2017", "dom"],
-    "sourceMap": true,
-    "allowJs": false,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "rootDirs": ["src", "stories"],
-    "baseUrl": "src",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "build", "scripts"]
-}
-```
-
-This is for the default configuration where `/stories` is a peer of `src`. If you have them all in `src`, you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`.
-
-## Setting up TypeScript with babel-loader
-
-### A note for Create React App users
-
-Please use [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) for full compatibility with [Create React App](https://create-react-app.dev/) features - which includes TypeScript support.
-
-### Setting up TypeScript to work with Storybook
-
-The following code uses [`babel-preset-react-app`](https://github.com/facebook/create-react-app/tree/master/packages/babel-preset-react-app).
-
-We will create a [custom Webpack config](/configurations/custom-webpack-config/) by creating editing/creating the `.storybook/main.js`:
+Here are the default values:
 
 ```js
 module.exports = {
-  stories: ['../src/**/*.stories.tsx'],
-  webpack: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
-      },
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
-};
-```
-
-### `tsconfig.json`
-
-If your stories are outside the `src` folder, for example the `stories` folder in root, then `"rootDirs": ["src", "stories"]` needs to be added to be added to `compilerOptions` so it knows what folders to compile. Make sure `jsx` is set to preserve. Should be unchanged.
-
-## Create a TSX storybook index
-
-The default storybook index file is `stories/index.stories.js` -- you'll want to rename this to `stories/index.stories.tsx`.
-
-## Using TypeScript with the TSDocgen addon
-
-The very handy [Storybook Info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the TypeScript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal:
-
-```js
-import * as React from 'react';
-import TicTacToeCell from './TicTacToeCell';
-
-export default {
-  title: 'Components',
-  parameters: {
-    info: { inline: true },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
   },
 };
-
-export const TicTacToeCell = () => (
-  <TicTacToeCell value="X" position={{ x: 0, y: 0 }} />,
-);
 ```
 
-## Customizing Type annotations/descriptions
-
-Please refer to the [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) docs for writing prop descriptions and other annotations to your Typescript interfaces.
-
-Additional annotation can be achieved by setting a default set of info parameters in `.storybook/preview.js`:
-
-```ts
-import { addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-addDecorator(
-  withInfo({
-    styles: {
-      header: {
-        h1: {
-          marginRight: '20px',
-          fontSize: '25px',
-          display: 'inline',
-        },
-        body: {
-          paddingTop: 0,
-          paddingBottom: 0,
-        },
-        h2: {
-          display: 'inline',
-          color: '#999',
-        },
-      },
-      infoBody: {
-        backgroundColor: '#eee',
-        padding: '0px 5px',
-        lineHeight: '2',
-      },
-    },
-    inline: true,
-    source: false,
-  })
-);
-```
-
-Note: Component docgen information can not be generated for components that are only exported as default. You can work around the issue by exporting the component using a named export.
-
-## Setting up Jest tests
+And here are the meaning of each field:
 
-The ts-jest [README](https://github.com/kulshekhar/ts-jest) explains pretty clearly how to get Jest to recognize TypeScript code.
+| Field                            | Framework | Description                                                                                  | Type                                                                     |
+| -------------------------------- | --------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **check**                        | All       | optionally run `fork-ts-checker-webpack-plugin`                                              | `boolean`                                                                |
+| **checkOptions**                 | All       | Options to pass to `fork-ts-checker-webpack-plugin` if it's enabled                          | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) |
+| **reactDocgen**                  | React     | which variant docgen processor to run                                                        | `'react-docgen-typescript' | 'react-docgen' | false`                     |
+| **reactDocgenTypescriptOptions** | React     | Options to pass to `react-docgen-typescript-loader` if `react-docgen-typescript` is enabled. | [See docs](https://github.com/strothj/react-docgen-typescript-loader)    |
 
-This is an example `jest.config.js` file for jest:
+## Manual configuration
 
-```js
-module.exports = {
-  transform: {
-    '.(ts|tsx)': 'ts-jest',
-  },
-  testPathIgnorePatterns: ['/node_modules/', '/lib/'],
-  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-};
-```
-
-## Building your TypeScript Storybook
-
-You will need to set up some scripts - these may help:
-
-```json
-  "scripts": {
-    "start": "react-scripts-ts start",
-    "build": "npm run lint && npm run build-lib && build-storybook",
-    "build-lib-watch": "tsc -w",
-    "build-lib": "tsc && npm run copy-css-to-lib && npm run copy-svg-to-lib && npm run copy-png-to-lib && npm run copy-woff2-to-lib",
-    "test": "react-scripts-ts test --env=jsdom",
-    "test:coverage": "npm test -- --coverage",
-    "eject": "react-scripts-ts eject",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "copy-css-to-lib": "cpx \"./src/**/*.css\" ./build/lib",
-    "copy-woff2-to-lib": "cpx \"./src/**/*.woff2\" ./build/lib",
-    "copy-svg-to-lib": "cpx \"./src/**/*.svg\" ./build/lib",
-    "copy-png-to-lib": "cpx \"./src/**/*.png\" ./build/lib",
-    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'"
-  },
-```
+Manual configuration support will be added in a later pre-release.
 
-## Related Issues and Helpful Resources
+## More Resources
 
 - [Storybook, React, TypeScript and Jest](https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7)
 - [React, Storybook & TypeScript](http://www.joshschreuder.me/react-storybooks-with-typescript/)
diff --git a/docs/src/pages/examples/_examples.yml b/docs/src/pages/examples/_examples.yml
index ff63b3712ef8..1f0a287cc8a1 100644
--- a/docs/src/pages/examples/_examples.yml
+++ b/docs/src/pages/examples/_examples.yml
@@ -20,7 +20,7 @@ carbon:
   thumbnail: carbon.png
   title: Carbon Components
   description: IBM's Carbon Design System implemented in React.
-  source: https://github.com/carbon-design-system/carbon-components-react
+  source: https://github.com/carbon-design-system/carbon/tree/master/packages/react
   demo: http://react.carbondesignsystem.com
   site: http://carbondesignsystem.com
 lonelyplanet:
@@ -191,3 +191,16 @@ reactPakistan:
   description: A series of reuseable React Commons, UI/UX components, icons, logos and more by React Pakistan.
   demo: https://taimoormk.github.io/react-commons-collection/?path=/docs/react-pakistan-intro--page
   site: https://www.npmjs.com/package/@react-pakistan/react-commons-collection
+bbc:
+  thumbnail: bbc.jpg
+  title: BBC Psammead
+  description: React component library for BBC World Service and more
+  demo: https://bbc.github.io/psammead/
+  source: https://github.com/bbc/psammead
+pxblue:
+  thumbnail: pxblue.png
+  title: Power Xpert Blue
+  description: A design system for Eaton applications, including component libraries for React, Angular, and React Native
+  demo: https://pxblue-components.github.io/
+  source: https://github.com/pxblue/react-component-library/tree/master/demos/storybook
+  site: https://pxblue.github.io
diff --git a/docs/src/pages/examples/index.jsx b/docs/src/pages/examples/index.jsx
index 16e028151648..921d4ff23fc9 100644
--- a/docs/src/pages/examples/index.jsx
+++ b/docs/src/pages/examples/index.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { values } from 'lodash';
 
 import Examples from '../../components/Grid/Examples';
 import examples from './_examples.yml';
 
-const examplesArray = values(examples).map(example => ({
+const examplesArray = Object.values(examples).map((example) => ({
   ...example,
   // eslint-disable-next-line import/no-dynamic-require, global-require
   thumbnailSrc: require(`./thumbnails/${example.thumbnail}`),
diff --git a/docs/src/pages/examples/thumbnails/bbc.jpg b/docs/src/pages/examples/thumbnails/bbc.jpg
new file mode 100644
index 000000000000..49e1a72d0c31
Binary files /dev/null and b/docs/src/pages/examples/thumbnails/bbc.jpg differ
diff --git a/docs/src/pages/examples/thumbnails/pxblue.png b/docs/src/pages/examples/thumbnails/pxblue.png
new file mode 100644
index 000000000000..b539d8de3a17
Binary files /dev/null and b/docs/src/pages/examples/thumbnails/pxblue.png differ
diff --git a/docs/src/pages/formats/component-story-format/index.md b/docs/src/pages/formats/component-story-format/index.md
index 479ef1c7cbde..53954977083d 100644
--- a/docs/src/pages/formats/component-story-format/index.md
+++ b/docs/src/pages/formats/component-story-format/index.md
@@ -5,13 +5,13 @@ title: 'Component Story Format (CSF)'
 
 Storybook's Component Story Format (CSF) is the recommended way to [write stories](../../basics/writing-stories/) since Storybook 5.2. [Read the announcement](https://medium.com/storybookjs/component-story-format-66f4c32366df) to learn more about how it came to be.
 
-In CSF, stories and component metadata are defined as ES6 modules. Every Component story file consists of a required default export and one or more named exports.
+In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required **default export** and one or more **named exports**.
 
 CSF is supported in all frameworks except React Native, where you should use the [storiesOf API](../storiesof-api/) instead.
 
 ## Default export
 
-The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../../basics/writing-stories/#story-hierarchy)), [decorators](../../basics/writing-stories/#decorators), and [parameters](../../basics/writing-stories/#parameters). `title` should be unique, i.e. not re-used across files.
+The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../../basics/writing-stories/#story-hierarchy)), [decorators](../../basics/writing-stories/#decorators), and [parameters](../../basics/writing-stories/#parameters). The `component` field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. `title` should be unique, i.e. not re-used across files.
 
 ```js
 import MyComponent from './MyComponent';
@@ -24,25 +24,86 @@ export default {
 }
 ```
 
-For more examples, see [writing stories](../../basics/writing-stories/)
+For more examples, see [writing stories](../../basics/writing-stories/).
 
-## Story exports
+## Named story exports
 
-By default every named export in the file represents a story function.
+With CSF, every named export in the file represents a story function by default.
 
-Story functions can be annotated with a `story` object to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters), and also to define the `name` of the story.
+```jsx
+import MyComponent from './MyComponent';
+
+export default { ... }
+
+export const Basic = () => <MyComponent />;
+export const WithProp = () => <MyComponent prop="value" />;
+```
+
+The exported identifiers will be converted to "start case" using Lodash's [startCase](https://lodash.com/docs/#startCase) function. For example:
+
+```
+name -> 'Name'
+someName -> 'Some Name'
+someNAME -> 'Some NAME'
+some_custom_NAME -> 'Some Custom NAME'
+someName1234 -> 'Some Name 1234'
+someName1_2_3_4 -> 'Some Name 1 2 3 4'
+```
+
+It's recommended to start export names with a capital letter.
+
+Story functions can be annotated with a few different fields to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters), and also to define the `storyName` of the story.
 
-The `name` is useful if you want to use names with spaces, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead.
+The `storyName` is useful if you want to use names with special characters, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead.
+
+```jsx
+export const Simple = () => <MyComponent />;
+
+Simple.storyName = 'So simple!';
+Simple.decorators = [ ... ];
+Simple.parameters = { ... };
+```
+
+## Args story inputs
+
+Starting in SB 6.0, stories accept named inputs called Args. Args are dynamic data that are provided (and possibly updated by) Storybook and its addons.
+
+Consider Storybook’s ["hello world" example](https://storybook.js.org/docs/basics/writing-stories/#basic-story) of a text button that logs its click events:
 
 ```js
-export const simple = () => <MyComponent prop1={val1} />;
-simple.story = {
-  name: 'default', // can't be used as a named export
-  decorators: [ ... ],
-  parameters: { ... }
+import { action } from '@storybook/addon-actions';
+import { Button } from './Button';
+
+export default { title: 'Button', component: Button };
+export const Text = () => <Button label=’Hello’ onClick={action(‘clicked’)} />;
+```
+
+Now consider the same example, re-written with args:
+
+```js
+export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
+Text.args = {
+  label: 'Hello',
+  onClick: action('clicked'),
 };
 ```
 
+At first blush this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
+
+```js
+export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
+```
+
+Or even more simply:
+
+```js
+export const Text = (args) => <Button {...args} />;
+```
+
+Not only are these versions shorter and easier to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
+
+For more information on setting up [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs) and [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions), see their respective documentation.
+
 ## Storybook Export vs Name Handling
 
 Storybook handles named exports and `story.name` slightly differently. When should you use one vs. the other?
@@ -69,10 +130,12 @@ it('should format CSF exports with sensible defaults', () => {
 });
 ```
 
-Therefore, you should specify `story.name` in the following cases:
+When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the story's ID and URL.
 
-1. Want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g. reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`
-2. Want to preserve the Story ID independently from changing how it's displayed. Having stable Story ID's can be useful for integration with third party tools.
+You should use the `story.name` option in the following cases:
+
+1. You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g. reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`.
+2. You want to preserve the Story ID independently from changing how it's displayed. Having stable Story ID's is useful for integration with third party tools.
 
 ## Non-story exports
 
@@ -82,7 +145,7 @@ To make this possible, you can use optional `includeStories` and `excludeStories
 
 Consider the following story file:
 
-```js
+```jsx
 import React from 'react';
 import MyComponent from './MyComponent';
 import someData from './data.json';
@@ -90,19 +153,21 @@ import someData from './data.json';
 export default {
   title: 'MyComponent',
   component: MyComponent,
-  includeStories: ['simpleStory', 'complexStory']
+  includeStories: ['SimpleStory', 'ComplexStory']
 }
+
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, { bar: 'baz', baz: someData }};
-export const simpleStory = () => <MyComponent data={simpleData} />;
-export const complexStory = () => <MyComponent data={complexData} />;
+
+export const SimpleStory = () => <MyComponent data={simpleData} />;
+export const ComplexStory = () => <MyComponent data={complexData} />;
 ```
 
-When Storybook loads this file, it will see all the exports, but it will ignore the data exports and only treat `simpleStory` and `complexStory` as stories.
+When Storybook loads this file, it will see all the exports, but it will ignore the data exports and only treat `SimpleStory` and `ComplexStory` as stories.
 
 For this specific example the equivalent result can be achieved in a few ways depending on what's convenient:
 
-- `includeStories: ['simpleStory', 'complexStory']`
+- `includeStories: ['SimpleStory', 'ComplexStory']`
 - `includeStories: /.*Story$/`
 - `excludeStories: ['simpleData', 'complexData']`
 - `excludeStories: /.*Data$/`
diff --git a/docs/src/pages/formats/mdx-syntax/index.md b/docs/src/pages/formats/mdx-syntax/index.md
index 056b49997da3..888e9338b03b 100644
--- a/docs/src/pages/formats/mdx-syntax/index.md
+++ b/docs/src/pages/formats/mdx-syntax/index.md
@@ -3,6 +3,198 @@ id: 'mdx-syntax'
 title: 'MDX Syntax'
 ---
 
-[MDX syntax](https://mdxjs.com/) documentation coming soon!
+`MDX` is the syntax [Storybook Docs](https://github.com/storybookjs/storybook/blob/next/addons/docs/) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories. [Read the announcement](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) to learn more about how and why it came to be.
 
-For more information, see the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+- [Basic example](#basic-example)
+- [MDX-Flavored CSF](#mdx-flavored-csf)
+- [Writing stories](#writing-stories)
+- [Embedding stories](#embedding-stories)
+- [Decorators and parameters](#decorators-and-parameters)
+- [Documentation-only MDX](#documentation-only-mdx)
+- [MDX file names](#mdx-file-names)
+- [More resources](#more-resources)
+
+## Basic example
+
+Let's get started with an example that combines markdown with a single story:
+
+```md
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Checkbox } from './Checkbox';
+
+<Meta title="MDX/Checkbox" component={Checkbox} />
+
+# Checkbox
+
+With `MDX` we can define a story for `Checkbox` right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name="all checkboxes">
+    <form>
+      <Checkbox id="Unchecked" label="Unchecked" />
+      <Checkbox id="Checked" label="Checked" checked />
+      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+    </form>
+  </Story>
+</Preview>
+```
+
+And here's how that's rendered in Storybook:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
+</center>
+
+As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
+
+Let's break it down.
+
+## MDX-Flavored CSF
+
+[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as `# heading`) for your documentation, and freely embed JSX component blocks at any point in the file.
+
+MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers.
+
+For example, here's the story from `Checkbox` example above, rewritten in CSF:
+
+```js
+import React from 'react';
+import { Checkbox } from './Checkbox';
+export default { title: "MDX/Checkbox" component: Checkbox };
+export const allCheckboxes = () => (
+  <form>
+    <Checkbox id="Unchecked" label="Unchecked" />
+    <Checkbox id="Checked" label="Checked" checked />
+    <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+  </form>
+);
+```
+
+There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
+
+## Writing stories
+
+Now let's look at a more realistic example to see a few more things we can do:
+
+```md
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+import { Badge } from './Badge';
+import { Icon } from './Icon';
+
+<Meta title="MDX/Badge" component={Badge} />
+
+# Badge
+
+Let's define a story for our `Badge` component:
+
+<Story name="positive">
+  <Badge status="positive">Positive</Badge>
+</Story>
+
+We can drop it in a `Preview` to get a code snippet:
+
+<Preview>
+  <Story name="negative">
+    <Badge status="negative">Negative</Badge>
+  </Story>
+</Preview>
+
+We can even preview multiple stories in a block. This
+gets rendered as a group, but defines individual stories
+with unique URLs and isolated snapshot tests.
+
+<Preview>
+  <Story name="warning">
+    <Badge status="warning">Warning</Badge>
+  </Story>
+  <Story name="neutral">
+    <Badge status="neutral">Neutral</Badge>
+  </Story>
+  <Story name="error">
+    <Badge status="error">Error</Badge>
+  </Story>
+  <Story name="with icon">
+    <Badge status="warning">
+      <Icon icon="check" inline />
+      with icon
+    </Badge>
+  </Story>
+</Preview>
+```
+
+And here's how that gets rendered in Storybook:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-page.png" width="100%" />
+</center>
+
+## Embedding stories
+
+Suppose you have an existing story and want to embed it into your docs. Here's how to show a story with ID `some--id` (check the browser URL in Storybook v5+ to see a story's ID):
+
+```md
+import { Story } from "@storybook/addon-docs/blocks";
+
+# Some header
+
+And markdown here
+
+<Story id="some--id" />
+```
+
+You can also use the rest of the MDX features in conjunction with embedding. That includes source, preview, and prop tables.
+
+## Decorators and parameters
+
+To add [decorators](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#decorators) and [parameters](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#parameters) in MDX:
+
+```md
+<Meta
+  title='MyComponent'
+  decorators={[ ... ]}
+  parameters={{ ... }}
+/>
+
+<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
+...
+</Story>
+```
+
+In addition, global decorators work just like before, e.g. adding the following to your `.storybook/preview.js`:
+
+```js
+import { addDecorator, addParameters } from '@storybook/react';
+
+addDecorator(...);
+addParameters({ ... });
+```
+
+## Documentation-only MDX
+
+Typically, when you use Storybook MDX, you define stories in the MDX documentation is automatically associated with those stories. But what if you want to write Markdown-style documentation and have it show up in your Storybook?
+
+If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation.
+
+If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs).
+
+To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-documentation-only.png" width="100%" />
+</center>
+
+## MDX file names
+
+Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
+
+Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation).
+
+## More resources
+
+For more information:
+
+- [Component Story Format (CSF)](../component-story-format/)
+- [Storybook Docs](https://github.com/storybookjs/storybook/blob/next/addons/docs/)
+- [Rich docs with Storybook MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc)
diff --git a/docs/src/pages/formats/storiesof-api/index.md b/docs/src/pages/formats/storiesof-api/index.md
index 1aad7d55e6a3..b1480c2b74bb 100644
--- a/docs/src/pages/formats/storiesof-api/index.md
+++ b/docs/src/pages/formats/storiesof-api/index.md
@@ -40,7 +40,7 @@ Each `.add` call takes a story name, a story function that returns a renderable
 
 [Decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters) can be specified globally, at the component level, or locally at the story level.
 
-Global decorators are parameters are specified in the Storybook config:
+Global decorators and parameters are specified in the Storybook config:
 
 ```js
 addDecorator(storyFn => <blink>{storyFn()}</blink>);
@@ -71,7 +71,7 @@ And finally, story-level decorators are provided via parameters:
 storiesOf('Button', module).add(
   'with text',
   () => <Button onClick={action('clicked')}>Hello Button</Button>,
-  { decorators: withA11y }
+  { decorators: [withKnobs] }
 );
 ```
 
diff --git a/docs/src/pages/guides/guide-angular/index.md b/docs/src/pages/guides/guide-angular/index.md
index 9cd931db07a3..b008f65556ab 100644
--- a/docs/src/pages/guides/guide-angular/index.md
+++ b/docs/src/pages/guides/guide-angular/index.md
@@ -31,17 +31,18 @@ npm install @storybook/angular --save-dev
 Make sure that you have `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
 
 ```sh
-npm install babel-loader @babel/core --save-dev 
+npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -53,12 +54,12 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
-That will load all the stories underneath your `../src` directory that match the pattern `*.stories.[tj]sx?`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
 
 ## Step 4: Storybook TypeScript configuration
 
diff --git a/docs/src/pages/guides/guide-ember/index.md b/docs/src/pages/guides/guide-ember/index.md
index 20454b21081d..456c6a277701 100644
--- a/docs/src/pages/guides/guide-ember/index.md
+++ b/docs/src/pages/guides/guide-ember/index.md
@@ -35,15 +35,15 @@ If you don't have `package.json` in your project, you'll need to init it first:
 npm init
 ```
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following npm scripts to your `package.json` in order to start the storybook later in this guide:
 
 > In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands. Running `ember serve` before storybook will enable live reloading.
 
 ```json
 {
   "scripts": {
-    "build-storybook": "ember build && build-storybook -p 9001 -s dist",
-    "storybook": "ember serve & start-storybook -p 9001 -s dist"
+    "storybook": "ember serve & start-storybook -p 9001 -s dist",
+    "build-storybook": "ember build && build-storybook -s dist"
   }
 }
 ```
@@ -59,12 +59,12 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../app/**/*.stories.@(ts|js)'],
 };
 ```
 
-That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
+That will load all the stories underneath your `../app` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
 
 ## Write your stories
 
@@ -73,7 +73,7 @@ Now you can write some stories inside the `../stories/index.stories.js` file, li
 > It is important that you import the `hbs` function that is provided by a babel plugin in `@storybook/ember`
 
 ```js
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default { title: 'Demo' };
 
diff --git a/docs/src/pages/guides/guide-html/index.md b/docs/src/pages/guides/guide-html/index.md
index 93ce7163a749..8658356282ad 100644
--- a/docs/src/pages/guides/guide-html/index.md
+++ b/docs/src/pages/guides/guide-html/index.md
@@ -39,17 +39,18 @@ npm install @storybook/html --save-dev
 Make sure that you have `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
 
 ```sh
-npm install babel-loader @babel/core --save-dev 
+npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -61,12 +62,12 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
-That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
 
 ## Step 4: Write your stories
 
diff --git a/docs/src/pages/guides/guide-marko/index.md b/docs/src/pages/guides/guide-marko/index.md
index 1cef3e554b08..5d0fcd92ec9b 100644
--- a/docs/src/pages/guides/guide-marko/index.md
+++ b/docs/src/pages/guides/guide-marko/index.md
@@ -31,17 +31,18 @@ npm install @storybook/marko --save-dev
 Make sure that you have `marko`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
 
 ```sh
-npm install babel-loader @babel/core --save-dev 
+npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -53,8 +54,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-mithril/index.md b/docs/src/pages/guides/guide-mithril/index.md
index a3e678b4aa9b..4ae2ce77d0b7 100644
--- a/docs/src/pages/guides/guide-mithril/index.md
+++ b/docs/src/pages/guides/guide-mithril/index.md
@@ -32,17 +32,18 @@ Make sure that you have `mithril`, `@babel/core`, and `babel-loader` in your dep
 
 ```sh
 npm install mithril --save
-npm install babel-loader @babel/core --save-dev 
+npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -54,8 +55,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-preact/index.md b/docs/src/pages/guides/guide-preact/index.md
index ad59164a42fe..4a920a01e5fe 100644
--- a/docs/src/pages/guides/guide-preact/index.md
+++ b/docs/src/pages/guides/guide-preact/index.md
@@ -32,17 +32,18 @@ Make sure that you have `preact`, `@babel/core`, and `babel-loader` in your depe
 
 ```sh
 npm install preact --save
-npm install babel-loader @babel/core --save-dev 
+npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -54,8 +55,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-rax/index.md b/docs/src/pages/guides/guide-rax/index.md
index 0d9d748db097..fce19b9c8267 100644
--- a/docs/src/pages/guides/guide-rax/index.md
+++ b/docs/src/pages/guides/guide-rax/index.md
@@ -35,14 +35,15 @@ npm install rax --save
 npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -54,8 +55,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-react-native/index.md b/docs/src/pages/guides/guide-react-native/index.md
index 6fd2baf3c1a1..8491694b1230 100644
--- a/docs/src/pages/guides/guide-react-native/index.md
+++ b/docs/src/pages/guides/guide-react-native/index.md
@@ -63,7 +63,7 @@ Create a file called `rn-addons.js` that you can use to include on device addons
 
 `storybook/rn-addons.js`
 
-```
+```js
 import '@storybook/addon-ondevice-knobs/register';
 import '@storybook/addon-ondevice-notes/register';
 ...
diff --git a/docs/src/pages/guides/guide-react/index.md b/docs/src/pages/guides/guide-react/index.md
index cf8d8185a661..abb6fce106df 100644
--- a/docs/src/pages/guides/guide-react/index.md
+++ b/docs/src/pages/guides/guide-react/index.md
@@ -5,6 +5,12 @@ title: 'Storybook for React'
 
 ## Automatic setup
 
+Before trying the below commands, you should try the following command. In most cases, Storybook will detect that you're using `react` or `react-scripts`, and install the appropriate packages.
+
+```sh
+npx -p @storybook/cli sb init
+```
+
 You may have tried to use our quick start guide to setup your project for Storybook.
 If it failed because it couldn't detect you're using React, you could try forcing it to use React:
 
@@ -12,14 +18,14 @@ If it failed because it couldn't detect you're using React, you could try forcin
 npx -p @storybook/cli sb init --type react
 ```
 
-Note: be sure you have a `package.json` in your project or the above command will fail.
-
-If you're using [Create React App](https://create-react-app.dev/), use:
+If you're using [Create React App](https://create-react-app.dev/) (or a fork of `react-scripts`), you should use this command instead:
 
 ```sh
 npx -p @storybook/cli sb init --type react_scripts
 ```
 
+Note: You must have a `package.json` in your project or the above commands will fail.
+
 ## Manual setup
 
 If you want to set up Storybook manually for your React project, this is the guide for you.
@@ -47,14 +53,15 @@ npm install react react-dom --save
 npm install babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add an npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -67,7 +74,7 @@ To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
 module.exports = {
-  stories: ['../src/**/*.stories.[tj]s'],
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-riot/index.md b/docs/src/pages/guides/guide-riot/index.md
index 8a12f01d364a..400d72c43524 100644
--- a/docs/src/pages/guides/guide-riot/index.md
+++ b/docs/src/pages/guides/guide-riot/index.md
@@ -6,7 +6,7 @@ title: 'Storybook for Riot'
 ## Automatic setup
 
 You may have tried to use our quick start guide to setup your project for Storybook.
-If it failed because it couldn't detect you're using riot, you could try forcing it to use riot:
+If it failed because it couldn't detect you're using Riot, you could try forcing it to use riot:
 
 ```sh
 npx -p @storybook/cli sb init --type riot
@@ -14,7 +14,7 @@ npx -p @storybook/cli sb init --type riot
 
 ## Manual setup
 
-If you want to set up Storybook manually for your Angular project, this is the guide for you.
+If you want to set up Storybook manually for your Riot project, this is the guide for you.
 
 ## Step 1: Add dependencies
 
@@ -34,14 +34,15 @@ Make sure that you have `riot`, `@babel/core`, and `babel-loader` in your depend
 npm install riot babel-loader @babel/core --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -53,8 +54,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-svelte/index.md b/docs/src/pages/guides/guide-svelte/index.md
index 66d612774739..010c2e66ea8c 100644
--- a/docs/src/pages/guides/guide-svelte/index.md
+++ b/docs/src/pages/guides/guide-svelte/index.md
@@ -45,14 +45,15 @@ You'll also need to install `svelte-loader` if you haven't already.
 npm install svelte-loader --save-dev
 ```
 
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -64,8 +65,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
@@ -104,7 +105,7 @@ So you can create a story "view" file, which is essentially a .svelte file to lo
 <!-- MyButtonView  -->
 <MyButton {rounded} on:click>
   {buttonText}
-</Button>
+</MyButton>
 ```
 
 In this example, the `on:click` that is heard on the `MyButton` component is passed up to the containing component `MyButtonView` using the svelte shorthand.
diff --git a/docs/src/pages/guides/guide-vue/index.md b/docs/src/pages/guides/guide-vue/index.md
index a50d20ea87bd..2b48dac85329 100644
--- a/docs/src/pages/guides/guide-vue/index.md
+++ b/docs/src/pages/guides/guide-vue/index.md
@@ -3,6 +3,31 @@ id: 'guide-vue'
 title: 'Storybook for Vue'
 ---
 
+---
+**NOTE**
+
+[Vue.js devtools] [browser extension support is in the works] but not yet available!
+<details markdown>
+<summary>See workarounds…</summary>
+
+- In Firefox:
+  1. Open the story you wish to inspect.
+  2. Right-click anywhere in the story and select This Frame → Open Frame in New Tab. devtools should now work correctly in the new tab.
+
+- In Chromium / Chrome:
+  1. Open the story you wish to inspect.
+  2. Right-click anywhere in the story and select View frame source which will open in a new tab. E.g., `view-source:http://localhost:6006/iframe.html?id=components-fancybutton--button&viewMode=story`.
+  3. Remove the `view-source:` scheme from the URL in the address bar to load just the frame. devtools should now work correctly.
+
+- Launch the standalone Vue.js devtools app via `npx -p @vue/devtools vue-devtools` and add (or create) `<script src="//localhost:8098"></script>` to `.storybook/preview-head.html`. Now run Storybook and devtools should connect.
+
+</details>
+
+[Vue.js devtools]: https://github.com/vuejs/vue-devtools
+[browser extension support is in the works]: https://github.com/storybookjs/storybook/issues/1708
+
+---
+
 ## Automatic setup
 
 You may have tried to use our quick start guide to setup your project for Storybook.
@@ -28,21 +53,22 @@ npm install @storybook/vue --save-dev
 
 ### Add peer dependencies
 
-Make sure that you have `vue`, `vue-loader`, `vue-template-compiler`, `@babel/core`, `babel-loader` and `babel-preset-vue` in your dependencies as well, because we list these as a peer dependencies:
+Make sure that you have `vue`, `vue-loader`, `vue-template-compiler`, `@babel/core`, and `babel-loader` in your dependencies as well, because we list these as a peer dependencies:
 
 ```sh
 npm install vue --save
-npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev
+npm install vue-loader vue-template-compiler @babel/core babel-loader --save-dev
 ```
 
-## Step 2: Add an npm script
+## Step 2: Add npm scripts
 
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
   "scripts": {
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
   }
 }
 ```
@@ -54,8 +80,8 @@ For a basic Storybook configuration, the only thing you need to do is tell Story
 To do that, create a file at `.storybook/main.js` with the following content:
 
 ```js
-module.exports {
-  stories: ['../src/**/*.stories.[tj]s'],
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
 };
 ```
 
diff --git a/docs/src/pages/guides/guide-web-components/index.md b/docs/src/pages/guides/guide-web-components/index.md
new file mode 100644
index 000000000000..3ac18e343ca1
--- /dev/null
+++ b/docs/src/pages/guides/guide-web-components/index.md
@@ -0,0 +1,111 @@
+---
+id: 'guide-web-components'
+title: 'Storybook for Web Components'
+---
+
+## Automatic setup
+
+You may have tried to use our quick start guide to setup your project for Storybook.
+If it failed because it couldn't detect you're using web components, you could try forcing it to use web_components:
+
+```sh
+npx -p @storybook/cli sb init --type web_components
+```
+
+## Manual setup
+
+If you want to set up Storybook manually for your web components project, this is the guide for you.
+
+## Step 1: Add dependencies
+
+### Init npm if necessary
+
+If you don't have `package.json` in your project, you'll need to init it first:
+
+```sh
+npm init
+```
+
+### Add @storybook/web-components
+
+Add `@storybook/web-components` to your project. To do that, run:
+
+```sh
+npm install @storybook/web-components --save-dev
+```
+
+### Add lit-html, @babel/core and babel-loader
+
+Make sure that you have `lit-html`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
+
+```sh
+npm install lit-html babel-loader @babel/core --save-dev
+```
+
+## Step 2: Add npm scripts
+
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
+
+```json
+{
+  "scripts": {
+    "storybook": "start-storybook",
+  }
+}
+```
+
+## Step 3: Create the main file
+
+For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.
+
+To do that, create a file at `.storybook/main.js` with the following content:
+
+```js
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js)'],
+};
+```
+
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
+
+## Step 4: Write your stories
+
+Now create a `../src/index.stories.js` file, and write your first story like this:
+
+```js
+import { html } from 'lit-html';
+
+export default { title: 'Button' };
+
+export const WithText = () => html`
+  <button @click=${() => console.log('clicked')}>
+    Hello Button
+  </button>
+`;
+
+export const WithEmoji = () => html`
+  <button>
+    😀 😎 👍 💯
+  </button>
+`;
+```
+
+Each story is a single state of your component. In the above case, there are two stories for the demo button component:
+
+```plaintext
+Button
+  ├── With Text
+  └── With Emoji
+```
+
+## Finally: Run your Storybook
+
+Now everything is ready. Run your storybook with:
+
+```sh
+npm run storybook
+```
+
+Storybook should start, on a random open port in dev-mode.
+
+Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack's hot module reloading.
diff --git a/docs/src/pages/guides/quick-start-guide/index.md b/docs/src/pages/guides/quick-start-guide/index.md
index 535d31fd7481..0faa60062048 100644
--- a/docs/src/pages/guides/quick-start-guide/index.md
+++ b/docs/src/pages/guides/quick-start-guide/index.md
@@ -13,7 +13,7 @@ cd my-project-directory
 npx -p @storybook/cli sb init
 ```
 
-The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type:
+The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type is set:
 
 ```sh
 npx -p @storybook/cli sb init --type html
@@ -52,5 +52,6 @@ To learn more about what the Storybook CLI command `sb init` command does, have
 - [Ember](/guides/guide-ember/)
 - [Riot](/guides/guide-riot/)
 - [Preact](/guides/guide-preact/)
+- [Web Components](/guides/guide-web-components/)
 
 A step-by-step tutorial is available at [Learn Storybook](https://www.learnstorybook.com).
diff --git a/docs/src/pages/index.jsx b/docs/src/pages/index.jsx
index a7b097ddcbf0..c8af3a7a45bd 100644
--- a/docs/src/pages/index.jsx
+++ b/docs/src/pages/index.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { values } from 'lodash';
 import Homepage from '../components/Homepage';
 import users from './_users.yml';
 
-const usersArray = values(users).map(user => ({
+const usersArray = Object.values(users).map((user) => ({
   ...user,
   // eslint-disable-next-line import/no-dynamic-require, global-require
   logoSrc: require(`./logos/${user.logo}`),
diff --git a/docs/src/pages/presets/introduction/index.md b/docs/src/pages/presets/introduction/index.md
index d7494be1ffea..46b9c8358e7e 100644
--- a/docs/src/pages/presets/introduction/index.md
+++ b/docs/src/pages/presets/introduction/index.md
@@ -3,50 +3,56 @@ id: 'introduction'
 title: 'Intro to Presets'
 ---
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases.
 
 For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can use the `@storybook/preset-typescript` package, which does the heavy lifting for you.
 
 ## Basic usage
 
-Each preset has its own installation instructions, but the idea of presets is to install the preset and then load it.
+Each preset has its own installation instructions, but the idea of presets is to install an addon and then load its preset.
 
-For example, to get typescript support, first install the preset:
+For example, to get typescript support, first install the addon:
 
 ```sh
 yarn add @storybook/preset-typescript --dev
 ```
 
-Then load it in the file `presets.js` in your storybook folder (`.storybook` by default):
+Then load it in the file `main.js` in your storybook folder (`.storybook` by default):
 
 ```js
-module.exports = ['@storybook/preset-typescript'];
+module.exports = {
+  addons: ['@storybook/preset-typescript'],
+};
 ```
 
 That's it. When Storybook starts up, it will configure itself for typescript without any further configuration. For more information, see the Typescript preset [README](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript).
 
 ## Preset configuration
 
-Presets can also take optional parameters. Sometimes these used by the preset itself, and another common case is to pass them through to configure webpack loaders that are used by the presets.
+Presets can also take optional parameters. These can be used by the preset itself or passed through to configure the webpack loaders that are used by the preset.
 
 Consider this example:
 
 ```js
 const path = require('path');
-module.exports = [
-  {
-    name: '@storybook/preset-typescript',
-    options: {
-      tsDocgenLoaderOptions: {
-        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/preset-typescript',
+      options: {
+        tsLoaderOptions: {
+          configFile: path.resolve(__dirname, '../tsconfig.json'),
+        },
+        include: [path.resolve(__dirname)],
       },
-      include: [path.resolve(__dirname)],
     },
-  },
-];
+  ],
+};
 ```
 
-This configures the typescript docgen loader using the app's `tsconfig.json` and also tells the typescript loaders to only be applied to the current directory.
+This configures the typescript loader using the app's `tsconfig.json` and also tells the typescript loader to only be applied to the current directory.
 
 Each preset has its own option and those options should be documented in the preset's README.
 
diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md
index 16422a4089b1..ffe9d103e2ff 100644
--- a/docs/src/pages/presets/writing-presets/index.md
+++ b/docs/src/pages/presets/writing-presets/index.md
@@ -3,6 +3,8 @@ id: 'writing-presets'
 title: 'Writing Presets'
 ---
 
+> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
+
 [Storybook presets](../introduction/) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support.
 
 This doc covers the [presets API](#presets-api) and how to use the presets mechanism for [advanced configuration](#advanced-configuration).
@@ -40,13 +42,13 @@ The babel functions `babel`, `babelDefault`, and `managerBabel` all configure ba
 
 All functions take a [Babel configuration object](https://babeljs.io/docs/en/configuration) as their argument and can modify it or return a new object.
 
-For example, Storybook's Vue support uses presets internally and here's how it configures babel:
+For example, Storybook's Mihtril support uses plugins internally and here's how it configures babel:
 
 ```js
-export function babelDefault(config) {
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
-    presets: [...config.presets, require.resolve('babel-preset-vue')],
+    plugins: [...config.plugins, require.resolve('@babel/plugin-transform-react-jsx')],
   };
 }
 ```
@@ -79,14 +81,14 @@ export function webpackFinal(config, { configDir }) {
 - `webpackFinal` is applied to the preview config after all user presets have been applied
 - `webpackManager` is applied to the manager config
 
-### Addons
+### Manager entries
 
-The addon config `addons` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to install the preset, and it will take care of everything.
+The addon config `managerEntries` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to install the preset, and it will take care of everything.
 
 For example, the Storysource preset contains the following code:
 
 ```js
-export function addons(entry = []) {
+export function managerEntries(entry = []) {
   return [...entry, require.resolve('@storybook/addon-storysource/register')];
 }
 ```
@@ -95,8 +97,35 @@ This is equivalent to [registering the addon manually](../../addons/using-addons
 
 ```js
 module.exports = {
-  addons: ['@storybook/addon-storysource/register']
-}
+  managerEntries: ['@storybook/addon-storysource/register'],
+};
+```
+
+### Addons
+
+For users, the name `managerEntries` might be a bit too technical, so instead both users and preset-authors can simply use the property: `addons`:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-storysource'],
+};
+```
+
+The array of values can support both references to other presets and addons that should be included into the manager.
+
+Storybook will automatically detect whether a reference to an addon is a preset or a manager entry by checking if the package contains a `./preset.js` or `./register.js` (manager entry), falling back to preset if it is unsure.
+
+If this heuristic is incorrect for an addon you are using, you can explicitly opt in to an entry being an a manager entry using the `managerEntries` key.
+
+Here's what it looks when combining presets and managerEntries in the addons property:
+
+```js
+module.exports = {
+  addons: [
+    '@storybook/addon-storysource/register', // a managerEntry
+    '@storybook/addon-docs/preset', // a preset
+  ],
+};
 ```
 
 ### Entries
@@ -105,11 +134,11 @@ Entries are the place to register entry points for the preview. For example it c
 
 ## Advanced Configuration
 
-The presets API is also more powerful than the [standard configuration options](../custom-webpack-config/) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
+The presets API is also more powerful than the [standard configuration options](../configurations/custom-webpack-config/) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
 
-For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../custom-webpack-config/) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
+For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../configurations/custom-webpack-config/) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
 
-If it doesn't exists yet, create a file `.storybook/main.js`:
+If it doesn't exist yet, create a file `.storybook/main.js`:
 
 ```js
 module.exports = {
@@ -121,14 +150,14 @@ module.exports = {
     // update config here
     return config;
   },
-  webpack: async (config, options) => {
+  webpackFinal: async (config, options) => {
+    // change webpack config
     return config;
   },
   babel: async (config, options) => {
     return config;
   },
-  addons: [],
-}
+};
 ```
 
 ## Sharing advanced configuration
@@ -139,7 +168,7 @@ Change your `main.js` file to:
 const path = require('path');
 
 module.exports = {
-  presets: [path.resolve('./.storybook/my-preset')],
+  addons: [path.resolve('./.storybook/my-preset')],
 };
 ```
 
@@ -155,14 +184,13 @@ module.exports = {
     // update config here
     return config;
   },
-  webpack: async (config, options) => {
+  webpackFinal: async (config, options) => {
     return config;
   },
   babel: async (config, options) => {
     return config;
   },
-  addons: [],
-}
+};
 ```
 
-Place your `my-preset.js` file where ever you want, if you want to share if far and wide you'll want to make it it's own package. 
+Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package.
diff --git a/docs/src/pages/testing/automated-visual-testing/index.md b/docs/src/pages/testing/automated-visual-testing/index.md
index 8109db1d0a69..5b3a560572f7 100644
--- a/docs/src/pages/testing/automated-visual-testing/index.md
+++ b/docs/src/pages/testing/automated-visual-testing/index.md
@@ -40,6 +40,7 @@ Here are some in alphabetical order:
 
 - [Applitools](https://applitools.com/storybook)
 - [Chromatic](https://www.chromaticqa.com) made by Storybook maintainers
+- [Creevey](https://github.com/wKich/creevey)
 - [Happo](https://happo.io)
 - [Loki](https://loki.js.org/)
 - [Percy](https://docs.percy.io/docs/storybook-for-react)
diff --git a/docs/src/pages/testing/structural-testing/index.md b/docs/src/pages/testing/structural-testing/index.md
index 3c50fb877fe8..e86a45ecb2f6 100644
--- a/docs/src/pages/testing/structural-testing/index.md
+++ b/docs/src/pages/testing/structural-testing/index.md
@@ -27,10 +27,13 @@ If things are not the same, we can do two things:
 [StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots) is our integration between Storybook and Jest Snapshot Testing.
 
 To use StoryShots, first make sure you are inside a Storybook-enabled repo (make sure it has few stories).
-Then, install StoryShots into your app with:
+
+Then, install StoryShots and any necessary [framework-specific peer dependencies](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md).
+
+For instance if you're testing a react project:
 
 ```sh
-npm i -D @storybook/addon-storyshots
+npm i -D @storybook/addon-storyshots react-test-renderer
 ```
 
 Then, assuming you are using Jest for testing, you can create a test file `storyshots.test.js` that contains the following:
diff --git a/docs/src/stories/implementations.js b/docs/src/stories/implementations.js
index 3a614fb02a9b..05f373d506b2 100644
--- a/docs/src/stories/implementations.js
+++ b/docs/src/stories/implementations.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { values } from 'lodash';
 
 import Homepage from '../components/Homepage';
 import Header from '../components/Header';
@@ -24,7 +23,7 @@ import exampleData from './_examples.yml';
 
 export default {
   'Homepage.page': (
-    <Homepage featuredStorybooks={docsData.featuredStorybooks} users={values(users)} />
+    <Homepage featuredStorybooks={docsData.featuredStorybooks} users={Object.values(users)} />
   ),
   'Homepage.header': <Header />,
   'Homepage.heading': <Heading />,
@@ -32,7 +31,7 @@ export default {
   'Homepage.built-for': <Platforms />,
   'Homepage.main-links': <MainLinks />,
   'Homepage.featured-storybooks': <Featured featuredStorybooks={docsData.featuredStorybooks} />,
-  'Homepage.used-by': <UsedBy users={values(users)} />,
+  'Homepage.used-by': <UsedBy users={Object.values(users)} />,
   'Homepage.footer': <Footer />,
   'Docs.page': (
     <Docs
@@ -60,7 +59,7 @@ export default {
       selectedItem={docsData.selectedItem.id}
     />
   ),
-  'Grid.grid-item': <GridItem {...values(exampleData)[0]} />,
-  'Grid.grid': <Grid items={values(exampleData)} columnWidth={300} />,
-  'Grid.examples': <Examples items={values(exampleData)} />,
+  'Grid.grid-item': <GridItem {...Object.values(exampleData)[0]} />,
+  'Grid.grid': <Grid items={Object.values(exampleData)} columnWidth={300} />,
+  'Grid.examples': <Examples items={Object.values(exampleData)} />,
 };
diff --git a/docs/src/stories/index.js b/docs/src/stories/index.js
index 66d0b46edde4..c11233333b8d 100644
--- a/docs/src/stories/index.js
+++ b/docs/src/stories/index.js
@@ -3,7 +3,7 @@ import implementations from './implementations';
 
 const storyGroups = {};
 
-Object.keys(implementations).forEach(key => {
+Object.keys(implementations).forEach((key) => {
   const [groupName, itemName] = key.split('.');
   const implementation = implementations[key];
 
diff --git a/docs/src/templates/_docstemplate.jsx b/docs/src/templates/_docstemplate.jsx
index 003f1fb43cdc..8613044f7c8f 100644
--- a/docs/src/templates/_docstemplate.jsx
+++ b/docs/src/templates/_docstemplate.jsx
@@ -13,17 +13,17 @@ const categories = [
 ];
 
 const getSections = (sections, edges) =>
-  Object.keys(sections).map(key => ({
+  Object.keys(sections).map((key) => ({
     id: key,
     heading: capitalize(key),
-    items: sections[key].map(path => {
+    items: sections[key].map((path) => {
       const page = edges.find(({ node }) => node.fields.slug === path);
       return page.node.frontmatter;
     }),
   }));
 
 const getSelectedSection = (sections, path) =>
-  Object.keys(sections).find(key => sections[key].indexOf(path) >= 0);
+  Object.keys(sections).find((key) => sections[key].indexOf(path) >= 0);
 
 const DocsContainer = ({ data }) => {
   const { site, markdownRemark, allMarkdownRemark } = data;
diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json
index e81ba33cc81f..3bbd2c132e25 100644
--- a/docs/src/versions/latest.json
+++ b/docs/src/versions/latest.json
@@ -1 +1 @@
-{"version":"5.2.0-alpha.23","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier."}}
\ No newline at end of file
+{"version":"5.3.13","info":{"plain":"### Bug Fixes\n\n* React: Remove `MiniCssExtractPlugin` for CRA ([#9759](https://github.com/storybookjs/storybook/pull/9759))\n\n### Maintenance\n\n* Build: Fix DLL generation race condition ([#9770](https://github.com/storybookjs/storybook/pull/9770))"}}
\ No newline at end of file
diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json
index 314e04604d70..b9bf5215c4b2 100644
--- a/docs/src/versions/next.json
+++ b/docs/src/versions/next.json
@@ -1 +1 @@
-{"version":"5.3.0-rc.0","info":{"plain":"### Features\n\n* CSF: Use `__orderedExports` in loader if provided  ([#9181](https://github.com/storybookjs/storybook/pull/9181))\n\n### Bug Fixes\n\n* Addon-a11y: Fix selected blindness color filter ([#9179](https://github.com/storybookjs/storybook/pull/9179))\n\n### Maintenance\n\n* Addon-essentials: Remove actions, links, knobs ([#9184](https://github.com/storybookjs/storybook/pull/9184))"}}
\ No newline at end of file
+{"version":"6.0.0-beta.21","info":{"plain":"### Breaking Changes\n\n- Preact: Update Preact version ([#10978](https://github.com/storybookjs/storybook/pull/10978))\n\n### Features\n\n- Addon-docs: Angular ArgTypes for pipes, injectables, classes ([#11016](https://github.com/storybookjs/storybook/pull/11016))\n- TypeScript: Add warning for setup issues and fix Babel config ([#10998](https://github.com/storybookjs/storybook/pull/10998))\n- Core: Add logLevel preset property to filter logging ([#10370](https://github.com/storybookjs/storybook/pull/10370))\n\n### Bug Fixes\n\n- Addon-controls: Fix initialization logic; remove react-select ([#11024](https://github.com/storybookjs/storybook/pull/11024))\n- CLI: Fix `sb init` in Yarn workspace environment ([#10985](https://github.com/storybookjs/storybook/pull/10985))\n\n### Maintenance\n\n- React: Remove argsStory helper function ([#11036](https://github.com/storybookjs/storybook/pull/11036))\n- Addon-controls: Remove residual options-type controls ([#11015](https://github.com/storybookjs/storybook/pull/11015))"}}
\ No newline at end of file
diff --git a/docs/static/img/addon-backgrounds.gif b/docs/static/img/addon-backgrounds.gif
index 02f42cc5c0b9..14b5b2e5e47a 100644
Binary files a/docs/static/img/addon-backgrounds.gif and b/docs/static/img/addon-backgrounds.gif differ
diff --git a/examples-native/crna-kitchen-sink/.babelrc.js b/examples-native/crna-kitchen-sink/.babelrc.js
deleted file mode 100644
index 03439a5b821d..000000000000
--- a/examples-native/crna-kitchen-sink/.babelrc.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
-  env: {
-    development: {
-      presets: ['babel-preset-expo'],
-      plugins: ['@babel/plugin-transform-react-jsx-source'],
-    },
-    production: {
-      presets: ['babel-preset-expo'],
-      plugins: [],
-    },
-    storybook: {
-      presets: [],
-      plugins: [],
-    },
-  },
-};
diff --git a/examples-native/crna-kitchen-sink/.env b/examples-native/crna-kitchen-sink/.env
deleted file mode 100644
index d24e628d2810..000000000000
--- a/examples-native/crna-kitchen-sink/.env
+++ /dev/null
@@ -1 +0,0 @@
-STORYBOOK_EXAMPLE_APP=true
diff --git a/examples-native/crna-kitchen-sink/.flowconfig b/examples-native/crna-kitchen-sink/.flowconfig
deleted file mode 100644
index bfe0bb12ccc0..000000000000
--- a/examples-native/crna-kitchen-sink/.flowconfig
+++ /dev/null
@@ -1,63 +0,0 @@
-[ignore]
-; We fork some components by platform
-.*/*[.]android.js
-
-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
-
-; Additional create-react-native-app ignores
-
-; Ignore duplicate module providers
-.*/node_modules/fbemitter/lib/*
-
-; Ignore misbehaving dev-dependencies
-.*/node_modules/xdl/build/*
-.*/node_modules/reqwest/tests/*
-
-; Ignore missing expo-sdk dependencies (temporarily)
-; https://github.com/expo/expo/issues/162
-.*/node_modules/expo/src/*
-
-; Ignore react-native-fbads dependency of the expo sdk
-.*/node_modules/react-native-fbads/*
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow
-flow/
-
-[options]
-module.system=haste
-
-emoji=true
-
-experimental.strict_type_args=true
-
-munge_underscores=true
-
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-unsafe.enable_getters_and_setters=true
-
-[version]
-^0.47.0
diff --git a/examples-native/crna-kitchen-sink/.gitignore b/examples-native/crna-kitchen-sink/.gitignore
deleted file mode 100644
index 1025e17bd3c6..000000000000
--- a/examples-native/crna-kitchen-sink/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-node_modules/
-.expo/
-npm-debug.*
diff --git a/examples-native/crna-kitchen-sink/.watchmanconfig b/examples-native/crna-kitchen-sink/.watchmanconfig
deleted file mode 100644
index 0967ef424bce..000000000000
--- a/examples-native/crna-kitchen-sink/.watchmanconfig
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/examples-native/crna-kitchen-sink/App.js b/examples-native/crna-kitchen-sink/App.js
deleted file mode 100644
index 51a052035833..000000000000
--- a/examples-native/crna-kitchen-sink/App.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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!)
-// so for now we replace the code outright. Keeping this here for clarity.
-//
-// import React from 'react';
-// import { StyleSheet, Text, View } from 'react-native';
-//
-// export default class App extends React.Component {
-//   render() {
-//     return (
-//       <View style={styles.container}>
-//         <Text>Open up App.js to start working on your app!</Text>
-//         <Text>Changes you make will automatically reload.</Text>
-//         <Text>Shake your phone to open the developer menu.</Text>
-//       </View>
-//     );
-//   }
-// }
-//
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     backgroundColor: '#fff',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//   },
-// });
diff --git a/examples-native/crna-kitchen-sink/App.test.js b/examples-native/crna-kitchen-sink/App.test.js
deleted file mode 100644
index 0b2ae61c645f..000000000000
--- a/examples-native/crna-kitchen-sink/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import renderer from 'react-test-renderer';
-
-import React from 'react';
-import App from './App';
-
-it('renders without crashing', () => {
-  const rendered = renderer.create(<App />).toJSON();
-  expect(rendered).toBeTruthy();
-});
diff --git a/examples-native/crna-kitchen-sink/README.md b/examples-native/crna-kitchen-sink/README.md
deleted file mode 100644
index 7bb23d56d896..000000000000
--- a/examples-native/crna-kitchen-sink/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# CRNA Kitchen Sink
-
-This project was bootstrapped wit [Expo](https://github.com/expo/expo-cli) and storybook using [storybook CLI](https://www.npmjs.com/package/@storybook/cli).
-
-## Getting started
-
-1. Install dependencies: `yarn install` at the root
-2. Run the storybook server: `yarn storybook`
-3. Run the app: `yarn start`
diff --git a/examples-native/crna-kitchen-sink/app.json b/examples-native/crna-kitchen-sink/app.json
deleted file mode 100644
index 16b4ec7db1bd..000000000000
--- a/examples-native/crna-kitchen-sink/app.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "expo": {
-    "sdkVersion": "33.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "androidStatusBarColor": "#C2185B",
-    "androidStatusBar": {
-      "barStyle": "light-content",
-      "backgroundColor": "#C2185B"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "packagerOpts": {
-      "config": "metro.config.js"
-    },
-    "name": "crna-kitchen-sink",
-    "slug": "crna-kitchen-sink",
-    "githubUrl": "https://github.com/storybookjs/storybook/"
-  }
-}
\ No newline at end of file
diff --git a/examples-native/crna-kitchen-sink/metro.config.js b/examples-native/crna-kitchen-sink/metro.config.js
deleted file mode 100644
index 1badc02560ca..000000000000
--- a/examples-native/crna-kitchen-sink/metro.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
-
-module.exports = {
-  watchFolders: [
-    // The monorepo
-    path.resolve(__dirname, '../..'),
-  ],
-  resolver: {
-    blacklistRE: blacklist([
-      // exclude react-native modules outside of this package
-      /app\/.*\/node_modules\/react-native\/.*/,
-      /node_modules\/.*\/node_modules\/react-native\/.*/,
-      // duplicate packages in server mocks. We don't need them so it's safe to exclude.
-      /__mocks__\/.*/,
-    ]),
-    extraNodeModules: {
-      // resolve react-native to this package's node_modules
-      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
-    },
-  },
-};
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
deleted file mode 100644
index 21dd1412106d..000000000000
--- a/examples-native/crna-kitchen-sink/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "crna-kitchen-sink",
-  "version": "5.3.0-rc.0",
-  "private": true,
-  "main": "node_modules/expo/AppEntry.js",
-  "workspaces": {
-    "nohoist": [
-      "react-native/**",
-      "**/app/react-native*",
-      "expo"
-    ]
-  },
-  "scripts": {
-    "android": "expo start --android",
-    "eject": "expo eject",
-    "ios": "expo start --ios",
-    "start": "expo start",
-    "storybook": "BABEL_ENV=storybook node ../../app/react-native-server/bin/index",
-    "test": "node node_modules/jest/bin/jest.js --watch"
-  },
-  "jest": {
-    "preset": "jest-expo"
-  },
-  "dependencies": {
-    "expo": "^33.0.7",
-    "prop-types": "^15.6.2",
-    "react": "16.12.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "whatwg-fetch": "^3.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-ondevice-actions": "5.3.0-rc.0",
-    "@storybook/addon-ondevice-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-ondevice-knobs": "5.3.0-rc.0",
-    "@storybook/addon-ondevice-notes": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/react-native": "5.3.0-rc.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-preset-expo": "^7.0.0",
-    "core-js": "^3.0.1",
-    "expo-cli": "^3.7.1",
-    "jest-expo": "^33.0.2",
-    "react-test-renderer": "16.10.2",
-    "schedule": "^0.5.0"
-  }
-}
diff --git a/examples-native/crna-kitchen-sink/storybook/addons.js b/examples-native/crna-kitchen-sink/storybook/addons.js
deleted file mode 100644
index e8a3976c7539..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/addons.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-options/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-notes/register';
diff --git a/examples-native/crna-kitchen-sink/storybook/index.js b/examples-native/crna-kitchen-sink/storybook/index.js
deleted file mode 100644
index 877a46d95924..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getStorybookUI, configure } from '@storybook/react-native';
-import './rn-addons';
-
-configure(() => {
-  // eslint-disable-next-line global-require
-  require('./stories');
-}, module);
-
-// const darkTheme = {
-//   backgroundColor: 'black',
-//   headerTextColor: 'white',
-//   labelColor: 'white',
-//   borderColor: 'white',
-//   previewBorderColor: 'gray',
-//   buttonTextColor: 'white',
-//   buttonActiveTextColor: 'white',
-// };
-
-// const StorybookUIRoot = getStorybookUI({ theme: darkTheme });
-
-const StorybookUIRoot = getStorybookUI();
-export default StorybookUIRoot;
diff --git a/examples-native/crna-kitchen-sink/storybook/rn-addons.js b/examples-native/crna-kitchen-sink/storybook/rn-addons.js
deleted file mode 100644
index 2321f99cf843..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/rn-addons.js
+++ /dev/null
@@ -1,4 +0,0 @@
-require('@storybook/addon-ondevice-actions/register');
-require('@storybook/addon-ondevice-knobs/register');
-require('@storybook/addon-ondevice-notes/register');
-require('@storybook/addon-ondevice-backgrounds/register');
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/CenterView/style.js b/examples-native/crna-kitchen-sink/storybook/stories/CenterView/style.js
deleted file mode 100644
index bc7b2bbafc86..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/stories/CenterView/style.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  main: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-};
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/Knobs/index.js b/examples-native/crna-kitchen-sink/storybook/stories/Knobs/index.js
deleted file mode 100644
index e3d008f33a20..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/stories/Knobs/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-import {
-  text,
-  number,
-  boolean,
-  color,
-  select,
-  radios,
-  array,
-  date,
-  object,
-} from '@storybook/addon-knobs';
-
-export default () => {
-  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);
-
-  // NOTE: color picker is currently broken
-  const backgroundColor = color('background', '#ffff00');
-  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-  const otherStyles = object('Styles', {
-    borderWidth: 3,
-    borderColor: '#ff00ff',
-    padding: 10,
-  });
-  const nice = boolean('Nice', true);
-
-  // NOTE: put this last because it currently breaks everything after it :D
-  const birthday = date('Birthday', new Date('Jan 20 2017'));
-
-  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' };
-
-  return (
-    <View style={style}>
-      <Text>{intro}</Text>
-      <Text>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</Text>
-      <Text>My wallet contains: ${dollars.toFixed(2)}</Text>
-      <Text>In my backpack, I have:</Text>
-      <View>
-        {items.map(item => (
-          <Text key={item}>{item}</Text>
-        ))}
-      </View>
-      <Text>{salutation}</Text>
-    </View>
-  );
-};
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/Welcome/index.js b/examples-native/crna-kitchen-sink/storybook/stories/Welcome/index.js
deleted file mode 100644
index 8e0fe99bcc7f..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/stories/Welcome/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
-
-export default class Welcome extends React.Component {
-  styles = {
-    wrapper: {
-      flex: 1,
-      padding: 24,
-      justifyContent: 'center',
-    },
-    header: {
-      fontSize: 18,
-      marginBottom: 18,
-    },
-    content: {
-      fontSize: 12,
-      marginBottom: 10,
-      lineHeight: 18,
-    },
-  };
-
-  showApp = event => {
-    const { showApp } = this.props;
-
-    event.preventDefault();
-    if (showApp) {
-      showApp();
-    }
-  };
-
-  render() {
-    return (
-      <View style={this.styles.wrapper}>
-        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
-        <Text style={this.styles.content}>
-          This is a UI Component development environment for your React Native app. Here you can
-          display and interact with your UI components as stories. A story is a single state of one
-          or more UI components. You can have as many stories as you want. In other words a story is
-          like a visual test case.
-        </Text>
-        <Text style={this.styles.content}>
-          We have added some stories inside the "storybook/stories" directory for examples. Try
-          editing the "storybook/stories/Welcome.js" file to edit this message.
-        </Text>
-      </View>
-    );
-  }
-}
-
-Welcome.defaultProps = {
-  showApp: null,
-};
-
-Welcome.propTypes = {
-  showApp: PropTypes.func,
-};
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
deleted file mode 100644
index 8065ffd3d017..000000000000
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-
-import { storiesOf, addDecorator, addParameters } from '@storybook/react-native';
-import { action } from '@storybook/addon-actions';
-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 Button from './Button';
-import CenterView from './CenterView';
-import Welcome from './Welcome';
-
-addDecorator(withBackgrounds);
-
-addParameters({
-  backgrounds: [
-    { name: 'dark', value: '#222222' },
-    { name: 'white', value: '#ffffff', default: true },
-  ],
-});
-
-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,
-  })
-  .addParameters({
-    backgrounds: [
-      { name: 'dark', value: '#222222' },
-      { name: 'light', value: '#eeeeee', default: true },
-    ],
-    notes: `
-# Custom note\n
-_This component doesn't look right_
-`,
-  })
-  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
-  .add('with text', () => (
-    <Button onPress={action('clicked-text')}>
-      <Text>Hello Button</Text>
-    </Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onPress={action('clicked-emoji')}>
-      <Text>😀 😎 👍 💯</Text>
-    </Button>
-  ));
-
-storiesOf('Knobs', module)
-  .addDecorator(withKnobs)
-  .add('with knobs', knobsWrapper);
-
-const globalParameter = 'globalParameter';
-const chapterParameter = 'chapterParameter';
-const storyParameter = 'storyParameter';
-
-addParameters({ globalParameter });
-
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters }) => <Text>Parameters are {JSON.stringify(parameters)}</Text>,
-    {
-      storyParameter,
-    }
-  );
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index 11163d45b187..50ab389264cd 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -1,15 +1,14 @@
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
-  stories: ['../src/stories/**/*.stories.(ts|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-jest/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-jest',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
   ],
 };
diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts
index 4e526489c8ce..e2c77e9e4870 100644
--- a/examples/angular-cli/.storybook/preview.ts
+++ b/examples/angular-cli/.storybook/preview.ts
@@ -1,5 +1,4 @@
 import { addParameters, addDecorator } from '@storybook/angular';
-import { withA11y } from '@storybook/addon-a11y';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';
 
@@ -9,7 +8,6 @@ import docJson from '../documentation.json';
 
 setCompodocJson(docJson);
 
-addDecorator(withA11y);
 addCssWarning();
 
 addParameters({
diff --git a/examples/angular-cli/addon-jest.testresults.json b/examples/angular-cli/addon-jest.testresults.json
new file mode 100644
index 000000000000..aa1054f33f5f
--- /dev/null
+++ b/examples/angular-cli/addon-jest.testresults.json
@@ -0,0 +1 @@
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":3,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1590640781607,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1590640783490,"message":"","name":"/Users/shilman/projects/baseline/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1590640782355,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
diff --git a/examples/angular-cli/angular.json b/examples/angular-cli/angular.json
index a3879598fb0c..bd34135f96ce 100644
--- a/examples/angular-cli/angular.json
+++ b/examples/angular-cli/angular.json
@@ -75,13 +75,6 @@
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     },
@@ -95,13 +88,6 @@
             "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "angular-cli:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     }
diff --git a/examples/angular-cli/jest-config/globalMocks.ts b/examples/angular-cli/jest-config/globalMocks.ts
index b2792cc934aa..712539727a02 100644
--- a/examples/angular-cli/jest-config/globalMocks.ts
+++ b/examples/angular-cli/jest-config/globalMocks.ts
@@ -3,9 +3,9 @@
 const mock = () => {
   let storage = {};
   return {
-    getItem: key => (key in storage ? storage[key] : null),
+    getItem: (key) => (key in storage ? storage[key] : null),
     setItem: (key, value) => (storage[key] = value || ''),
-    removeItem: key => delete storage[key],
+    removeItem: (key) => delete storage[key],
     clear: () => (storage = {}),
   };
 };
diff --git a/examples/angular-cli/jest.addon-config.js b/examples/angular-cli/jest.addon-config.js
index 198ac29daeda..9f8d61a2c0d6 100644
--- a/examples/angular-cli/jest.addon-config.js
+++ b/examples/angular-cli/jest.addon-config.js
@@ -1,5 +1,6 @@
+const base = require('./jest.config.js');
+
 module.exports = {
-  preset: 'jest-preset-angular',
+  ...base,
   testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'],
-  setupFilesAfterEnv: ['./jest-config/setup.ts'],
 };
diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js
index 9356b1eebc78..cdc5e1372849 100644
--- a/examples/angular-cli/jest.config.js
+++ b/examples/angular-cli/jest.config.js
@@ -1,19 +1,28 @@
+const path = require('path');
 const config = require('../../jest.config');
 
+const projectDir = path.join(__dirname, '../../');
+
 module.exports = {
   preset: 'jest-preset-angular',
-  ...config,
   globals: {
-    __TRANSFORM_HTML__: true,
+    'ts-jest': {
+      tsConfig: path.join(__dirname, 'src/tsconfig.spec.json'),
+      stringifyContentPathRegex: '\\.html$',
+    },
   },
   roots: [__dirname],
   transform: {
     '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
-    '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
-    '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
-    '^.+\\.html$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
-    '^.+\\.ts$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+    '^.+\\.(ts|html)$': 'ts-jest',
+    '^.+\\.jsx?$': path.join(projectDir, 'scripts/utils/jest-transform-js.js'),
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
   moduleFileExtensions: [...config.moduleFileExtensions, 'html'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+  setupFilesAfterEnv: ['./jest-config/setup.ts'],
 };
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index f958cce474b6..f77ce58df562 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,69 +1,72 @@
 {
   "name": "angular-cli",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "license": "MIT",
   "scripts": {
     "build": "ng build",
-    "prebuild-storybook": "npm run storybook:prebuild",
+    "prebuild-storybook": "yarn storybook:prebuild",
     "build-storybook": "build-storybook -s src/assets",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets",
-    "storybook:prebuild": "npm run test:generate-output && npm run docs:json",
+    "storybook": "yarn storybook:prebuild && start-storybook -p 9008 -s src/assets",
+    "storybook:prebuild": "yarn test:generate-output && yarn docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@angular/common": "^8.2.8",
-    "@angular/compiler": "^8.2.8",
-    "@angular/core": "^8.2.8",
-    "@angular/forms": "^8.2.8",
-    "@angular/platform-browser": "^8.2.8",
-    "@angular/platform-browser-dynamic": "^8.2.8",
-    "@ngrx/store": "^8.2.0",
+    "@angular/common": "^9.1.0",
+    "@angular/compiler": "^9.1.0",
+    "@angular/core": "^9.1.0",
+    "@angular/forms": "^9.1.0",
+    "@angular/platform-browser": "^9.1.0",
+    "@angular/platform-browser-dynamic": "^9.1.0",
+    "@ngrx/store": "^9.0.0",
     "core-js": "^3.0.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.0",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.4.0",
     "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.6",
-    "@angular/cli": "^8.3.6",
-    "@angular/compiler-cli": "^8.2.8",
+    "@angular-devkit/build-angular": "~0.901.0",
+    "@angular/cli": "^9.1.0",
+    "@angular/compiler-cli": "^9.1.0",
     "@compodoc/compodoc": "^1.1.11",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/angular": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-controls": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/angular": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "@types/core-js": "^2.5.0",
-    "@types/jest": "^24.0.11",
-    "@types/node": "^12.12.11",
-    "@types/webpack-env": "^1.14.0",
+    "@types/jest": "^25.1.1",
+    "@types/node": "^14.0.10",
+    "@types/webpack-env": "^1.15.2",
     "babel-plugin-require-context-hook": "^1.0.0",
     "global": "^4.3.2",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "jest": "^24.7.1",
-    "jest-preset-angular": "^7.1.0",
-    "protractor": "~5.4.2",
-    "ts-node": "~8.5.2",
+    "jasmine-spec-reporter": "~5.0.2",
+    "jest": "^26.0.0",
+    "jest-preset-angular": "^8.2.0",
+    "protractor": "~5.4.4",
+    "ts-node": "~8.9.1",
     "typescript": "^3.4.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "tl92yzsj6w"
+    }
   }
 }
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 1ed30bcfe769..1481ee5759a8 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-c14=""
+    _nghost-a-c5=""
   >
     <button
-      _ngcontent-a-c14=""
+      _ngcontent-a-c5=""
     >
       Action and Method
     </button>
@@ -25,10 +25,10 @@ exports[`Storyshots Addon/Actions Action only 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c13=""
+    _nghost-a-c4=""
   >
     <button
-      _ngcontent-a-c13=""
+      _ngcontent-a-c4=""
     >
       Action only
     </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
deleted file mode 100644
index ddb525e3dd51..000000000000
--- a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,108 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Centered centered component 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <ng-component>
-    <div
-      ng-reflect-ng-style="[object Object]"
-      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
-    >
-      <div
-        ng-reflect-ng-style="[object Object]"
-        style="margin: auto; max-height: 100%;"
-      >
-        <storybook-app-root>
-          <div
-            class="hide"
-            style="color: red; font-size: 30px; text-align: center;"
-          >
-             This should be hidden, if not - scss is not loaded as needed.
-  
-          </div>
-          <div
-            style="text-align:center"
-          >
-            <h1>
-               Welcome to app! 
-            </h1>
-            <img
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-              width="300"
-            />
-          </div>
-          <h2>
-            Here are some links to help you start: 
-          </h2>
-          <ul>
-            <li>
-              <h2>
-                <a
-                  href="https://angular.io/tutorial"
-                  target="_blank"
-                >
-                  Tour of Heroes
-                </a>
-              </h2>
-            </li>
-            <li>
-              <h2>
-                <a
-                  href="https://github.com/angular/angular-cli/wiki"
-                  target="_blank"
-                >
-                  CLI Documentation
-                </a>
-              </h2>
-            </li>
-            <li>
-              <h2>
-                <a
-                  href="https://blog.angular.io//"
-                  target="_blank"
-                >
-                  Angular blog
-                </a>
-              </h2>
-            </li>
-          </ul>
-        </storybook-app-root>
-      </div>
-    </div>
-  </ng-component>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Addon/Centered centered template 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <ng-component>
-    <div
-      ng-reflect-ng-style="[object Object]"
-      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
-    >
-      <div
-        ng-reflect-ng-style="[object Object]"
-        style="margin: auto; max-height: 100%;"
-      >
-        <storybook-button-component
-          _nghost-a-c1=""
-          ng-reflect-text="Hello Button"
-        >
-          <button
-            _ngcontent-a-c1=""
-          >
-            Hello Button
-          </button>
-        </storybook-button-component>
-      </div>
-    </div>
-  </ng-component>
-</storybook-dynamic-app-root>
-`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot
index 3f6bbf0f2aec..e76b065a655d 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot
@@ -8,11 +8,11 @@ exports[`Storyshots Addon/Docs with some emoji 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c16=""
+      _nghost-a-c7=""
       ng-reflect-text="😀 😎 👍 💯"
     >
       <button
-        _ngcontent-a-c16=""
+        _ngcontent-a-c7=""
       >
         😀 😎 👍 💯
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Addon/Docs with text 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c15=""
+      _nghost-a-c6=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c15=""
+        _ngcontent-a-c6=""
       >
         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 7c9183ea2179..df2b4b61b96f 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-c17=""
+    _nghost-a-c8=""
   >
     <button
-      _ngcontent-a-c17=""
+      _ngcontent-a-c8=""
     >
       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
deleted file mode 100644
index 35fb1e998f62..000000000000
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Notes Note with HTML 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-button-component
-    _nghost-a-c19=""
-  >
-    <button
-      _ngcontent-a-c19=""
-    >
-      Notes with HTML
-    </button>
-  </storybook-button-component>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Addon/Notes Simple note 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-button-component
-    _nghost-a-c18=""
-  >
-    <button
-      _ngcontent-a-c18=""
-    >
-      Notes on some Button
-    </button>
-  </storybook-button-component>
-</storybook-dynamic-app-root>
-`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
index ebb28412d380..097629b538fb 100644
--- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -7,12 +7,22 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c20=""
+    _nghost-a-c9=""
   >
     <button
-      _ngcontent-a-c20=""
+      _ngcontent-a-c9=""
     >
-      Parameters are {"docs":{"iframeHeight":"60px"},"options":{},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter","__id":"core-parameters--passed-to-story"}
+      Parameters are {
+    "docs": {
+      "iframeHeight": "60px"
+    },
+    "globalParameter": "globalParameter",
+    "framework": "angular",
+    "chapterParameter": "chapterParameter",
+    "argTypes": {},
+    "storyParameter": "storyParameter",
+    "__id": "core-parameters--passed-to-story"
+  }
     </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 f9628db33bf5..6a98884cec54 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-c21=""
+      _nghost-a-c10=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c21=""
+        _ngcontent-a-c10=""
       >
         Button with custom styles
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Custom/Style With Knobs 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c22=""
+      _nghost-a-c11=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c22=""
+        _ngcontent-a-c11=""
       >
         Button with custom styles
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
index d597059e64d0..d9220440abe4 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.stories.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-c4=""
+      _nghost-a-c3=""
       ng-reflect-text="😀 😎 👍 💯"
     >
       <button
-        _ngcontent-a-c4=""
+        _ngcontent-a-c3=""
       >
         😀 😎 👍 💯
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Button with text 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c3=""
+      _nghost-a-c2=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c3=""
+        _ngcontent-a-c2=""
       >
         Hello Button
       </button>
@@ -50,47 +50,47 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 >
   <ng-component>
     <storybook-welcome-component
-      _nghost-a-c2=""
+      _nghost-a-c1=""
     >
       <main
-        _ngcontent-a-c2=""
+        _ngcontent-a-c1=""
       >
         <h1
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
           Welcome to storybook
         </h1>
         <p
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
           This is a UI component dev environment for your app.
         </p>
         <p
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
            We've added some basic stories inside the 
           <span
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             class="inline-code"
           >
             src/stories
           </span>
            directory. 
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            A story is a single state of one or more UI components. You can have as many stories as you want. 
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            (Basically a story is like a visual test case.) 
         </p>
         <p
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
            See these sample 
           <a
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             role="button"
             tabindex="0"
           >
@@ -98,7 +98,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           </a>
            for a component called 
           <span
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             class="inline-code"
           >
             Button
@@ -106,26 +106,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            . 
         </p>
         <p
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
            Just like that, you can add your own components as stories. 
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            You can also edit those components and see changes right away. 
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            (Try editing the 
           <span
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             class="inline-code"
           >
             Button
           </span>
            stories located at 
           <span
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             class="inline-code"
           >
             src/stories/index.js
@@ -133,15 +133,15 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           .) 
         </p>
         <p
-          _ngcontent-a-c2=""
+          _ngcontent-a-c1=""
         >
            Usually we create stories with smaller UI components in the app.
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            Have a look at the 
           <a
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             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-c2=""
+          _ngcontent-a-c1=""
           class="note"
         >
           <b
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           >
             NOTE:
           </b>
           <br
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
           />
            Have a look at the 
           <span
-            _ngcontent-a-c2=""
+            _ngcontent-a-c1=""
             class="inline-code"
           >
             .storybook/webpack.config.js
diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts
index 7d9b6ad77774..6592b17ded02 100644
--- a/examples/angular-cli/src/stories/addon-actions.stories.ts
+++ b/examples/angular-cli/src/stories/addon-actions.stories.ts
@@ -13,15 +13,13 @@ export const ActionOnly = () => ({
   },
 });
 
-ActionOnly.story = {
-  name: 'Action only',
-};
+ActionOnly.storyName = 'Action only';
 
 export const ActionAndMethod = () => ({
   component: Button,
   props: {
     text: 'Action and Method',
-    onClick: e => {
+    onClick: (e) => {
       console.log(e);
       e.preventDefault();
       action('log2')(e.target);
@@ -29,6 +27,4 @@ export const ActionAndMethod = () => ({
   },
 });
 
-ActionAndMethod.story = {
-  name: 'Action and method',
-};
+ActionAndMethod.storyName = 'Action and method';
diff --git a/examples/angular-cli/src/stories/addon-background.stories.ts b/examples/angular-cli/src/stories/addon-background.stories.ts
index 3d1ed5d3e480..41830e00af55 100644
--- a/examples/angular-cli/src/stories/addon-background.stories.ts
+++ b/examples/angular-cli/src/stories/addon-background.stories.ts
@@ -2,18 +2,6 @@ import { moduleMetadata, storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
 import { AppComponent } from '../app/app.component';
 
-storiesOf('Addon/Background', module)
-  .addParameters({
-    backgrounds: [
-      { name: 'twitter', value: '#00aced', default: true },
-      { name: 'facebook', value: '#3b5998' },
-    ],
-  })
-  .add('background component', () => ({
-    component: AppComponent,
-    props: {},
-  }));
-
 storiesOf('Addon/Background', module)
   .addDecorator(
     moduleMetadata({
@@ -21,11 +9,18 @@ storiesOf('Addon/Background', module)
     })
   )
   .addParameters({
-    backgrounds: [
-      { name: 'twitter', value: '#00aced', default: true },
-      { name: 'facebook', value: '#3b5998' },
-    ],
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        { name: 'twitter', value: '#00aced' },
+        { name: 'facebook', value: '#3b5998' },
+      ],
+    },
   })
+  .add('background component', () => ({
+    component: AppComponent,
+    props: {},
+  }))
   .add('background template', () => ({
     template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
     props: {
diff --git a/examples/angular-cli/src/stories/addon-centered.stories.ts b/examples/angular-cli/src/stories/addon-centered.stories.ts
deleted file mode 100644
index 1f2834a541a7..000000000000
--- a/examples/angular-cli/src/stories/addon-centered.stories.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { centered } from '@storybook/addon-centered/angular';
-import { moduleMetadata, storiesOf } from '@storybook/angular';
-import { Button } from '@storybook/angular/demo';
-import { AppComponent } from '../app/app.component';
-
-storiesOf('Addon/Centered', module)
-  .addDecorator(centered)
-  .add('centered component', () => ({
-    component: AppComponent,
-    props: {},
-  }));
-
-storiesOf('Addon/Centered', module)
-  .addDecorator(
-    moduleMetadata({
-      declarations: [Button],
-    })
-  )
-  .addDecorator(centered)
-  .add('centered template', () => ({
-    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
-    props: {
-      text: 'Hello Button',
-      onClick: (event: Event) => {
-        console.log('some bindings work');
-        console.log(event);
-      },
-    },
-  }));
diff --git a/examples/angular-cli/src/stories/addon-docs.stories.mdx b/examples/angular-cli/src/stories/addon-docs.stories.mdx
index 71a7309fe024..ffbbaa89b414 100644
--- a/examples/angular-cli/src/stories/addon-docs.stories.mdx
+++ b/examples/angular-cli/src/stories/addon-docs.stories.mdx
@@ -1,8 +1,9 @@
 import { moduleMetadata } from '@storybook/angular';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { Welcome, Button } from '@storybook/angular/demo';
 import { linkTo } from '@storybook/addon-links';
 import { text, withKnobs } from '@storybook/addon-knobs';
+import { ButtonComponent } from './doc-button/doc-button.component';
 
 # Storybook Docs for Angular
 
@@ -74,6 +75,12 @@ Let's add another one. The UI updates automatically as you'd expect.
   }}
 </Story>
 
+## Props
+
+We can automatically generate props tables from Angular components:
+
+<Props of={ButtonComponent} />
+
 ## More info
 
 For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).
diff --git a/examples/angular-cli/src/stories/addon-jest.stories.ts b/examples/angular-cli/src/stories/addon-jest.stories.ts
index b5ca229ef1b7..56cb245801c2 100644
--- a/examples/angular-cli/src/stories/addon-jest.stories.ts
+++ b/examples/angular-cli/src/stories/addon-jest.stories.ts
@@ -18,10 +18,8 @@ export const AppComponentWithJestTests = () => ({
   props: {},
 });
 
-AppComponentWithJestTests.story = {
-  name: 'app.component with jest tests',
+AppComponentWithJestTests.storyName = 'app.component with jest tests';
 
-  parameters: {
-    jest: 'app.component',
-  },
+AppComponentWithJestTests.parameters = {
+  jest: 'app.component',
 };
diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts
index 36501f9165be..3970fc6e5e5e 100644
--- a/examples/angular-cli/src/stories/addon-knobs.stories.ts
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@@ -53,9 +53,7 @@ export const Simple = () => {
   };
 };
 
-Simple.story = {
-  name: 'Simple',
-};
+Simple.storyName = 'Simple';
 
 export const AllKnobs = () => {
   const name = text('name', 'Jane');
@@ -101,14 +99,10 @@ export const AllKnobs = () => {
   };
 };
 
-AllKnobs.story = {
-  name: 'All knobs',
-};
+AllKnobs.storyName = 'All knobs';
 
 export const XssSafety = () => ({
   template: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
 });
 
-XssSafety.story = {
-  name: 'XSS safety',
-};
+XssSafety.storyName = 'XSS safety';
diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts
index 065d4df98410..ced0b104b61d 100644
--- a/examples/angular-cli/src/stories/addon-links.stories.ts
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@@ -13,6 +13,4 @@ export const ButtonWithLinkToAnotherStory = () => ({
   },
 });
 
-ButtonWithLinkToAnotherStory.story = {
-  name: 'button with link to another story',
-};
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
deleted file mode 100644
index 87f7bb7d69c9..000000000000
--- a/examples/angular-cli/src/stories/addon-notes.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from '@storybook/angular/demo';
-
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  component: Button,
-  props: {
-    text: 'Notes on some Button',
-    onClick: () => {},
-  },
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some button' },
-};
-
-export const NoteWithHtml = () => ({
-  component: Button,
-  props: {
-    text: 'Notes with HTML',
-    onClick: () => {},
-  },
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-  parameters: {
-    notes: `
-    <h2>My notes on emojis</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/angular-cli/src/stories/all-knobs.component.ts b/examples/angular-cli/src/stories/all-knobs.component.ts
index c7064bca26ce..6e9f294ff95f 100644
--- a/examples/angular-cli/src/stories/all-knobs.component.ts
+++ b/examples/angular-cli/src/stories/all-knobs.component.ts
@@ -1,7 +1,6 @@
+/* eslint-disable no-useless-constructor */
 import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 
-const logger = console;
-
 @Component({
   selector: 'storybook-simple-knobs-component',
   template: `
@@ -48,14 +47,14 @@ export class AllKnobsComponent implements OnChanges, OnInit {
   nice;
 
   constructor() {
-    logger.debug('constructor');
+    // logger.debug('constructor');
   }
 
   ngOnInit(): void {
-    logger.debug('on init, user component');
+    // logger.debug('on init, user component');
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    logger.debug(changes);
+    // logger.debug(changes);
   }
 }
diff --git a/examples/angular-cli/src/stories/app.component.stories.ts b/examples/angular-cli/src/stories/app.component.stories.ts
index d9a65e40769d..205f1d6af48b 100644
--- a/examples/angular-cli/src/stories/app.component.stories.ts
+++ b/examples/angular-cli/src/stories/app.component.stories.ts
@@ -3,6 +3,9 @@ import { AppComponent } from '../app/app.component';
 export default {
   title: 'App Component',
   component: AppComponent,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export const ComponentWithSeparateTemplate = () => ({
@@ -10,7 +13,5 @@ export const ComponentWithSeparateTemplate = () => ({
   props: {},
 });
 
-ComponentWithSeparateTemplate.story = {
-  name: 'Component with separate template',
-  parameters: { docs: { iframeHeight: 400 } },
-};
+ComponentWithSeparateTemplate.storyName = 'Component with separate template';
+ComponentWithSeparateTemplate.parameters = { docs: { iframeHeight: 400 } };
diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
index 59e2734db89c..57158e6f0e0c 100644
--- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
@@ -12,9 +12,7 @@ export const InputsAndInjectDependencies = () => ({
   },
 });
 
-InputsAndInjectDependencies.story = {
-  name: 'inputs and inject dependencies',
-};
+InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
 
 export const InputsAndInjectDependenciesWithKnobs = () => ({
   component: DiComponent,
@@ -23,7 +21,5 @@ export const InputsAndInjectDependenciesWithKnobs = () => ({
   },
 });
 
-InputsAndInjectDependenciesWithKnobs.story = {
-  name: 'inputs and inject dependencies with knobs',
-  decorators: [withKnobs],
-};
+InputsAndInjectDependenciesWithKnobs.storyName = 'inputs and inject dependencies with knobs';
+InputsAndInjectDependenciesWithKnobs.decorators = [withKnobs];
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
index 868e6dd35485..0295f6e09927 100644
--- a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
@@ -8,6 +8,4 @@ export const ComponentWithStyles = () => ({
   component: StyledComponent,
 });
 
-ComponentWithStyles.story = {
-  name: 'Component with styles',
-};
+ComponentWithStyles.storyName = 'Component with styles';
diff --git a/examples/angular-cli/src/stories/core.stories.ts b/examples/angular-cli/src/stories/core.stories.ts
index 91898719d28f..42b151282cd0 100644
--- a/examples/angular-cli/src/stories/core.stories.ts
+++ b/examples/angular-cli/src/stories/core.stories.ts
@@ -14,15 +14,13 @@ export default {
   },
 };
 
-export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+export const PassedToStory = (_args, { parameters: { fileName, ...parameters } }) => ({
   component: Button,
   props: {
-    text: `Parameters are ${JSON.stringify(parameters)}`,
+    text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,
     onClick: () => 0,
   },
 });
 
-PassedToStory.story = {
-  name: 'passed to story',
-  parameters: { storyParameter },
-};
+PassedToStory.storyName = 'passed to story';
+PassedToStory.parameters = { storyParameter };
diff --git a/examples/angular-cli/src/stories/custom-ng-content.stories.ts b/examples/angular-cli/src/stories/custom-ng-content.stories.ts
index 495047971eaf..81e5cd6e35a5 100644
--- a/examples/angular-cli/src/stories/custom-ng-content.stories.ts
+++ b/examples/angular-cli/src/stories/custom-ng-content.stories.ts
@@ -3,9 +3,7 @@ import { storiesOf } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-with-ng-content',
-  template: `
-    <div style="color: #1e88e5;"><ng-content></ng-content></div>
-  `,
+  template: ` <div style="color: #1e88e5;"><ng-content></ng-content></div> `,
 })
 class WithNgContentComponent {}
 
diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts
index f0c9d379fcea..37b4b25d6de1 100644
--- a/examples/angular-cli/src/stories/custom-pipes.stories.ts
+++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts
@@ -23,9 +23,7 @@ export const Simple = () => ({
   },
 });
 
-Simple.story = {
-  name: 'Simple',
-};
+Simple.storyName = 'Simple';
 
 export const WithKnobsStory = () => ({
   component: NameComponent,
@@ -34,7 +32,5 @@ export const WithKnobsStory = () => ({
   },
 });
 
-WithKnobsStory.story = {
-  name: 'With Knobs',
-  decorators: [withKnobs],
-};
+WithKnobsStory.storyName = 'With Knobs';
+WithKnobsStory.decorators = [withKnobs];
diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts
index 86b2c2093798..6281acdb74de 100644
--- a/examples/angular-cli/src/stories/custom-providers.stories.ts
+++ b/examples/angular-cli/src/stories/custom-providers.stories.ts
@@ -23,9 +23,7 @@ export const Simple = () => ({
   },
 });
 
-Simple.story = {
-  name: 'Simple',
-};
+Simple.storyName = 'Simple';
 
 export const WithKnobsStory = () => {
   const name = text('name', 'Dynamic knob');
@@ -38,7 +36,5 @@ export const WithKnobsStory = () => {
   };
 };
 
-WithKnobsStory.story = {
-  name: 'With knobs',
-  decorators: [withKnobs],
-};
+WithKnobsStory.storyName = 'With knobs';
+WithKnobsStory.decorators = [withKnobs];
diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts
index 207e818174ca..b956bdd941a5 100644
--- a/examples/angular-cli/src/stories/custom-styles.stories.ts
+++ b/examples/angular-cli/src/stories/custom-styles.stories.ts
@@ -28,9 +28,7 @@ export const DefaultStory = () => ({
   ],
 });
 
-DefaultStory.story = {
-  name: 'Default',
-};
+DefaultStory.storyName = 'Default';
 
 export const WithKnobsStory = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
@@ -48,7 +46,5 @@ export const WithKnobsStory = () => ({
   ],
 });
 
-WithKnobsStory.story = {
-  name: 'With Knobs',
-  decorators: [withKnobs],
-};
+WithKnobsStory.storyName = 'With Knobs';
+WithKnobsStory.decorators = [withKnobs];
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
index bb93d416ef2f..4c9a4310d2e0 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
@@ -1,10 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { CustomCvaComponent } from './custom-cva.component';
 
-const description = `
-  This is an example of component that implements ControlValueAccessor interface
-`;
-
 export default {
   title: 'Custom/ngModel',
 };
@@ -17,7 +13,4 @@ export const CustomControlValueAccessor = () => ({
   },
 });
 
-CustomControlValueAccessor.story = {
-  name: 'custom ControlValueAccessor',
-  parameters: { notes: description },
-};
+CustomControlValueAccessor.storyName = 'custom ControlValueAccessor';
diff --git a/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot b/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot
index bd3c38047920..00b2847f3f8d 100644
--- a/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot
+++ b/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot
@@ -15,7 +15,7 @@ exports[`Storyshots DocButton Basic 1`] = `
         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
         width="100"
       />
-       Docs Test
+       Args test
   
     </button>
   </my-button>
diff --git a/examples/angular-cli/src/stories/doc-button/doc-button.component.html b/examples/angular-cli/src/stories/doc-button/doc-button.component.html
index b0fd419d8e96..7af61d6f344d 100644
--- a/examples/angular-cli/src/stories/doc-button/doc-button.component.html
+++ b/examples/angular-cli/src/stories/doc-button/doc-button.component.html
@@ -1,4 +1,4 @@
-<button [ngClass]="classes" #buttonRef>
+<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
   <img
     width="100"
     src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
diff --git a/examples/angular-cli/src/stories/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/doc-button/doc-button.component.ts
index 4a3095633781..4f88b25b7009 100644
--- a/examples/angular-cli/src/stories/doc-button/doc-button.component.ts
+++ b/examples/angular-cli/src/stories/doc-button/doc-button.component.ts
@@ -117,7 +117,9 @@ export class ButtonComponent<T> {
    * @ignore
    */
   public get classes(): string[] {
-    return [this.appearance, this.size].filter(_class => !!_class).map(_class => `btn-${_class}`);
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => `btn-${_class}`);
   }
 
   /**
diff --git a/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts b/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
index 30faec0ae6c7..2ea4644afb1e 100644
--- a/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
+++ b/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
@@ -6,9 +6,8 @@ export default {
   parameters: { docs: { iframeHeight: 120 } },
 };
 
-export const Basic = () => ({
+export const Basic = (args) => ({
   component: ButtonComponent,
-  props: {
-    label: 'Docs Test',
-  },
+  props: args,
 });
+Basic.args = { label: 'Args test', isDisabled: false };
diff --git a/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot b/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
new file mode 100644
index 000000000000..d3a6a62dc02a
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocInjectable Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <div>
+      <h1>
+        DocInjectable
+      </h1>
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts
new file mode 100644
index 000000000000..b6ad136fec33
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
+
+/**
+ * This is an Angular Injectable
+ * example that has a Prop Table.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DocInjectableService {
+  /**
+   * Auth headers to use.
+   */
+  auth: any;
+
+  constructor() {
+    this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
+  }
+
+  /**
+   * Get posts from Backend.
+   */
+  getPosts() {
+    return [];
+  }
+}
diff --git a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts
new file mode 100644
index 000000000000..de480ab5cef8
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts
@@ -0,0 +1,19 @@
+import { DocInjectableService } from './doc-injectable.service';
+
+export default {
+  title: 'DocInjectable',
+  component: DocInjectableService,
+  parameters: {
+    docs: { iframeHeight: 120 },
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  provider: [DocInjectableService],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div><h1>DocInjectable</h1></div>',
+});
diff --git a/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot b/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
new file mode 100644
index 000000000000..87c448fce67e
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocPipe Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <div>
+      <h1>
+        DOCPIPE
+      </h1>
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts
new file mode 100644
index 000000000000..6b7aca418a37
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * This is an Angular Pipe
+ * example that has a Prop Table.
+ */
+@Pipe({
+  name: 'docPipe',
+})
+export class DocPipe implements PipeTransform {
+  /**
+   * Transforms a string into uppercase.
+   * @param value string
+   */
+  transform(value: string): string {
+    return value?.toUpperCase();
+  }
+}
diff --git a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts
new file mode 100644
index 000000000000..90aeb82b1ec4
--- /dev/null
+++ b/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts
@@ -0,0 +1,19 @@
+import { DocPipe } from './doc-pipe.pipe';
+
+export default {
+  title: 'DocPipe',
+  component: DocPipe,
+  parameters: {
+    docs: { iframeHeight: 120 },
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  declarations: [DocPipe],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+});
diff --git a/examples/angular-cli/src/stories/inheritance/base-button.component.ts b/examples/angular-cli/src/stories/inheritance/base-button.component.ts
index 3619046fce2b..6afc2f20cce8 100644
--- a/examples/angular-cli/src/stories/inheritance/base-button.component.ts
+++ b/examples/angular-cli/src/stories/inheritance/base-button.component.ts
@@ -2,9 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: `storybook-base-button`,
-  template: `
-    <button>{{ label }}</button>
-  `,
+  template: ` <button>{{ label }}</button> `,
 })
 export class BaseButtonComponent {
   @Input()
diff --git a/examples/angular-cli/src/stories/inheritance/icon-button.component.ts b/examples/angular-cli/src/stories/inheritance/icon-button.component.ts
index 3debb422f62d..82ff17cf9e96 100644
--- a/examples/angular-cli/src/stories/inheritance/icon-button.component.ts
+++ b/examples/angular-cli/src/stories/inheritance/icon-button.component.ts
@@ -3,9 +3,7 @@ import { BaseButtonComponent } from './base-button.component';
 
 @Component({
   selector: `storybook-icon-button`,
-  template: `
-    <button>{{ label }} - {{ icon }}</button>
-  `,
+  template: ` <button>{{ label }} - {{ icon }}</button> `,
 })
 export class IconButtonComponent extends BaseButtonComponent {
   @Input()
diff --git a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
index 37060f32ca92..211046788f16 100644
--- a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
+++ b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
@@ -13,9 +13,7 @@ export const IconButton = () => ({
   },
 });
 
-IconButton.story = {
-  name: 'icon button',
-};
+IconButton.storyName = 'icon button';
 
 export const BaseButton = () => ({
   component: BaseButtonComponent,
@@ -24,6 +22,4 @@ export const BaseButton = () => ({
   },
 });
 
-BaseButton.story = {
-  name: 'base button',
-};
+BaseButton.storyName = 'base button';
diff --git a/examples/angular-cli/src/stories/metadata-combined.stories.ts b/examples/angular-cli/src/stories/metadata-combined.stories.ts
index a1af39192691..06372207c966 100644
--- a/examples/angular-cli/src/stories/metadata-combined.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-combined.stories.ts
@@ -29,9 +29,7 @@ export const Combined1 = () => ({
   },
 });
 
-Combined1.story = {
-  name: 'Combined 1',
-};
+Combined1.storyName = 'Combined 1';
 
 export const Combined2 = () => ({
   template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
@@ -43,6 +41,4 @@ export const Combined2 = () => ({
   },
 });
 
-Combined2.story = {
-  name: 'Combined 2',
-};
+Combined2.storyName = 'Combined 2';
diff --git a/examples/angular-cli/src/stories/metadata-individual.stories.ts b/examples/angular-cli/src/stories/metadata-individual.stories.ts
index d70c0306f690..de99e41153ae 100644
--- a/examples/angular-cli/src/stories/metadata-individual.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-individual.stories.ts
@@ -21,9 +21,7 @@ export const Individual1 = () => ({
   },
 });
 
-Individual1.story = {
-  name: 'Individual 1',
-};
+Individual1.storyName = 'Individual 1';
 
 export const Individual2 = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
@@ -43,6 +41,4 @@ export const Individual2 = () => ({
   },
 });
 
-Individual2.story = {
-  name: 'Individual 2',
-};
+Individual2.storyName = 'Individual 2';
diff --git a/examples/angular-cli/src/stories/metadata-shared.stories.ts b/examples/angular-cli/src/stories/metadata-shared.stories.ts
index 9748a174f306..073ec13beaad 100644
--- a/examples/angular-cli/src/stories/metadata-shared.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-shared.stories.ts
@@ -28,14 +28,10 @@ export const Shared1 = () => ({
   },
 });
 
-Shared1.story = {
-  name: 'Shared 1',
-};
+Shared1.storyName = 'Shared 1';
 
 export const Shared2 = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
 });
 
-Shared2.story = {
-  name: 'Shared 2',
-};
+Shared2.storyName = 'Shared 2';
diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
index 8272f9662872..470c1504949a 100644
--- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
@@ -7,21 +7,17 @@ exports[`Storyshots Custom/Feature Module as Context with forRoot Component with
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c7=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c7=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c7=""
       class="remove"
     >
       <span
-        _ngcontent-a-c7=""
         class="x"
       >
         ✕
@@ -38,21 +34,17 @@ exports[`Storyshots Custom/Feature Module as Context with forRoot Component with
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c8=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c8=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c8=""
       class="remove"
     >
       <span
-        _ngcontent-a-c8=""
         class="x"
       >
         ✕
@@ -68,29 +60,22 @@ exports[`Storyshots Custom/Feature Module as Context with forRoot Component with
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <storybook-chips-group
-    _nghost-a-c5=""
-  >
+  <storybook-chips-group>
     
     <storybook-chip
-      _ngcontent-a-c5=""
-      _nghost-a-c6=""
       class="chip"
       ng-reflect-display-text="Chip 1"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c6=""
         class="text"
       >
         Chíp 1
       </span>
       <div
-        _ngcontent-a-c6=""
         class="remove"
       >
         <span
-          _ngcontent-a-c6=""
           class="x"
         >
           ✕
@@ -98,24 +83,19 @@ exports[`Storyshots Custom/Feature Module as Context with forRoot Component with
       </div>
     </storybook-chip>
     <storybook-chip
-      _ngcontent-a-c5=""
-      _nghost-a-c6=""
       class="chip"
       ng-reflect-display-text="Chip 2"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c6=""
         class="text"
       >
         Chíp 2
       </span>
       <div
-        _ngcontent-a-c6=""
         class="remove"
       >
         <span
-          _ngcontent-a-c6=""
           class="x"
         >
           ✕
@@ -124,7 +104,6 @@ exports[`Storyshots Custom/Feature Module as Context with forRoot Component with
     </storybook-chip>
     
     <div
-      _ngcontent-a-c5=""
       class="remove-all"
     >
        Remove All 
diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
index 2e34fd8ed68a..a78a92bcf1c0 100644
--- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
@@ -7,21 +7,17 @@ exports[`Storyshots Custom/Feature Module as Context Component with default prov
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c11=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c11=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c11=""
       class="remove"
     >
       <span
-        _ngcontent-a-c11=""
         class="x"
       >
         ✕
@@ -38,21 +34,17 @@ exports[`Storyshots Custom/Feature Module as Context Component with overridden p
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c12=""
     style="background-color: yellow;"
   >
     <span
-      _ngcontent-a-c12=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c12=""
       class="remove"
     >
       <span
-        _ngcontent-a-c12=""
         class="x"
       >
         ✕
@@ -68,29 +60,22 @@ exports[`Storyshots Custom/Feature Module as Context Component with self and dep
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <storybook-chips-group
-    _nghost-a-c9=""
-  >
+  <storybook-chips-group>
     
     <storybook-chip
-      _ngcontent-a-c9=""
-      _nghost-a-c10=""
       class="chip"
       ng-reflect-display-text="Chip 1"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c10=""
         class="text"
       >
         Chíp 1
       </span>
       <div
-        _ngcontent-a-c10=""
         class="remove"
       >
         <span
-          _ngcontent-a-c10=""
           class="x"
         >
           ✕
@@ -98,24 +83,19 @@ exports[`Storyshots Custom/Feature Module as Context Component with self and dep
       </div>
     </storybook-chip>
     <storybook-chip
-      _ngcontent-a-c9=""
-      _nghost-a-c10=""
       class="chip"
       ng-reflect-display-text="Chip 2"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c10=""
         class="text"
       >
         Chíp 2
       </span>
       <div
-        _ngcontent-a-c10=""
         class="remove"
       >
         <span
-          _ngcontent-a-c10=""
           class="x"
         >
           ✕
@@ -124,7 +104,6 @@ exports[`Storyshots Custom/Feature Module as Context Component with self and dep
     </storybook-chip>
     
     <div
-      _ngcontent-a-c9=""
       class="remove-all"
     >
        Remove All 
diff --git a/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts b/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts
index 68e23182385d..c57cf51f87de 100644
--- a/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts
+++ b/examples/angular-cli/src/stories/module-context/chip-text.pipe.ts
@@ -6,7 +6,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class ChipTextPipe implements PipeTransform {
   transform(value: string): string {
     return Array.from(value)
-      .map(char => this.accentVowel(char))
+      .map((char) => this.accentVowel(char))
       .join('');
   }
 
diff --git a/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
index 91039deff0f6..10438400c401 100644
--- a/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
@@ -13,33 +13,26 @@ storiesOf('Custom/Feature Module as Context with forRoot', module)
       imports: [ChipsModule.forRoot()],
     })
   )
-  .add(
-    'Component with self and dependencies declared in its feature module',
-    () => {
-      const props: { [K in keyof ChipsGroupComponent]?: any } = {
-        chips: object('Chips', [
-          {
-            id: 1,
-            text: 'Chip 1',
-          },
-          {
-            id: 2,
-            text: 'Chip 2',
-          },
-        ]),
-        removeChipClick: action('Remove chip'),
-        removeAllChipsClick: action('Remove all chips clicked'),
-      };
-      return {
-        component: ChipsGroupComponent,
-        props,
-      };
-    },
-    {
-      notes: `This component includes a child component, a pipe, and a default provider, all which come from
-        the specified feature module.`,
-    }
-  )
+  .add('Component with self and dependencies declared in its feature module', () => {
+    const props: { [K in keyof ChipsGroupComponent]?: any } = {
+      chips: object('Chips', [
+        {
+          id: 1,
+          text: 'Chip 1',
+        },
+        {
+          id: 2,
+          text: 'Chip 2',
+        },
+      ]),
+      removeChipClick: action('Remove chip'),
+      removeAllChipsClick: action('Remove all chips clicked'),
+    };
+    return {
+      component: ChipsGroupComponent,
+      props,
+    };
+  })
   .add('Component with default providers', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
       displayText: text('Display Text', 'My Chip'),
diff --git a/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts b/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts
index 7033f0564003..7b469ef26f7e 100644
--- a/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts
@@ -2,11 +2,11 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DummyService {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function, no-useless-constructor
+  // eslint-disable-next-line no-useless-constructor
   constructor() {}
 
   getItems() {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       setTimeout(() => {
         resolve(['Joe', 'Jane']);
       }, 2000);
diff --git a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
index 8d8addf21a31..7dececf4007a 100644
--- a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
@@ -2,9 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'storybook-name',
-  template: `
-    <h1>{{ field | customPipe }}</h1>
-  `,
+  template: ` <h1>{{ field | customPipe }}</h1> `,
 })
 export class NameComponent {
   @Input()
diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
index bc7d043ffef1..bc3aadac7dde 100644
--- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
+++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
@@ -7,7 +7,6 @@ exports[`Storyshots Core/OnPush Class-specified component with OnPush and Knobs
   target={[Function ViewContainerRef_]}
 >
   <storybook-on-push-box
-    _nghost-a-c23=""
     style="background-color: rgb(255, 240, 0);"
   >
      Word of the day: OnPush 
diff --git a/examples/angular-cli/src/stories/on-push/on-push-box.component.ts b/examples/angular-cli/src/stories/on-push/on-push-box.component.ts
index a46de2bcafe9..e35ada4b1c5b 100644
--- a/examples/angular-cli/src/stories/on-push/on-push-box.component.ts
+++ b/examples/angular-cli/src/stories/on-push/on-push-box.component.ts
@@ -2,9 +2,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular
 
 @Component({
   selector: 'storybook-on-push-box',
-  template: `
-    Word of the day: {{ word }}
-  `,
+  template: ` Word of the day: {{ word }} `,
   styles: [
     `
       :host {
diff --git a/examples/angular-cli/src/stories/on-push/on-push.stories.ts b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
index 0246c5e87a36..fe5c49c319c5 100644
--- a/examples/angular-cli/src/stories/on-push/on-push.stories.ts
+++ b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
@@ -14,11 +14,5 @@ export const ClassSpecifiedComponentWithOnPushAndKnobs = () => ({
   },
 });
 
-ClassSpecifiedComponentWithOnPushAndKnobs.story = {
-  name: 'Class-specified component with OnPush and Knobs',
-  parameters: {
-    notes: `
-      This component is specified by class and uses OnPush change detection. It has two properties, one being a HostBinding. Both should be updatable using knobs.
-    `.trim(),
-  },
-};
+ClassSpecifiedComponentWithOnPushAndKnobs.storyName =
+  'Class-specified component with OnPush and Knobs';
diff --git a/examples/aurelia-kitchen-sink/.gitignore b/examples/aurelia-kitchen-sink/.gitignore
new file mode 100644
index 000000000000..4d7c8911436e
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.gitignore
@@ -0,0 +1,32 @@
+
+# You may want to customise this file depending on your Operating System
+# and the editor that you use.
+#
+# We recommend that you use a Global Gitignore for files that are not related
+# to the project. (https://help.github.com/articles/ignoring-files/#create-a-global-gitignore)
+
+# OS
+#
+# Ref: https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
+.DS_STORE
+Thumbs.db
+
+# Editors
+#
+# Ref: https://github.com/github/gitignore/blob/master/Global
+# Ref: https://github.com/github/gitignore/blob/master/Global/JetBrains.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore
+.idea
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Dependencies
+node_modules
+
+# Compiled files
+/dist
diff --git a/examples/aurelia-kitchen-sink/.htmlhintrc b/examples/aurelia-kitchen-sink/.htmlhintrc
new file mode 100644
index 000000000000..abef809442ea
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.htmlhintrc
@@ -0,0 +1,13 @@
+{
+  "tagname-lowercase": true,
+  "attr-lowercase": false,
+  "attr-value-double-quotes": true,
+  "attr-no-duplication": true,
+  "doctype-first": false,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "attr-no-duplication": true,
+  "title-require": true
+}
diff --git a/examples/aurelia-kitchen-sink/.storybook/main.js b/examples/aurelia-kitchen-sink/.storybook/main.js
new file mode 100644
index 000000000000..a7710269229e
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.storybook/main.js
@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-jest',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
+  ],
+};
diff --git a/examples/aurelia-kitchen-sink/.storybook/manager.js b/examples/aurelia-kitchen-sink/.storybook/manager.js
new file mode 100644
index 000000000000..26c8139f6149
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.storybook/manager.js
@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  showRoots: true,
+  brandTitle: 'Aurelia Kitchen Sink',
+  brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/aurelia-kitchen-sink',
+});
diff --git a/examples/aurelia-kitchen-sink/.storybook/preview.ts b/examples/aurelia-kitchen-sink/.storybook/preview.ts
new file mode 100644
index 000000000000..5dd82600df39
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.storybook/preview.ts
@@ -0,0 +1,7 @@
+import { addParameters } from '@storybook/aurelia';
+
+addParameters({
+  options: {
+    showRoots: true,
+  },
+});
diff --git a/examples/aurelia-kitchen-sink/.storybook/tsconfig.json b/examples/aurelia-kitchen-sink/.storybook/tsconfig.json
new file mode 100644
index 000000000000..17bef8d1cd0f
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/.storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": ["../src/karma.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*"]
+}
diff --git a/examples/aurelia-kitchen-sink/README.md b/examples/aurelia-kitchen-sink/README.md
new file mode 100644
index 000000000000..5860861dea22
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/README.md
@@ -0,0 +1,14 @@
+# aurelia-kitchen-sink
+
+This project is bootstrapped by [aurelia/new](https://github.com/aurelia/new).
+
+## Start dev web server
+
+    npm start
+
+## Build the app
+
+Build files to dist folder.
+
+    npm run build
+
diff --git a/examples/aurelia-kitchen-sink/favicon.ico b/examples/aurelia-kitchen-sink/favicon.ico
new file mode 100644
index 000000000000..330515e9c1d7
Binary files /dev/null and b/examples/aurelia-kitchen-sink/favicon.ico differ
diff --git a/examples/aurelia-kitchen-sink/index.ejs b/examples/aurelia-kitchen-sink/index.ejs
new file mode 100644
index 000000000000..e94127cc6574
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/index.ejs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Aurelia</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <base href="/">
+</head>
+
+<body>
+  <app></app>
+</body>
+
+</html>
diff --git a/examples/aurelia-kitchen-sink/package.json b/examples/aurelia-kitchen-sink/package.json
new file mode 100644
index 000000000000..a1399de5dbcd
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "aurelia-kitchen-sink",
+  "version": "6.0.0-beta.21",
+  "private": true,
+  "description": "An Aurelia client application.",
+  "repository": {
+    "type": "git",
+    "url": "???"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rimraf dist && webpack --env production",
+    "build-storybook": "build-storybook -s dist",
+    "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
+    "start": "webpack-dev-server",
+    "storybook": "start-storybook -p 9009 -s dist"
+  },
+  "dependencies": {
+    "aurelia": "dev",
+    "bootstrap": "^4.3.1",
+    "promise-polyfill": "^8.1.3"
+  },
+  "devDependencies": {
+    "@aurelia/webpack-loader": "dev",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/aurelia": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@types/node": "^14.0.10",
+    "css-loader": "^3.0.0",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^3.0.0",
+    "htmlhint": "^0.11.0",
+    "node-sass": "^4.12.0",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^0.23.0",
+    "ts-loader": "^6.0.0",
+    "typescript": "^3.0.0",
+    "webpack": "^4.41.2"
+  }
+}
diff --git a/examples/aurelia-kitchen-sink/src/app.html b/examples/aurelia-kitchen-sink/src/app.html
new file mode 100644
index 000000000000..a2729f3217ee
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/app.html
@@ -0,0 +1,3 @@
+<template>
+  <div>${message}</div>
+</template>
diff --git a/examples/aurelia-kitchen-sink/src/app.ts b/examples/aurelia-kitchen-sink/src/app.ts
new file mode 100644
index 000000000000..222bb6a41197
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/app.ts
@@ -0,0 +1,3 @@
+export class App {
+  message = 'Hello World!';
+}
diff --git a/examples/aurelia-kitchen-sink/src/cool-button/cool-button.html b/examples/aurelia-kitchen-sink/src/cool-button/cool-button.html
new file mode 100644
index 000000000000..745cac0c6a51
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/cool-button/cool-button.html
@@ -0,0 +1,3 @@
+<button class="btn btn-${buttonType}">
+${text}
+</button>
\ No newline at end of file
diff --git a/examples/aurelia-kitchen-sink/src/cool-button/cool-button.ts b/examples/aurelia-kitchen-sink/src/cool-button/cool-button.ts
new file mode 100644
index 000000000000..1bc95fe74683
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/cool-button/cool-button.ts
@@ -0,0 +1,7 @@
+import { bindable } from 'aurelia';
+
+export class CoolButton {
+  @bindable text: string;
+
+  @bindable buttonType = 'primary';
+}
diff --git a/examples/aurelia-kitchen-sink/src/css.d.ts b/examples/aurelia-kitchen-sink/src/css.d.ts
new file mode 100644
index 000000000000..ba9c00551998
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/css.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const value: string;
+  export default value;
+}
diff --git a/examples/aurelia-kitchen-sink/src/html.d.ts b/examples/aurelia-kitchen-sink/src/html.d.ts
new file mode 100644
index 000000000000..f4dc965735ff
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/html.d.ts
@@ -0,0 +1,7 @@
+declare module '*.html' {
+  export const name: string;
+  export const template: string;
+  export default template;
+  export const dependencies: string[];
+  export function getHTMLOnlyElement();
+}
diff --git a/examples/aurelia-kitchen-sink/src/main.ts b/examples/aurelia-kitchen-sink/src/main.ts
new file mode 100644
index 000000000000..9e175c4d064c
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/main.ts
@@ -0,0 +1,4 @@
+import { Aurelia } from 'aurelia';
+import { App } from './app';
+
+Aurelia.app(App).start();
diff --git a/examples/aurelia-kitchen-sink/src/stories/custom-element.stories.ts b/examples/aurelia-kitchen-sink/src/stories/custom-element.stories.ts
new file mode 100644
index 000000000000..224197899486
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/stories/custom-element.stories.ts
@@ -0,0 +1,30 @@
+import { StoryFn } from '@storybook/addons';
+import { withActions, action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+import { StoryFnAureliaReturnType, addComponents } from '@storybook/aurelia';
+import { CoolButton } from '../cool-button/cool-button';
+import 'bootstrap/scss/bootstrap.scss';
+
+type StoryType = StoryFn<Partial<StoryFnAureliaReturnType>> & {
+  storyName: string;
+};
+
+export default {
+  title: 'Custom|Custom Elements',
+  decorators: [withKnobs, withActions, addComponents(CoolButton)],
+};
+
+export const SimpleCoolButtonStory: StoryType = () => ({
+  template: `<cool-button click.delegate="buttonClick($event)" text.bind="buttonText"></cool-button>`,
+  state: {
+    buttonClick: action('Button Click'),
+    buttonText: text('Button Text', 'Aurelia Rocks!'),
+  },
+});
+SimpleCoolButtonStory.storyName = 'Cool Button Story';
+
+export const AutoGenerateStory: StoryType = () => ({
+  customElement: CoolButton,
+});
+AutoGenerateStory.storyName = 'Auto Generate Knobs Story';
diff --git a/examples/aurelia-kitchen-sink/src/stories/link.stories.ts b/examples/aurelia-kitchen-sink/src/stories/link.stories.ts
new file mode 100644
index 000000000000..b92ac4a06ef4
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/stories/link.stories.ts
@@ -0,0 +1,17 @@
+import { StoryFn } from '@storybook/addons';
+import { withActions } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { withKnobs } from '@storybook/addon-knobs';
+import { StoryFnAureliaReturnType } from '@storybook/aurelia';
+
+export default {
+  title: 'Link|Basic',
+  decorators: [withKnobs, withActions],
+};
+
+export const customCoolButtonTest: StoryFn<Partial<StoryFnAureliaReturnType>> = () => ({
+  template: `<button class="btn btn-outline-dark" click.delegate="buttonLink()">GO TO BUTTONS</button>`,
+  state: {
+    buttonLink: linkTo('Custom|Custom Elements', 'Auto Generate Knobs Story'),
+  },
+});
diff --git a/examples/aurelia-kitchen-sink/src/stories/mdx.stories.mdx b/examples/aurelia-kitchen-sink/src/stories/mdx.stories.mdx
new file mode 100644
index 000000000000..1d2eebc447a2
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/src/stories/mdx.stories.mdx
@@ -0,0 +1,24 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { CoolButton } from '../cool-button/cool-button';
+import { Button } from '@storybook/aurelia/demo';
+import { addComponents } from '@storybook/aurelia';
+import { text, withKnobs, } from '@storybook/addon-knobs';
+
+<Meta title="Welcome" component={CoolButton} decorators={[withKnobs]}/>
+
+# Welcome
+
+This is a test document written in MDX that defines a `CoolButton` story wrapped in a `Preview` doc block:
+
+<Preview withToolbar>
+  <Story name="to Storybook">
+    {{
+      template: `<cool-button text.bind="testText"></cool-button>`,
+      state: {
+        testText: text('asfdafds', 'asasfdsa')
+      }
+    }}
+  </Story>
+</Preview>
+
+
diff --git a/examples/aurelia-kitchen-sink/tsconfig.json b/examples/aurelia-kitchen-sink/tsconfig.json
new file mode 100644
index 000000000000..2447de35ea01
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "rootDir": "src",
+    "target": "es5",
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ]
+}
\ No newline at end of file
diff --git a/examples/aurelia-kitchen-sink/webpack.config.js b/examples/aurelia-kitchen-sink/webpack.config.js
new file mode 100644
index 000000000000..53c00451cb95
--- /dev/null
+++ b/examples/aurelia-kitchen-sink/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = (env) => {
+  const production = env === 'production' || process.env.NODE_ENV === 'production';
+  return {
+    mode: production ? 'production' : 'development',
+    devtool: production ? 'source-maps' : 'inline-source-map',
+    entry: './src/main.ts',
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+    },
+    devServer: {
+      historyApiFallback: true,
+      open: !process.env.CI,
+      port: 9000,
+      lazy: false,
+    },
+    module: {
+      rules: [
+        { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
+        { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
+        { test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ },
+      ],
+    },
+    plugins: [new HtmlWebpackPlugin({ template: 'index.ejs' })],
+  };
+};
diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
index 12b5d46d3964..f86c04a4a8e4 100644
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@@ -1,22 +1,19 @@
 module.exports = {
-  presets: [
+  addons: [
+    '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-docs/preset',
       options: {
         configureJSX: true,
       },
     },
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-events',
+    '@storybook/addon-knobs',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
+    '@storybook/addon-jest',
   ],
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-events/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-jest/register',
-  ],
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
diff --git a/examples/cra-kitchen-sink/.storybook/preview.js b/examples/cra-kitchen-sink/.storybook/preview.js
index 6f9c8caefc7f..50a6b6acc28e 100644
--- a/examples/cra-kitchen-sink/.storybook/preview.js
+++ b/examples/cra-kitchen-sink/.storybook/preview.js
@@ -1,7 +1,5 @@
 import { addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
 
-addDecorator(withA11y);
 addParameters({
   options: {
     storySort: (a, b) =>
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 3d7fb4a718a7..ffb931ace815 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -18,23 +18,24 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-events": "5.3.0-rc.0",
-    "@storybook/addon-info": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-events": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "react-scripts": "^3.0.1"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "tg55gajmdt"
+    }
   }
 }
diff --git a/examples/cra-kitchen-sink/src/components/LifecycleLogger.js b/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
index 2cc8ad040860..a98a6585ab9a 100644
--- a/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
+++ b/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
@@ -19,7 +19,9 @@ class LifecycleLogger extends Component {
     log('componentDidMount');
   }
 
+  // deepscan-disable-next-line
   getSnapshotBeforeUpdate() {
+    // deepscan-disable-next-line
     log('getSnapshotBeforeUpdate');
   }
 
diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
index 2f773b4b223a..5902417523b9 100644
--- a/examples/cra-kitchen-sink/src/stories/App.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -6,10 +6,11 @@ import App from '../App';
 
 export default {
   title: 'App',
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export const FullApp = () => <App />;
 
-FullApp.story = {
-  name: 'full app',
-};
+FullApp.storyName = 'full app';
diff --git a/examples/cra-kitchen-sink/src/stories/button.stories.js b/examples/cra-kitchen-sink/src/stories/button.stories.js
index 4a6563d040f4..f1e3145ef495 100644
--- a/examples/cra-kitchen-sink/src/stories/button.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/button.stories.js
@@ -1,39 +1,17 @@
-/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-import Container from '../components/Container';
-
-const InfoButton = () => (
-  <span
-    style={{
-      fontFamily: 'sans-serif',
-      fontSize: 12,
-      textDecoration: 'none',
-      background: '#027ac5',
-      color: '#fff',
-      padding: '5px 15px',
-      margin: 10,
-      borderRadius: '0px 0px 0px 5px',
-    }}
-  >
-    &nbsp;Show Info&nbsp;
-  </span>
-);
-
 export default {
   title: 'Button',
   component: Button,
 };
 
 export const Story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
-Story1.story = {
-  name: 'with text',
-  parameters: {
-    options: { selectedPanel: 'storybook/actions/panel' },
-  },
+Story1.storyName = 'with text';
+
+Story1.parameters = {
+  options: { selectedPanel: 'storybook/actions/panel' },
 };
 
 export const Story2 = () => (
@@ -43,38 +21,8 @@ export const Story2 = () => (
     </span>
   </Button>
 );
-Story2.story = {
-  name: 'with some emoji',
-  parameters: {
-    options: { selectedPanel: 'storybook/actions/panel' },
-  },
-};
+Story2.storyName = 'with some emoji';
 
-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' },
-  },
-};
-
-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.'
-    ),
-  ],
+Story2.parameters = {
+  options: { selectedPanel: 'storybook/actions/panel' },
 };
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 24b6f340196d..8e0e22e94b2f 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
@@ -19,5 +19,4 @@ export const Story1 = () => {
 
   return <Component>Hello Button</Component>;
 };
-
-Story1.story = { name: 'Dynamic import' };
+Story1.storyName = 'Dynamic import';
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 2fc4ffe73949..d456dfd38100 100644
--- a/examples/cra-kitchen-sink/src/stories/long-description.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import centered from '@storybook/addon-centered/react';
 import { Button } from '@storybook/react/demo';
 
 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' };
+Story1.storyName = 'with text';
diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js
index a1c77ad67997..46cf3a05227d 100644
--- a/examples/cra-react15/.storybook/main.js
+++ b/examples/cra-react15/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
 };
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index d6752374a8df..b9939e1a486d 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-react15",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -11,19 +11,24 @@
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.1.0",
     "global": "^4.3.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-scripts": "3.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "babel-core": "6",
     "babel-runtime": "6"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "gxk7iqej3wt"
+    }
   }
 }
diff --git a/examples/cra-react15/src/stories/button.stories.js b/examples/cra-react15/src/stories/button.stories.js
index 1b35a0e35f1f..49cb4cabd47e 100644
--- a/examples/cra-react15/src/stories/button.stories.js
+++ b/examples/cra-react15/src/stories/button.stories.js
@@ -10,7 +10,7 @@ export default {
 };
 
 export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-Story1.story = { name: 'with text' };
+Story1.storyName = 'with text';
 
 export const Story2 = () => (
   <Button onClick={action('clicked')}>
@@ -19,4 +19,4 @@ export const Story2 = () => (
     </span>
   </Button>
 );
-Story2.story = { name: 'with some emoji' };
+Story2.storyName = 'with some emoji';
diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.js
index 1fe1cb3ce2d8..9ec4897ee490 100644
--- a/examples/cra-ts-essentials/.storybook/main.js
+++ b/examples/cra-ts-essentials/.storybook/main.js
@@ -1,6 +1,6 @@
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
-  presets: [
+  addons: [
     '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-essentials',
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index c2fa27c44ce0..71e332c7fdc7 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-essentials",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -22,23 +22,26 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "dependencies": {
-    "@types/jest": "24.0.22",
-    "@types/node": "12.12.6",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.4",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-scripts": "3.2.0",
-    "typescript": "3.7.2"
+    "@types/jest": "25.2.1",
+    "@types/node": "14.0.10",
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "16.9.7",
+    "global": "^4.3.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-scripts": "3.4.1",
+    "typescript": "3.8.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/preset-create-react-app": "^1.5.0",
-    "@storybook/react": "5.3.0-rc.0"
+    "@storybook/addon-essentials": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/preset-create-react-app": "^3.0.0",
+    "@storybook/react": "6.0.0-beta.21"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "b311ypk6of"
+    }
   }
 }
diff --git a/examples/cra-ts-essentials/src/App.test.tsx b/examples/cra-ts-essentials/src/App.test.tsx
index a754b201bf9c..85b51b430b56 100644
--- a/examples/cra-ts-essentials/src/App.test.tsx
+++ b/examples/cra-ts-essentials/src/App.test.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable jest/expect-expect */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
diff --git a/examples/cra-ts-essentials/src/App.tsx b/examples/cra-ts-essentials/src/App.tsx
index 226ee6316af7..c512fb7a7790 100644
--- a/examples/cra-ts-essentials/src/App.tsx
+++ b/examples/cra-ts-essentials/src/App.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-const App: React.FC = () => {
+const App: FunctionComponent<{}> = () => {
   return (
     <div className="App">
       <header className="App-header">
@@ -21,6 +21,6 @@ const App: React.FC = () => {
       </header>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/examples/cra-ts-essentials/src/index.tsx b/examples/cra-ts-essentials/src/index.tsx
index 87d1be551891..4b040d0809d0 100644
--- a/examples/cra-ts-essentials/src/index.tsx
+++ b/examples/cra-ts-essentials/src/index.tsx
@@ -1,3 +1,5 @@
+/* global document */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
diff --git a/examples/cra-ts-essentials/src/serviceWorker.ts b/examples/cra-ts-essentials/src/serviceWorker.ts
index 15d90cb81a1d..9a5c5abb94e4 100644
--- a/examples/cra-ts-essentials/src/serviceWorker.ts
+++ b/examples/cra-ts-essentials/src/serviceWorker.ts
@@ -1,3 +1,5 @@
+/* global window, fetch, navigator */
+
 // This optional code is used to register a service worker.
 // register() is not called by default.
 
@@ -15,15 +17,13 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
-type Config = {
+interface Config {
   onSuccess?: (registration: ServiceWorkerRegistration) => void;
   onUpdate?: (registration: ServiceWorkerRegistration) => void;
-};
+}
 
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
@@ -63,9 +63,10 @@ export function register(config?: Config) {
 }
 
 function registerValidSW(swUrl: string, config?: Config) {
-  navigator.serviceWorker
+  (navigator as Navigator).serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
+      // eslint-disable-next-line no-param-reassign
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -101,7 +102,7 @@ function registerValidSW(swUrl: string, config?: Config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -109,7 +110,7 @@ function registerValidSW(swUrl: string, config?: Config) {
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
@@ -117,7 +118,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -128,15 +129,13 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
index fa267f24c316..29a1920ce69d 100644
--- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
@@ -9,6 +9,4 @@ export default {
 
 export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
-  name: 'to Storybook',
-};
+toStorybook.storyName = 'to Storybook';
diff --git a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
index bf3304c3f2ea..5f571ac933f2 100644
--- a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
@@ -8,6 +8,7 @@ export default {
   component: Button,
 };
 
+// eslint-disable-next-line no-underscore-dangle
 export const _text = () => (
   <Button onClick={action('clicked')}>{text('label', 'testing knobs')}</Button>
 );
diff --git a/examples/cra-ts-essentials/tsconfig.json b/examples/cra-ts-essentials/tsconfig.json
index f2850b71613e..22372a535100 100644
--- a/examples/cra-ts-essentials/tsconfig.json
+++ b/examples/cra-ts-essentials/tsconfig.json
@@ -1,23 +1,19 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "baseUrl": ".",
+    "incremental": false,
+    "noImplicitAny": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "skipDefaultLibCheck": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
+    "esModuleInterop": true,
+    "target": "es5",
+    "types": ["jest", "node"],
+    "lib": ["es2017", "dom"]
   },
   "include": [
     "src"
diff --git a/examples/cra-ts-kitchen-sink/.storybook/addons.ts b/examples/cra-ts-kitchen-sink/.storybook/addons.ts
deleted file mode 100644
index 39ffabfe9dd3..000000000000
--- a/examples/cra-ts-kitchen-sink/.storybook/addons.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-a11y/register';
diff --git a/examples/cra-ts-kitchen-sink/.storybook/config.ts b/examples/cra-ts-kitchen-sink/.storybook/config.ts
deleted file mode 100644
index 86334f4d6d63..000000000000
--- a/examples/cra-ts-kitchen-sink/.storybook/config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
-import { withKnobs } from '@storybook/addon-knobs';
-
-addDecorator(withKnobs);
-addDecorator(withA11y);
-addParameters({
-  options: {
-    brandTitle: 'CRA TypeScript Kitchen Sink',
-    brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-ts-kitchen-sink',
-    showRoots: true,
-  },
-});
-
-// automatically import all files ending in *.stories.(tsx|jsx)
-configure(require.context('../src/stories', true, /\.stories\.(mdx|[tj]sx?)$/), module);
diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
new file mode 100644
index 000000000000..85caabde7e08
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -0,0 +1,29 @@
+// @ts-ignore
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(mdx|tsx|ts|jsx|js)'],
+  addons: [
+    {
+      name: '@storybook/preset-create-react-app',
+      options: {
+        tsDocgenLoaderOptions: {
+          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+          shouldExtractLiteralValuesFromEnum: true,
+          propFilter: (prop: any) => {
+            // Currently not working, prop.parent is always null.
+            if (prop.parent) {
+              return !prop.parent.fileName.includes('node_modules/@types/react/');
+            }
+
+            return true;
+          },
+        },
+      },
+    },
+    '@storybook/addon-docs',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+  ],
+};
diff --git a/examples/cra-ts-kitchen-sink/.storybook/presets.js b/examples/cra-ts-kitchen-sink/.storybook/presets.js
deleted file mode 100644
index 5fc756b2eb3a..000000000000
--- a/examples/cra-ts-kitchen-sink/.storybook/presets.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const path = require('path');
-
-module.exports = [
-  {
-    name: '@storybook/preset-create-react-app',
-    options: {
-      tsDocgenLoaderOptions: {
-        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
-        shouldExtractLiteralValuesFromEnum: true,
-        propFilter: prop => {
-          // Currently not working, prop.parent is always null.
-          if (prop.parent) {
-            return !prop.parent.fileName.includes('node_modules/@types/react/');
-          }
-
-          return true;
-        },
-      },
-    },
-  },
-  '@storybook/addon-docs/preset',
-];
diff --git a/examples/cra-ts-kitchen-sink/.storybook/preview.ts b/examples/cra-ts-kitchen-sink/.storybook/preview.ts
new file mode 100644
index 000000000000..4ae2fd71cc3e
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/.storybook/preview.ts
@@ -0,0 +1,11 @@
+import { addParameters, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+addDecorator(withKnobs);
+addParameters({
+  options: {
+    brandTitle: 'CRA TypeScript Kitchen Sink',
+    brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-ts-kitchen-sink',
+    showRoots: true,
+  },
+});
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 48cf81e4efbd..7531474a8cd5 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -23,38 +23,37 @@
     ]
   },
   "dependencies": {
-    "@types/jest": "24.0.23",
-    "@types/node": "12.12.11",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.4",
+    "@types/jest": "25.2.1",
+    "@types/node": "14.0.10",
+    "@types/react": "16.9.34",
+    "@types/react-dom": "16.9.7",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0",
-    "typescript": "3.7.2"
+    "react-scripts": "3.4.1",
+    "typescript": "3.8.3"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-info": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/preset-create-react-app": "^1.5.0",
-    "@storybook/react": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/preset-create-react-app": "^3.0.0",
+    "@storybook/react": "6.0.0-beta.21",
     "@types/enzyme": "^3.9.0",
-    "@types/react": "^16.8.14",
-    "@types/react-dom": "^16.8.2",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.4.1",
-    "fork-ts-checker-webpack-plugin": "^3.0.1",
-    "react-docgen-typescript-loader": "^3.3.0",
+    "fork-ts-checker-webpack-plugin": "^4.0.3",
+    "react-docgen-typescript-loader": "^3.7.2",
     "react-moment-proptypes": "^1.7.0",
-    "react-scripts": "^3.0.1",
-    "tslint": "^5.14.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "typescript": "^3.4.0"
+    "ts-node": "~8.9.1"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "19whyj1tlac"
+    }
   }
 }
diff --git a/examples/cra-ts-kitchen-sink/src/App.tsx b/examples/cra-ts-kitchen-sink/src/App.tsx
index a4701d3cf167..a8520a8cceec 100644
--- a/examples/cra-ts-kitchen-sink/src/App.tsx
+++ b/examples/cra-ts-kitchen-sink/src/App.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-const App: React.FC = () => {
+const App: FunctionComponent = () => {
   return (
     <div className="App">
       <header className="App-header">
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
index d058304c95f1..3db6e175ad94 100644
--- a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
+++ b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { radios } from '@storybook/addon-knobs';
 import Button, { Type } from './Button';
@@ -8,9 +8,7 @@ export default {
   component: Button,
 };
 
-type Story = () => any;
-
-export const SimpleButton: Story = () => {
+export const SimpleButton = () => {
   const x = 0;
   return <Button onClick={action('button clicked')}>OK {x}</Button>;
 };
diff --git a/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
index c76f45f3b4be..9920a416e1ff 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
@@ -9,6 +9,4 @@ export default {
 
 export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-ToStorybook.story = {
-  name: 'to Storybook',
-};
+ToStorybook.storyName = 'to Storybook';
diff --git a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
index 233755a6a68f..7673a0a118a4 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
@@ -1,17 +1,32 @@
-import React, { FC } from 'react';
+import React, { FunctionComponent } from 'react';
 
 interface ButtonProps {
   /**
    * Simple click handler
    */
   onClick?: () => void;
+
+  /**
+   * Is primary?
+   */
+  primary?: boolean;
+
+  /**
+   * default is false
+   */
+  secondary?: boolean;
 }
 
 /**
  * The world's most _basic_ button
  */
-export const Button: FC<ButtonProps> = ({ children, onClick }) => (
+export const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => (
   <button onClick={onClick} type="button">
     {children}
   </button>
 );
+
+Button.defaultProps = {
+  primary: true,
+  secondary: false,
+};
diff --git a/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
new file mode 100644
index 000000000000..80039504ba9b
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Classes Stripped" />
+
+# Preview
+
+<style>
+  {`
+    .a-custom-class {
+      border: 10px solid hotpink;
+    }
+    .a-custom-classname {
+      border: 10px solid blue;
+    }
+  `}
+</style>
+
+<div class="a-custom-class">
+  <div className="a-custom-classname">
+    This box should have BOTH a pink and blue border
+  </div>
+</div>
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
index 7c1c7e1a81bd..ea5f10f0f108 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx
@@ -14,8 +14,8 @@ interface ButtonProps {
 export const ButtonReactFC: React.FC<ButtonProps> = ({ onClick, children }) => (
   <button onClick={onClick}>{children}</button>
 );
-// @ts-ignore
 ButtonReactFC.defaultProps = {
+  // @ts-ignore
   onClick: null,
 };
 
@@ -25,8 +25,8 @@ ButtonReactFC.defaultProps = {
 export const ButtonFC: FC<ButtonProps> = ({ onClick, children }) => (
   <button onClick={onClick}>{children}</button>
 );
-// @ts-ignore
 ButtonFC.defaultProps = {
+  // @ts-ignore
   onClick: null,
 };
 
@@ -36,7 +36,7 @@ ButtonFC.defaultProps = {
 export const ButtonFunctionComponent: FunctionComponent<ButtonProps> = ({ onClick, children }) => (
   <button onClick={onClick}>{children}</button>
 );
-// @ts-ignore
 ButtonFunctionComponent.defaultProps = {
+  // @ts-ignore
   onClick: null,
 };
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx
index ca1193f17044..490c6b26fcd6 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx
@@ -46,7 +46,9 @@ type StringAlias = string;
 type NumberAlias = number;
 type AliasesIntersection = StringAlias & NumberAlias;
 type AliasesUnion = StringAlias | NumberAlias;
-type GenericAlias<T> = { value: T };
+interface GenericAlias<T> {
+  value: T;
+}
 
 interface TypeScriptPropsProps {
   any: any;
@@ -128,5 +130,6 @@ interface TypeScriptHtmlComponentProps {
   text: string;
 }
 
-export const TypeScriptHtmlComponent: FC<React.HTMLAttributes<HTMLDivElement> &
-  TypeScriptHtmlComponentProps> = () => <div>My HTML component</div>;
+export const TypeScriptHtmlComponent: FC<
+  React.HTMLAttributes<HTMLDivElement> & TypeScriptHtmlComponentProps
+> = () => <div>My HTML component</div>;
diff --git a/examples/cra-ts-kitchen-sink/tsconfig.json b/examples/cra-ts-kitchen-sink/tsconfig.json
index f2850b71613e..22372a535100 100644
--- a/examples/cra-ts-kitchen-sink/tsconfig.json
+++ b/examples/cra-ts-kitchen-sink/tsconfig.json
@@ -1,23 +1,19 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "baseUrl": ".",
+    "incremental": false,
+    "noImplicitAny": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "skipDefaultLibCheck": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
+    "esModuleInterop": true,
+    "target": "es5",
+    "types": ["jest", "node"],
+    "lib": ["es2017", "dom"]
   },
   "include": [
     "src"
diff --git a/examples/cra-ts-kitchen-sink/tslint.json b/examples/cra-ts-kitchen-sink/tslint.json
deleted file mode 100644
index 427b7289ba55..000000000000
--- a/examples/cra-ts-kitchen-sink/tslint.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "tslint-config-airbnb",
-  "rules": {
-    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
-  }
-}
\ No newline at end of file
diff --git a/examples/dev-kits/logo.svg b/examples/dev-kits/logo.svg
new file mode 100644
index 000000000000..93030fe56a2f
--- /dev/null
+++ b/examples/dev-kits/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="132.948" height="37.739"><path fill="#fff" d="M31.314 14.575c.36 0 .48.13.48.48v7.92h4.07c.35 0 .48.13.48.48v.7c0 .35-.13.48-.48.48h-5.36c-.35 0-.49-.13-.49-.48v-9.1c0-.35.14-.48.49-.48zM39.894 18.065c0-2.31 1.46-3.7 4-3.7s4 1.39 4 3.7v3.08c0 2.31-1.47 3.7-4 3.7s-4-1.39-4-3.7zm6.32 0c0-1.3-.81-2-2.27-2s-2.26.71-2.26 2v3.1c0 1.31.8 2 2.26 2s2.27-.72 2.27-2zM59.804 19.125c.39 0 .48.13.48.48v1.9a3 3 0 01-1.06 2.36 4.36 4.36 0 01-3 .94c-2.59 0-4-1.39-4-3.7v-3.1c0-2.28 1.46-3.68 4-3.68 2 0 3.3.79 3.85 2.37a.43.43 0 01-.3.62l-.78.27c-.34.12-.48.05-.6-.3a2.06 2.06 0 00-2.17-1.3c-1.47 0-2.27.71-2.27 2v3.18c0 1.31.81 2 2.27 2s2.36-.67 2.36-1.65v-.74h-2.17c-.36 0-.49-.14-.49-.49v-.68c0-.35.13-.48.49-.48zM64.414 18.065c0-2.31 1.46-3.7 4-3.7s4 1.39 4 3.7v3.08c0 2.31-1.47 3.7-4 3.7s-4-1.39-4-3.7zm6.31 0c0-1.3-.81-2-2.26-2s-2.27.71-2.27 2v3.1c0 1.31.81 2 2.27 2s2.26-.72 2.26-2zM77.124 14.865c0-.22.07-.29.29-.29h.46c.22 0 .27.07.27.29v9.48c0 .22 0 .29-.27.29h-.46c-.22 0-.29-.07-.29-.29zM87.254 14.575a3.14 3.14 0 110 6.28h-3v3.49c0 .22-.05.29-.26.29h-.47c-.21 0-.29-.07-.29-.29v-9.48c0-.22.08-.29.29-.29zm-.09 5.29a2.18 2.18 0 100-4.36h-3v4.36zM98.204 14.375a3.61 3.61 0 013.72 2.18c.08.16 0 .29-.16.37l-.44.2c-.18.07-.25.06-.36-.13a2.72 2.72 0 00-2.76-1.64c-1.69 0-2.61.67-2.61 1.87a1.52 1.52 0 001.27 1.54 6.79 6.79 0 001.66.32 6.88 6.88 0 012 .41 2.25 2.25 0 011.56 2.37c0 1.87-1.36 3-3.86 3a3.61 3.61 0 01-3.83-2.43.27.27 0 01.17-.38l.44-.16a.27.27 0 01.36.17 2.86 2.86 0 002.86 1.8c1.89 0 2.82-.66 2.82-2a1.49 1.49 0 00-1.17-1.53 7 7 0 00-1.59-.28l-1.08-.14a9.5 9.5 0 01-1-.27 2.63 2.63 0 01-.89-.47 2.44 2.44 0 01-.8-1.91c.07-1.75 1.38-2.89 3.69-2.89zM107.474 21.215a2.78 2.78 0 005.55 0v-6.35c0-.22.07-.29.29-.29h.46c.22 0 .29.07.29.29v6.34c0 2.27-1.34 3.64-3.81 3.64s-3.81-1.37-3.81-3.64v-6.34c0-.22.07-.29.28-.29h.47c.21 0 .28.07.28.29zM127.864 14.575c.22 0 .29.07.29.29v9.48c0 .22-.07.29-.29.29h-.42c-.21 0-.28-.07-.28-.29v-5.77a18.55 18.55 0 01.17-2.51h-.06a18 18 0 01-1.09 2.21l-2.15 3.79a.35.35 0 01-.33.22h-.28a.37.37 0 01-.34-.22l-2.18-3.83a16.07 16.07 0 01-1-2.18h-.06a21.76 21.76 0 01.16 2.53v5.76c0 .22-.07.29-.29.29h-.39c-.22 0-.29-.07-.29-.29v-9.48c0-.22.07-.29.29-.29h.36a.4.4 0 01.4.23l3.5 6.22 3.48-6.16c.11-.21.17-.24.39-.24zM13.524 22.415v7.23a1 1 0 01-2.09 0v-7.22a1.77 1.77 0 001 .34 1.72 1.72 0 001.09-.35zm8.9-2.09a1 1 0 00-1 1v1.26a1 1 0 102.09 0v-1.21a1 1 0 00-1.09-1.05zm-13.26 4.83a1.8 1.8 0 01-1-.34v7.25a1.05 1.05 0 002.1 0v-7.2a1.83 1.83 0 01-1.1.29zm10-7a1 1 0 00-1.05 1v5.57a1.05 1.05 0 102.1 0v-5.5a1 1 0 00-1.1-1.05zm-3.32 2.14a1.83 1.83 0 01-1.05-.34v7.27a1.05 1.05 0 102.1 0v-7.26a1.77 1.77 0 01-1.1.35zm-8.95 5.57V5.555a.94.94 0 00-.94-.93h-.22a.94.94 0 00-.94.93v20.31a.94.94 0 00.94.94h.22a.94.94 0 00.94-.94zm2.38-1.48h-.22a.94.94 0 01-.94-.94V7.975a.94.94 0 01.94-.93h.22a.94.94 0 01.94.93v15.49a.94.94 0 01-.94.94zm3.31-2.38h-.23a.93.93 0 01-.93-.93v-10.7a.93.93 0 01.93-.94h.23a.94.94 0 01.93.94v10.7a.93.93 0 01-.93.93zm3.31-2.45h-.21a.94.94 0 01-.94-.93v-5.76a.94.94 0 01.94-1h.22a.94.94 0 01.94.94v5.8a.94.94 0 01-.94.95zm3.32-2.15h-.22a.94.94 0 01-.94-.94v-1.49a.94.94 0 01.94-.93h.22a.94.94 0 01.94.93v1.49a.94.94 0 01-.93.94z"/></svg>
\ No newline at end of file
diff --git a/examples/dev-kits/main.js b/examples/dev-kits/main.js
index c0b7859f927a..98d0a7ab2d14 100644
--- a/examples/dev-kits/main.js
+++ b/examples/dev-kits/main.js
@@ -1,6 +1,14 @@
 module.exports = {
   stories: ['./stories/*.*'],
-  webpack: async (config, { configType }) => ({
+  refs: {
+    ember: {
+      id: 'ember',
+      title: 'Ember',
+      url: 'https://next--storybookjs.netlify.app/ember-cli',
+    },
+    cra: 'https://next--storybookjs.netlify.app/cra-ts-kitchen-sink',
+  },
+  webpack: async (config) => ({
     ...config,
     module: {
       ...config.module,
@@ -20,4 +28,20 @@ module.exports = {
       extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
     },
   }),
+  managerWebpack: async (config) => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /manager\.js$/,
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [['react-app', { flow: false, typescript: true }]],
+          },
+        },
+      ],
+    },
+  }),
 };
diff --git a/examples/dev-kits/manager.js b/examples/dev-kits/manager.js
index 15fdfd4baa6d..773038a551a0 100644
--- a/examples/dev-kits/manager.js
+++ b/examples/dev-kits/manager.js
@@ -1,13 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PropTypes } from 'prop-types';
 import { Button } from '@storybook/react/demo';
 import { addons } from '@storybook/addons';
-import { useAddonState } from '@storybook/api';
+import { useAddonState, useGlobalArgs } from '@storybook/api';
 import { themes } from '@storybook/theming';
 import { AddonPanel } from '@storybook/components';
 
+import logo from './logo.svg';
+
 addons.setConfig({
-  theme: themes.dark,
+  theme: {
+    brandImage: logo,
+    brandTitle: 'Custom - Storybook',
+    ...themes.dark,
+    appContentBg: 'white',
+  },
   panelPosition: 'bottom',
   selectedPanel: 'storybook/roundtrip',
 });
@@ -44,3 +51,40 @@ addons.addPanel('useAddonState', {
   title: 'useAddonState',
   render: StatePanel,
 });
+
+const GlobalArgsPanel = ({ active, key }) => {
+  const [globalArgs, updateGlobalArgs] = useGlobalArgs();
+  const [globalArgsInput, updateGlobalArgsInput] = useState(JSON.stringify(globalArgs));
+  return (
+    <AddonPanel key={key} active={active}>
+      <div>
+        <h2>Global Args</h2>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            updateGlobalArgs(JSON.parse(globalArgsInput));
+          }}
+        >
+          <textarea
+            value={globalArgsInput}
+            onChange={(e) => updateGlobalArgsInput(e.target.value)}
+          />
+          <br />
+          <button type="submit">Change</button>
+        </form>
+      </div>
+    </AddonPanel>
+  );
+};
+
+GlobalArgsPanel.propTypes = {
+  active: PropTypes.bool.isRequired,
+  key: PropTypes.string.isRequired,
+};
+
+addons.addPanel('useGlobalArgs', {
+  id: 'useGlobalArgs',
+  title: 'useGlobalArgs',
+  render: GlobalArgsPanel,
+});
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index c2432007b911..b39d3d4bc798 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-devkits",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,34 +8,39 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll"
   },
   "devDependencies": {
-    "@storybook/addon-decorator": "5.3.0-rc.0",
-    "@storybook/addon-parameter": "5.3.0-rc.0",
-    "@storybook/addon-preview-wrapper": "5.3.0-rc.0",
-    "@storybook/addon-roundtrip": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/node-logger": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addon-decorator": "6.0.0-beta.21",
+    "@storybook/addon-parameter": "6.0.0-beta.21",
+    "@storybook/addon-preview-wrapper": "6.0.0-beta.21",
+    "@storybook/addon-roundtrip": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "cors": "^2.8.5",
-    "cross-env": "^6.0.3",
+    "cross-env": "^7.0.0",
     "enzyme-to-json": "^3.4.1",
     "eventemitter3": "^4.0.0",
     "express": "^4.16.4",
     "express-graphql": "^0.9.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
-    "graphql": "^14.1.1",
+    "graphql": "^15.0.0",
     "jest-emotion": "^10.0.17",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "ts-loader": "^6.2.0",
-    "uuid": "^3.3.2",
+    "uuid": "^8.0.0",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "19whyj1tlac"
+    }
   }
 }
diff --git a/examples/dev-kits/stories/addon-useglobalargs.js b/examples/dev-kits/stories/addon-useglobalargs.js
new file mode 100644
index 000000000000..b9cbed9e3af2
--- /dev/null
+++ b/examples/dev-kits/stories/addon-useglobalargs.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default {
+  title: 'addons/useGlobalArgs',
+};
+
+export const PassedToStory = ({ globalArgs }) => {
+  return (
+    <div>
+      <h3>Global args:</h3>
+      <pre>{JSON.stringify(globalArgs)}</pre>
+    </div>
+  );
+};
+
+PassedToStory.propTypes = {
+  globalArgs: PropTypes.shape({}).isRequired,
+};
+
+export const SecondStory = ({ globalArgs }) => {
+  return (
+    <div>
+      <h3>Global args (2):</h3>
+      <pre>{JSON.stringify(globalArgs)}</pre>
+    </div>
+  );
+};
+
+SecondStory.propTypes = {
+  globalArgs: PropTypes.shape({}).isRequired,
+};
diff --git a/examples/ember-cli/.eslintrc.js b/examples/ember-cli/.eslintrc.js
index 06c6cb67bdec..45b9d104adb4 100644
--- a/examples/ember-cli/.eslintrc.js
+++ b/examples/ember-cli/.eslintrc.js
@@ -8,7 +8,6 @@ module.exports = {
       '@ember/routing/router',
       '@ember/application',
       './config/environment',
-      'htmlbars-inline-precompile',
     ],
   },
 };
diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js
index c8d73dff464a..ce652919c51c 100644
--- a/examples/ember-cli/.storybook/main.js
+++ b/examples/ember-cli/.storybook/main.js
@@ -2,19 +2,17 @@ const path = require('path');
 
 module.exports = {
   addons: [
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-docs/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-backgrounds/register',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds',
   ],
   stories: ['../stories/**/*.stories.js'],
-  webpack: async config => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/, /index\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/ember-cli/.storybook/preset.js b/examples/ember-cli/.storybook/preset.js
deleted file mode 100644
index a04174c7a331..000000000000
--- a/examples/ember-cli/.storybook/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = ['@storybook/addon-docs/preset'];
diff --git a/examples/ember-cli/.storybook/preview.js b/examples/ember-cli/.storybook/preview.js
index d8969edd461b..415ec2c8da01 100644
--- a/examples/ember-cli/.storybook/preview.js
+++ b/examples/ember-cli/.storybook/preview.js
@@ -1,11 +1,9 @@
-import { addParameters, addDecorator } from '@storybook/ember';
+import { addParameters } from '@storybook/ember';
 import { setJSONDoc } from '@storybook/addon-docs/ember';
-import { withA11y } from '@storybook/addon-a11y';
 // eslint-disable-next-line import/no-unresolved
-import docJson from '../dist/storybook-docgen/index.json';
+import docJson from '../ember-output/storybook-docgen/index.json';
 
 setJSONDoc(docJson);
-addDecorator(withA11y);
 addParameters({
   options: {
     showRoots: true,
diff --git a/examples/ember-cli/config/optional-features.json b/examples/ember-cli/config/optional-features.json
new file mode 100644
index 000000000000..dd50c7cd3a3d
--- /dev/null
+++ b/examples/ember-cli/config/optional-features.json
@@ -0,0 +1,5 @@
+{
+  "application-template-wrapper": false,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
+}
\ No newline at end of file
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 3188a31bd49d..8ec7f69a8f56 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,56 +1,58 @@
 {
   "name": "ember-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
-    "build": "ember build",
-    "prebuild-storybook": "yarn build && shx cp -r public/* dist",
-    "build-storybook": "build-storybook -s dist",
+    "build": "ember build --output-path ember-output",
+    "prebuild-storybook": "yarn build && shx cp -r public/* ember-output",
+    "build-storybook": "build-storybook -s ember-output",
     "dev": "ember serve",
-    "storybook": "yarn build && start-storybook -p 9009 -s dist",
-    "storybook:dev": "yarn dev & start-storybook -p 9009 -s dist"
+    "storybook": "yarn build && start-storybook -p 9009 -s ember-output",
+    "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
   },
   "dependencies": {
     "ember-template-compiler": "^1.9.0-alpha"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/ember": "5.3.0-rc.0",
-    "@storybook/ember-cli-storybook": "^0.2.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@babel/core": "^7.9.6",
+    "@ember/optional-features": "^1.3.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/ember": "6.0.0-beta.21",
+    "@storybook/ember-cli-storybook": "^0.2.1",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
-    "cross-env": "^6.0.3",
+    "cross-env": "^7.0.0",
     "ember-ajax": "^5.0.0",
-    "ember-cli": "~3.14.0",
-    "ember-cli-app-version": "^3.0.0",
-    "ember-cli-babel": "^7.6.0",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
+    "ember-cli": "~3.17.0",
+    "ember-cli-app-version": "^3.2.0",
+    "ember-cli-babel": "^7.13.2",
+    "ember-cli-htmlbars": "^4.2.2",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-load-initializers": "^2.0.0",
-    "ember-resolver": "^5.1.3",
-    "ember-source": "~3.15.0",
+    "ember-resolver": "^7.0.0",
+    "ember-source": "~3.19.0",
     "loader.js": "^4.2.3",
-    "webpack": "^4.33.0",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.0"
   },
   "engines": {
     "node": "^4.5 || 6.* || >= 7.*"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "19z23qxndju"
+    }
   }
 }
diff --git a/examples/ember-cli/stories/addon-a11y.stories.js b/examples/ember-cli/stories/addon-a11y.stories.js
index 4958bd0157f0..5ef46b92224b 100644
--- a/examples/ember-cli/stories/addon-a11y.stories.js
+++ b/examples/ember-cli/stories/addon-a11y.stories.js
@@ -1,9 +1,7 @@
-import hbs from 'htmlbars-inline-precompile';
-import { checkA11y } from '@storybook/addon-a11y';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/a11y',
-  decorators: [checkA11y],
 
   parameters: {
     options: { selectedPanel: '@storybook/a11y/panel' },
@@ -17,6 +15,4 @@ export const Disabled = () => hbs`<button disabled>Testing the a11y addon</butto
 export const InvalidContrast = () =>
   hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
 
-InvalidContrast.story = {
-  name: 'Invalid contrast',
-};
+InvalidContrast.storyName = 'Invalid contrast';
diff --git a/examples/ember-cli/stories/addon-actions.stories.js b/examples/ember-cli/stories/addon-actions.stories.js
index 60b66a0377dc..4151467114ab 100644
--- a/examples/ember-cli/stories/addon-actions.stories.js
+++ b/examples/ember-cli/stories/addon-actions.stories.js
@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
diff --git a/examples/ember-cli/stories/addon-backgrounds.stories.js b/examples/ember-cli/stories/addon-backgrounds.stories.js
index 7f17ebeea6c5..70ea6f30c4ca 100644
--- a/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/examples/ember-cli/stories/addon-backgrounds.stories.js
@@ -1,13 +1,16 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/Backgrounds',
 
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
@@ -15,14 +18,10 @@ export const Story1 = () => ({
   template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
 });
 
-Story1.story = {
-  name: 'story 1',
-};
+Story1.storyName = 'story 1';
 
 export const Story2 = () => ({
   template: hbs`<button>This one too!</button>`,
 });
 
-Story2.story = {
-  name: 'story 2',
-};
+Story2.storyName = 'story 2';
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
deleted file mode 100644
index 2382a0b83b87..000000000000
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import hbs from 'htmlbars-inline-precompile';
-import Centered from '@storybook/addon-centered/ember';
-
-export default {
-  title: 'Addon/Centered',
-  decorators: [Centered],
-
-  parameters: {
-    component: Centered,
-  },
-};
-
-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 a379a495814b..29c9e12b595c 100644
--- a/examples/ember-cli/stories/addon-knobs.stories.js
+++ b/examples/ember-cli/stories/addon-knobs.stories.js
@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
@@ -34,6 +34,4 @@ export const WithText = () => ({
   },
 });
 
-WithText.story = {
-  name: 'with text',
-};
+WithText.storyName = 'with text';
diff --git a/examples/ember-cli/stories/addon-links.stories.js b/examples/ember-cli/stories/addon-links.stories.js
index 539a821fe43b..11c4ca811a08 100644
--- a/examples/ember-cli/stories/addon-links.stories.js
+++ b/examples/ember-cli/stories/addon-links.stories.js
@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { linkTo } from '@storybook/addon-links';
 
 export default {
@@ -12,6 +12,4 @@ export const GoToWelcome = () => ({
   },
 });
 
-GoToWelcome.story = {
-  name: 'Go to welcome',
-};
+GoToWelcome.storyName = 'Go to welcome';
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
deleted file mode 100644
index a2b963b58dac..000000000000
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import hbs from 'htmlbars-inline-precompile';
-
-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 8b3f32fce523..f2b461b43eac 100644
--- a/examples/ember-cli/stories/index.stories.js
+++ b/examples/ember-cli/stories/index.stories.js
@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Welcome',
diff --git a/examples/ember-cli/stories/welcome-banner.stories.js b/examples/ember-cli/stories/welcome-banner.stories.js
index 248ea7d96eea..eef06b1ae50f 100644
--- a/examples/ember-cli/stories/welcome-banner.stories.js
+++ b/examples/ember-cli/stories/welcome-banner.stories.js
@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js
index 4982b94cf401..e99834ee9ded 100644
--- a/examples/html-kitchen-sink/.storybook/main.js
+++ b/examples/html-kitchen-sink/.storybook/main.js
@@ -1,18 +1,16 @@
 module.exports = {
   // this dirname is because we run tests from project root
   stories: [`${__dirname}/../stories/*.stories.*`],
-  presets: ['@storybook/addon-docs/preset'],
   addons: [
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-events/register',
-    '@storybook/addon-jest/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-viewport/register',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-events',
+    '@storybook/addon-jest',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-viewport',
   ],
 };
diff --git a/examples/html-kitchen-sink/.storybook/preview.js b/examples/html-kitchen-sink/.storybook/preview.js
index 60851dbe04b4..2b94162159e1 100644
--- a/examples/html-kitchen-sink/.storybook/preview.js
+++ b/examples/html-kitchen-sink/.storybook/preview.js
@@ -1,7 +1,6 @@
-import { addParameters, addDecorator } from '@storybook/html';
-import { withA11y } from '@storybook/addon-a11y';
+import { addParameters } from '@storybook/html';
 
-addDecorator(withA11y);
+const SOURCE_REGEX = /^\(\) => [`'"](.*)['`"]$/;
 
 addParameters({
   a11y: {
@@ -16,5 +15,9 @@ addParameters({
   },
   docs: {
     iframeHeight: '200px',
+    transformSource: (src) => {
+      const match = SOURCE_REGEX.exec(src);
+      return match ? match[1] : src;
+    },
   },
 });
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index f8e7cca0bc47..e01c5bd4e966 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.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,29 +13,31 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-events": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/html": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-events": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/html": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "eventemitter3": "^4.0.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
-    "postcss-color-rebeccapurple": "^4.0.1"
+    "postcss-color-rebeccapurple": "^6.0.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "e8zolxoyg8o"
+    }
   }
 }
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
index 262e351ec8f1..803a63aafdce 100644
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons/Actions Decorated actions + config 1`] = `
+exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions + config 1`] = `
 <button
   type="button"
 >
@@ -8,7 +8,23 @@ exports[`Storyshots Addons/Actions Decorated actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons/Actions Decorated actions 1`] = `
+exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions, object 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons/Actions Deprecated decorators - Single action 1`] = `
 <button
   type="button"
 >
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 78639e13b3c3..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-docs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot
index ce994d4ab4db..63efe8baf032 100644
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addons/Docs custom source 1`] = `
+<h1>
+  Custom source
+</h1>
+`;
+
 exports[`Storyshots Addons/Docs function 1`] = `
 <button>
   Hello Button
@@ -11,3 +17,9 @@ exports[`Storyshots Addons/Docs heading 1`] = `
   Hello World
 </h1>
 `;
+
+exports[`Storyshots Addons/Docs transformed source 1`] = `
+<h1>
+  Some source
+</h1>
+`;
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 229ca7197d45..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__/source-loader.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot
new file mode 100644
index 000000000000..8ba05f3c3c96
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons/Source loader Button 1`] = `
+<button>
+  Hello world
+</button>
+`;
+
+exports[`Storyshots Addons/Source loader Very simple story 1`] = `
+<p>
+  
+      
+  <strong>
+    
+        This is a fragment of HTML
+      
+  </strong>
+  
+    
+</p>
+`;
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index a811c0cee73f..781ab23595a8 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,11 +1,9 @@
 import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
 
 const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons/a11y',
-  decorators: [withA11y],
   parameters: {
     options: { selectedPanel: 'storybook/a11y/panel' },
   },
@@ -16,7 +14,7 @@ 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' };
+Story4.storyName = 'Invalid contrast';
 
 export const Story5 = () => {
   const div = document.createElement('div');
@@ -25,4 +23,4 @@ export const Story5 = () => {
   }, 1000);
   return div;
 };
-Story5.story = { name: 'Delayed render' };
+Story5.storyName = '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 40ec7cb6eba0..1ed26062f388 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -1,45 +1,85 @@
-import { withActions, decorate } from '@storybook/addon-actions';
+import { withActions } from '@storybook/addon-actions';
 
-const pickTarget = decorate([args => [args[0].target]]);
-
-const button = () => `<button type="button">Hello World</button>`;
+const buttonStory = () => () => `<button type="button">Hello World</button>`;
 
 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 Story1 = buttonStory();
+Story1.storyName = 'Hello World';
+
+Story1.parameters = {
+  actions: {
+    handles: ['click'],
+  },
+};
+
+export const Story2 = buttonStory();
+Story2.storyName = 'Multiple actions';
+
+Story2.parameters = {
+  actions: {
+    handles: ['click', 'contextmenu'],
+  },
+};
+
+export const Story3 = buttonStory();
+Story3.storyName = 'Multiple actions + config';
 
-export const Story3 = () =>
-  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-Story3.story = { name: 'Multiple actions + config' };
+Story3.parameters = {
+  actions: {
+    handles: ['click', 'contextmenu', { clearOnStoryChange: false }],
+  },
+};
 
-export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
-Story4.story = { name: 'Multiple actions, object' };
+export const Story4 = buttonStory();
+Story4.storyName = 'Multiple actions, object';
+
+Story4.parameters = {
+  actions: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
+};
 
-export const Story5 = () =>
-  withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
-    () => `
+export const Story5 = () => `
         <div>
           Clicks on this button will be logged: <button class="btn" type="button">Button</button>
         </div>
-      `
-  );
-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' };
+      `;
+Story5.storyName = 'Multiple actions, selector';
+
+Story5.parameters = {
+  actions: {
+    handles: [{ 'click .btn': 'clicked', contextmenu: 'right clicked' }],
+  },
+};
+
+export const Story6 = buttonStory();
+Story6.storyName = 'Multiple actions, object + config';
+
+Story6.parameters = {
+  actions: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false }],
+  },
+};
+
+export const DeprecatedDecoratorsStory1 = buttonStory();
+DeprecatedDecoratorsStory1.storyName = 'Deprecated decorators - Single action';
+DeprecatedDecoratorsStory1.decorators = [withActions('click')];
+
+export const DeprecatedDecoratorsStory2 = buttonStory();
+DeprecatedDecoratorsStory2.storyName = 'Deprecated decorators - Multiple actions';
+DeprecatedDecoratorsStory2.decorators = [withActions('click', 'contextmenu')];
+
+export const DeprecatedDecoratorsStory3 = buttonStory();
+DeprecatedDecoratorsStory3.storyName = 'Deprecated decorators - Multiple actions + config';
+DeprecatedDecoratorsStory3.decorators = [
+  withActions('click', 'contextmenu', { clearOnStoryChange: false }),
+];
+
+export const DeprecatedDecoratorsStory4 = buttonStory();
+DeprecatedDecoratorsStory4.storyName = 'Deprecated decorators - Multiple actions, object';
+DeprecatedDecoratorsStory4.decorators = [
+  withActions({ click: 'clicked', contextmenu: 'right clicked' }),
+];
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index fdfdb6b9954b..91b21d9d6c16 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -1,16 +1,19 @@
 export default {
   title: 'Addons/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
 export const Story1 = () =>
   '<span style="color: white">You should be able to switch backgrounds for this story</span>';
-Story1.story = { name: 'story 1' };
+Story1.storyName = 'story 1';
 
 export const Story2 = () => '<span style="color: white">This one too!</span>';
-Story2.story = { name: 'story 2' };
+Story2.storyName = 'story 2';
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
deleted file mode 100644
index 611afd934335..000000000000
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import centered from '@storybook/addon-centered/html';
-
-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-docs.stories.mdx b/examples/html-kitchen-sink/stories/addon-docs.stories.mdx
index adcf8cdbbdae..e8edf424d11c 100644
--- a/examples/html-kitchen-sink/stories/addon-docs.stories.mdx
+++ b/examples/html-kitchen-sink/stories/addon-docs.stories.mdx
@@ -25,6 +25,26 @@ How you like them apples?!
   }}
 </Story>
 
+## Custom source
+
+<Preview>
+  <Story name="custom source" height="100px" parameters={{ docs: { source: { code: 'hello' } } }}>
+    {'<h1>Custom source</h1>'}
+  </Story>
+</Preview>
+
+## Transformed source
+
+<Preview>
+  <Story
+    name="transformed source"
+    height="100px"
+    parameters={{ docs: { transformSource: (src) => `transformed: ${src}` } }}
+  >
+    {'<h1>Some source</h1>'}
+  </Story>
+</Preview>
+
 ## Story reference
 
 You can also reference an existing story from within your MDX file.
diff --git a/examples/html-kitchen-sink/stories/addon-events.stories.js b/examples/html-kitchen-sink/stories/addon-events.stories.js
index 120e24fbf898..b912d56594f9 100644
--- a/examples/html-kitchen-sink/stories/addon-events.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-events.stories.js
@@ -75,10 +75,10 @@ export default {
 export const Logger = () => {
   const [events, setEvents] = useState([]);
   useEffect(() => {
-    const eventHandlers = Object.values(TEST_EVENTS).map(name => ({
+    const eventHandlers = Object.values(TEST_EVENTS).map((name) => ({
       name,
-      handler: payload => {
-        setEvents(prevEvents => [...prevEvents, { name, payload }]);
+      handler: (payload) => {
+        setEvents((prevEvents) => [...prevEvents, { name, payload }]);
       },
     }));
     eventHandlers.forEach(({ name, handler }) => emitter.on(name, handler));
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index 7b529a6c4101..fa02754df052 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -42,7 +42,7 @@ export const Story3 = () => {
   cachedContainer.style.color = textColor;
   return cachedContainer;
 };
-Story3.story = { name: 'CSS transitions' };
+Story3.storyName = 'CSS transitions';
 
 export const Story4 = () => {
   const name = text('Name', 'Jane');
@@ -80,12 +80,12 @@ export const Story4 = () => {
         <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
         <p>${stockMessage}</p>
         <p>Also, I have:</p>
-        <ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>
+        <ul>${items.map((item) => `<li>${item}</li>`).join('')}</ul>
         <p>${salutation}</p>
       </div>
     `;
 };
-Story4.story = { name: 'All knobs' };
+Story4.storyName = 'All knobs';
 
 export const Story5 = () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
-Story5.story = { name: 'XSS safety' };
+Story5.storyName = 'XSS safety';
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
deleted file mode 100644
index 9129457c82d5..000000000000
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-  title: 'Addons/Notes',
-};
-
-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.html b/examples/html-kitchen-sink/stories/button.html
new file mode 100644
index 000000000000..112fb4cab1c8
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/button.html
@@ -0,0 +1 @@
+<button>Hello world</button>
\ No newline at end of file
diff --git a/examples/html-kitchen-sink/stories/source-loader.stories.js b/examples/html-kitchen-sink/stories/source-loader.stories.js
new file mode 100644
index 000000000000..f1170d8293b8
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/source-loader.stories.js
@@ -0,0 +1,26 @@
+import button from './button.html';
+
+const packageName = './button.html';
+const componentSubtitle = `import button from '${packageName}/lib/elements/buttons';`;
+
+export default {
+  title: 'Addons/Source loader',
+  parameters: {
+    componentSubtitle,
+  },
+};
+
+export const Button = () => button;
+Button.parameters = {
+  storySource: {
+    source: `source: ${button}`,
+  },
+};
+
+export const SimpleStory = () =>
+  `<p>
+      <strong>
+        This is a fragment of HTML
+      </strong>
+    </p>`;
+SimpleStory.storyName = 'Very simple story';
diff --git a/examples/marko-cli/.storybook/main.js b/examples/marko-cli/.storybook/main.js
index 9d439b634082..5e95ce4450d1 100644
--- a/examples/marko-cli/.storybook/main.js
+++ b/examples/marko-cli/.storybook/main.js
@@ -3,13 +3,12 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.js'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
   ],
-  webpack: async config => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/marko-cli/.storybook/preview.js b/examples/marko-cli/.storybook/preview.js
deleted file mode 100644
index 673c37b1bf3c..000000000000
--- a/examples/marko-cli/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/marko';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 09101cbdb717..b80111ab2029 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -16,22 +16,26 @@
     "serve-static": "NODE_ENV=production marko-starter serve-static",
     "start": "marko-starter server",
     "storybook": "start-storybook -p 9005",
-    "test": "npm run lint"
+    "test": "yarn lint"
   },
   "dependencies": {
-    "marko": "^4.18.25",
+    "marko": "^4.18.39",
     "marko-starter": "^2.1.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/marko": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "prettier": "^1.16.4",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/marko": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "prettier": "^2.0.5",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "qaegx64axu"
+    }
   }
 }
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
index a6a717560ad8..1a4ec71f5749 100644
--- a/examples/marko-cli/src/stories/hello.stories.js
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -8,5 +8,3 @@ export default {
 };
 
 export const Simple = () => ({ input: { name: 'abc', age: 20 } });
-export const Story2 = () => 'NOT A MARKO RENDER_RESULT';
-Story2.story = { name: 'with ERROR!' };
diff --git a/examples/mithril-kitchen-sink/.storybook/main.js b/examples/mithril-kitchen-sink/.storybook/main.js
index 0ffc858a046b..89e529ec005f 100644
--- a/examples/mithril-kitchen-sink/.storybook/main.js
+++ b/examples/mithril-kitchen-sink/.storybook/main.js
@@ -3,17 +3,15 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.js'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
   ],
-  webpack: async config => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/mithril-kitchen-sink/.storybook/preview.js b/examples/mithril-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index aaa551ea87eb..000000000000
--- a/examples/mithril-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/mithril';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index a0ffc7c4b9c3..d5bdf7c4e948 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,20 +10,22 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/mithril": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/mithril": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "8adgm46jzk8"
+    }
   }
 }
diff --git a/examples/mithril-kitchen-sink/src/Button.js b/examples/mithril-kitchen-sink/src/Button.js
index 08d3f45a6175..f459403fdca7 100644
--- a/examples/mithril-kitchen-sink/src/Button.js
+++ b/examples/mithril-kitchen-sink/src/Button.js
@@ -13,7 +13,7 @@ const style = {
 };
 
 const Button = {
-  view: vnode => (
+  view: (vnode) => (
     <button type="button" style={style} {...vnode.attrs}>
       {vnode.children}
     </button>
diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js
index 3826e784d534..cd3dd67c9cc4 100644
--- a/examples/mithril-kitchen-sink/src/Welcome.js
+++ b/examples/mithril-kitchen-sink/src/Welcome.js
@@ -3,7 +3,7 @@
 import m from 'mithril';
 
 const Main = {
-  view: vnode => (
+  view: (vnode) => (
     <article
       style={{
         padding: 15,
@@ -18,11 +18,11 @@ const Main = {
 };
 
 const Title = {
-  view: vnode => <h1>{vnode.children}</h1>,
+  view: (vnode) => <h1>{vnode.children}</h1>,
 };
 
 const Note = {
-  view: vnode => (
+  view: (vnode) => (
     <p
       style={{
         opacity: 0.5,
@@ -34,7 +34,7 @@ const Note = {
 };
 
 const InlineCode = {
-  view: vnode => (
+  view: (vnode) => (
     <code
       style={{
         fontSize: '15px',
@@ -52,7 +52,7 @@ const InlineCode = {
 };
 
 const Link = {
-  view: vnode => (
+  view: (vnode) => (
     <a
       style={{
         color: '#1474f3',
@@ -68,7 +68,7 @@ const Link = {
 };
 
 const NavButton = {
-  view: vnode => (
+  view: (vnode) => (
     <button
       type="button"
       style={{
@@ -88,7 +88,7 @@ const NavButton = {
 };
 
 const Welcome = {
-  view: vnode => (
+  view: (vnode) => (
     <Main>
       <Title>Welcome to storybook</Title>
       <p>This is a UI component dev environment for your app.</p>
@@ -109,7 +109,7 @@ const Welcome = {
         You can also edit those components and see changes right away.
         <br />
         (Try editing the <InlineCode>Button</InlineCode> stories located at&nbsp;
-        <InlineCode>src/stories/index.js</InlineCode>
+        <InlineCode>src/stories/1-Button.stories.js</InlineCode>
         .)
       </p>
       <p>
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 aa033b382be5..32970a6e5b64 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -11,14 +11,14 @@ export default {
 export const Story1 = () => ({
   view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
 });
-Story1.story = { name: 'Action only' };
+Story1.storyName = 'Action only';
 
 export const Story2 = () => ({
   view: () => (
     <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
   ),
 });
-Story2.story = { name: 'Multiple actions' };
+Story2.storyName = 'Multiple actions';
 
 export const Story3 = () => ({
   view: () => (
@@ -27,12 +27,12 @@ export const Story3 = () => ({
     </Button>
   ),
 });
-Story3.story = { name: 'Multiple actions, object' };
+Story3.storyName = 'Multiple actions, object';
 
 export const Story4 = () => ({
   view: () => (
     <Button
-      onclick={e => {
+      onclick={(e) => {
         e.preventDefault();
         action('log2')(e.target);
       }}
@@ -41,4 +41,4 @@ export const Story4 = () => ({
     </Button>
   ),
 });
-Story4.story = { name: 'Action and method' };
+Story4.storyName = '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 48c158691950..c3266da180b5 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -6,19 +6,22 @@ import BaseButton from '../BaseButton';
 export default {
   title: 'Addons/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
 export const Story1 = () => ({
   view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
 });
-Story1.story = { name: 'story 1' };
+Story1.storyName = 'story 1';
 
 export const Story2 = () => ({
   view: () => <BaseButton label="This one too!" />,
 });
-Story2.story = { name: 'story 2' };
+Story2.storyName = '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
deleted file mode 100644
index 3fc3e4514e35..000000000000
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/** @jsx m */
-
-import m from 'mithril';
-import Centered from '@storybook/addon-centered/mithril';
-import Button from '../Button';
-
-export default {
-  title: 'Addons/Centered',
-  decorators: [Centered],
-  parameters: {
-    component: Centered,
-  },
-};
-
-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 4cf79669f6a0..4551f50da973 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -66,7 +66,7 @@ export const Story2 = () => {
         <p>{stockMessage}</p>
         <p>Also, I have:</p>
         <ul>
-          {items.map(item => (
+          {items.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </ul>
@@ -75,9 +75,9 @@ export const Story2 = () => {
     ),
   };
 };
-Story2.story = { name: 'All knobs' };
+Story2.storyName = 'All knobs';
 
 export const Story3 = () => ({
   view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
 });
-Story3.story = { name: 'XSS safety' };
+Story3.storyName = '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 ea20da6fa529..d75aaf9773ba 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
@@ -12,4 +12,4 @@ export default {
 export const Story1 = () => ({
   view: () => <Button onclick={linkTo('Welcome')}>This buttons links to Welcome</Button>,
 });
-Story1.story = { name: 'Go to welcome' };
+Story1.storyName = '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
deleted file mode 100644
index 26a9b8a401db..000000000000
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/** @jsx m */
-
-import m from 'mithril';
-
-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
index f172c6abe7fc..0da88220da76 100644
--- a/examples/mithril-kitchen-sink/src/stories/button.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -1,7 +1,6 @@
 import m from 'mithril';
 
 import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
 
 import Button from '../Button';
 
@@ -15,7 +14,7 @@ export default {
 export const Story1 = () => ({
   view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
 });
-Story1.story = { name: 'with text' };
+Story1.storyName = 'with text';
 
 export const Story2 = () => ({
   view: () =>
@@ -25,4 +24,4 @@ export const Story2 = () => ({
       m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
     ),
 });
-Story2.story = { name: 'with some emoji' };
+Story2.storyName = 'with some emoji';
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
index c30203e117c4..2469dda9f7cb 100644
--- a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -10,4 +10,4 @@ export default {
 export const Story1 = () => ({
   view: () => m(Welcome, { showApp: linkTo('Button') }),
 });
-Story1.story = { name: 'to Storybook' };
+Story1.storyName = 'to Storybook';
diff --git a/examples/official-storybook/components/ButtonGroup.js b/examples/official-storybook/components/ButtonGroup.js
index 01953ea10d96..6b8187dac6bb 100644
--- a/examples/official-storybook/components/ButtonGroup.js
+++ b/examples/official-storybook/components/ButtonGroup.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 /** ButtonGroup component description from docgen */
 export const ButtonGroup = ({ background, children }) => (
-  <div style={{ background }}>{children}</div>
+  <div style={{ padding: 10, background }}>{children}</div>
 );
 
 ButtonGroup.defaultProps = {
@@ -12,6 +12,25 @@ ButtonGroup.defaultProps = {
 };
 
 ButtonGroup.propTypes = {
+  /**
+   * Background color for the group
+   */
+  background: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.element),
+};
+
+/** SubGroup component description from docgen */
+export const SubGroup = ({ background, children }) => <div style={{ background }}>{children}</div>;
+
+SubGroup.defaultProps = {
+  background: '#0f0',
+  children: null,
+};
+
+SubGroup.propTypes = {
+  /**
+   * Background color for the sub-group
+   */
   background: PropTypes.string,
   children: PropTypes.arrayOf(PropTypes.element),
 };
diff --git a/examples/official-storybook/components/DocgenButton.js b/examples/official-storybook/components/DocgenButton.js
index 3abebb2bf3a9..8570c43f4b3d 100644
--- a/examples/official-storybook/components/DocgenButton.js
+++ b/examples/official-storybook/components/DocgenButton.js
@@ -1,7 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/** DocgenButton component description imported from comments inside the component file */
+/**
+ * DocgenButton component description imported from comments inside the component file,
+ *
+ * *Important Note*: Unlike with normal `<input>` elements, setting this will
+ * not validate the input contents. This is because in this project we use
+ * Formik and Yup to validate fields at the form-level, not at the individual
+ * input level. It is still very important to set this value properly for
+ * accessibility and user experience.
+ *
+ * Here's a list to test out formatting.
+ *
+ *  * `"number"` Any number not represented by a more specific type.
+ *  * `"password"` A password.
+ *  * `"email"` An email address.
+ *  * `"tel"` A phone or fax number. Shows the phone number keypad on
+ *      mobile keyboards.
+ */
 export const DocgenButton = ({ disabled, label, onClick }) => (
   <button type="button" disabled={disabled} onClick={onClick}>
     {label}
@@ -131,6 +147,11 @@ DocgenButton.propTypes = {
   msg: PropTypes.instanceOf(Set),
   /**
    * `oneOf` is basically an Enum which is also supported but can be pretty big.
+   *
+   * Testing a list:
+   *
+   *  - `News` first
+   *  - `Photos` second
    */
   enm: PropTypes.oneOf(['News', 'Photos']),
   enmEval: PropTypes.oneOf((() => ['News', 'Photos'])()),
diff --git a/examples/official-storybook/components/MemoButton.js b/examples/official-storybook/components/MemoButton.js
index 98288ec6ab6f..cf243f931520 100644
--- a/examples/official-storybook/components/MemoButton.js
+++ b/examples/official-storybook/components/MemoButton.js
@@ -1,4 +1,4 @@
 import React from 'react';
 import { DocgenButton } from './DocgenButton';
 
-export const MemoButton = React.memo(props => <DocgenButton {...props} />);
+export const MemoButton = React.memo((props) => <DocgenButton {...props} />);
diff --git a/examples/official-storybook/components/NamedExportButton.js b/examples/official-storybook/components/NamedExportButton.js
index 354bb42fc99b..8a0491c24b77 100644
--- a/examples/official-storybook/components/NamedExportButton.js
+++ b/examples/official-storybook/components/NamedExportButton.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BaseButton from './BaseButton';
 
-const NamedExportButton = props => <BaseButton {...props} />;
+const NamedExportButton = (props) => <BaseButton {...props} />;
 
 NamedExportButton.defaultProps = {
   disabled: false,
diff --git a/examples/official-storybook/components/TableComponent.js b/examples/official-storybook/components/TableComponent.js
index d963e0a1f517..3825174f0d76 100644
--- a/examples/official-storybook/components/TableComponent.js
+++ b/examples/official-storybook/components/TableComponent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Red = props => <span style={{ color: 'red' }} {...props} />;
+const Red = (props) => <span style={{ color: 'red' }} {...props} />;
 const TableComponent = ({ propDefinitions }) => {
   const props = propDefinitions.map(
     ({ property, propType, required, description, defaultValue }) => (
diff --git a/examples/official-storybook/components/TsButton.tsx b/examples/official-storybook/components/TsButton.tsx
new file mode 100644
index 000000000000..0d3f77ead09b
--- /dev/null
+++ b/examples/official-storybook/components/TsButton.tsx
@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+
+export type Type = 'default' | 'action';
+
+interface Props {
+  /**
+   * Click event handler
+   * @default null
+   */
+  onClick?: () => void;
+
+  /**
+   * Button type yo
+   */
+  type?: Type;
+}
+
+const Button: FunctionComponent<Props> = ({ children, type = 'default', onClick }) => {
+  return (
+    <button type="button" onClick={onClick}>
+      {type}: {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/examples/official-storybook/intro.stories.mdx b/examples/official-storybook/intro.stories.mdx
new file mode 100644
index 000000000000..b192db9fded5
--- /dev/null
+++ b/examples/official-storybook/intro.stories.mdx
@@ -0,0 +1,5 @@
+<Meta title="About/Intro" />
+
+# Official-storybook
+
+Welcome to `official-storybook`, a collection of test cases and demos for `@storybook/react` and all its addons.
diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js
deleted file mode 100644
index 74dadf2bd338..000000000000
--- a/examples/official-storybook/main.js
+++ /dev/null
@@ -1,76 +0,0 @@
-module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
-  stories: [
-    '../../lib/ui/src/**/*.stories.(js|tsx|mdx)',
-    '../../lib/components/src/**/*.stories.(js|tsx|mdx)',
-    './stories/**/*.stories.(js|tsx|mdx)',
-  ],
-  addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-design-assets/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-events/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-cssresources/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-jest/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-graphql/register',
-    '@storybook/addon-contexts/register',
-  ],
-  webpack: async (config, { configType }) => ({
-    ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules.slice(1),
-        {
-          test: /\.(mjs|jsx?|tsx?)$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                cacheDirectory: `.cache/storybook`,
-                presets: [
-                  [
-                    '@babel/preset-env',
-                    { shippedProposals: true, useBuiltIns: 'usage', corejs: 3 },
-                  ],
-                  '@babel/preset-typescript',
-                  configType === 'PRODUCTION' && [
-                    'babel-preset-minify',
-                    { builtIns: false, mangle: false },
-                  ],
-                  '@babel/preset-react',
-                  '@babel/preset-flow',
-                ].filter(Boolean),
-                plugins: [
-                  '@babel/plugin-proposal-object-rest-spread',
-                  '@babel/plugin-proposal-class-properties',
-                  '@babel/plugin-syntax-dynamic-import',
-                  ['babel-plugin-emotion', { sourceMap: true, autoLabel: true }],
-                  'babel-plugin-macros',
-                  '@babel/plugin-transform-react-constant-elements',
-                  'babel-plugin-add-react-displayname',
-                  [
-                    'babel-plugin-react-docgen',
-                    { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
-                  ],
-                ],
-              },
-            },
-          ],
-          exclude: [/node_modules/, /dist/],
-        },
-      ],
-    },
-    resolve: {
-      ...config.resolve,
-      extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
-    },
-  }),
-};
diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts
new file mode 100644
index 000000000000..cd8071d4a542
--- /dev/null
+++ b/examples/official-storybook/main.ts
@@ -0,0 +1,80 @@
+import type { StorybookConfig } from '@storybook/core/types';
+
+module.exports = {
+  stories: [
+    // FIXME: Breaks e2e tests './intro.stories.mdx',
+    '../../lib/ui/src/**/*.stories.@(js|tsx|mdx)',
+    '../../lib/components/src/**/*.stories.@(js|tsx|mdx)',
+    './stories/**/*.stories.@(js|ts|tsx|mdx)',
+    './../../addons/docs/**/*.stories.tsx',
+  ],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-storysource',
+    '@storybook/addon-design-assets',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-events',
+    '@storybook/addon-knobs',
+    '@storybook/addon-controls',
+    '@storybook/addon-cssresources',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
+    '@storybook/addon-jest',
+    '@storybook/addon-viewport',
+    '@storybook/addon-graphql',
+    '@storybook/addon-toolbars',
+    '@storybook/addon-queryparams',
+  ],
+  webpackFinal: async (config, { configType }) => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules.slice(1),
+        {
+          test: /\.(mjs|jsx?|tsx?)$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                cacheDirectory: `.cache/storybook`,
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    { shippedProposals: true, useBuiltIns: 'usage', corejs: 3 },
+                  ],
+                  '@babel/preset-typescript',
+                  configType === 'PRODUCTION' && [
+                    'babel-preset-minify',
+                    { builtIns: false, mangle: false },
+                  ],
+                  '@babel/preset-react',
+                  '@babel/preset-flow',
+                ].filter(Boolean),
+                plugins: [
+                  '@babel/plugin-proposal-object-rest-spread',
+                  '@babel/plugin-proposal-class-properties',
+                  '@babel/plugin-syntax-dynamic-import',
+                  ['babel-plugin-emotion', { sourceMap: true, autoLabel: true }],
+                  'babel-plugin-macros',
+                  '@babel/plugin-transform-react-constant-elements',
+                  'babel-plugin-add-react-displayname',
+                  [
+                    'babel-plugin-react-docgen',
+                    { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
+                  ],
+                ],
+              },
+            },
+          ],
+          exclude: [/node_modules/, /dist/],
+        },
+      ],
+    },
+    resolve: {
+      ...config.resolve,
+      extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
+    },
+  }),
+} as StorybookConfig;
diff --git a/examples/official-storybook/manager.js b/examples/official-storybook/manager.js
index 009efad1ff51..c8de3d2925de 100644
--- a/examples/official-storybook/manager.js
+++ b/examples/official-storybook/manager.js
@@ -1,3 +1,19 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
 import addHeadWarning from './head-warning';
 
 addHeadWarning('manager-head-not-loaded', 'Manager head not loaded');
+
+addons.setConfig({
+  showRoots: true,
+  theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
+  previewTabs: {
+    canvas: null,
+    'storybook/docs/panel': null,
+    'storybookjs/notes/panel': { title: 'Annotations', hidden: true },
+    graphiql: {
+      hidden: true,
+    },
+  },
+});
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 375f36827215..9a6b17d0df7c 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -14,54 +14,59 @@
   },
   "devDependencies": {
     "@packtracker/webpack-plugin": "^2.0.1",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-contexts": "5.3.0-rc.0",
-    "@storybook/addon-cssresources": "5.3.0-rc.0",
-    "@storybook/addon-design-assets": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-events": "5.3.0-rc.0",
-    "@storybook/addon-graphql": "5.3.0-rc.0",
-    "@storybook/addon-info": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-queryparams": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storyshots-puppeteer": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/node-logger": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-controls": "6.0.0-beta.21",
+    "@storybook/addon-cssresources": "6.0.0-beta.21",
+    "@storybook/addon-design-assets": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-events": "6.0.0-beta.21",
+    "@storybook/addon-graphql": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-queryparams": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storyshots-puppeteer": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-toolbars": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/cli": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "chromatic": "^4.0.2",
     "cors": "^2.8.5",
-    "cross-env": "^6.0.3",
+    "cross-env": "^7.0.0",
     "enzyme-to-json": "^3.4.1",
     "eventemitter3": "^4.0.0",
     "express": "^4.17.0",
     "express-graphql": "^0.9.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
-    "graphql": "^14.1.1",
+    "graphql": "^15.0.0",
     "jest-emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",
-    "puppeteer": "^2.0.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "storybook-chromatic": "^3.0.0",
-    "terser-webpack-plugin": "^2.1.2",
+    "terser-webpack-plugin": "^3.0.0",
     "ts-loader": "^6.0.0",
-    "uuid": "^3.3.2",
+    "uuid": "^8.0.0",
     "webpack": "^4.33.0"
+  },
+  "peerDependencies": {
+    "puppeteer": "^2.0.0 || ^3.0.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "ab7m45tp9p"
+    }
   }
 }
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index c8ef59f5683d..b668e9faa032 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -2,8 +2,6 @@ import React from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
-import { withA11y } from '@storybook/addon-a11y';
-import { withNotes } from '@storybook/addon-notes';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 
 import addHeadWarning from './head-warning';
@@ -26,10 +24,20 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
 addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
 
 addDecorator(withCssResources);
-addDecorator(withA11y);
-addDecorator(withNotes);
 
-addDecorator(storyFn => (
+const themeDecorator = (storyFn, { globalArgs: { theme } }) => {
+  const selectedTheme = theme === 'dark' ? themes.dark : themes.light;
+  return (
+    <ThemeProvider theme={convert(selectedTheme)}>
+      <Global styles={createReset} />
+      {storyFn()}
+    </ThemeProvider>
+  );
+};
+
+addDecorator(themeDecorator);
+
+addDecorator((storyFn) => (
   <ThemeProvider theme={convert(themes.light)}>
     <Global styles={createReset} />
     {storyFn()}
@@ -45,17 +53,59 @@ addParameters({
     },
   },
   options: {
-    showRoots: true,
-    theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
-  backgrounds: [
-    { name: 'storybook app', value: themes.light.appBg, default: true },
-    { name: 'light', value: '#eeeeee' },
-    { name: 'dark', value: '#222222' },
-  ],
+  backgrounds: {
+    default: 'storybook app',
+    values: [
+      { name: 'storybook app', value: themes.light.appBg },
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222' },
+    ],
+  },
   docs: {
-    page: () => <DocsPage subtitleSlot={({ selectedKind }) => `Subtitle: ${selectedKind}`} />,
+    theme: themes.light,
+    page: () => <DocsPage subtitleSlot={({ kind }) => `Subtitle: ${kind}`} />,
   },
 });
+
+export const parameters = {
+  exportedParameter: 'exportedParameter',
+};
+
+export const globalArgs = {
+  foo: 'fooValue',
+};
+
+export const globalArgTypes = {
+  foo: { defaultValue: 'fooDefaultValue' },
+  bar: { defaultValue: 'barDefaultValue' },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: null,
+    toolbar: {
+      icon: 'circlehollow',
+      // items: ['light', 'dark'],
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+      ],
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' },
+      ],
+    },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
index 64f1aded15ca..ff3dd0145b2b 100644
--- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
@@ -20,15 +20,11 @@ export const InvalidContrast = () => (
   // FIXME: has no effect on score
   <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
 );
-InvalidContrast.story = {
-  name: 'Invalid contrast',
-};
+InvalidContrast.storyName = 'Invalid contrast';
 
 export const delayedRender = () => (
   <DelayedRender>
     <BaseButton label="This button has a delayed render of 1s" />
   </DelayedRender>
 );
-delayedRender.story = {
-  name: 'delayed render',
-};
+delayedRender.storyName = 'delayed render';
diff --git a/examples/official-storybook/stories/addon-a11y/button.stories.js b/examples/official-storybook/stories/addon-a11y/button.stories.js
index a59bd7a48603..ba4521b71929 100644
--- a/examples/official-storybook/stories/addon-a11y/button.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/button.stories.js
@@ -16,6 +16,4 @@ 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',
-};
+InvalidContrast.storyName = 'Invalid contrast';
diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js
index e120332ce118..a60eb6b4a6d3 100644
--- a/examples/official-storybook/stories/addon-a11y/form.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/form.stories.js
@@ -17,24 +17,18 @@ export const WithoutLabel = () => (
     <Form.Input />
   </Form.Field>
 );
-WithoutLabel.story = {
-  name: 'Without Label',
-};
+WithoutLabel.storyName = 'Without Label';
 
 export const WithLabel = () => (
   <Form.Field label={text}>
     <Form.Input id="1" />
   </Form.Field>
 );
-WithLabel.story = {
-  name: 'With label',
-};
+WithLabel.storyName = 'With label';
 
 export const WithPlaceholder = () => (
   <Form.Field label="">
     <Form.Input id="1" placeholder={text} />
   </Form.Field>
 );
-WithPlaceholder.story = {
-  name: 'With placeholder',
-};
+WithPlaceholder.storyName = 'With placeholder';
diff --git a/examples/official-storybook/stories/addon-a11y/highlight.stories.js b/examples/official-storybook/stories/addon-a11y/highlight.stories.js
new file mode 100644
index 000000000000..88af6f4086bc
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/highlight.stories.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { highlightObject } from '@storybook/addon-a11y';
+import { themes, convert, styled } from '@storybook/theming';
+
+import Button from '../../components/addon-a11y/Button';
+
+const text = 'Testing the a11y highlight';
+
+export default {
+  title: 'Addons/A11y/Highlight',
+  component: Button,
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+  decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
+};
+
+const PassesHighlight = styled.div(highlightObject(convert(themes.normal).color.positive));
+const IncompleteHighlight = styled.div(highlightObject(convert(themes.normal).color.warning));
+const ViolationsHighlight = styled.div(highlightObject(convert(themes.normal).color.negative));
+
+export const Passes = () => <PassesHighlight>{text}</PassesHighlight>;
+export const Incomplete = () => <IncompleteHighlight>{text}</IncompleteHighlight>;
+export const Violations = () => <ViolationsHighlight>{text}</ViolationsHighlight>;
diff --git a/examples/official-storybook/stories/addon-a11y/image.stories.js b/examples/official-storybook/stories/addon-a11y/image.stories.js
index 9a124605cf12..f96410cbd7f1 100644
--- a/examples/official-storybook/stories/addon-a11y/image.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/image.stories.js
@@ -12,27 +12,22 @@ export default {
 };
 
 export const WithoutAlt = () => <img src={image} />;
-WithoutAlt.story = {
-  name: 'Without alt',
-};
+WithoutAlt.storyName = 'Without alt';
 
 export const WithoutAltButUnchecked = () => <img src={image} />;
-WithoutAltButUnchecked.story = {
-  name: 'Without alt but unchecked',
-  parameters: {
-    a11y: {
-      config: {
-        disableOtherRules: true,
-        rules: [],
-      },
-      options: {},
+WithoutAltButUnchecked.storyName = 'Without alt but unchecked';
+
+WithoutAltButUnchecked.parameters = {
+  a11y: {
+    config: {
+      disableOtherRules: true,
+      rules: [],
     },
+    options: {},
   },
 };
 
 export const WithAlt = () => <img src={image} alt={text} />;
-WithAlt.story = {
-  name: 'With alt',
-};
+WithAlt.storyName = '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
index 9fc6868def16..8a8b12c4c575 100644
--- a/examples/official-storybook/stories/addon-a11y/typography.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/typography.stories.js
@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 
 const text = 'Testing the a11y addon';
-const href = 'javascript:void 0';
+const href = 'http://example.com';
 
 export default {
   title: 'Addons/A11y/Typography',
@@ -21,24 +21,16 @@ export const Correct = () => (
 
 export const EmptyHeading = () => <h1 />;
 
-EmptyHeading.story = {
-  name: 'Empty Heading',
-};
+EmptyHeading.storyName = 'Empty Heading';
 
 export const EmptyParagraph = () => <p />;
 
-EmptyParagraph.story = {
-  name: 'Empty Paragraph',
-};
+EmptyParagraph.storyName = 'Empty Paragraph';
 
 export const EmptyLink = () => <a href={href} />;
 
-EmptyLink.story = {
-  name: 'Empty Link',
-};
+EmptyLink.storyName = 'Empty Link';
 
 export const LinkWithoutHref = () => <a>{`${text}...`}</a>;
 
-LinkWithoutHref.story = {
-  name: 'Link without href',
-};
+LinkWithoutHref.storyName = 'Link without href';
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index f28d05bd18d7..fd4f32235700 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -1,19 +1,11 @@
+/* eslint-disable react/prop-types */
 import { window, File } from 'global';
 import React, { Fragment } from 'react';
-import {
-  action,
-  actions,
-  configureActions,
-  decorate,
-  decorateAction,
-} from '@storybook/addon-actions';
+import { action, actions, configureActions } 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',
   parameters: {
@@ -23,19 +15,36 @@ export default {
   },
 };
 
-export const BasicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
+export const ArgTypesExample = ({ onClick, onFocus }) => (
+  <Button {...{ onClick, onFocus }}>Hello World</Button>
+);
 
-BasicExample.story = {
-  name: 'Basic example',
+ArgTypesExample.argTypes = {
+  onClick: { action: 'clicked!' },
+  onFocus: { action: true },
 };
 
+export const ArgTypesRegexExample = (args, context) => {
+  const { someFunction, onClick, onFocus } = args;
+  return (
+    <Button onMouseOver={someFunction} {...{ onClick, onFocus }}>
+      Hello World
+    </Button>
+  );
+};
+
+ArgTypesRegexExample.parameters = { actions: { argTypesRegex: '^on.*' } };
+ArgTypesRegexExample.argTypes = { someFunction: {}, onClick: {}, onFocus: {} };
+
+export const BasicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
+
+BasicExample.storyName = 'Basic example';
+
 export const MultipleActions = () => (
   <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
 );
 
-MultipleActions.story = {
-  name: 'Multiple actions',
-};
+MultipleActions.storyName = 'Multiple actions';
 
 export const MultipleActionsConfig = () => (
   <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
@@ -43,17 +52,13 @@ export const MultipleActionsConfig = () => (
   </Button>
 );
 
-MultipleActionsConfig.story = {
-  name: 'Multiple actions + config',
-};
+MultipleActionsConfig.storyName = 'Multiple actions + config';
 
 export const MultipleActionsAsObject = () => (
   <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
 );
 
-MultipleActionsAsObject.story = {
-  name: 'Multiple actions as object',
-};
+MultipleActionsAsObject.storyName = 'Multiple actions as object';
 
 export const MultipleActionsObjectConfig = () => (
   <Button
@@ -63,45 +68,7 @@ export const MultipleActionsObjectConfig = () => (
   </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',
-};
+MultipleActionsObjectConfig.storyName = 'Multiple actions, object + config';
 
 export const CircularPayload = () => {
   const circular = { foo: {} };
@@ -109,15 +76,11 @@ export const CircularPayload = () => {
   return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
 };
 
-CircularPayload.story = {
-  name: 'Circular Payload',
-};
+CircularPayload.storyName = 'Circular Payload';
 
 export const ReservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
 
-ReservedKeywordAsName.story = {
-  name: 'Reserved keyword as name',
-};
+ReservedKeywordAsName.storyName = 'Reserved keyword as name';
 
 export const AllTypes = () => {
   function A() {}
@@ -185,9 +148,7 @@ export const AllTypes = () => {
   );
 };
 
-AllTypes.story = {
-  name: 'All types',
-};
+AllTypes.storyName = 'All types';
 
 export const ConfigureActionsDepth = () => {
   configureActions({
@@ -210,9 +171,7 @@ export const PersistingTheActionLogger = () => (
   </Fragment>
 );
 
-PersistingTheActionLogger.story = {
-  name: 'Persisting the action logger',
-};
+PersistingTheActionLogger.storyName = 'Persisting the action logger';
 
 export const LimitActionOutput = () => {
   configureActions({
@@ -226,6 +185,14 @@ export const LimitActionOutput = () => {
     </Fragment>
   );
 };
-LimitActionOutput.story = {
-  name: 'Limit Action Output',
+LimitActionOutput.storyName = 'Limit Action Output';
+
+export const SkippedViaDisableTrue = () => (
+  <Button onClick={action('hello-world')}>Hello World</Button>
+);
+
+SkippedViaDisableTrue.storyName = 'skipped via disable:true';
+
+SkippedViaDisableTrue.parameters = {
+  actions: { disable: true },
 };
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 738f174bc2d9..a20948759131 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -6,13 +6,16 @@ export default {
   title: 'Addons/Backgrounds',
 
   parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff' },
-      { name: 'light', value: '#eeeeee' },
-      { name: 'gray', value: '#cccccc' },
-      { name: 'dark', value: '#222222', default: true },
-      { name: 'black', value: '#000000' },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'light', value: '#eeeeee' },
+        { name: 'gray', value: '#cccccc' },
+        { name: 'dark', value: '#222222' },
+        { name: 'black', value: '#000000' },
+      ],
+    },
   },
 };
 
@@ -20,55 +23,38 @@ export const Story1 = () => (
   <BaseButton label="You should be able to switch backgrounds for this story" />
 );
 
-Story1.story = {
-  name: 'story 1',
-};
+Story1.storyName = 'story 1';
 
 export const Story2 = () => <BaseButton label="This one too!" />;
 
-Story2.story = {
-  name: 'story 2',
-};
+Story2.storyName = 'story 2';
 
 export const Overridden = () => <BaseButton label="This one should have different backgrounds" />;
 
-Overridden.story = {
-  parameters: {
-    backgrounds: [
+Overridden.parameters = {
+  backgrounds: {
+    default: 'blue',
+    values: [
       { name: 'pink', value: 'hotpink' },
-      { name: 'blue', value: 'deepskyblue', default: true },
+      { name: 'blue', value: 'deepskyblue' },
     ],
   },
 };
 
-export const DisabledVia = () => <BaseButton label="This one should not use backgrounds" />;
-
-DisabledVia.story = {
-  name: 'disabled via []',
-
-  parameters: {
-    backgrounds: [],
-  },
-};
-
 export const SkippedViaDisableTrue = () => (
-  <BaseButton label="This one should not use backgrounds either" />
+  <BaseButton label="This one should not use backgrounds" />
 );
 
-SkippedViaDisableTrue.story = {
-  name: 'skipped via disable:true',
+SkippedViaDisableTrue.storyName = 'skipped via disable: true';
 
-  parameters: {
-    backgrounds: { disable: true },
-  },
+SkippedViaDisableTrue.parameters = {
+  backgrounds: { disable: true },
 };
 
 export const GridCellSize = () => (
   <BaseButton label="This one should have a different grid cell size" />
 );
 
-GridCellSize.story = {
-  parameters: {
-    grid: { cellSize: 10 },
-  },
+GridCellSize.parameters = {
+  grid: { cellSize: 10 },
 };
diff --git a/examples/official-storybook/stories/addon-centered.stories.js b/examples/official-storybook/stories/addon-centered.stories.js
deleted file mode 100644
index bd428217e743..000000000000
--- a/examples/official-storybook/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import centered from '@storybook/addon-centered/react';
-
-import BaseButton from '../components/BaseButton';
-
-export default {
-  title: 'Addons/Centered',
-  decorators: [centered],
-};
-
-export const Story1 = () => <BaseButton label="This story should be centered" />;
-
-Story1.story = {
-  name: 'story 1',
-};
-
-export const Story2 = () => <BaseButton label="This story should not be centered" />;
-
-Story2.story = {
-  name: 'story 2 not centered',
-
-  parameters: {
-    centered: { disable: true },
-  },
-};
diff --git a/examples/official-storybook/stories/addon-contexts.stories.js b/examples/official-storybook/stories/addon-contexts.stories.js
deleted file mode 100644
index d85a97ad6c79..000000000000
--- a/examples/official-storybook/stories/addon-contexts.stories.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import { withContexts } from '@storybook/addon-contexts/react';
-
-// Example A: Simple CSS Theming
-const topLevelContexts = [
-  {
-    title: 'CSS Themes',
-    components: ['div'],
-    params: [
-      {
-        name: 'Desert',
-        props: {
-          style: { color: 'brown', background: '#F4A261', height: '100vh', padding: '10px' },
-        },
-      },
-      {
-        name: 'Ocean',
-        props: {
-          style: { color: 'white', background: '#173F5F', height: '100vh', padding: '10px' },
-        },
-        default: true,
-      },
-    ],
-  },
-];
-
-const storyLevelContexts = [
-  {
-    title: 'CSS Themes',
-    params: [
-      {
-        name: 'Forest',
-        props: {
-          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
-        },
-      },
-    ],
-  },
-];
-
-export default {
-  title: 'Addons/Contexts',
-  decorators: [withContexts(topLevelContexts)],
-};
-
-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({
-  locale: 'unknown',
-  greeting: 'NULL',
-});
-
-export const Languages = () => (
-  <NaiveIntlContext.Consumer>
-    {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
-  </NaiveIntlContext.Consumer>
-);
-
-Languages.story = {
-  parameters: {
-    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,
-        },
-      },
-    ],
-  },
-};
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
index e0e5b2f0d773..92d4ef7af595 100644
--- a/examples/official-storybook/stories/addon-cssresources.stories.js
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -9,45 +9,43 @@ export const PrimaryLargeButton = () => (
     Primary Large Button
   </button>
 );
-PrimaryLargeButton.story = {
-  name: 'Primary Large Button',
-  parameters: {
-    cssresources: [
-      {
-        id: `bootstrap v4.1.3`,
-        code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link>`,
-        picked: true,
-      },
-      {
-        id: `bootstrap v3.3.5`,
-        code: `<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>`,
-        picked: false,
-      },
-    ],
-    options: {
-      selectedPanel: 'storybook/cssresources/panel',
+PrimaryLargeButton.storyName = 'Primary Large Button';
+
+PrimaryLargeButton.parameters = {
+  cssresources: [
+    {
+      id: `bootstrap v4.1.3`,
+      code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link>`,
+      picked: true,
+    },
+    {
+      id: `bootstrap v3.3.5`,
+      code: `<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>`,
+      picked: false,
     },
+  ],
+  options: {
+    selectedPanel: 'storybook/cssresources/panel',
   },
 };
 
 export const CameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
-CameraIcon.story = {
-  name: 'Camera Icon',
-  parameters: {
-    cssresources: [
-      {
-        id: `fontawesome`,
-        code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
-        picked: true,
-      },
-      {
-        id: `whitetheme`,
-        code: `<style>.fa { color: #fff }</style>`,
-        picked: false,
-      },
-    ],
-    options: {
-      selectedPanel: 'storybook/cssresources/panel',
+CameraIcon.storyName = 'Camera Icon';
+
+CameraIcon.parameters = {
+  cssresources: [
+    {
+      id: `fontawesome`,
+      code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
+      picked: true,
+    },
+    {
+      id: `whitetheme`,
+      code: `<style>.fa { color: #fff }</style>`,
+      picked: false,
     },
+  ],
+  options: {
+    selectedPanel: 'storybook/cssresources/panel',
   },
 };
diff --git a/examples/official-storybook/stories/addon-design-assets.stories.js b/examples/official-storybook/stories/addon-design-assets.stories.js
index 6d858132d683..aeaab6f43248 100644
--- a/examples/official-storybook/stories/addon-design-assets.stories.js
+++ b/examples/official-storybook/stories/addon-design-assets.stories.js
@@ -12,76 +12,64 @@ export default {
 
 export const SingleImage = () => <div>This story should a single image in the assets panel</div>;
 
-SingleImage.story = {
-  name: 'single image',
+SingleImage.storyName = 'single image';
 
-  parameters: {
-    assets: ['https://via.placeholder.com/300/09f/fff.png'],
-  },
+SingleImage.parameters = {
+  assets: ['https://via.placeholder.com/300/09f/fff.png'],
 };
 
 export const SingleWebpage = () => <div>This story should a single image in the assets panel</div>;
 
-SingleWebpage.story = {
-  name: 'single webpage',
+SingleWebpage.storyName = 'single webpage';
 
-  parameters: {
-    assets: ['https://www.example.com'],
-  },
+SingleWebpage.parameters = {
+  assets: ['https://www.example.com'],
 };
 
 export const YoutubeVideo = () => <div>This story should a single image in the assets panel</div>;
 
-YoutubeVideo.story = {
-  name: 'youtube video',
+YoutubeVideo.storyName = 'youtube video';
 
-  parameters: {
-    assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
-  },
+YoutubeVideo.parameters = {
+  assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
 };
 
 export const MultipleImages = () => (
   <div>This story should a multiple images in the assets panel</div>
 );
 
-MultipleImages.story = {
-  name: 'multiple images',
+MultipleImages.storyName = 'multiple images';
 
-  parameters: {
-    assets: [
-      'https://via.placeholder.com/600/09f/fff.png',
-      'https://via.placeholder.com/600/f90/fff.png',
-    ],
-  },
+MultipleImages.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',
+NamedAssets.storyName = 'named assets';
 
-  parameters: {
-    assets: [
-      {
-        name: 'blue',
-        url: 'https://via.placeholder.com/300/09f/fff.png',
-      },
-      {
-        name: 'orange',
-        url: 'https://via.placeholder.com/300/f90/fff.png',
-      },
-    ],
-  },
+NamedAssets.parameters = {
+  assets: [
+    {
+      name: 'blue',
+      url: 'https://via.placeholder.com/300/09f/fff.png',
+    },
+    {
+      name: 'orange',
+      url: 'https://via.placeholder.com/300/f90/fff.png',
+    },
+  ],
 };
 
 export const UrlReplacement = () => (
   <div>This story should have a webpge, with within it's url the storyId</div>
 );
 
-UrlReplacement.story = {
-  name: 'url replacement',
+UrlReplacement.storyName = 'url replacement';
 
-  parameters: {
-    assets: ['https://via.placeholder.com/600.png?text={id}'],
-  },
+UrlReplacement.parameters = {
+  assets: ['https://via.placeholder.com/600.png?text={id}'],
 };
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
index 1f614050bb0a..83c0a5626561 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
+++ b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
@@ -9,10 +9,10 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { DocgenButton } from '../../components/DocgenButton';
 import BaseButton from '../../components/BaseButton';
-import { ButtonGroup } from '../../components/ButtonGroup';
+import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
 
 export default {
-  title: 'Addons/Docs/stories docs bocks',
+  title: 'Addons/Docs/stories docs blocks',
   component: DocgenButton,
   parameters: {
     docs: {
@@ -33,88 +33,63 @@ export default {
 export const defDocsPage = () => <div>Default docs page</div>;
 
 export const smallDocsPage = () => <div>Just primary story, </div>;
-smallDocsPage.story = {
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Primary />
-        </>
-      ),
-    },
+
+smallDocsPage.parameters = {
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Primary />
+      </>
+    ),
   },
 };
 
 export const checkBoxProps = () => <div>Primary props displayed with a check box </div>;
-checkBoxProps.story = {
-  parameters: {
-    docs: {
-      page: () => {
-        const [showProps, setShowProps] = React.useState(false);
-        return (
-          <>
-            <Title />
-            <Subtitle />
-            <Description />
-            <Primary />
-            <label>
-              <input
-                type="checkbox"
-                checked={showProps}
-                onChange={() => setShowProps(!showProps)}
-              />
-              <span>display props</span>
-            </label>
-            {showProps && <Props />}
-          </>
-        );
-      },
-    },
-  },
-};
 
-export const customLabels = () => <div>Display custom title, Subtitle, Description</div>;
-customLabels.story = {
-  parameters: {
-    docs: {
-      page: () => (
+checkBoxProps.parameters = {
+  docs: {
+    page: () => {
+      const [showProps, setShowProps] = React.useState(false);
+      return (
         <>
-          <Title>Custom title</Title>
-          <Subtitle>Custom sub title</Subtitle>
-          <Description>Custom description</Description>
+          <Title />
+          <Subtitle />
+          <Description />
           <Primary />
-          <Props />
-          <Stories title="Custom stories title" />
+          <label>
+            <input type="checkbox" checked={showProps} onChange={() => setShowProps(!showProps)} />
+            <span>display props</span>
+          </label>
+          {showProps && <Props />}
         </>
-      ),
+      );
     },
   },
 };
 
-export const customStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
-customStoriesFilter.story = {
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Stories slot={stories => stories} />
-        </>
-      ),
-    },
+export const customLabels = () => <div>Display custom title, Subtitle, Description</div>;
+
+customLabels.parameters = {
+  docs: {
+    page: () => (
+      <>
+        <Title>Custom title</Title>
+        <Subtitle>Custom sub title</Subtitle>
+        <Description>Custom description</Description>
+        <Primary />
+        <Props />
+        <Stories title="Custom stories title" />
+      </>
+    ),
   },
 };
 
-export const descriptionSlot = () => <div>Adds markdown to the description</div>;
-descriptionSlot.story = {
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Description slot={description => `<b>${description}</b>`} />
-        </>
-      ),
-    },
+export const customStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
+
+customStoriesFilter.parameters = {
+  docs: {
+    page: () => <Stories includePrimary />,
   },
 };
 
@@ -126,51 +101,51 @@ export const multipleComponents = () => (
   </ButtonGroup>
 );
 
-multipleComponents.story = {
-  name: 'Many Components',
-  parameters: {
-    component: ButtonGroup,
-    subcomponents: {
-      'Docgen Button': DocgenButton,
-      'Base Button': BaseButton,
-    },
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary slot={stories => stories.find(story => story.story === 'Many Components')} />
-          <Props />
-        </>
-      ),
-    },
-  },
-};
+multipleComponents.storyName = 'Many Components';
 
-export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
-componentsProps.story = {
+multipleComponents.parameters = {
+  component: ButtonGroup,
   subcomponents: {
+    SubGroup,
     'Docgen Button': DocgenButton,
     'Base Button': BaseButton,
   },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title>Multiple prop tables</Title>
-          <Description>
-            Here's what happens when your component has some related components
-          </Description>
-          <Props
-            components={{
-              'ButtonGroup Custom': ButtonGroup,
-              'Docgen Button': DocgenButton,
-              'Base Button': BaseButton,
-            }}
-          />
-        </>
-      ),
-    },
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary name="Many Components" />
+        <Props />
+      </>
+    ),
+  },
+};
+
+export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
+
+componentsProps.subcomponents = {
+  'Docgen Button': DocgenButton,
+  'Base Button': BaseButton,
+};
+
+componentsProps.parameters = {
+  docs: {
+    page: () => (
+      <>
+        <Title>Multiple prop tables</Title>
+        <Description>
+          Here's what happens when your component has some related components
+        </Description>
+        <Props
+          components={{
+            'ButtonGroup Custom': ButtonGroup,
+            'Docgen Button': DocgenButton,
+            'Base Button': BaseButton,
+          }}
+        />
+      </>
+    ),
   },
 };
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
index 81e99d1aecd7..b559a7a94fd8 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
@@ -3,7 +3,7 @@ import notes from '../notes/notes.md';
 import mdxNotes from '../notes/notes.mdx';
 import { DocgenButton } from '../../components/DocgenButton';
 
-const docsTitle = title => `Docs/${title}`;
+const docsTitle = (title) => `Docs/${title}`;
 
 export default {
   title: `Addons/${docsTitle('stories')}`,
@@ -13,46 +13,38 @@ export default {
 export const Basic = () => <div>Click docs tab to see basic docs</div>;
 
 export const NoDocs = () => <div>Click docs tab to see no docs error</div>;
-NoDocs.story = {
-  name: 'no docs',
-  parameters: { docs: { page: null } },
-};
+NoDocs.storyName = 'no docs';
+NoDocs.parameters = { docs: { page: null } };
 
 export const WithNotes = () => <div>Click docs tab to see DocsPage docs</div>;
-WithNotes.story = {
-  name: 'with notes',
-  parameters: { notes },
-};
+WithNotes.storyName = 'with notes';
+WithNotes.parameters = { notes };
 
 export const WithInfo = () => <div>Click docs tab to see DocsPage docs</div>;
-WithInfo.story = {
-  name: 'with info',
-  parameters: {
-    info: 'some user info string',
-  },
+WithInfo.storyName = 'with info';
+
+WithInfo.parameters = {
+  info: 'some user info string',
 };
 
 export const MdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
-MdxOverride.story = {
-  name: 'mdx override',
-  parameters: {
-    docs: { page: mdxNotes },
-  },
+MdxOverride.storyName = 'mdx override';
+
+MdxOverride.parameters = {
+  docs: { page: mdxNotes },
 };
 
 export const JsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
-JsxOverride.story = {
-  name: 'jsx override',
-  parameters: {
-    docs: { page: () => <div>Hello docs</div> },
-  },
+JsxOverride.storyName = 'jsx override';
+
+JsxOverride.parameters = {
+  docs: { page: () => <div>Hello docs</div> },
 };
 
 export const DocsDisable = () => <div>This story shouldn't show up in DocsPage</div>;
-DocsDisable.story = {
-  parameters: {
-    docs: { disable: true },
-  },
+
+DocsDisable.parameters = {
+  docs: { disable: true },
 };
 
 export const LargerThanPreview = () => <div style={{ width: 1000, background: 'pink' }}>HUGE</div>;
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx
index 970bdea292a1..8dc56e7a9b90 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx
@@ -149,3 +149,12 @@ Flow types are not officially supported
 <Story name="docs disable" parameters={{ docs: { disable: true } }}>
   <Button>This souldn't show up in docs page</Button>
 </Story>
+
+
+## Story with multiple children
+<Preview>
+  <Story name="story multiple children">
+    <p>Hello Child #1</p>
+    <p>Hello Child #2</p>
+  </Story>
+</Preview>  
\ No newline at end of file
diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
new file mode 100644
index 000000000000..91537cda500f
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+<Meta title="Addons/Docs/ColorPalette" />
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.greyscale"
+    subtitle="Some of the greys"
+    colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
+  />
+  <ColorItem
+    title="theme.color.primary"
+    subtitle="Coral"
+    colors={{ WildWatermelon: '#FF4785' }}
+  />
+  <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: '#1EA7FD' }} />
+  <ColorItem
+    title="theme.color.positive"
+    subtitle="Green"
+    colors={{
+      Apple: 'rgba(102,191,60,1)',
+      Apple80: 'rgba(102,191,60,.8)',
+      Apple60: 'rgba(102,191,60,.6)',
+      Apple30: 'rgba(102,191,60,.3)',
+    }}
+  />
+</ColorPalette>
diff --git a/examples/official-storybook/stories/addon-docs/container-override.stories.mdx b/examples/official-storybook/stories/addon-docs/container-override.stories.mdx
index 6982003fc907..e947c63cf1b1 100644
--- a/examples/official-storybook/stories/addon-docs/container-override.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/container-override.stories.mdx
@@ -14,4 +14,4 @@ import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
   }}
 />
 
-<Story name='dummy'><div>some content</div></Story>
+<Story name='dummy' parameters={{ layout: 'fullscreen' }}><div>some content</div></Story>
diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
index d9f894195c07..5ecfbc6b342c 100644
--- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
@@ -7,5 +7,4 @@ export default {
   includeStories: [], // or don't load this file at all
 };
 
-// eslint-disable-next-line react/prop-types
-export const basic = ({ parameters }) => <Button>Basic</Button>;
+export const basic = () => <Button>Basic</Button>;
diff --git a/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
index aef2c1db786e..7450a93f2db7 100644
--- a/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx
@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
 
-<Meta title="Addons/Docs/docs-only" />
+<Meta title="Addons/Docs/docs-only" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
 # Documentation-only MDX
 
@@ -8,8 +8,56 @@ This file is a documentation-only MDX file, i.e. it doesn't contain any `<Story>
 
 Therefore, it shows up in the navigation UI as a document icon.
 
-<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+It can, however, still contain a `<Preview>` definition:
+
+<Preview>
+  <div>
+    <h3>This is a preview block within a documentation-only MDX file</h3>
+    <p>
+      You may need to wrap certain documentation in a `Preview` in order to reset the styles for use
+      cases such as documenting a design system.
+    </p>
+  </div>
+</Preview>
+
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
+<br />
 
 ## Bottom
 
diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
new file mode 100644
index 000000000000..414de40982fa
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { DocgenButton } from '../../components/DocgenButton';
+
+export default {
+  title: 'Addons|Docs/ForwardRef',
+  component: ForwardedButton,
+  parameters: { chromatic: { disable: true } },
+};
+
+const ForwardedButton = React.forwardRef((props = { label: '' }, ref) => (
+  <DocgenButton ref={ref} {...props} />
+));
+export const DisplaysCorrectly = () => <ForwardedButton label="hello" />;
+DisplaysCorrectly.storyName = 'Displays forwarded ref components correctly (default props)';
+
+// eslint-disable-next-line react/prop-types
+const ForwardedDestructuredButton = React.forwardRef(({ label = '', ...props }, ref) => (
+  <DocgenButton ref={ref} label={label} {...props} />
+));
+export const AlsoDisplaysCorrectly = () => <ForwardedDestructuredButton label="hello" />;
+AlsoDisplaysCorrectly.storyName =
+  'Displays forwarded ref components correctly (destructured props)';
diff --git a/examples/official-storybook/stories/addon-docs/markdown.stories.mdx b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
index 077715496817..64f27167a12b 100644
--- a/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Addons/Docs/markdown-docs" />
+<Meta title="Addons/Docs/markdown-docs" parameters={{ previewTabs: { 'storybook/docs/panel': { index: -1 }}}}/>
 
 # h1 Heading
 
@@ -129,13 +129,19 @@ Right aligned columns
 
 ## Links
 
-[link text](https://hichroma.com)
+[external link](https://hichroma.com)
 
-[link with title](https://hichroma.com 'Insert title!')
+[external link with title](https://hichroma.com 'Insert title!')
 
 [link to in page anchor](#h1-heading)
 
-[link to another story](/?path=/docs/addons-docs-docs-only--page#bottom)
+[link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
+
+[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)
+
+[link to about page](?path=/settings/about)
+
+[link to absolute local url](/absolute)
 
 ## Images
 
diff --git a/examples/official-storybook/stories/addon-docs/mdx.stories.js b/examples/official-storybook/stories/addon-docs/mdx.stories.js
index e2563d4825fe..ce1f5f2fb132 100644
--- a/examples/official-storybook/stories/addon-docs/mdx.stories.js
+++ b/examples/official-storybook/stories/addon-docs/mdx.stories.js
@@ -4,7 +4,10 @@ import markdown from './markdown.stories.mdx';
 
 export default {
   title: 'Addons/Docs/mdx-in-story',
-  decorators: [storyFn => <DocsContainer context={{}}>{storyFn()}</DocsContainer>],
+  decorators: [(storyFn) => <DocsContainer context={{}}>{storyFn()}</DocsContainer>],
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 // This renders the contents of the docs panel into story content
diff --git a/examples/official-storybook/stories/addon-docs/meta-string-template.stories.mdx b/examples/official-storybook/stories/addon-docs/meta-string-template.stories.mdx
index 65c4a01b198a..33eff79835bc 100644
--- a/examples/official-storybook/stories/addon-docs/meta-string-template.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/meta-string-template.stories.mdx
@@ -5,3 +5,8 @@ import { titleFunction } from '@storybook/addon-docs/dist/mdx/title-generators';
 
 # Meta title from a string template
 
+## Stories
+
+<Story name="testing">
+  <>hello</>
+</Story>
\ No newline at end of file
diff --git a/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js b/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js
new file mode 100644
index 000000000000..3d6a49874f1c
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js
@@ -0,0 +1,13 @@
+// This example exists solely to demonstrate nav hierarchy
+// in --docs mode when a folder contains both a component and
+// individual stories
+//
+// See also ./mixed-leaves-folder.stories.js
+
+export default {
+  title: 'Addons/Docs/Mixed Leaves/Component',
+  parameters: { chromatic: { disable: true } },
+};
+
+export const B = () => 'b';
+export const C = () => 'c';
diff --git a/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js b/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js
new file mode 100644
index 000000000000..2f9216606fe9
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js
@@ -0,0 +1,12 @@
+// This example exists solely to demonstrate nav hierarchy
+// in --docs mode when a folder contains both a component and
+// individual stories
+//
+// See also ./mixed-leaves-component.stories.js
+
+export default {
+  title: 'Addons/Docs/Mixed Leaves',
+  parameters: { chromatic: { disable: true } },
+};
+
+export const A = () => 'a';
diff --git a/examples/official-storybook/stories/addon-docs/props-include-exclude.stories.mdx b/examples/official-storybook/stories/addon-docs/props-include-exclude.stories.mdx
new file mode 100644
index 000000000000..ebb880497eea
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/props-include-exclude.stories.mdx
@@ -0,0 +1,24 @@
+import { Props, Meta } from '@storybook/addon-docs/blocks';
+import { DocgenButton } from '../../components/DocgenButton';
+
+<Meta title="Addons/Docs/IncludeExclude" />
+
+## Include
+
+### Array
+
+<Props of={DocgenButton} include={['disabled', 'label']} />
+
+### Regex
+
+<Props of={DocgenButton} include={/^o.*/} />
+
+## Exclude
+
+### Regex
+
+<Props of={DocgenButton} exclude={/^o.*|^...$/} />
+
+## Mixed
+
+<Props of={DocgenButton} include={/^o.*/} exclude={['one', 'obj']} />
diff --git a/examples/official-storybook/stories/addon-docs/props.stories.mdx b/examples/official-storybook/stories/addon-docs/props.stories.mdx
index ba40711117ab..d54b16fac5de 100644
--- a/examples/official-storybook/stories/addon-docs/props.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/props.stories.mdx
@@ -1,18 +1,153 @@
-import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Preview, Story, Props } from '@storybook/addon-docs/blocks';
+import range from 'lodash/range';
 import { DocgenButton } from '../../components/DocgenButton';
+import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
 import { ForwardRefButton } from '../../components/ForwardRefButton';
 import { MemoButton } from '../../components/MemoButton';
 
-<Meta title="Addons/Docs/props" />
+<Meta
+  title="Addons/Docs/props"
+  component={ButtonGroup}
+  parameters={{ controls: { expanded: false } }}
+/>
 
-## Docgen
+export const ArgsDisplay = (args = {}) => (
+  <table>
+    <tbody>
+      {Object.entries(args).map(([key, val]) => (
+        <tr key={key}>
+          <td>{key}</td>
+          <td>{val && val.toString()}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
 
-<Props of={DocgenButton} />
+## ArgTypes
+
+<Preview>
+  <Story
+    name="ArgTypes"
+    args={{
+      boolArg: true,
+      stringArg: 'overwritten',
+      arrayArg: ['a', 'b'],
+    }}
+    argTypes={{
+      boolArg: { name: 'boolArg', type: { name: 'boolean' }, description: 'bool description' },
+      stringArg: {
+        name: 'stringArg',
+        type: { name: 'string' },
+        description: 'bar description',
+        defaultValue: 'bar default',
+        table: {
+          defaultValue: {
+            summary: 'bar def',
+            detail: 'some long bar default',
+          },
+        },
+      },
+      arrayArg: {
+        name: 'arrayArg',
+        type: { name: 'array', value: { name: 'string' } },
+        description: 'baz description',
+      },
+      selectArg: {
+        name: 'selectArg',
+        type: { name: 'enum' },
+        defaultValue: 2,
+        control: {
+          type: 'select',
+          options: {
+            a: 1,
+            b: 2,
+            c: 3,
+          },
+        },
+      },
+    }}
+  >
+    {(args) => <ArgsDisplay {...args} />}
+  </Story>
+</Preview>
+
+<Props story="ArgTypes" />
+
+## ArgTypes w/ Components
+
+<Props story="ArgTypes" showComponents />
+
+## Args
+
+<Preview>
+  <Story
+    name="Args"
+    args={{
+      foo: false,
+      bar: '',
+    }}
+  >
+    {(args) => <ArgsDisplay {...args} />}
+  </Story>
+</Preview>
+
+<Props story="Args" />
 
-## React.forwardRef
+## Component Story
 
-<Props of={ForwardRefButton} />
+<Preview>
+  <Story
+    name="Component"
+    argTypes={{
+      background: { control: { type: 'color' } },
+    }}
+  >
+    {({ background, children }) => {
+      const contents = children && children.length > 0 ? children : <DocgenButton label="child" />;
+      return <ButtonGroup background={background}>{contents}</ButtonGroup>;
+    }}
+  </Story>
+</Preview>
 
-## React.memo
+<Props story="Component" />
 
-<Props of={MemoButton} />
+## Controls Story
+
+<Preview>
+  <Story
+    name="Controls"
+    args={{
+      background: '#ff0',
+      label: 'apple',
+      count: 5,
+    }}
+    argTypes={{
+      count: { control: { type: 'range', min: 0, max: 10 } },
+      label: {
+        control: { type: 'select', options: ['apple', 'banana', 'cherry'] },
+      },
+      background: { control: { type: 'color' } },
+    }}
+  >
+    {({ background, label, count }) => {
+      return (
+        <ButtonGroup background={background}>
+          {range(count).map((i) => (
+            <DocgenButton label={`${label} ${i}`} />
+          ))}
+        </ButtonGroup>
+      );
+    }}
+  </Story>
+</Preview>
+
+<Props story="Controls" />
+
+## Components
+
+<Props components={{ ButtonGroup, SubGroup }} />
+
+## Component
+
+<Props of={DocgenButton} />
diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/react-memo.stories.js
new file mode 100644
index 000000000000..8791eb02c328
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/react-memo.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocgenButton } from '../../components/DocgenButton';
+
+const ButtonWithMemo = React.memo((props) => <DocgenButton {...props} />);
+
+export default {
+  title: 'Addons|Docs/ButtonWithMemo',
+  component: ButtonWithMemo,
+  parameters: { chromatic: { disable: true } },
+};
+
+export const displaysCorrectly = () => <ButtonWithMemo label="Hello World" />;
+displaysCorrectly.storyName = 'Displays components with memo correctly';
diff --git a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
index dedfa5534759..2fa7db68a0b9 100644
--- a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
+++ b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
@@ -5,11 +5,12 @@ import { ButtonGroup } from '../../components/ButtonGroup';
 export default {
   title: 'Addons/Docs/ButtonGroup',
   component: ButtonGroup,
+  parameters: { viewMode: 'docs' },
   subcomponents: { DocgenButton },
 };
 
-export const basic = () => (
-  <ButtonGroup>
+export const Basic = () => (
+  <ButtonGroup background="#eee">
     <DocgenButton label="foo" />
     <DocgenButton label="bar" />
   </ButtonGroup>
diff --git a/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx b/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx
new file mode 100644
index 000000000000..6b8800c31864
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { radios } from '@storybook/addon-knobs';
+import Button, { Type } from '../../components/TsButton';
+
+export default {
+  title: 'Addons/Docs/TsButton',
+  component: Button,
+  parameters: {
+    viewMode: 'story',
+  },
+};
+
+type Story = () => any;
+
+export const SimpleButton: Story = () => {
+  const x = 0;
+  return <Button onClick={action('button clicked')}>OK {x}</Button>;
+};
+
+const typeOptions = {
+  Default: 'default',
+  Action: 'action',
+};
+
+export const WithType = () => (
+  <Button type={radios('Type', typeOptions, typeOptions.Default) as Type}>Label</Button>
+);
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index 6a358119afc7..01d46ac5e838 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -14,9 +14,9 @@ const EVENTS = {
 const emitter = new EventEmitter();
 const emit = emitter.emit.bind(emitter);
 
-const eventHandler = name => payload => emit(Logger.LOG_EVENT, { name, payload });
+const eventHandler = (name) => (payload) => emit(Logger.LOG_EVENT, { name, payload });
 
-Object.keys(EVENTS).forEach(event => emitter.on(EVENTS[event], eventHandler(EVENTS[event])));
+Object.keys(EVENTS).forEach((event) => emitter.on(EVENTS[event], eventHandler(EVENTS[event])));
 
 const events = [
   {
@@ -77,6 +77,4 @@ export default {
 };
 
 export const logger = () => <Logger emitter={emitter} />;
-logger.story = {
-  name: 'Logger',
-};
+logger.storyName = 'Logger';
diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js
index ceab150d2f7e..52e7465f8c0b 100644
--- a/examples/official-storybook/stories/addon-graphql.stories.js
+++ b/examples/official-storybook/stories/addon-graphql.stories.js
@@ -2,45 +2,49 @@ import React from 'react';
 
 export default {
   title: 'Addons/GraphQL',
+  parameters: {
+    previewTabs: {
+      graphiql: { hidden: false, title: 'GraphiQL' },
+    },
+  },
 };
 
 export const GetPikachu = () => <div>hello</div>;
 
-GetPikachu.story = {
-  name: 'get Pikachu',
-  parameters: {
-    graphiql: {
-      query: `{
-          pokemon(name: "Pikachu") {
+GetPikachu.storyName = 'get Pikachu';
+
+GetPikachu.parameters = {
+  graphiql: {
+    query: `{
+        pokemon(name: "Pikachu") {
+          id
+          number
+          name
+          attacks {
+            special {
+              name
+              type
+              damage
+            }
+          }
+          evolutions {
             id
             number
             name
+            weight {
+              minimum
+              maximum
+            }
             attacks {
-              special {
+              fast {
                 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/EXAMPLE.md b/examples/official-storybook/stories/addon-info/EXAMPLE.md
deleted file mode 100644
index fc965844dda0..000000000000
--- a/examples/official-storybook/stories/addon-info/EXAMPLE.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# external
-## markdown 
-file
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
deleted file mode 100644
index 780fb3a0b6db..000000000000
--- a/examples/official-storybook/stories/addon-info/decorators.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 1aa8da24c022..000000000000
--- a/examples/official-storybook/stories/addon-info/forward-ref.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 3b96ca11eded..000000000000
--- a/examples/official-storybook/stories/addon-info/github-issues.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 7db0a4ee09b5..000000000000
--- a/examples/official-storybook/stories/addon-info/jsx.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index 38038e50703f..000000000000
--- a/examples/official-storybook/stories/addon-info/markdown.stories.js
+++ /dev/null
@@ -1,82 +0,0 @@
-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
deleted file mode 100644
index f75e3b825607..000000000000
--- a/examples/official-storybook/stories/addon-info/options.stories.js
+++ /dev/null
@@ -1,198 +0,0 @@
-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',
-  component: TableComponent,
-  parameters: {
-    info: {
-      TableComponent,
-    },
-  },
-};
-
-export const UseInfoAsStoryDecorator = () => <BaseButton label="Button" />;
-
-UseInfoAsStoryDecorator.story = {
-  name: 'Use Info as story decorator',
-  decorators: [withInfo('Info can take options via the global or local decorator as well.')],
-};
-
-export const UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-UsingParametersAcrossAllStories.story = {
-  name: 'Using parameters 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
deleted file mode 100644
index 9e36b966b5f7..000000000000
--- a/examples/official-storybook/stories/addon-info/parameters.stories.js
+++ /dev/null
@@ -1,80 +0,0 @@
-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 UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-UsingParametersAcrossAllStories.story = {
-  name: 'Using parameters 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
deleted file mode 100644
index deef915f0478..000000000000
--- a/examples/official-storybook/stories/addon-info/react-docgen.stories.js
+++ /dev/null
@@ -1,118 +0,0 @@
-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',
-  component: DocgenButton,
-  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
deleted file mode 100644
index b3ab034e9ecb..000000000000
--- a/examples/official-storybook/stories/addon-info/story-source.stories.js
+++ /dev/null
@@ -1,73 +0,0 @@
-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: 5,
-      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 e488a6e6f75a..5fd60e1b87c0 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -9,6 +9,4 @@ export default {
 };
 
 export const WithTests = () => <p>Hello</p>;
-WithTests.story = {
-  parameters: { jest: 'addon-jest' },
-};
+WithTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
index 478b21d5ef07..86bfa4c795a0 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
@@ -7,12 +7,10 @@ export default {
 export const WithDecoratorCallingStoryFunctionMoreThanOnce = () => {
   return text('Text', 'Hello');
 };
-WithDecoratorCallingStoryFunctionMoreThanOnce.story = {
-  decorators: [
-    withKnobs,
-    storyFn => {
-      storyFn();
-      return storyFn();
-    },
-  ],
-};
+WithDecoratorCallingStoryFunctionMoreThanOnce.decorators = [
+  withKnobs,
+  (storyFn) => {
+    storyFn();
+    return storyFn();
+  },
+];
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
index df29629444bb..5e14440af826 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
@@ -11,6 +11,4 @@ export default {
 };
 
 export const AcceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
-AcceptsOptions.story = {
-  name: 'accepts options',
-};
+AcceptsOptions.storyName = '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
index e458969cc86e..123549a7d89e 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -26,7 +26,7 @@ const ItemLoader = ({ isLoading, items }) => {
   }
   return (
     <ul>
-      {items.map(i => (
+      {items.map((i) => (
         <li key={i}>{i}</li>
       ))}
     </ul>
@@ -45,6 +45,12 @@ export default {
   decorators: [withKnobs],
 };
 
+export const selectKnob = () => {
+  const value = select('value', [1, 2, 3, undefined, null], 1);
+
+  return <div>{JSON.stringify({ value: String(value) }, null, 2)}</div>;
+};
+
 export const TweaksStaticValues = () => {
   const name = text('Name', 'Storyteller');
   const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
@@ -108,7 +114,7 @@ export const TweaksStaticValues = () => {
       <p>My wallet contains: ${dollars.toFixed(2)}</p>
       <p>In my backpack, I have:</p>
       <ul>
-        {items.map(item => (
+        {items.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -119,9 +125,7 @@ export const TweaksStaticValues = () => {
     </div>
   );
 };
-TweaksStaticValues.story = {
-  name: 'tweaks static values',
-};
+TweaksStaticValues.storyName = 'tweaks static values';
 
 export const TweaksStaticValuesOrganizedInGroups = () => {
   const GROUP_IDS = {
@@ -198,7 +202,7 @@ export const TweaksStaticValuesOrganizedInGroups = () => {
       <p>Other Fruit: {otherFruit}</p>
       <p>Items:</p>
       <ul>
-        {items.map(item => (
+        {items.map((item) => (
           <li key={`${item}`}>{item}</li>
         ))}
       </ul>
@@ -206,9 +210,7 @@ export const TweaksStaticValuesOrganizedInGroups = () => {
     </div>
   );
 };
-TweaksStaticValuesOrganizedInGroups.story = {
-  name: 'tweaks static values organized in groups',
-};
+TweaksStaticValuesOrganizedInGroups.storyName = 'tweaks static values organized in groups';
 
 export const DynamicKnobs = () => {
   const showOptional = select('Show optional', ['yes', 'no'], 'yes');
@@ -219,9 +221,7 @@ export const DynamicKnobs = () => {
     </Fragment>
   );
 };
-DynamicKnobs.story = {
-  name: 'dynamic knobs',
-};
+DynamicKnobs.storyName = 'dynamic knobs';
 
 export const ComplexSelect = () => {
   const m = select(
@@ -243,9 +243,7 @@ export const ComplexSelect = () => {
     </pre>
   );
 };
-ComplexSelect.story = {
-  name: 'complex select',
-};
+ComplexSelect.storyName = 'complex select';
 
 export const OptionsKnob = () => {
   const valuesRadio = {
@@ -302,19 +300,19 @@ export const OptionsKnob = () => {
       <p>Month: {optionSelect}</p>
       <p>Fruit:</p>
       <ul>
-        {optionsMultiSelect.map(item => (
+        {optionsMultiSelect.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
       <p>Vegetables:</p>
       <ul>
-        {optionsCheck.map(item => (
+        {optionsCheck.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
       <p>Dairy:</p>
       <ul>
-        {optionsInlineCheck.map(item => (
+        {optionsInlineCheck.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -346,9 +344,7 @@ export const TriggersActionsViaButton = () => {
     </Fragment>
   );
 };
-TriggersActionsViaButton.story = {
-  name: 'triggers actions via button',
-};
+TriggersActionsViaButton.storyName = 'triggers actions via button';
 
 export const ButtonWithReactUseState = () => {
   const [counter, setCounter] = React.useState(0);
@@ -365,20 +361,16 @@ export const XssSafety = () => (
     }}
   />
 );
-XssSafety.story = {
-  name: 'XSS safety',
-};
+XssSafety.storyName = 'XSS safety';
 
 export const AcceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
-AcceptsStoryParameters.story = {
-  name: 'accepts story parameters',
+AcceptsStoryParameters.storyName = 'accepts story parameters';
 
-  parameters: {
-    knobs: { escapeHTML: false },
-  },
+AcceptsStoryParameters.parameters = {
+  knobs: { escapeHTML: false },
 };
 
 export const WithDuplicateDecorator = () => {
   return text('Text', 'Hello');
 };
-WithDuplicateDecorator.story = { decorators: [withKnobs] };
+WithDuplicateDecorator.decorators = [withKnobs];
diff --git a/examples/official-storybook/stories/addon-links/href.stories.js b/examples/official-storybook/stories/addon-links/href.stories.js
index fc2f79bae16b..354a98588d24 100644
--- a/examples/official-storybook/stories/addon-links/href.stories.js
+++ b/examples/official-storybook/stories/addon-links/href.stories.js
@@ -7,14 +7,12 @@ export default {
 };
 
 export const Log = () => {
-  hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
+  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',
-    },
+Log.parameters = {
+  options: {
+    panel: 'storybook/actions/panel',
   },
 };
diff --git a/examples/official-storybook/stories/addon-links/scroll.stories.js b/examples/official-storybook/stories/addon-links/scroll.stories.js
index e41c7c482656..134bb026f884 100644
--- a/examples/official-storybook/stories/addon-links/scroll.stories.js
+++ b/examples/official-storybook/stories/addon-links/scroll.stories.js
@@ -4,7 +4,7 @@ import LinkTo from '@storybook/addon-links/react';
 export default {
   title: 'Addons/Links/Scroll position',
   decorators: [
-    storyFn => (
+    (storyFn) => (
       <Fragment>
         <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
         {storyFn()}
diff --git a/examples/official-storybook/stories/addon-links/select.stories.js b/examples/official-storybook/stories/addon-links/select.stories.js
index 0ba2d66e89a7..e53883468c69 100644
--- a/examples/official-storybook/stories/addon-links/select.stories.js
+++ b/examples/official-storybook/stories/addon-links/select.stories.js
@@ -7,7 +7,7 @@ export default {
 };
 
 export const Index = () => (
-  <select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
+  <select value="Index" onChange={linkTo('Addons|Links.Select', (e) => e.currentTarget.value)}>
     <option>Index</option>
     <option>First</option>
     <option>Second</option>
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
deleted file mode 100644
index b9d05dd35035..000000000000
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react';
-
-import BaseButton from '../components/BaseButton';
-import markdownNotes from './notes/notes.md';
-
-const markdownString = `
-# Documentation
-
-This is inline github-flavored markdown!
-
-[Link to a bottom ID](#anchor--addons-notes--with-a-markdown-table)  
-[Link to an external website](http://example.com)  
-[Link to a other storybook page](/story/addons-notes--addon-notes)  
-
-## Example Usage
-~~~js
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import markdownNotes from './readme.md';
-
-storiesOf('Addons|Notes', module)
-  .add(
-    'addon notes rendering imported markdown',
-    () => (
-      <BaseButton label="Button with notes - check the notes panel for details" />
-    ),
-    {
-      notes: markdownNotes,
-    }
-  )
-~~~
-
-
-## Code examples for syntax-highlighter to deal with
-
-### 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>
-~~~
-
-`;
-
-const markdownTable = `
-| Column1 | Column2 | Column3 |
-|---------|---------|---------|
-| Row1.1  | Row1.2  | Row1.3  |
-| Row2.1  | Row2.2  | Row2.3  |
-| Row3.1  | Row3.2  | Row3.3  |
-| Row4.1  | Row4.2  | Row4.3  |
-`;
-
-const giphyMarkdown = `
-# Giphy
-
-<Giphy query="cheese" />
-`;
-
-export default {
-  title: 'Addons/Notes',
-};
-
-export const AddonNotes = () => (
-  <BaseButton label="Button with notes - check the notes panel for details" />
-);
-
-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.',
-  },
-};
-
-export const AddonNotesRenderingImportedMarkdown = () => (
-  <BaseButton label="Button with notes - check the notes panel for details" />
-);
-
-AddonNotesRenderingImportedMarkdown.story = {
-  name: 'addon notes rendering imported markdown',
-  parameters: {
-    notes: { markdown: markdownNotes },
-  },
-};
-
-export const AddonNotesRenderingInlineGithubFlavoredMarkdown = () => (
-  <BaseButton label="Button with notes - check the notes panel for details" />
-);
-
-AddonNotesRenderingInlineGithubFlavoredMarkdown.story = {
-  name: 'addon notes rendering inline, github-flavored markdown',
-  parameters: {
-    notes: { markdown: markdownString },
-  },
-};
-
-export const WithAMarkdownTable = () => (
-  <BaseButton label="Button with notes - check the notes panel for details" />
-);
-
-WithAMarkdownTable.story = {
-  name: 'with a markdown table',
-  parameters: {
-    notes: { markdown: markdownTable },
-  },
-};
-
-export const WithAMarkdownGiphy = () => (
-  <BaseButton label="Button with notes - check the notes panel for details" />
-);
-
-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 b8cafe157faf..0ee37459418e 100644
--- a/examples/official-storybook/stories/addon-options.stories.js
+++ b/examples/official-storybook/stories/addon-options.stories.js
@@ -8,13 +8,11 @@ export const SettingName = () => (
   <div>This story should have changed the name of the storybook</div>
 );
 
-SettingName.story = {
-  name: 'setting name',
+SettingName.storyName = 'setting name';
 
-  parameters: {
-    options: {
-      name: 'Custom Storybook',
-    },
+SettingName.parameters = {
+  options: {
+    name: 'Custom Storybook',
   },
 };
 
@@ -22,12 +20,10 @@ export const HidingAddonPanel = () => (
   <div>This story should have changed hidden the addons panel</div>
 );
 
-HidingAddonPanel.story = {
-  name: 'hiding addon panel',
+HidingAddonPanel.storyName = 'hiding addon panel';
 
-  parameters: {
-    options: {
-      showPanel: false,
-    },
+HidingAddonPanel.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 3d5c515fb2ae..ee32dbe82750 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -1,10 +1,8 @@
 import { document } from 'global';
 import React from 'react';
-import { withQuery } from '@storybook/addon-queryparams';
 
 export default {
   title: 'Addons/QueryParams',
-  decorators: [withQuery],
 
   parameters: {
     query: {
@@ -17,15 +15,11 @@ export const MockIsTrue = () => (
   <div>This story should have an extra url query param: {document.location.search}</div>
 );
 
-MockIsTrue.story = {
-  name: 'mock is true',
-};
+MockIsTrue.storyName = '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 } },
-};
+MockIs4.storyName = 'mock is 4';
+MockIs4.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 904ec48f807e..eaf56417ff5a 100644
--- a/examples/official-storybook/stories/addon-storyshots.stories.js
+++ b/examples/official-storybook/stories/addon-storyshots.stories.js
@@ -21,15 +21,15 @@ export const block = () => {
     </Block>
   );
 };
-block.story = {
-  parameters: {
-    async puppeteerTest(page) {
-      const element = await page.$('[data-test-block]');
-      await element.hover();
-      const textContent = await element.getProperty('textContent');
-      const text = await textContent.jsonValue();
-      // eslint-disable-next-line jest/no-standalone-expect
-      expect(text).toBe('I am hovered');
-    },
+block.storyName = 'Block story';
+
+block.parameters = {
+  async puppeteerTest(page) {
+    const element = await page.$('[data-test-block]');
+    await element.hover();
+    const textContent = await element.getProperty('textContent');
+    const text = await textContent.jsonValue();
+    // eslint-disable-next-line jest/no-standalone-expect
+    expect(text).toBe('I am hovered');
   },
 };
diff --git a/examples/official-storybook/stories/addon-toolbars.stories.js b/examples/official-storybook/stories/addon-toolbars.stories.js
new file mode 100644
index 000000000000..c0b808bfc6e2
--- /dev/null
+++ b/examples/official-storybook/stories/addon-toolbars.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+export default {
+  title: 'Addons/Toolbars',
+};
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'zh':
+      return '你好!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'en':
+    default:
+      return 'Hello';
+  }
+};
+
+const Themed = styled.div(({ theme }) => ({
+  color: theme.color.defaultText,
+  background: theme.background.content,
+}));
+
+export const Locale = (_args, { globalArgs: { locale } }) => {
+  return (
+    <Themed style={{ fontSize: 30 }}>
+      Your locale is '{locale}', so I say:
+      <br />
+      <Themed style={{ fontSize: 60, fontWeight: 'bold' }}>{getCaptionForLocale(locale)}</Themed>
+    </Themed>
+  );
+};
diff --git a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
index b75528e380bc..8b6700546a25 100644
--- a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@@ -33,14 +33,14 @@ export const OverriddenViaWithViewportParameterizedDecorator = () => (
     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' } },
+OverriddenViaWithViewportParameterizedDecorator.storyName =
+  'Overridden via "withViewport" parameterized decorator';
+OverriddenViaWithViewportParameterizedDecorator.parameters = {
+  viewport: { defaultViewport: 'ipad' },
 };
 
 export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
-Disabled.story = {
-  parameters: {
-    viewport: { disable: true },
-  },
+
+Disabled.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
index 31c43a42c866..bdd2ee5ed7fe 100644
--- a/examples/official-storybook/stories/addon-viewport/default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/default.stories.js
@@ -15,4 +15,4 @@ export default {
 export const DefaultFn = () => (
   <Panel>I don't have problems being rendered using the default viewport.</Panel>
 );
-DefaultFn.story = { name: 'default' };
+DefaultFn.storyName = 'default';
diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.js
new file mode 100644
index 000000000000..a3ce7766810a
--- /dev/null
+++ b/examples/official-storybook/stories/core/args.stories.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useArgs } from '@storybook/client-api';
+
+// eslint-disable-next-line react/prop-types
+const ArgUpdater = ({ args, updateArgs }) => {
+  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
+
+  return (
+    <div>
+      <h3>Hooks args:</h3>
+      <pre>{JSON.stringify(args)}</pre>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          updateArgs(JSON.parse(argsInput));
+        }}
+      >
+        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
+        <br />
+        <button type="submit">Change</button>
+      </form>
+    </div>
+  );
+};
+
+export default {
+  title: 'Core/Args',
+  decorators: [
+    (story) => {
+      const [args, updateArgs] = useArgs();
+
+      return (
+        <>
+          {story()}
+          <ArgUpdater args={args} updateArgs={updateArgs} />
+        </>
+      );
+    },
+  ],
+};
+
+export const PassedToStory = (inputArgs) => {
+  return (
+    <div>
+      <h3>Input args:</h3>
+      <pre>{JSON.stringify(inputArgs)}</pre>
+    </div>
+  );
+};
+
+PassedToStory.argTypes = { name: { defaultValue: 'initial' } };
+
+PassedToStory.propTypes = {
+  args: PropTypes.shape({}).isRequired,
+};
diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js
index 15af07f7bde9..1cb9857999d1 100644
--- a/examples/official-storybook/stories/core/decorators.stories.js
+++ b/examples/official-storybook/stories/core/decorators.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-// We would need to add this in config.js idomatically however that would make this file a bit confusing
+// We would need to add this in config.js idiomatically however that would make this file a bit confusing
 import { addDecorator } from '@storybook/react';
 
 addDecorator((s, { kind }) =>
@@ -17,7 +17,7 @@ addDecorator((s, { kind }) =>
 export default {
   title: 'Core/Decorators',
   decorators: [
-    s => (
+    (s) => (
       <>
         <p>Kind Decorator</p>
         {s()}
@@ -27,27 +27,11 @@ export default {
 };
 
 export const All = () => <p>Story</p>;
-All.story = {
-  decorators: [
-    s => (
-      <>
-        <p>Local Decorator</p>
-        {s()}
-      </>
-    ),
-  ],
-};
-
-export const Deprecated = () => <p>Story</p>;
-Deprecated.story = {
-  parameters: {
-    decorators: [
-      s => (
-        <>
-          <p>Deprecated Local Decorator</p>
-          {s()}
-        </>
-      ),
-    ],
-  },
-};
+All.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 00c6c19bf082..727dcf21d92b 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -10,12 +10,11 @@ export default {
 export const Exception = () => {
   throw new Error('storyFn threw an error! WHOOPS');
 };
-Exception.story = {
-  name: 'story throws exception',
-  parameters: {
-    storyshots: { disable: true },
-    chromatic: { disable: true },
-  },
+Exception.storyName = 'story throws exception';
+
+Exception.parameters = {
+  storyshots: { disable: true },
+  chromatic: { disable: true },
 };
 
 export const badComponent = () => (
@@ -24,21 +23,17 @@ export const badComponent = () => (
     <BadComponent />
   </Fragment>
 );
-badComponent.story = {
-  name: 'story errors - invariant error',
-  parameters: {
-    notes: 'Story does not return something react can render',
-    storyshots: { disable: true },
-    chromatic: { disable: true },
-  },
+badComponent.storyName = 'story errors - invariant error';
+
+badComponent.parameters = {
+  storyshots: { disable: true },
+  chromatic: { disable: true },
 };
 
 export const BadStory = () => badOutput;
-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 },
-  },
+BadStory.storyName = 'story errors - story un-renderable type';
+
+BadStory.parameters = {
+  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 7f193d263b39..aabf9192a5ad 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.story = { name: 'Force re-render' };
+Force.storyName = 'Force re-render';
diff --git a/examples/official-storybook/stories/core/globalArgs.stories.js b/examples/official-storybook/stories/core/globalArgs.stories.js
new file mode 100644
index 000000000000..a0387104734e
--- /dev/null
+++ b/examples/official-storybook/stories/core/globalArgs.stories.js
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useGlobalArgs } from '@storybook/client-api';
+
+// eslint-disable-next-line react/prop-types
+const ArgUpdater = ({ args, updateArgs }) => {
+  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
+
+  return (
+    <div>
+      <h3>Hooks args:</h3>
+      <pre>{JSON.stringify(args)}</pre>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          updateArgs(JSON.parse(argsInput));
+        }}
+      >
+        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
+        <br />
+        <button type="submit">Change</button>
+      </form>
+    </div>
+  );
+};
+
+export default {
+  title: 'Core/Global Args',
+  parameters: { passArgsFirst: false },
+  decorators: [
+    (story) => {
+      const [globalArgs, updateGlobalArgs] = useGlobalArgs();
+
+      return (
+        <>
+          {story()}
+          <ArgUpdater args={globalArgs} updateArgs={updateGlobalArgs} />
+        </>
+      );
+    },
+  ],
+};
+
+export const PassedToStory = ({ globalArgs }) => {
+  return (
+    <div>
+      <h3>Global args:</h3>
+      <pre>{JSON.stringify(globalArgs)}</pre>
+    </div>
+  );
+};
+
+PassedToStory.propTypes = {
+  globalArgs: PropTypes.shape({}).isRequired,
+};
+
+export const SecondStory = ({ globalArgs }) => {
+  return (
+    <div>
+      <h3>Global args (2):</h3>
+      <pre>{JSON.stringify(globalArgs)}</pre>
+    </div>
+  );
+};
+
+SecondStory.propTypes = {
+  globalArgs: PropTypes.shape({}).isRequired,
+};
diff --git a/examples/official-storybook/stories/core/interleaved-exports.stories.js b/examples/official-storybook/stories/core/interleaved-exports.stories.js
new file mode 100644
index 000000000000..b585bfa6b3d2
--- /dev/null
+++ b/examples/official-storybook/stories/core/interleaved-exports.stories.js
@@ -0,0 +1,16 @@
+/* eslint-disable import/first,import/no-duplicates */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Core/Interleaved exports',
+  parameters: { chromatic: { disable: true } },
+};
+
+import { Welcome } from '@storybook/react/demo';
+
+export const First = () => <Welcome showApp={action('show')} />;
+
+import { Button } from '@storybook/react/demo';
+
+export const Second = () => <Button onClick={action('click')}>Second</Button>;
diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js
new file mode 100644
index 000000000000..72a38024555a
--- /dev/null
+++ b/examples/official-storybook/stories/core/layout.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+const Box = ({ children, display = 'block' }) => (
+  <div style={{ display, border: '2px solid #FF4785', padding: 10 }}>{children}</div>
+);
+
+export default {
+  title: 'Core/Layout',
+};
+
+export const Default = () => <Box>padded by default</Box>;
+
+export const PaddedBlock = () => <Box>padded</Box>;
+PaddedBlock.parameters = { layout: 'padded' };
+
+export const PaddedInline = () => <Box display="inline-block">padded</Box>;
+PaddedInline.parameters = { layout: 'padded' };
+
+export const FullscreenBlock = () => <Box>fullscreen</Box>;
+FullscreenBlock.parameters = { layout: 'fullscreen' };
+
+export const FullscreenInline = () => <Box display="inline-block">fullscreen</Box>;
+FullscreenInline.parameters = { layout: 'fullscreen' };
+
+export const CenteredBlock = () => <Box>centered</Box>;
+CenteredBlock.parameters = { layout: 'centered' };
+
+export const CenteredInline = () => <Box display="inline-block">centered</Box>;
+CenteredInline.parameters = { layout: 'centered' };
+
+export const Invalid = () => <Box>invalid layout value</Box>;
+Invalid.parameters = { layout: '!invalid!' };
diff --git a/examples/official-storybook/stories/core/layout.stories.mdx b/examples/official-storybook/stories/core/layout.stories.mdx
new file mode 100644
index 000000000000..d824fde2fbd3
--- /dev/null
+++ b/examples/official-storybook/stories/core/layout.stories.mdx
@@ -0,0 +1,45 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import { Button } from '@storybook/react/demo';
+
+<Meta
+  title="Core/Layout MDX"
+  component={Button}
+  id="core-layout-mdx"
+  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+/>
+
+# Layout parameter
+
+This tests Storybook's built-in `layout` parameter, both as its applied in the canvas, and also how it's handled by the `Preview` block in `addon-docs`.
+
+## Default
+
+<Preview withToolbar>
+  <Story name="defaultValue">
+    <Button>Hello world</Button>
+  </Story>
+</Preview>
+
+## Padded
+
+<Preview withToolbar>
+  <Story name="padded" parameters={{ layout: 'padded' }}>
+    <Button>Hello world</Button>
+  </Story>
+</Preview>
+
+## Fullscreen
+
+<Preview withToolbar>
+  <Story name="fullscreen" parameters={{ layout: 'fullscreen' }}>
+    <Button>Hello world</Button>
+  </Story>
+</Preview>
+
+## Centered
+
+<Preview withToolbar>
+  <Story name="centered" parameters={{ layout: 'centered' }}>
+    <Button>Hello world</Button>
+  </Story>
+</Preview>
diff --git a/examples/official-storybook/stories/core/named-export-order.stories.js b/examples/official-storybook/stories/core/named-export-order.stories.js
new file mode 100644
index 000000000000..03fda7eb5bcf
--- /dev/null
+++ b/examples/official-storybook/stories/core/named-export-order.stories.js
@@ -0,0 +1,10 @@
+export default {
+  title: 'Core/Named Export Order',
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Story1 = () => 'story1';
+export const Story2 = () => 'story2';
+
+// eslint-disable-next-line no-underscore-dangle
+export const __namedExportsOrder = ['Story2', 'Story1'];
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index 2afcde8a13ad..f98c478beae2 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -1,17 +1,12 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 // We would need to add this in config.js idiomatically however that would make this file a bit confusing
 import { addParameters } from '@storybook/react';
-import { addDecorator } from '@storybook/react/dist/client/preview';
-
-addDecorator(fn => fn({ customStoryContext: 52, parameters: { customParameter: 42 } }));
 
 addParameters({ globalParameter: 'globalParameter' });
 
 export default {
   title: 'Core/Parameters',
-  decorators: [fn => fn({ parameters: { decoratorParameter: 'decoratorParameter' } })],
   parameters: {
     chapterParameter: 'chapterParameter',
   },
@@ -19,10 +14,11 @@ export default {
 
 // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
 // Given we sort of control the props, should we export a prop type?
-export const Passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
-  <pre>Parameters: {JSON.stringify(parameters, null, 2)}</pre>
+export const Passed = (_args, { parameters: { options, fileName, ...parameters }, ...rest }) => (
+  <div>
+    Parameters:
+    <pre>{JSON.stringify(parameters, null, 2)}</pre>
+  </div>
 );
-Passed.story = {
-  name: 'passed to story',
-  parameters: { storyParameter: 'storyParameter' },
-};
+Passed.storyName = 'passed to story';
+Passed.parameters = { storyParameter: 'storyParameter' };
diff --git a/examples/official-storybook/stories/core/reexport-source-loader.stories.js b/examples/official-storybook/stories/core/reexport-source-loader.stories.js
new file mode 100644
index 000000000000..8bbac6a575f4
--- /dev/null
+++ b/examples/official-storybook/stories/core/reexport-source-loader.stories.js
@@ -0,0 +1,8 @@
+export default {
+  title: 'Core/Re-export source loader',
+};
+
+const Story1 = () => 'story1';
+const Story2 = () => 'story2';
+
+export { Story1, Story2 };
diff --git a/examples/official-storybook/stories/core/rendering.stories.js b/examples/official-storybook/stories/core/rendering.stories.js
new file mode 100644
index 000000000000..f446292b95ff
--- /dev/null
+++ b/examples/official-storybook/stories/core/rendering.stories.js
@@ -0,0 +1,20 @@
+import React, { useRef } from 'react';
+
+export default {
+  title: 'Core/Rendering',
+};
+
+// NOTE: in our example apps each component is mounted twice as we render in strict mode
+let timesMounted = 0;
+export const Counter = () => {
+  const countRef = useRef();
+
+  if (!countRef.current) timesMounted += 1;
+  countRef.current = (countRef.current || 0) + 1;
+
+  return (
+    <div>
+      Mounted: {timesMounted}, rendered (this mount): {countRef.current}
+    </div>
+  );
+};
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 73b7b4bca47c..e614c386f622 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -7,11 +7,11 @@ export default {
   title: 'Core/Scroll',
 };
 
-const Horizontal = styled(props => <Spaced col={1} {...props} />)({
+const Horizontal = styled((props) => <Spaced col={1} {...props} />)({
   display: 'grid',
   gridTemplateColumns: '100px calc(100vw + 100px) 100px',
 });
-const Vertical = styled(props => <Spaced row={1} {...props} />)({});
+const Vertical = styled((props) => <Spaced row={1} {...props} />)({});
 
 export const Story1 = () => (
   <Vertical>
@@ -23,7 +23,7 @@ export const Story1 = () => (
     </pre>
   </Vertical>
 );
-Story1.story = { name: 'story with 100vh padding 1' };
+Story1.storyName = 'story with 100vh padding 1';
 
 export const Story2 = () => (
   <Vertical>
@@ -35,7 +35,7 @@ export const Story2 = () => (
     </pre>
   </Vertical>
 );
-Story2.story = { name: 'story with 100vh padding 2' };
+Story2.storyName = 'story with 100vh padding 2';
 
 export const Story3 = () => (
   <Horizontal>
@@ -44,7 +44,7 @@ export const Story3 = () => (
     <pre>END</pre>
   </Horizontal>
 );
-Story3.story = { name: 'story with 100vw+' };
+Story3.storyName = 'story with 100vw+';
 
 export const Story4 = () => (
   <Horizontal>
@@ -53,4 +53,4 @@ export const Story4 = () => (
     <pre>END</pre>
   </Horizontal>
 );
-Story4.story = { name: 'story with 100vw+ 2' };
+Story4.storyName = 'story with 100vw+ 2';
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
index d641ccae0054..710489cf5cfe 100644
--- a/examples/official-storybook/stories/demo/button.stories.js
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -14,9 +14,7 @@ export default {
 };
 
 export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-WithText.story = {
-  name: 'with text',
-};
+WithText.storyName = 'with text';
 
 export const WithSomeEmoji = () => (
   <Button onClick={action('clicked')}>
@@ -25,9 +23,7 @@ export const WithSomeEmoji = () => (
     </span>
   </Button>
 );
-WithSomeEmoji.story = {
-  name: 'with some emoji',
-};
+WithSomeEmoji.storyName = 'with some emoji';
 
 export const WithCounter = () => {
   const [counter, setCounter] = useState(0);
@@ -35,11 +31,10 @@ export const WithCounter = () => {
   return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
 };
 
-WithCounter.story = {
-  name: 'with counter',
-  parameters: {
-    docs: {
-      storyDescription: 'This demonstrates react hooks working inside stories. Go team! 🚀',
-    },
+WithCounter.storyName = 'with counter';
+
+WithCounter.parameters = {
+  docs: {
+    storyDescription: 'This demonstrates react hooks working inside stories. Go team! 🚀',
   },
 };
diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js
index 775b761ee1cc..621ea5cfaa06 100644
--- a/examples/official-storybook/stories/demo/welcome.stories.js
+++ b/examples/official-storybook/stories/demo/welcome.stories.js
@@ -11,6 +11,4 @@ export default {
 // - 'other-demo-buttonmdx--with-text'
 // - 'Other/Demo/ButtonMdx'
 export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
-ToStorybook.story = {
-  name: 'to Storybook',
-};
+ToStorybook.storyName = 'to Storybook';
diff --git a/examples/official-storybook/stories/deprecated/addon-actions.stories.js b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
deleted file mode 100644
index eb04f408d1de..000000000000
--- a/examples/official-storybook/stories/deprecated/addon-actions.stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 73146d7e075f..000000000000
--- a/examples/official-storybook/stories/deprecated/addon-events.stories.js
+++ /dev/null
@@ -1,86 +0,0 @@
-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
deleted file mode 100644
index f63fadce4b12..000000000000
--- a/examples/official-storybook/stories/deprecated/addon-info.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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/hooks.stories.js b/examples/official-storybook/stories/hooks.stories.js
index 6f705a024982..b9642a674927 100644
--- a/examples/official-storybook/stories/hooks.stories.js
+++ b/examples/official-storybook/stories/hooks.stories.js
@@ -2,14 +2,14 @@ import React from 'react';
 import { useEffect, useRef, useState } from '@storybook/client-api';
 
 export default {
-  title: 'Hooks',
+  title: 'Core/Hooks',
 };
 
 export const Checkbox = () => {
   const [on, setOn] = useState(false);
   return (
     <label>
-      <input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />
+      <input type="checkbox" checked={on} onChange={(e) => setOn(e.target.checked)} />
       On
     </label>
   );
@@ -17,7 +17,7 @@ export const Checkbox = () => {
 
 export const Input = () => {
   const [text, setText] = useState('foo');
-  return <input value={text} onChange={e => setText(e.target.value)} />;
+  return <input value={text} onChange={(e) => setText(e.target.value)} />;
 };
 
 export const Effect = () => {
@@ -39,7 +39,7 @@ export const ReactHookCheckbox = () => {
   const [on, setOn] = React.useState(false);
   return (
     <label>
-      <input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />
+      <input type="checkbox" checked={on} onChange={(e) => setOn(e.target.checked)} />
       On
     </label>
   );
diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js
index ed0f1e6540f1..734a8a8912be 100644
--- a/examples/official-storybook/stories/other-dirname.stories.js
+++ b/examples/official-storybook/stories/other-dirname.stories.js
@@ -4,13 +4,7 @@ import base from 'paths.macro';
 import BaseButton from '../components/BaseButton';
 
 export const story1 = () => <BaseButton label="Story 1" />;
-
-story1.story = {
-  name: 'story 1',
-};
+story1.storyName = 'story 1';
 
 export const story2 = () => <BaseButton label="Story 2" />;
-
-story2.story = {
-  name: 'story 2',
-};
+story2.storyName = 'story 2';
diff --git a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png
deleted file mode 100644
index 86ab2fdeaf3c..000000000000
Binary files a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png and /dev/null differ
diff --git a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png
new file mode 100644
index 000000000000..97342bef03de
Binary files /dev/null and b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png differ
diff --git a/examples/polymer-cli/.env b/examples/polymer-cli/.env
deleted file mode 100644
index d24e628d2810..000000000000
--- a/examples/polymer-cli/.env
+++ /dev/null
@@ -1 +0,0 @@
-STORYBOOK_EXAMPLE_APP=true
diff --git a/examples/polymer-cli/.eslintrc.js b/examples/polymer-cli/.eslintrc.js
deleted file mode 100644
index 531436200f94..000000000000
--- a/examples/polymer-cli/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  globals: {
-    Polymer: true,
-    customElements: true,
-    CustomEvent: true,
-  },
-};
diff --git a/examples/polymer-cli/.storybook/main.js b/examples/polymer-cli/.storybook/main.js
deleted file mode 100644
index c8af1fa7cf9c..000000000000
--- a/examples/polymer-cli/.storybook/main.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  stories: ['../src/stories/**/*.stories.js'],
-  addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-a11y/register',
-  ],
-  webpack: async config => {
-    config.module.rules.push({
-      test: [/\.stories\.js$/, /index\.js$/],
-      loaders: [require.resolve('@storybook/source-loader')],
-      include: [path.resolve(__dirname, '../src')],
-      enforce: 'pre',
-    });
-    config.plugins.push(new webpack.IgnorePlugin(/vertx/));
-    return config;
-  },
-};
diff --git a/examples/polymer-cli/.storybook/manager.js b/examples/polymer-cli/.storybook/manager.js
deleted file mode 100644
index ee8398728448..000000000000
--- a/examples/polymer-cli/.storybook/manager.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { addons } from '@storybook/addons';
-
-addons.setConfig({
-  showRoots: true,
-});
diff --git a/examples/polymer-cli/.storybook/preview.js b/examples/polymer-cli/.storybook/preview.js
deleted file mode 100644
index 6ec0701871b9..000000000000
--- a/examples/polymer-cli/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/polymer';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/polymer-cli/README.md b/examples/polymer-cli/README.md
deleted file mode 100644
index 8f7743a194d7..000000000000
--- a/examples/polymer-cli/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Polymer kitchen sink example
-
-This project was generated with [Polymer CLI](https://github.com/Polymer/polymer-cli) version 1.5.2.
-
-## Development server
-
-Run `yarn start` for a dev server. Navigate to `http://127.0.0.1:8081/components/polymer-cli/`.
-The app will automatically reload if you change any of the source files.
diff --git a/examples/polymer-cli/index.html b/examples/polymer-cli/index.html
deleted file mode 100644
index 5b4abb4d3ff5..000000000000
--- a/examples/polymer-cli/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-    <base href="/">
-    <title>Storybook for Polymer!</title>
-    <script src="webcomponents-loader.js"></script>
-    <script src="custom-elements-es5-adapter.js"></script>
-  </head>
-  <body>
-    <polymer-playground-app title="Polymer playground app"}></polymer-playground-app>
-  </body>
-</html>
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
deleted file mode 100644
index bcb52b675df2..000000000000
--- a/examples/polymer-cli/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "polymer-cli",
-  "version": "5.3.0-rc.0",
-  "private": true,
-  "scripts": {
-    "build-storybook": "build-storybook",
-    "start": "webpack-dev-server",
-    "storybook": "start-storybook -p 9001 -c .storybook"
-  },
-  "dependencies": {
-    "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/polymer": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@webcomponents/webcomponentsjs": "^1.2.0",
-    "global": "^4.3.2",
-    "lit-html": "^1.0.0",
-    "polymer-webpack-loader": "^2.0.3",
-    "webpack": "^4.33.0"
-  },
-  "devDependencies": {
-    "copy-webpack-plugin": "^5.0.0",
-    "html-webpack-plugin": "^4.0.0-beta.2",
-    "webpack-dev-server": "^3.8.2"
-  }
-}
diff --git a/examples/polymer-cli/src/logo.svg b/examples/polymer-cli/src/logo.svg
deleted file mode 100644
index b0d2bc689919..000000000000
--- a/examples/polymer-cli/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="256" height="178" viewBox="0 0 256 178" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><g fill="none"><path d="M153.6 177.98L51.194.605H102.4L204.807 177.98H153.6z" fill="#FF4081"/><path d="M153.6 177.98l25.6-44.344 25.607 44.344H153.6z" fill-opacity=".2" fill="#FFF"/><path d="M128 133.636l25.6 44.344 25.6-44.344H128z" fill-opacity=".1" fill="#FFF"/><path d="M102.4 89.292l25.6 44.344 25.6-44.344h-51.2z" fill-opacity=".1" fill="#000"/><path d="M102.4 89.292L128 44.948l25.6 44.344h-51.2z" fill-opacity=".2" fill="#000"/><path d="M76.8 44.948l25.6 44.344 25.601-44.344h-51.2z" fill-opacity=".3" fill="#000"/><path d="M76.8 44.948L102.4.605l25.601 44.343h-51.2z" fill-opacity=".4" fill="#000"/><path d="M51.194.605L76.8 44.948 102.4.605H51.195z" fill-opacity=".5" fill="#000"/><path d="M51.194 177.98L-.013 89.292l25.606-44.344L102.4 177.98H51.193z" fill="#536DFE"/><path d="M51.194 177.98L76.8 133.636l25.6 44.344H51.195z" fill-opacity=".2" fill="#FFF"/><path d="M25.593 133.636l25.6 44.344L76.8 133.636H25.593z" fill-opacity=".1" fill="#FFF"/><path d="M25.593 133.636l25.6-44.344L76.8 133.636H25.593z"/><path d="M-.013 89.292l25.606 44.344 25.6-44.344H-.012z" fill-opacity=".1" fill="#000"/><path d="M-.013 89.292l25.606-44.344 25.6 44.344H-.012z" fill-opacity=".2" fill="#000"/><path d="M51.194 89.292l-25.6-44.344L51.193.605 76.8 44.948 51.194 89.292z" fill="#303F9F"/><path d="M76.8 44.948L51.194.605l-25.6 44.343H76.8z" fill-opacity=".2" fill="#000"/><path d="M204.806 177.98L179.2 133.636l25.606-44.344 25.6 44.344-25.6 44.344z" fill="#3F51B5"/><path d="M230.407 133.636l-25.6 44.344-25.607-44.344h51.207z" fill-opacity=".2" fill="#000"/><path d="M230.407 133.636L153.6.605h51.207l51.207 88.687-25.606 44.344h-.001z" fill="#7986CB"/><path d="M204.806 89.292l25.6 44.344 25.607-44.344h-51.207z" fill-opacity=".2" fill="#FFF"/><path d="M204.806 89.292l25.6-44.344 25.607 44.344h-51.207z" fill-opacity=".1" fill="#FFF"/><path d="M179.2 44.948L204.806.605l25.6 44.343H179.2z" fill-opacity=".1" fill="#000"/><path d="M153.6.605l25.6 44.343L204.808.605H153.6z" fill-opacity=".2" fill="#000"/></g></svg>
\ No newline at end of file
diff --git a/examples/polymer-cli/src/playground-button.html b/examples/polymer-cli/src/playground-button.html
deleted file mode 100644
index 65dde755c29c..000000000000
--- a/examples/polymer-cli/src/playground-button.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<link rel="import" href="../../../node_modules/@polymer/polymer/polymer-element.html">
-
-<dom-module id="playground-button">
-  <template>
-    <style>
-      .square {
-        border: 1px solid #3c763d;
-        background-color: #5cb85c;
-        padding: 10px;
-      }
-      .rounded {
-        border-radius: 5px;
-        border: 1px solid #1b6d85;
-        background-color: #5bc0de;
-        padding: 10px;
-      }
-    </style>
-    <button on-click="handleTap"
-            class$="[[computedClass]]">
-      [[title]] [[counter]]
-    </button>
-  </template>
-  <script>
-    class PlaygroundButton extends Polymer.Element {
-      static get is() {
-        return 'playground-button';
-      }
-
-      static get properties() {
-        return {
-          title: { type: String, value: 'Click me:' },
-          counter: { type: Number, value: 0 },
-          isSquare: { type: Boolean, value: false },
-          computedClass: { type: String, computed: '_computeClass(isSquare)' },
-        };
-      }
-
-      handleTap() {
-        this.counter += 1;
-      }
-
-      _computeClass(isSquare) {
-        return isSquare ? 'square' : 'rounded';
-      }
-    }
-    customElements.define(PlaygroundButton.is, PlaygroundButton);
-  </script>
-</dom-module>
diff --git a/examples/polymer-cli/src/polymer-playground-app.html b/examples/polymer-cli/src/polymer-playground-app.html
deleted file mode 100644
index 137dec339a51..000000000000
--- a/examples/polymer-cli/src/polymer-playground-app.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<link rel="import" href="../../../node_modules/@polymer/polymer/polymer-element.html">
-<link rel="import" href="playground-button.html">
-
-<dom-module id="polymer-playground-app">
-  <template>
-    <h2>[[title]]</h2>
-    <p>Hello [[prop1]]!</p>
-    <playground-button></playground-button>
-  </template>
-  <script>
-    class PolymerPlaygroundApp extends Polymer.Element {
-      static get is() {
-        return 'polymer-playground-app';
-      }
-
-      static get properties() {
-        return { prop1: { type: String, value: 'polymer-playground-app' }, title: String };
-      }
-    }
-    customElements.define(PolymerPlaygroundApp.is, PolymerPlaygroundApp);
-  </script>
-</dom-module>
diff --git a/examples/polymer-cli/src/separated-button/separated-button.html b/examples/polymer-cli/src/separated-button/separated-button.html
deleted file mode 100644
index fe113ae489df..000000000000
--- a/examples/polymer-cli/src/separated-button/separated-button.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<link rel="import" href="../../../../node_modules/@polymer/polymer/polymer-element.html">
-
-<dom-module id="separated-button">
-  <template>
-    <button on-click="handleTap">
-      [[title]] [[counter]]
-    </button>
-  </template>
-  <script>
-    import { separatedButton } from './separated-button';
-
-    class PlaygroundButton extends separatedButton(Polymer.Element) {}
-    customElements.define(PlaygroundButton.is, PlaygroundButton);
-  </script>
-</dom-module>
diff --git a/examples/polymer-cli/src/separated-button/separated-button.js b/examples/polymer-cli/src/separated-button/separated-button.js
deleted file mode 100644
index 5fbc2d615a04..000000000000
--- a/examples/polymer-cli/src/separated-button/separated-button.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { uselessMixin } from './useless-mixin';
-
-export const separatedButton = superClass =>
-  class SeparatedButton extends uselessMixin(superClass) {
-    static get is() {
-      return 'separated-button';
-    }
-
-    static get properties() {
-      return {
-        title: {
-          type: String,
-          value: 'Click me:',
-        },
-        counter: {
-          type: Number,
-          value: 0,
-        },
-      };
-    }
-
-    async handleTap() {
-      this.counter += await Promise.resolve(1);
-      this.someMethod();
-    }
-  };
diff --git a/examples/polymer-cli/src/separated-button/useless-mixin.js b/examples/polymer-cli/src/separated-button/useless-mixin.js
deleted file mode 100644
index e7e2748ee3a8..000000000000
--- a/examples/polymer-cli/src/separated-button/useless-mixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const uselessMixin = superClass =>
-  class UselessMixin extends superClass {
-    constructor() {
-      super();
-
-      this.eventType = 'test';
-    }
-
-    someMethod() {
-      this.dispatchEvent(new CustomEvent(this.eventType, { detail: 'test' }));
-    }
-  };
diff --git a/examples/polymer-cli/src/simple-button.html b/examples/polymer-cli/src/simple-button.html
deleted file mode 100644
index 11d1963fb037..000000000000
--- a/examples/polymer-cli/src/simple-button.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<link rel="import" href="../../../node_modules/@polymer/polymer/polymer-element.html">
-
-<dom-module id="simple-button">
-  <template>
-    <style>
-      .simpleButton {
-        border: 1px solid black;
-        background-color: white;
-      }
-    </style>
-    <button on-click="handleClick" class="simpleButton">
-      [[title]]
-    </button>
-  </template>
-
-  <script>
-    class SimpleButton extends Polymer.Element {
-      static get is() {
-        return 'simple-button';
-      }
-
-      static get properties() {
-        return {
-          title: { type: String, value: 'Button' },
-          handleClick: { type: Function, value: () => {} },
-        };
-      }
-    }
-    customElements.define(SimpleButton.is, SimpleButton);
-  </script>
-</dom-module>
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
deleted file mode 100644
index 256046fd16f9..000000000000
--- a/examples/polymer-cli/src/stories/addon-actions.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { document } from 'global';
-
-import '../simple-button.html';
-
-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
deleted file mode 100644
index 69e615c5e8fb..000000000000
--- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-  title: 'Addon/Backgrounds',
-
-  parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
-  },
-};
-
-export const ButtonWithText = () => '<button>Click me</button>';
-
-ButtonWithText.story = {
-  name: 'button with text',
-};
diff --git a/examples/polymer-cli/src/stories/addon-knobs.stories.js b/examples/polymer-cli/src/stories/addon-knobs.stories.js
deleted file mode 100644
index ed5a1ee19ce5..000000000000
--- a/examples/polymer-cli/src/stories/addon-knobs.stories.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { action } from '@storybook/addon-actions';
-import { document } from 'global';
-import { html } from 'lit-html';
-
-import {
-  withKnobs,
-  text,
-  button,
-  number,
-  select,
-  date,
-  color,
-  array,
-  boolean,
-} from '@storybook/addon-knobs';
-
-storiesOf('Addon/Knobs', module)
-  .addDecorator(withKnobs)
-  .add('simple', () => {
-    const title = text('Button title', 'Hello');
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', title);
-    button('callback', () => el.setAttribute('title', 'testing'));
-    return el;
-  })
-  .add('lit-html', () => {
-    const title = text('Button title', 'Hello');
-    return html`
-      <playground-button title="${title}"></playground-button>
-    `;
-  })
-  .add('complex', () => {
-    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 stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    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>${item}</li>`).join('')}
-            </ul>
-            <p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
-          </div>
-        `;
-  })
-  .add('XSS safety', () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'));
diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js
deleted file mode 100644
index abf5e3e367cf..000000000000
--- a/examples/polymer-cli/src/stories/addon-links.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-import { document } from 'global';
-
-import '../simple-button.html';
-
-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
deleted file mode 100644
index c86773f8343d..000000000000
--- a/examples/polymer-cli/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default {
-  title: 'Addon/Notes',
-};
-
-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>
-
-        <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/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js
deleted file mode 100644
index ca95c2f09541..000000000000
--- a/examples/polymer-cli/src/stories/components/app.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 7f460b7d76db..000000000000
--- a/examples/polymer-cli/src/stories/components/button.stories.js
+++ /dev/null
@@ -1,8 +0,0 @@
-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
deleted file mode 100644
index 2113c1bd1049..000000000000
--- a/examples/polymer-cli/src/stories/components/welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index efa4e34b119c..000000000000
--- a/examples/polymer-cli/src/stories/core.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { addParameters } from '@storybook/polymer';
-
-const globalParameter = 'globalParameter';
-const chapterParameter = 'chapterParameter';
-const storyParameter = 'storyParameter';
-
-addParameters({ globalParameter });
-
-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
deleted file mode 100644
index d3d7b475d09c..000000000000
--- a/examples/polymer-cli/src/stories/custom-decorators.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { document } from 'global';
-
-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/custom-rendering.stories.js b/examples/polymer-cli/src/stories/custom-rendering.stories.js
deleted file mode 100644
index 32ff209cb21b..000000000000
--- a/examples/polymer-cli/src/stories/custom-rendering.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { document } from 'global';
-import { html } from 'lit-html';
-import { StringTemplateButton } from '../string-template-button';
-
-import '../separated-button/separated-button.html';
-
-storiesOf('Custom/Methods for rendering', module)
-  .add('html string', () => '<div>Rendered with string</div>')
-  .add('html with custom elements', () => '<separated-button title="Click me!"></separated-button>')
-  .add('document.createElement', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'Rendered with document.createElement');
-    return el;
-  })
-  .add('Polymer instance', () => new StringTemplateButton())
-  .add(
-    'Lit html',
-    () =>
-      html`
-        <separated-button title="yes!"></separated-button>
-      `
-  );
diff --git a/examples/polymer-cli/src/stories/storybook-welcome-to-polymer.html b/examples/polymer-cli/src/stories/storybook-welcome-to-polymer.html
deleted file mode 100644
index 76e95721aeb3..000000000000
--- a/examples/polymer-cli/src/stories/storybook-welcome-to-polymer.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<link rel="import" href="../../../../node_modules/@polymer/polymer/polymer-element.html">
-
-<dom-module id="storybook-welcome-to-polymer">
-  <template>
-    <style>
-      .main {
-        margin: 15px;
-        max-width: 600px;
-        line-height: 1.4;
-        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-      }
-
-      .logo {
-        width: 200px;
-      }
-
-      .code {
-        font-size: 15px;
-        font-weight: 600;
-        padding: 2px 5px;
-        border: 1px solid #eae9e9;
-        border-radius: 4px;
-        background-color: #f3f2f2;
-        color: #3a3a3a;
-      }
-
-      .note {
-        opacity: 0.5;
-      }
-    </style>
-    <div class="main">
-      <h1>Welcome to Storybook for Polymer</h1>
-      <p>This is a UI component dev environment for your polymer 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" href="#" on-click="goToButtonWrapper">stories</a> for a component called <code class="code">playground-button</code>
-      </p>
-
-      <p style="text-align:center"><img src="../logo.svg" class="logo" /></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">playground-button</code> stories
-        located at <code class="code">src/playground-button.html</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>
-  </template>
-  <script>
-    class StorybookWelcomeToPolymer extends Polymer.Element {
-      static get is() {
-        return 'storybook-welcome-to-polymer';
-      }
-
-      static get properties() {
-        return { goToButton: { type: Function, value: () => {} } };
-      }
-
-      goToButtonWrapper(e) {
-        e.preventDefault();
-        this.goToButton();
-      }
-    }
-    customElements.define(StorybookWelcomeToPolymer.is, StorybookWelcomeToPolymer);
-  </script>
-</dom-module>
diff --git a/examples/polymer-cli/src/string-template-button.js b/examples/polymer-cli/src/string-template-button.js
deleted file mode 100644
index 362e2d50735c..000000000000
--- a/examples/polymer-cli/src/string-template-button.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export class StringTemplateButton extends Polymer.Element {
-  static get is() {
-    return 'string-template-button';
-  }
-
-  static get properties() {
-    return {
-      title: {
-        type: String,
-        value: 'Wow, I am inline',
-      },
-      counter: {
-        type: Number,
-        value: 0,
-      },
-    };
-  }
-
-  static get template() {
-    return '<button on-click="handleTap">[[title]]: [[counter]]</button>';
-  }
-
-  handleTap() {
-    this.counter += 1;
-  }
-}
-
-customElements.define(StringTemplateButton.is, StringTemplateButton);
diff --git a/examples/polymer-cli/webpack.config.js b/examples/polymer-cli/webpack.config.js
deleted file mode 100644
index 0ecc356b21d2..000000000000
--- a/examples/polymer-cli/webpack.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  entry: './src/polymer-playground-app.html',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    filename: '[name].[chunkhash:8].js',
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.html$/,
-        exclude: require.resolve('./index.html'),
-        use: [{ loader: 'babel-loader' }, { loader: 'polymer-webpack-loader' }],
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-    }),
-    new CopyWebpackPlugin([
-      { from: require.resolve('@webcomponents/webcomponentsjs/webcomponents-lite.js') },
-      { from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
-    ]),
-  ],
-  devServer: { historyApiFallback: true },
-  devtool: 'eval-source-map',
-};
diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js
index 1e54e3dd80ed..c20a8b0496a0 100644
--- a/examples/preact-kitchen-sink/.storybook/main.js
+++ b/examples/preact-kitchen-sink/.storybook/main.js
@@ -3,18 +3,15 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.js'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-contexts/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
   ],
-  webpack: config => {
+  webpackFinal: (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/preact-kitchen-sink/.storybook/preview.js b/examples/preact-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index 9f10bed13266..000000000000
--- a/examples/preact-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/** @jsx h */
-import { addDecorator } from '@storybook/preact';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index b3732df32bbc..c369363df1a9 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "preact-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -13,30 +13,31 @@
     "preact": "^8.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-contexts": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/preact": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/preact": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "babel-loader": "^8.0.4",
-    "cross-env": "^6.0.3",
-    "file-loader": "^4.2.0",
+    "cross-env": "^7.0.0",
+    "file-loader": "^6.0.0",
     "preact-render-to-json": "^3.6.6",
-    "raw-loader": "^3.1.0",
-    "svg-url-loader": "^3.0.2",
+    "raw-loader": "^4.0.1",
+    "svg-url-loader": "^5.0.0",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "ls0ikhnwqt"
+    }
   }
 }
diff --git a/examples/preact-kitchen-sink/src/Welcome.js b/examples/preact-kitchen-sink/src/Welcome.js
index fc7649231ddd..479be7c62bff 100644
--- a/examples/preact-kitchen-sink/src/Welcome.js
+++ b/examples/preact-kitchen-sink/src/Welcome.js
@@ -2,7 +2,7 @@
 
 import { h } from 'preact';
 
-const Main = props => (
+const Main = (props) => (
   <article
     {...props}
     style={{
@@ -17,7 +17,7 @@ const Main = props => (
 // eslint-disable-next-line react/prop-types
 const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
 
-const Note = props => (
+const Note = (props) => (
   <p
     {...props}
     style={{
@@ -26,7 +26,7 @@ const Note = props => (
   />
 );
 
-const InlineCode = props => (
+const InlineCode = (props) => (
   <code
     {...props}
     style={{
@@ -112,7 +112,7 @@ const Welcome = ({ showApp }) => (
       You can also edit those components and see changes right away.
       <br />
       (Try editing the <InlineCode>Button</InlineCode> stories located at&nbsp;
-      <InlineCode>src/stories/index.js</InlineCode>
+      <InlineCode>src/stories/1-Button.stories.js</InlineCode>
       .)
     </p>
     <p>
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 10dd171ca221..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Centered Button  1`] = `
-Object {
-  "__": null,
-  "__b": 0,
-  "__c": null,
-  "__d": null,
-  "__e": null,
-  "__k": null,
-  "constructor": undefined,
-  "key": undefined,
-  "props": Object {
-    "children": Object {
-      "__": null,
-      "__b": 0,
-      "__c": null,
-      "__d": null,
-      "__e": null,
-      "__k": null,
-      "constructor": undefined,
-      "key": undefined,
-      "props": Object {
-        "children": VNode {
-          "attributes": undefined,
-          "children": Array [
-            "A button",
-          ],
-          "key": undefined,
-          "nodeName": [Function],
-        },
-        "style": Object {
-          "margin": "auto",
-          "maxHeight": "100%",
-        },
-      },
-      "ref": undefined,
-      "type": "div",
-    },
-    "style": Object {
-      "alignItems": "center",
-      "bottom": "0",
-      "display": "flex",
-      "left": "0",
-      "overflow": "auto",
-      "position": "fixed",
-      "right": "0",
-      "top": "0",
-    },
-  },
-  "ref": undefined,
-  "type": "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 a6b5d181139f..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-notes.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index c2244acf527d..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/__snapshots__/welcome.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
index 9ab4da81238d..5d740bb097a3 100644
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
@@ -128,7 +128,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         }
       }
     >
-      src/stories/index.js
+      src/stories/1-Button.stories.js
     </code>
     .)
   </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 39705549882e..0d1547737d65 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
@@ -11,17 +11,13 @@ export default {
 
 export const ActionOnly = () => <Button onclick={action('log')}>Click me to log the action</Button>;
 
-ActionOnly.story = {
-  name: 'Action only',
-};
+ActionOnly.storyName = 'Action only';
 
 export const MultipleActions = () => (
   <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
 );
 
-MultipleActions.story = {
-  name: 'Multiple actions',
-};
+MultipleActions.storyName = 'Multiple actions';
 
 export const MultipleActionsObject = () => (
   <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
@@ -29,13 +25,11 @@ export const MultipleActionsObject = () => (
   </Button>
 );
 
-MultipleActionsObject.story = {
-  name: 'Multiple actions, object',
-};
+MultipleActionsObject.storyName = 'Multiple actions, object';
 
 export const ActionAndMethod = () => (
   <Button
-    onclick={event => {
+    onclick={(event) => {
       event.preventDefault();
       action('method-log')(event.target);
     }}
@@ -44,6 +38,4 @@ export const ActionAndMethod = () => (
   </Button>
 );
 
-ActionAndMethod.story = {
-  name: 'Action and method',
-};
+ActionAndMethod.storyName = '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 49db337988d8..da4fa9902acd 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -8,10 +8,13 @@ export default {
   title: 'Addons/Backgrounds',
 
   parameters: {
-    backgrounds: [
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ],
+    backgrounds: {
+      default: 'facebook',
+      values: [
+        { name: 'twitter', value: '#00aced' },
+        { name: 'facebook', value: '#3b5998' },
+      ],
+    },
   },
 };
 
@@ -19,12 +22,8 @@ export const Example1 = () => (
   <Button>You should be able to switch backgrounds for this story</Button>
 );
 
-Example1.story = {
-  name: 'Example 1',
-};
+Example1.storyName = 'Example 1';
 
 export const Example2 = () => <Button>This one too!</Button>;
 
-Example2.story = {
-  name: 'Example 2',
-};
+Example2.storyName = '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
deleted file mode 100644
index 3faae466226d..000000000000
--- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
-import Centered from '@storybook/addon-centered/preact';
-import Button from '../Button';
-
-export default {
-  title: 'Addons/Centered',
-  component: Button,
-  decorators: [Centered],
-};
-
-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
deleted file mode 100644
index f310300239ce..000000000000
--- a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-import { withContexts } from '@storybook/addon-contexts/preact';
-
-// Example A: Simple CSS Theming
-const topLevelContexts = [
-  {
-    icon: 'sidebaralt',
-    title: 'CSS Themes',
-    components: ['div'],
-    params: [
-      {
-        name: 'Desert',
-        props: {
-          style: { color: 'brown', background: '#F4A261', height: '100vh', padding: '10px' },
-        },
-      },
-      {
-        name: 'Ocean',
-        props: {
-          style: { color: 'white', background: '#173F5F', height: '100vh', padding: '10px' },
-        },
-        default: true,
-      },
-    ],
-  },
-];
-
-const storyLevelContexts = [
-  {
-    title: 'CSS Themes',
-    params: [
-      {
-        name: 'Forest',
-        props: {
-          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
-        },
-      },
-    ],
-  },
-];
-
-export default {
-  title: 'Addons/Contexts',
-  decorators: [withContexts(topLevelContexts)],
-};
-
-export const SimpleCssTheming = () => (
-  <div>I'm a children of the injected 'div' (where provides a theming context).</div>
-);
-
-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 8007e50bf1c8..01a976dcddae 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -64,7 +64,7 @@ export const AllKnobs = () => {
       <p>{stockMessage}</p>
       <p>Also, I have:</p>
       <ul>
-        {items.map(item => (
+        {items.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -73,6 +73,4 @@ export const AllKnobs = () => {
   );
 };
 
-AllKnobs.story = {
-  name: 'All knobs',
-};
+AllKnobs.storyName = '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 e36cdceeed35..a88a2e2f5798 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
@@ -14,6 +14,4 @@ export const GoToWelcome = () => (
   <Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
 );
 
-GoToWelcome.story = {
-  name: 'Go to welcome',
-};
+GoToWelcome.storyName = '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
deleted file mode 100644
index 9f5b05b996b6..000000000000
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
-import { withNotes } from '@storybook/addon-notes';
-
-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
index 8bdbbad0b384..597d5cb4bcf5 100644
--- a/examples/preact-kitchen-sink/src/stories/button.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/button.stories.js
@@ -12,9 +12,7 @@ export default {
 
 export const WithText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
 
-WithText.story = {
-  name: 'with text',
-};
+WithText.storyName = 'with text';
 
 export const WithSomeEmoji = () => (
   <Button onclick={action('clicked')}>
@@ -24,6 +22,4 @@ export const WithSomeEmoji = () => (
   </Button>
 );
 
-WithSomeEmoji.story = {
-  name: 'with some emoji',
-};
+WithSomeEmoji.storyName = 'with some emoji';
diff --git a/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
index db0487bfc335..f25999a441c6 100644
--- a/examples/preact-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -14,6 +14,4 @@ export default {
 
 export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-ToStorybook.story = {
-  name: 'to Storybook',
-};
+ToStorybook.storyName = 'to Storybook';
diff --git a/examples/rax-kitchen-sink/.babelrc.js b/examples/rax-kitchen-sink/.babelrc.js
deleted file mode 100644
index 3a33379a6ddb..000000000000
--- a/examples/rax-kitchen-sink/.babelrc.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
-    ['babel-preset-rax', { development: process.env.BABEL_ENV === 'development' }],
-  ],
-};
diff --git a/examples/rax-kitchen-sink/.storybook/main.js b/examples/rax-kitchen-sink/.storybook/main.js
index 1075d2a9d6db..268c5eb3edd2 100644
--- a/examples/rax-kitchen-sink/.storybook/main.js
+++ b/examples/rax-kitchen-sink/.storybook/main.js
@@ -3,18 +3,16 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.js'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-events/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-jest/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-events',
+    '@storybook/addon-knobs',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
+    '@storybook/addon-jest',
   ],
-  webpack: async config => ({
+  webpackFinal: async (config) => ({
     ...config,
     module: {
       ...config.module,
@@ -26,10 +24,6 @@ module.exports = {
           include: [path.resolve(__dirname, '../src')],
           enforce: 'pre',
         },
-        {
-          test: /\.stylesheet$/,
-          use: [require.resolve('stylesheet-loader')],
-        },
       ],
     },
   }),
diff --git a/examples/rax-kitchen-sink/babel.config.js b/examples/rax-kitchen-sink/babel.config.js
new file mode 100644
index 000000000000..60ee7951d28c
--- /dev/null
+++ b/examples/rax-kitchen-sink/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+    [
+      '@babel/preset-react',
+      {
+        pragma: 'createElement',
+      },
+    ],
+  ],
+};
diff --git a/examples/rax-kitchen-sink/build.json b/examples/rax-kitchen-sink/build.json
new file mode 100644
index 000000000000..b7f0e676bf6b
--- /dev/null
+++ b/examples/rax-kitchen-sink/build.json
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": ["web"]
+      }
+    ]
+  ]
+}
diff --git a/examples/rax-kitchen-sink/jest-addon.config.js b/examples/rax-kitchen-sink/jest-addon.config.js
deleted file mode 100644
index 98355e285d64..000000000000
--- a/examples/rax-kitchen-sink/jest-addon.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = {
-  roots: [__dirname],
-  moduleNameMapper: {
-    '\\.(css|scss|stylesheet)$': '<rootDir>/../../__mocks__/styleMock.js',
-    '\\.(md)$': '<rootDir>/../../__mocks__/htmlMock.js',
-  },
-  transform: {
-    '^.+\\.jsx?$': '<rootDir>/../../scripts/babel-jest.js',
-  },
-  projects: ['<rootDir >'],
-  moduleDirectories: ['<rootDir>/node_modules', 'src', '<rootDir>/../../node_modules'],
-};
diff --git a/examples/rax-kitchen-sink/jest.config.js b/examples/rax-kitchen-sink/jest.config.js
deleted file mode 100644
index c5b8fa53f5d9..000000000000
--- a/examples/rax-kitchen-sink/jest.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const config = require('../../jest.config');
-
-module.exports = {
-  ...config,
-  roots: [__dirname],
-  moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|scss|stylesheet)$': '<rootDir>/__mocks__/styleMock.js',
-    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
-  },
-  moduleDirectories: ['<rootDir>/node_modules', 'src'],
-};
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index 14ebbd199624..ab9664ac8d8b 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,18 +1,15 @@
 {
   "name": "rax-kitchen-sink",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
-    "build": "rax-scripts build",
-    "prebuild-storybook": "yarn test:generate-output",
+    "build": "build-scripts build",
     "build-storybook": "build-storybook -s public",
-    "start": "rax-scripts start",
-    "prestorybook": "yarn test:generate-output",
-    "storybook": "start-storybook -p 9009 -s public",
-    "test": "jest",
-    "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js -u"
+    "start": "build-scripts start",
+    "storybook": "start-storybook -p 9009 -s public"
   },
   "dependencies": {
+    "driver-universal": "^3.0.0",
     "event-emitter": "^0.3.5",
     "rax": "^1.1.0",
     "rax-image": "^1.0.0",
@@ -21,28 +18,29 @@
     "rax-view": "^1.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-events": "5.3.0-rc.0",
-    "@storybook/addon-info": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/rax": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@alib/build-scripts": "^0.1.8",
+    "@babel/preset-react": "^7.7.4",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-events": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/rax": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "babel-eslint": "^10.0.3",
-    "babel-preset-rax": "^1.0.0-beta.0",
-    "rax-scripts": "^2.0.0",
-    "rax-test-renderer": "^1.0.0",
-    "stylesheet-loader": "^0.6.5"
+    "build-plugin-rax-app": "^0.2.0",
+    "stylesheet-loader": "^0.8.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "4co6vptx8qo"
+    }
   }
 }
diff --git a/examples/rax-kitchen-sink/public/index.html b/examples/rax-kitchen-sink/public/index.html
deleted file mode 100644
index e073ec63b24c..000000000000
--- a/examples/rax-kitchen-sink/public/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="format-detection" content="telephone=no">
-  <title>Rax App</title>
-  <style>
-    body {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: flex;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <script src="//unpkg.com/web-rax-framework@0.6.5/dist/framework.web.js"></script>
-</body>
-</html>
diff --git a/examples/rax-kitchen-sink/public/rax-logo.png b/examples/rax-kitchen-sink/public/rax-logo.png
deleted file mode 100644
index cc73a41a3daf..000000000000
Binary files a/examples/rax-kitchen-sink/public/rax-logo.png and /dev/null differ
diff --git a/examples/rax-kitchen-sink/src/app.js b/examples/rax-kitchen-sink/src/app.js
new file mode 100644
index 000000000000..10501ae7fbde
--- /dev/null
+++ b/examples/rax-kitchen-sink/src/app.js
@@ -0,0 +1,7 @@
+import { createElement, render } from 'rax';
+import DriverUniversal from 'driver-universal';
+import { App } from './components/App/index';
+
+render(<App />, null, {
+  driver: DriverUniversal,
+});
diff --git a/examples/rax-kitchen-sink/src/components/App/App.test.js b/examples/rax-kitchen-sink/src/components/App/App.test.js
deleted file mode 100644
index 4aab78399d6f..000000000000
--- a/examples/rax-kitchen-sink/src/components/App/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createElement } from 'rax';
-import renderer from 'rax-test-renderer';
-import { App } from './index';
-
-test('App render correctly', () => {
-  const tree = renderer.create(<App />).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
diff --git a/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap b/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap
deleted file mode 100644
index 19cadb1f181c..000000000000
--- a/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App render correctly 1`] = `
-Object {
-  "attributes": Object {
-    "class": "rax-view",
-  },
-  "children": Array [
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "Welcome to Rax",
-          ],
-          "style": Object {
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "tagName": "DIV",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-text ",
-      },
-      "children": Array [
-        "To get started, edit src/components/App.js and save to reload.",
-      ],
-      "style": Object {
-        "webkitLineClamp": undefined,
-      },
-      "tagName": "SPAN",
-    },
-  ],
-  "tagName": "DIV",
-}
-`;
diff --git a/examples/rax-kitchen-sink/src/components/App/index.js b/examples/rax-kitchen-sink/src/components/App/index.js
index 2cdfa966eee8..32805bfb831e 100644
--- a/examples/rax-kitchen-sink/src/components/App/index.js
+++ b/examples/rax-kitchen-sink/src/components/App/index.js
@@ -1,15 +1,67 @@
+/* eslint-disable react/prop-types */
 import { createElement } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';
-import styles from './index.stylesheet';
-
-export const App = () => (
-  <View style={styles.app}>
-    <View style={styles.appHeader}>
-      <Text style={styles.appBanner}>Welcome to Rax</Text>
-    </View>
-    <Text style={styles.appIntro}>
-      To get started, edit src/components/App.js and save to reload.
-    </Text>
+import Image from 'rax-image';
+
+const Main = ({ children, ...props }) => (
+  <View
+    {...props}
+    style={{
+      margin: 15,
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+    }}
+  >
+    {children}
   </View>
 );
+
+const P = ({ children, ...props }) => (
+  <View {...props} style={{ marginBottom: 10 }}>
+    <Text style={{ fontSize: 12 }}>{children}</Text>
+  </View>
+);
+
+const Title = ({ children, ...props }) => (
+  <Text {...props} style={{ fontSize: 40, lineHeight: '80px', fontWeight: 'bold' }}>
+    {children}
+  </Text>
+);
+
+export const App = ({ showApp }) => (
+  <Main>
+    <Title>Welcome to storybook for Rax</Title>
+    <Image
+      source={{
+        uri: './rax-logo.png',
+      }}
+      fallbackSource={{
+        uri:
+          'https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png',
+      }}
+      style={{
+        width: 100,
+        height: 100,
+        margin: '0 auto',
+      }}
+      resizeMode="cover"
+    />
+
+    <P>This is a UI component dev environment for your Rax app.</P>
+    <P>
+      We've added some basic stories inside the 'src/stories' directory. A story is a single state
+      of one or more UI components. You can have as many stories as you want. (Basically a story is
+      like a visual test case.)
+    </P>
+    <P>See these sample</P>
+    <button onPress={showApp} type="button">
+      <P>button</P>
+    </button>
+    <P>for a component called 'Button'.</P>
+    <P>
+      Just like that, you can add your own components as stories. You can also edit those components
+      and see changes right away. (Try editing the 'Button' stories located at
+      'src/stories/index.js' .)
+    </P>
+  </Main>
+);
diff --git a/examples/rax-kitchen-sink/src/components/App/index.stylesheet b/examples/rax-kitchen-sink/src/components/App/index.stylesheet
deleted file mode 100644
index 136c2936a77a..000000000000
--- a/examples/rax-kitchen-sink/src/components/App/index.stylesheet
+++ /dev/null
@@ -1,27 +0,0 @@
-.app {
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  background-color: #222;
-  color: white;
-  padding: 40px;
-}
-
-.appHeader {
-  height: 160;
-  padding: 40px;
-}
-
-.appBanner, .appIntro {
-  text-align: center;
-}
-
-.appBanner {
-  font-size: 40;
-  color: white;
-}
-
-.appIntro {
-  margin-top: 40;
-  font-size: 20;
-}
diff --git a/examples/rax-kitchen-sink/src/components/Welcome/Welcome.test.js b/examples/rax-kitchen-sink/src/components/Welcome/Welcome.test.js
deleted file mode 100644
index 0881e2f63730..000000000000
--- a/examples/rax-kitchen-sink/src/components/Welcome/Welcome.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createElement } from 'rax';
-import renderer from 'rax-test-renderer';
-import { Welcome } from './index';
-
-test('Welcome render correctly', () => {
-  const tree = renderer.create(<Welcome />).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
diff --git a/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap b/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap
deleted file mode 100644
index 0897cf06fc14..000000000000
--- a/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap
+++ /dev/null
@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Welcome render correctly 1`] = `
-Object {
-  "attributes": Object {
-    "class": "rax-view",
-  },
-  "children": Array [
-    Object {
-      "attributes": Object {
-        "class": "rax-text ",
-      },
-      "children": Array [
-        "Welcome to storybook for Rax",
-      ],
-      "style": Object {
-        "fontSize": 40,
-        "fontWeight": "bold",
-        "lineHeight": "80px",
-        "webkitLineClamp": undefined,
-      },
-      "tagName": "SPAN",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-image ",
-        "fallbackSource": Object {
-          "uri": "https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png",
-        },
-        "resizeMode": "cover",
-        "src": "./rax-logo.png",
-      },
-      "eventListeners": Object {
-        "error": [Function],
-        "load": [Function],
-      },
-      "style": Object {
-        "height": 100,
-        "margin": "0 auto",
-        "objectFit": "cover",
-        "width": 100,
-      },
-      "tagName": "IMG",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "This is a UI component dev environment for your Rax app.",
-          ],
-          "style": Object {
-            "fontSize": 12,
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "style": Object {
-        "marginBottom": 10,
-      },
-      "tagName": "DIV",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "We&#x27;ve added some basic stories inside the &#x27;src/stories&#x27; directory. A story is a single state of one or more UI components. You can have as many stories as you want. (Basically a story is like a visual test case.)",
-          ],
-          "style": Object {
-            "fontSize": 12,
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "style": Object {
-        "marginBottom": 10,
-      },
-      "tagName": "DIV",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "See these sample",
-          ],
-          "style": Object {
-            "fontSize": 12,
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "style": Object {
-        "marginBottom": 10,
-      },
-      "tagName": "DIV",
-    },
-    Object {
-      "attributes": Object {
-        "type": "button",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-view",
-          },
-          "children": Array [
-            Object {
-              "attributes": Object {
-                "class": "rax-text ",
-              },
-              "children": Array [
-                "button",
-              ],
-              "style": Object {
-                "fontSize": 12,
-                "webkitLineClamp": undefined,
-              },
-              "tagName": "SPAN",
-            },
-          ],
-          "style": Object {
-            "marginBottom": 10,
-          },
-          "tagName": "DIV",
-        },
-      ],
-      "tagName": "BUTTON",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "for a component called &#x27;Button&#x27;.",
-          ],
-          "style": Object {
-            "fontSize": 12,
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "style": Object {
-        "marginBottom": 10,
-      },
-      "tagName": "DIV",
-    },
-    Object {
-      "attributes": Object {
-        "class": "rax-view",
-      },
-      "children": Array [
-        Object {
-          "attributes": Object {
-            "class": "rax-text ",
-          },
-          "children": Array [
-            "Just like that, you can add your own components as stories. You can also edit those components and see changes right away. (Try editing the &#x27;Button&#x27; stories located at &#x27;src/stories/index.js&#x27; .)",
-          ],
-          "style": Object {
-            "fontSize": 12,
-            "webkitLineClamp": undefined,
-          },
-          "tagName": "SPAN",
-        },
-      ],
-      "style": Object {
-        "marginBottom": 10,
-      },
-      "tagName": "DIV",
-    },
-  ],
-  "style": Object {
-    "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
-    "margin": 15,
-  },
-  "tagName": "DIV",
-}
-`;
diff --git a/examples/rax-kitchen-sink/src/components/Welcome/index.js b/examples/rax-kitchen-sink/src/components/Welcome/index.js
deleted file mode 100644
index b1d9aa9aff2f..000000000000
--- a/examples/rax-kitchen-sink/src/components/Welcome/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable react/prop-types */
-import { createElement } from 'rax';
-import View from 'rax-view';
-import Text from 'rax-text';
-import Image from 'rax-image';
-
-const Main = ({ children, ...props }) => (
-  <View
-    {...props}
-    style={{
-      margin: 15,
-      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-    }}
-  >
-    {children}
-  </View>
-);
-
-const P = ({ children, ...props }) => (
-  <View {...props} style={{ marginBottom: 10 }}>
-    <Text style={{ fontSize: 12 }}>{children}</Text>
-  </View>
-);
-
-const Title = ({ children, ...props }) => (
-  <Text {...props} style={{ fontSize: 40, lineHeight: '80px', fontWeight: 'bold' }}>
-    {children}
-  </Text>
-);
-
-export const Welcome = ({ showApp }) => (
-  <Main>
-    <Title>Welcome to storybook for Rax</Title>
-    <Image
-      source={{
-        uri: './rax-logo.png',
-      }}
-      fallbackSource={{
-        uri:
-          'https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png',
-      }}
-      style={{
-        width: 100,
-        height: 100,
-        margin: '0 auto',
-      }}
-      resizeMode="cover"
-    />
-
-    <P>This is a UI component dev environment for your Rax app.</P>
-    <P>
-      We've added some basic stories inside the 'src/stories' directory. A story is a single state
-      of one or more UI components. You can have as many stories as you want. (Basically a story is
-      like a visual test case.)
-    </P>
-    <P>See these sample</P>
-    <button onPress={showApp} type="button">
-      <P>button</P>
-    </button>
-    <P>for a component called 'Button'.</P>
-    <P>
-      Just like that, you can add your own components as stories. You can also edit those components
-      and see changes right away. (Try editing the 'Button' stories located at
-      'src/stories/index.js' .)
-    </P>
-  </Main>
-);
diff --git a/examples/rax-kitchen-sink/src/document/index.jsx b/examples/rax-kitchen-sink/src/document/index.jsx
new file mode 100644
index 000000000000..18347d00dc1a
--- /dev/null
+++ b/examples/rax-kitchen-sink/src/document/index.jsx
@@ -0,0 +1,32 @@
+import { createElement } from 'rax';
+
+function Document(props) {
+  const { publicPath, styles, scripts } = props;
+
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Rax App</title>
+        {styles.map((src, index) => (
+          <link rel="stylesheet" href={`${publicPath}${src}`} key={`style_${index}`} />
+        ))}
+      </head>
+      <body>
+        {/* root container */}
+        <div id="root" />
+        {scripts.map((src, index) => (
+          <script src={`${publicPath}${src}`} key={`script_${index}`}>
+            {/* self-closing script element will not work in HTML */}
+          </script>
+        ))}
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/rax-kitchen-sink/src/index.js b/examples/rax-kitchen-sink/src/index.js
deleted file mode 100644
index 2d90540a8cb2..000000000000
--- a/examples/rax-kitchen-sink/src/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createElement, render } from 'rax';
-import { App } from './components/App/index';
-
-render(<App />);
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 49b953eff4f1..6016d0d01640 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -1,28 +1,16 @@
 import { createElement } from 'rax';
-import { withA11Y } from '@storybook/addon-a11y';
 import Text from 'rax-text';
 import View from 'rax-view';
-import markdown from './note.md';
 
 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 🚀🚀🚀🚀🚀',
-  },
-};
+WithStyle.storyName = 'with style';
 
 export const WithMarkdown = () => (
   <button type="button">
@@ -35,11 +23,4 @@ export const WithMarkdown = () => (
   </button>
 );
 
-WithMarkdown.story = {
-  name: 'with markdown',
-  parameters: {
-    notes: {
-      markdown,
-    },
-  },
-};
+WithMarkdown.storyName = 'with 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 28ff6fbd609c..a5d6a1fc0539 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
@@ -13,9 +13,7 @@ export const WithText = () => (
   </button>
 );
 
-WithText.story = {
-  name: 'with text',
-};
+WithText.storyName = 'with text';
 
 export const WithSomeEmoji = () => (
   <button onClick={action('clicked')} type="button">
@@ -25,6 +23,4 @@ export const WithSomeEmoji = () => (
   </button>
 );
 
-WithSomeEmoji.story = {
-  name: 'with some emoji',
-};
+WithSomeEmoji.storyName = '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
deleted file mode 100644
index 9cc99bf112f0..000000000000
--- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createElement } from 'rax';
-import Centered from '@storybook/addon-centered/rax';
-import Text from 'rax-text';
-import { App as AppComponent } from '../components/App';
-
-export default {
-  title: 'Addon/addon-centered',
-  decorators: [Centered],
-};
-
-export const Button = () => (
-  <button type="button">
-    <Text>BUTTON</Text>
-  </button>
-);
-
-export const App = () => <AppComponent />;
diff --git a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js b/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
deleted file mode 100644
index 961f8b7e8407..000000000000
--- a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createElement } from 'rax';
-import { withTests } from '@storybook/addon-jest';
-import { App } from '../components/App';
-import { Welcome } from '../components/Welcome';
-// eslint-disable-next-line
-import results from '../../jest-test-results.json';
-
-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 ffeb0093657c..2777e6a6e6e0 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -34,9 +34,7 @@ export const WithAButton = () => {
   );
 };
 
-WithAButton.story = {
-  name: 'with a button',
-};
+WithAButton.storyName = 'with a button';
 
 export const AsDynamicVariables = () => {
   const name = text('Name', 'Benjamin Button');
@@ -46,6 +44,4 @@ export const AsDynamicVariables = () => {
   return <Text>{content}</Text>;
 };
 
-AsDynamicVariables.story = {
-  name: 'as dynamic variables',
-};
+AsDynamicVariables.storyName = 'as dynamic variables';
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index dfdbf8b90f62..000000000000
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createElement } from 'rax';
-import { withNotes } from '@storybook/addon-notes';
-import Text from 'rax-text';
-import markdown from './note.md';
-
-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 🚀🚀🚀🚀🚀',
-  },
-};
-
-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 d8547241fc4c..02ad01279cc1 100644
--- a/examples/rax-kitchen-sink/src/stories/index.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/index.stories.js
@@ -1,11 +1,8 @@
 import { createElement } from 'rax';
-import { linkTo } from '@storybook/addon-links';
 import { App as AppComponent } from '../components/App/index';
-import { Welcome } from '../components/Welcome/index';
 
 export default {
   title: 'Basic',
 };
 
-export const WelcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
 export const App = () => <AppComponent />;
diff --git a/examples/rax-kitchen-sink/src/stories/note.md b/examples/rax-kitchen-sink/src/stories/note.md
deleted file mode 100644
index 6f3666d23114..000000000000
--- a/examples/rax-kitchen-sink/src/stories/note.md
+++ /dev/null
@@ -1,11 +0,0 @@
- #markdown note
-
-hi **ho**
-
-- works with notes
-- works with knobs
-- ...
-
-```js
-const hi = require('greeting');
-```
diff --git a/examples/react-ts/README.md b/examples/react-ts/README.md
new file mode 100644
index 000000000000..70d4f2ccb02b
--- /dev/null
+++ b/examples/react-ts/README.md
@@ -0,0 +1,3 @@
+# Storybook TS example
+
+This Storybook demonstrates support for TypeScript in Storybook without additional configuration.
diff --git a/examples/react-ts/main.ts b/examples/react-ts/main.ts
new file mode 100644
index 000000000000..17f75117a167
--- /dev/null
+++ b/examples/react-ts/main.ts
@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/core/types';
+
+module.exports = {
+  stories: ['./src/*.stories.*'],
+  addons: ['@storybook/addon-essentials'],
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
+    },
+  },
+} as StorybookConfig;
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
new file mode 100644
index 000000000000..058dba04cbff
--- /dev/null
+++ b/examples/react-ts/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@storybook/example-react-ts",
+  "version": "6.0.0-beta.21",
+  "private": true,
+  "scripts": {
+    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
+    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll",
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll"
+  },
+  "dependencies": {
+    "@storybook/addon-essentials": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "prop-types": "15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "typescript": "^3.9.2",
+    "webpack": "^4.43.0"
+  }
+}
diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx
new file mode 100644
index 000000000000..ec7d88e883ce
--- /dev/null
+++ b/examples/react-ts/src/button.stories.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from './button';
+
+export default { component: Button, title: 'Examples / Button' };
+
+export const WithArgs = (args: any) => <Button {...args} />;
+WithArgs.args = { label: 'With args' };
+export const Basic = () => <Button label="Click me" />;
diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx
new file mode 100644
index 000000000000..f3c9ee6b83ea
--- /dev/null
+++ b/examples/react-ts/src/button.tsx
@@ -0,0 +1,14 @@
+import React, { ButtonHTMLAttributes } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A label to show on the button
+   */
+  label: string;
+}
+
+export const Button = ({ label = 'Hello', ...props }: ButtonProps) => (
+  <button type="button" {...props}>
+    {label}
+  </button>
+);
diff --git a/examples/react-ts/src/emoji-button.js b/examples/react-ts/src/emoji-button.js
new file mode 100644
index 000000000000..716afa1238c0
--- /dev/null
+++ b/examples/react-ts/src/emoji-button.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const EmojiButton = ({ label, ...props }) => (
+  <button type="button" {...props}>
+    ⚠️ {label}
+  </button>
+);
+
+EmojiButton.propTypes = {
+  /**
+   * A label to show on the button
+   */
+  label: PropTypes.string,
+};
+
+EmojiButton.defaultProps = {
+  label: 'Hello',
+};
diff --git a/examples/react-ts/src/emoji-button.stories.js b/examples/react-ts/src/emoji-button.stories.js
new file mode 100644
index 000000000000..1e0fd8061134
--- /dev/null
+++ b/examples/react-ts/src/emoji-button.stories.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { EmojiButton } from './emoji-button';
+
+export default { component: EmojiButton, title: 'Examples / Emoji Button' };
+
+export const WithArgs = (args) => <EmojiButton {...args} />;
+WithArgs.args = { label: 'With args' };
+export const Basic = () => <EmojiButton label="Click me" />;
diff --git a/examples/react-ts/tsconfig.json b/examples/react-ts/tsconfig.json
new file mode 100644
index 000000000000..5447ee7e4d86
--- /dev/null
+++ b/examples/react-ts/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["src/*", "main.ts"]
+}
diff --git a/examples/riot-kitchen-sink/.storybook/main.js b/examples/riot-kitchen-sink/.storybook/main.js
index 9e780190ebc6..1cfcefc0cc33 100644
--- a/examples/riot-kitchen-sink/.storybook/main.js
+++ b/examples/riot-kitchen-sink/.storybook/main.js
@@ -3,17 +3,15 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.js'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
   ],
-  webpack: async config => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/, /index\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/riot-kitchen-sink/.storybook/preview.js b/examples/riot-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index e74334d439c3..000000000000
--- a/examples/riot-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/riot';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index 73dc05b4704f..03f2164a9c02 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "riot-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,28 +14,30 @@
     "riot-hot-reload": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/riot": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/riot": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
     "babel-loader": "^8.0.4",
-    "cross-env": "^6.0.3",
-    "file-loader": "^4.2.0",
-    "raw-loader": "^3.1.0",
+    "cross-env": "^7.0.0",
+    "file-loader": "^6.0.0",
+    "raw-loader": "^4.0.1",
     "riot-tag-loader": "^2.1.0",
-    "svg-url-loader": "^3.0.2",
+    "svg-url-loader": "^5.0.0",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "g2dp3lnr34a"
+    }
   }
 }
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 399887ec1487..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
index f8f243dfe043..7ecb1475089f 100644
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -6,7 +6,19 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
   id="root"
 >
   <div>
-    Parameters are {"globalParameter":"globalParameter","options":{},"docs":{},"framework":"riot","chapterParameter":"chapterParameter","__id":"core-parameters--passed-to-story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+    Parameters are 
+    <pre>
+      {
+  "globalParameter": "globalParameter",
+  "framework": "riot",
+  "chapterParameter": "chapterParameter",
+  "argTypes": {},
+  "__id": "core-parameters--passed-to-story",
+  "storyParameter": "storyParameter",
+  "id": "root",
+  "dataIs": "parameters"
+}
+    </pre>
   </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 cf8196fda117..0c6d41b63242 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
@@ -14,9 +14,7 @@ export const ActionOnly = () =>
     content: 'Click me to log the action',
   });
 
-ActionOnly.story = {
-  name: 'Action only',
-};
+ActionOnly.storyName = 'Action only';
 
 export const MultipleActions = () =>
   mount('my-button', {
@@ -24,6 +22,4 @@ export const MultipleActions = () =>
     content: 'Double Click me to log the action',
   });
 
-MultipleActions.story = {
-  name: 'Multiple actions',
-};
+MultipleActions.storyName = '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 6b18ecddfb36..8f658a0bd219 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -3,10 +3,13 @@ import ButtonRaw from './Button.txt';
 export default {
   title: 'Addon/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
@@ -19,9 +22,7 @@ export const Story1 = () => {
   };
 };
 
-Story1.story = {
-  name: 'story 1',
-};
+Story1.storyName = 'story 1';
 
 export const Story2 = () => {
   const content = 'This one too!';
@@ -32,6 +33,4 @@ export const Story2 = () => {
   };
 };
 
-Story2.story = {
-  name: 'story 2',
-};
+Story2.storyName = '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 6d754a7af993..b2f9b65a0cba 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -64,7 +64,7 @@ export const AllKnobs = () => {
             <p>${stockMessage}</p>
             <p>Also, I have:</p>
             <ul>
-              ${items.map(item => `<li key="${item}">${item}</li>`).join('')}
+              ${items.map((item) => `<li key="${item}">${item}</li>`).join('')}
             </ul>
             <p>${salutation}</p>
           </div></WhatIGot>
@@ -73,9 +73,7 @@ export const AllKnobs = () => {
   };
 };
 
-AllKnobs.story = {
-  name: 'All knobs',
-};
+AllKnobs.storyName = 'All knobs';
 
 export const XssSafety = () => ({
   tags: [
@@ -87,6 +85,4 @@ export const XssSafety = () => ({
   ],
 });
 
-XssSafety.story = {
-  name: 'XSS safety',
-};
+XssSafety.storyName = '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 1f2cd6303566..bf494beaa882 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
@@ -16,6 +16,4 @@ export const GoToWelcome = () =>
     handleClick: linkTo('Welcome', 'Welcome'),
   });
 
-GoToWelcome.story = {
-  name: 'Go to welcome',
-};
+GoToWelcome.storyName = '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
deleted file mode 100644
index cd8f2ad23633..000000000000
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  title: 'Addon/Notes',
-};
-
-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>',
-  ],
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-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 769fe3c29830..124446efd20c 100644
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/core.stories.js
@@ -4,7 +4,13 @@ const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
 const storyParameter = 'storyParameter';
 
-tag('parameters', '<div>Parameters are {JSON.stringify (this.opts)}</div>', '', '', () => {});
+tag(
+  'parameters',
+  '<div>Parameters are <pre>{JSON.stringify(this.opts, null, 2)}</pre></div>',
+  '',
+  '',
+  () => {}
+);
 
 addParameters({ globalParameter });
 
@@ -15,9 +21,7 @@ export default {
   },
 };
 
-export const PassedToStory = ({ parameters: { fileName, ...parameters } }) =>
+export const PassedToStory = (_args, { parameters: { fileName, ...parameters } }) =>
   mount('parameters', { ...parameters, storyParameter });
 
-PassedToStory.story = {
-  name: 'passed to story',
-};
+PassedToStory.storyName = 'passed to story';
diff --git a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
index ab021ebbb888..cb7f0463eda2 100644
--- a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
@@ -16,9 +16,7 @@ export const ThreeTags = () => ({
   ],
 });
 
-ThreeTags.story = {
-  name: 'Three tags',
-};
+ThreeTags.storyName = 'Three tags';
 
 export const Matriochka = () => ({
   tags: [
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 7a06796e7cd9..86988519a3d3 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -12,21 +12,15 @@ export const BuiltWithTag = () =>
   tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
   mount('test', { value: 'with a parameter' });
 
-BuiltWithTag.story = {
-  name: 'built with tag',
-};
+BuiltWithTag.storyName = 'built with tag';
 
 export const BuiltAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
 
-BuiltAsString.story = {
-  name: 'built as string',
-};
+BuiltAsString.storyName = 'built as string';
 
 export const BuiltFromRawImport = () => simpleTestCompiled;
 
-BuiltFromRawImport.story = {
-  name: 'built from raw import',
-};
+BuiltFromRawImport.storyName = 'built from raw import';
 
 export const BuiltFromTagsAndTemplate = () => ({
   tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
@@ -34,13 +28,7 @@ export const BuiltFromTagsAndTemplate = () => ({
     '<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)',
-  },
-};
+BuiltFromTagsAndTemplate.storyName = 'built from tags and template';
 
 export const TagsTemplateAndTagConstructorAtOnce = () => ({
   tags: [
@@ -57,27 +45,16 @@ export const TagsTemplateAndTagConstructorAtOnce = () => ({
   },
 });
 
-TagsTemplateAndTagConstructorAtOnce.story = {
-  name: 'tags, template and tagConstructor at once',
-};
+TagsTemplateAndTagConstructorAtOnce.storyName = 'tags, template and tagConstructor at once';
 
 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',
-  },
-};
+BuiltFromThePrecompilation.storyName = 'built from the precompilation';
 
 export const TheMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
 
-TheMountInstructionIsNotNecessary.story = {
-  name: 'the mount instruction is not necessary',
-};
+TheMountInstructionIsNotNecessary.storyName = 'the mount instruction is not necessary';
 
 export const TheOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
 
-TheOptsValueIsNotNecessary.story = {
-  name: 'the opts value is not necessary',
-};
+TheOptsValueIsNotNecessary.storyName = 'the opts value is not necessary';
diff --git a/examples/server-kitchen-sink/.storybook/main.js b/examples/server-kitchen-sink/.storybook/main.js
new file mode 100644
index 000000000000..869adb75a33c
--- /dev/null
+++ b/examples/server-kitchen-sink/.storybook/main.js
@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.json'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+  ],
+};
diff --git a/examples/server-kitchen-sink/.storybook/preview.js b/examples/server-kitchen-sink/.storybook/preview.js
new file mode 100644
index 000000000000..f26366aeffec
--- /dev/null
+++ b/examples/server-kitchen-sink/.storybook/preview.js
@@ -0,0 +1,25 @@
+import { addParameters, addDecorator } from '@storybook/server';
+import { withLinks } from '@storybook/addon-links';
+
+addDecorator(withLinks);
+
+const port = process.env.SERVER_PORT || 1337;
+
+addParameters({
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    showRoots: true,
+  },
+  docs: {
+    iframeHeight: '200px',
+  },
+  server: {
+    url: `http://localhost:${port}/storybook_preview`,
+  },
+});
diff --git a/examples/server-kitchen-sink/README.md b/examples/server-kitchen-sink/README.md
new file mode 100644
index 000000000000..6679953ba470
--- /dev/null
+++ b/examples/server-kitchen-sink/README.md
@@ -0,0 +1,9 @@
+# Server Kitchen Sink
+
+This is a dmmo app to test a standalone server using integration with Storybook using `@storybook/server`.
+
+Run `yarn install` to sync Storybook module with the source.
+
+Run `yarn start` to start. 
+
+This starts an ExpressJS server on port `1337` and Storybook on port `9006`.
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
new file mode 100644
index 000000000000..7c563a283e06
--- /dev/null
+++ b/examples/server-kitchen-sink/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "server-kitchen-sink",
+  "version": "6.0.0-beta.21",
+  "private": true,
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "",
+  "main": "index.js",
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "server": "PORT=1337 nodemon server.js",
+    "start": "concurrently \"yarn server\" \"yarn storybook\"",
+    "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@storybook/server": "6.0.0-beta.21",
+    "concurrently": "^5.2.0",
+    "cors": "^2.8.5",
+    "express": "~4.17.1",
+    "morgan": "^1.9.1",
+    "nodemon": "^2.0.2",
+    "pug": "^3.0.0",
+    "safe-identifier": "^0.4.1"
+  }
+}
diff --git a/examples/server-kitchen-sink/server.js b/examples/server-kitchen-sink/server.js
new file mode 100644
index 000000000000..ea25081f0915
--- /dev/null
+++ b/examples/server-kitchen-sink/server.js
@@ -0,0 +1,21 @@
+const express = require('express');
+const cors = require('cors');
+const morgan = require('morgan');
+const path = require('path');
+const { logger } = require('@storybook/node-logger');
+
+const port = process.env.PORT || 8080;
+
+const app = express();
+app.use(cors());
+app.use(morgan('dev'));
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+app.get('/', (req, res) => res.send('Hello World!'));
+
+app.get(/storybook_preview\/(.*)/, (req, res) => {
+  res.render(req.params[0], req.query);
+});
+
+app.listen(port, () => logger.info(`Server listening on port ${port}!`));
diff --git a/examples/server-kitchen-sink/stories/addon-a11y.stories.json b/examples/server-kitchen-sink/stories/addon-a11y.stories.json
new file mode 100644
index 000000000000..95db30850089
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/addon-a11y.stories.json
@@ -0,0 +1,33 @@
+{
+  "title": "Addons/a11y",
+  "parameters": {
+    "options": { "selectedPanel": "storybook/a11y/panel" }
+  },
+  "stories": [
+    {
+      "name": "Default",
+      "parameters": {
+        "server": { "id": "addons/a11y/default" }
+      }
+    },
+    {
+      "name": "Label",
+      "parameters": {
+        "server": { "id": "addons/a11y/label" }
+      }
+    },
+    {
+      "name": "Disabled",
+      "parameters": {
+        "server": { "id": "addons/a11y/disabled" }
+      }
+    },
+    {
+      "id": "Contrast",
+      "name": "Invalid contrast",
+      "parameters": {
+        "server": { "id": "addons/a11y/contrast" }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/addon-actions.stories.json b/examples/server-kitchen-sink/stories/addon-actions.stories.json
new file mode 100644
index 000000000000..b5db602918a9
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/addon-actions.stories.json
@@ -0,0 +1,53 @@
+ {
+  "title": "Addons/Actions",
+  "parameters": {
+    "options": { "selectedPanel": "storybook/actions/panel" }
+  },
+  "stories": [
+    {
+      "name": "Hello World",
+      "parameters": {
+        "server": { "id": "addons/actions/story1" },
+        "actions": {
+          "handles": ["click"]
+        }
+      }
+    },
+    {
+      "name": "Multiple actions",
+      "parameters": {
+        "server": { "id": "addons/actions/story2" },
+        "actions": {
+          "handles": ["click", "contextmenu"]
+        }
+      }
+    },
+    {
+      "name": "Multiple actions + config",
+      "parameters": {
+        "server": { "id": "addons/actions/story3" },
+        "actions": {
+          "handles": ["click", "contextmenu", { "clearOnStoryChange": false }]
+        }
+      }
+    },
+    {
+      "name": "Multiple actions, object",
+      "parameters": {
+        "server": { "id": "addons/actions/story4" },
+        "actions": {
+          "handles": [{ "click": "clicked", "contextmenu": "right clicked" }]
+        }
+      }
+    },
+    {
+      "name": "Multiple actions, object + config",
+      "parameters": {
+        "server": { "id": "addons/actions/story6" },
+        "actions": {
+          "handles": [{ "click": "clicked", "contextmenu": "right clicked" }, { "clearOnStoryChange": false }]
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/addon-backgrounds.stories.json b/examples/server-kitchen-sink/stories/addon-backgrounds.stories.json
new file mode 100644
index 000000000000..dc77798cbb24
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/addon-backgrounds.stories.json
@@ -0,0 +1,23 @@
+{
+  "title": "Addons/Backgrounds",
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ]
+  },
+  "stories": [
+    {
+      "name": "Story 1",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story1" }
+      }
+    },
+    {
+      "name": "Story 2",
+      "parameters": {
+        "server": { "id": "addons/backgrounds/story2" }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/addon-knobs.stories.json b/examples/server-kitchen-sink/stories/addon-knobs.stories.json
new file mode 100644
index 000000000000..17a293eb5d1e
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/addon-knobs.stories.json
@@ -0,0 +1,64 @@
+{
+  "title": "Addons/Knobs",
+  "addons": ["knobs"],
+  "parameters": {
+    "options": { "selectedPanel": "storybook/knobs/panel" }
+  },
+  "stories": [
+    {
+      "name": "Simple",
+      "parameters": {
+        "server": { "id": "addons/knobs/simple" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ]
+    },
+    {
+      "name": "CSS transitions",
+      "parameters": {
+        "server": { "id": "addons/knobs/css" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "color", "name": "Text Color", "value": "orangered", "param": "textColor"}
+      ]
+    },
+    {
+      "name": "All knobs",
+      "parameters": {
+        "server": { "id": "addons/knobs/all" }
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "Jane", "param": "name"},
+        { 
+          "type": "number",
+          "name": "Stock", 
+          "value": 20, 
+          "param": "stock",
+          "range": true,
+          "min": 0,
+          "max": 30,
+          "step": 5
+        },
+        { 
+          "type": "select",
+          "name": "Fruit",
+          "value": "apples",
+          "param": "fruit",
+          "options": {
+            "Apple": "apples",
+            "Banana": "bananas",
+            "Cherry": "cherries"
+          }
+        },
+        { "type": "number", "name": "Price", "value": 2.25, "param": "price"},
+        { "type": "color", "name": "Border", "value": "deeppink", "param": "colour"},
+        { "type": "date", "name": "Today", "value": "Jan 20 2017 GMT+0", "param": "today"},
+        { "type": "array", "name": "Items", "value": ["Laptop", "Book", "Whiskey"], "param": "items"},
+        { "type": "boolean", "name": "Nice", "value": true, "param": "nice"}
+      ]
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/addon-notes.stories.json b/examples/server-kitchen-sink/stories/addon-notes.stories.json
new file mode 100644
index 000000000000..9dc4e21c17d5
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/addon-notes.stories.json
@@ -0,0 +1,12 @@
+{
+  "title": "Addons/Notes",
+  "stories": [
+    {
+      "name": "Simple note",
+      "parameters": {
+        "notes": "My notes on some bold text",
+        "server": { "id": "addons/notes/story1" }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/demo.stories.json b/examples/server-kitchen-sink/stories/demo.stories.json
new file mode 100644
index 000000000000..207332142d29
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/demo.stories.json
@@ -0,0 +1,23 @@
+{
+  "title": "Demo",
+  "stories": [
+    {
+      "name": "Heading",
+      "parameters": {
+        "server": { "id": "demo/heading" }
+      }
+    },
+    {
+      "name": "Headings",
+      "parameters": {
+        "server": { "id": "demo/headings" }
+      }
+    },
+    {
+      "name": "Button",
+      "parameters": {
+        "server": { "id": "demo/button" }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/kitchen_sink.stories.json b/examples/server-kitchen-sink/stories/kitchen_sink.stories.json
new file mode 100644
index 000000000000..1a37d1384bfe
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/kitchen_sink.stories.json
@@ -0,0 +1,33 @@
+{
+  "title": "Kitchen Sink",
+  "addons": ["knobs"],
+  "parameters": {
+    "backgrounds": [
+      { "name": "light", "value": "#eeeeee" },
+      { "name": "dark", "value": "#222222", "default": true }
+    ],
+    "options": { "selectedPanel": "storybook/a11y/panel" },
+    "server": { 
+      "params": { "name": "Jane Doe" }
+    }
+  },
+  "stories": [
+    {
+      "name": "All the things",
+      "parameters": {
+        "notes": "My notes on some person",
+        "server": { 
+          "id": "addons/knobs/simple",
+          "params": { 
+            "name": "Jim Doe"
+          }
+        },
+        "actions": ["click", "contextmenu", { "clearOnStoryChange": false }]
+      },
+      "knobs": [
+        { "type": "text", "name": "Name", "value": "John Doe", "param": "name"},
+        { "type": "number", "name": "Age", "value": 44, "param": "age"}
+      ]
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/params.stories.json b/examples/server-kitchen-sink/stories/params.stories.json
new file mode 100644
index 000000000000..c714b0a562df
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/params.stories.json
@@ -0,0 +1,28 @@
+{
+  "title": "Params",
+  "parameters": {
+    "server": {
+      "params": { "color": "red" }
+    }
+  },
+  "stories": [
+    {
+      "name": "Story",
+      "parameters": {
+        "server": {
+          "id": "params/story",
+          "params": { "message": "Hello World" }
+        }
+      }
+    },
+    {
+      "name": "Override",
+      "parameters": {
+        "server": {
+          "id": "params/override",
+          "params": { "message": "Hello World", "color": "green" }
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/stories/welcome.stories.json b/examples/server-kitchen-sink/stories/welcome.stories.json
new file mode 100644
index 000000000000..ee192f0bec81
--- /dev/null
+++ b/examples/server-kitchen-sink/stories/welcome.stories.json
@@ -0,0 +1,13 @@
+{
+  "title": "Welcome",
+  "stories": [
+    {
+      "name": "Welcome",
+      "parameters": {
+        "server": {
+          "id": "welcome/welcome"
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/server-kitchen-sink/views/addons/a11y/contrast.pug b/examples/server-kitchen-sink/views/addons/a11y/contrast.pug
new file mode 100644
index 000000000000..4b217011d3a1
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/a11y/contrast.pug
@@ -0,0 +1 @@
+button(style='color: black; background-color: brown;') Testing the a11y addon
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/a11y/default.pug b/examples/server-kitchen-sink/views/addons/a11y/default.pug
new file mode 100644
index 000000000000..0900630d219d
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/a11y/default.pug
@@ -0,0 +1 @@
+button
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/a11y/disabled.pug b/examples/server-kitchen-sink/views/addons/a11y/disabled.pug
new file mode 100644
index 000000000000..2b3652f5ecc7
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/a11y/disabled.pug
@@ -0,0 +1 @@
+button(disabled) Testing the a11y addon
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/a11y/label.pug b/examples/server-kitchen-sink/views/addons/a11y/label.pug
new file mode 100644
index 000000000000..901f438d64a5
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/a11y/label.pug
@@ -0,0 +1 @@
+button Testing the a11y addon
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/button.pug b/examples/server-kitchen-sink/views/addons/actions/button.pug
new file mode 100644
index 000000000000..e612bbfb36f1
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/button.pug
@@ -0,0 +1 @@
+button(type="button") Hello World
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story1.pug b/examples/server-kitchen-sink/views/addons/actions/story1.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story1.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story2.pug b/examples/server-kitchen-sink/views/addons/actions/story2.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story2.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story3.pug b/examples/server-kitchen-sink/views/addons/actions/story3.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story3.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story4.pug b/examples/server-kitchen-sink/views/addons/actions/story4.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story4.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story5.pug b/examples/server-kitchen-sink/views/addons/actions/story5.pug
new file mode 100644
index 000000000000..557c20da0e89
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story5.pug
@@ -0,0 +1,3 @@
+div
+  | Clicks on this button will be logged:
+  button(class="btn" type="button") Button
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story6.pug b/examples/server-kitchen-sink/views/addons/actions/story6.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story6.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story7.pug b/examples/server-kitchen-sink/views/addons/actions/story7.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story7.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/actions/story8.pug b/examples/server-kitchen-sink/views/addons/actions/story8.pug
new file mode 100644
index 000000000000..7894bcc0743b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/actions/story8.pug
@@ -0,0 +1 @@
+include button.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/backgrounds/story1.pug b/examples/server-kitchen-sink/views/addons/backgrounds/story1.pug
new file mode 100644
index 000000000000..7d62c85d7cdf
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/backgrounds/story1.pug
@@ -0,0 +1 @@
+span(style="color: white") You should be able to switch backgrounds for this story
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/backgrounds/story2.pug b/examples/server-kitchen-sink/views/addons/backgrounds/story2.pug
new file mode 100644
index 000000000000..82abc4ee834a
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/backgrounds/story2.pug
@@ -0,0 +1 @@
+span(style="color: white") This one too!
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/knobs/all.pug b/examples/server-kitchen-sink/views/addons/knobs/all.pug
new file mode 100644
index 000000000000..f7003e395ec7
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/knobs/all.pug
@@ -0,0 +1,18 @@
+- nice = (nice === 'true')
+- stock = parseInt(stock)
+- stockMessage = stock > 0 ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.` : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+- salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+- dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+- style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+- today = new Date(parseInt(today, 10));
+- items = items.split(',');
+
+div(style=`${style}`)
+  h1 My name is #{name},
+  h3 today is #{today.toLocaleDateString('en-US', dateOptions)}
+  p !{stockMessage}
+  p Also, I have:
+  ul 
+    each item in items
+      li= item
+  p #{salutation}
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/knobs/css.pug b/examples/server-kitchen-sink/views/addons/knobs/css.pug
new file mode 100644
index 000000000000..ec8996a53780
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/knobs/css.pug
@@ -0,0 +1 @@
+p(style=`transition: color 0.5s ease-out; color: ${textColor}`)= name
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/knobs/simple.pug b/examples/server-kitchen-sink/views/addons/knobs/simple.pug
new file mode 100644
index 000000000000..899a25344ca4
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/knobs/simple.pug
@@ -0,0 +1,2 @@
+div.
+  I am #{name} and I'm #{age} years old.
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/knobs/xss_safety.pug b/examples/server-kitchen-sink/views/addons/knobs/xss_safety.pug
new file mode 100644
index 000000000000..6e0f1c5d2d33
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/knobs/xss_safety.pug
@@ -0,0 +1 @@
+ !{content}
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/addons/notes/story1.pug b/examples/server-kitchen-sink/views/addons/notes/story1.pug
new file mode 100644
index 000000000000..dee88febdf62
--- /dev/null
+++ b/examples/server-kitchen-sink/views/addons/notes/story1.pug
@@ -0,0 +1,2 @@
+p
+  strong This is a fragment of HTML
diff --git a/examples/server-kitchen-sink/views/demo/button.pug b/examples/server-kitchen-sink/views/demo/button.pug
new file mode 100644
index 000000000000..69e440c555c6
--- /dev/null
+++ b/examples/server-kitchen-sink/views/demo/button.pug
@@ -0,0 +1 @@
+button Hello Button
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/demo/heading.pug b/examples/server-kitchen-sink/views/demo/heading.pug
new file mode 100644
index 000000000000..23b68dd8f3e9
--- /dev/null
+++ b/examples/server-kitchen-sink/views/demo/heading.pug
@@ -0,0 +1 @@
+h1 Hello World
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/demo/headings.pug b/examples/server-kitchen-sink/views/demo/headings.pug
new file mode 100644
index 000000000000..23a6d7f78ab6
--- /dev/null
+++ b/examples/server-kitchen-sink/views/demo/headings.pug
@@ -0,0 +1,4 @@
+h1 Hellow World
+h2 Hellow World
+h3 Hellow World
+h4 Hellow World
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/params/override.pug b/examples/server-kitchen-sink/views/params/override.pug
new file mode 100644
index 000000000000..b60cffc6349b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/params/override.pug
@@ -0,0 +1 @@
+include params.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/params/params.pug b/examples/server-kitchen-sink/views/params/params.pug
new file mode 100644
index 000000000000..5020bd41af24
--- /dev/null
+++ b/examples/server-kitchen-sink/views/params/params.pug
@@ -0,0 +1 @@
+h1(style=`color: ${color}`)= message 
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/params/story.pug b/examples/server-kitchen-sink/views/params/story.pug
new file mode 100644
index 000000000000..b60cffc6349b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/params/story.pug
@@ -0,0 +1 @@
+include params.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/params/story_fn_override.pug b/examples/server-kitchen-sink/views/params/story_fn_override.pug
new file mode 100644
index 000000000000..b60cffc6349b
--- /dev/null
+++ b/examples/server-kitchen-sink/views/params/story_fn_override.pug
@@ -0,0 +1 @@
+include params.pug
\ No newline at end of file
diff --git a/examples/server-kitchen-sink/views/welcome/welcome.pug b/examples/server-kitchen-sink/views/welcome/welcome.pug
new file mode 100644
index 000000000000..fe663b9d7c93
--- /dev/null
+++ b/examples/server-kitchen-sink/views/welcome/welcome.pug
@@ -0,0 +1,36 @@
+.main
+  h1 Welcome to Storybook for Server
+  p This is a UI component dev environment for your plain HTML snippets.
+  p.
+    We've added some basic stories inside the #[code.code stories] 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.
+    See these sample #[a.link(href='#' data-sb-kind='Demo' data-sb-story='Headings') stories]
+  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.
+    Usually we create stories with smaller UI components in the app.
+    #[br]
+    Have a look at the #[a.link(href='https://storybook.js.org/basics/writing-stories' target='_blank') Writing Stories] section in our documentation.
+style.
+  .main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+  .code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }
\ No newline at end of file
diff --git a/examples/standalone-preview/README.md b/examples/standalone-preview/README.md
index 50637155cae7..06c45a73689a 100644
--- a/examples/standalone-preview/README.md
+++ b/examples/standalone-preview/README.md
@@ -14,7 +14,9 @@ To view the stories in the storybook UI:
 
 ```
 cd ../official-storybook
-yarn storybook --preview-url=http://localhost:1337/iframe.html
+npm storybook -- --preview-url=http://localhost:1337/iframe.html # or yarn
 ```
 
 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.
+
+> NOTE: This can be run from any working storybook, not just `official-storybook`!
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
index 291b86484441..ccc26be5e6f6 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,13 +1,13 @@
 {
   "name": "standalone-preview",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "storybook": "parcel ./storybook.html --port 1337"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
     "parcel": "^1.12.3",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
diff --git a/examples/standalone-preview/stories/Component1.stories.tsx b/examples/standalone-preview/stories/Component1.stories.tsx
new file mode 100644
index 000000000000..03736b01f087
--- /dev/null
+++ b/examples/standalone-preview/stories/Component1.stories.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default {
+  title: 'Component 1',
+};
+
+export const Story1 = () => <div>Component 1 - Story 1</div>;
diff --git a/examples/standalone-preview/stories/Component2.stories.tsx b/examples/standalone-preview/stories/Component2.stories.tsx
new file mode 100644
index 000000000000..f9ba700e48d6
--- /dev/null
+++ b/examples/standalone-preview/stories/Component2.stories.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export default {
+  title: 'Component 2',
+};
+
+export const Story1 = () => <div>Component 2 - Story 1</div>;
+export const Story2 = () => <div>Component 2 - Story 2</div>;
diff --git a/examples/standalone-preview/storybook.ts b/examples/standalone-preview/storybook.ts
new file mode 100644
index 000000000000..6480e83e1f2d
--- /dev/null
+++ b/examples/standalone-preview/storybook.ts
@@ -0,0 +1,5 @@
+import { configure } from '@storybook/react';
+import * as Comp1 from './stories/Component1.stories';
+import * as Comp2 from './stories/Component2.stories';
+
+configure(() => [Comp1, Comp2], module);
diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js
index 28172cac2889..b4477747257e 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.js
+++ b/examples/svelte-kitchen-sink/.storybook/main.js
@@ -3,17 +3,21 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.*'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-viewport',
+    '@storybook/addon-a11y',
   ],
-  webpack: async config => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: [/\.stories\.js$/, /index\.js$/],
       loaders: [require.resolve('@storybook/source-loader')],
diff --git a/examples/svelte-kitchen-sink/.storybook/preview.js b/examples/svelte-kitchen-sink/.storybook/preview.js
index 7f5d4bed2e58..2eae43220865 100644
--- a/examples/svelte-kitchen-sink/.storybook/preview.js
+++ b/examples/svelte-kitchen-sink/.storybook/preview.js
@@ -1,4 +1,7 @@
-import { addDecorator } from '@storybook/svelte';
-import { withA11y } from '@storybook/addon-a11y';
+import { addParameters } from '@storybook/svelte';
 
-addDecorator(withA11y);
+addParameters({
+  docs: {
+    iframeHeight: 300,
+  },
+});
diff --git a/examples/svelte-kitchen-sink/jest.config.js b/examples/svelte-kitchen-sink/jest.config.js
index aa9901a30936..6349aa45fe96 100644
--- a/examples/svelte-kitchen-sink/jest.config.js
+++ b/examples/svelte-kitchen-sink/jest.config.js
@@ -5,7 +5,7 @@ module.exports = {
   roots: [__dirname],
   transform: {
     ...config.transform,
-    '.*\\.(svelte)$': '<rootDir>/svelte-transform',
+    '.*\\.(svelte)$': '<rootDir>/scripts/utils/jest-transform-svelte',
   },
   moduleFileExtensions: [...config.moduleFileExtensions, 'svelte'],
 };
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 94ad34b092d3..cdb24ed287c7 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -10,19 +10,22 @@
     "global": "^4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/svelte": "5.3.0-rc.0"
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/svelte": "6.0.0-beta.21"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "8ob73wgl995"
+    }
   }
 }
diff --git a/examples/svelte-kitchen-sink/src/components/Button.test.js b/examples/svelte-kitchen-sink/src/components/Button.test.js
index 7b441ade4738..2014743b9baf 100644
--- a/examples/svelte-kitchen-sink/src/components/Button.test.js
+++ b/examples/svelte-kitchen-sink/src/components/Button.test.js
@@ -12,7 +12,7 @@ describe('Button Component', () => {
   });
 
   it('should render `text` property', () => {
-    return new Promise(done => {
+    return new Promise((done) => {
       const text = 'Hello world';
       const expected = `Round corners ${text}`;
 
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 5cc6a3b564ed..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-docs.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-docs.stories.storyshot
new file mode 100644
index 000000000000..e7d308ddaefe
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-docs.stories.storyshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon/Docs 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 Addon/Docs 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>
+`;
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 c0e7c6be1f23..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/addon-actions.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
index 1a4ef7f86ee0..021dfce78d08 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
@@ -14,9 +14,7 @@ export const ActionOnViewMethod = () => ({
   },
 });
 
-ActionOnViewMethod.story = {
-  name: 'Action on view method',
-};
+ActionOnViewMethod.storyName = 'Action on view method';
 
 export const ActionOnComponentMethod = () => ({
   Component: Button,
@@ -28,6 +26,4 @@ export const ActionOnComponentMethod = () => ({
   },
 });
 
-ActionOnComponentMethod.story = {
-  name: 'Action on component method',
-};
+ActionOnComponentMethod.storyName = '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 cb1cf1104976..24bf99802265 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -3,10 +3,13 @@ import ButtonView from './views/ButtonView.svelte';
 export default {
   title: 'Addon/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
@@ -14,6 +17,4 @@ export const Story1 = () => ({
   Component: ButtonView,
 });
 
-Story1.story = {
-  name: 'story 1',
-};
+Story1.storyName = '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
deleted file mode 100644
index 5f3ea64f5954..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Centered from '@storybook/addon-centered/svelte';
-import { action } from '@storybook/addon-actions';
-
-import Button from '../components/Button.svelte';
-
-export default {
-  title: 'Addon/Centered',
-  component: Button,
-  decorators: [Centered],
-};
-
-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-docs.stories.mdx b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx
new file mode 100644
index 000000000000..ddbbb014395f
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx
@@ -0,0 +1,74 @@
+import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
+import ButtonView from './views/ButtonView.svelte';
+
+# Storybook Docs for Svelte
+
+Storybook supports every major view layer:
+React, Vue, Angular, Ember, React Native, etc.
+
+Storybook Docs does too.
+
+<Story id="welcome--welcome" height="400px" />
+
+Hallelujah! Svelte is working out of the box without modification.
+How you like them apples?!
+
+Just like in React, we first declare our component.
+
+<Meta title="Addon/Docs" />
+
+## CSF stories
+
+Here's how we Svelte stories in pure CSF:
+
+```js
+export const rounded = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: true,
+    message: 'Rounded text',
+  },
+});
+
+export const square = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: false,
+    message: 'Squared text',
+  },
+});
+```
+
+## MDX stories
+
+Amd here's how `rounded` looks in MDX:
+
+<Story name="rounded">
+  {{
+    Component: ButtonView,
+    props: {
+      rounded: true,
+      message: 'Rounded text',
+    },
+  }}
+</Story>
+
+And `square`:
+
+<Story name="square">
+  {{
+    Component: ButtonView,
+    props: {
+      rounded: false,
+      message: 'Squared text',
+    },
+  }}
+</Story>
+
+## More info
+
+For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/addons/docs).
+
+We want your feedback to help make this more useful.
+
+Follow us on Twitter for more short demos & project updates! ❤️📈🛠
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 f30478f8cd7a..74ec418fe8a0 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
@@ -13,6 +13,4 @@ export const GoToWelcomeView = () => ({
   },
 });
 
-GoToWelcomeView.story = {
-  name: 'Go to welcome view',
-};
+GoToWelcomeView.storyName = '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
deleted file mode 100644
index 220ac04ad61e..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import ButtonView from './views/ButtonView.svelte';
-
-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>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/vue-cli/.storybook/main.js b/examples/vue-cli/.storybook/main.js
new file mode 100644
index 000000000000..4f200a1eb075
--- /dev/null
+++ b/examples/vue-cli/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|js|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-storysource', '@storybook/preset-scss'],
+};
diff --git a/examples/vue-cli/.storybook/preview.js b/examples/vue-cli/.storybook/preview.js
new file mode 100644
index 000000000000..909f159e8721
--- /dev/null
+++ b/examples/vue-cli/.storybook/preview.js
@@ -0,0 +1,5 @@
+export const parameters = {
+  docs: {
+    iframeHeight: '60px',
+  },
+};
diff --git a/examples/vue-cli/README.md b/examples/vue-cli/README.md
new file mode 100644
index 000000000000..07e0689d2ddf
--- /dev/null
+++ b/examples/vue-cli/README.md
@@ -0,0 +1,8 @@
+# Storybook Demo
+
+This is a demo app to test Vue-CLI integration with Storybook.
+Please check vue-kitchen-sink for more examples of different ways to integrate with Storybook.
+
+Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
+
+You can also try `yarn serve` to see that vue-cli service also works.
diff --git a/examples/vue-cli/babel.config.js b/examples/vue-cli/babel.config.js
new file mode 100644
index 000000000000..078c0056ff32
--- /dev/null
+++ b/examples/vue-cli/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
new file mode 100644
index 000000000000..7b6362e7cf7d
--- /dev/null
+++ b/examples/vue-cli/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vue-cli-example",
+  "version": "6.0.0-beta.21",
+  "private": true,
+  "scripts": {
+    "build": "vue-cli-service build",
+    "build-storybook": "build-storybook -s public",
+    "serve": "vue-cli-service serve",
+    "storybook": "start-storybook -p 9009 -s public"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.8",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "6.0.0-beta.21",
+    "@storybook/preset-scss": "^1.0.2",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/vue": "6.0.0-beta.21",
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-typescript": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "typescript": "^3.9.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
diff --git a/examples/vue-cli/src/App.vue b/examples/vue-cli/src/App.vue
new file mode 100644
index 000000000000..d45bdace644f
--- /dev/null
+++ b/examples/vue-cli/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <div id="app">
+    <h1>Welcome to a Vue app managed by vue-cli</h1>
+    <Button>Do not click me</Button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Button from './button/Button.vue';
+
+export default Vue.extend({
+  components: {
+    Button,
+  },
+});
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 20px;
+  font-size: 100%;
+  font-family: sans-serif;
+}
+</style>
diff --git a/examples/vue-cli/src/button/Button.stories.ts b/examples/vue-cli/src/button/Button.stories.ts
new file mode 100644
index 000000000000..d42ad431b027
--- /dev/null
+++ b/examples/vue-cli/src/button/Button.stories.ts
@@ -0,0 +1,18 @@
+import Button from './Button.vue';
+import { ButtonSizes } from './types';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const ButtonWithProps = (args: any) => ({
+  components: { Button },
+  template: '<Button :size="size">Button text</Button>',
+  data() {
+    return args;
+  },
+});
+ButtonWithProps.argTypes = {
+  size: { control: { type: 'select', options: ButtonSizes } },
+};
diff --git a/examples/vue-cli/src/button/Button.vue b/examples/vue-cli/src/button/Button.vue
new file mode 100644
index 000000000000..165fa9e34ba1
--- /dev/null
+++ b/examples/vue-cli/src/button/Button.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="button" :class="`size-${size}`">
+    <!-- @slot Button content, e.g. label text -->
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import { ButtonSize } from './types';
+
+/**
+ * This is a very nice button. It comes in three sizes!
+ **/
+@Component
+export default class Button extends Vue {
+  /**
+   * The size of the button
+   */
+  @Prop({ type: String, default: 'default' }) readonly size!: ButtonSize;
+}
+</script>
+
+<style lang="scss">
+.button {
+  border: 1px solid #000;
+  line-height: 2em;
+  padding: 0 1em;
+  display: inline-block;
+  border-radius: 3px;
+
+  &.size-small {
+    font-size: 0.8em;
+  }
+  &.size-big {
+    font-size: 1.5em;
+  }
+}
+</style>
diff --git a/examples/vue-cli/src/button/types.ts b/examples/vue-cli/src/button/types.ts
new file mode 100644
index 000000000000..5f6f11053c11
--- /dev/null
+++ b/examples/vue-cli/src/button/types.ts
@@ -0,0 +1,2 @@
+export const ButtonSizes = ['default', 'small', 'big'] as const;
+export type ButtonSize = typeof ButtonSizes[number];
diff --git a/examples/vue-cli/src/main.ts b/examples/vue-cli/src/main.ts
new file mode 100644
index 000000000000..4e015510bd8f
--- /dev/null
+++ b/examples/vue-cli/src/main.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');
diff --git a/examples/vue-cli/src/shims-vue.d.ts b/examples/vue-cli/src/shims-vue.d.ts
new file mode 100644
index 000000000000..d9f24faa42e7
--- /dev/null
+++ b/examples/vue-cli/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
diff --git a/examples/vue-cli/tsconfig.json b/examples/vue-cli/tsconfig.json
new file mode 100644
index 000000000000..826f15ec18b8
--- /dev/null
+++ b/examples/vue-cli/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "**/node_modules"
+  ]
+}
diff --git a/examples/vue-kitchen-sink/.babelrc b/examples/vue-kitchen-sink/.babelrc
new file mode 100644
index 000000000000..9c25278cd9b1
--- /dev/null
+++ b/examples/vue-kitchen-sink/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@vue/babel-preset-jsx"]
+}
\ No newline at end of file
diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.js
index 437f9b691b66..93476f53fb6f 100644
--- a/examples/vue-kitchen-sink/.storybook/main.js
+++ b/examples/vue-kitchen-sink/.storybook/main.js
@@ -1,17 +1,13 @@
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
-  presets: ['@storybook/addon-docs/preset'],
+  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
   addons: [
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-contexts/register',
-    '@storybook/addon-docs/register',
+    '@storybook/addon-docs',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-a11y',
   ],
 };
diff --git a/examples/vue-kitchen-sink/.storybook/preview.js b/examples/vue-kitchen-sink/.storybook/preview.js
index 6b56e714e63d..65ca5b85929d 100644
--- a/examples/vue-kitchen-sink/.storybook/preview.js
+++ b/examples/vue-kitchen-sink/.storybook/preview.js
@@ -1,17 +1,13 @@
-import { addParameters, addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { withA11y } from '@storybook/addon-a11y';
 
 import MyButton from '../src/stories/Button.vue';
 
-addDecorator(withA11y);
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 
-addParameters({
+export const parameters = {
   docs: {
-    inlineStories: true,
     iframeHeight: '60px',
   },
-});
+};
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index cfaa96d5efeb..586a28a5e597 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -13,31 +13,33 @@
     "vuex": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-contexts": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/vue": "5.3.0-rc.0",
-    "babel-core": "^7.0.0-bridge.0",
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/vue": "6.0.0-beta.21",
+    "@vue/babel-preset-jsx": "^1.1.2",
     "babel-loader": "^8.0.5",
-    "cross-env": "^6.0.3",
-    "file-loader": "^4.2.0",
+    "cross-env": "^7.0.0",
+    "file-loader": "^6.0.0",
     "prop-types": "^15.7.2",
-    "svg-url-loader": "^3.0.2",
+    "svg-url-loader": "^5.0.0",
     "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.2",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "cyxj0e38bqj"
+    }
   }
 }
diff --git a/examples/vue-kitchen-sink/src/index.js b/examples/vue-kitchen-sink/src/index.js
index fe1ea76a9eca..f4e9498b4599 100644
--- a/examples/vue-kitchen-sink/src/index.js
+++ b/examples/vue-kitchen-sink/src/index.js
@@ -4,5 +4,5 @@ import App from './App.vue';
 // eslint-disable-next-line
 new Vue({
   el: '#app',
-  render: h => h(App),
+  render: (h) => h(App),
 });
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 846d201d3688..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 5272bd046f37..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-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index b32786b702de..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-errors.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot
new file mode 100644
index 000000000000..d68a8ab769c4
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Errors Null Error 1`] = `<!---->`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
index ab845990bfd0..5c813cd2f1d3 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -2,6 +2,16 @@
 
 exports[`Storyshots Core/Parameters passed to story 1`] = `
 <div>
-  Parameters are {"docs":{"inlineStories":true,"iframeHeight":"60px"},"options":{},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","__id":"core-parameters--passed-to-story"}
+  Parameters are 
+  <pre>
+    {
+  "globalParameter": "globalParameter",
+  "framework": "vue",
+  "chapterParameter": "chapterParameter",
+  "argTypes": {},
+  "storyParameter": "storyParameter",
+  "__id": "core-parameters--passed-to-story"
+}
+  </pre>
 </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
index 03930c29e032..b8d70fe82ab0 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
@@ -48,16 +48,13 @@ exports[`Storyshots Custom/Decorator for Vue With Data 1`] = `
   "name": "With Data",
   "story": "With Data",
   "parameters": {
-    "docs": {
-      "inlineStories": true,
-      "iframeHeight": "60px"
-    },
-    "options": {},
     "globalParameter": "globalParameter",
     "framework": "vue",
-    "__id": "custom-decorator-for-vue--with-data",
-    "customParameter": 42
+    "argTypes": {},
+    "__id": "custom-decorator-for-vue--with-data"
   },
+  "args": {},
+  "globalArgs": {},
   "customContext": 52
 }
     </pre>
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 1cd29f08fd90..2e0ac18b964c 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -11,9 +11,7 @@ export const ActionOnly = () => ({
   },
 });
 
-ActionOnly.story = {
-  name: 'Action only',
-};
+ActionOnly.storyName = 'Action only';
 
 export const MultipleActions = () => ({
   template:
@@ -21,9 +19,7 @@ export const MultipleActions = () => ({
   methods: actions('click', 'doubleclick'),
 });
 
-MultipleActions.story = {
-  name: 'Multiple actions',
-};
+MultipleActions.storyName = 'Multiple actions';
 
 export const MultipleActionsObject = () => ({
   template:
@@ -31,20 +27,16 @@ export const MultipleActionsObject = () => ({
   methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
 });
 
-MultipleActionsObject.story = {
-  name: 'Multiple actions, object',
-};
+MultipleActionsObject.storyName = 'Multiple actions, object';
 
 export const ActionAndMethod = () => ({
   template: '<my-button @click="log">Click me to log the action</my-button>',
   methods: {
-    log: e => {
+    log: (e) => {
       e.preventDefault();
       action('log2')(e.target);
     },
   },
 });
 
-ActionAndMethod.story = {
-  name: 'Action and method',
-};
+ActionAndMethod.storyName = '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 1d5ac7f8b103..5400daf8829e 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,10 +1,13 @@
 export default {
   title: 'Addon/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
@@ -16,9 +19,7 @@ export const Story1 = () => {
   };
 };
 
-Story1.story = {
-  name: 'story 1',
-};
+Story1.storyName = 'story 1';
 
 export const Story2 = () => {
   const content = 'This one too!';
@@ -28,6 +29,4 @@ export const Story2 = () => {
   };
 };
 
-Story2.story = {
-  name: 'story 2',
-};
+Story2.storyName = '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
deleted file mode 100644
index 3731b6be3a4c..000000000000
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Centered from '@storybook/addon-centered/vue';
-
-import MyButton from './Button.vue';
-
-export default {
-  title: 'Addon/Centered',
-  component: MyButton,
-  decorators: [Centered],
-};
-
-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
deleted file mode 100644
index 744bb725f438..000000000000
--- a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { withContexts } from '@storybook/addon-contexts/vue';
-
-// Example A: Simple CSS Theming
-const topLevelContexts = [
-  {
-    icon: 'sidebaralt',
-    title: 'CSS Themes',
-    components: ['div'],
-    params: [
-      {
-        name: 'Desert',
-        props: {
-          style: { color: 'brown', background: '#F4A261', height: '100vh', padding: '10px' },
-        },
-      },
-      {
-        name: 'Ocean',
-        props: {
-          style: { color: 'white', background: '#173F5F', height: '100vh', padding: '10px' },
-        },
-        default: true,
-      },
-    ],
-  },
-];
-
-const storyLevelContexts = [
-  {
-    title: 'CSS Themes',
-    params: [
-      {
-        name: 'Forest',
-        props: {
-          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
-        },
-      },
-    ],
-  },
-];
-
-export default {
-  title: 'Addon/Contexts',
-  decorators: [withContexts(topLevelContexts)],
-};
-
-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 => {
-  const uid = `_${Date.now()}${Math.random()}`;
-  return {
-    Provider: {
-      name: `Context.Provider`,
-      props: ['value'],
-      provide() {
-        return this.value === undefined
-          ? undefined
-          : {
-              [uid]: () => this.value,
-            };
-      },
-      template: `
-        <div>
-          <slot />
-        </div>
-      `,
-    },
-    Consumer: {
-      name: `Context.Consumer`,
-      inject: {
-        [uid]: {
-          default: () => () =>
-            initialValue instanceof Object ? { ...initialValue } : { value: initialValue },
-        },
-      },
-      computed: {
-        value() {
-          return this[uid]();
-        },
-      },
-      template: `
-        <div>
-          <slot v-bind="value" />
-        </div>
-      `,
-    },
-  };
-};
-
-const NaiveIntlContext = createContext({
-  locale: 'unknown',
-  greeting: 'NULL',
-});
-
-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',
-        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,
-        },
-      },
-    ],
-  },
-};
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 e1993bf7ac87..36fcb6ddc51c 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -65,7 +65,7 @@ export const AllKnobs = () => {
       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'])) },
+      items: { default: ((items) => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) },
       nice: { default: boolean('Nice', true) },
     },
     data: () => ({
@@ -104,9 +104,7 @@ export const AllKnobs = () => {
   };
 };
 
-AllKnobs.story = {
-  name: 'All knobs',
-};
+AllKnobs.storyName = 'All knobs';
 
 export const XssSafety = () => ({
   props: {
@@ -115,6 +113,4 @@ export const XssSafety = () => ({
   template: '<div v-html="text"></div>',
 });
 
-XssSafety.story = {
-  name: 'XSS safety',
-};
+XssSafety.storyName = '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 a0ea152465a6..ff4bf352b05b 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
@@ -11,6 +11,4 @@ export const GoToWelcome = () => ({
   },
 });
 
-GoToWelcome.story = {
-  name: 'Go to welcome',
-};
+GoToWelcome.storyName = '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
deleted file mode 100644
index 809d459a88ca..000000000000
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  title: 'Addon/Notes',
-};
-
-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>',
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-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/ButtonTs.vue b/examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue
new file mode 100644
index 000000000000..d316faf20c8f
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue
@@ -0,0 +1,39 @@
+<template>
+  <button class="button" @click="onClick" @dblclick="onDoubleClick">
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'Button',
+  methods: {
+    onClick($event: Event) {
+      /**
+       * Emitted when the button is clicked.
+       * @event click
+       * @type {Event}
+       */
+      this.$emit('click', $event);
+    },
+    onDoubleClick($event: Event) {
+      /**
+       * Emitted when the button is double clicked.
+       * @event doubleClick
+       * @type {Event}
+       */
+      this.$emit('double-click', $event);
+    },
+  },
+  props: {
+    /**
+     * The button's color.
+     */
+    color: {
+      type: String,
+      default: '#333',
+    },
+  },
+});
+</script>
diff --git a/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue
index 2daa195e0937..595bf4017589 100644
--- a/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue
+++ b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue
@@ -1,23 +1,26 @@
 <script>
+/**
+ * InfoButton component description
+ */
 export default {
   props: {
     /**
      * Whether to disable button
      */
     disabled: {
-      type: Boolean
+      type: Boolean,
     },
     /**
      * Button type
      */
     type: {
       type: String,
-      default: 'normal'
+      default: 'normal',
     },
     label: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     click(ev) {
@@ -25,10 +28,10 @@ export default {
        * Passthrough click event
        * @type {Event}
        */
-      this.$emit('click', ev)
-    }
-  }
-}
+      this.$emit('click', ev);
+    },
+  },
+};
 </script>
 
 <template>
@@ -64,4 +67,4 @@ export default {
   background-color: #eee;
   color: #777;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot
new file mode 100644
index 000000000000..7c84cb5492f3
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button (Typescript) Button Ts Story 1`] = `
+<button
+  class="button"
+>
+  Storybook has builtin Typescript support for Vue components
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
index 1c59fe0ea820..50e895ed4a37 100644
--- a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Button Rounded 1`] = `
 <button
   class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
+  style="color: rgb(255, 0, 0); border-color: #f00;"
 >
   A Button with rounded edges!
 </button>
diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
index dfbcfa3ae753..229c3457cfe4 100644
--- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
@@ -3,9 +3,12 @@ import App from '../../App.vue';
 export default {
   title: 'App',
   component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export const app = () => ({
-  render: h => h(App),
+  render: (h) => h(App),
 });
-app.story = { name: 'App' };
+app.storyName = 'App';
diff --git a/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js b/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js
new file mode 100644
index 000000000000..caab5dd3642b
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js
@@ -0,0 +1,11 @@
+import ButtonTs from './ButtonTs.vue';
+
+export default {
+  title: 'Button (Typescript)',
+  component: ButtonTs,
+};
+
+export const ButtonTsStory = () => ({
+  components: { ButtonTs },
+  template: '<ButtonTs>Storybook has builtin Typescript support for Vue components</ButtonTs>',
+});
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
index 13b3ff4eb0be..79832e339a7e 100644
--- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -5,10 +5,17 @@ export default {
   component: MyButton,
 };
 
-export const Rounded = () => ({
+export const Rounded = (args) => ({
   components: { MyButton },
-  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+  template: '<my-button :color="color" :rounded="rounded">A Button with rounded edges</my-button>',
+  data() {
+    return args;
+  },
 });
+Rounded.argTypes = {
+  rounded: { defaultValue: true },
+  color: { control: { type: 'color' }, defaultValue: '#f00' },
+};
 
 export const Square = () => ({
   components: { MyButton },
diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
index 0f8a76a70bb0..b40eaf5bdecd 100644
--- a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
@@ -9,6 +9,6 @@ export default {
 
 export const welcome = () => {
   return {
-    render: h => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
+    render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
   };
 };
diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
new file mode 100644
index 000000000000..3b7dd58f3880
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
@@ -0,0 +1,11 @@
+export default {
+  title: 'Core|Errors',
+  parameters: { chromatic: { disable: true } },
+};
+
+export const throwsError = () => {
+  throw new Error('foo');
+};
+throwsError.parameters = { storyshots: { disable: true } };
+
+export const nullError = () => null;
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 51168bb7673e..2cbb8972babf 100644
--- a/examples/vue-kitchen-sink/src/stories/core-template.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -5,6 +5,4 @@ export default {
 export const StringOnly = () =>
   '<my-button :rounded="false">A Button with square edges</my-button>';
 
-StringOnly.story = {
-  name: 'string only',
-};
+StringOnly.storyName = '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 fbb1f7942bef..7f328fe356ed 100644
--- a/examples/vue-kitchen-sink/src/stories/core.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core.stories.js
@@ -13,14 +13,12 @@ export default {
   },
 };
 
-export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
-  template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
+export const PassedToStory = (_args, { parameters: { fileName, ...parameters } }) => ({
+  template: `<div>Parameters are <pre>${JSON.stringify(parameters, null, 2)}</pre></div>`,
 });
 
-PassedToStory.story = {
-  name: 'passed to story',
+PassedToStory.storyName = 'passed to story';
 
-  parameters: {
-    storyParameter,
-  },
+PassedToStory.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 0fbdfc039b39..06b7c5dc7d41 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -3,7 +3,7 @@ import MyButton from './Button.vue';
 export default {
   title: 'Custom/Decorator for Vue',
   decorators: [
-    storyFn => {
+    (storyFn) => {
       // Decorated with story-function
       const WrapButton = storyFn({ customContext: 52, parameters: { customParameter: 42 } });
       return {
@@ -30,7 +30,7 @@ export const Template = () => ({
   template: '<my-button>MyButton with template</my-button>',
 });
 
-export const WithData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
+export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
   template: `<pre v-pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
 });
 
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 181b1036612a..7d6d97193d73 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -9,7 +9,7 @@ export default {
 };
 
 export const Render = () => ({
-  render: h => h('div', ['renders a div with some text in it..']),
+  render: (h) => h('div', ['renders a div with some text in it..']),
 });
 
 export const RenderComponent = () => ({
@@ -18,9 +18,7 @@ export const RenderComponent = () => ({
   },
 });
 
-RenderComponent.story = {
-  name: 'render + component',
-};
+RenderComponent.storyName = 'render + component';
 
 export const Template = () => ({
   template: `
@@ -35,9 +33,7 @@ export const TemplateComponent = () => ({
   template: '<my-button>MyButton rendered in a template</my-button>',
 });
 
-TemplateComponent.story = {
-  name: 'template + component',
-};
+TemplateComponent.storyName = 'template + component';
 
 export const TemplateMethods = () => ({
   components: { MyButton },
@@ -51,9 +47,7 @@ export const TemplateMethods = () => ({
   },
 });
 
-TemplateMethods.story = {
-  name: 'template + methods',
-};
+TemplateMethods.storyName = 'template + methods';
 
 export const JSX = () => ({
   components: { MyButton },
@@ -82,9 +76,7 @@ export const VuexActions = () => ({
   },
 });
 
-VuexActions.story = {
-  name: 'vuex + actions',
-};
+VuexActions.storyName = 'vuex + actions';
 
 export const WhateverYouWant = () => ({
   components: { MyButton },
@@ -105,9 +97,7 @@ export const WhateverYouWant = () => ({
   },
 });
 
-WhateverYouWant.story = {
-  name: 'whatever you want',
-};
+WhateverYouWant.storyName = 'whatever you want';
 
 export const PreRegisteredComponent = () => ({
   /* By pre-registering component in config.js,
@@ -120,6 +110,4 @@ export const PreRegisteredComponent = () => ({
       </p>`,
 });
 
-PreRegisteredComponent.story = {
-  name: 'pre-registered component',
-};
+PreRegisteredComponent.storyName = 'pre-registered component';
diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
index 42d89b8c123b..92943434adba 100644
--- a/examples/vue-kitchen-sink/webpack.config.js
+++ b/examples/vue-kitchen-sink/webpack.config.js
@@ -27,10 +27,15 @@ module.exports = {
       },
       {
         test: /\.(png|jpg|gif)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]',
-        },
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              esModule: false,
+              fallback: 'file-loader',
+            },
+          },
+        ],
       },
       {
         test: /\.svg$/,
@@ -45,6 +50,19 @@ module.exports = {
         include: [path.resolve(__dirname, '../stories')],
         enforce: 'pre',
       },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              // enable CSS Modules
+              modules: true,
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {
diff --git a/examples/web-components-kitchen-sink/.storybook/main.js b/examples/web-components-kitchen-sink/.storybook/main.js
index 5262e94a30a8..0785ef39c3d6 100644
--- a/examples/web-components-kitchen-sink/.storybook/main.js
+++ b/examples/web-components-kitchen-sink/.storybook/main.js
@@ -1,13 +1,13 @@
 module.exports = {
-  presets: ['@storybook/addon-docs/preset'],
   addons: [
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-backgrounds/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-options/register',
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-viewport/register',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-viewport',
   ],
 };
diff --git a/examples/web-components-kitchen-sink/.storybook/preview.js b/examples/web-components-kitchen-sink/.storybook/preview.js
index 5fbd341a802c..5670ebb2e8e9 100644
--- a/examples/web-components-kitchen-sink/.storybook/preview.js
+++ b/examples/web-components-kitchen-sink/.storybook/preview.js
@@ -1,19 +1,11 @@
 /* global window */
 
-import {
-  configure,
-  addParameters,
-  addDecorator,
-  setCustomElements,
-} from '@storybook/web-components';
-import { withA11y } from '@storybook/addon-a11y';
+import { configure, addParameters, setCustomElements } from '@storybook/web-components';
 
 import customElements from '../custom-elements.json';
 
 setCustomElements(customElements);
 
-addDecorator(withA11y);
-
 addParameters({
   a11y: {
     config: {},
@@ -29,9 +21,11 @@ addParameters({
 
 // configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
 
-// force full reload to not reregister web components
+// force full reload to not re-register web components
 const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
+
 configure(req, module);
+
 if (module.hot) {
   module.hot.accept(req.id, () => {
     const currentLocationHref = window.location.href;
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index bf8d9eb3eba8..0db739c7647f 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-components-kitchen-sink",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "private": true,
   "description": "",
   "keywords": [],
@@ -12,30 +12,33 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.3.0-rc.0",
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-backgrounds": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-docs": "5.3.0-rc.0",
-    "@storybook/addon-events": "5.3.0-rc.0",
-    "@storybook/addon-jest": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addon-storysource": "5.3.0-rc.0",
-    "@storybook/addon-viewport": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/core": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/source-loader": "5.3.0-rc.0",
-    "@storybook/web-components": "5.3.0-rc.0",
+    "@storybook/addon-a11y": "6.0.0-beta.21",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-backgrounds": "6.0.0-beta.21",
+    "@storybook/addon-controls": "6.0.0-beta.21",
+    "@storybook/addon-docs": "6.0.0-beta.21",
+    "@storybook/addon-events": "6.0.0-beta.21",
+    "@storybook/addon-jest": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addon-storysource": "6.0.0-beta.21",
+    "@storybook/addon-viewport": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/core": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/source-loader": "6.0.0-beta.21",
+    "@storybook/web-components": "6.0.0-beta.21",
     "babel-loader": "^8.0.5",
     "eventemitter3": "^4.0.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "lit-element": "^2.2.1"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "npm5gsofwkf"
+    }
   }
 }
diff --git a/examples/web-components-kitchen-sink/src/DemoWcCard.js b/examples/web-components-kitchen-sink/src/DemoWcCard.js
index d5e21a278b48..5978bc050d26 100644
--- a/examples/web-components-kitchen-sink/src/DemoWcCard.js
+++ b/examples/web-components-kitchen-sink/src/DemoWcCard.js
@@ -77,7 +77,7 @@ export class DemoWcCard extends LitElement {
             : html`
                 <dl>
                   ${this.rows.map(
-                    row => html`
+                    (row) => html`
                       <dt>${row.header}</dt>
                       <dd>${row.value}</dd>
                     `
diff --git a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
index ebbacd65298f..2b14aeeeea3a 100644
--- a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,30 +1,22 @@
 import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
 import { html } from 'lit-html';
 
 const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons/a11y',
-  decorators: [withA11y],
   parameters: {
     options: { selectedPanel: 'storybook/a11y/panel' },
   },
 };
 
-export const Default = () => html`
-  <button></button>
-`;
-export const Label = () => html`
-  <button>${text}</button>
-`;
-export const Disabled = () => html`
-  <button disabled>${text}</button>
-`;
+export const Default = () => html` <button></button> `;
+export const Label = () => html` <button>${text}</button> `;
+export const Disabled = () => html` <button disabled>${text}</button> `;
 export const Story4 = () => html`
   <button style="color: black; background-color: brown;">${text}</button>
 `;
-Story4.story = { name: 'Invalid contrast' };
+Story4.storyName = 'Invalid contrast';
 
 export const Story5 = () => {
   const div = document.createElement('div');
@@ -33,4 +25,4 @@ export const Story5 = () => {
   }, 1000);
   return div;
 };
-Story5.story = { name: 'Delayed render' };
+Story5.storyName = 'Delayed render';
diff --git a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
index 0831b7ab632a..019e582adcce 100644
--- a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
@@ -1,48 +1,65 @@
-import { withActions, decorate } from '@storybook/addon-actions';
 import { html } from 'lit-html';
 
-const pickTarget = decorate([args => [args[0].target]]);
-
-const button = () => html`
-  <button type="button">Hello World</button>
-`;
+const buttonStory = () => () => html` <button type="button">Hello World</button> `;
 
 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' })(
-    () => html`
-      <div>
-        Clicks on this button will be logged: <button class="btn" type="button">Button</button>
-      </div>
-    `
-  );
-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' };
+export const Story1 = buttonStory();
+Story1.storyName = 'Hello World';
+
+Story1.parameters = {
+  actions: {
+    handles: ['click'],
+  },
+};
+
+export const Story2 = buttonStory();
+Story2.storyName = 'Multiple actions';
+
+Story2.parameters = {
+  actions: {
+    handles: ['click', 'contextmenu'],
+  },
+};
+
+export const Story3 = buttonStory();
+Story3.storyName = 'Multiple actions + config';
+
+Story3.parameters = {
+  actions: {
+    handles: ['click', 'contextmenu', { clearOnStoryChange: false }],
+  },
+};
+
+export const Story4 = buttonStory();
+Story4.storyName = 'Multiple actions, object';
+
+Story4.parameters = {
+  actions: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
+};
+
+export const Story5 = () => `
+        <div>
+          Clicks on this button will be logged: <button class="btn" type="button">Button</button>
+        </div>
+      `;
+Story5.storyName = 'Multiple actions, selector';
+
+Story5.parameters = {
+  actions: {
+    handles: [{ 'click .btn': 'clicked', contextmenu: 'right clicked' }],
+  },
+};
+
+export const Story6 = buttonStory();
+Story6.storyName = 'Multiple actions, object + config';
+
+Story6.parameters = {
+  actions: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false }],
+  },
+};
diff --git a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
index 881637bf133b..dc78b4d31000 100644
--- a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -5,19 +5,20 @@ import '../demo-wc-card.js';
 export default {
   title: 'Addons/Backgrounds',
   parameters: {
-    backgrounds: [
-      { name: 'light', value: '#eeeeee' },
-      { name: 'dark', value: '#222222', default: true },
-    ],
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#eeeeee' },
+        { name: 'dark', value: '#222222' },
+      ],
+    },
   },
 };
 
 export const Story1 = () => html`
   <demo-wc-card>You should be able to switch backgrounds for this story</demo-wc-card>
 `;
-Story1.story = { name: 'story 1' };
+Story1.storyName = 'story 1';
 
-export const Story2 = () => html`
-  <demo-wc-card back-side>This one too!</demo-wc-card>
-`;
-Story2.story = { name: 'story 2' };
+export const Story2 = () => html` <demo-wc-card back-side>This one too!</demo-wc-card> `;
+Story2.storyName = 'story 2';
diff --git a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
index 82b88b22546f..c207e45b56f9 100644
--- a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
@@ -44,7 +44,7 @@ export const Story3 = () => {
     </style>
   `;
 };
-Story3.story = { name: 'Color Selection' };
+Story3.storyName = 'Color Selection';
 
 export const Story4 = () => {
   const name = text('Name', 'Jane');
@@ -84,17 +84,13 @@ export const Story4 = () => {
       <p>${stockMessage}</p>
       <p>Also, I have:</p>
       <ul>
-        ${items.map(
-          item => html`
-            <li>${item}</li>
-          `
-        )}
+        ${items.map((item) => html` <li>${item}</li> `)}
       </ul>
       <p>${salutation}</p>
     </div>
   `;
 };
-Story4.story = { name: 'All knobs' };
+Story4.storyName = 'All knobs';
 
 export const XssSafety = () => {
   const content = text('content', '<img src=x onerror="alert(\'XSS Attack\')" >');
diff --git a/examples/web-components-kitchen-sink/stories/card.stories.js b/examples/web-components-kitchen-sink/stories/card.stories.js
index ecead85cf581..282bcc7ae0d8 100644
--- a/examples/web-components-kitchen-sink/stories/card.stories.js
+++ b/examples/web-components-kitchen-sink/stories/card.stories.js
@@ -7,26 +7,25 @@ export default {
   component: 'demo-wc-card',
 };
 
-export const Front = () => html`
-  <demo-wc-card>A simple card</demo-wc-card>
-`;
+export const Front = ({ backSide, header, rows }) =>
+  html`
+    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+      >A simple card</demo-wc-card
+    >
+  `;
+Front.args = { backSide: false, header: undefined, rows: [] };
 
-export const Back = () => html`
-  <demo-wc-card back-side>A simple card</demo-wc-card>
-`;
+export const Back = Front.bind();
+Back.args = { ...Front.args, backSide: true };
 
-export const FrontOwnHeader = () => html`
-  <demo-wc-card header="My own Header">A simple card</demo-wc-card>
-`;
+export const FrontOwnHeader = Front.bind();
+FrontOwnHeader.args = { ...Front.args, header: 'My own Header' };
 
-export const BackWithData = () => html`
-  <demo-wc-card
-    back-side
-    .rows=${[
-      { header: 'health', value: '200' },
-      { header: 'mana', value: '100' },
-    ]}
-  >
-    A simple card
-  </demo-wc-card>
-`;
+export const BackWithData = Front.bind();
+BackWithData.args = {
+  ...Back.args,
+  rows: [
+    { header: 'health', value: '200' },
+    { header: 'mana', value: '100' },
+  ],
+};
diff --git a/jest.config.js b/jest.config.js
index 1447aa09b3bc..a9abc089ca0d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,7 +21,6 @@ module.exports = {
     'babel-runtime/core-js/(.*)': `core-js/es/$1`,
     // 'babel-runtime/core-js/object/assign'
     'core-js/library/fn/object/assign': 'core-js/es/object/assign',
-    'react-syntax-highlighter/dist/esm/(.*)': 'react-syntax-highlighter/dist/cjs/$1',
   },
   projects: [
     '<rootDir>',
@@ -43,7 +42,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
-    '^.+\\.[jt]sx?$': '<rootDir>/scripts/babel-jest.js',
+    '^.+\\.[jt]sx?$': '<rootDir>/scripts/utils/jest-transform-js.js',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
@@ -76,7 +75,7 @@ module.exports = {
     DOCS_MODE: false,
     PREVIEW_URL: undefined,
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
+  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.js'],
   coverageReporters: ['lcov'],
diff --git a/lerna.json b/lerna.json
index c5f89a61c1df..3021283b6ecf 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "5.3.0-rc.0"
+  "version": "6.0.0-beta.21"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 3633a889d38d..b96b334647d0 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -15,31 +15,45 @@
     "directory": "lib/addons"
   },
   "license": "MIT",
+  "main": "dist/public_api.js",
+  "types": "dist/public_api.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/public_api.js",
-  "types": "dist/public_api.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/router": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "util-deprecate": "^1.0.2"
+    "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
-    "@types/util-deprecate": "^1.0.0"
+    "@reach/router": "^1.3.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/addons/src/hooks.ts b/lib/addons/src/hooks.ts
index ebf64215b6bd..d448a347a4ce 100644
--- a/lib/addons/src/hooks.ts
+++ b/lib/addons/src/hooks.ts
@@ -1,8 +1,14 @@
 import window from 'global';
 import { logger } from '@storybook/client-logger';
-import { FORCE_RE_RENDER, STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';
+import {
+  FORCE_RE_RENDER,
+  STORY_RENDERED,
+  DOCS_RENDERED,
+  UPDATE_STORY_ARGS,
+  UPDATE_GLOBAL_ARGS,
+} from '@storybook/core-events';
 import { addons } from './index';
-import { StoryGetter, StoryContext } from './types';
+import { StoryGetter, StoryContext, Args } from './types';
 
 interface StoryStore {
   fromId: (
@@ -82,7 +88,7 @@ export class HooksContext {
   }
 
   clean() {
-    this.prevEffects.forEach(effect => {
+    this.prevEffects.forEach((effect) => {
       if (effect.destroy) {
         effect.destroy();
       }
@@ -99,13 +105,13 @@ export class HooksContext {
 
   triggerEffects() {
     // destroy removed effects
-    this.prevEffects.forEach(effect => {
+    this.prevEffects.forEach((effect) => {
       if (!this.currentEffects.includes(effect) && effect.destroy) {
         effect.destroy();
       }
     });
     // trigger added effects
-    this.currentEffects.forEach(effect => {
+    this.currentEffects.forEach((effect) => {
       if (!this.prevEffects.includes(effect)) {
         // eslint-disable-next-line no-param-reassign
         effect.destroy = effect.create();
@@ -118,12 +124,12 @@ export class HooksContext {
   addRenderListeners() {
     this.removeRenderListeners();
     const channel = addons.getChannel();
-    RenderEvents.forEach(e => channel.on(e, this.renderListener));
+    RenderEvents.forEach((e) => channel.on(e, this.renderListener));
   }
 
   removeRenderListeners() {
     const channel = addons.getChannel();
-    RenderEvents.forEach(e => channel.removeListener(e, this.renderListener));
+    RenderEvents.forEach((e) => channel.removeListener(e, this.renderListener));
   }
 }
 
@@ -267,7 +273,7 @@ Incoming: ${deps}`);
 function useMemoLike<T>(name: string, nextCreate: () => T, deps: any[] | undefined): T {
   const { memoizedState } = useHook(
     name,
-    hook => {
+    (hook) => {
       // eslint-disable-next-line no-param-reassign
       hook.memoizedState = nextCreate();
     },
@@ -350,7 +356,7 @@ export function useReducer<S, A>(
 ): [S, (action: A) => void] {
   const initialState: (() => S) | S = init != null ? () => init(initialArg) : initialArg;
   const [state, setState] = useStateLike('useReducer', initialState);
-  const dispatch = (action: A) => setState(prevState => reducer(prevState, action));
+  const dispatch = (action: A) => setState((prevState) => reducer(prevState, action));
   return [state, dispatch];
 }
 
@@ -368,7 +374,6 @@ export function useEffect(create: () => (() => void) | void, deps?: any[]): void
 
 export interface Listener {
   (...args: any[]): void;
-  ignorePeer?: boolean;
 }
 
 export interface EventMap {
@@ -409,3 +414,29 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S): S | und
   }
   return undefined;
 }
+
+/* Returns current value of story args */
+export function useArgs(): [Args, (newArgs: Args) => void] {
+  const channel = addons.getChannel();
+  const { id: storyId, args } = useStoryContext();
+
+  const updateArgs = useCallback(
+    (newArgs: Args) => channel.emit(UPDATE_STORY_ARGS, storyId, newArgs),
+    [channel, storyId]
+  );
+
+  return [args, updateArgs];
+}
+
+/* Returns current value of global args */
+export function useGlobalArgs(): [Args, (newGlobalArgs: Args) => void] {
+  const channel = addons.getChannel();
+  const { globalArgs } = useStoryContext();
+
+  const updateGlobalArgs = useCallback(
+    (newGlobalArgs: Args) => channel.emit(UPDATE_GLOBAL_ARGS, newGlobalArgs),
+    [channel]
+  );
+
+  return [globalArgs, updateGlobalArgs];
+}
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index e5861058c88e..d086a936f438 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -1,30 +1,29 @@
 import global from 'global';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
+import { RenderData as RouterData } from '@storybook/router';
 import { logger } from '@storybook/client-logger';
+import { ThemeVars } from '@storybook/theming';
 import { types, Types } from './types';
 
+export { Channel };
+
 export interface RenderOptions {
-  active: boolean;
-  key: string;
-}
-export interface RouteOptions {
-  storyId: string;
-}
-export interface MatchOptions {
-  viewMode: string;
+  active?: boolean;
+  key?: string;
 }
 
 export interface Addon {
   title: string;
   type?: Types;
   id?: string;
-  route?: (routeOptions: RouteOptions) => string;
-  match?: (matchOptions: MatchOptions) => boolean;
+  route?: (routeOptions: RouterData) => string;
+  match?: (matchOptions: RouterData) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
   paramKey?: string;
+  disabled?: boolean;
+  hidden?: boolean;
 }
 
 export type Loader = (api: API) => void;
@@ -40,12 +39,13 @@ interface Elements {
 }
 
 interface Config {
+  theme?: ThemeVars;
   [key: string]: any;
 }
 
 export class AddonStore {
   constructor() {
-    this.promise = new Promise(res => {
+    this.promise = new Promise((res) => {
       this.resolve = () => res(this.getChannel());
     }) as Promise<Channel>;
   }
@@ -116,7 +116,7 @@ export class AddonStore {
   };
 
   loadAddons = (api: any) => {
-    Object.values(this.loaders).forEach(value => value(api));
+    Object.values(this.loaders).forEach((value) => value(api));
   };
 }
 
diff --git a/lib/addons/src/make-decorator.test.ts b/lib/addons/src/make-decorator.test.ts
index ad49443f5c54..e1fe7a7b0063 100644
--- a/lib/addons/src/make-decorator.test.ts
+++ b/lib/addons/src/make-decorator.test.ts
@@ -1,4 +1,3 @@
-import deprecate from 'util-deprecate';
 import { StoryContext, StoryGetter } from './types';
 import { makeDecorator } from './make-decorator';
 
@@ -12,8 +11,6 @@ const defaultDecorateStory = (getStory: StoryGetter, decorators: DecoratorFn[])
     getStory
   );
 
-jest.mock('util-deprecate', () => jest.fn(fn => jest.fn((...a) => fn(...a))));
-
 const baseContext = {
   name: '',
   kind: '',
@@ -46,6 +43,51 @@ describe('makeDecorator', () => {
     expect(wrapper).toHaveBeenCalledWith(expect.any(Function), context, { options: 'test-val' });
   });
 
+  it('passes object options added at decoration time', () => {
+    const wrapper = jest.fn();
+    const decorator = makeDecorator({ wrapper, name: 'test', parameterName: 'test' });
+    const story = jest.fn();
+    const options = { test: 'val' };
+    const decoratedStory = defaultDecorateStory(story, [decorator(options)]);
+
+    const context = { ...baseContext };
+    decoratedStory(context);
+
+    expect(wrapper).toHaveBeenCalledWith(expect.any(Function), context, {
+      options: { test: 'val' },
+    });
+  });
+
+  it('passes multiple options added at decoration time', () => {
+    const wrapper = jest.fn();
+    const decorator = makeDecorator({ wrapper, name: 'test', parameterName: 'test' });
+    const story = jest.fn();
+    const options = ['test-val', 'test-val2'];
+    const decoratedStory = defaultDecorateStory(story, [decorator(...options)]);
+
+    const context = { ...baseContext };
+    decoratedStory(context);
+
+    expect(wrapper).toHaveBeenCalledWith(expect.any(Function), context, {
+      options: ['test-val', 'test-val2'],
+    });
+  });
+
+  it('passes multiple options including objects added at decoration time', () => {
+    const wrapper = jest.fn();
+    const decorator = makeDecorator({ wrapper, name: 'test', parameterName: 'test' });
+    const story = jest.fn();
+    const options = ['test-val', 'test-val2', { test: 'val' }];
+    const decoratedStory = defaultDecorateStory(story, [decorator(...options)]);
+
+    const context = { ...baseContext };
+    decoratedStory(context);
+
+    expect(wrapper).toHaveBeenCalledWith(expect.any(Function), context, {
+      options: ['test-val', 'test-val2', { test: 'val' }],
+    });
+  });
+
   it('passes both options *and* parameters at the same time', () => {
     const wrapper = jest.fn();
     const decorator = makeDecorator({ wrapper, name: 'test', parameterName: 'test' });
@@ -110,40 +152,12 @@ describe('makeDecorator', () => {
     expect(story).toHaveBeenCalled();
   });
 
-  it('passes options added at story time, but with a deprecation warning, if allowed', () => {
-    const wrapper = jest.fn();
-    const decorator = makeDecorator({
-      wrapper,
-      name: 'test',
-      parameterName: 'test',
-      allowDeprecatedUsage: true,
-    });
-    const options = 'test-val';
-    const story = jest.fn();
-    const decoratedStory = decorator(options)(story);
-    expect(deprecate).toHaveBeenCalledTimes(1);
-    expect(deprecate.mock.calls[0]).toEqual([
-      expect.any(Function),
-      expect.stringContaining(
-        `instead use addDecorator(test) and pass options with the 'test' parameter`
-      ),
-    ]);
-
-    const context = { ...baseContext };
-    decoratedStory(context);
-
-    expect(wrapper).toHaveBeenCalledWith(expect.any(Function), context, {
-      options: 'test-val',
-    });
-  });
-
   it('throws if options are added at storytime, if not allowed', () => {
     const wrapper = jest.fn();
     const decorator = makeDecorator({
       wrapper,
       name: 'test',
       parameterName: 'test',
-      allowDeprecatedUsage: false,
     });
     const options = 'test-val';
     const story = jest.fn();
diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts
index 912f69ab387f..9868a3b57da1 100644
--- a/lib/addons/src/make-decorator.ts
+++ b/lib/addons/src/make-decorator.ts
@@ -1,4 +1,3 @@
-import deprecate from 'util-deprecate';
 import { StoryWrapper, StoryGetter, StoryContext } from './types';
 
 type MakeDecoratorResult = (...args: any) => any;
@@ -6,7 +5,6 @@ type MakeDecoratorResult = (...args: any) => any;
 interface MakeDecoratorOptions {
   name: string;
   parameterName: string;
-  allowDeprecatedUsage?: boolean;
   skipIfNoParametersOrOptions?: boolean;
   wrapper: StoryWrapper;
 }
@@ -16,7 +14,6 @@ export const makeDecorator = ({
   parameterName,
   wrapper,
   skipIfNoParametersOrOptions = false,
-  allowDeprecatedUsage = false,
 }: MakeDecoratorOptions): MakeDecoratorResult => {
   const decorator: any = (options: object) => (getStory: StoryGetter, context: StoryContext) => {
     const parameters = context.parameters && context.parameters[parameterName];
@@ -44,19 +41,13 @@ export const makeDecorator = ({
     return (...innerArgs: any): any => {
       // Used as [.]addDecorator(decorator(options))
       if (innerArgs.length > 1) {
+        // Used as [.]addDecorator(decorator(option1, option2))
+        if (args.length > 1) {
+          return decorator(args)(...innerArgs);
+        }
         return decorator(...args)(...innerArgs);
       }
 
-      if (allowDeprecatedUsage) {
-        // Used to wrap a story directly .add('story', decorator(options)(() => <Story />))
-        //   This is now deprecated:
-        return deprecate(
-          (context: any) => decorator(...args)(innerArgs[0], context),
-          `Passing stories directly into ${name}() is deprecated,
-          instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
-        );
-      }
-
       throw new Error(
         `Passing stories directly into ${name}() is not allowed,
         instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`
diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts
index 0c67e87dc0da..df6c6136a22b 100644
--- a/lib/addons/src/types.ts
+++ b/lib/addons/src/types.ts
@@ -5,6 +5,7 @@ export enum types {
   TAB = 'tab',
   PANEL = 'panel',
   TOOL = 'tool',
+  TOOLEXTRA = 'toolextra',
   PREVIEW = 'preview',
   NOTES_ELEMENT = 'notes-element',
 }
@@ -12,23 +13,52 @@ export enum types {
 export type Types = types | string;
 
 export function isSupportedType(type: Types): boolean {
-  return !!Object.values(types).find(typeVal => typeVal === type);
+  return !!Object.values(types).find((typeVal) => typeVal === type);
 }
 
+export type StoryId = string;
+export type StoryKind = string;
+export type StoryName = string;
+export type ViewMode = 'story' | 'docs';
+
 export interface Parameters {
   fileName?: string;
   options?: OptionsParameter;
+  layout?: 'centered' | 'fullscreen' | 'padded';
+  docsOnly?: boolean;
+  [key: string]: any;
+}
+
+// This is duplicated in @storybook/api because there is no common place to put types (manager/preview)
+// We cannot import from @storybook/api here because it will lead to manager code (i.e. emotion) imported in the preview
+export interface Args {
   [key: string]: any;
 }
 
-export interface StoryContext {
-  id: string;
-  name: string;
-  kind: string;
+export interface ArgType {
+  name?: string;
+  description?: string;
+  defaultValue?: any;
+  [key: string]: any;
+}
+
+export interface ArgTypes {
+  [key: string]: ArgType;
+}
+
+export interface StoryIdentifier {
+  id: StoryId;
+  kind: StoryKind;
+  name: StoryName;
+}
+
+export type StoryContext = StoryIdentifier & {
   [key: string]: any;
   parameters: Parameters;
+  args: Args;
+  globalArgs: Args;
   hooks?: HooksContext;
-}
+};
 
 export interface WrapperSettings {
   options: OptionsParameter;
@@ -37,8 +67,17 @@ export interface WrapperSettings {
   };
 }
 
+export type Comparator<T> = ((a: T, b: T) => boolean) | ((a: T, b: T) => number);
+export type StorySortMethod = 'configure' | 'alphabetical';
+export interface StorySortObjectParameter {
+  method?: StorySortMethod;
+  order?: any[];
+  locales?: string;
+}
+export type StorySortParameter = Comparator<any> | StorySortObjectParameter;
+
 export interface OptionsParameter extends Object {
-  storySort?: any;
+  storySort?: StorySortParameter;
   hierarchyRootSeparator?: string;
   hierarchySeparator?: RegExp;
   showRoots?: boolean;
@@ -50,7 +89,10 @@ export interface OptionsParameter extends Object {
 }
 
 export type StoryGetter = (context: StoryContext) => any;
-export type StoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+
+export type LegacyStoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+export type ArgsStoryFn<ReturnType = unknown> = (a?: Args, p?: StoryContext) => ReturnType;
+export type StoryFn<ReturnType = unknown> = LegacyStoryFn<ReturnType> | ArgsStoryFn<ReturnType>;
 
 export type StoryWrapper = (
   getStory: StoryGetter,
@@ -61,9 +103,9 @@ export type StoryWrapper = (
 export type MakeDecoratorResult = (...args: any) => any;
 
 export interface AddStoryArgs<StoryFnReturnType = unknown> {
-  id: string;
-  kind: string;
-  name: string;
+  id: StoryId;
+  kind: StoryKind;
+  name: StoryName;
   storyFn: StoryFn<StoryFnReturnType>;
   parameters: Parameters;
 }
@@ -78,9 +120,9 @@ export interface ClientApiAddons<StoryFnReturnType> {
 export type ClientApiReturnFn<StoryFnReturnType> = (...args: any[]) => StoryApi<StoryFnReturnType>;
 
 export interface StoryApi<StoryFnReturnType = unknown> {
-  kind: string;
+  kind: StoryKind;
   add: (
-    storyName: string,
+    storyName: StoryName,
     storyFn: StoryFn<StoryFnReturnType>,
     parameters?: Parameters
   ) => StoryApi<StoryFnReturnType>;
@@ -94,8 +136,13 @@ export type DecoratorFunction<StoryFnReturnType = unknown> = (
   c: StoryContext
 ) => ReturnType<StoryFn<StoryFnReturnType>>;
 
+export type DecorateStoryFunction<StoryFnReturnType = unknown> = (
+  storyFn: StoryFn<StoryFnReturnType>,
+  decorators: DecoratorFunction<StoryFnReturnType>[]
+) => StoryFn<StoryFnReturnType>;
+
 export interface ClientStoryApi<StoryFnReturnType = unknown> {
-  storiesOf(kind: string, module: NodeModule): StoryApi<StoryFnReturnType>;
+  storiesOf(kind: StoryKind, module: NodeModule): StoryApi<StoryFnReturnType>;
   addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
   addParameters(parameter: Parameters): StoryApi<StoryFnReturnType>;
 }
diff --git a/lib/api/package.json b/lib/api/package.json
index f01f2f23ec89..06c17362aedb 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -14,46 +14,58 @@
     "url": "https://github.com/storybookjs/storybook.git"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@reach/router": "^1.3.3",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
-    "@storybook/router": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/router": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "@types/reach__router": "^1.3.5",
     "core-js": "^3.0.1",
-    "fast-deep-equal": "^2.0.1",
+    "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
     "memoizerific": "^1.11.3",
-    "prop-types": "^15.6.2",
     "react": "^16.8.3",
-    "semver": "^6.0.0",
-    "shallow-equal": "^1.1.0",
+    "regenerator-runtime": "^0.13.3",
+    "@storybook/semver": "^7.3.2",
     "store2": "^2.7.1",
-    "telejson": "^3.2.0",
+    "telejson": "^4.0.0",
+    "ts-dedent": "^1.1.1",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.149",
-    "@types/semver": "^6.0.0"
+    "@types/lodash": "^4.14.150",
+    "@types/semver": "^7.1.0",
+    "flush-promises": "^1.0.2",
+    "qs": "^6.6.0"
   },
   "peerDependencies": {
-    "regenerator-runtime": "*"
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/api/scripts/generateVersion.js b/lib/api/scripts/generateVersion.js
index e8c518bda78d..631138b2c9b0 100644
--- a/lib/api/scripts/generateVersion.js
+++ b/lib/api/scripts/generateVersion.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const output = version => `export const version = '${version}';\n`;
+const output = (version) => `export const version = '${version}';\n`;
 
 const text = fs.readFileSync(path.join(__dirname, '../package.json'), 'utf8');
 const json = JSON.parse(text);
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
index 7b937d5669b6..99cf348885e3 100644
--- a/lib/api/src/index.tsx
+++ b/lib/api/src/index.tsx
@@ -1,82 +1,81 @@
-import React, { ReactElement, Component, useContext, useEffect, useMemo } from 'react';
-import memoize from 'memoizerific';
-// @ts-ignore shallow-equal is not in DefinitelyTyped
-import shallowEqualObjects from 'shallow-equal/objects';
+import React, {
+  Component,
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import mergeWith from 'lodash/mergeWith';
 
 import {
-  STORIES_CONFIGURED,
   STORY_CHANGED,
+  SHARED_STATE_CHANGED,
+  SHARED_STATE_SET,
   SET_STORIES,
-  SELECT_STORY,
-  ADDON_STATE_CHANGED,
-  ADDON_STATE_SET,
 } from '@storybook/core-events';
 import { RenderData as RouterData } from '@storybook/router';
 import { Listener } from '@storybook/channels';
-import initProviderApi, { SubAPI as ProviderAPI, Provider } from './init-provider-api';
 
 import { createContext } from './context';
 import Store, { Options } from './store';
 import getInitialState from './initial-state';
+import { StoriesHash, Story, Root, Group, isGroup, isRoot, isStory } from './lib/stories';
 
-import initAddons, { SubAPI as AddonsAPI } from './modules/addons';
-import initChannel, { SubAPI as ChannelAPI } from './modules/channel';
-import initNotifications, {
-  SubState as NotificationState,
-  SubAPI as NotificationAPI,
-} from './modules/notifications';
-import initStories, {
-  SubState as StoriesSubState,
-  SubAPI as StoriesAPI,
-  StoriesRaw,
-} from './modules/stories';
-import initLayout, { SubState as LayoutSubState, SubAPI as LayoutAPI } from './modules/layout';
-import initShortcuts, {
-  SubState as ShortcutsSubState,
-  SubAPI as ShortcutsAPI,
-} from './modules/shortcuts';
-import initURL, { QueryParams, SubAPI as UrlAPI } from './modules/url';
-import initVersions, {
-  SubState as VersionsSubState,
-  SubAPI as VersionsAPI,
-} from './modules/versions';
-
-export { Options as StoreOptions, Listener as ChannelListener };
+import * as provider from './modules/provider';
+import * as addons from './modules/addons';
+import * as channel from './modules/channel';
+import * as notifications from './modules/notifications';
+import * as stories from './modules/stories';
+import * as refs from './modules/refs';
+import * as layout from './modules/layout';
+import * as shortcuts from './modules/shortcuts';
+import * as url from './modules/url';
+import * as version from './modules/versions';
+import * as globalArgs from './modules/globalArgs';
+
+const { ActiveTabs } = layout;
+
+export { Options as StoreOptions, Listener as ChannelListener, ActiveTabs };
 
 const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });
 
-export type Module = StoreData &
-  RouterData &
+export type ModuleArgs = RouterData &
   ProviderData & {
     mode?: 'production' | 'development';
     state: State;
+    fullAPI: API;
+    store: Store;
   };
 
-export type State = Other &
-  LayoutSubState &
-  StoriesSubState &
-  NotificationState &
-  VersionsSubState &
+export type State = layout.SubState &
+  stories.SubState &
+  refs.SubState &
+  notifications.SubState &
+  version.SubState &
+  url.SubState &
+  shortcuts.SubState &
+  globalArgs.SubState &
   RouterData &
-  ShortcutsSubState;
-
-export type API = AddonsAPI &
-  ChannelAPI &
-  ProviderAPI &
-  StoriesAPI &
-  LayoutAPI &
-  NotificationAPI &
-  ShortcutsAPI &
-  VersionsAPI &
-  UrlAPI &
-  OtherAPI;
-
-interface OtherAPI {
-  [key: string]: any;
-}
-interface Other {
-  customQueryParams: QueryParams;
+  Other;
+
+export type API = addons.SubAPI &
+  channel.SubAPI &
+  provider.SubAPI &
+  stories.SubAPI &
+  refs.SubAPI &
+  globalArgs.SubAPI &
+  layout.SubAPI &
+  notifications.SubAPI &
+  shortcuts.SubAPI &
+  version.SubAPI &
+  url.SubAPI &
+  Other;
 
+interface Other {
   [key: string]: any;
 }
 
@@ -86,38 +85,68 @@ export interface Combo {
 }
 
 interface ProviderData {
-  provider: Provider;
+  provider: provider.Provider;
 }
 
-interface DocsModeData {
-  docsMode: boolean;
+export type ManagerProviderProps = RouterData &
+  ProviderData & {
+    docsMode: boolean;
+    children: ReactNode | ((props: Combo) => ReactNode);
+  };
+
+// These types are duplicated in addons.
+export type StoryId = string;
+export type StoryKind = string;
+
+export interface Args {
+  [key: string]: any;
 }
 
-interface StoreData {
-  store: Store;
+export interface ArgType {
+  name?: string;
+  description?: string;
+  defaultValue?: any;
+  [key: string]: any;
 }
 
-interface Children {
-  children: Component | ((props: Combo) => Component);
+export interface ArgTypes {
+  [key: string]: ArgType;
 }
 
-type StatePartial = Partial<State>;
+export interface Parameters {
+  [key: string]: any;
+}
 
-export type Props = Children & RouterData & ProviderData & DocsModeData;
+// This is duplicated from @storybook/client-api for the reasons mentioned in lib-addons/types.js
+export const combineParameters = (...parameterSets: Parameters[]) =>
+  mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
+    // Treat arrays as scalars:
+    if (Array.isArray(srcValue)) return srcValue;
 
-class ManagerProvider extends Component<Props, State> {
-  api: API;
+    return undefined;
+  });
+
+export type ModuleFn = (m: ModuleArgs) => Module;
+
+interface Module {
+  init?: () => void;
+  api?: unknown;
+  state?: unknown;
+}
 
-  modules: any[];
+class ManagerProvider extends Component<ManagerProviderProps, State> {
+  api: API = {} as API;
+
+  modules: Module[];
 
   static displayName = 'Manager';
 
-  constructor(props: Props) {
+  constructor(props: ManagerProviderProps) {
     super(props);
     const {
-      provider,
       location,
       path,
+      refId,
       viewMode = props.docsMode ? 'docs' : 'story',
       storyId,
       docsMode,
@@ -126,10 +155,10 @@ class ManagerProvider extends Component<Props, State> {
 
     const store = new Store({
       getState: () => this.state,
-      setState: (stateChange: StatePartial, callback) => this.setState(stateChange, callback),
+      setState: (stateChange: Partial<State>, callback) => this.setState(stateChange, callback),
     });
 
-    const routeData = { location, path, viewMode, storyId };
+    const routeData = { location, path, viewMode, storyId, refId };
 
     // Initialize the state to be the initial (persisted) state of the store.
     // This gives the modules the chance to read the persisted state, apply their defaults
@@ -138,6 +167,7 @@ class ManagerProvider extends Component<Props, State> {
       layout: { isToolshown: false, showPanel: false },
       ui: { docsMode: true },
     };
+
     this.state = store.getInitialState(
       getInitialState({
         ...routeData,
@@ -148,60 +178,42 @@ class ManagerProvider extends Component<Props, State> {
     const apiData = {
       navigate,
       store,
-      provider,
+      provider: props.provider,
     };
 
     this.modules = [
-      initChannel,
-      initAddons,
-      initLayout,
-      initNotifications,
-      initShortcuts,
-      initStories,
-      initURL,
-      initVersions,
-    ].map(initModule => initModule({ ...routeData, ...apiData, state: this.state }));
+      provider,
+      channel,
+      addons,
+      layout,
+      notifications,
+      shortcuts,
+      stories,
+      refs,
+      globalArgs,
+      url,
+      version,
+    ].map((m) => m.init({ ...routeData, ...apiData, state: this.state, fullAPI: this.api }));
 
     // Create our initial state by combining the initial state of all modules, then overlaying any saved state
-    const state = getInitialState(...this.modules.map(m => m.state));
+    const state = getInitialState(this.state, ...this.modules.map((m) => m.state));
 
     // Get our API by combining the APIs exported by each module
-    const combo = Object.assign({ navigate }, ...this.modules.map(m => m.api));
-
-    const api = initProviderApi({ provider, store, api: combo });
-
-    api.on(STORY_CHANGED, (id: string) => {
-      const options = api.getParameters(id, 'options');
-
-      if (options) {
-        api.setOptions(options);
-      }
-    });
+    const api: API = Object.assign(this.api, { navigate }, ...this.modules.map((m) => m.api));
 
-    api.on(SET_STORIES, (data: { stories: StoriesRaw }) => {
-      api.setStories(data.stories);
-      const options = storyId
-        ? api.getParameters(storyId, 'options')
-        : api.getParameters(Object.keys(data.stories)[0], 'options');
-      api.setOptions(options);
-    });
-    api.on(
-      SELECT_STORY,
-      ({ kind, story, ...rest }: { kind: string; story: string; [k: string]: any }) => {
-        api.selectStory(kind, story, rest);
-      }
-    );
     this.state = state;
     this.api = api;
   }
 
-  static getDerivedStateFromProps = (props: Props, state: State) => {
+  static getDerivedStateFromProps = (props: ManagerProviderProps, state: State) => {
     if (state.path !== props.path) {
       return {
         ...state,
         location: props.location,
         path: props.path,
-        viewMode: props.viewMode,
+        refId: props.refId,
+        // if its a docsOnly page, even the 'story' view mode is considered 'docs'
+        viewMode: (props.docsMode && props.viewMode) === 'story' ? 'docs' : props.viewMode,
         storyId: props.storyId,
       };
     }
@@ -213,12 +225,12 @@ class ManagerProvider extends Component<Props, State> {
     // a chance to do things that call other modules' APIs.
     this.modules.forEach(({ init }) => {
       if (init) {
-        init({ api: this.api });
+        init();
       }
     });
   }
 
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+  shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State) {
     const prevState = this.state;
     const prevProps = this.props;
 
@@ -240,56 +252,43 @@ class ManagerProvider extends Component<Props, State> {
 
     return (
       <ManagerContext.Provider value={value}>
-        {typeof children === 'function' ? children(value) : children}
+        <ManagerConsumer>{children}</ManagerConsumer>
       </ManagerContext.Provider>
     );
   }
 }
 
-interface ConsumerProps<S, C> {
-  filter?: (combo: C) => S;
-  pure?: boolean;
-  children: (d: S | C) => ReactElement<any> | null;
+interface ManagerConsumerProps<P = unknown> {
+  filter?: (combo: Combo) => P;
+  children: FunctionComponent<P> | ReactNode;
 }
 
-interface SubState {
-  [key: string]: any;
-}
+const defaultFilter = (c: Combo) => c;
 
-class ManagerConsumer extends Component<ConsumerProps<SubState, Combo>> {
-  prevChildren?: ReactElement<any> | null;
+function ManagerConsumer<P = Combo>({
+  // @ts-ignore
+  filter = defaultFilter,
+  children,
+}: ManagerConsumerProps<P>): ReactElement {
+  const c = useContext(ManagerContext);
+  const renderer = useRef(children);
+  const filterer = useRef(filter);
 
-  prevData?: SubState;
+  if (typeof renderer.current !== 'function') {
+    return <Fragment>{renderer.current}</Fragment>;
+  }
 
-  dataMemory?: (combo: Combo) => SubState;
+  const data = filterer.current(c);
 
-  constructor(props: ConsumerProps<SubState, Combo>) {
-    super(props);
-    this.dataMemory = props.filter ? memoize(10)(props.filter) : null;
-  }
+  const l = useMemo(() => {
+    return [...Object.entries(data).reduce((acc, keyval) => acc.concat(keyval), [])];
+  }, [c.state]);
 
-  render() {
-    const { children, pure } = this.props;
+  return useMemo(() => {
+    const Child = renderer.current as FunctionComponent<P>;
 
-    return (
-      <ManagerContext.Consumer>
-        {d => {
-          const data = this.dataMemory ? this.dataMemory(d) : d;
-          if (
-            pure &&
-            this.prevChildren &&
-            this.prevData &&
-            shallowEqualObjects(data, this.prevData)
-          ) {
-            return this.prevChildren;
-          }
-          this.prevChildren = children(data);
-          this.prevData = data;
-          return this.prevChildren;
-        }}
-      </ManagerContext.Consumer>
-    );
-  }
+    return <Child {...data} />;
+  }, l);
 }
 
 export function useStorybookState(): State {
@@ -301,7 +300,17 @@ export function useStorybookApi(): API {
   return api;
 }
 
-export { ManagerConsumer as Consumer, ManagerProvider as Provider };
+export {
+  ManagerConsumer as Consumer,
+  ManagerProvider as Provider,
+  StoriesHash,
+  Story,
+  Root,
+  Group,
+  isGroup,
+  isRoot,
+  isStory,
+};
 
 export interface EventMap {
   [eventId: string]: Listener;
@@ -334,48 +343,48 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S) {
 }
 
 type StateMerger<S> = (input: S) => S;
-// chache for taking care of HMR
+// cache for taking care of HMR
 const addonStateCache: {
   [key: string]: any;
 } = {};
 
 // shared state
-export function useAddonState<S>(addonId: string, defaultState?: S) {
+export function useSharedState<S>(stateId: string, defaultState?: S) {
   const api = useStorybookApi();
-  const existingState = api.getAddonState<S>(addonId);
+  const existingState = api.getAddonState<S>(stateId);
   const state = orDefault<S>(
     existingState,
-    addonStateCache[addonId] ? addonStateCache[addonId] : defaultState
+    addonStateCache[stateId] ? addonStateCache[stateId] : defaultState
   );
   const setState = (s: S | StateMerger<S>, options?: Options) => {
     // set only after the stories are loaded
-    if (addonStateCache[addonId]) {
-      addonStateCache[addonId] = s;
+    if (addonStateCache[stateId]) {
+      addonStateCache[stateId] = s;
     }
-    api.setAddonState<S>(addonId, s, options);
+    api.setAddonState<S>(stateId, s, options);
   };
   const allListeners = useMemo(() => {
     const stateChangeHandlers = {
-      [`${ADDON_STATE_CHANGED}-client-${addonId}`]: (s: S) => setState(s),
-      [`${ADDON_STATE_SET}-client-${addonId}`]: (s: S) => setState(s),
+      [`${SHARED_STATE_CHANGED}-client-${stateId}`]: (s: S) => setState(s),
+      [`${SHARED_STATE_SET}-client-${stateId}`]: (s: S) => setState(s),
     };
     const stateInitializationHandlers = {
-      [STORIES_CONFIGURED]: () => {
-        if (addonStateCache[addonId]) {
+      [SET_STORIES]: () => {
+        if (addonStateCache[stateId]) {
           // this happens when HMR
-          setState(addonStateCache[addonId]);
-          api.emit(`${ADDON_STATE_SET}-manager-${addonId}`, addonStateCache[addonId]);
+          setState(addonStateCache[stateId]);
+          api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, addonStateCache[stateId]);
         } else if (defaultState !== undefined) {
           // if not HMR, yet the defaults are form the manager
           setState(defaultState);
           // initialize addonStateCache after first load, so its available for subsequent HMR
-          addonStateCache[addonId] = defaultState;
-          api.emit(`${ADDON_STATE_SET}-manager-${addonId}`, defaultState);
+          addonStateCache[stateId] = defaultState;
+          api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, defaultState);
         }
       },
       [STORY_CHANGED]: () => {
-        if (api.getAddonState(addonId) !== undefined) {
-          api.emit(`${ADDON_STATE_SET}-manager-${addonId}`, api.getAddonState(addonId));
+        if (api.getAddonState(stateId) !== undefined) {
+          api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, api.getAddonState(stateId));
         }
       },
     };
@@ -384,14 +393,44 @@ export function useAddonState<S>(addonId: string, defaultState?: S) {
       ...stateChangeHandlers,
       ...stateInitializationHandlers,
     };
-  }, [addonId]);
+  }, [stateId]);
 
   const emit = useChannel(allListeners);
   return [
     state,
     (newStateOrMerger: S | StateMerger<S>, options?: Options) => {
       setState(newStateOrMerger, options);
-      emit(`${ADDON_STATE_CHANGED}-manager-${addonId}`, newStateOrMerger);
+      emit(`${SHARED_STATE_CHANGED}-manager-${stateId}`, newStateOrMerger);
     },
   ] as [S, (newStateOrMerger: S | StateMerger<S>, options?: Options) => void];
 }
+
+export function useAddonState<S>(addonId: string, defaultState?: S) {
+  return useSharedState<S>(addonId, defaultState);
+}
+
+export function useArgs(): [Args, (newArgs: Args) => void] {
+  const { getCurrentStoryData, updateStoryArgs } = useStorybookApi();
+
+  const data = getCurrentStoryData();
+  const args = isStory(data) ? data.args : {};
+
+  return [args, (newArgs: Args) => updateStoryArgs(data.id, newArgs)];
+}
+
+export function useGlobalArgs(): [Args, (newGlobalArgs: Args) => void] {
+  const {
+    state: { globalArgs: oldGlobalArgs },
+    api: { updateGlobalArgs },
+  } = useContext(ManagerContext);
+
+  return [oldGlobalArgs, updateGlobalArgs];
+}
+
+export function useArgTypes(): ArgTypes {
+  return useParameter<ArgTypes>('argTypes', {});
+}
+
+export function useGlobalArgTypes(): ArgTypes {
+  return useParameter<ArgTypes>('globalArgTypes', {});
+}
diff --git a/lib/api/src/init-provider-api.ts b/lib/api/src/init-provider-api.ts
deleted file mode 100644
index 74debdd4b5a2..000000000000
--- a/lib/api/src/init-provider-api.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ReactElement } from 'react';
-import { Channel } from '@storybook/channels';
-
-import { API } from './index';
-import Store from './store';
-
-export interface Provider {
-  channel?: Channel;
-  renderPreview?: () => ReactElement;
-  handleAPI(api: API): void;
-  [key: string]: any;
-}
-
-export interface SubAPI {
-  renderPreview?: Provider['renderPreview'];
-}
-
-export default ({ provider, api }: { provider: Provider; api: API; store: Store }) => {
-  provider.handleAPI(api);
-
-  if (provider.renderPreview) {
-    // eslint-disable-next-line no-param-reassign
-    api.renderPreview = provider.renderPreview;
-  }
-
-  return api;
-};
diff --git a/lib/api/src/lib/merge.ts b/lib/api/src/lib/merge.ts
index 3ea1c94e3e92..31bd61cd3ce2 100644
--- a/lib/api/src/lib/merge.ts
+++ b/lib/api/src/lib/merge.ts
@@ -6,8 +6,8 @@ import { logger } from '@storybook/client-logger';
 export default (a: any, b: any) =>
   mergeWith({}, a, b, (objValue: any, srcValue: any) => {
     if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach(s => {
-        const existing = objValue.find(o => o === s || isEqual(o, s));
+      srcValue.forEach((s) => {
+        const existing = objValue.find((o) => o === s || isEqual(o, s));
         if (!existing) {
           objValue.push(s);
         }
diff --git a/lib/api/src/lib/store-setup.ts b/lib/api/src/lib/store-setup.ts
index fddb1e4ec2de..3ee481a35013 100644
--- a/lib/api/src/lib/store-setup.ts
+++ b/lib/api/src/lib/store-setup.ts
@@ -4,10 +4,10 @@ import { parse, stringify } from 'telejson';
 
 // setting up the store, overriding set and get to use telejson
 export default (_: any) => {
-  _.fn('set', function(key: string, data: object) {
+  _.fn('set', function (key: string, data: object) {
     return _.set(this._area, this._in(key), stringify(data, { maxDepth: 50 }));
   });
-  _.fn('get', function(key: string, alt: string) {
+  _.fn('get', function (key: string, alt: string) {
     const value = _.get(this._area, this._in(key));
     return value !== null ? parse(value) : alt || value;
   });
diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
new file mode 100644
index 000000000000..8bde56cb0a66
--- /dev/null
+++ b/lib/api/src/lib/stories.ts
@@ -0,0 +1,324 @@
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import { sanitize, parseKind } from '@storybook/csf';
+import mapValues from 'lodash/mapValues';
+
+import { StoryId, StoryKind, Args, Parameters, combineParameters } from '../index';
+import merge from './merge';
+import { Provider } from '../modules/provider';
+import { ViewMode } from '../modules/addons';
+
+export { StoryId };
+
+export interface Root {
+  id: StoryId;
+  depth: 0;
+  name: string;
+  refId?: string;
+  children: StoryId[];
+  isComponent: false;
+  isRoot: true;
+  isLeaf: false;
+  // MDX stories are "Group" type
+  parameters?: {
+    docsOnly?: boolean;
+    [k: string]: any;
+  };
+}
+
+export interface Group {
+  id: StoryId;
+  depth: number;
+  name: string;
+  children: StoryId[];
+  refId?: string;
+  parent?: StoryId;
+  isComponent: boolean;
+  isRoot: false;
+  isLeaf: false;
+  // MDX stories are "Group" type
+  parameters?: {
+    docsOnly?: boolean;
+    viewMode?: ViewMode;
+    [parameterName: string]: any;
+  };
+}
+
+export interface Story {
+  id: StoryId;
+  depth: number;
+  parent: StoryId;
+  name: string;
+  kind: StoryKind;
+  refId?: string;
+  children?: StoryId[];
+  isComponent: boolean;
+  isRoot: false;
+  isLeaf: true;
+  parameters?: {
+    fileName: string;
+    options: {
+      hierarchyRootSeparator?: RegExp;
+      hierarchySeparator?: RegExp;
+      showRoots?: boolean;
+      [optionName: string]: any;
+    };
+    docsOnly?: boolean;
+    viewMode?: ViewMode;
+    [parameterName: string]: any;
+  };
+  args: Args;
+}
+
+export interface StoryInput {
+  id: StoryId;
+  name: string;
+  refId?: string;
+  kind: StoryKind;
+  children: string[];
+  parameters: {
+    fileName: string;
+    options: {
+      hierarchyRootSeparator: RegExp;
+      hierarchySeparator: RegExp;
+      showRoots?: boolean;
+      [optionName: string]: any;
+    };
+    docsOnly?: boolean;
+    viewMode?: ViewMode;
+    [parameterName: string]: any;
+  };
+  isLeaf: boolean;
+  args: Args;
+}
+
+export interface StoriesHash {
+  [id: string]: Root | Group | Story;
+}
+
+export type StoriesList = (Group | Story)[];
+
+export type GroupsList = (Root | Group)[];
+
+export interface StoriesRaw {
+  [id: string]: StoryInput;
+}
+
+export interface SetStoriesPayload {
+  v?: number;
+  stories: StoriesRaw;
+}
+
+export interface SetStoriesPayloadV2 extends SetStoriesPayload {
+  v: 2;
+  error?: Error;
+  globalArgs: Args;
+  globalParameters: Parameters;
+  kindParameters: {
+    [kind: string]: Parameters;
+  };
+}
+
+const warnUsingHierarchySeparatorsAndShowRoots = deprecate(
+  () => {},
+  dedent`
+    You cannot use both the hierarchySeparator/hierarchyRootSeparator and showRoots options.
+  `
+);
+
+const warnRemovingHierarchySeparators = deprecate(
+  () => {},
+  dedent`
+    hierarchySeparator and hierarchyRootSeparator are deprecated and will be removed in Storybook 6.0.
+    Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md
+  `
+);
+
+const warnChangingDefaultHierarchySeparators = deprecate(
+  () => {},
+  dedent`
+    The default hierarchy separators are changing in Storybook 6.0.
+    '|' and '.' will no longer create a hierarchy, but codemods are available.
+    Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md
+  `
+);
+
+const toKey = (input: string) =>
+  input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
+
+const toGroup = (name: string) => ({
+  name,
+  id: toKey(name),
+});
+
+export const denormalizeStoryParameters = ({
+  globalParameters,
+  kindParameters,
+  stories,
+}: SetStoriesPayloadV2): StoriesRaw => {
+  return mapValues(stories, (storyData) => ({
+    ...storyData,
+    parameters: combineParameters(
+      globalParameters,
+      kindParameters[storyData.kind],
+      (storyData.parameters as unknown) as Parameters
+    ),
+  }));
+};
+
+export const transformStoriesRawToStoriesHash = (
+  input: StoriesRaw,
+  base: StoriesHash,
+  { provider }: { provider: Provider }
+): StoriesHash => {
+  const anyKindMatchesOldHierarchySeparators = Object.values(input)
+    .filter(Boolean)
+    .some(({ kind }) => kind.match(/\.|\|/));
+
+  const storiesHashOutOfOrder = Object.values(input)
+    .filter(Boolean)
+    .reduce((acc, item) => {
+      const { kind, parameters } = item;
+      const {
+        hierarchyRootSeparator: rootSeparator = undefined,
+        hierarchySeparator: groupSeparator = undefined,
+        showRoots = undefined,
+      } = { ...provider.getConfig(), ...((parameters && parameters.options) || {}) };
+
+      const usingShowRoots = typeof showRoots !== 'undefined';
+
+      // Kind splitting behavior as per https://github.com/storybookjs/storybook/issues/8793
+      let root = '';
+      let groups: string[];
+      // 1. If the user has passed separators, use the old behavior but warn them
+      if (typeof rootSeparator !== 'undefined' || typeof groupSeparator !== 'undefined') {
+        warnRemovingHierarchySeparators();
+        if (usingShowRoots) warnUsingHierarchySeparatorsAndShowRoots();
+        ({ root, groups } = parseKind(kind, {
+          rootSeparator: rootSeparator || '|',
+          groupSeparator: groupSeparator || /\/|\./,
+        }));
+
+        // 2. If the user hasn't passed separators, but is using | or . in kinds, use the old behaviour but warn
+      } else if (anyKindMatchesOldHierarchySeparators && !usingShowRoots) {
+        warnChangingDefaultHierarchySeparators();
+        ({ root, groups } = parseKind(kind, { rootSeparator: '|', groupSeparator: /\/|\./ }));
+
+        // 3. If the user passes showRoots, or doesn't match above, do a simpler splitting.
+      } else {
+        const parts: string[] = kind.split('/');
+        if (showRoots && parts.length > 1) {
+          [root, ...groups] = parts;
+        } else {
+          groups = parts;
+        }
+      }
+
+      const rootAndGroups = []
+        .concat(root || [])
+        .concat(groups)
+        .map(toGroup)
+        // Map a bunch of extra fields onto the groups, collecting the path as we go (thus the reduce)
+        .reduce((soFar, group, index, original) => {
+          const { name } = group;
+          const parent = index > 0 && soFar[index - 1].id;
+          const id = sanitize(parent ? `${parent}-${name}` : name);
+          if (parent === id) {
+            throw new Error(
+              dedent`
+              Invalid part '${name}', leading to id === parentId ('${id}'), inside kind '${kind}'
+
+              Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
+            `
+            );
+          }
+
+          if (!!root && index === 0) {
+            const result: Root = {
+              ...group,
+              id,
+              depth: index,
+              children: [],
+              isComponent: false,
+              isLeaf: false,
+              isRoot: true,
+              parameters,
+            };
+            return soFar.concat([result]);
+          }
+          const result: Group = {
+            ...group,
+            id,
+            parent,
+            depth: index,
+            children: [],
+            isComponent: false,
+            isLeaf: false,
+            isRoot: false,
+            parameters,
+          };
+          return soFar.concat([result]);
+        }, [] as GroupsList);
+
+      const paths = [...rootAndGroups.map((g) => g.id), item.id];
+
+      // Ok, now let's add everything to the store
+      rootAndGroups.forEach((group, index) => {
+        const child = paths[index + 1];
+        const { id } = group;
+        acc[id] = merge(acc[id] || {}, {
+          ...group,
+          ...(child && { children: [child] }),
+        });
+      });
+
+      const story: Story = {
+        ...item,
+        depth: rootAndGroups.length,
+        parent: rootAndGroups[rootAndGroups.length - 1].id,
+        isLeaf: true,
+        isComponent: false,
+        isRoot: false,
+      };
+      acc[item.id] = story;
+
+      return acc;
+    }, {} as StoriesHash);
+
+  function addItem(acc: StoriesHash, item: Story | Group) {
+    if (!acc[item.id]) {
+      // If we were already inserted as part of a group, that's great.
+      acc[item.id] = item;
+      const { children } = item;
+      if (children) {
+        const childNodes = children.map((id) => storiesHashOutOfOrder[id]) as (Story | Group)[];
+        acc[item.id].isComponent = childNodes.every((childNode) => childNode.isLeaf);
+        childNodes.forEach((childNode) => addItem(acc, childNode));
+      }
+    }
+    return acc;
+  }
+
+  return Object.values(storiesHashOutOfOrder).reduce(addItem, {});
+};
+
+export type Item = StoriesHash[keyof StoriesHash];
+
+export function isRoot(item: Item): item is Root {
+  if (item as Root) {
+    return item.isRoot;
+  }
+  return false;
+}
+export function isGroup(item: Item): item is Group {
+  if (item as Group) {
+    return !item.isRoot && !item.isLeaf;
+  }
+  return false;
+}
+export function isStory(item: Item): item is Story {
+  if (item as Story) {
+    return item.isLeaf;
+  }
+  return false;
+}
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index 8758e2a97387..bd4e4ea6289d 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -1,8 +1,11 @@
 import { ReactElement } from 'react';
 
-import { Module } from '../index';
+import { WindowLocation } from '@reach/router';
+import { ModuleFn } from '../index';
 import { Options } from '../store';
 
+export type ViewMode = 'story' | 'info' | 'settings' | 'page' | undefined | string;
+
 export enum types {
   TAB = 'tab',
   PANEL = 'panel',
@@ -19,9 +22,15 @@ export interface RenderOptions {
 
 export interface RouteOptions {
   storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 export interface MatchOptions {
-  viewMode: string;
+  storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 
 export interface Addon {
@@ -32,14 +41,14 @@ export interface Addon {
   match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
   paramKey?: string;
+  disabled?: boolean;
+  hidden?: boolean;
 }
-export interface Collection {
-  [key: string]: Addon;
+export interface Collection<T = Addon> {
+  [key: string]: T;
 }
 
-interface Panels {
-  [id: string]: Addon;
-}
+type Panels = Collection<Addon>;
 
 type StateMerger<S> = (input: S) => S;
 
@@ -50,9 +59,9 @@ interface StoryInput {
 }
 
 export interface SubAPI {
-  getElements: (type: Types) => Collection;
-  getPanels: () => Collection;
-  getStoryPanels: () => Collection;
+  getElements: <T>(type: Types) => Collection<T>;
+  getPanels: () => Panels;
+  getStoryPanels: () => Panels;
   getSelectedPanel: () => string;
   setSelectedPanel: (panelName: string) => void;
   setAddonState<S>(
@@ -76,20 +85,20 @@ export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel
   return currentPanel;
 }
 
-export default ({ provider, store }: Module) => {
+export const init: ModuleFn = ({ provider, store, fullAPI }) => {
   const api: SubAPI = {
-    getElements: type => provider.getElements(type),
+    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);
+      const { storyId } = store.getState();
+      const story = fullAPI.getData(storyId);
 
-      if (!allPanels || !storyInput) {
+      if (!allPanels || !story) {
         return allPanels;
       }
 
-      const { parameters } = storyInput;
+      const { parameters } = story;
 
       const filteredPanels: Collection = {};
       Object.entries(allPanels).forEach(([id, panel]) => {
@@ -106,7 +115,7 @@ export default ({ provider, store }: Module) => {
       const { selectedPanel } = store.getState();
       return ensurePanel(api.getPanels(), selectedPanel, selectedPanel);
     },
-    setSelectedPanel: panelName => {
+    setSelectedPanel: (panelName) => {
       store.setState({ selectedPanel: panelName }, { persistence: 'session' });
     },
     setAddonState<S>(
@@ -126,7 +135,7 @@ export default ({ provider, store }: Module) => {
         .setState({ addons: { ...existing, [addonId]: nextState } }, options)
         .then(() => api.getAddonState(addonId));
     },
-    getAddonState: addonId => {
+    getAddonState: (addonId) => {
       return store.getState().addons[addonId];
     },
   };
diff --git a/lib/api/src/modules/channel.ts b/lib/api/src/modules/channel.ts
index ad242a80ff64..1ae00729620b 100644
--- a/lib/api/src/modules/channel.ts
+++ b/lib/api/src/modules/channel.ts
@@ -1,40 +1,30 @@
-import deprecate from 'util-deprecate';
-import { STORY_CHANGED, STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
+import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
 import { Channel, Listener } from '@storybook/channels';
 
-import { Module } from '../index';
+import { ModuleFn } from '../index';
 
 export interface SubAPI {
   getChannel: () => Channel;
-  on: (type: string, cb: Listener, peer?: boolean) => () => void;
+  on: (type: string, cb: Listener) => () => void;
   off: (type: string, cb: Listener) => void;
   emit: (type: string, ...args: any[]) => void;
   once: (type: string, cb: Listener) => void;
-  onStory: (cb: Listener) => void;
   collapseAll: () => void;
   expandAll: () => void;
 }
 
-export default ({ provider }: Module) => {
+export const init: ModuleFn = ({ provider }) => {
   const api: SubAPI = {
     getChannel: () => provider.channel,
-    on: (type, cb, peer = true) => {
-      if (peer) {
-        provider.channel.addPeerListener(type, cb);
-      } else {
-        provider.channel.addListener(type, cb);
-      }
+    on: (type, cb) => {
+      provider.channel.addListener(type, cb);
 
       return () => provider.channel.removeListener(type, cb);
     },
     off: (type, cb) => provider.channel.removeListener(type, cb),
-    emit: (type, event) => provider.channel.emit(type, event),
-    once: (type, event) => provider.channel.once(type, event),
+    once: (type, cb) => provider.channel.once(type, cb),
+    emit: (type, ...args) => provider.channel.emit(type, ...args),
 
-    onStory: deprecate(
-      (cb: Listener) => api.on(STORY_CHANGED, cb),
-      'onStory(...) has been replaced with on(STORY_CHANGED, ...)'
-    ),
     collapseAll: () => {
       provider.channel.emit(STORIES_COLLAPSE_ALL, {});
     },
diff --git a/lib/api/src/modules/globalArgs.ts b/lib/api/src/modules/globalArgs.ts
new file mode 100644
index 000000000000..65f748d11ba6
--- /dev/null
+++ b/lib/api/src/modules/globalArgs.ts
@@ -0,0 +1,37 @@
+import { SET_STORIES, UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
+import { Args, ModuleFn } from '../index';
+import { SetStoriesPayloadV2 } from '../lib/stories';
+
+export interface SubState {
+  globalArgs: Args;
+}
+
+export interface SubAPI {
+  updateGlobalArgs: (newGlobalArgs: Args) => void;
+}
+
+export const init: ModuleFn = ({ store, fullAPI }) => {
+  const api: SubAPI = {
+    updateGlobalArgs(newGlobalArgs) {
+      fullAPI.emit(UPDATE_GLOBAL_ARGS, newGlobalArgs);
+    },
+  };
+
+  const state: SubState = {
+    // Currently global args always start empty. TODO -- should this be set on the channel at init time?
+    globalArgs: {},
+  };
+
+  const initModule = () => {
+    fullAPI.on(GLOBAL_ARGS_UPDATED, (globalArgs: Args) => store.setState({ globalArgs }));
+    fullAPI.on(SET_STORIES, ({ globalArgs }: SetStoriesPayloadV2) =>
+      store.setState({ globalArgs })
+    );
+  };
+
+  return {
+    api,
+    state,
+    init: initModule,
+  };
+};
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index 1805cd997126..101ea9432cde 100644
--- a/lib/api/src/modules/layout.ts
+++ b/lib/api/src/modules/layout.ts
@@ -1,18 +1,23 @@
-import { document } from 'global';
+import { DOCS_MODE, document } from 'global';
+
 import pick from 'lodash/pick';
 
-import deprecate from 'util-deprecate';
 import deepEqual from 'fast-deep-equal';
 
 import { themes, ThemeVars } from '@storybook/theming';
 import merge from '../lib/merge';
-import { State } from '../index';
-import Store from '../store';
-import { Provider } from '../init-provider-api';
+import { State, ModuleFn } from '../index';
 
 export type PanelPositions = 'bottom' | 'right';
+export type ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
+export const ActiveTabs = {
+  SIDEBAR: 'sidebar' as 'sidebar',
+  CANVAS: 'canvas' as 'canvas',
+  ADDONS: 'addons' as 'addons',
+};
 
 export interface Layout {
+  initialActive: ActiveTabsType;
   isFullscreen: boolean;
   showPanel: boolean;
   panelPosition: PanelPositions;
@@ -45,11 +50,8 @@ export interface SubAPI {
 }
 
 type PartialSubState = Partial<SubState>;
-type PartialThemeVars = Partial<ThemeVars>;
-type PartialLayout = Partial<Layout>;
-type PartialUI = Partial<UI>;
 
-interface Options extends ThemeVars {
+export interface UIOptions {
   name?: string;
   url?: string;
   goFullScreen: boolean;
@@ -60,84 +62,15 @@ interface Options extends ThemeVars {
   selectedPanel?: string;
 }
 
-interface OptionsMap {
-  [key: string]: string;
-}
-
-const deprecatedThemeOptions: {
-  name: 'theme.brandTitle';
-  url: 'theme.brandUrl';
-} = {
-  name: 'theme.brandTitle',
-  url: 'theme.brandUrl',
-};
-
-const deprecatedLayoutOptions: {
-  goFullScreen: 'isFullscreen';
-  showStoriesPanel: 'showNav';
-  showAddonPanel: 'showPanel';
-  addonPanelInRight: 'panelPosition';
-} = {
-  goFullScreen: 'isFullscreen',
-  showStoriesPanel: 'showNav',
-  showAddonPanel: 'showPanel',
-  addonPanelInRight: 'panelPosition',
-};
-
-const deprecationMessage = (optionsMap: OptionsMap, prefix = '') =>
-  `The options { ${Object.keys(optionsMap).join(', ')} } are deprecated -- use ${
-    prefix ? `${prefix}'s` : ''
-  } { ${Object.values(optionsMap).join(', ')} } instead.`;
-
-const applyDeprecatedThemeOptions = deprecate(({ name, url, theme }: Options): PartialThemeVars => {
-  const { brandTitle, brandUrl, brandImage }: PartialThemeVars = theme || {};
-  return {
-    brandTitle: brandTitle || name,
-    brandUrl: brandUrl || url,
-    brandImage: brandImage || null,
-  };
-}, deprecationMessage(deprecatedThemeOptions));
-
-const applyDeprecatedLayoutOptions = deprecate((options: Options): PartialLayout => {
-  const layoutUpdate: PartialLayout = {};
-
-  ['goFullScreen', 'showStoriesPanel', 'showAddonPanel'].forEach(
-    (option: 'goFullScreen' | 'showStoriesPanel' | 'showAddonPanel') => {
-      const v = options[option];
-      if (typeof v !== 'undefined') {
-        const key = deprecatedLayoutOptions[option];
-        layoutUpdate[key] = v;
-      }
-    }
-  );
-  if (options.addonPanelInRight) {
-    layoutUpdate.panelPosition = 'right';
-  }
-  return layoutUpdate;
-}, deprecationMessage(deprecatedLayoutOptions));
-
-const checkDeprecatedThemeOptions = (options: Options) => {
-  if (Object.keys(deprecatedThemeOptions).find(v => v in options)) {
-    return applyDeprecatedThemeOptions(options);
-  }
-  return {};
-};
-
-const checkDeprecatedLayoutOptions = (options: Options) => {
-  if (Object.keys(deprecatedLayoutOptions).find(v => v in options)) {
-    return applyDeprecatedLayoutOptions(options);
-  }
-  return {};
-};
-
-const initial: SubState = {
+const defaultState: SubState = {
   ui: {
     enableShortcuts: true,
     sidebarAnimations: true,
     docsMode: false,
   },
   layout: {
-    isToolshown: true,
+    initialActive: ActiveTabs.CANVAS,
+    isToolshown: !DOCS_MODE,
     isFullscreen: false,
     showPanel: true,
     showNav: true,
@@ -153,8 +86,7 @@ export const focusableUIElements = {
   storyPanelRoot: 'storybook-panel-root',
 };
 
-let hasSetOptions = false;
-export default function({ store, provider }: { store: Store; provider: Provider }) {
+export const init: ModuleFn = ({ store, provider }) => {
   const api = {
     toggleFullscreen(toggled?: boolean) {
       return store.setState(
@@ -274,37 +206,27 @@ export default function({ store, provider }: { store: Store; provider: Provider
       const { theme, selectedPanel, ...options } = provider.getConfig();
 
       return {
-        ...initial,
+        ...defaultState,
         layout: {
-          ...initial.layout,
-          ...pick(options, Object.keys(initial.layout)),
-          ...checkDeprecatedLayoutOptions(options),
+          ...defaultState.layout,
+          ...pick(options, Object.keys(defaultState.layout)),
         },
         ui: {
-          ...initial.ui,
-          ...pick(options, Object.keys(initial.ui)),
+          ...defaultState.ui,
+          ...pick(options, Object.keys(defaultState.ui)),
         },
-        selectedPanel: selectedPanel || initial.selectedPanel,
-        theme: theme || initial.theme,
+        selectedPanel: selectedPanel || defaultState.selectedPanel,
+        theme: theme || defaultState.theme,
       };
     },
 
     setOptions: (options: any) => {
-      // The very first time the user sets their options, we don't consider what is in the store.
-      // At this point in time, what is in the store is what we *persisted*. We did that in order
-      // to avoid a FOUC (e.g. initial rendering the wrong theme while we waited for the stories to load)
-      // However, we don't want to have a memory about these things, otherwise we see bugs like the
-      // user setting a name for their storybook, persisting it, then never being able to unset it
-      // without clearing localstorage. See https://github.com/storybookjs/storybook/issues/5857
-      const { layout, ui, selectedPanel, theme } = hasSetOptions
-        ? store.getState()
-        : api.getInitialOptions();
+      const { layout, ui, selectedPanel, theme } = store.getState();
 
       if (options) {
         const updatedLayout = {
           ...layout,
           ...pick(options, Object.keys(layout)),
-          ...checkDeprecatedLayoutOptions(options),
         };
 
         const updatedUi = {
@@ -315,7 +237,6 @@ export default function({ store, provider }: { store: Store; provider: Provider
         const updatedTheme = {
           ...theme,
           ...options.theme,
-          ...checkDeprecatedThemeOptions(options),
         };
 
         const modification: PartialSubState = {};
@@ -326,9 +247,6 @@ export default function({ store, provider }: { store: Store; provider: Provider
         if (!deepEqual(layout, updatedLayout)) {
           modification.layout = updatedLayout;
         }
-        if (!deepEqual(theme, updatedTheme)) {
-          modification.theme = updatedTheme;
-        }
         if (options.selectedPanel && !deepEqual(selectedPanel, options.selectedPanel)) {
           modification.selectedPanel = options.selectedPanel;
         }
@@ -336,13 +254,14 @@ export default function({ store, provider }: { store: Store; provider: Provider
         if (Object.keys(modification).length) {
           store.setState(modification, { persistence: 'permanent' });
         }
-
-        hasSetOptions = true;
+        if (!deepEqual(theme, updatedTheme)) {
+          store.setState({ theme: updatedTheme });
+        }
       }
     },
   };
 
-  const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel', 'theme');
+  const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel');
 
   return { api, state: merge(api.getInitialOptions(), persisted) };
-}
+};
diff --git a/lib/api/src/modules/notifications.ts b/lib/api/src/modules/notifications.ts
index fabcc0312d7d..caaeab0971d6 100644
--- a/lib/api/src/modules/notifications.ts
+++ b/lib/api/src/modules/notifications.ts
@@ -1,7 +1,9 @@
-import { Module } from '../index';
+import { ModuleFn } from '../index';
 
 export interface Notification {
   id: string;
+  link: string;
+  content: string;
   onClear?: () => void;
 }
 
@@ -14,9 +16,9 @@ export interface SubAPI {
   clearNotification: (id: string) => void;
 }
 
-export default function({ store }: Module) {
-  const api = {
-    addNotification: (notification: Notification) => {
+export const init: ModuleFn = ({ store }) => {
+  const api: SubAPI = {
+    addNotification: (notification) => {
       // Get rid of it if already exists
       api.clearNotification(notification.id);
 
@@ -25,12 +27,12 @@ export default function({ store }: Module) {
       store.setState({ notifications: [...notifications, notification] });
     },
 
-    clearNotification: (id: string) => {
+    clearNotification: (id) => {
       const { notifications } = store.getState();
 
-      store.setState({ notifications: notifications.filter((n: Notification) => n.id !== id) });
+      store.setState({ notifications: notifications.filter((n) => n.id !== id) });
 
-      const notification = notifications.find((n: Notification) => n.id === id);
+      const notification = notifications.find((n) => n.id === id);
       if (notification && notification.onClear) {
         notification.onClear();
       }
@@ -40,4 +42,4 @@ export default function({ store }: Module) {
   const state: SubState = { notifications: [] };
 
   return { api, state };
-}
+};
diff --git a/lib/api/src/modules/provider.ts b/lib/api/src/modules/provider.ts
new file mode 100644
index 000000000000..d79822034188
--- /dev/null
+++ b/lib/api/src/modules/provider.ts
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { Channel } from '@storybook/channels';
+import { ThemeVars } from '@storybook/theming';
+
+import { API, State, ModuleFn } from '../index';
+import { StoryMapper, Refs } from './refs';
+import { UIOptions } from './layout';
+
+type IframeRenderer = (
+  storyId: string,
+  viewMode: State['viewMode'],
+  id: string,
+  baseUrl: string,
+  scale: number,
+  queryParams: Record<string, any>
+) => ReactNode;
+
+export interface Provider {
+  channel?: Channel;
+  renderPreview?: IframeRenderer;
+  handleAPI(api: API): void;
+  getConfig(): {
+    theme?: ThemeVars;
+    refs?: Refs;
+    StoryMapper?: StoryMapper;
+    [k: string]: any;
+  } & Partial<UIOptions>;
+  [key: string]: any;
+}
+
+export interface SubAPI {
+  renderPreview?: Provider['renderPreview'];
+}
+
+export const init: ModuleFn = ({ provider, fullAPI }) => {
+  return {
+    api: provider.renderPreview ? { renderPreview: provider.renderPreview } : {},
+    init: () => {
+      provider.handleAPI(fullAPI);
+    },
+  };
+};
diff --git a/lib/api/src/modules/refs.ts b/lib/api/src/modules/refs.ts
new file mode 100644
index 000000000000..6294e6989e18
--- /dev/null
+++ b/lib/api/src/modules/refs.ts
@@ -0,0 +1,247 @@
+import { location, fetch } from 'global';
+import dedent from 'ts-dedent';
+import {
+  transformStoriesRawToStoriesHash,
+  StoriesRaw,
+  StoryInput,
+  StoriesHash,
+} from '../lib/stories';
+
+import { ModuleFn } from '../index';
+
+export interface SubState {
+  refs: Refs;
+}
+
+type Versions = Record<string, string>;
+
+export type SetRefData = Omit<ComposedRef, 'stories'> & {
+  stories?: StoriesRaw;
+};
+
+export interface SubAPI {
+  findRef: (source: string) => ComposedRef;
+  setRef: (id: string, data: SetRefData, ready?: boolean) => void;
+  getRefs: () => Refs;
+  checkRef: (ref: SetRefData) => Promise<void>;
+  changeRefVersion: (id: string, url: string) => void;
+  changeRefState: (id: string, ready: boolean) => void;
+}
+
+export type StoryMapper = (ref: ComposedRef, story: StoryInput) => StoryInput;
+export interface ComposedRef {
+  id: string;
+  title?: string;
+  url: string;
+  type?: 'auto-inject' | 'unknown' | 'lazy';
+  stories: StoriesHash;
+  versions?: Versions;
+  authUrl?: string;
+  ready?: boolean;
+  error?: any;
+}
+
+export type Refs = Record<string, ComposedRef>;
+export type RefId = string;
+export type RefUrl = string;
+
+// eslint-disable-next-line no-useless-escape
+const findFilename = /(\/((?:[^\/]+?)\.[^\/]+?)|\/)$/;
+
+const allSettled = (promises: Promise<any>[]) =>
+  Promise.all(
+    promises.map((promise, i) =>
+      promise.then(
+        (r) => (r.ok ? r : false),
+        () => false
+      )
+    )
+  );
+
+export const getSourceType = (source: string) => {
+  const { origin: localOrigin, pathname: localPathname } = location;
+  const { origin: sourceOrigin, pathname: sourcePathname } = new URL(source);
+
+  const localFull = `${localOrigin + localPathname}`.replace(findFilename, '');
+  const sourceFull = `${sourceOrigin + sourcePathname}`.replace(findFilename, '');
+
+  if (localFull === sourceFull) {
+    return ['local', sourceFull];
+  }
+  if (source) {
+    return ['external', sourceFull];
+  }
+  return [null, null];
+};
+
+export const defaultStoryMapper: StoryMapper = (b, a) => {
+  return { ...a, kind: a.kind.replace('|', '/') };
+};
+
+const addRefIds = (input: StoriesHash, ref: ComposedRef): StoriesHash => {
+  return Object.entries(input).reduce((acc, [id, item]) => {
+    return { ...acc, [id]: { ...item, refId: ref.id } };
+  }, {} as StoriesHash);
+};
+
+const map = (
+  input: StoriesRaw,
+  ref: ComposedRef,
+  options: { storyMapper?: StoryMapper }
+): StoriesRaw => {
+  const { storyMapper } = options;
+  if (storyMapper) {
+    return Object.entries(input).reduce((acc, [id, item]) => {
+      return { ...acc, [id]: storyMapper(ref, item) };
+    }, {} as StoriesRaw);
+  }
+  return input;
+};
+
+export const init: ModuleFn = ({ store, provider, fullAPI }) => {
+  const api: SubAPI = {
+    findRef: (source) => {
+      const refs = api.getRefs();
+
+      return Object.values(refs).find(({ url }) => url.match(source));
+    },
+    changeRefVersion: (id, url) => {
+      const previous = api.getRefs()[id];
+      const ref = { ...previous, stories: {}, url } as SetRefData;
+
+      api.checkRef(ref);
+    },
+    changeRefState: (id, ready) => {
+      const refs = api.getRefs();
+      store.setState({
+        refs: {
+          ...refs,
+          [id]: { ...refs[id], ready },
+        },
+      });
+    },
+    checkRef: async (ref) => {
+      const { id, url } = ref;
+
+      const loadedData: { error?: Error; stories?: StoriesRaw } = {};
+
+      const [included, omitted, iframe] = await allSettled([
+        fetch(`${url}/stories.json`, {
+          headers: {
+            Accept: 'application/json',
+          },
+          redirect: 'manual',
+          credentials: 'include',
+        }),
+        fetch(`${url}/stories.json`, {
+          headers: {
+            Accept: 'application/json',
+          },
+          redirect: 'manual',
+          credentials: 'omit',
+        }),
+        fetch(`${url}/iframe.html`, {
+          redirect: 'manual',
+          cors: 'no-cors',
+          credentials: 'omit',
+        }),
+      ]);
+
+      const handle = async (request: Promise<Response> | false) => {
+        if (request) {
+          return Promise.resolve(request)
+            .then((response) => (response.ok ? response.json() : {}))
+            .catch((error) => ({ error }));
+        }
+        return {};
+      };
+
+      if (!included && !omitted && !iframe) {
+        loadedData.error = {
+          message: dedent`
+            Error: Loading of ref failed
+              at fetch (lib/api/src/modules/refs.ts)
+            
+            URL: ${url}
+            
+            We weren't able to load the above URL,
+            it's possible a CORS error happened.
+            
+            Please check your dev-tools network tab.
+          `,
+        } as Error;
+      } else if (omitted || included) {
+        const credentials = !omitted ? 'include' : 'omit';
+
+        const [stories, metadata] = await Promise.all([
+          handle(omitted || included),
+          handle(
+            fetch(`${url}/metadata.json`, {
+              headers: {
+                Accept: 'application/json',
+              },
+              redirect: 'manual',
+              credentials,
+              cache: 'no-cache',
+            })
+          ),
+        ]);
+
+        Object.assign(loadedData, { ...stories, ...metadata });
+      }
+
+      api.setRef(id, {
+        id,
+        url,
+        ...loadedData,
+        type: !loadedData.stories ? 'auto-inject' : 'lazy',
+      });
+    },
+
+    getRefs: () => {
+      const { refs = {} } = store.getState();
+
+      return refs;
+    },
+
+    setRef: (id, { stories, ...rest }, ready = false) => {
+      const { storyMapper = defaultStoryMapper } = provider.getConfig();
+      const ref = api.getRefs()[id];
+      const after = stories
+        ? addRefIds(
+            transformStoriesRawToStoriesHash(map(stories, ref, { storyMapper }), {}, { provider }),
+            ref
+          )
+        : undefined;
+
+      const result = { ...ref, stories: after, ...rest, ready };
+
+      store.setState({
+        refs: {
+          ...api.getRefs(),
+          [id]: result,
+        },
+      });
+    },
+  };
+
+  const refs = provider.getConfig().refs || {};
+
+  const initialState: SubState['refs'] = refs;
+
+  Object.values(refs).forEach((r) => {
+    // eslint-disable-next-line no-param-reassign
+    r.type = 'unknown';
+  });
+
+  Object.entries(refs).forEach(([k, v]) => {
+    api.checkRef(v as SetRefData);
+  });
+
+  return {
+    api,
+    state: {
+      refs: initialState,
+    },
+  };
+};
diff --git a/lib/api/src/modules/shortcuts.ts b/lib/api/src/modules/shortcuts.ts
index 209124ee4194..14dcac936c91 100644
--- a/lib/api/src/modules/shortcuts.ts
+++ b/lib/api/src/modules/shortcuts.ts
@@ -1,7 +1,7 @@
 import { navigator, document } from 'global';
 import { PREVIEW_KEYDOWN } from '@storybook/core-events';
 
-import { Module, API } from '../index';
+import { ModuleFn } from '../index';
 
 import { shortcutMatchesShortcut, eventToShortcut } from '../lib/shortcut';
 import { focusableUIElements } from './layout';
@@ -24,8 +24,8 @@ export interface SubAPI {
   setShortcut(action: Action, value: KeyCollection): Promise<KeyCollection>;
   restoreAllDefaultShortcuts(): Promise<Shortcuts>;
   restoreDefaultShortcut(action: Action): Promise<KeyCollection>;
-  handleKeydownEvent(api: API, event: Event): void;
-  handleShortcutFeature(api: API, feature: Action): void;
+  handleKeydownEvent(event: Event): void;
+  handleShortcutFeature(feature: Action): void;
 }
 export type KeyCollection = string[];
 
@@ -83,7 +83,14 @@ export interface Event extends KeyboardEvent {
   };
 }
 
-export default function initShortcuts({ store }: Module) {
+function focusInInput(event: Event) {
+  return (
+    /input|textarea/i.test(event.target.tagName) ||
+    event.target.getAttribute('contenteditable') !== null
+  );
+}
+
+export const init: ModuleFn = ({ store, fullAPI }) => {
   const api: SubAPI = {
     // Getting and setting shortcuts
     getShortcutKeys(): Shortcuts {
@@ -107,7 +114,7 @@ export default function initShortcuts({ store }: Module) {
     },
 
     // Listening to shortcut events
-    handleKeydownEvent(fullApi, event) {
+    handleKeydownEvent(event) {
       const shortcut = eventToShortcut(event);
       const shortcuts = api.getShortcutKeys();
       const actions = keys(shortcuts);
@@ -115,11 +122,11 @@ export default function initShortcuts({ store }: Module) {
         shortcutMatchesShortcut(shortcut, shortcuts[feature])
       );
       if (matchedFeature) {
-        api.handleShortcutFeature(fullApi, matchedFeature);
+        api.handleShortcutFeature(matchedFeature);
       }
     },
 
-    handleShortcutFeature(fullApi, feature) {
+    handleShortcutFeature(feature) {
       const {
         layout: { isFullscreen, showNav, showPanel },
         ui: { enableShortcuts },
@@ -130,34 +137,34 @@ export default function initShortcuts({ store }: Module) {
       switch (feature) {
         case 'escape': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
+            fullAPI.toggleFullscreen();
           } else if (!showNav) {
-            fullApi.toggleNav();
+            fullAPI.toggleNav();
           }
           break;
         }
 
         case 'focusNav': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
+            fullAPI.toggleFullscreen();
           }
           if (!showNav) {
-            fullApi.toggleNav();
+            fullAPI.toggleNav();
           }
-          fullApi.focusOnUIElement(focusableUIElements.storyListMenu);
+          fullAPI.focusOnUIElement(focusableUIElements.storyListMenu);
           break;
         }
 
         case 'search': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
+            fullAPI.toggleFullscreen();
           }
           if (!showNav) {
-            fullApi.toggleNav();
+            fullAPI.toggleNav();
           }
 
           setTimeout(() => {
-            fullApi.focusOnUIElement(focusableUIElements.storySearchField);
+            fullAPI.focusOnUIElement(focusableUIElements.storySearchField);
           }, 0);
           break;
         }
@@ -178,92 +185,92 @@ export default function initShortcuts({ store }: Module) {
 
         case 'focusPanel': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
+            fullAPI.toggleFullscreen();
           }
           if (!showPanel) {
-            fullApi.togglePanel();
+            fullAPI.togglePanel();
           }
-          fullApi.focusOnUIElement(focusableUIElements.storyPanelRoot);
+          fullAPI.focusOnUIElement(focusableUIElements.storyPanelRoot);
           break;
         }
 
         case 'nextStory': {
-          fullApi.jumpToStory(1);
+          fullAPI.jumpToStory(1);
           break;
         }
 
         case 'prevStory': {
-          fullApi.jumpToStory(-1);
+          fullAPI.jumpToStory(-1);
           break;
         }
 
         case 'nextComponent': {
-          fullApi.jumpToComponent(1);
+          fullAPI.jumpToComponent(1);
           break;
         }
 
         case 'prevComponent': {
-          fullApi.jumpToComponent(-1);
+          fullAPI.jumpToComponent(-1);
           break;
         }
 
         case 'fullScreen': {
-          fullApi.toggleFullscreen();
+          fullAPI.toggleFullscreen();
           break;
         }
 
         case 'togglePanel': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
-            fullApi.resetLayout();
+            fullAPI.toggleFullscreen();
+            fullAPI.resetLayout();
           }
 
-          fullApi.togglePanel();
+          fullAPI.togglePanel();
           break;
         }
 
         case 'toggleNav': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
-            fullApi.resetLayout();
+            fullAPI.toggleFullscreen();
+            fullAPI.resetLayout();
           }
 
-          fullApi.toggleNav();
+          fullAPI.toggleNav();
           break;
         }
 
         case 'toolbar': {
-          fullApi.toggleToolbar();
+          fullAPI.toggleToolbar();
           break;
         }
 
         case 'panelPosition': {
           if (isFullscreen) {
-            fullApi.toggleFullscreen();
+            fullAPI.toggleFullscreen();
           }
           if (!showPanel) {
-            fullApi.togglePanel();
+            fullAPI.togglePanel();
           }
 
-          fullApi.togglePanelPosition();
+          fullAPI.togglePanelPosition();
           break;
         }
 
         case 'aboutPage': {
-          fullApi.navigate('/settings/about');
+          fullAPI.navigate('/settings/about');
           break;
         }
 
         case 'shortcutsPage': {
-          fullApi.navigate('/settings/shortcuts');
+          fullAPI.navigate('/settings/shortcuts');
           break;
         }
         case 'collapseAll': {
-          fullApi.collapseAll();
+          fullAPI.collapseAll();
           break;
         }
         case 'expandAll': {
-          fullApi.expandAll();
+          fullAPI.expandAll();
           break;
         }
         default:
@@ -281,26 +288,19 @@ export default function initShortcuts({ store }: Module) {
     ),
   };
 
-  const init = ({ api: fullApi }: API) => {
-    function focusInInput(event: Event) {
-      return (
-        /input|textarea/i.test(event.target.tagName) ||
-        event.target.getAttribute('contenteditable') !== null
-      );
-    }
+  const initModule = () => {
     // Listen for keydown events in the manager
     document.addEventListener('keydown', (event: Event) => {
       if (!focusInInput(event)) {
-        fullApi.handleKeydownEvent(fullApi, event);
+        fullAPI.handleKeydownEvent(event);
       }
     });
 
     // Also listen to keydown events sent over the channel
-    fullApi.on(PREVIEW_KEYDOWN, (data: { event: Event }) => {
-      fullApi.handleKeydownEvent(fullApi, data.event);
+    fullAPI.on(PREVIEW_KEYDOWN, (data: { event: Event }) => {
+      fullAPI.handleKeydownEvent(data.event);
     });
   };
-  const result = { api, state, init };
 
-  return result;
-}
+  return { api, state, init: initModule };
+};
diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
index 8bdcdc41d945..3c8303fd5e69 100644
--- a/lib/api/src/modules/stories.ts
+++ b/lib/api/src/modules/stories.ts
@@ -1,408 +1,405 @@
+/* eslint-disable no-fallthrough */
 import { DOCS_MODE } from 'global';
-import { toId, sanitize, parseKind } from '@storybook/csf';
-import deprecate from 'util-deprecate';
-
-import { Module } from '../index';
-import merge from '../lib/merge';
+import { toId, sanitize } from '@storybook/csf';
+import {
+  UPDATE_STORY_ARGS,
+  STORY_ARGS_UPDATED,
+  STORY_CHANGED,
+  SELECT_STORY,
+  SET_STORIES,
+} from '@storybook/core-events';
+
+import { logger } from '@storybook/client-logger';
+import {
+  denormalizeStoryParameters,
+  transformStoriesRawToStoriesHash,
+  StoriesHash,
+  Story,
+  Group,
+  SetStoriesPayload,
+  StoryId,
+  isStory,
+  Root,
+  isRoot,
+  StoriesRaw,
+  SetStoriesPayloadV2,
+} from '../lib/stories';
+
+import { Args, ModuleFn } from '../index';
+import { getSourceType } from './refs';
 
 type Direction = -1 | 1;
-type StoryId = string;
 type ParameterName = string;
 
-type ViewMode = 'story' | 'info' | 'settings' | undefined;
+type ViewMode = 'story' | 'info' | 'settings' | string | undefined;
 
 export interface SubState {
   storiesHash: StoriesHash;
   storyId: StoryId;
   viewMode: ViewMode;
   storiesConfigured: boolean;
+  storiesFailed?: Error;
 }
 
 export interface SubAPI {
   storyId: typeof toId;
-  selectStory: (kindOrId: string, story?: string, obj?: any) => void;
+  resolveStory: (storyId: StoryId, refsId?: string) => Story | Group | Root;
+  selectStory: (
+    kindOrId: string,
+    story?: string,
+    obj?: { ref?: string; viewMode?: ViewMode }
+  ) => void;
   getCurrentStoryData: () => Story | Group;
-  setStories: (stories: StoriesRaw) => void;
+  setStories: (stories: StoriesRaw, failed?: Error) => Promise<void>;
   jumpToComponent: (direction: Direction) => void;
   jumpToStory: (direction: Direction) => void;
-  getData: (storyId: StoryId) => Story | Group;
-  getParameters: (storyId: StoryId, parameterName?: ParameterName) => Story['parameters'] | any;
+  getData: (storyId: StoryId, refId?: string) => Story | Group;
+  getParameters: (
+    storyId: StoryId | { storyId: StoryId; refId: string },
+    parameterName?: ParameterName
+  ) => Story['parameters'] | any;
   getCurrentParameter<S>(parameterName?: ParameterName): S;
+  updateStoryArgs(id: StoryId, newArgs: Args): void;
+  findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId;
 }
 
-interface Group {
-  id: StoryId;
-  name: string;
-  children: StoryId[];
-  parent: StoryId;
-  depth: number;
-  isComponent: boolean;
-  isRoot: boolean;
-  isLeaf: boolean;
-}
-
-interface StoryInput {
-  id: StoryId;
-  name: string;
-  kind: string;
-  children: string[];
-  parameters: {
-    filename: string;
-    options: {
-      hierarchyRootSeparator: RegExp;
-      hierarchySeparator: RegExp;
-      showRoots?: boolean;
-      [key: string]: any;
-    };
-    [parameterName: string]: any;
-  };
-  isLeaf: boolean;
-}
-
-type Story = StoryInput & Group;
-
-export interface StoriesHash {
-  [id: string]: Group | Story;
-}
-export type StoriesList = (Group | Story)[];
-export type GroupsList = Group[];
-
-export interface StoriesRaw {
-  [id: string]: StoryInput;
-}
-
-const warnUsingHierarchySeparatorsAndShowRoots = deprecate(() => {},
-`You cannot use both the hierarchySeparator/hierarchyRootSeparator and showRoots options.`);
-
-const warnRemovingHierarchySeparators = deprecate(
-  () => {},
-  `hierarchySeparator and hierarchyRootSeparator are deprecated and will be removed in Storybook 6.0.
-Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
-);
-
-const warnChangingDefaultHierarchySeparators = deprecate(
-  () => {},
-  `The default hierarchy separators are changing in Storybook 6.0.
-'|' and '.' will no longer create a hierarchy, but codemods are available.
-Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
-);
-
-const initStoriesApi = ({
+export const init: ModuleFn = ({
+  fullAPI,
   store,
   navigate,
+  provider,
   storyId: initialStoryId,
   viewMode: initialViewMode,
-}: Module) => {
-  const isStory = (obj: Group | Story): boolean => {
-    const story = obj as Story;
-    return !!(story && story.parameters);
-  };
-
-  const getData = (storyId: StoryId) => {
-    const { storiesHash } = store.getState();
+}) => {
+  const setInitialStory = () => {
+    const { storyId, viewMode, storiesHash } = store.getState();
+    const story = api.getData(storyId);
 
-    return storiesHash[storyId];
-  };
-  const getCurrentStoryData = () => {
-    const { storyId } = store.getState();
-
-    return getData(storyId);
-  };
-  const getParameters = (storyId: StoryId, parameterName?: ParameterName) => {
-    const data = getData(storyId);
-
-    if (isStory(data)) {
-      const { parameters } = data as Story;
-      return parameterName ? parameters[parameterName] : parameters;
+    if (viewMode === 'settings' || viewMode === 'page') {
+      return;
     }
 
-    return null;
-  };
+    if (storyId && storyId.match(/--\*$/)) {
+      const idStart = storyId.slice(0, -1); // drop the * at the end
+      const firstKindLeaf = Object.values(storiesHash).find(
+        (s: Story | Group) => !s.children && s.id.substring(0, idStart.length) === idStart
+      );
+
+      if (viewMode && firstKindLeaf) {
+        api.selectStory(firstKindLeaf.id, undefined, {});
+      }
+    } else if (!storyId || storyId === '*' || !story) {
+      // when there's no storyId or the storyId item doesn't exist
+      // we pick the first leaf and navigate
+      const firstLeaf = Object.values(storiesHash).find((s: Story | Group) => !s.children);
 
-  const getCurrentParameter = function getCurrentParameter<S>(parameterName: ParameterName) {
-    const { storyId } = store.getState();
-    const parameters = getParameters(storyId, parameterName);
+      if (viewMode && firstLeaf) {
+        api.selectStory(firstLeaf.id, undefined, {});
+      }
+    } else if (story && !story.isLeaf) {
+      // When story exists but if it is not the leaf story, it finds the proper
+      // leaf story from any depth.
+      const firstLeafStoryId = api.findLeafStoryId(storiesHash, storyId);
 
-    if (parameters) {
-      return parameters as S;
+      api.selectStory(firstLeafStoryId, undefined, {});
     }
-    return undefined;
   };
 
-  const jumpToStory = (direction: Direction) => {
-    const { storiesHash, viewMode, storyId } = store.getState();
+  const api: SubAPI = {
+    storyId: toId,
+    getData: (storyId, refId) => {
+      const result = api.resolveStory(storyId, refId);
 
-    if (DOCS_MODE) {
-      jumpToComponent(direction);
-      return;
-    }
+      return isRoot(result) ? undefined : result;
+    },
+    resolveStory: (storyId, refId) => {
+      const { refs, storiesHash } = store.getState();
+      if (refId) {
+        return refs[refId].stories ? refs[refId].stories[storyId] : undefined;
+      }
+      return storiesHash ? storiesHash[storyId] : undefined;
+    },
+    getCurrentStoryData: () => {
+      const { storyId, refId } = store.getState();
 
-    // cannot navigate when there's no current selection
-    if (!storyId || !storiesHash[storyId]) {
-      return;
-    }
+      return api.getData(storyId, refId);
+    },
+    getParameters: (storyIdOrCombo, parameterName) => {
+      const { storyId, refId } =
+        typeof storyIdOrCombo === 'string'
+          ? { storyId: storyIdOrCombo, refId: undefined }
+          : storyIdOrCombo;
+      const data = api.getData(storyId, refId);
+
+      if (isStory(data)) {
+        const { parameters } = data;
+        return parameterName ? parameters[parameterName] : parameters;
+      }
 
-    const lookupList = Object.keys(storiesHash).filter(
-      k => !(storiesHash[k].children || Array.isArray(storiesHash[k]))
-    );
-    const index = lookupList.indexOf(storyId);
+      return null;
+    },
+    getCurrentParameter: (parameterName) => {
+      const { storyId, refId } = store.getState();
+      const parameters = api.getParameters({ storyId, refId }, parameterName);
 
-    // cannot navigate beyond fist or last
-    if (index === lookupList.length - 1 && direction > 0) {
-      return;
-    }
-    if (index === 0 && direction < 0) {
-      return;
-    }
+      if (parameters) {
+        return parameters;
+      }
+      return undefined;
+    },
+    jumpToComponent: (direction) => {
+      const { storiesHash, storyId, refs, refId } = store.getState();
+      const story = api.getData(storyId, refId);
 
-    const result = lookupList[index + direction];
+      // cannot navigate when there's no current selection
+      if (!story) {
+        return;
+      }
 
-    if (viewMode && result) {
-      navigate(`/${viewMode}/${result}`);
-    }
-  };
+      const hash = refId ? refs[refId].stories || {} : storiesHash;
 
-  const jumpToComponent = (direction: Direction) => {
-    const state = store.getState();
-    const { storiesHash, viewMode, storyId } = state;
+      const lookupList = Object.entries(hash).reduce((acc, i) => {
+        const value = i[1];
+        if (value.isComponent) {
+          acc.push([...i[1].children]);
+        }
+        return acc;
+      }, []);
 
-    // cannot navigate when there's no current selection
-    if (!storyId || !storiesHash[storyId]) {
-      return;
-    }
+      const index = lookupList.findIndex((i) => i.includes(storyId));
 
-    const lookupList = Object.entries(storiesHash).reduce((acc, i) => {
-      const value = i[1];
-      if (value.isComponent) {
-        acc.push([...i[1].children]);
+      // cannot navigate beyond fist or last
+      if (index === lookupList.length - 1 && direction > 0) {
+        return;
+      }
+      if (index === 0 && direction < 0) {
+        return;
       }
-      return acc;
-    }, []);
 
-    const index = lookupList.findIndex(i => i.includes(storyId));
+      const result = lookupList[index + direction][0];
 
-    // cannot navigate beyond fist or last
-    if (index === lookupList.length - 1 && direction > 0) {
-      return;
-    }
-    if (index === 0 && direction < 0) {
-      return;
-    }
+      if (result) {
+        api.selectStory(result, undefined, { ref: refId });
+      }
+    },
+    jumpToStory: (direction) => {
+      const { storiesHash, storyId, refs, refId } = store.getState();
+      const story = api.getData(storyId, refId);
 
-    const result = lookupList[index + direction][0];
+      if (DOCS_MODE) {
+        api.jumpToComponent(direction);
+        return;
+      }
 
-    navigate(`/${viewMode || 'story'}/${result}`);
-  };
+      // cannot navigate when there's no current selection
+      if (!story) {
+        return;
+      }
 
-  const toKey = (input: string) =>
-    input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
+      const hash = story.refId ? refs[story.refId].stories : storiesHash;
 
-  const toGroup = (name: string) => ({
-    name,
-    id: toKey(name),
-  });
+      const lookupList = Object.keys(hash).filter(
+        (k) => !(hash[k].children || Array.isArray(hash[k]))
+      );
+      const index = lookupList.indexOf(storyId);
 
-  // Recursively traverse storiesHash from the initial storyId until finding
-  // the leaf story.
-  const findLeafStoryId = (storiesHash: StoriesHash, storyId: string): string => {
-    if (storiesHash[storyId].isLeaf) {
-      return storyId;
-    }
+      // cannot navigate beyond fist or last
+      if (index === lookupList.length - 1 && direction > 0) {
+        return;
+      }
+      if (index === 0 && direction < 0) {
+        return;
+      }
 
-    const childStoryId = storiesHash[storyId].children[0];
-    return findLeafStoryId(storiesHash, childStoryId);
-  };
+      const result = lookupList[index + direction];
+
+      if (result) {
+        api.selectStory(result, undefined, { ref: refId });
+      }
+    },
+    setStories: async (input, error) => {
+      // Now create storiesHash by reordering the above by group
+      const existing = store.getState().storiesHash;
+      const hash = transformStoriesRawToStoriesHash(input, existing, {
+        provider,
+      });
 
-  const setStories = (input: StoriesRaw) => {
-    const hash: StoriesHash = {};
+      await store.setState({
+        storiesHash: hash,
+        storiesConfigured: true,
+        storiesFailed: error,
+      });
 
-    const anyKindMatchesOldHierarchySeparators = Object.values(input).some(({ kind }) =>
-      kind.match(/\.|\|/)
-    );
+      const { refId } = store.getState();
 
-    const storiesHashOutOfOrder = Object.values(input).reduce((acc, item) => {
-      const { kind, parameters } = item;
-      // FIXME: figure out why parameters is missing when used with react-native-server
+      if (!refId) {
+        setInitialStory();
+      }
+    },
+    selectStory: (kindOrId, story = undefined, options = {}) => {
+      const { ref, viewMode: viewModeFromArgs } = options;
       const {
-        hierarchyRootSeparator: rootSeparator = undefined,
-        hierarchySeparator: groupSeparator = undefined,
-        showRoots = undefined,
-      } = (parameters && parameters.options) || {};
-
-      const usingShowRoots = typeof showRoots !== 'undefined';
-
-      // Kind splitting behaviour as per https://github.com/storybookjs/storybook/issues/8793
-      let root = '';
-      let groups: string[];
-      // 1. If the user has passed separators, use the old behaviour but warn them
-      if (typeof rootSeparator !== 'undefined' || typeof groupSeparator !== 'undefined') {
-        warnRemovingHierarchySeparators();
-        if (usingShowRoots) warnUsingHierarchySeparatorsAndShowRoots();
-        ({ root, groups } = parseKind(kind, { rootSeparator, groupSeparator }));
-
-        // 2. If the user hasn't passed separators, but is using | or . in kinds, use the old behaviour but warn
-      } else if (anyKindMatchesOldHierarchySeparators && !usingShowRoots) {
-        warnChangingDefaultHierarchySeparators();
-        ({ root, groups } = parseKind(kind, { rootSeparator: '|', groupSeparator: /\/|\./ }));
-
-        // 3. If the user passes showRoots, or doesn't match above, do a simpler splitting.
+        viewMode: viewModeFromState = 'story',
+        storyId,
+        storiesHash,
+        refs,
+      } = store.getState();
+
+      const hash = ref ? refs[ref].stories : storiesHash;
+
+      if (!story) {
+        const s = hash[kindOrId] || hash[sanitize(kindOrId)];
+        // eslint-disable-next-line no-nested-ternary
+        const id = s ? (s.children ? s.children[0] : s.id) : kindOrId;
+        const viewMode =
+          viewModeFromArgs || (s && s.parameters.viewMode)
+            ? s.parameters.viewMode
+            : viewModeFromState;
+        const p = s && s.refId ? `/${viewMode}/${s.refId}_${id}` : `/${viewMode}/${id}`;
+
+        navigate(p);
+      } else if (!kindOrId) {
+        // This is a slugified version of the kind, but that's OK, our toId function is idempotent
+        const kind = storyId.split('--', 2)[0];
+        const id = toId(kind, story);
+
+        api.selectStory(id, undefined, options);
       } else {
-        const parts: string[] = kind.split('/');
-        if (showRoots && parts.length > 1) {
-          [root, ...groups] = parts;
+        const id = ref ? `${ref}_${toId(kindOrId, story)}` : toId(kindOrId, story);
+        if (hash[id]) {
+          api.selectStory(id, undefined, options);
         } else {
-          groups = parts;
+          // Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'
+          const k = hash[sanitize(kindOrId)];
+          if (k && k.children) {
+            const foundId = k.children.find((childId) => hash[childId].name === story);
+            if (foundId) {
+              api.selectStory(foundId, undefined, options);
+            }
+          }
         }
       }
+    },
+    findLeafStoryId(storiesHash, storyId) {
+      if (storiesHash[storyId].isLeaf) {
+        return storyId;
+      }
 
-      const rootAndGroups = []
-        .concat(root || [])
-        .concat(groups)
-        .map(toGroup)
-        // Map a bunch of extra fields onto the groups, collecting the path as we go (thus the reduce)
-        .reduce((soFar, group, index, original) => {
-          const { name } = group;
-          const parent = index > 0 && soFar[index - 1].id;
-          const id = sanitize(parent ? `${parent}-${name}` : name);
-          if (parent === id) {
-            throw new Error(
-              `
-Invalid part '${name}', leading to id === parentId ('${id}'), inside kind '${kind}'
-
-Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
-              `.trim()
-            );
-          }
-
-          const result: Group = {
-            ...group,
-            id,
-            parent,
-            depth: index,
-            children: [],
-            isComponent: index === original.length - 1,
-            isLeaf: false,
-            isRoot: !!root && index === 0,
-          };
-          return soFar.concat([result]);
-        }, [] as GroupsList);
-
-      const paths = [...rootAndGroups.map(g => g.id), item.id];
-
-      // Ok, now let's add everything to the store
-      rootAndGroups.forEach((group, index) => {
-        const child = paths[index + 1];
-        const { id } = group;
-        acc[id] = merge(acc[id] || {}, {
-          ...group,
-          ...(child && { children: [child] }),
-        });
-      });
+      const childStoryId = storiesHash[storyId].children[0];
+      return api.findLeafStoryId(storiesHash, childStoryId);
+    },
+    updateStoryArgs: (id, newArgs) => {
+      fullAPI.emit(UPDATE_STORY_ARGS, id, newArgs);
+    },
+  };
 
-      const story = { ...item, parent: rootAndGroups[rootAndGroups.length - 1].id, isLeaf: true };
-      acc[item.id] = story as Story;
+  const initModule = () => {
+    fullAPI.on(STORY_CHANGED, function handleStoryChange(storyId: string) {
+      const { source }: { source: string } = this;
+      const [sourceType] = getSourceType(source);
 
-      return acc;
-    }, hash);
+      if (sourceType === 'local') {
+        const options = fullAPI.getCurrentParameter('options');
 
-    // When adding a group, also add all of its children, depth first
-    function addItem(acc: StoriesHash, item: Story | Group) {
-      if (!acc[item.id]) {
-        // If we were already inserted as part of a group, that's great.
-        acc[item.id] = item;
-        const { children } = item;
-        if (children) {
-          children.forEach(id => addItem(acc, storiesHashOutOfOrder[id]));
+        if (options) {
+          fullAPI.setOptions(options);
         }
       }
-      return acc;
-    }
+    });
 
-    // Now create storiesHash by reordering the above by group
-    const storiesHash: StoriesHash = Object.values(storiesHashOutOfOrder).reduce(addItem, {});
-    const settingsPageList = ['about', 'shortcuts'];
-    const { storyId, viewMode } = store.getState();
+    fullAPI.on(SET_STORIES, function handleSetStories(data: SetStoriesPayload) {
+      // the event originates from an iframe, event.source is the iframe's location origin + pathname
+      const { source }: { source: string } = this;
+      const [sourceType, sourceLocation] = getSourceType(source);
 
-    if (storyId && storyId.match(/--\*$/)) {
-      const idStart = storyId.slice(0, -1); // drop the * at the end
-      const firstKindLeaf = Object.values(storiesHash).find(
-        (s: Story | Group) => !s.children && s.id.substring(0, idStart.length) === idStart
-      );
-
-      if (viewMode && firstKindLeaf) {
-        navigate(`/${viewMode}/${firstKindLeaf.id}`);
+      // TODO: what is the mechanism where we warn here?
+      if (data.v && data.v > 2) {
+        // eslint-disable-next-line no-console
+        console.warn(`Received SET_STORIES event with version ${data.v}, we'll try and handle it`);
       }
-    } else if (!storyId || storyId === '*' || !storiesHash[storyId]) {
-      // when there's no storyId or the storyId item doesn't exist
-      // we pick the first leaf and navigate
-      const firstLeaf = Object.values(storiesHash).find((s: Story | Group) => !s.children);
 
-      if (viewMode === 'settings' && settingsPageList.includes(storyId)) {
-        navigate(`/${viewMode}/${storyId}`);
-      } else if (viewMode === 'settings' && !settingsPageList.includes(storyId)) {
-        navigate(`/story/${firstLeaf.id}`);
-      } else if (viewMode && firstLeaf) {
-        navigate(`/${viewMode}/${firstLeaf.id}`);
-      }
-    } else if (storiesHash[storyId] && !storiesHash[storyId].isLeaf) {
-      // When story exists but if it is not the leaf story, it finds the proper
-      // leaf story from any depth.
-      const firstLeafStoryId = findLeafStoryId(storiesHash, storyId);
-      navigate(`/${viewMode}/${firstLeafStoryId}`);
-    }
+      const stories = data.v
+        ? denormalizeStoryParameters(data as SetStoriesPayloadV2)
+        : data.stories;
 
-    store.setState({
-      storiesHash,
-      storiesConfigured: true,
-    });
-  };
+      // @ts-ignore
+      const error = data.error || undefined;
 
-  const selectStory = (kindOrId: string, story?: string) => {
-    const { viewMode = 'story', storyId, storiesHash } = store.getState();
-    if (!story) {
-      const s = storiesHash[sanitize(kindOrId)];
-      // eslint-disable-next-line no-nested-ternary
-      const id = s ? (s.children ? s.children[0] : s.id) : kindOrId;
-      navigate(`/${viewMode}/${id}`);
-    } else if (!kindOrId) {
-      // This is a slugified version of the kind, but that's OK, our toId function is idempotent
-      const kind = storyId.split('--', 2)[0];
-      selectStory(toId(kind, story));
-    } else {
-      const id = toId(kindOrId, story);
-      if (storiesHash[id]) {
-        selectStory(id);
-      } else {
-        // Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'
-        const k = storiesHash[sanitize(kindOrId)];
-        if (k && k.children) {
-          const foundId = k.children.find(childId => storiesHash[childId].name === story);
-          if (foundId) {
-            selectStory(foundId);
+      switch (sourceType) {
+        // if it's a local source, we do nothing special
+        case 'local': {
+          if (!data.v) {
+            throw new Error('Unexpected legacy SET_STORIES event from local source');
           }
+
+          fullAPI.setStories(stories, error);
+
+          fullAPI.setOptions((data as SetStoriesPayloadV2).globalParameters.options);
+          break;
+        }
+
+        // if it's a ref, we need to map the incoming stories to a prefixed version, so it cannot conflict with others
+        case 'external': {
+          const ref = fullAPI.findRef(sourceLocation);
+          if (ref) {
+            fullAPI.setRef(ref.id, { ...ref, ...data, stories }, true);
+            break;
+          }
+        }
+
+        // if we couldn't find the source, something risky happened, we ignore the input, and log a warning
+        default: {
+          logger.warn('received a SET_STORIES frame that was not configured as a ref');
+          break;
         }
       }
-    }
+    });
+
+    fullAPI.on(SELECT_STORY, function selectStoryHandler({
+      kind,
+      story,
+      ...rest
+    }: {
+      kind: string;
+      story: string;
+      [k: string]: any;
+    }) {
+      const { source }: { source: string } = this;
+      const [sourceType, sourceLocation] = getSourceType(source);
+
+      switch (sourceType) {
+        case 'local': {
+          fullAPI.selectStory(kind, story, rest);
+          break;
+        }
+
+        case 'external': {
+          const ref = fullAPI.findRef(sourceLocation);
+          fullAPI.selectStory(kind, story, { ...rest, ref: ref.id });
+          break;
+        }
+        default: {
+          logger.warn('received a SET_STORIES frame that was not configured as a ref');
+          break;
+        }
+      }
+    });
+
+    fullAPI.on(STORY_ARGS_UPDATED, (id: StoryId, args: Args) => {
+      const { storiesHash } = store.getState();
+      (storiesHash[id] as Story).args = args;
+      store.setState({ storiesHash });
+    });
   };
 
   return {
-    api: {
-      storyId: toId,
-      selectStory,
-      getCurrentStoryData,
-      setStories,
-      jumpToComponent,
-      jumpToStory,
-      getData,
-      getParameters,
-      getCurrentParameter,
-    },
+    api,
     state: {
       storiesHash: {},
       storyId: initialStoryId,
       viewMode: initialViewMode,
       storiesConfigured: false,
     },
+    init: initModule,
   };
 };
-export default initStoriesApi;
diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index 6aec64d905f6..30aa71e53351 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -1,7 +1,9 @@
+import { navigate as navigateRouter, NavigateOptions } from '@reach/router';
 import { queryFromLocation } from '@storybook/router';
 import { toId } from '@storybook/csf';
 
-import { Module } from '../index';
+import { NAVIGATE_URL } from '@storybook/core-events';
+import { ModuleArgs, ModuleFn } from '../index';
 import { PanelPositions } from './layout';
 
 interface Additions {
@@ -13,6 +15,10 @@ interface Additions {
   viewMode?: string;
 }
 
+export interface SubState {
+  customQueryParams: QueryParams;
+}
+
 // Initialize the state based on the URL.
 // NOTE:
 //   Although we don't change the URL when you change the state, we do support setting initial state
@@ -22,7 +28,10 @@ interface Additions {
 //     - nav: 0/1 -- show or hide the story list
 //
 //   We also support legacy URLs from storybook <5
-const initialUrlSupport = ({ navigate, state: { location, path, viewMode, storyId } }: Module) => {
+const initialUrlSupport = ({
+  navigate,
+  state: { location, path, viewMode, storyId },
+}: ModuleArgs) => {
   const addition: Additions = {};
   const query = queryFromLocation(location);
   let selectedPanel;
@@ -92,6 +101,7 @@ export interface QueryParams {
 }
 
 export interface SubAPI {
+  navigateUrl: (url: string, options: NavigateOptions<{}>) => void;
   getQueryParam: (key: string) => string | undefined;
   getUrlState: () => {
     queryParams: QueryParams;
@@ -103,9 +113,9 @@ export interface SubAPI {
   setQueryParams: (input: QueryParams) => void;
 }
 
-export default function({ store, navigate, state, provider, ...rest }: Module) {
+export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...rest }) => {
   const api: SubAPI = {
-    getQueryParam: key => {
+    getQueryParam: (key) => {
       const { customQueryParams } = store.getState();
       if (customQueryParams) {
         return customQueryParams[key];
@@ -139,10 +149,20 @@ export default function({ store, navigate, state, provider, ...rest }: Module) {
         },
       });
     },
+    navigateUrl(url: string, options: NavigateOptions<{}>) {
+      navigateRouter(url, options);
+    },
+  };
+
+  const initModule = () => {
+    fullAPI.on(NAVIGATE_URL, (url: string, options: { [k: string]: any }) => {
+      fullAPI.navigateUrl(url, options);
+    });
   };
 
   return {
     api,
-    state: initialUrlSupport({ store, navigate, state, provider, ...rest }),
+    state: initialUrlSupport({ store, navigate, state, provider, fullAPI, ...rest }),
+    init: initModule,
   };
-}
+};
diff --git a/lib/api/src/modules/versions.ts b/lib/api/src/modules/versions.ts
index c0eee5a865c4..295ac37c8c78 100644
--- a/lib/api/src/modules/versions.ts
+++ b/lib/api/src/modules/versions.ts
@@ -1,14 +1,14 @@
 import { VERSIONCHECK } from 'global';
-import semver from 'semver';
+import semver from '@storybook/semver';
 import memoize from 'memoizerific';
 
 import { version as currentVersion } from '../version';
 
-import { Module, API } from '../index';
+import { ModuleFn } from '../index';
 
 export interface Version {
   version: string;
-  info?: string;
+  info?: { plain: string };
   [key: string]: any;
 }
 
@@ -46,7 +46,7 @@ export interface SubAPI {
   versionUpdateAvailable: () => boolean;
 }
 
-export default function({ store, mode }: Module) {
+export const init: ModuleFn = ({ store, mode, fullAPI }) => {
   const { dismissedVersionNotification } = store.getState();
 
   const state = {
@@ -106,10 +106,11 @@ export default function({ store, mode }: Module) {
   };
 
   // Grab versions from the server/local storage right away
-  async function init({ api: fullApi }: API) {
+  const initModule = async () => {
     const { versions = {} } = store.getState();
 
     const { latest, next } = getVersionCheckData();
+
     await store.setState({
       versions: { ...versions, latest, next },
     });
@@ -125,7 +126,7 @@ export default function({ store, mode }: Module) {
         !semver.prerelease(latestVersion) &&
         mode !== 'production'
       ) {
-        fullApi.addNotification({
+        fullAPI.addNotification({
           id: 'update',
           link: '/settings/about',
           content: `🎉 Storybook ${latestVersion} is available!`,
@@ -138,7 +139,7 @@ export default function({ store, mode }: Module) {
         });
       }
     }
-  }
+  };
 
-  return { init, state, api };
-}
+  return { init: initModule, state, api };
+};
diff --git a/lib/api/src/store.ts b/lib/api/src/store.ts
index 5d4428bce183..43267ad236d6 100644
--- a/lib/api/src/store.ts
+++ b/lib/api/src/store.ts
@@ -15,13 +15,13 @@ function get(storage: StoreAPI) {
 }
 
 function set(storage: StoreAPI, value: Patch) {
-  storage.set(STORAGE_KEY, value);
+  return storage.set(STORAGE_KEY, value);
 }
 
 function update(storage: StoreAPI, patch: Patch) {
   const previous = get(storage);
   // Apply the same behaviour as react here
-  set(storage, { ...previous, ...patch });
+  return set(storage, { ...previous, ...patch });
 }
 
 type GetState = () => State;
@@ -102,7 +102,7 @@ export default class Store {
       delta = patch;
     }
 
-    const newState: State = await new Promise(resolve => {
+    const newState: State = await new Promise((resolve) => {
       this.upstreamSetState(patch, resolve);
     });
 
diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js
index c17c485518ec..7caadc058631 100644
--- a/lib/api/src/tests/addons.test.js
+++ b/lib/api/src/tests/addons.test.js
@@ -1,4 +1,4 @@
-import initAddons, { types } from '../modules/addons';
+import { init as initAddons, types } from '../modules/addons';
 
 const PANELS = {
   a11y: {
@@ -61,7 +61,7 @@ describe('Addons API', () => {
   describe('#getStoryPanels', () => {
     it('should return all panels by default', () => {
       // given
-      const { api } = initAddons({ provider, store });
+      const { api } = initAddons({ provider, store, fullAPI: { getData: () => undefined } });
 
       // when
       const filteredPanels = api.getStoryPanels();
@@ -73,21 +73,27 @@ describe('Addons API', () => {
     it('should filter disabled addons', () => {
       // given
       const storyId = 'story 1';
+      const storiesHash = {
+        [storyId]: {
+          parameters: {
+            a11y: { disabled: true },
+          },
+        },
+      };
+
       const storeWithStory = {
         getState: () => ({
           storyId,
-          storiesHash: {
-            [storyId]: {
-              parameters: {
-                a11y: { disabled: true },
-              },
-            },
-          },
+          storiesHash,
         }),
         setState: jest.fn(),
       };
 
-      const { api } = initAddons({ provider, store: storeWithStory });
+      const { api } = initAddons({
+        provider,
+        store: storeWithStory,
+        fullAPI: { getData: (id) => storiesHash[id] },
+      });
 
       // when
       const filteredPanels = api.getStoryPanels();
diff --git a/lib/api/src/tests/globalArgs.test.ts b/lib/api/src/tests/globalArgs.test.ts
new file mode 100644
index 000000000000..a31953f20652
--- /dev/null
+++ b/lib/api/src/tests/globalArgs.test.ts
@@ -0,0 +1,71 @@
+import EventEmitter from 'event-emitter';
+import { SET_STORIES, UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
+
+import { ModuleArgs, API } from '../index';
+import { init as initModule, SubAPI } from '../modules/globalArgs';
+
+function createMockStore() {
+  let state = {};
+  return {
+    getState: jest.fn().mockImplementation(() => state),
+    setState: jest.fn().mockImplementation((s) => {
+      state = { ...state, ...s };
+    }),
+  };
+}
+
+describe('stories API', () => {
+  it('sets a sensible initialState', () => {
+    const store = createMockStore();
+    const { state } = initModule(({ store } as unknown) as ModuleArgs);
+
+    expect(state).toEqual({
+      globalArgs: {},
+    });
+  });
+
+  it('set global args on SET_STORIES', () => {
+    const api = EventEmitter();
+    const store = createMockStore();
+    const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
+    store.setState(state);
+    init();
+
+    api.emit(SET_STORIES, { globalArgs: { a: 'b' } });
+    expect(store.getState()).toEqual({ globalArgs: { a: 'b' } });
+
+    expect(state).toEqual({
+      globalArgs: {},
+    });
+  });
+
+  it('updates the state when the preview emits GLOBAL_ARGS_UPDATED', () => {
+    const api = EventEmitter();
+    const store = createMockStore();
+    const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
+    store.setState(state);
+
+    init();
+
+    api.emit(GLOBAL_ARGS_UPDATED, { a: 'b' });
+    expect(store.getState()).toEqual({ globalArgs: { a: 'b' } });
+
+    api.emit(GLOBAL_ARGS_UPDATED, { a: 'c' });
+    expect(store.getState()).toEqual({ globalArgs: { a: 'c' } });
+
+    // SHOULD NOT merge global args
+    api.emit(GLOBAL_ARGS_UPDATED, { d: 'e' });
+    expect(store.getState()).toEqual({ globalArgs: { d: 'e' } });
+  });
+
+  it('emits UPDATE_GLOBAL_ARGS when updateGlobalArgs is called', () => {
+    const fullAPI = ({ emit: jest.fn(), on: jest.fn() } as unknown) as API;
+    const store = createMockStore();
+    const { init, api } = initModule(({ store, fullAPI } as unknown) as ModuleArgs);
+
+    init();
+
+    (api as SubAPI).updateGlobalArgs({ a: 'b' });
+    expect(fullAPI.emit).toHaveBeenCalledWith(UPDATE_GLOBAL_ARGS, { a: 'b' });
+  });
+});
diff --git a/lib/api/src/tests/layout.test.js b/lib/api/src/tests/layout.test.js
index dbf644d9a53d..ed729cc06f42 100644
--- a/lib/api/src/tests/layout.test.js
+++ b/lib/api/src/tests/layout.test.js
@@ -1,5 +1,5 @@
 import { themes } from '@storybook/theming';
-import initLayout from '../modules/layout';
+import { init as initLayout } from '../modules/layout';
 
 describe('layout API', () => {
   describe('setOptions', () => {
diff --git a/lib/api/src/tests/notifications.test.js b/lib/api/src/tests/notifications.test.js
index c9e68f83e895..ffa2a1eec86b 100644
--- a/lib/api/src/tests/notifications.test.js
+++ b/lib/api/src/tests/notifications.test.js
@@ -1,4 +1,4 @@
-import initNotifications from '../modules/notifications';
+import { init as initNotifications } from '../modules/notifications';
 
 describe('notifications API', () => {
   it('allows adding notifications', () => {
diff --git a/lib/api/src/tests/ref-mockdata.login-required.json b/lib/api/src/tests/ref-mockdata.login-required.json
new file mode 100644
index 000000000000..784e17e77ba0
--- /dev/null
+++ b/lib/api/src/tests/ref-mockdata.login-required.json
@@ -0,0 +1,3 @@
+{
+  "authUrl": "https://example.com"
+}
\ No newline at end of file
diff --git a/lib/api/src/tests/ref-mockdata.success.json b/lib/api/src/tests/ref-mockdata.success.json
new file mode 100644
index 000000000000..fc0910728725
--- /dev/null
+++ b/lib/api/src/tests/ref-mockdata.success.json
@@ -0,0 +1,25 @@
+{
+  "stories": {
+    "welcome--to-storybook": {
+      "id": "welcome--to-storybook",
+      "kind": "Welcome",
+      "name": "to Storybook",
+      "story": "to Storybook",
+      "parameters": {}
+    },
+    "button--text": {
+      "id": "button--text",
+      "kind": "Button",
+      "name": "Text",
+      "story": "Text",
+      "parameters": {}
+    },
+    "button--emoji": {
+      "id": "button--emoji",
+      "kind": "Button",
+      "name": "Emoji",
+      "story": "Emoji",
+      "parameters": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/api/src/tests/refs.test.js b/lib/api/src/tests/refs.test.js
new file mode 100644
index 000000000000..930e65c135b1
--- /dev/null
+++ b/lib/api/src/tests/refs.test.js
@@ -0,0 +1,56 @@
+import { getSourceType } from '../modules/refs';
+
+jest.mock('global', () => {
+  const globalMock = {};
+  // Change global.location value to handle edge cases
+  // Add additional variations of global.location mock return values in this array.
+  // NOTE: The order must match the order that global.location is called in the unit tests.
+  const edgecaseLocations = [
+    { origin: 'https://storybook.js.org', pathname: '/storybook/index.html' },
+  ];
+  // global.location value after all edgecaseLocations are returned
+  const lastLocation = { origin: 'https://storybook.js.org', pathname: '/storybook/' };
+  Object.defineProperties(globalMock, {
+    location: {
+      get: edgecaseLocations
+        .reduce((mockFn, location) => mockFn.mockReturnValueOnce(location), jest.fn())
+        .mockReturnValue(lastLocation),
+    },
+  });
+  return globalMock;
+});
+
+describe('refs', () => {
+  describe('getSourceType(source)', () => {
+    // These tests must be run first and in correct order.
+    // The order matches the "edgecaseLocations" order in the 'global' mock function above.
+    describe('edge cases', () => {
+      it('returns "local" when source matches location with /index.html in path', () => {
+        // mockReturnValue(edgecaseLocations[0])
+        expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([
+          'local',
+          'https://storybook.js.org/storybook',
+        ]);
+      });
+      it('returns "correct url" when source does not match location', () => {
+        expect(getSourceType('https://external.com/storybook/')).toEqual([
+          'external',
+          'https://external.com/storybook',
+        ]);
+      });
+    });
+    // Other tests use "lastLocation" for the 'global' mock
+    it('returns "local" when source matches location', () => {
+      expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([
+        'local',
+        'https://storybook.js.org/storybook',
+      ]);
+    });
+    it('returns "external" when source does not match location', () => {
+      expect(getSourceType('https://external.com/storybook/iframe.html')).toEqual([
+        'external',
+        'https://external.com/storybook',
+      ]);
+    });
+  });
+});
diff --git a/lib/api/src/tests/shortcut.test.js b/lib/api/src/tests/shortcut.test.js
index 4afe7d1c054b..3a617332a37a 100644
--- a/lib/api/src/tests/shortcut.test.js
+++ b/lib/api/src/tests/shortcut.test.js
@@ -1,7 +1,7 @@
 import { KeyboardEvent } from 'global';
 import { eventToShortcut, keyToSymbol } from '../lib/shortcut';
 
-const ev = attr => new KeyboardEvent('keydown', { ...attr });
+const ev = (attr) => new KeyboardEvent('keydown', { ...attr });
 
 describe('eventToShortcut', () => {
   test('it handles alt key inputs', () => {
diff --git a/lib/api/src/tests/shortcuts.test.js b/lib/api/src/tests/shortcuts.test.js
index a9a3d149866a..41678e0f872e 100644
--- a/lib/api/src/tests/shortcuts.test.js
+++ b/lib/api/src/tests/shortcuts.test.js
@@ -1,10 +1,10 @@
-import initShortcuts from '../modules/shortcuts';
+import { init as initShortcuts } from '../modules/shortcuts';
 
 function createMockStore() {
   let state = {};
   return {
     getState: jest.fn().mockImplementation(() => state),
-    setState: jest.fn().mockImplementation(s => {
+    setState: jest.fn().mockImplementation((s) => {
       state = { ...state, ...s };
     }),
   };
diff --git a/lib/api/src/tests/store.test.js b/lib/api/src/tests/store.test.js
index 64d139cf40e8..4d555d74f9f0 100644
--- a/lib/api/src/tests/store.test.js
+++ b/lib/api/src/tests/store.test.js
@@ -126,11 +126,11 @@ describe('store', () => {
     });
 
     it('allows a callback', async () =>
-      new Promise(resolve => {
+      new Promise((resolve) => {
         const setState = jest.fn().mockImplementation((x, cb) => cb('RESULT'));
         const store = new Store({ setState });
 
-        store.setState({ foo: 'bar' }, result => {
+        store.setState({ foo: 'bar' }, (result) => {
           expect(result).toBe('RESULT');
           resolve();
         });
diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js
index d485d3fe06bd..50c52a212dfc 100644
--- a/lib/api/src/tests/stories.test.js
+++ b/lib/api/src/tests/stories.test.js
@@ -1,15 +1,25 @@
-import initStories from '../modules/stories';
+import EventEmitter from 'event-emitter';
+import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, SET_STORIES } from '@storybook/core-events';
 
-function createMockStore() {
-  let state = {};
+import { init as initStories } from '../modules/stories';
+
+function createMockStore(initialState) {
+  let state = initialState || {};
   return {
-    getState: jest.fn().mockImplementation(() => state),
-    setState: jest.fn().mockImplementation(s => {
+    getState: jest.fn(() => state),
+    setState: jest.fn((s) => {
       state = { ...state, ...s };
+      return Promise.resolve(state);
     }),
   };
 }
 
+const provider = {
+  getConfig() {
+    return {};
+  },
+};
+
 describe('stories API', () => {
   it('sets a sensible initialState', () => {
     const { state } = initStories({
@@ -26,14 +36,15 @@ describe('stories API', () => {
   });
   const parameters = {};
   const storiesHash = {
-    'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
-    'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2' },
+    'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: {} },
+    'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2', args: {} },
     'b-c--1': {
       kind: 'b/c',
       name: '1',
       parameters,
       path: 'b-c--1',
       id: 'b-c--1',
+      args: {},
     },
     'b-d--1': {
       kind: 'b/d',
@@ -41,6 +52,7 @@ describe('stories API', () => {
       parameters,
       path: 'b-d--1',
       id: 'b-d--1',
+      args: {},
     },
     'b-d--2': {
       kind: 'b/d',
@@ -48,6 +60,7 @@ describe('stories API', () => {
       parameters,
       path: 'b-d--2',
       id: 'b-d--2',
+      args: { a: 'b' },
     },
     'custom-id--1': {
       kind: 'b/e',
@@ -55,6 +68,7 @@ describe('stories API', () => {
       parameters,
       path: 'custom-id--1',
       id: 'custom-id--1',
+      args: {},
     },
   };
   describe('setStories', () => {
@@ -64,13 +78,13 @@ describe('stories API', () => {
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       setStories(storiesHash);
 
       const { storiesHash: storedStoriesHash } = store.getState();
 
-      // We need exact key ordering, even if in theory JS doens't guarantee it
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
       expect(Object.keys(storedStoriesHash)).toEqual([
         'a',
         'a--1',
@@ -97,6 +111,7 @@ describe('stories API', () => {
         kind: 'a',
         name: '1',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash['a--2']).toMatchObject({
@@ -105,6 +120,7 @@ describe('stories API', () => {
         kind: 'a',
         name: '2',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash.b).toMatchObject({
@@ -128,6 +144,7 @@ describe('stories API', () => {
         kind: 'b/c',
         name: '1',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash['b-d']).toMatchObject({
@@ -144,6 +161,7 @@ describe('stories API', () => {
         kind: 'b/d',
         name: '1',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash['b-d--2']).toMatchObject({
@@ -152,6 +170,7 @@ describe('stories API', () => {
         kind: 'b/d',
         name: '2',
         parameters,
+        args: { a: 'b' },
       });
 
       expect(storedStoriesHash['b-e']).toMatchObject({
@@ -168,6 +187,7 @@ describe('stories API', () => {
         kind: 'b/e',
         name: '1',
         parameters,
+        args: {},
       });
     });
 
@@ -177,7 +197,7 @@ describe('stories API', () => {
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       const showRootsParameters = { options: { showRoots: true } };
       setStories({
@@ -187,6 +207,7 @@ describe('stories API', () => {
           parameters: showRootsParameters,
           path: 'a-b--1',
           id: 'a-b--1',
+          args: {},
         },
       });
 
@@ -213,6 +234,7 @@ describe('stories API', () => {
         kind: 'a/b',
         name: '1',
         parameters: showRootsParameters,
+        args: {},
       });
     });
 
@@ -222,7 +244,7 @@ describe('stories API', () => {
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       const showRootsParameters = { options: { showRoots: true } };
       setStories({
@@ -232,6 +254,7 @@ describe('stories API', () => {
           parameters: showRootsParameters,
           path: 'a--1',
           id: 'a--1',
+          args: {},
         },
       });
 
@@ -251,26 +274,28 @@ describe('stories API', () => {
         kind: 'a',
         name: '1',
         parameters: showRootsParameters,
+        args: {},
       });
     });
 
-    it('handles roots also', () => {
+    it('handles roots also', async () => {
       const navigate = jest.fn();
       const store = createMockStore();
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories({
-        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
-        'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2' },
+      await setStories({
+        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: {} },
+        'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2', args: {} },
         'b-c--1': {
           kind: 'b|c',
           name: '1',
           parameters,
           path: 'b-c--1',
           id: 'b-c--1',
+          args: {},
         },
         'b-d--1': {
           kind: 'b|d',
@@ -278,6 +303,7 @@ describe('stories API', () => {
           parameters,
           path: 'b-d--1',
           id: 'b-d--1',
+          args: {},
         },
         'b-d--2': {
           kind: 'b|d',
@@ -285,6 +311,7 @@ describe('stories API', () => {
           parameters,
           path: 'b-d--2',
           id: 'b-d--2',
+          args: {},
         },
       });
       const { storiesHash: storedStoriesHash } = store.getState();
@@ -322,6 +349,7 @@ describe('stories API', () => {
         kind: 'b|c',
         name: '1',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash['b-d--1']).toMatchObject({
@@ -330,6 +358,7 @@ describe('stories API', () => {
         kind: 'b|d',
         name: '1',
         parameters,
+        args: {},
       });
 
       expect(storedStoriesHash['b-d--2']).toMatchObject({
@@ -338,23 +367,24 @@ describe('stories API', () => {
         kind: 'b|d',
         name: '2',
         parameters,
+        args: {},
       });
     });
 
     // Stories can get out of order for a few reasons -- see reproductions on
     //   https://github.com/storybookjs/storybook/issues/5518
-    it('does the right thing for out of order stories', () => {
+    it('does the right thing for out of order stories', async () => {
       const navigate = jest.fn();
       const store = createMockStore();
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories({
-        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
-        'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1' },
-        'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2' },
+      await setStories({
+        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: {} },
+        'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1', args: {} },
+        'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2', args: {} },
       });
 
       const { storiesHash: storedStoriesHash } = store.getState();
@@ -376,113 +406,150 @@ describe('stories API', () => {
       });
     });
 
-    it('navigates to the first story in the store if there is none selected', () => {
+    it('navigates to the first story in the store if there is none selected', async () => {
       const navigate = jest.fn();
-      const store = { getState: () => ({ viewMode: 'story' }), setState: jest.fn() };
+      const store = createMockStore({ viewMode: 'story' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
+      await setStories(storiesHash);
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
 
-    it('navigates to the first story in the store if a non-existent story was selected', () => {
+    it('navigates to the first story in the store if a non-existent story was selected', async () => {
       const navigate = jest.fn();
-      const store = {
-        getState: () => ({ viewMode: 'story', storyId: 'random' }),
-        setState: jest.fn(),
-      };
+      const store = createMockStore({ viewMode: 'story', storyId: 'random' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
+      await setStories(storiesHash);
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
 
-    it('navigates to the first leaf story if a story exsits but it is not a leaf story(1)', () => {
+    it('navigates to the first leaf story if a story exists but it is not a leaf story(1)', async () => {
       const navigate = jest.fn();
-      const store = {
-        getState: () => ({ viewMode: 'story', storyId: 'b' }),
-        setState: jest.fn(),
-      };
+      const store = createMockStore({ viewMode: 'story', storyId: 'b' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
+      await setStories(storiesHash);
       expect(navigate).toHaveBeenCalledWith('/story/b-c--1');
     });
 
-    it('navigates to the first leaf story if a story exsits but it is not a leaf story(2)', () => {
+    it('navigates to the first leaf story if a story exists but it is not a leaf story(2)', async () => {
       const navigate = jest.fn();
-      const store = {
-        getState: () => ({ viewMode: 'story', storyId: 'b-d' }),
-        setState: jest.fn(),
-      };
+      const store = createMockStore({ viewMode: 'story', storyId: 'b-d' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
+      await setStories(storiesHash);
       expect(navigate).toHaveBeenCalledWith('/story/b-d--1');
     });
 
-    it('does not navigate if a existing story was selected', () => {
+    it('does not navigate if a existing story was selected', async () => {
       const navigate = jest.fn();
-      const store = {
-        getState: () => ({ viewMode: 'story', storyId: 'b-c--1' }),
-        setState: jest.fn(),
-      };
+      const store = createMockStore({ viewMode: 'story', storyId: 'b-c--1' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
+      await setStories(storiesHash);
       expect(navigate).not.toHaveBeenCalled();
     });
 
-    it('navigates to the settings page if a existing page was selected', () => {
+    it('navigates to the settings page if a existing page was selected', async () => {
       const navigate = jest.fn();
-      const store = {
-        getState: () => ({ viewMode: 'settings', storyId: 'about' }),
-        setState: jest.fn(),
-      };
+      const store = createMockStore({ viewMode: 'settings', storyId: 'about' });
 
       const {
         api: { setStories },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
-      setStories(storiesHash);
-      expect(navigate).toHaveBeenCalledWith('/settings/about');
+      await setStories(storiesHash);
+      expect(navigate).not.toHaveBeenCalled();
     });
 
     it(
       'navigates to the first story in the store when viewMode is settings but' +
         'non-existent page was selected',
-      () => {
+      async () => {
         const navigate = jest.fn();
-        const store = {
-          getState: () => ({ viewMode: 'settings', storyId: 'random' }),
-          setState: jest.fn(),
-        };
+        const store = createMockStore({ viewMode: 'settings', storyId: 'random' });
 
         const {
           api: { setStories },
-        } = initStories({ store, navigate });
+        } = initStories({ store, navigate, provider });
 
-        setStories(storiesHash);
-        expect(navigate).toHaveBeenCalledWith('/story/a--1');
+        await setStories(storiesHash);
+        expect(navigate).not.toHaveBeenCalledWith();
       }
     );
   });
 
+  describe('args handling', () => {
+    it('changes args properly, per story when receiving STORY_ARGS_UPDATED', () => {
+      const navigate = jest.fn();
+      const store = createMockStore();
+      const api = new EventEmitter();
+
+      const {
+        api: { setStories },
+        init,
+      } = initStories({ store, navigate, provider, fullAPI: api });
+
+      setStories({
+        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: { a: 'b' } },
+        'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1', args: { x: 'y' } },
+      });
+
+      const { storiesHash: initialStoriesHash } = store.getState();
+      expect(initialStoriesHash['a--1'].args).toEqual({ a: 'b' });
+      expect(initialStoriesHash['b--1'].args).toEqual({ x: 'y' });
+
+      init();
+      api.emit(STORY_ARGS_UPDATED, 'a--1', { foo: 'bar' });
+
+      const { storiesHash: changedStoriesHash } = store.getState();
+      expect(changedStoriesHash['a--1'].args).toEqual({ foo: 'bar' });
+      expect(changedStoriesHash['b--1'].args).toEqual({ x: 'y' });
+    });
+
+    it('updateStoryArgs emits UPDATE_STORY_ARGS and does not change anything', () => {
+      const navigate = jest.fn();
+      const emit = jest.fn();
+      const on = jest.fn();
+      const store = createMockStore();
+
+      const {
+        api: { setStories, updateStoryArgs },
+        init,
+      } = initStories({ store, navigate, provider, fullAPI: { emit, on } });
+
+      setStories({
+        'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: { a: 'b' } },
+        'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1', args: { x: 'y' } },
+      });
+
+      init();
+
+      updateStoryArgs('a--1', { foo: 'bar' });
+      expect(emit).toHaveBeenCalledWith(UPDATE_STORY_ARGS, 'a--1', { foo: 'bar' });
+
+      const { storiesHash: changedStoriesHash } = store.getState();
+      expect(changedStoriesHash['a--1'].args).toEqual({ a: 'b' });
+      expect(changedStoriesHash['b--1'].args).toEqual({ x: 'y' });
+    });
+  });
+
   describe('jumpToStory', () => {
     it('works forward', () => {
       const navigate = jest.fn();
@@ -491,7 +558,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToStory },
         state,
-      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -506,7 +573,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToStory },
         state,
-      } = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -521,7 +588,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToStory },
         state,
-      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -536,7 +603,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToStory },
         state,
-      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -550,7 +617,7 @@ describe('stories API', () => {
 
       const {
         api: { jumpToStory },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       jumpToStory(1);
       expect(navigate).not.toHaveBeenCalled();
@@ -565,7 +632,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToComponent },
         state,
-      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -580,7 +647,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToComponent },
         state,
-      } = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -595,7 +662,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToComponent },
         state,
-      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -610,7 +677,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToComponent },
         state,
-      } = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story', provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -628,7 +695,7 @@ describe('stories API', () => {
 
       const {
         api: { selectStory },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       selectStory('a--2');
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
@@ -642,7 +709,7 @@ describe('stories API', () => {
 
       const {
         api: { selectStory },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       selectStory('a', '2');
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
@@ -656,7 +723,7 @@ describe('stories API', () => {
 
       const {
         api: { selectStory },
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
 
       selectStory(null, '2');
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
@@ -669,7 +736,7 @@ describe('stories API', () => {
       const {
         api: { selectStory, setStories },
         state,
-      } = initStories({ store, navigate });
+      } = initStories({ store, navigate, provider });
       store.setState(state);
       setStories(storiesHash);
 
@@ -685,7 +752,7 @@ describe('stories API', () => {
         const {
           api: { selectStory, setStories },
           state,
-        } = initStories({ store, navigate });
+        } = initStories({ store, navigate, provider });
         store.setState(state);
         setStories(storiesHash);
 
@@ -700,7 +767,7 @@ describe('stories API', () => {
         const {
           api: { selectStory, setStories },
           state,
-        } = initStories({ store, navigate });
+        } = initStories({ store, navigate, provider });
         store.setState(state);
         setStories(storiesHash);
 
@@ -715,7 +782,7 @@ describe('stories API', () => {
         const {
           api: { selectStory, setStories },
           state,
-        } = initStories({ store, navigate });
+        } = initStories({ store, navigate, provider });
         store.setState(state);
         setStories(storiesHash);
 
@@ -724,4 +791,121 @@ describe('stories API', () => {
       });
     });
   });
+  describe('v2 SET_STORIES event', () => {
+    it('normalizes parameters and calls setStories for local stories', () => {
+      const fullAPI = { on: jest.fn(), setStories: jest.fn(), setOptions: jest.fn() };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStories = fullAPI.on.mock.calls.find(([event]) => event === SET_STORIES)[1];
+
+      const setStoriesPayload = {
+        v: 2,
+        globalParameters: { global: 'global' },
+        kindParameters: { a: { kind: 'kind' } },
+        stories: { 'a--1': { kind: 'a', parameters: { story: 'story' } } },
+      };
+      onSetStories.call({ source: 'http://localhost' }, setStoriesPayload);
+
+      expect(fullAPI.setStories).toHaveBeenCalledWith(
+        {
+          'a--1': { kind: 'a', parameters: { global: 'global', kind: 'kind', story: 'story' } },
+        },
+        undefined
+      );
+    });
+
+    it('normalizes parameters and calls setRef for external stories', () => {
+      const fullAPI = {
+        on: jest.fn(),
+        findRef: jest.fn().mockReturnValue({ id: 'ref' }),
+        setRef: jest.fn(),
+      };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStories = fullAPI.on.mock.calls.find(([event]) => event === SET_STORIES)[1];
+
+      const setStoriesPayload = {
+        v: 2,
+        globalParameters: { global: 'global' },
+        kindParameters: { a: { kind: 'kind' } },
+        stories: { 'a--1': { kind: 'a', parameters: { story: 'story' } } },
+      };
+      onSetStories.call({ source: 'http://external' }, setStoriesPayload);
+
+      expect(fullAPI.setRef).toHaveBeenCalledWith(
+        'ref',
+        {
+          id: 'ref',
+          v: 2,
+          globalParameters: { global: 'global' },
+          kindParameters: { a: { kind: 'kind' } },
+          stories: {
+            'a--1': { kind: 'a', parameters: { global: 'global', kind: 'kind', story: 'story' } },
+          },
+        },
+        true
+      );
+    });
+
+    it('calls setOptions with global options parameters', () => {
+      const fullAPI = { on: jest.fn(), setStories: jest.fn(), setOptions: jest.fn() };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStories = fullAPI.on.mock.calls.find(([event]) => event === SET_STORIES)[1];
+
+      const setStoriesPayload = {
+        v: 2,
+        globalParameters: { options: 'options' },
+        kindParameters: { a: { options: 'should-be-ignored' } },
+        stories: { 'a--1': { kind: 'a', parameters: { options: 'should-be-ignored-also' } } },
+      };
+      onSetStories.call({ source: 'http://localhost' }, setStoriesPayload);
+
+      expect(fullAPI.setOptions).toHaveBeenCalledWith('options');
+    });
+  });
+  describe('legacy (v1) SET_STORIES event', () => {
+    it('calls setRef with stories', () => {
+      const fullAPI = {
+        on: jest.fn(),
+        findRef: jest.fn().mockReturnValue({ id: 'ref' }),
+        setRef: jest.fn(),
+      };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStories = fullAPI.on.mock.calls.find(([event]) => event === SET_STORIES)[1];
+
+      const setStoriesPayload = {
+        stories: { 'a--1': {} },
+      };
+      onSetStories.call({ source: 'http://external' }, setStoriesPayload);
+
+      expect(fullAPI.setRef).toHaveBeenCalledWith(
+        'ref',
+        {
+          id: 'ref',
+          stories: {
+            'a--1': {},
+          },
+        },
+        true
+      );
+    });
+  });
 });
diff --git a/lib/api/src/tests/url.test.js b/lib/api/src/tests/url.test.js
index c1e8657c2f68..064bd0488a61 100644
--- a/lib/api/src/tests/url.test.js
+++ b/lib/api/src/tests/url.test.js
@@ -1,6 +1,6 @@
 import qs from 'qs';
 
-import initURL from '../modules/url';
+import { init as initURL } from '../modules/url';
 
 jest.useFakeTimers();
 
@@ -155,7 +155,7 @@ describe('queryParams', () => {
   it('lets your read out parameters you set previously', () => {
     let state = {};
     const store = {
-      setState: change => {
+      setState: (change) => {
         state = { ...state, ...change };
       },
       getState: () => state,
diff --git a/lib/api/src/tests/versions.test.js b/lib/api/src/tests/versions.test.js
index 5b4258d5bdb4..aa7147be62e7 100644
--- a/lib/api/src/tests/versions.test.js
+++ b/lib/api/src/tests/versions.test.js
@@ -1,4 +1,4 @@
-import initVersions from '../modules/versions';
+import { init as initVersions } from '../modules/versions';
 
 jest.mock('../version', () => ({
   version: '3.0.0',
@@ -34,7 +34,7 @@ function createMockStore() {
   };
   return {
     getState: jest.fn().mockImplementation(() => state),
-    setState: jest.fn().mockImplementation(s => {
+    setState: jest.fn().mockImplementation((s) => {
       state = { ...state, ...s };
     }),
   };
@@ -66,11 +66,14 @@ describe('versions API', () => {
 
   it('sets versions in the init function', async () => {
     const store = createMockStore();
-    const { state: initialState, init, api } = initVersions({ store });
+    const { state: initialState, init } = initVersions({
+      store,
+      fullAPI: { addNotification: jest.fn() },
+    });
     store.setState(initialState);
     store.setState.mockReset();
 
-    await init({ api: { addNotification: jest.fn(), ...api } });
+    await init();
 
     expect(store.setState).toHaveBeenCalledWith({
       versions: {
@@ -84,58 +87,74 @@ describe('versions API', () => {
   describe('notifications', () => {
     it('sets an update notification right away in the init function', async () => {
       const store = createMockStore();
-      const { init, api, state: initialState } = initVersions({ store });
+      const addNotification = jest.fn();
+      const { init, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification },
+      });
       store.setState(initialState);
 
-      const addNotification = jest.fn();
-      await init({ api: { addNotification, ...api } });
+      await init();
       expect(addNotification).toHaveBeenCalled();
     });
 
     it('does not set an update notification if it has been dismissed', async () => {
       const store = createMockStore();
       store.setState({ dismissedVersionNotification: '5.2.3' });
-      const { init, api, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
       store.setState(initialState);
 
       const addNotification = jest.fn();
-      await init({ api: { addNotification, ...api } });
+      await init();
       expect(addNotification).not.toHaveBeenCalled();
     });
 
     it('does not set an update notification if the latest version is a patch', async () => {
       const store = createMockStore();
-      const { init, api, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
       store.setState({
         ...initialState,
         versions: { ...initialState.versions, current: { version: '5.2.1' } },
       });
 
       const addNotification = jest.fn();
-      await init({ api: { addNotification, ...api } });
+      await init();
       expect(addNotification).not.toHaveBeenCalled();
     });
 
     it('does not set an update notification in production mode', async () => {
       const store = createMockStore();
-      const { init, api, state: initialState } = initVersions({ store, mode: 'production' });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
       store.setState(initialState);
 
       const addNotification = jest.fn();
-      await init({ api: { addNotification, ...api } });
+      await init();
       expect(addNotification).not.toHaveBeenCalled();
     });
 
     it('persists a dismissed notification', async () => {
       const store = createMockStore();
-      const { init, api, state: initialState } = initVersions({ store });
-      store.setState(initialState);
-
       let notification;
-      const addNotification = jest.fn().mockImplementation(n => {
+      const addNotification = jest.fn().mockImplementation((n) => {
         notification = n;
       });
-      await init({ api: { addNotification, ...api } });
+
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification },
+      });
+      store.setState(initialState);
+
+      await init();
 
       notification.onClear();
       expect(store.setState).toHaveBeenCalledWith(
@@ -147,10 +166,13 @@ describe('versions API', () => {
 
   it('getCurrentVersion works', async () => {
     const store = createMockStore();
-    const { api, init, state: initialState } = initVersions({ store });
+    const { init, api, state: initialState } = initVersions({
+      store,
+      fullAPI: { addNotification: jest.fn() },
+    });
     store.setState(initialState);
 
-    await init({ api: { ...api, addNotification: jest.fn() } });
+    await init();
 
     expect(api.getCurrentVersion()).toEqual({
       version: '3.0.0',
@@ -159,10 +181,13 @@ describe('versions API', () => {
 
   it('getLatestVersion works', async () => {
     const store = createMockStore();
-    const { api, init, state: initialState } = initVersions({ store });
+    const { init, api, state: initialState } = initVersions({
+      store,
+      fullAPI: { addNotification: jest.fn() },
+    });
     store.setState(initialState);
 
-    await init({ api: { ...api, addNotification: jest.fn() } });
+    await init();
 
     expect(api.getLatestVersion()).toMatchObject({
       version: '5.2.3',
@@ -172,7 +197,10 @@ describe('versions API', () => {
   describe('versionUpdateAvailable', () => {
     it('matching version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
       store.setState({
         ...initialState,
         versions: {
@@ -182,14 +210,17 @@ describe('versions API', () => {
         },
       });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       expect(api.versionUpdateAvailable()).toEqual(false);
     });
 
     it('new patch version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
       store.setState({
         ...initialState,
         versions: {
@@ -199,16 +230,19 @@ describe('versions API', () => {
         },
       });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       expect(api.versionUpdateAvailable()).toEqual(false);
     });
 
     it('new minor version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       store.setState({
         ...initialState,
@@ -224,9 +258,12 @@ describe('versions API', () => {
 
     it('new major version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       store.setState({
         ...initialState,
@@ -242,9 +279,12 @@ describe('versions API', () => {
 
     it('new prerelease version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       store.setState({
         ...initialState,
@@ -260,9 +300,12 @@ describe('versions API', () => {
 
     it('from older prerelease version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       store.setState({
         ...initialState,
@@ -278,9 +321,12 @@ describe('versions API', () => {
 
     it('from newer prerelease version', async () => {
       const store = createMockStore();
-      const { api, init, state: initialState } = initVersions({ store });
+      const { init, api, state: initialState } = initVersions({
+        store,
+        fullAPI: { addNotification: jest.fn() },
+      });
 
-      await init({ api: { ...api, addNotification: jest.fn() } });
+      await init();
 
       store.setState({
         ...initialState,
diff --git a/lib/api/src/typings.d.ts b/lib/api/src/typings.d.ts
index dec29d3690eb..7deb0f409deb 100644
--- a/lib/api/src/typings.d.ts
+++ b/lib/api/src/typings.d.ts
@@ -1,4 +1,5 @@
 declare module 'global';
+declare module '@storybook/semver';
 
 // provided by the webpack define plugin
 declare var DOCS_MODE: string | undefined;
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index d1499c15d1b5..a783b8101928 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.3.0-rc.0';
+export const version = '6.0.0-beta.21';
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index a91274ca71c3..e1e24b253e32 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -15,26 +15,35 @@
     "directory": "lib/channel-postmessage"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "telejson": "^3.2.0"
+    "telejson": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index 863de1eaad07..23ddbbd0c34a 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -1,13 +1,9 @@
-import { window, document } from 'global';
+import { window, document, location } from 'global';
+import * as EVENTS from '@storybook/core-events';
 import Channel, { ChannelEvent, ChannelHandler } from '@storybook/channels';
-import { logger } from '@storybook/client-logger';
-
+import { logger, pretty } from '@storybook/client-logger';
 import { isJSON, parse, stringify } from 'telejson';
 
-interface RawEvent {
-  data: string;
-}
-
 interface Config {
   page: 'manager' | 'preview';
 }
@@ -46,7 +42,7 @@ export class PostmsgTransport {
     this.handler = (...args) => {
       handler.apply(this, args);
 
-      if (!this.connected && this.getWindow()) {
+      if (!this.connected && this.getLocalFrame().length) {
         this.flush();
         this.connected = true;
       }
@@ -59,14 +55,9 @@ export class PostmsgTransport {
    * @param event
    */
   send(event: ChannelEvent, options?: any): Promise<any> {
-    const iframeWindow = this.getWindow();
-    if (!iframeWindow || this.buffer.length) {
-      return new Promise((resolve, reject) => {
-        this.buffer.push({ event, resolve, reject });
-      });
-    }
-    let depth = 15;
+    let depth = 25;
     let allowFunction = true;
+    let target;
 
     if (options && typeof options.allowFunction === 'boolean') {
       allowFunction = options.allowFunction;
@@ -74,53 +65,178 @@ export class PostmsgTransport {
     if (options && Number.isInteger(options.depth)) {
       depth = options.depth;
     }
+    if (options && typeof options.target === 'string') {
+      target = options.target;
+    }
+
+    const frames = this.getFrames(target);
+
+    const data = stringify(
+      { key: KEY, event, source: document.location.origin + document.location.pathname },
+      { maxDepth: depth, allowFunction }
+    );
+
+    if (!frames.length) {
+      return new Promise((resolve, reject) => {
+        this.buffer.push({ event, resolve, reject });
+      });
+    }
+    if (this.buffer.length) {
+      this.flush();
+    }
 
-    const data = stringify({ key: KEY, event }, { maxDepth: depth, allowFunction });
+    frames.forEach((f) => {
+      try {
+        f.postMessage(data, '*');
+      } catch (e) {
+        console.error('sending over postmessage fail');
+      }
+    });
 
-    // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
-    // might replace '*' with document.location ?
-    iframeWindow.postMessage(data, '*');
     return Promise.resolve(null);
   }
 
   private flush(): void {
     const { buffer } = this;
     this.buffer = [];
-    buffer.forEach(item => {
-      this.send(item.event)
-        .then(item.resolve)
-        .catch(item.reject);
+    buffer.forEach((item) => {
+      this.send(item.event).then(item.resolve).catch(item.reject);
     });
   }
 
-  private getWindow(): Window {
+  private getFrames(target?: string): Window[] {
     if (this.config.page === 'manager') {
-      // FIXME this is a really bad idea! use a better way to do this.
-      // This finds the storybook preview iframe to send messages to.
-      const iframe = document.getElementById('storybook-preview-iframe');
-      if (!iframe) {
-        return null;
-      }
-      return iframe.contentWindow;
+      const nodes: HTMLIFrameElement[] = [
+        ...document.querySelectorAll('iframe[data-is-storybook][data-is-loaded]'),
+      ];
+
+      const list = nodes
+        .filter((e) => {
+          try {
+            return !!e.contentWindow && e.dataset.isStorybook !== undefined && e.id === target;
+          } catch (er) {
+            return false;
+          }
+        })
+        .map((e) => e.contentWindow);
+
+      return list.length ? list : this.getCurrentFrames();
+    }
+    if (window && window.parent) {
+      return [window.parent];
     }
-    return window.parent;
+
+    return [];
   }
 
-  private handleEvent(rawEvent: RawEvent): void {
+  private getCurrentFrames(): Window[] {
+    if (this.config.page === 'manager') {
+      const list: HTMLIFrameElement[] = [
+        ...document.querySelectorAll('[data-is-storybook="true"]'),
+      ];
+      return list.map((e) => e.contentWindow);
+    }
+    if (window && window.parent) {
+      return [window.parent];
+    }
+
+    return [];
+  }
+
+  private getLocalFrame(): Window[] {
+    if (this.config.page === 'manager') {
+      const list: HTMLIFrameElement[] = [...document.querySelectorAll('#storybook-preview-iframe')];
+      return list.map((e) => e.contentWindow);
+    }
+    if (window && window.parent) {
+      return [window.parent];
+    }
+
+    return [];
+  }
+
+  private handleEvent(rawEvent: MessageEvent): void {
     try {
       const { data } = rawEvent;
-      const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;
+      const { key, event, source } = typeof data === 'string' && isJSON(data) ? parse(data) : data;
+
       if (key === KEY) {
-        logger.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
+        const pageString =
+          this.config.page === 'manager'
+            ? `<span style="color: #37D5D3; background: black"> manager </span>`
+            : `<span style="color: #1EA7FD; background: black"> preview </span>`;
+
+        const eventString = Object.values(EVENTS).includes(event.type)
+          ? `<span style="color: #FF4785">${event.type}</span>`
+          : `<span style="color: #FFAE00">${event.type}</span>`;
+
+        if (source) {
+          const { origin, pathname } = new URL(source, document.location);
+          event.source = origin + pathname;
+        } else {
+          event.source =
+            this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent);
+        }
+
+        if (!event.source) {
+          pretty.error(
+            `${pageString} received ${eventString} but was unable to determine the source of the event`
+          );
+
+          return;
+        }
+        pretty.debug(
+          location.origin !== event.source
+            ? `${pageString} received ${eventString}`
+            : `${pageString} received ${eventString} <span style="color: gray">(on ${location.origin} from ${event.source})</span>`,
+          ...event.args
+        );
+
         this.handler(event);
       }
     } catch (error) {
       logger.error(error);
-      // debugger;
     }
   }
 }
 
+const getEventSourceUrl = (event: MessageEvent) => {
+  const frames = [...document.querySelectorAll('iframe[data-is-storybook]')];
+  // try to find the originating iframe by matching it's contentWindow
+  // This might not be cross-origin safe
+  const [frame, ...remainder] = frames.filter((element) => {
+    try {
+      return element.contentWindow === event.source;
+    } catch (err) {
+      // continue
+    }
+
+    const src = element.getAttribute('src');
+    let origin;
+
+    try {
+      ({ origin } = new URL(src, document.location));
+    } catch (err) {
+      return false;
+    }
+    return origin === event.origin;
+  });
+
+  if (frame && remainder.length === 0) {
+    const src = frame.getAttribute('src');
+    const { origin, pathname } = new URL(src, document.location);
+    return origin + pathname;
+  }
+
+  if (remainder.length > 0) {
+    // If we found multiple matches, there's going to be trouble
+    logger.error('found multiple candidates for event source');
+  }
+
+  // If we found no frames of matches
+  return null;
+};
+
 /**
  * Creates a channel which communicates with an iframe or child window.
  */
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 410fce2d48fa..499405c8cb40 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -15,25 +15,33 @@
     "directory": "lib/channel-websocket"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.3.0-rc.0",
+    "@storybook/channels": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "json-fn": "^1.1.1"
+    "telejson": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/channel-websocket/src/index.ts b/lib/channel-websocket/src/index.ts
index d82f04081bce..6b824160a25e 100644
--- a/lib/channel-websocket/src/index.ts
+++ b/lib/channel-websocket/src/index.ts
@@ -1,6 +1,6 @@
 import { WebSocket } from 'global';
-import JSON from 'json-fn';
 import { Channel, ChannelHandler } from '@storybook/channels';
+import { isJSON, parse, stringify } from 'telejson';
 
 type OnError = (message: Event) => void;
 
@@ -45,14 +45,14 @@ export class WebsocketTransport {
   }
 
   private sendNow(event: any) {
-    const data = JSON.stringify(event);
+    const data = stringify(event, { maxDepth: 15, allowFunction: true });
     this.socket.send(data);
   }
 
   private flush() {
     const { buffer } = this;
     this.buffer = [];
-    buffer.forEach(event => this.send(event));
+    buffer.forEach((event) => this.send(event));
   }
 
   private connect(url: string, onError: OnError) {
@@ -61,11 +61,11 @@ export class WebsocketTransport {
       this.isReady = true;
       this.flush();
     };
-    this.socket.onmessage = e => {
-      const event = JSON.parse(e.data);
+    this.socket.onmessage = ({ data }) => {
+      const event = typeof data === 'string' && isJSON(data) ? parse(data) : data;
       this.handler(event);
     };
-    this.socket.onerror = e => {
+    this.socket.onerror = (e) => {
       if (onError) {
         onError(e);
       }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index bc7ae5904fe7..5776988dc57b 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -15,22 +15,32 @@
     "directory": "lib/channels"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "core-js": "^3.0.1"
+    "core-js": "^3.0.1",
+    "ts-dedent": "^1.1.1",
+    "util-deprecate": "^1.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/channels/src/index.test.ts b/lib/channels/src/index.test.ts
index 0f8b8ceceb9a..0583fb3d5e29 100644
--- a/lib/channels/src/index.test.ts
+++ b/lib/channels/src/index.test.ts
@@ -73,7 +73,7 @@ describe('Channel', () => {
       const eventName = 'event1';
       const listenerInputData = ['string1', 'string2', 'string3'];
       let listenerOutputData: string[] = null;
-      const mockListener: Listener = data => {
+      const mockListener: Listener = (data) => {
         listenerOutputData = data;
       };
 
@@ -116,19 +116,10 @@ describe('Channel', () => {
     });
   });
 
-  describe('method:addPeerListener', () => {
-    it('should add a listener and set ignorePeer to true', () => {
-      const eventName = 'event1';
-
-      channel.addPeerListener(eventName, jest.fn());
-      expect(channel.listeners(eventName)[0].ignorePeer).toBe(true);
-    });
-  });
-
   describe('method:eventNames', () => {
     it('should return a list of all registered events', () => {
       const eventNames = ['event1', 'event2', 'event3'];
-      eventNames.forEach(eventName => channel.addListener(eventName, jest.fn()));
+      eventNames.forEach((eventName) => channel.addListener(eventName, jest.fn()));
 
       expect(channel.eventNames()).toEqual(eventNames);
     });
@@ -140,15 +131,15 @@ describe('Channel', () => {
         { eventName: 'event1', listeners: [jest.fn(), jest.fn(), jest.fn()], listenerCount: 0 },
         { eventName: 'event2', listeners: [jest.fn()], listenerCount: 0 },
       ];
-      events.forEach(event => {
-        event.listeners.forEach(listener => {
+      events.forEach((event) => {
+        event.listeners.forEach((listener) => {
           channel.addListener(event.eventName, listener);
           // eslint-disable-next-line no-plusplus, no-param-reassign
           event.listenerCount++;
         });
       });
 
-      events.forEach(event => {
+      events.forEach((event) => {
         expect(channel.listenerCount(event.eventName)).toBe(event.listenerCount);
       });
     });
@@ -171,7 +162,7 @@ describe('Channel', () => {
         listenerOutputData = data;
       };
 
-      channel.once(eventName, args => mockListener(args));
+      channel.once(eventName, (args) => mockListener(args));
       channel.emit(eventName, listenerInputData);
 
       expect(listenerOutputData).toEqual(listenerInputData);
@@ -193,8 +184,8 @@ describe('Channel', () => {
       const listeners1 = [jest.fn(), jest.fn(), jest.fn()];
       const listeners2 = [jest.fn()];
 
-      listeners1.forEach(fn => channel.addListener(eventName1, fn));
-      listeners2.forEach(fn => channel.addListener(eventName2, fn));
+      listeners1.forEach((fn) => channel.addListener(eventName1, fn));
+      listeners2.forEach((fn) => channel.addListener(eventName2, fn));
       channel.removeAllListeners();
 
       expect(channel.listenerCount(eventName1)).toBe(0);
@@ -205,7 +196,7 @@ describe('Channel', () => {
       const eventName = 'event1';
       const listeners = [jest.fn(), jest.fn(), jest.fn()];
 
-      listeners.forEach(fn => channel.addListener(eventName, fn));
+      listeners.forEach((fn) => channel.addListener(eventName, fn));
       expect(channel.listenerCount(eventName)).toBe(listeners.length);
 
       channel.removeAllListeners(eventName);
@@ -219,9 +210,9 @@ describe('Channel', () => {
       const listenerToBeRemoved = jest.fn();
       const listeners = [jest.fn(), jest.fn()];
       const findListener = (listener: Listener) =>
-        channel.listeners(eventName).find(_listener => _listener === listener);
+        channel.listeners(eventName).find((_listener) => _listener === listener);
 
-      listeners.forEach(fn => channel.addListener(eventName, fn));
+      listeners.forEach((fn) => channel.addListener(eventName, fn));
       channel.addListener(eventName, listenerToBeRemoved);
       expect(findListener(listenerToBeRemoved)).toBe(listenerToBeRemoved);
 
diff --git a/lib/channels/src/index.ts b/lib/channels/src/index.ts
index 43134159031d..dde99806d09e 100644
--- a/lib/channels/src/index.ts
+++ b/lib/channels/src/index.ts
@@ -1,3 +1,6 @@
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+
 export type ChannelHandler = (event: ChannelEvent) => void;
 
 export interface ChannelTransport {
@@ -13,8 +16,6 @@ export interface ChannelEvent {
 
 export interface Listener {
   (...args: any[]): void;
-
-  ignorePeer?: boolean;
 }
 
 interface EventsKeyValue {
@@ -28,9 +29,7 @@ interface ChannelArgs {
 
 const generateRandomId = () => {
   // generates a random 13 character string
-  return Math.random()
-    .toString(16)
-    .slice(2);
+  return Math.random().toString(16).slice(2);
 };
 
 export class Channel {
@@ -48,7 +47,7 @@ export class Channel {
     this.isAsync = async;
     if (transport) {
       this.transport = transport;
-      this.transport.setHandler(event => this.handleEvent(event));
+      this.transport.setHandler((event) => this.handleEvent(event));
     }
   }
 
@@ -61,11 +60,14 @@ export class Channel {
     this.events[eventName].push(listener);
   }
 
-  addPeerListener(eventName: string, listener: Listener) {
-    const peerListener = listener;
-    peerListener.ignorePeer = true;
-    this.addListener(eventName, peerListener);
-  }
+  addPeerListener = deprecate(
+    (eventName: string, listener: Listener) => {
+      this.addListener(eventName, listener);
+    },
+    dedent`
+      channel.addPeerListener is deprecated
+    `
+  );
 
   emit(eventName: string, ...args: any) {
     const event: ChannelEvent = { type: eventName, args, from: this.sender };
@@ -78,7 +80,7 @@ export class Channel {
       if (this.transport) {
         this.transport.send(event, options);
       }
-      this.handleEvent(event, true);
+      this.handleEvent(event);
     };
 
     if (this.isAsync) {
@@ -123,7 +125,7 @@ export class Channel {
   removeListener(eventName: string, listener: Listener) {
     const listeners = this.listeners(eventName);
     if (listeners) {
-      this.events[eventName] = listeners.filter(l => l !== listener);
+      this.events[eventName] = listeners.filter((l) => l !== listener);
     }
   }
 
@@ -135,10 +137,12 @@ export class Channel {
     this.removeListener(eventName, listener);
   }
 
-  private handleEvent(event: ChannelEvent, isPeer = false) {
+  private handleEvent(event: ChannelEvent) {
     const listeners = this.listeners(event.type);
-    if (listeners && (isPeer || event.from !== this.sender)) {
-      listeners.forEach(fn => !(isPeer && fn.ignorePeer) && fn(...event.args));
+    if (listeners && listeners.length) {
+      listeners.forEach((fn) => {
+        fn.apply(event, event.args);
+      });
     }
     this.data[event.type] = event.args;
   }
diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json
index 8180d34b9ce8..4af8e82fac2c 100644
--- a/lib/cli-sb/package.json
+++ b/lib/cli-sb/package.json
@@ -1,7 +1,6 @@
 {
   "name": "sb",
-  "version": "5.3.0-rc.0",
-  "private": true,
+  "version": "6.0.0-beta.21",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -23,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "5.3.0-rc.0"
+    "@storybook/cli": "6.0.0-beta.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json
index 6228b7380eff..1c60be9f096a 100644
--- a/lib/cli-storybook/package.json
+++ b/lib/cli-storybook/package.json
@@ -1,7 +1,6 @@
 {
   "name": "storybook",
-  "version": "5.3.0-rc.0",
-  "private": true,
+  "version": "6.0.0-beta.21",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -24,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "5.3.0-rc.0"
+    "@storybook/cli": "6.0.0-beta.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/lib/cli/.babelrc b/lib/cli/.babelrc
deleted file mode 100644
index 5ece5aea3cc7..000000000000
--- a/lib/cli/.babelrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "node": 8
-      },
-      "useBuiltIns": "usage",
-      "corejs": "3",
-    },]
-  ]
-}
diff --git a/lib/cli/.babelrc.json b/lib/cli/.babelrc.json
new file mode 100644
index 000000000000..9ab56eefbb58
--- /dev/null
+++ b/lib/cli/.babelrc.json
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": 8
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3"
+      }
+    ]
+  ],
+  "ignore": [
+    "./src/generators/**/template",
+    "./src/generators/**/template-csf",
+    "./src/generators/**/template-csf-ts",
+    "./src/generators/**/template-mdx"
+  ]
+}
diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js
deleted file mode 100644
index 444e7f2656fd..000000000000
--- a/lib/cli/bin/generate.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import program from 'commander';
-import chalk from 'chalk';
-import envinfo from 'envinfo';
-import didYouMean from 'didyoumean';
-import pkg from '../package.json';
-import initiate from '../lib/initiate';
-import { codeLog } from '../lib/helpers';
-import add from '../lib/add';
-import { migrate } from '../lib/migrate';
-
-const logger = console;
-
-if (process.argv[1].includes('getstorybook')) {
-  logger.log(chalk.yellow('WARNING: getstorybook is deprecated.'));
-  logger.log(chalk.yellow('The official command to install Storybook from now on is:\n'));
-  codeLog(['sb init']);
-  logger.log();
-  initiate({}, pkg).then(() => process.exit(0));
-} else {
-  program
-    .command('init')
-    .description('Initialize Storybook into your project.')
-    .option('-f --force', 'Force add storybook')
-    .option('-s --skip-install', 'Skip installing deps')
-    .option('-N --use-npm', 'Use npm to install deps')
-    .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
-    .option('-t --type <type>', 'Add Storybook for a specific project type')
-    .option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format')
-    .option('-y --yes', 'Answer yes to all prompts')
-    .action(options => initiate(options, pkg));
-
-  program
-    .command('add <addon>')
-    .description('Add an addon to your Storybook')
-    .option('-N --use-npm', 'Use NPM to build the Storybook server')
-    .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
-    .action((addonName, options) => add(addonName, options));
-
-  program
-    .command('info')
-    .description('Prints debugging information about the local environment')
-    .action(() => {
-      logger.log(chalk.bold('\nEnvironment Info:'));
-      envinfo
-        .run({
-          System: ['OS', 'CPU'],
-          Binaries: ['Node', 'Yarn', 'npm'],
-          Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-          npmPackages: '@storybook/*',
-          npmGlobalPackages: '@storybook/*',
-        })
-        .then(logger.log);
-    });
-
-  program
-    .command('migrate [migration]')
-    .description('Run a storybook codemod migration on your source files')
-    .option('-l --list', 'List available migrations')
-    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js')
-    .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
-    .option(
-      '-n --dry-run',
-      'Dry run: verify the migration exists and show the files to which it will be applied'
-    )
-    .option(
-      '-r --rename <from-to>',
-      'Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"'
-    )
-    .action((migration, { configDir, glob, dryRun, list, rename, parser }) => {
-      migrate(migration, { configDir, glob, dryRun, list, rename, parser, logger }).catch(err => {
-        logger.error(err);
-        process.exit(1);
-      });
-    });
-
-  program.command('*', { noHelp: true }).action(invalidCmd => {
-    logger.error(
-      ' Invalid command: %s.\n See --help for a list of available commands.',
-      invalidCmd
-    );
-    // eslint-disable-next-line
-    const suggestion = didYouMean(invalidCmd, program.commands.map(cmd => cmd._name));
-    if (suggestion) {
-      logger.log(`\n Did you mean ${suggestion}?`);
-    }
-    process.exit(1);
-  });
-
-  program
-    .usage('<command> [options]')
-    .version(pkg.version)
-    .parse(process.argv);
-
-  if (program.rawArgs.length < 3) {
-    program.help();
-  }
-}
diff --git a/lib/cli/bin/index.js b/lib/cli/bin/index.js
index 136e6d73d605..fe4936d7d0b5 100755
--- a/lib/cli/bin/index.js
+++ b/lib/cli/bin/index.js
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('esm')(module)('./generate.js');
+require('../dist/generate.js');
diff --git a/lib/cli/generators/ANGULAR/angular-helpers.js b/lib/cli/generators/ANGULAR/angular-helpers.js
deleted file mode 100644
index e7e6436571aa..000000000000
--- a/lib/cli/generators/ANGULAR/angular-helpers.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as path from 'path';
-import * as fs from 'fs';
-import { readFileAsJson, writeFileAsJson } from '../../lib/helpers';
-
-export function getAngularAppTsConfigPath() {
-  const angularJson = readFileAsJson('angular.json', true);
-  const { defaultProject } = angularJson;
-  const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
-
-  if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
-    return false;
-  }
-  return tsConfigPath;
-}
-
-export function getAngularAppTsConfigJson() {
-  const tsConfigPath = getAngularAppTsConfigPath();
-
-  if (!tsConfigPath) {
-    return false;
-  }
-
-  return readFileAsJson(tsConfigPath, true);
-}
-
-function setStorybookTsconfigExtendsPath(tsconfigJson) {
-  const angularProjectTsConfigPath = getAngularAppTsConfigPath();
-  const newTsconfigJson = { ...tsconfigJson };
-  newTsconfigJson.extends = `../${angularProjectTsConfigPath}`;
-  return newTsconfigJson;
-}
-
-export function editStorybookTsConfig(tsconfigPath) {
-  let tsConfigJson;
-  try {
-    tsConfigJson = readFileAsJson(tsconfigPath);
-  } catch (e) {
-    if (e.name === 'SyntaxError' && e.message.indexOf('Unexpected token /') > -1) {
-      throw new Error(`Comments are disallowed in ${tsconfigPath}`);
-    }
-    throw e;
-  }
-  tsConfigJson = setStorybookTsconfigExtendsPath(tsConfigJson);
-  writeFileAsJson(tsconfigPath, tsConfigJson);
-}
-
-export function isDefaultProjectSet() {
-  const angularJson = readFileAsJson('angular.json', true);
-  return angularJson && !!angularJson.defaultProject;
-}
diff --git a/lib/cli/generators/ANGULAR/index.js b/lib/cli/generators/ANGULAR/index.js
deleted file mode 100644
index 8f9069e8a41d..000000000000
--- a/lib/cli/generators/ANGULAR/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import path from 'path';
-import {
-  isDefaultProjectSet,
-  editStorybookTsConfig,
-  getAngularAppTsConfigJson,
-  getAngularAppTsConfigPath,
-} from './angular-helpers';
-import {
-  retrievePackageJson,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  writeFileAsJson,
-  copyTemplate,
-} from '../../lib/helpers';
-
-async function addDependencies(npmOptions, { storyFormat }) {
-  const packages = [
-    '@storybook/angular',
-    '@storybook/addon-notes',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-}
-
-function editAngularAppTsConfig() {
-  const tsConfigJson = getAngularAppTsConfigJson();
-  const glob = '**/*.stories.ts';
-  if (!tsConfigJson) {
-    return;
-  }
-
-  const { exclude = [] } = tsConfigJson;
-  if (exclude.includes(glob)) {
-    return;
-  }
-
-  tsConfigJson.exclude = [...exclude, glob];
-  writeFileAsJson(getAngularAppTsConfigPath(), tsConfigJson);
-}
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  if (!isDefaultProjectSet()) {
-    throw new Error(
-      'Could not find a default project in your Angular workspace. Add a project and re-run the installation.'
-    );
-  }
-
-  copyTemplate(__dirname, storyFormat);
-
-  await addDependencies(npmOptions, { storyFormat });
-  editAngularAppTsConfig();
-  editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json'));
-};
diff --git a/lib/cli/generators/ANGULAR/template-csf/.storybook/main.js b/lib/cli/generators/ANGULAR/template-csf/.storybook/main.js
deleted file mode 100644
index fd9bed78b544..000000000000
--- a/lib/cli/generators/ANGULAR/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.ts'],
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-  ],
-};
diff --git a/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
deleted file mode 100644
index fb32db9e5f8e..000000000000
--- a/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Welcome } from '@storybook/angular/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => ({
-  component: Welcome,
-  props: {},
-});
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
deleted file mode 100644
index 36a3ccd6e6f3..000000000000
--- a/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button } from '@storybook/angular/demo';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => ({
-  component: Button,
-  props: {
-    Text: 'Hello Button',
-  },
-});
-
-export const Emoji = () => ({
-  component: Button,
-  props: {
-    Text: '😀 😎 👍 💯',
-  },
-});
-
-Emoji.story = {
-  parameters: { notes: 'My notes on a button with emojis' },
-};
-
-export const WithSomeEmojiAndAction = () => ({
-  component: Button,
-  props: {
-    Text: '😀 😎 👍 💯',
-    onClick: action('This was clicked OMG'),
-  },
-});
-
-WithSomeEmojiAndAction.story = {
-  name: 'with some emoji and action',
-  parameters: { notes: 'My notes on a button with emojis' },
-};
-
-export const ButtonWithLinkToAnotherStory = () => ({
-  component: Button,
-  props: {
-    Text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
-  },
-});
-
-ButtonWithLinkToAnotherStory.story = {
-  name: 'button with link to another story',
-};
diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/main.js b/lib/cli/generators/ANGULAR/template-mdx/.storybook/main.js
deleted file mode 100644
index 6df0a6fe46b5..000000000000
--- a/lib/cli/generators/ANGULAR/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.(ts|mdx)'],
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-notes/register',
-  ],
-  presets: ['@storybook/addon-docs/preset'],
-};
diff --git a/lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx
deleted file mode 100644
index 2bfaa57e0afd..000000000000
--- a/lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button } from '@storybook/angular/demo';
-
-<Meta title="Button" component={Button} />
-
-# Button
-
-This `Button` document defines a few stories:
-
-<Story name="text">
-  {{
-    component: Button,
-    props: {
-      text: 'Hello Button',
-    },
-  }}
-</Story>
-
-<Story name="emoji">
-  {{
-    component: Button,
-    props: {
-      text: '😀 😎 👍 💯',
-    },
-  }}
-</Story>
-
-<Story name="with some emoji and action">
-  {{
-    component: Button,
-    props: {
-      text: '😀 😎 👍 💯',
-      onClick: action('This was clicked OMG'),
-    },
-  }}
-</Story>
-
-<Story name="button with link to another story">
-  {{
-    component: Button,
-    props: {
-      text: 'Go to Welcome Story',
-      onClick: linkTo('Welcome'),
-    },
-  }}
-</Story>
diff --git a/lib/cli/generators/EMBER/index.js b/lib/cli/generators/EMBER/index.js
deleted file mode 100644
index 0b5ff91736e1..000000000000
--- a/lib/cli/generators/EMBER/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [storybookVersion, linksVersion, actionsVersion, addonsVersion] = await getVersions(
-    npmOptions,
-    '@storybook/ember',
-    '@storybook/addon-links',
-    '@storybook/addon-actions',
-    '@storybook/addons'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = {
-    ...packageJson.scripts,
-    ...{
-      storybook: 'start-storybook -p 6006 -s dist',
-      'build-storybook': 'build-storybook -s dist',
-    },
-  };
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/ember@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/EMBER/template-csf/.storybook/main.js b/lib/cli/generators/EMBER/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/EMBER/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index b6dc16dc3be1..000000000000
--- a/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import hbs from 'htmlbars-inline-precompile';
-import { linkTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Welcome',
-};
-
-export const ToStorybook = () => ({
-  template: hbs`
-    <div>
-      <h3> Welcome to Storybook! </h3>
-      <button {{action onClick}}> Checkout the button example </button>
-    </div>
-  `,
-  context: {
-    onClick: linkTo('Button'),
-  },
-});
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index c8cd39a34252..000000000000
--- a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import hbs from 'htmlbars-inline-precompile';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Button',
-};
-
-export const Text = () => ({
-  template: hbs`<button {{action onClick}}>Hello Button</button>`,
-  context: {
-    onClick: action('clicked'),
-  },
-});
-
-export const Emoji = () => ({
-  template: hbs`
-    <button {{action onClick}}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </button>
-  `,
-  context: {
-    onClick: action('clicked'),
-  },
-});
diff --git a/lib/cli/generators/HTML/index.js b/lib/cli/generators/HTML/index.js
deleted file mode 100755
index d1ea92f5c9fc..000000000000
--- a/lib/cli/generators/HTML/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  retrievePackageJson,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = ['@storybook/html'];
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/HTML/template-csf/.storybook/main.js b/lib/cli/generators/HTML/template-csf/.storybook/main.js
deleted file mode 100644
index 77857c48de3f..000000000000
--- a/lib/cli/generators/HTML/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-};
diff --git a/lib/cli/generators/HTML/template-csf/stories/index.stories.js b/lib/cli/generators/HTML/template-csf/stories/index.stories.js
deleted file mode 100644
index 7d4bd3351c80..000000000000
--- a/lib/cli/generators/HTML/template-csf/stories/index.stories.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  title: 'Demo',
-};
-
-export const Heading = () => '<h1>Hello World</h1>';
-
-export const Button = () => {
-  const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.innerText = 'Hello Button';
-  btn.addEventListener('click', e => console.log(e));
-  return btn;
-};
diff --git a/lib/cli/generators/HTML/template-mdx/.storybook/main.js b/lib/cli/generators/HTML/template-mdx/.storybook/main.js
deleted file mode 100644
index 5e26231adcca..000000000000
--- a/lib/cli/generators/HTML/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.(js|mdx)'],
-  presets: ['@storybook/addon-docs/preset'],
-};
diff --git a/lib/cli/generators/MARKO/index.js b/lib/cli/generators/MARKO/index.js
deleted file mode 100644
index 39659064ee80..000000000000
--- a/lib/cli/generators/MARKO/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [storybookVersion, addonActionVersion, addonKnobsVersion] = await getVersions(
-    npmOptions,
-    '@storybook/marko',
-    '@storybook/addon-actions',
-    '@storybook/addon-knobs'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/marko@${storybookVersion}`,
-    `@storybook/addon-actions@${addonActionVersion}`,
-    `@storybook/addon-knobs@${addonKnobsVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/MARKO/template-csf/.storybook/main.js b/lib/cli/generators/MARKO/template-csf/.storybook/main.js
deleted file mode 100644
index d8c8832bf866..000000000000
--- a/lib/cli/generators/MARKO/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-knobs/register'],
-};
diff --git a/lib/cli/generators/METEOR/index.js b/lib/cli/generators/METEOR/index.js
deleted file mode 100644
index d4af8c5ddbbe..000000000000
--- a/lib/cli/generators/METEOR/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import fs from 'fs';
-import JSON5 from 'json5';
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [
-    storybookVersion,
-    actionsVersion,
-    linksVersion,
-    addonsVersion,
-    reactVersion,
-    reactDomVersion,
-    presetEnvVersion,
-    presetReactVersion,
-  ] = await getVersions(
-    npmOptions,
-    '@storybook/react',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-    'react',
-    'react-dom',
-    '@babel/preset-env',
-    '@babel/preset-react'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.dependencies = packageJson.dependencies || {};
-
-  const devDependencies = [
-    `@storybook/react@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-  ];
-
-  // create or update .babelrc
-  let babelrc = null;
-  if (fs.existsSync('.babelrc')) {
-    const babelrcContent = fs.readFileSync('.babelrc', 'utf8');
-    babelrc = JSON5.parse(babelrcContent);
-    babelrc.plugins = babelrc.plugins || [];
-  } else {
-    babelrc = {
-      presets: [
-        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
-        '@babel/preset-react',
-      ],
-    };
-
-    devDependencies.push(`@babel/preset-env@${presetEnvVersion}`);
-    devDependencies.push(`@babel/preset-react@${presetReactVersion}`);
-  }
-
-  fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
-
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  // add react packages.
-  const dependencies = [];
-  if (!packageJson.dependencies.react) {
-    dependencies.push(`react@${reactVersion}`);
-  }
-  if (!packageJson.dependencies['react-dom']) {
-    dependencies.push(`react-dom@${reactDomVersion}`);
-  }
-
-  if (dependencies.length > 0) {
-    installDependencies(
-      { ...npmOptions, packageJson, installAsDevDependencies: false },
-      dependencies
-    );
-  }
-
-  installDependencies({ ...npmOptions, packageJson }, [...devDependencies, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/METEOR/template-csf/.storybook/main.js b/lib/cli/generators/METEOR/template-csf/.storybook/main.js
deleted file mode 100644
index d8c8832bf866..000000000000
--- a/lib/cli/generators/METEOR/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-knobs/register'],
-};
diff --git a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index c76f45f3b4be..000000000000
--- a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/MITHRIL/index.js b/lib/cli/generators/MITHRIL/index.js
deleted file mode 100644
index 421af79de4e1..000000000000
--- a/lib/cli/generators/MITHRIL/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
-    npmOptions,
-    '@storybook/mithril',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/mithril@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/MITHRIL/template-csf/.storybook/main.js b/lib/cli/generators/MITHRIL/template-csf/.storybook/main.js
deleted file mode 100644
index d8c8832bf866..000000000000
--- a/lib/cli/generators/MITHRIL/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-knobs/register'],
-};
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index 3805e37c73cf..000000000000
--- a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import m from 'mithril';
-import { linkTo } from '@storybook/addon-links';
-import Welcome from './Welcome';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => ({
-  view: () => m(Welcome, { showApp: linkTo('Button') }),
-});
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index c6d192dc23f1..000000000000
--- a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import m from 'mithril';
-import { action } from '@storybook/addon-actions';
-import Button from './Button';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => ({
-  view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
-});
-
-export const Emoji = () => ({
-  view: () =>
-    m(
-      Button,
-      { onclick: action('clicked') },
-      m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
-    ),
-});
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/Button.js b/lib/cli/generators/MITHRIL/template-csf/stories/Button.js
deleted file mode 100644
index 08d3f45a6175..000000000000
--- a/lib/cli/generators/MITHRIL/template-csf/stories/Button.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @jsx m */
-
-import m from 'mithril';
-
-const style = {
-  border: '1px solid #eee',
-  borderRadius: 3,
-  backgroundColor: '#FFFFFF',
-  cursor: 'pointer',
-  fontSize: 15,
-  padding: '3px 10px',
-  margin: 10,
-};
-
-const Button = {
-  view: vnode => (
-    <button type="button" style={style} {...vnode.attrs}>
-      {vnode.children}
-    </button>
-  ),
-};
-
-export default Button;
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js b/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js
deleted file mode 100644
index 2c0f425a5f8c..000000000000
--- a/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/** @jsx m */
-
-import m from 'mithril';
-import { linkTo, hrefTo } from '@storybook/addon-links';
-
-const Main = {
-  view: vnode => (
-    <article
-      style={{
-        padding: 15,
-        lineHeight: 1.4,
-        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-        backgroundColor: '#ffffff',
-      }}
-    >
-      {vnode.children}
-    </article>
-  ),
-};
-
-const Title = {
-  view: vnode => <h1>{vnode.children}</h1>,
-};
-
-const Note = {
-  view: vnode => (
-    <p
-      style={{
-        opacity: 0.5,
-      }}
-    >
-      {vnode.children}
-    </p>
-  ),
-};
-
-const InlineCode = {
-  view: vnode => (
-    <code
-      style={{
-        fontSize: 15,
-        fontWeight: 600,
-        padding: '2px 5px',
-        border: '1px solid #eae9e9',
-        borderRadius: 4,
-        backgroundColor: '#f3f2f2',
-        color: '#3a3a3a',
-      }}
-    >
-      {vnode.children}
-    </code>
-  ),
-};
-
-const Link = {
-  view: vnode => (
-    <a
-      style={{
-        color: '#1474f3',
-        textDecoration: 'none',
-        borderBottom: '1px solid #1474f3',
-        paddingBottom: 2,
-      }}
-      {...vnode.attrs}
-    >
-      {vnode.children}
-    </a>
-  ),
-};
-
-const NavButton = {
-  view: vnode => (
-    <button
-      type="button"
-      style={{
-        borderTop: 'none',
-        borderRight: 'none',
-        borderLeft: 'none',
-        backgroundColor: 'transparent',
-        padding: 0,
-        cursor: 'pointer',
-        font: 'inherit',
-      }}
-      {...vnode.attrs}
-    >
-      {vnode.children}
-    </button>
-  ),
-};
-
-const StoryLink = {
-  oninit: vnode => {
-    // eslint-disable-next-line no-param-reassign
-    vnode.state.href = '/';
-    // eslint-disable-next-line no-param-reassign
-    vnode.state.onclick = () => {
-      linkTo(vnode.attrs.kind, vnode.attrs.story)();
-      return false;
-    };
-    StoryLink.updateHref(vnode);
-  },
-  updateHref: async vnode => {
-    const href = await hrefTo(vnode.attrs.kind, vnode.attrs.story);
-    // eslint-disable-next-line no-param-reassign
-    vnode.state.href = href;
-    m.redraw();
-  },
-  view: vnode => (
-    <a
-      href={vnode.state.href}
-      style={{
-        color: '#1474f3',
-        textDecoration: 'none',
-        borderBottom: '1px solid #1474f3',
-        paddingBottom: 2,
-      }}
-      onClick={vnode.state.onclick}
-    >
-      {vnode.children}
-    </a>
-  ),
-};
-
-const Welcome = {
-  view: vnode => (
-    <Main>
-      <Title>Welcome to storybook</Title>
-      <p>This is a UI component dev environment for your app.</p>
-      <p>
-        We've added some basic stories inside the <InlineCode>src/stories</InlineCode> 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&nbsp;
-        {vnode.attrs.showApp ? (
-          <NavButton onclick={vnode.attrs.showApp}>stories</NavButton>
-        ) : (
-          <StoryLink kind={vnode.attrs.showKind} story={vnode.attrs.showStory}>
-            stories
-          </StoryLink>
-        )}
-        &nbsp;for a component called <InlineCode>Button</InlineCode>.
-      </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 <InlineCode>Button</InlineCode> stories located at&nbsp;
-        <InlineCode>src/stories/index.js</InlineCode>
-        .)
-      </p>
-      <p>
-        Usually we create stories with smaller UI components in the app.
-        <br />
-        Have a look at the&nbsp;
-        <Link
-          href="https://storybook.js.org/basics/writing-stories"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Writing Stories
-        </Link>
-        &nbsp;section in our documentation.
-      </p>
-      <Note>
-        <b>NOTE:</b>
-        <br />
-        Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
-        loaders and plugins you are using in this project.
-      </Note>
-    </Main>
-  ),
-};
-
-export default Welcome;
diff --git a/lib/cli/generators/POLYMER/index.js b/lib/cli/generators/POLYMER/index.js
deleted file mode 100755
index ea981c13c694..000000000000
--- a/lib/cli/generators/POLYMER/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [storybookVersion, polymerLoaderVarion] = await getVersions(
-    npmOptions,
-    '@storybook/polymer',
-    'polymer-webpack-loader'
-  );
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const devDependencies = [`@storybook/polymer@${storybookVersion}`];
-  if (
-    !packageJson.dependencies['polymer-webpack-loader'] &&
-    !packageJson.devDependencies['polymer-webpack-loader']
-  ) {
-    devDependencies.push(`polymer-webpack-loader@${polymerLoaderVarion}`);
-  }
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...devDependencies, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/POLYMER/template-csf/.storybook/main.js b/lib/cli/generators/POLYMER/template-csf/.storybook/main.js
deleted file mode 100644
index c0c5891e74c7..000000000000
--- a/lib/cli/generators/POLYMER/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.js'],
-};
diff --git a/lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js b/lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js
deleted file mode 100644
index 88f773136073..000000000000
--- a/lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js
+++ /dev/null
@@ -1 +0,0 @@
-// TODO: add demo stories
diff --git a/lib/cli/generators/PREACT/index.js b/lib/cli/generators/PREACT/index.js
deleted file mode 100644
index 9bcf77743f9d..000000000000
--- a/lib/cli/generators/PREACT/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
-    npmOptions,
-    '@storybook/preact',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/preact@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/PREACT/template-csf/.storybook/main.js b/lib/cli/generators/PREACT/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/PREACT/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index 94e96aca4bc2..000000000000
--- a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index e4070f9c465a..000000000000
--- a/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-import { action } from '@storybook/addon-actions';
-
-import Button from './Button';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
diff --git a/lib/cli/generators/PREACT/template-csf/stories/Welcome.js b/lib/cli/generators/PREACT/template-csf/stories/Welcome.js
deleted file mode 100644
index 3a8e289817f4..000000000000
--- a/lib/cli/generators/PREACT/template-csf/stories/Welcome.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-
-const Main = props => (
-  <article
-    {...props}
-    style={{
-      padding: 15,
-      lineHeight: 1.4,
-      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-      backgroundColor: '#ffffff',
-    }}
-  />
-);
-
-// eslint-disable-next-line react/prop-types
-const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
-
-const Note = props => (
-  <p
-    {...props}
-    style={{
-      opacity: 0.5,
-    }}
-  />
-);
-
-const InlineCode = props => (
-  <code
-    {...props}
-    style={{
-      fontSize: 15,
-      fontWeight: 600,
-      padding: '2px 5px',
-      border: '1px solid #eae9e9',
-      borderRadius: 4,
-      backgroundColor: '#f3f2f2',
-      color: '#3a3a3a',
-    }}
-  />
-);
-
-// eslint-disable-next-line react/prop-types
-const Link = ({ children, href, ...props }) => (
-  <a
-    href={href}
-    {...props}
-    style={{
-      color: '#1474f3',
-      textDecoration: 'none',
-      borderBottom: '1px solid #1474f3',
-      paddingBottom: 2,
-    }}
-  >
-    {children}
-  </a>
-);
-
-// eslint-disable-next-line react/prop-types
-const NavButton = ({ children, ...props }) => (
-  <button
-    {...props}
-    type="button"
-    style={{
-      color: '#1474f3',
-      textDecoration: 'none',
-      borderBottom: '1px solid #1474f3',
-      paddingBottom: 2,
-      borderTop: 'none',
-      borderRight: 'none',
-      borderLeft: 'none',
-      backgroundColor: 'transparent',
-      padding: 0,
-      cursor: 'pointer',
-      font: 'inherit',
-    }}
-  >
-    {children}
-  </button>
-);
-
-/* eslint-disable-next-line react/prop-types */
-const Welcome = ({ showApp }) => (
-  <Main>
-    <Title>Welcome to storybook</Title>
-    <p>This is a UI component dev environment for your app.</p>
-    <p>
-      We've added some basic stories inside the <InlineCode>src/stories</InlineCode> 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 <NavButton onClick={showApp}>stories</NavButton> for a component called&nbsp;
-      <InlineCode>Button</InlineCode>.
-    </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 <InlineCode>Button</InlineCode> stories located at&nbsp;
-      <InlineCode>src/stories/index.js</InlineCode>
-      .)
-    </p>
-    <p>
-      Usually we create stories with smaller UI components in the app.
-      <br />
-      Have a look at the&nbsp;
-      <Link
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Writing Stories
-      </Link>
-      &nbsp;section in our documentation.
-    </p>
-    <Note>
-      <b>NOTE:</b>
-      <br />
-      Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
-      loaders and plugins you are using in this project.
-    </Note>
-  </Main>
-);
-
-export { Welcome as default };
diff --git a/lib/cli/generators/RAX/index.js b/lib/cli/generators/RAX/index.js
deleted file mode 100644
index 120a495c7594..000000000000
--- a/lib/cli/generators/RAX/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [
-    storybookVersion,
-    actionsVersion,
-    linksVersion,
-    addonsVersion,
-    latestRaxVersion,
-  ] = await getVersions(
-    npmOptions,
-    '@storybook/rax',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-    'rax'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  const raxVersion = packageJson.dependencies.rax || latestRaxVersion;
-
-  // in case Rax project is not detected, `rax` package is not available either
-  packageJson.dependencies.rax = packageJson.dependencies.rax || raxVersion;
-
-  // these packages are required for Welcome story
-  packageJson.dependencies['rax-button'] = packageJson.dependencies['rax-button'] || raxVersion;
-  packageJson.dependencies['rax-image'] = packageJson.dependencies['rax-image'] || raxVersion;
-  packageJson.dependencies['rax-link'] = packageJson.dependencies['rax-link'] || raxVersion;
-  packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
-  packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/rax@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/RAX/template-csf/.storybook/main.js b/lib/cli/generators/RAX/template-csf/.storybook/main.js
deleted file mode 100644
index 77857c48de3f..000000000000
--- a/lib/cli/generators/RAX/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-};
diff --git a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index 36caa134ee44..000000000000
--- a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createElement } from 'rax';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button', 'with text')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js b/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index a107246db315..000000000000
--- a/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createElement } from 'rax';
-import { action } from '@storybook/addon-actions';
-
-import Text from 'rax-text';
-
-export default {
-  title: 'Button',
-};
-
-export const text = () => (
-  <button onPress={action('clicked')} type="button">
-    Hello button
-  </button>
-);
-
-export const Emoji = () => (
-  <button onPress={action('clicked')} type="button">
-    <Text role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </Text>
-  </button>
-);
diff --git a/lib/cli/generators/RAX/template-csf/stories/Welcome.js b/lib/cli/generators/RAX/template-csf/stories/Welcome.js
deleted file mode 100644
index 2c590d205b9a..000000000000
--- a/lib/cli/generators/RAX/template-csf/stories/Welcome.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/* eslint-disable react/prop-types, jsx-a11y/anchor-is-valid */
-import { createElement } from 'rax';
-import View from 'rax-view';
-import Text from 'rax-text';
-import Image from 'rax-image';
-import Link from 'rax-link';
-
-const Main = ({ children, ...props }) => (
-  <View
-    {...props}
-    style={{
-      margin: 15,
-      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-    }}
-  >
-    {children}
-  </View>
-);
-
-const P = ({ children, ...props }) => (
-  <View {...props} style={{ marginBottom: 10 }}>
-    <Text style={{ fontSize: 12 }}>{children}</Text>
-  </View>
-);
-
-const Title = ({ children, ...props }) => (
-  <Text {...props} style={{ fontSize: 40, fontWeight: 'bold' }}>
-    {children}
-  </Text>
-);
-
-const Note = ({ children, ...props }) => (
-  <View
-    {...props}
-    style={{
-      opacity: 0.5,
-    }}
-  >
-    {children}
-  </View>
-);
-
-const InlineCode = ({ children, ...props }) => (
-  <Text
-    {...props}
-    style={{
-      fontFamily: 'monospace',
-      fontSize: 12,
-      padding: '2px 5px',
-      border: '1px solid #eae9e9',
-      borderRadius: 4,
-      backgroundColor: '#f3f2f2',
-      color: '#3a3a3a',
-    }}
-  >
-    {children}
-  </Text>
-);
-
-const Welcome = ({ showApp }) => (
-  <Main>
-    <Title>Welcome to storybook for Rax</Title>
-    <Image
-      source={{
-        uri: './rax-logo.png',
-      }}
-      fallbackSource={{
-        uri:
-          'https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png',
-      }}
-      style={{
-        width: 100,
-        height: 100,
-        margin: '0 auto',
-      }}
-      resizeMode="cover"
-    />
-
-    <P>This is a UI component dev environment for your Rax app.</P>
-    <P>
-      We've added some basic stories inside the <InlineCode>src/stories</InlineCode> directory. A
-      story is a single state of one or more UI components. You can have as many stories as you
-      want. (Basically a story is like a visual test case.)
-    </P>
-    <P>
-      See these sample&nbsp;
-      <Link href="#" onPress={showApp} rel="noopener noreferrer">
-        stories
-      </Link>
-      &nbsp;for a component called <InlineCode>Button</InlineCode>.
-    </P>
-    <P>
-      Just like that, you can add your own components as stories. You can also edit those components
-      and see changes right away. (Try editing the <InlineCode>Button</InlineCode> stories located
-      at <InlineCode>src/stories/index.js</InlineCode>
-      .)
-    </P>
-    <P>
-      Usually we create stories with smaller UI components in the app. Have a look at the&nbsp;
-      <Link
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Writing Stories
-      </Link>
-      &nbsp;section in our documentation.
-    </P>
-    <Note>
-      <P style={{ fontWeight: 'bold' }}>NOTE:</P>
-      <P>
-        Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
-        loaders and plugins you are using in this project.
-      </P>
-    </Note>
-  </Main>
-);
-
-export default Welcome;
diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js
deleted file mode 100644
index 7e23ed50f1d7..000000000000
--- a/lib/cli/generators/REACT/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-  getVersionedPackages,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = [
-    '@storybook/react',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/REACT/template-csf/.storybook/main.js b/lib/cli/generators/REACT/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/REACT/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index c76f45f3b4be..000000000000
--- a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index 6bcfa2146627..000000000000
--- a/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
diff --git a/lib/cli/generators/REACT/template-mdx/.storybook/main.js b/lib/cli/generators/REACT/template-mdx/.storybook/main.js
deleted file mode 100644
index a54a6695456c..000000000000
--- a/lib/cli/generators/REACT/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: [
-    {
-      name: '@storybook/addon-docs/preset',
-      options: { configureJSX: true },
-    },
-  ],
-};
diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js
deleted file mode 100644
index 0bf6caf4c0af..000000000000
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import shell from 'shelljs';
-import chalk from 'chalk';
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  paddedLog,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, installServer, { storyFormat = 'csf' }) => {
-  const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
-    npmOptions,
-    '@storybook/react-native',
-    '@storybook/addons',
-    '@storybook/addon-actions',
-    '@storybook/addon-links'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  // set correct project name on entry files if possible
-  const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;
-
-  // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
-  if (dirname) {
-    const projectName = dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
-
-    if (projectName) {
-      shell.sed('-i', '%APP_NAME%', projectName, 'storybook/storybook.js');
-    } else {
-      paddedLog(
-        chalk.red(
-          'ERR: Could not determine project name, to fix: https://github.com/storybookjs/storybook/issues/1277'
-        )
-      );
-    }
-  }
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  const devDependencies = [
-    `@storybook/react-native@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-  ];
-
-  if (installServer) {
-    devDependencies.push(`@storybook/react-native-server@${storybookVersion}`);
-  }
-
-  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    if (packageJson.dependencies.react) {
-      const reactVersion = packageJson.dependencies.react;
-      devDependencies.push(`react-dom@${reactVersion}`);
-    }
-  }
-
-  if (installServer) {
-    packageJson.scripts = packageJson.scripts || {};
-    packageJson.scripts.storybook = 'start-storybook -p 7007';
-  }
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...devDependencies, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js
deleted file mode 100644
index 3c4c405180da..000000000000
--- a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableNativeFeedback } from 'react-native';
-
-export default function Button({ onPress, children }) {
-  return <TouchableNativeFeedback onPress={onPress}>{children}</TouchableNativeFeedback>;
-}
-
-Button.defaultProps = {
-  children: null,
-  onPress: () => {},
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js
deleted file mode 100644
index 37c8437e72e4..000000000000
--- a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableHighlight } from 'react-native';
-
-export default function Button({ onPress, children }) {
-  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
-}
-
-Button.defaultProps = {
-  children: null,
-  onPress: () => {},
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js
deleted file mode 100644
index 29732b27ab24..000000000000
--- a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import style from './style';
-
-export default function CenterView({ children }) {
-  return <View style={style.main}>{children}</View>;
-}
-
-CenterView.defaultProps = {
-  children: null,
-};
-
-CenterView.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js
deleted file mode 100644
index 119401fc78e6..000000000000
--- a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
-
-export default class Welcome extends React.Component {
-  styles = {
-    wrapper: {
-      flex: 1,
-      padding: 24,
-      justifyContent: 'center',
-    },
-    header: {
-      fontSize: 18,
-      marginBottom: 18,
-    },
-    content: {
-      fontSize: 12,
-      marginBottom: 10,
-      lineHeight: 18,
-    },
-  };
-
-  showApp = event => {
-    const { showApp } = this.props;
-    event.preventDefault();
-
-    if (showApp) {
-      showApp();
-    }
-  };
-
-  render() {
-    return (
-      <View style={this.styles.wrapper}>
-        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
-        <Text style={this.styles.content}>
-          This is a UI Component development environment for your React Native app. Here you can
-          display and interact with your UI components as stories. A story is a single state of one
-          or more UI components. You can have as many stories as you want. In other words a story is
-          like a visual test case.
-        </Text>
-        <Text style={this.styles.content}>
-          We have added some stories inside the "storybook/stories" directory for examples. Try
-          editing the "storybook/stories/Welcome.js" file to edit this message.
-        </Text>
-      </View>
-    );
-  }
-}
-
-Welcome.defaultProps = {
-  showApp: null,
-};
-
-Welcome.propTypes = {
-  showApp: PropTypes.func,
-};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/index.js
deleted file mode 100644
index 63f1a6266717..000000000000
--- a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-
-import { storiesOf } from '@storybook/react-native';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Button from './Button';
-import CenterView from './CenterView';
-import Welcome from './Welcome';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
-  .add('with text', () => (
-    <Button onPress={action('clicked-text')}>
-      <Text>Hello Button</Text>
-    </Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onPress={action('clicked-emoji')}>
-      <Text>😀 😎 👍 💯</Text>
-    </Button>
-  ));
diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js
deleted file mode 100644
index f13581d1b142..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-import semver from 'semver';
-import {
-  retrievePackageJson,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = [
-    '@storybook/react',
-    '@storybook/preset-create-react-app',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 9009';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  if (fs.existsSync(path.resolve('./public'))) {
-    // has a public folder and add support to it.
-    packageJson.scripts.storybook += ' -s public';
-    packageJson.scripts['build-storybook'] += ' -s public';
-  }
-
-  writePackageJson(packageJson);
-
-  // When working with `create-react-app@>=2.0.0`, we know `babel-loader` is installed.
-  let babelDependencies = [];
-  const reactScriptsDep =
-    packageJson.dependencies['react-scripts'] || packageJson.devDependencies['react-scripts'];
-
-  if (reactScriptsDep && semver.gtr('2.0.0', reactScriptsDep)) {
-    babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-  }
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js
deleted file mode 100644
index e7ecf26a2e19..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.(ts|tsx|js|jsx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: ['@storybook/preset-create-react-app'],
-};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/main.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/main.js
deleted file mode 100644
index 42e0f55b0b79..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: ['@storybook/preset-create-react-app'],
-};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
deleted file mode 100644
index c76f45f3b4be..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
deleted file mode 100644
index 6bcfa2146627..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js
deleted file mode 100644
index edbb63e2de40..000000000000
--- a/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: [
-    '@storybook/preset-create-react-app',
-    {
-      name: '@storybook/addon-docs/preset',
-      options: {
-        configureJSX: true,
-      },
-    },
-  ],
-};
diff --git a/lib/cli/generators/RIOT/index.js b/lib/cli/generators/RIOT/index.js
deleted file mode 100644
index 728914d0db98..000000000000
--- a/lib/cli/generators/RIOT/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [
-    storybookVersion,
-    actionsVersion,
-    linksVersion,
-    addonsVersion,
-    tagLoaderVersion,
-  ] = await getVersions(
-    npmOptions,
-    '@storybook/riot',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-    'riot-tag-loader'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  const dependencies = [
-    `@storybook/riot@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-  ];
-  if (
-    !packageJson.devDependencies['riot-tag-loader'] &&
-    !packageJson.dependencies['riot-tag-loader']
-  )
-    dependencies.push(`riot-tag-loader@${tagLoaderVersion}`);
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...dependencies, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/RIOT/template-csf/.storybook/main.js b/lib/cli/generators/RIOT/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/RIOT/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index 87952621919c..000000000000
--- a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from '@storybook/riot';
-import { linkTo } from '@storybook/addon-links';
-
-import './Welcome.tag';
-
-export default {
-  title: 'Welcome',
-};
-
-export const ToStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index 211af792c39b..000000000000
--- a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { mount } from '@storybook/riot';
-
-// eslint-disable-next-line
-import MyButtonRaw from 'raw-loader!./MyButton.tag';
-import './MyButton.tag';
-
-export default {
-  title: 'Button',
-};
-
-export const Text = () => ({
-  tags: ['<my-button>Hello Button</my-button>'],
-});
-
-export const Scenario = () => ({
-  tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
-  template: '<MyButton>With scenario</MyButton>',
-});
-
-export const Emoji = () => ({
-  tags: ['<my-button>😀 😎 👍 💯</my-button>'],
-});
diff --git a/lib/cli/generators/RIOT/template-csf/stories/MyButton.tag b/lib/cli/generators/RIOT/template-csf/stories/MyButton.tag
deleted file mode 100644
index c2ce1c5892ce..000000000000
--- a/lib/cli/generators/RIOT/template-csf/stories/MyButton.tag
+++ /dev/null
@@ -1,24 +0,0 @@
-<my-button>
-  <button class="buttonStyles" onClick="{ onClick }">
-    <yield/>
-  </button>
-
-  <style>
-    .buttonStyles {
-      border: solid 1px #eee;
-      border-radius: 3px;
-      background-color: #FFFFFF;
-      cursor: pointer;
-      font-size: 15px;
-      padding: 3px 10px;
-      margin: 10px;
-    }
-  </style>
-
-  <script>
-    onClick(e){
-      return (this.opts.callback ||
-        (() => { console.log('clicked') })).bind(this, e)
-    }
-  </script>
-</my-button>
diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js
deleted file mode 100644
index 2adea9a7c23a..000000000000
--- a/lib/cli/generators/SFC_VUE/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  retrievePackageJson,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = [
-    '@storybook/vue',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/SFC_VUE/template-csf/.storybook/main.js b/lib/cli/generators/SFC_VUE/template-csf/.storybook/main.js
deleted file mode 100644
index 6c7d25e7583f..000000000000
--- a/lib/cli/generators/SFC_VUE/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
deleted file mode 100644
index cb6e01906951..000000000000
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome.vue';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => ({
-  components: { Welcome },
-  template: '<welcome :showApp="action" />',
-  methods: { action: linkTo('Button') },
-});
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
deleted file mode 100644
index c659ea0fb6a3..000000000000
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import MyButton from './MyButton.vue';
-
-export default {
-  title: 'Button',
-  component: MyButton,
-};
-
-export const Text = () => ({
-  components: { MyButton },
-  template: '<my-button @click="action">Hello Button</my-button>',
-  methods: { action: action('clicked') },
-});
-
-export const Jsx = () => ({
-  components: { MyButton },
-  render() {
-    return <my-button onClick={this.action}>With JSX</my-button>;
-  },
-  methods: { action: linkTo('clicked') },
-});
-
-export const Emoji = () => ({
-  components: { MyButton },
-  template:
-    '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
-  methods: { action: action('clicked') },
-});
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
deleted file mode 100644
index a7bbd1c4fabe..000000000000
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="main">
-    <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
-      <br />
-      <code class="code">src/stories</code>
-      <br />
-      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
-      <br />
-      <a class="link" @click="onClick" role="button" tabIndex="0">stories</a>
-      <br />
-      for a component called
-      <br />
-      <code class="code">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 class="code">Button</code> component
-      located at <code class="code">src/stories/Button.js</code>.)
-    </p>
-    <p>
-      This is just one thing you can do with Storybook.
-      <br />
-      Have a look at the
-      <br />
-      <a
-        class="link"
-        href="https://github.com/storybookjs/storybook"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Storybook
-      </a>
-      <br />
-      repo for more information.
-    </p>
-    <p class="note">
-      <b>NOTE:</b>
-      <br />
-      Have a look at the
-      <br />
-      <code class="code">.storybook/webpack.config.js</code>
-      <br />
-      to add webpack
-      loaders and plugins you are using in this project.
-    </p>
-  </div>
-</template>
-
-<script>
-  const log = () => console.log('Welcome to storybook!')
-
-  export default {
-    name: 'welcome',
-
-    props: {
-      showApp: {
-        type: Function,
-        default: log
-      }
-    },
-
-    methods: {
-      onClick (event) {
-        event.preventDefault()
-        this.showApp()
-      }
-    }
-  }
-</script>
-
-<style>
-  .main {
-    padding: 15px;
-    line-height: 1.4;
-    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-    background-color: #ffffff;
-  }
-
-  .logo {
-    width: 200px;
-  }
-
-  .link {
-    color: #1474f3;
-    text-decoration: none;
-    border-bottom: 1px solid #1474f3;
-    padding-bottom: 2px;
-  }
-
-  .code {
-    font-size: 15px;
-    font-weight: 600;
-    padding: 2px 5px;
-    border: 1px solid #eae9e9;
-    border-radius: 4px;
-    background-color: #f3f2f2;
-    color: #3a3a3a;
-  }
-
-  .note {
-    opacity: 0.5;
-  }
-</style>
diff --git a/lib/cli/generators/SFC_VUE/template-mdx/.storybook/main.js b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/main.js
deleted file mode 100644
index 2f8d2982005f..000000000000
--- a/lib/cli/generators/SFC_VUE/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: ['@storybook/addon-docs/preset'],
-};
diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
deleted file mode 100644
index a7bbd1c4fabe..000000000000
--- a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="main">
-    <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
-      <br />
-      <code class="code">src/stories</code>
-      <br />
-      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
-      <br />
-      <a class="link" @click="onClick" role="button" tabIndex="0">stories</a>
-      <br />
-      for a component called
-      <br />
-      <code class="code">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 class="code">Button</code> component
-      located at <code class="code">src/stories/Button.js</code>.)
-    </p>
-    <p>
-      This is just one thing you can do with Storybook.
-      <br />
-      Have a look at the
-      <br />
-      <a
-        class="link"
-        href="https://github.com/storybookjs/storybook"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Storybook
-      </a>
-      <br />
-      repo for more information.
-    </p>
-    <p class="note">
-      <b>NOTE:</b>
-      <br />
-      Have a look at the
-      <br />
-      <code class="code">.storybook/webpack.config.js</code>
-      <br />
-      to add webpack
-      loaders and plugins you are using in this project.
-    </p>
-  </div>
-</template>
-
-<script>
-  const log = () => console.log('Welcome to storybook!')
-
-  export default {
-    name: 'welcome',
-
-    props: {
-      showApp: {
-        type: Function,
-        default: log
-      }
-    },
-
-    methods: {
-      onClick (event) {
-        event.preventDefault()
-        this.showApp()
-      }
-    }
-  }
-</script>
-
-<style>
-  .main {
-    padding: 15px;
-    line-height: 1.4;
-    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-    background-color: #ffffff;
-  }
-
-  .logo {
-    width: 200px;
-  }
-
-  .link {
-    color: #1474f3;
-    text-decoration: none;
-    border-bottom: 1px solid #1474f3;
-    padding-bottom: 2px;
-  }
-
-  .code {
-    font-size: 15px;
-    font-weight: 600;
-    padding: 2px 5px;
-    border: 1px solid #eae9e9;
-    border-radius: 4px;
-    background-color: #f3f2f2;
-    color: #3a3a3a;
-  }
-
-  .note {
-    opacity: 0.5;
-  }
-</style>
diff --git a/lib/cli/generators/SVELTE/index.js b/lib/cli/generators/SVELTE/index.js
deleted file mode 100644
index e7af8982f71e..000000000000
--- a/lib/cli/generators/SVELTE/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  getVersions,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const [
-    storybookVersion,
-    actionsVersion,
-    linksVersion,
-    addonsVersion,
-    svelte,
-    svelteLoader,
-  ] = await getVersions(
-    npmOptions,
-    '@storybook/svelte',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-    'svelte',
-    'svelte-loader'
-  );
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/svelte@${storybookVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    `svelte@${svelte}`,
-    `svelte-loader@${svelteLoader}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/SVELTE/template-csf/.storybook/main.js b/lib/cli/generators/SVELTE/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/SVELTE/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js b/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js
deleted file mode 100644
index 944233291921..000000000000
--- a/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import Button from './button.svelte';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => ({
-  Component: Button,
-  props: { text: 'Hello Button' },
-  on: { click: action('clicked') },
-});
-
-export const Emoji = () => ({
-  Component: Button,
-  props: {
-    text: '😀 😎 👍 💯',
-  },
-  on: { click: action('clicked') },
-});
diff --git a/lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js b/lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js
deleted file mode 100644
index d54217e25414..000000000000
--- a/lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint-disable no-param-reassign */
-import path from 'path';
-import { sync as spawnSync } from 'cross-spawn';
-import { packageNames } from '@storybook/codemod';
-import {
-  getVersion,
-  getVersions,
-  getBabelDependencies,
-  installDependencies,
-  getPackageJson,
-  writePackageJson,
-} from '../../lib/helpers';
-
-async function updatePackage(devDependencies, oldName, newName, npmOptions) {
-  if (devDependencies[oldName]) {
-    delete devDependencies[oldName];
-    devDependencies[newName] = await getVersion(npmOptions, newName);
-  }
-}
-
-async function updatePackageJson(npmOptions) {
-  const packageJson = getPackageJson();
-  const { devDependencies } = packageJson;
-
-  const [actionsVersion, linksVersion] = await getVersions(
-    npmOptions,
-    '@storybook/addon-actions',
-    '@storybook/addon-links'
-  );
-
-  devDependencies['@storybook/addon-actions'] = actionsVersion;
-  devDependencies['@storybook/addon-links'] = linksVersion;
-
-  await Promise.all(
-    Object.keys(packageNames).map(oldName => {
-      const newName = packageNames[oldName];
-      return updatePackage(devDependencies, oldName, newName, npmOptions);
-    })
-  );
-
-  if (!devDependencies['@storybook/react'] && !devDependencies['@storybook/react-native']) {
-    throw new Error('Expected to find `@kadira/[react-native]-storybook` in devDependencies');
-  }
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  if (babelDependencies.length > 0) {
-    installDependencies({ ...npmOptions, packageJson }, babelDependencies);
-  }
-}
-
-function updateSourceCode(parser) {
-  const jscodeshiftPath = path.dirname(require.resolve('jscodeshift'));
-  const jscodeshiftCommand = path.join(jscodeshiftPath, 'bin', 'jscodeshift.sh');
-
-  ['update-organisation-name.js', 'move-buildin-addons.js'].forEach(codemod => {
-    const codemodPath = path.join(
-      path.dirname(require.resolve('@storybook/codemod')),
-      'transforms',
-      codemod
-    );
-
-    const args = ['-t', codemodPath, '--silent', '--ignore-pattern', '"node_modules|dist"', '.'];
-    if (parser) args.push('--parser', parser);
-
-    spawnSync(jscodeshiftCommand, args, { stdio: 'inherit' });
-  });
-}
-
-export default async (parser, npmOptions) => {
-  await updatePackageJson(npmOptions);
-  updateSourceCode(parser);
-};
diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js
deleted file mode 100644
index 4f3b1a07d5b5..000000000000
--- a/lib/cli/generators/VUE/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  retrievePackageJson,
-  getVersion,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  addToDevDependenciesIfNotPresent,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = [
-    '@storybook/vue',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-    'babel-preset-vue',
-    '@babel/core',
-  ];
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  const packageBabelCoreVersion =
-    packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
-
-  // This seems to be the version installed by the Vue CLI, and it is not handled by
-  // installBabel below. For some reason it leads to the wrong version of @babel/core (a beta)
-  // being installed
-  if (packageBabelCoreVersion === '7.0.0-bridge.0') {
-    addToDevDependenciesIfNotPresent(
-      packageJson,
-      '@babel/core',
-      await getVersion(npmOptions, '@babel/core')
-    );
-  }
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  // We should probably just not even be using babel-preset-vue directly
-  // see: https://github.com/storybookjs/storybook/issues/4475#issuecomment-432141296
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/VUE/template-csf/.storybook/main.js b/lib/cli/generators/VUE/template-csf/.storybook/main.js
deleted file mode 100644
index 448921317f45..000000000000
--- a/lib/cli/generators/VUE/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-};
diff --git a/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index 35c1beef731f..000000000000
--- a/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => ({
-  components: { Welcome },
-  template: '<welcome :showApp="action" />',
-  methods: { action: linkTo('Button') },
-});
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js b/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index f9438eb09aed..000000000000
--- a/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import MyButton from './MyButton';
-
-export default {
-  title: 'Button',
-  component: MyButton,
-};
-
-export const Text = () => ({
-  components: { MyButton },
-  template: '<my-button @click="action">Hello Button</my-button>',
-  methods: { action: action('clicked') },
-});
-
-export const Jsx = () => ({
-  components: { MyButton },
-  render(h) {
-    return <my-button onClick={this.action}>With JSX</my-button>;
-  },
-  methods: { action: linkTo('clicked') },
-});
-
-export const Emoji = () => ({
-  components: { MyButton },
-  template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-  methods: { action: action('clicked') },
-});
diff --git a/lib/cli/generators/VUE/template-csf/stories/Welcome.js b/lib/cli/generators/VUE/template-csf/stories/Welcome.js
deleted file mode 100644
index d1f70b6b310e..000000000000
--- a/lib/cli/generators/VUE/template-csf/stories/Welcome.js
+++ /dev/null
@@ -1,121 +0,0 @@
-// eslint-disable-next-line no-console
-const log = () => console.log('Welcome to storybook!');
-
-export default {
-  name: 'welcome',
-
-  props: {
-    showApp: {
-      type: Function,
-      default: log,
-    },
-  },
-
-  data() {
-    return {
-      main: {
-        padding: 15,
-        lineHeight: 1.4,
-        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-        backgroundColor: '#ffffff',
-      },
-
-      logo: {
-        width: 200,
-      },
-
-      link: {
-        color: '#1474f3',
-        textDecoration: 'none',
-        borderBottom: '1px solid #1474f3',
-        paddingBottom: 2,
-      },
-
-      code: {
-        fontSize: 15,
-        fontWeight: 600,
-        padding: '2px 5px',
-        border: '1px solid #eae9e9',
-        borderRadius: 4,
-        backgroundColor: '#f3f2f2',
-        color: '#3a3a3a',
-      },
-
-      note: {
-        opacity: 0.5,
-      },
-    };
-  },
-
-  template: `
-    <div :style="main">
-      <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
-        <br />
-        <code :style="code">src/stories</code>
-        <br />
-        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
-        <br />
-        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
-        <br />
-        for a component called
-        <br />
-        <code :style="code">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="code">Button</code> component
-        located at <code :style="code">src/stories/Button.js</code>.)
-      </p>
-      <p>
-        This is just one thing you can do with Storybook.
-        <br />
-        Have a look at the
-        <br />
-        <a
-          :style="link"
-          href="https://github.com/storybookjs/storybook"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Storybook
-        </a>
-        <br />
-        repo for more information.
-      </p>
-      <p :style="note">
-        <b>NOTE:</b>
-        <br />
-        Have a look at the
-        <br />
-        <code :style="code">.storybook/webpack.config.js</code>
-        <br />
-        to add webpack
-        loaders and plugins you are using in this project.
-      </p>
-    </div>
-  `,
-
-  methods: {
-    onClick(event) {
-      event.preventDefault();
-      this.showApp();
-    },
-  },
-};
diff --git a/lib/cli/generators/VUE/template-mdx/.storybook/main.js b/lib/cli/generators/VUE/template-mdx/.storybook/main.js
deleted file mode 100644
index 78bc24049aef..000000000000
--- a/lib/cli/generators/VUE/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: ['@storybook/addon-docs/preset'],
-};
diff --git a/lib/cli/generators/VUE/template-mdx/stories/Welcome.js b/lib/cli/generators/VUE/template-mdx/stories/Welcome.js
deleted file mode 100644
index d1f70b6b310e..000000000000
--- a/lib/cli/generators/VUE/template-mdx/stories/Welcome.js
+++ /dev/null
@@ -1,121 +0,0 @@
-// eslint-disable-next-line no-console
-const log = () => console.log('Welcome to storybook!');
-
-export default {
-  name: 'welcome',
-
-  props: {
-    showApp: {
-      type: Function,
-      default: log,
-    },
-  },
-
-  data() {
-    return {
-      main: {
-        padding: 15,
-        lineHeight: 1.4,
-        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
-        backgroundColor: '#ffffff',
-      },
-
-      logo: {
-        width: 200,
-      },
-
-      link: {
-        color: '#1474f3',
-        textDecoration: 'none',
-        borderBottom: '1px solid #1474f3',
-        paddingBottom: 2,
-      },
-
-      code: {
-        fontSize: 15,
-        fontWeight: 600,
-        padding: '2px 5px',
-        border: '1px solid #eae9e9',
-        borderRadius: 4,
-        backgroundColor: '#f3f2f2',
-        color: '#3a3a3a',
-      },
-
-      note: {
-        opacity: 0.5,
-      },
-    };
-  },
-
-  template: `
-    <div :style="main">
-      <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
-        <br />
-        <code :style="code">src/stories</code>
-        <br />
-        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
-        <br />
-        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
-        <br />
-        for a component called
-        <br />
-        <code :style="code">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="code">Button</code> component
-        located at <code :style="code">src/stories/Button.js</code>.)
-      </p>
-      <p>
-        This is just one thing you can do with Storybook.
-        <br />
-        Have a look at the
-        <br />
-        <a
-          :style="link"
-          href="https://github.com/storybookjs/storybook"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Storybook
-        </a>
-        <br />
-        repo for more information.
-      </p>
-      <p :style="note">
-        <b>NOTE:</b>
-        <br />
-        Have a look at the
-        <br />
-        <code :style="code">.storybook/webpack.config.js</code>
-        <br />
-        to add webpack
-        loaders and plugins you are using in this project.
-      </p>
-    </div>
-  `,
-
-  methods: {
-    onClick(event) {
-      event.preventDefault();
-      this.showApp();
-    },
-  },
-};
diff --git a/lib/cli/generators/WEB-COMPONENTS/index.js b/lib/cli/generators/WEB-COMPONENTS/index.js
deleted file mode 100755
index fbcd51d81766..000000000000
--- a/lib/cli/generators/WEB-COMPONENTS/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import fse from 'fs-extra';
-import path from 'path';
-import {
-  getVersion,
-  retrievePackageJson,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const storybookVersion = await getVersion(npmOptions, '@storybook/web-components');
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
-
-  if (storyFormat === 'mdx') {
-    // TODO: handle adding of docs mode
-  }
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [
-    `@storybook/web-components@${storybookVersion}`,
-    ...babelDependencies,
-  ]);
-};
diff --git a/lib/cli/generators/WEB-COMPONENTS/template/.storybook/main.js b/lib/cli/generators/WEB-COMPONENTS/template/.storybook/main.js
deleted file mode 100644
index 77857c48de3f..000000000000
--- a/lib/cli/generators/WEB-COMPONENTS/template/.storybook/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-};
diff --git a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js b/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
deleted file mode 100644
index 2b9bedb51a12..000000000000
--- a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-
-// import '../my-component.js';
-
-export default {
-  title: 'Demo',
-};
-
-export const Heading = () => html`
-  <h1>Hello World</h1>
-`;
-
-export const SettingProperties = () => html`
-  <my-component .data=${{ header: 'foo', state: true }}>Hello World</my-component>
-`;
-
-export const Events = () => html`
-  <button @click=${ev => console.log('clicked button')}>clicking will get logged to console</button>
-`;
-
-export const WithFunction = () => {
-  const header = 'My Header';
-  return html`
-    <h1>${header}</h1>
-  `;
-};
diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js
deleted file mode 100644
index 3c9a36d0432e..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  retrievePackageJson,
-  getVersionedPackages,
-  writePackageJson,
-  getBabelDependencies,
-  installDependencies,
-  copyTemplate,
-} from '../../lib/helpers';
-
-export default async (npmOptions, { storyFormat = 'csf' }) => {
-  const packages = [
-    '@storybook/react',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-  if (storyFormat === 'mdx') {
-    packages.push('@storybook/addon-docs');
-  }
-  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = await retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  writePackageJson(packageJson);
-
-  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
-
-  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
-};
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/main.js b/lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/main.js
deleted file mode 100644
index 437d40a17c95..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/main.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  webpack: async config => {
-    // do mutation to the config
-
-    return config;
-  },
-};
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
deleted file mode 100644
index c76f45f3b4be..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
deleted file mode 100644
index b84fca566012..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
-
-Emoji.story = {
-  name: 'with emoji',
-};
diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/main.js b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/main.js
deleted file mode 100644
index 936fe48e7987..000000000000
--- a/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register'],
-  presets: [
-    {
-      name: '@storybook/addon-docs/preset',
-      options: { configureJSX: true },
-    },
-  ],
-  webpack: async config => {
-    // do mutation to the config
-
-    return config;
-  },
-};
diff --git a/lib/cli/lib/add.js b/lib/cli/lib/add.js
deleted file mode 100644
index 17713c1bcc0c..000000000000
--- a/lib/cli/lib/add.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-import { sync as spawnSync } from 'cross-spawn';
-import hasYarn from './has_yarn';
-import latestVersion from './latest_version';
-import { commandLog, getPackageJson } from './helpers';
-
-const logger = console;
-export const storybookAddonScope = '@storybook/addon-';
-
-const isAddon = async (name, npmOptions) => {
-  try {
-    await latestVersion(npmOptions, name);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isStorybookAddon = async (name, npmOptions) =>
-  isAddon(`${storybookAddonScope}${name}`, npmOptions);
-
-export const getPackageName = (addonName, isOfficialAddon) =>
-  isOfficialAddon ? storybookAddonScope + addonName : addonName;
-
-export const getInstalledStorybookVersion = packageJson =>
-  packageJson.devDependencies[
-    // This only considers the first occurrence.
-    Object.keys(packageJson.devDependencies).find(devDep => /@storybook/.test(devDep))
-  ] || false;
-
-export const getPackageArg = (addonName, isOfficialAddon, packageJson) => {
-  if (isOfficialAddon) {
-    const addonNameNoTag = addonName.split('@')[0];
-    const installedStorybookVersion = getInstalledStorybookVersion(packageJson);
-    return installedStorybookVersion
-      ? `${addonNameNoTag}@${getInstalledStorybookVersion(packageJson)}`
-      : addonName;
-  }
-  return addonName;
-};
-
-const installAddon = (addonName, npmOptions, isOfficialAddon) => {
-  const prepareDone = commandLog(`Preparing to install the ${addonName} Storybook addon`);
-  prepareDone();
-  logger.log();
-
-  let result;
-  const packageArg = getPackageArg(addonName, isOfficialAddon, getPackageJson());
-  if (npmOptions.useYarn) {
-    result = spawnSync('yarn', ['add', packageArg, '--dev'], {
-      stdio: 'inherit',
-    });
-  } else {
-    result = spawnSync('npm', ['install', packageArg, '--save-dev'], {
-      stdio: 'inherit',
-    });
-  }
-
-  logger.log();
-  const installDone = commandLog(`Installing the ${addonName} Storybook addon`);
-  if (result.status !== 0) {
-    installDone(
-      `Something went wrong installing the addon: "${getPackageName(addonName, isOfficialAddon)}"`
-    );
-    logger.log();
-    process.exit(1);
-  }
-  installDone();
-};
-
-export const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
-  const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
-
-  if (alreadyRegistered) {
-    return addonsFile;
-  }
-
-  const latestImportIndex = addonsFile.reduce(
-    (prev, curr, currIndex) =>
-      curr.startsWith('import') && curr.includes('register') ? currIndex : prev,
-    -1
-  );
-
-  return [
-    ...addonsFile.slice(0, latestImportIndex + 1),
-    `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`,
-    ...addonsFile.slice(latestImportIndex + 1),
-  ];
-};
-
-const LEGACY_CONFIGS = ['addons', 'config', 'presets'];
-
-const postinstallAddon = async (addonName, isOfficialAddon) => {
-  let skipMsg = null;
-  if (!isOfficialAddon) {
-    skipMsg = 'unofficial addon';
-  } else if (!fs.existsSync('.storybook')) {
-    skipMsg = 'no .storybook config';
-  } else {
-    skipMsg = 'no codmods found';
-    LEGACY_CONFIGS.forEach(config => {
-      try {
-        const codemod = require.resolve(
-          `${getPackageName(addonName, isOfficialAddon)}/postinstall/${config}.js`
-        );
-        commandLog(`Running postinstall script for ${addonName}`)();
-        let configFile = path.join('.storybook', `${config}.ts`);
-        if (!fs.existsSync(configFile)) {
-          configFile = path.join('.storybook', `${config}.js`);
-          if (!fs.existsSync(configFile)) {
-            fs.writeFileSync(configFile, '', 'utf8');
-          }
-        }
-        spawnSync('npx', ['jscodeshift', '-t', codemod, configFile], {
-          stdio: 'inherit',
-        });
-        skipMsg = null;
-      } catch (err) {
-        // resolve failed, skip
-      }
-    });
-  }
-
-  if (skipMsg) {
-    commandLog(`Skipping postinstall for ${addonName}, ${skipMsg}`)();
-  }
-};
-
-export default async function add(addonName, options) {
-  const useYarn = Boolean(options.useNpm !== true) && hasYarn();
-  const npmOptions = {
-    useYarn,
-  };
-  const addonCheckDone = commandLog(`Verifying that ${addonName} is an addon`);
-  const isOfficialAddon = await isStorybookAddon(addonName, npmOptions);
-  if (!isOfficialAddon) {
-    if (!(await isAddon(addonName, npmOptions))) {
-      addonCheckDone(`The provided package was not a Storybook addon: ${addonName}.`);
-      return;
-    }
-  }
-  addonCheckDone();
-  installAddon(addonName, npmOptions, isOfficialAddon);
-  if (!options.skipPostinstall) {
-    await postinstallAddon(addonName, isOfficialAddon);
-  }
-}
diff --git a/lib/cli/lib/detect.js b/lib/cli/lib/detect.js
deleted file mode 100644
index bb8c5ad95355..000000000000
--- a/lib/cli/lib/detect.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-import types, { supportedFrameworks } from './project_types';
-import { getBowerJson, getPackageJson } from './helpers';
-
-function detectFramework(dependencies) {
-  if (!dependencies) {
-    return false;
-  }
-  if (
-    dependencies.devDependencies &&
-    (dependencies.devDependencies['vue-loader'] || dependencies.devDependencies.vueify)
-  ) {
-    return types.SFC_VUE;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.vue) ||
-    (dependencies.devDependencies && dependencies.devDependencies.vue) ||
-    (dependencies.dependencies && dependencies.dependencies.nuxt) ||
-    (dependencies.devDependencies && dependencies.devDependencies.nuxt)
-  ) {
-    return types.VUE;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['ember-cli']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['ember-cli'])
-  ) {
-    return types.EMBER;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['react-scripts']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['react-scripts']) ||
-    // For projects using a custom/forked `react-scripts` package.
-    fs.existsSync(path.join(process.cwd(), '/node_modules/.bin/react-scripts'))
-  ) {
-    return types.REACT_SCRIPTS;
-  }
-
-  if (
-    ((dependencies.devDependencies && dependencies.devDependencies.webpack) ||
-      (dependencies.dependencies && dependencies.dependencies.webpack)) &&
-    ((dependencies.devDependencies && dependencies.devDependencies.react) ||
-      (dependencies.dependencies && dependencies.dependencies.react))
-  ) {
-    return types.WEBPACK_REACT;
-  }
-
-  if (dependencies.peerDependencies && dependencies.peerDependencies.react) {
-    return types.REACT_PROJECT;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['react-native']) ||
-    (dependencies.dependencies && dependencies.dependencies['react-native-scripts']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['react-native-scripts'])
-  ) {
-    return types.REACT_NATIVE;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.react) ||
-    (dependencies.devDependencies && dependencies.devDependencies.react)
-  ) {
-    return types.REACT;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['@angular/core']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['@angular/core'])
-  ) {
-    return types.ANGULAR;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['@polymer/polymer']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['@polymer/polymer']) ||
-    (dependencies.dependencies && dependencies.dependencies.polymer) ||
-    (dependencies.devDependencies && dependencies.devDependencies.polymer)
-  ) {
-    return types.POLYMER;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies['lit-element']) ||
-    (dependencies.devDependencies && dependencies.devDependencies['lit-element'])
-  ) {
-    return types.WEB_COMPONENTS;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.mithril) ||
-    (dependencies.devDependencies && dependencies.devDependencies.mithril)
-  ) {
-    return types.MITHRIL;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.marko) ||
-    (dependencies.devDependencies && dependencies.devDependencies.marko)
-  ) {
-    return types.MARKO;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.riot) ||
-    (dependencies.devDependencies && dependencies.devDependencies.riot)
-  ) {
-    return types.RIOT;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.preact) ||
-    (dependencies.devDependencies && dependencies.devDependencies.preact)
-  ) {
-    return types.PREACT;
-  }
-
-  if (
-    (dependencies.dependencies && dependencies.dependencies.rax) ||
-    (dependencies.devDependencies && dependencies.devDependencies.rax)
-  ) {
-    return types.RAX;
-  }
-
-  return false;
-}
-
-export function isStorybookInstalled(dependencies, force) {
-  if (!dependencies) {
-    return false;
-  }
-
-  if (!force && dependencies.devDependencies) {
-    if (
-      supportedFrameworks.reduce(
-        (storybookPresent, framework) =>
-          storybookPresent || dependencies.devDependencies[`@storybook/${framework}`],
-        false
-      )
-    ) {
-      return types.ALREADY_HAS_STORYBOOK;
-    }
-
-    if (
-      dependencies.devDependencies['@kadira/storybook'] ||
-      dependencies.devDependencies['@kadira/react-native-storybook']
-    ) {
-      return types.UPDATE_PACKAGE_ORGANIZATIONS;
-    }
-  }
-  return false;
-}
-
-export default function detect(options) {
-  if (options.html) {
-    return types.HTML;
-  }
-
-  const packageJson = getPackageJson();
-  const bowerJson = getBowerJson();
-
-  if (!packageJson && !bowerJson) {
-    return types.UNDETECTED;
-  }
-
-  if (fs.existsSync(path.resolve('.meteor'))) {
-    return types.METEOR;
-  }
-
-  const storyBookInstalled = isStorybookInstalled(packageJson, options.force);
-  if (storyBookInstalled) {
-    return storyBookInstalled;
-  }
-
-  return detectFramework(packageJson) || detectFramework(bowerJson) || types.UNDETECTED;
-}
diff --git a/lib/cli/lib/detect.test.js b/lib/cli/lib/detect.test.js
deleted file mode 100644
index b2cf308d2021..000000000000
--- a/lib/cli/lib/detect.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { isStorybookInstalled } from './detect';
-import { supportedFrameworks } from './project_types';
-
-describe('isStorybookInstalled should return', () => {
-  it('false if empty devDependency', () => {
-    expect(isStorybookInstalled({ devDependencies: {} }, false)).toBe(false);
-  });
-  it('false if no devDependency', () => {
-    expect(isStorybookInstalled({}, false)).toBe(false);
-  });
-
-  supportedFrameworks.forEach(framework => {
-    it(`true if devDependencies has ${framework} Storybook version`, () => {
-      const devDependencies = {};
-      devDependencies[`@storybook/${framework}`] = '4.0.0-alpha.21';
-      expect(isStorybookInstalled({ devDependencies }, false)).toBeTruthy();
-    });
-  });
-
-  it('true if forced flag', () => {
-    expect(
-      isStorybookInstalled({
-        devDependencies: { 'storybook/react': '4.0.0-alpha.21' },
-      })
-    ).toBe(false);
-  });
-});
diff --git a/lib/cli/lib/has_yarn.js b/lib/cli/lib/has_yarn.js
deleted file mode 100644
index ce7bdd251d97..000000000000
--- a/lib/cli/lib/has_yarn.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { sync as spawnSync } from 'cross-spawn';
-import path from 'path';
-import findUp from 'find-up';
-
-export default function hasYarn() {
-  const yarnAvailable = spawnSync('yarn', ['--version'], { silent: true });
-  const npmAvailable = spawnSync('npm', ['--version'], { silent: true });
-
-  const lockFile = findUp.sync(['yarn.lock', 'package-lock.json']);
-  const hasYarnLock = lockFile && path.basename(lockFile) === 'yarn.lock';
-
-  if (yarnAvailable.status === 0 && (hasYarnLock || npmAvailable.status !== 0)) {
-    return true;
-  }
-  return false;
-}
diff --git a/lib/cli/lib/helpers.js b/lib/cli/lib/helpers.js
deleted file mode 100644
index 2ef52288bfbe..000000000000
--- a/lib/cli/lib/helpers.js
+++ /dev/null
@@ -1,315 +0,0 @@
-/* eslint-disable no-param-reassign */
-import path from 'path';
-import fs from 'fs';
-import fse from 'fs-extra';
-import chalk from 'chalk';
-import { sync as spawnSync } from 'cross-spawn';
-import { gt, satisfies } from 'semver';
-import stripJsonComments from 'strip-json-comments';
-import latestVersion from './latest_version';
-
-import { version, devDependencies } from '../package.json';
-import npmInit from './npm_init';
-
-const logger = console;
-
-export async function getVersion(npmOptions, packageName, constraint) {
-  let current;
-  if (packageName === '@storybook/cli') {
-    current = version;
-  } else if (/storybook/.test(packageName)) {
-    current = devDependencies[packageName];
-  }
-
-  let latest;
-  try {
-    latest = await latestVersion(npmOptions, packageName, constraint);
-  } catch (e) {
-    if (current) {
-      logger.warn(`\n     ${chalk.yellow(e.message)}`);
-      return current;
-    }
-
-    logger.error(`\n     ${chalk.red(e.message)}`);
-    process.exit(1);
-  }
-
-  const versionToUse =
-    current && (!constraint || satisfies(current, constraint)) && gt(current, latest)
-      ? current
-      : latest;
-  return `^${versionToUse}`;
-}
-
-export function getVersions(npmOptions, ...packageNames) {
-  return Promise.all(packageNames.map(packageName => getVersion(npmOptions, packageName)));
-}
-
-export function getVersionedPackages(npmOptions, ...packageNames) {
-  return Promise.all(
-    packageNames.map(
-      async packageName => `${packageName}@${await getVersion(npmOptions, packageName)}`
-    )
-  );
-}
-
-export function getPackageJson() {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
-export async function retrievePackageJson() {
-  const existing = getPackageJson();
-
-  return existing || npmInit();
-}
-
-export function getBowerJson() {
-  const bowerJsonPath = path.resolve('bower.json');
-  if (!fs.existsSync(bowerJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(bowerJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
-export function readFileAsJson(jsonPath, allowComments) {
-  const filePath = path.resolve(jsonPath);
-  if (!fs.existsSync(filePath)) {
-    return false;
-  }
-
-  const fileContent = fs.readFileSync(filePath, 'utf8');
-  const jsonContent = allowComments ? stripJsonComments(fileContent) : fileContent;
-  return JSON.parse(jsonContent);
-}
-
-export const writeFileAsJson = (jsonPath, content) => {
-  const filePath = path.resolve(jsonPath);
-  if (!fs.existsSync(filePath)) {
-    return false;
-  }
-
-  fs.writeFileSync(filePath, `${JSON.stringify(content, null, 2)}\n`);
-  return true;
-};
-
-export function writePackageJson(packageJson) {
-  const content = `${JSON.stringify(packageJson, null, 2)}\n`;
-  const packageJsonPath = path.resolve('package.json');
-
-  fs.writeFileSync(packageJsonPath, content, 'utf8');
-}
-
-export const commandLog = message => {
-  process.stdout.write(chalk.cyan(' • ') + message);
-
-  return (errorMessage, errorInfo) => {
-    if (errorMessage) {
-      process.stdout.write(`. ${chalk.red('✖')}\n`);
-      logger.error(`\n     ${chalk.red(errorMessage)}`);
-
-      if (!errorInfo) {
-        return;
-      }
-
-      const newErrorInfo = errorInfo
-        .split('\n')
-        .map(line => `     ${chalk.dim(line)}`)
-        .join('\n');
-      logger.error(`${newErrorInfo}\n`);
-      return;
-    }
-
-    process.stdout.write(`. ${chalk.green('✓')}\n`);
-  };
-};
-
-export function paddedLog(message) {
-  const newMessage = message
-    .split('\n')
-    .map(line => `    ${line}`)
-    .join('\n');
-
-  logger.log(newMessage);
-}
-
-export function getChars(char, amount) {
-  let line = '';
-  for (let lc = 0; lc < amount; lc += 1) {
-    line += char;
-  }
-
-  return line;
-}
-
-export function codeLog(codeLines, leftPadAmount) {
-  let maxLength = 0;
-  const newLines = codeLines.map(line => {
-    maxLength = line.length > maxLength ? line.length : maxLength;
-    return line;
-  });
-
-  const finalResult = newLines
-    .map(line => {
-      const rightPadAmount = maxLength - line.length;
-      let newLine = line + getChars(' ', rightPadAmount);
-      newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `);
-      return newLine;
-    })
-    .join('\n');
-
-  logger.log(finalResult);
-}
-
-export function installDepsFromPackageJson(options) {
-  let done = commandLog('Preparing to install dependencies');
-  done();
-  logger.log();
-
-  let result;
-  if (options.useYarn) {
-    result = spawnSync('yarn', { stdio: 'inherit' });
-  } else {
-    result = spawnSync('npm', ['install'], { stdio: 'inherit' });
-  }
-
-  logger.log();
-  done = commandLog('Installing dependencies');
-  if (result.status !== 0) {
-    done('An error occurred while installing dependencies.');
-    process.exit(1);
-  }
-  done();
-}
-
-/**
- * Add dependencies to a project using `yarn add` or `npm install`.
- *
- * @param {Object} npmOptions contains `useYarn`, `runInstall` and `installAsDevDependencies` which we use to determine how we install packages.
- * @param {Array} dependencies contains a list of packages to add.
- * @example
- * installDependencies(npmOptions, [
- *   `@storybook/react@${storybookVersion}`,
- *   `@storybook/addon-actions@${actionsVersion}`,
- *   `@storybook/addon-links@${linksVersion}`,
- *   `@storybook/addons@${addonsVersion}`,
- * ]);
- */
-export function installDependencies(npmOptions, dependencies) {
-  const { skipInstall } = npmOptions;
-
-  if (skipInstall) {
-    const { packageJson } = npmOptions;
-
-    const dependenciesMap = dependencies.reduce((acc, dep) => {
-      const idx = dep.lastIndexOf('@');
-      const packageName = dep.slice(0, idx);
-      const packageVersion = dep.slice(idx + 1);
-
-      return { ...acc, [packageName]: packageVersion };
-    }, {});
-
-    if (npmOptions.installAsDevDependencies) {
-      packageJson.devDependencies = {
-        ...packageJson.devDependencies,
-        ...dependenciesMap,
-      };
-    } else {
-      packageJson.dependencies = {
-        ...packageJson.dependencies,
-        ...dependenciesMap,
-      };
-    }
-
-    writePackageJson(packageJson);
-  } else {
-    const spawnCommand = npmOptions.useYarn ? 'yarn' : 'npm';
-    const installCommand = npmOptions.useYarn ? 'add' : 'install';
-
-    const installArgs = [installCommand, ...dependencies];
-
-    if (npmOptions.installAsDevDependencies) {
-      installArgs.push('-D');
-    }
-
-    const dependencyResult = spawnSync(spawnCommand, installArgs, {
-      stdio: 'inherit',
-    });
-
-    if (dependencyResult.status !== 0) {
-      logger.error('An error occurred while installing dependencies.');
-      logger.log(dependencyResult);
-      process.exit(1);
-    }
-  }
-}
-
-/**
- * Detect if any babel dependencies need to be added to the project
- * @param {Object} npmOptions Passed along to `latestVersion` and `getVersion`
- * @param {Object} packageJson The current package.json so we can inspect its contents
- * @returns {Array} Contains the packages and versions that need to be installed
- * @example
- * const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
- * // you can then spread the result when using installDependencies
- * installDependencies(npmOptions, [
- *   `@storybook/react@${storybookVersion}`,
- *   ...babelDependencies,
- * ]);
- */
-export async function getBabelDependencies(npmOptions, packageJson) {
-  const dependenciesToAdd = [];
-  let babelLoaderVersion = '^8.0.0-0';
-
-  const babelCoreVersion =
-    packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
-
-  if (!babelCoreVersion) {
-    if (!packageJson.dependencies['@babel/core'] && !packageJson.devDependencies['@babel/core']) {
-      const babelCoreInstallVersion = await getVersion(npmOptions, '@babel/core');
-      dependenciesToAdd.push(`@babel/core@${babelCoreInstallVersion}`);
-    }
-  } else {
-    const latestCompatibleBabelVersion = await latestVersion(
-      npmOptions,
-      'babel-core',
-      babelCoreVersion
-    );
-    // Babel 6
-    if (satisfies(latestCompatibleBabelVersion, '^6.0.0')) {
-      babelLoaderVersion = '^7.0.0';
-    }
-  }
-
-  if (!packageJson.dependencies['babel-loader'] && !packageJson.devDependencies['babel-loader']) {
-    const babelLoaderInstallVersion = await getVersion(
-      npmOptions,
-      'babel-loader',
-      babelLoaderVersion
-    );
-    dependenciesToAdd.push(`babel-loader@${babelLoaderInstallVersion}`);
-  }
-
-  return dependenciesToAdd;
-}
-
-export function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
-  if (!packageJson.dependencies[name] && !packageJson.devDependencies[name]) {
-    packageJson.devDependencies[name] = packageVersion;
-  }
-}
-
-export function copyTemplate(templateRoot, storyFormat) {
-  const templateDir = path.resolve(templateRoot, `template-${storyFormat}/`);
-  if (!fs.existsSync(templateDir)) {
-    throw new Error(`Unsupported story format: ${storyFormat}`);
-  }
-  fse.copySync(templateDir, '.', { overwrite: true });
-}
diff --git a/lib/cli/lib/initiate.js b/lib/cli/lib/initiate.js
deleted file mode 100644
index a2ba31d55e8f..000000000000
--- a/lib/cli/lib/initiate.js
+++ /dev/null
@@ -1,285 +0,0 @@
-import updateNotifier from 'update-notifier';
-import chalk from 'chalk';
-import inquirer from 'inquirer';
-import detect, { isStorybookInstalled } from './detect';
-import hasYarn from './has_yarn';
-import types, { installableProjectTypes } from './project_types';
-import {
-  commandLog,
-  codeLog,
-  paddedLog,
-  installDepsFromPackageJson,
-  getPackageJson,
-} from './helpers';
-import angularGenerator from '../generators/ANGULAR';
-import emberGenerator from '../generators/EMBER';
-import meteorGenerator from '../generators/METEOR';
-import reactGenerator from '../generators/REACT';
-import reactNativeGenerator from '../generators/REACT_NATIVE';
-import reactScriptsGenerator from '../generators/REACT_SCRIPTS';
-import sfcVueGenerator from '../generators/SFC_VUE';
-import updateOrganisationsGenerator from '../generators/UPDATE_PACKAGE_ORGANIZATIONS';
-import vueGenerator from '../generators/VUE';
-import polymerGenerator from '../generators/POLYMER';
-import webpackReactGenerator from '../generators/WEBPACK_REACT';
-import mithrilGenerator from '../generators/MITHRIL';
-import markoGenerator from '../generators/MARKO';
-import htmlGenerator from '../generators/HTML';
-import webComponentsGenerator from '../generators/WEB-COMPONENTS';
-import riotGenerator from '../generators/RIOT';
-import preactGenerator from '../generators/PREACT';
-import svelteGenerator from '../generators/SVELTE';
-import raxGenerator from '../generators/RAX';
-
-const logger = console;
-
-const installStorybook = (projectType, options) => {
-  const useYarn = Boolean(options.useNpm !== true) && hasYarn();
-
-  const npmOptions = {
-    useYarn,
-    installAsDevDependencies: true,
-    skipInstall: options.skipInstall,
-  };
-
-  const generatorOptions = {
-    storyFormat: options.storyFormat,
-  };
-
-  const runStorybookCommand = useYarn ? 'yarn storybook' : 'npm run storybook';
-
-  const end = () => {
-    if (!options.skipInstall) {
-      installDepsFromPackageJson(npmOptions);
-    }
-
-    logger.log('\nTo run your storybook, type:\n');
-    codeLog([runStorybookCommand]);
-    logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
-
-    // Add a new line for the clear visibility.
-    logger.log();
-  };
-
-  const REACT_NATIVE_DISCUSSION =
-    'https://github.com/storybookjs/storybook/blob/master/app/react-native/docs/manual-setup.md';
-
-  const runGenerator = () => {
-    switch (projectType) {
-      case types.ALREADY_HAS_STORYBOOK:
-        logger.log();
-        paddedLog('There seems to be a storybook already available in this project.');
-        paddedLog('Apply following command to force:\n');
-        codeLog(['sb init [options] -f']);
-
-        // Add a new line for the clear visibility.
-        logger.log();
-        return Promise.resolve();
-
-      case types.UPDATE_PACKAGE_ORGANIZATIONS:
-        return updateOrganisationsGenerator(options.parser, npmOptions)
-          .then(() => null) // commmandLog doesn't like to see output
-          .then(commandLog('Upgrading your project to the new storybook packages.'))
-          .then(end);
-
-      case types.REACT_SCRIPTS:
-        return reactScriptsGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Create React App" based project'))
-          .then(end);
-
-      case types.REACT:
-        return reactGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "React" app'))
-          .then(end);
-
-      case types.REACT_NATIVE: {
-        return (options.yes
-          ? Promise.resolve({ server: true })
-          : inquirer.prompt([
-              {
-                type: 'confirm',
-                name: 'server',
-                message:
-                  'Do you want to install dependencies necessary to run storybook server? You can manually do it later by install @storybook/react-native-server',
-                default: false,
-              },
-            ])
-        )
-          .then(({ server }) => reactNativeGenerator(npmOptions, server, generatorOptions))
-          .then(commandLog('Adding storybook support to your "React Native" app'))
-          .then(end)
-          .then(() => {
-            logger.log(chalk.red('NOTE: installation is not 100% automated.'));
-            logger.log(`To quickly run storybook, replace contents of your app entry with:\n`);
-            codeLog(["export default from './storybook';"]);
-            logger.log('\n For more in depth setup instructions, see:\n');
-            logger.log(chalk.cyan(REACT_NATIVE_DISCUSSION));
-            logger.log();
-          });
-      }
-
-      case types.METEOR:
-        return meteorGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Meteor" app'))
-          .then(end);
-
-      case types.WEBPACK_REACT:
-        return webpackReactGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Webpack React" app'))
-          .then(end);
-
-      case types.REACT_PROJECT:
-        return reactGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "React" library'))
-          .then(end);
-
-      case types.SFC_VUE:
-        return sfcVueGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
-          .then(end);
-
-      case types.VUE:
-        return vueGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Vue" app'))
-          .then(end);
-
-      case types.ANGULAR:
-        return angularGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Angular" app'))
-          .then(end);
-
-      case types.EMBER:
-        return emberGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Ember" app'))
-          .then(end);
-
-      case types.POLYMER:
-        return polymerGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Polymer" app'))
-          .then(end);
-
-      case types.MITHRIL:
-        return mithrilGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Mithril" app'))
-          .then(end);
-
-      case types.MARKO:
-        return markoGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Marko" app'))
-          .then(end);
-
-      case types.HTML:
-        return htmlGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "HTML" app'))
-          .then(end);
-
-      case types.WEB_COMPONENTS:
-        return webComponentsGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "web components" app'))
-          .then(end);
-
-      case types.RIOT:
-        return riotGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "riot.js" app'))
-          .then(end);
-
-      case types.PREACT:
-        return preactGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Preact" app'))
-          .then(end);
-
-      case types.SVELTE:
-        return svelteGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Svelte" app'))
-          .then(end);
-
-      case types.RAX:
-        return raxGenerator(npmOptions, generatorOptions)
-          .then(commandLog('Adding storybook support to your "Rax" app'))
-          .then(end);
-
-      default:
-        paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
-        paddedLog(
-          'You can specify a project type explicitly via `sb init --type <type>` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
-        );
-
-        // Add a new line for the clear visibility.
-        logger.log();
-
-        return projectTypeInquirer(options);
-    }
-  };
-
-  return runGenerator().catch(ex => {
-    logger.error(`\n     ${chalk.red(ex.stack)}`);
-    process.exit(1);
-  });
-};
-
-const projectTypeInquirer = async options => {
-  const manualAnswer = options.yes
-    ? true
-    : await inquirer.prompt([
-        {
-          type: 'confirm',
-          name: 'manual',
-          message: 'Do you want to manually choose a Storybook project type to install?',
-          default: false,
-        },
-      ]);
-
-  if (manualAnswer.manual) {
-    const frameworkAnswer = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'manualFramework',
-        message: 'Please choose a project type from the following list:',
-        choices: installableProjectTypes.map(type => type.toUpperCase()),
-      },
-    ]);
-    return installStorybook(frameworkAnswer.manualFramework, options);
-  }
-  return Promise.resolve();
-};
-
-export default function(options, pkg) {
-  const welcomeMessage = 'sb init - the simplest way to add a storybook to your project.';
-  logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
-
-  // Update notify code.
-  updateNotifier({
-    pkg,
-    updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
-  }).notify();
-
-  let projectType;
-  const projectTypeProvided = options.type;
-  const infoText = projectTypeProvided
-    ? 'Installing Storybook for user specified project type'
-    : 'Detecting project type';
-  const done = commandLog(infoText);
-
-  try {
-    if (projectTypeProvided) {
-      if (installableProjectTypes.includes(options.type)) {
-        const storybookInstalled = isStorybookInstalled(getPackageJson(), options.force);
-        projectType = storybookInstalled ? types.ALREADY_HAS_STORYBOOK : options.type.toUpperCase();
-      } else {
-        done(`The provided project type was not recognized by Storybook.`);
-        logger.log(`\nThe project types currently supported by Storybook are:\n`);
-        installableProjectTypes.sort().forEach(framework => paddedLog(`- ${framework}`));
-        logger.log();
-        process.exit(1);
-      }
-    } else {
-      projectType = detect(options);
-    }
-  } catch (ex) {
-    done(ex.message);
-    process.exit(1);
-  }
-  done();
-
-  return installStorybook(projectType, options);
-}
diff --git a/lib/cli/lib/latest_version.js b/lib/cli/lib/latest_version.js
deleted file mode 100644
index 724dee8308e4..000000000000
--- a/lib/cli/lib/latest_version.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { spawn } from 'cross-spawn';
-import { satisfies } from 'semver';
-
-export default function latestVersion(npmOptions, packageName, constraint) {
-  const packageManager = npmOptions.useYarn ? 'yarn' : 'npm';
-  return new Promise((resolve, reject) => {
-    const command = spawn(
-      packageManager,
-      ['info', packageName, constraint ? 'versions' : 'version', '--json', '--silent'],
-      {
-        cwd: process.cwd(),
-        env: process.env,
-        stdio: 'pipe',
-        encoding: 'utf-8',
-        silent: true,
-      }
-    );
-
-    const processResult = result => {
-      if (!constraint) return result;
-
-      return result.reverse().find(version => satisfies(version, constraint));
-    };
-
-    command.stdout.on('data', data => {
-      try {
-        const info = JSON.parse(data);
-        if (info.error) {
-          // npm error
-          reject(new Error(info.error.summary));
-        } else if (info.type === 'inspect') {
-          // yarn success
-          resolve(processResult(info.data));
-        } else {
-          // npm success
-          resolve(processResult(info));
-        }
-      } catch (e) {
-        // yarn info output
-      }
-    });
-
-    command.stderr.on('data', data => {
-      try {
-        // yarn error
-        const info = JSON.parse(data);
-        if (info.type === 'error') {
-          reject(new Error(info.data));
-        }
-      } catch (e) {
-        // package manager unstructured info/warnings output
-      }
-    });
-  });
-}
diff --git a/lib/cli/lib/migrate.js b/lib/cli/lib/migrate.js
deleted file mode 100644
index 9d7977427eea..000000000000
--- a/lib/cli/lib/migrate.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { listCodemods, runCodemod } from '@storybook/codemod';
-
-export async function migrate(
-  migration,
-  { configDir, glob, dryRun, list, rename, logger, parser }
-) {
-  if (list) {
-    listCodemods().forEach(key => logger.log(key));
-  } else if (migration) {
-    await runCodemod(migration, { configDir, glob, dryRun, logger, rename, parser });
-  } else {
-    throw new Error('Migrate: please specify a migration name or --list');
-  }
-}
diff --git a/lib/cli/lib/npm_init.js b/lib/cli/lib/npm_init.js
deleted file mode 100644
index 8843ae8699c1..000000000000
--- a/lib/cli/lib/npm_init.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { spawn } from 'cross-spawn';
-import hasYarn from './has_yarn';
-
-const packageManager = hasYarn() ? 'yarn' : 'npm';
-
-export default function npmInit() {
-  return new Promise((resolve, reject) => {
-    const command = spawn(packageManager, ['init', '-y'], {
-      cwd: process.cwd(),
-      env: process.env,
-      stdio: 'pipe',
-      encoding: 'utf-8',
-      silent: true,
-    });
-
-    command.stdout.on('data', resolve);
-
-    command.stderr.on('data', reject);
-  });
-}
diff --git a/lib/cli/lib/project_types.js b/lib/cli/lib/project_types.js
deleted file mode 100644
index 639e2620f6b7..000000000000
--- a/lib/cli/lib/project_types.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const projectTypes = {
-  UNDETECTED: 'UNDETECTED',
-  REACT_SCRIPTS: 'REACT_SCRIPTS',
-  METEOR: 'METEOR',
-  REACT: 'REACT',
-  REACT_NATIVE: 'REACT_NATIVE',
-  REACT_PROJECT: 'REACT_PROJECT',
-  WEBPACK_REACT: 'WEBPACK_REACT',
-  VUE: 'VUE',
-  SFC_VUE: 'SFC_VUE',
-  ANGULAR: 'ANGULAR',
-  EMBER: 'EMBER',
-  ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK',
-  UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS',
-  POLYMER: 'POLYMER',
-  WEB_COMPONENTS: 'WEB_COMPONENTS',
-  MITHRIL: 'MITHRIL',
-  MARKO: 'MARKO',
-  HTML: 'HTML',
-  RIOT: 'RIOT',
-  PREACT: 'PREACT',
-  SVELTE: 'SVELTE',
-  RAX: 'RAX',
-};
-
-export default projectTypes;
-
-export const supportedFrameworks = [
-  'react',
-  'react-native',
-  'vue',
-  'angular',
-  'polymer',
-  'mithril',
-  'riot',
-  'ember',
-  'marko',
-  'meteor',
-  'preact',
-  'svelte',
-  'rax',
-];
-
-const notInstallableProjectTypes = [
-  projectTypes.UNDETECTED,
-  projectTypes.ALREADY_HAS_STORYBOOK,
-  projectTypes.UPDATE_PACKAGE_ORGANIZATIONS,
-];
-
-export const installableProjectTypes = Object.values(projectTypes)
-  .filter(type => !notInstallableProjectTypes.includes(type))
-  .map(type => type.toLowerCase());
diff --git a/lib/cli/lib/project_types.test.js b/lib/cli/lib/project_types.test.js
deleted file mode 100644
index b69eb1a18c43..000000000000
--- a/lib/cli/lib/project_types.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { installableProjectTypes, supportedFrameworks } from './project_types';
-
-describe('installableProjectTypes should have an entry for the supported framework', () => {
-  supportedFrameworks.forEach(framework => {
-    it(`${framework}`, () => {
-      expect(installableProjectTypes.includes(framework.replace(/-/g, '_'))).toBe(true);
-    });
-  });
-});
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 2959c0797a4d..754760b190a3 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -18,77 +18,88 @@
   },
   "license": "MIT",
   "author": "Storybook Team",
+  "bin": {
+    "getstorybook": "./bin/index.js",
+    "sb": "./bin/index.js"
+  },
   "files": [
     "bin/**/*",
-    "docs/**/*",
-    "generators/**/*",
-    "lib/**/*",
+    "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*",
+    "versions.json"
   ],
-  "bin": {
-    "getstorybook": "./bin/index.js",
-    "sb": "./bin/index.js"
-  },
   "scripts": {
+    "prepare": "node ../../scripts/prepare.js && node -r esm ./scripts/generate-app-versions.js",
     "test": "cd test && ./run_tests.sh",
-    "test-latest-cra": "cd test && ./test_latest_cra.sh"
+    "test-latest-cra": "cd test && ./test_latest_cra.sh",
+    "test-yarn-2": "cd test && ./run_tests_yarn_2.sh"
   },
   "dependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@storybook/codemod": "5.3.0-rc.0",
-    "chalk": "^3.0.0",
-    "commander": "^4.0.1",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@storybook/codemod": "6.0.0-beta.21",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "chalk": "^4.0.0",
+    "commander": "^5.0.0",
     "core-js": "^3.0.1",
     "cross-spawn": "^7.0.0",
-    "didyoumean": "^1.2.1",
-    "envinfo": "^7.5.0",
-    "esm": "3.2.25",
+    "envinfo": "^7.5.1",
+    "express": "^4.17.1",
     "find-up": "^4.1.0",
-    "fs-extra": "^8.0.1",
+    "fs-extra": "^9.0.0",
+    "get-port": "^5.1.1",
+    "globby": "^11.0.0",
     "inquirer": "^7.0.0",
     "jscodeshift": "^0.6.3",
     "json5": "^2.1.1",
+    "leven": "^3.1.0",
     "pkg-add-deps": "^0.1.0",
-    "semver": "^6.0.0",
+    "puppeteer-core": "^2.0.0",
+    "@storybook/semver": "^7.3.2",
     "shelljs": "^0.8.3",
     "strip-json-comments": "^3.0.1",
-    "update-notifier": "^3.0.0"
+    "update-notifier": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-centered": "5.3.0-rc.0",
-    "@storybook/addon-graphql": "5.3.0-rc.0",
-    "@storybook/addon-info": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "@storybook/addon-links": "5.3.0-rc.0",
-    "@storybook/addon-notes": "5.3.0-rc.0",
-    "@storybook/addon-options": "5.3.0-rc.0",
-    "@storybook/addon-storyshots": "5.3.0-rc.0",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/angular": "5.3.0-rc.0",
-    "@storybook/channel-postmessage": "5.3.0-rc.0",
-    "@storybook/channel-websocket": "5.3.0-rc.0",
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/ember": "5.3.0-rc.0",
-    "@storybook/html": "5.3.0-rc.0",
-    "@storybook/marko": "5.3.0-rc.0",
-    "@storybook/mithril": "5.3.0-rc.0",
-    "@storybook/polymer": "5.3.0-rc.0",
-    "@storybook/preact": "5.3.0-rc.0",
-    "@storybook/rax": "5.3.0-rc.0",
-    "@storybook/react": "5.3.0-rc.0",
-    "@storybook/react-native": "5.3.0-rc.0",
-    "@storybook/riot": "5.3.0-rc.0",
-    "@storybook/svelte": "5.3.0-rc.0",
-    "@storybook/ui": "5.3.0-rc.0",
-    "@storybook/vue": "5.3.0-rc.0",
-    "@storybook/web-components": "5.3.0-rc.0"
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-graphql": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/addon-links": "6.0.0-beta.21",
+    "@storybook/addon-storyshots": "6.0.0-beta.21",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/angular": "6.0.0-beta.21",
+    "@storybook/channel-postmessage": "6.0.0-beta.21",
+    "@storybook/channel-websocket": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/ember": "6.0.0-beta.21",
+    "@storybook/html": "6.0.0-beta.21",
+    "@storybook/marionette": "6.0.0-beta.21",
+    "@storybook/marko": "6.0.0-beta.21",
+    "@storybook/mithril": "6.0.0-beta.21",
+    "@storybook/preact": "6.0.0-beta.21",
+    "@storybook/rax": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@storybook/react-native": "6.0.0-alpha.0",
+    "@storybook/riot": "6.0.0-beta.21",
+    "@storybook/svelte": "6.0.0-beta.21",
+    "@storybook/ui": "6.0.0-beta.21",
+    "@storybook/vue": "6.0.0-beta.21",
+    "@storybook/web-components": "6.0.0-beta.21",
+    "@types/cross-spawn": "^6.0.1",
+    "@types/inquirer": "^6.5.0",
+    "@types/puppeteer-core": "^2.0.0",
+    "@types/semver": "^7.2.0",
+    "@types/shelljs": "^0.8.7",
+    "@types/update-notifier": "^0.0.30"
+  },
+  "peerDependencies": {
+    "jest": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/lib/cli/scripts/generate-app-versions.js b/lib/cli/scripts/generate-app-versions.js
new file mode 100644
index 000000000000..3717442cb300
--- /dev/null
+++ b/lib/cli/scripts/generate-app-versions.js
@@ -0,0 +1,37 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { parse } from 'json5';
+
+const logger = console;
+
+const appsFolder = path.join(__dirname, '..', '..', '..', 'app');
+
+const run = async () => {
+  const apps = await fs.readdir(appsFolder);
+  const versions = await Promise.all(
+    apps.map(async (appName) => {
+      const { name, version } = parse(
+        await fs.readFile(path.join(appsFolder, appName, 'package.json'))
+      );
+
+      return {
+        name,
+        version,
+      };
+    })
+  );
+
+  await fs.writeFile(
+    path.join(__dirname, '..', 'versions.json'),
+    JSON.stringify(
+      versions.reduce((acc, { name, version }) => ({ ...acc, [name]: version }), {}),
+      null,
+      2
+    )
+  );
+};
+
+run().catch((e) => {
+  logger.error(e);
+  process.exit(1);
+});
diff --git a/lib/cli/src/NpmOptions.ts b/lib/cli/src/NpmOptions.ts
new file mode 100644
index 000000000000..f397f5f2f7a6
--- /dev/null
+++ b/lib/cli/src/NpmOptions.ts
@@ -0,0 +1,5 @@
+export type NpmOptions = {
+  useYarn: boolean;
+  skipInstall?: boolean;
+  installAsDevDependencies?: boolean;
+};
diff --git a/lib/cli/src/PackageJson.ts b/lib/cli/src/PackageJson.ts
new file mode 100644
index 000000000000..2acfc43a55b5
--- /dev/null
+++ b/lib/cli/src/PackageJson.ts
@@ -0,0 +1,5 @@
+export type PackageJson = {
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+};
diff --git a/lib/cli/lib/add.test.js b/lib/cli/src/add.test.ts
similarity index 100%
rename from lib/cli/lib/add.test.js
rename to lib/cli/src/add.test.ts
diff --git a/lib/cli/src/add.ts b/lib/cli/src/add.ts
new file mode 100644
index 000000000000..01d82738c583
--- /dev/null
+++ b/lib/cli/src/add.ts
@@ -0,0 +1,170 @@
+import path from 'path';
+import fs from 'fs';
+import { sync as spawnSync } from 'cross-spawn';
+import { hasYarn } from './has_yarn';
+import { latestVersion } from './latest_version';
+import { commandLog, getPackageJson } from './helpers';
+import { PackageJson } from './PackageJson';
+
+const logger = console;
+export const storybookAddonScope = '@storybook/addon-';
+
+const isAddon = async (
+  name: string,
+  npmOptions: {
+    useYarn: boolean;
+  }
+) => {
+  try {
+    await latestVersion(npmOptions, name);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const isStorybookAddon = async (name: string, npmOptions: { useYarn: boolean }) =>
+  isAddon(`${storybookAddonScope}${name}`, npmOptions);
+
+export const getPackageName = (addonName: string, isOfficialAddon: boolean) =>
+  isOfficialAddon ? storybookAddonScope + addonName : addonName;
+
+export const getInstalledStorybookVersion = (packageJson: PackageJson) =>
+  packageJson.devDependencies[
+    // This only considers the first occurrence.
+    Object.keys(packageJson.devDependencies).find((devDep) => /@storybook/.test(devDep))
+  ] || false;
+
+export const getPackageArg = (
+  addonName: string,
+  isOfficialAddon: boolean,
+  packageJson: PackageJson
+) => {
+  if (isOfficialAddon) {
+    const addonNameNoTag = addonName.split('@')[0];
+    const installedStorybookVersion = getInstalledStorybookVersion(packageJson);
+    return installedStorybookVersion
+      ? `${addonNameNoTag}@${getInstalledStorybookVersion(packageJson)}`
+      : addonName;
+  }
+  return addonName;
+};
+
+const installAddon = (
+  addonName: string,
+  npmOptions: { useYarn: boolean },
+  isOfficialAddon: boolean
+) => {
+  const prepareDone = commandLog(`Preparing to install the ${addonName} Storybook addon`);
+  prepareDone();
+  logger.log();
+
+  let result;
+  const packageArg = getPackageArg(addonName, isOfficialAddon, getPackageJson());
+  if (npmOptions.useYarn) {
+    result = spawnSync('yarn', ['add', packageArg, '--dev'], {
+      stdio: 'inherit',
+    });
+  } else {
+    result = spawnSync('npm', ['install', packageArg, '--save-dev'], {
+      stdio: 'inherit',
+    });
+  }
+
+  logger.log();
+  const installDone = commandLog(`Installing the ${addonName} Storybook addon`);
+  if (result.status !== 0) {
+    installDone(
+      `Something went wrong installing the addon: "${getPackageName(addonName, isOfficialAddon)}"`
+    );
+    logger.log();
+    process.exit(1);
+  }
+  installDone();
+};
+
+export const addStorybookAddonToFile = (
+  addonName: string,
+  addonsFile: string[],
+  isOfficialAddon: boolean
+) => {
+  const addonNameNoTag = addonName.split('@')[0];
+  const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/register`));
+
+  if (alreadyRegistered) {
+    return addonsFile;
+  }
+
+  const latestImportIndex = addonsFile.reduce(
+    (prev, curr, currIndex) =>
+      curr.startsWith('import') && curr.includes('register') ? currIndex : prev,
+    -1
+  );
+
+  return [
+    ...addonsFile.slice(0, latestImportIndex + 1),
+    `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`,
+    ...addonsFile.slice(latestImportIndex + 1),
+  ];
+};
+
+const LEGACY_CONFIGS = ['addons', 'config', 'presets'];
+
+const postinstallAddon = async (addonName: string, isOfficialAddon: boolean) => {
+  let skipMsg = null;
+  if (!isOfficialAddon) {
+    skipMsg = 'unofficial addon';
+  } else if (!fs.existsSync('.storybook')) {
+    skipMsg = 'no .storybook config';
+  } else {
+    skipMsg = 'no codmods found';
+    LEGACY_CONFIGS.forEach((config) => {
+      try {
+        const codemod = require.resolve(
+          `${getPackageName(addonName, isOfficialAddon)}/postinstall/${config}.js`
+        );
+        commandLog(`Running postinstall script for ${addonName}`)();
+        let configFile = path.join('.storybook', `${config}.ts`);
+        if (!fs.existsSync(configFile)) {
+          configFile = path.join('.storybook', `${config}.js`);
+          if (!fs.existsSync(configFile)) {
+            fs.writeFileSync(configFile, '', 'utf8');
+          }
+        }
+        spawnSync('npx', ['jscodeshift', '-t', codemod, configFile], {
+          stdio: 'inherit',
+        });
+        skipMsg = null;
+      } catch (err) {
+        // resolve failed, skip
+      }
+    });
+  }
+
+  if (skipMsg) {
+    commandLog(`Skipping postinstall for ${addonName}, ${skipMsg}`)();
+  }
+};
+
+export async function add(
+  addonName: string,
+  options: { useNpm: boolean; skipPostinstall: boolean }
+) {
+  const useYarn = Boolean(options.useNpm !== true) && hasYarn();
+  const npmOptions = {
+    useYarn,
+  };
+  const addonCheckDone = commandLog(`Verifying that ${addonName} is an addon`);
+  const isOfficialAddon = await isStorybookAddon(addonName, npmOptions);
+  if (!isOfficialAddon) {
+    if (!(await isAddon(addonName, npmOptions))) {
+      addonCheckDone(`The provided package was not a Storybook addon: ${addonName}.`);
+      return;
+    }
+  }
+  addonCheckDone();
+  installAddon(addonName, npmOptions, isOfficialAddon);
+  if (!options.skipPostinstall) {
+    await postinstallAddon(addonName, isOfficialAddon);
+  }
+}
diff --git a/lib/cli/src/detect.test.ts b/lib/cli/src/detect.test.ts
new file mode 100644
index 000000000000..98bb4a026ffd
--- /dev/null
+++ b/lib/cli/src/detect.test.ts
@@ -0,0 +1,317 @@
+import fs from 'fs';
+
+import { getBowerJson, getPackageJson } from './helpers';
+import { isStorybookInstalled, detectFrameworkPreset, detect, detectLanguage } from './detect';
+import { ProjectType, SUPPORTED_FRAMEWORKS, SupportedLanguage } from './project_types';
+
+jest.mock('./helpers', () => ({
+  getBowerJson: jest.fn(),
+  getPackageJson: jest.fn(),
+}));
+
+jest.mock('fs', () => ({
+  existsSync: jest.fn(),
+}));
+
+jest.mock('path', () => ({
+  // make it return just the second path, for easier testing
+  join: jest.fn((_, p) => p),
+}));
+
+const MOCK_FRAMEWORK_FILES = [
+  {
+    name: ProjectType.METEOR,
+    files: {
+      '.meteor': 'file content',
+    },
+  },
+  {
+    name: ProjectType.SFC_VUE,
+    files: {
+      'package.json': {
+        dependencies: {
+          vuetify: '1.0.0',
+        },
+        devDependencies: {
+          'vue-loader': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.VUE,
+    files: {
+      'package.json': {
+        dependencies: {
+          vue: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.EMBER,
+    files: {
+      'package.json': {
+        devDependencies: {
+          'ember-cli': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.REACT_PROJECT,
+    files: {
+      'package.json': {
+        peerDependencies: {
+          react: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.REACT_NATIVE,
+    files: {
+      'package.json': {
+        dependencies: {
+          'react-native': '1.0.0',
+        },
+        devDependencies: {
+          'react-native-scripts': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.REACT_SCRIPTS,
+    files: {
+      'package.json': {
+        devDependencies: {
+          'react-scripts': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.WEBPACK_REACT,
+    files: {
+      'package.json': {
+        dependencies: {
+          react: '1.0.0',
+        },
+        devDependencies: {
+          webpack: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.REACT,
+    files: {
+      'package.json': {
+        dependencies: {
+          react: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.ANGULAR,
+    files: {
+      'package.json': {
+        dependencies: {
+          '@angular/core': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.WEB_COMPONENTS,
+    files: {
+      'package.json': {
+        dependencies: {
+          'lit-element': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.MITHRIL,
+    files: {
+      'package.json': {
+        dependencies: {
+          mithril: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.MARIONETTE,
+    files: {
+      'package.json': {
+        dependencies: {
+          'backbone.marionette': '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.MARKO,
+    files: {
+      'package.json': {
+        dependencies: {
+          marko: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.RIOT,
+    files: {
+      'package.json': {
+        dependencies: {
+          riot: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.PREACT,
+    files: {
+      'package.json': {
+        dependencies: {
+          preact: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.SVELTE,
+    files: {
+      'package.json': {
+        dependencies: {
+          svelte: '1.0.0',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.RAX,
+    files: {
+      '.rax': 'file content',
+      'package.json': {
+        dependencies: {
+          rax: '1.0.0',
+        },
+      },
+    },
+  },
+];
+
+describe('Detect', () => {
+  it(`should return type HTML if html option is passed`, () => {
+    (getPackageJson as jest.Mock).mockImplementation(() => true);
+    expect(detect({ html: true })).toBe(ProjectType.HTML);
+  });
+
+  it(`should return type UNDETECTED if neither packageJson or bowerJson exist`, () => {
+    (getPackageJson as jest.Mock).mockImplementation(() => false);
+    (getBowerJson as jest.Mock).mockImplementation(() => false);
+    expect(detect()).toBe(ProjectType.UNDETECTED);
+  });
+
+  it(`should return language typescript if the dependency is present`, () => {
+    (getPackageJson as jest.Mock).mockImplementation(() => ({
+      dependencies: {
+        typescript: '1.0.0',
+      },
+    }));
+    expect(detectLanguage()).toBe(SupportedLanguage.TYPESCRIPT);
+  });
+
+  it(`should return language javascript by default`, () => {
+    (getPackageJson as jest.Mock).mockImplementation(() => true);
+    expect(detectLanguage()).toBe(SupportedLanguage.JAVASCRIPT);
+  });
+
+  describe('isStorybookInstalled should return', () => {
+    it('false if empty devDependency', () => {
+      expect(isStorybookInstalled({ devDependencies: {} }, false)).toBe(false);
+    });
+
+    it('false if no devDependency', () => {
+      expect(isStorybookInstalled({}, false)).toBe(false);
+    });
+
+    SUPPORTED_FRAMEWORKS.forEach((framework) => {
+      it(`true if devDependencies has ${framework} Storybook version`, () => {
+        const devDependencies = {
+          [`@storybook/${framework}`]: '4.0.0-alpha.21',
+        };
+        expect(isStorybookInstalled({ devDependencies }, false)).toBeTruthy();
+      });
+    });
+
+    it('false if forced flag', () => {
+      expect(
+        isStorybookInstalled(
+          {
+            devDependencies: { '@storybook/react': '4.0.0-alpha.21' },
+          },
+          true
+        )
+      ).toBe(false);
+    });
+
+    it('ALREADY_HAS_STORYBOOK if lib is present', () => {
+      expect(
+        isStorybookInstalled({
+          devDependencies: { '@storybook/react': '4.0.0-alpha.21' },
+        })
+      ).toBe(ProjectType.ALREADY_HAS_STORYBOOK);
+    });
+
+    it('UPDATE_PACKAGE_ORGANIZATIONS if legacy lib is detected', () => {
+      expect(
+        isStorybookInstalled({
+          devDependencies: { '@kadira/storybook': '4.0.0-alpha.21' },
+        })
+      ).toBe(ProjectType.UPDATE_PACKAGE_ORGANIZATIONS);
+    });
+  });
+
+  describe('detectFrameworkPreset should return', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    MOCK_FRAMEWORK_FILES.forEach((structure) => {
+      it(`${structure.name}`, () => {
+        (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
+          return Object.keys(structure.files).includes(filePath);
+        });
+
+        const result = detectFrameworkPreset(structure.files['package.json']);
+
+        expect(result).toBe(structure.name);
+      });
+    });
+
+    it(`UNDETECTED for unknown frameworks`, () => {
+      const result = detectFrameworkPreset();
+      expect(result).toBe(ProjectType.UNDETECTED);
+    });
+
+    it('REACT_SCRIPTS for custom react scripts config', () => {
+      const forkedReactScriptsConfig = {
+        '/node_modules/.bin/react-scripts': 'file content',
+      };
+
+      (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
+        return Object.keys(forkedReactScriptsConfig).includes(filePath);
+      });
+
+      const result = detectFrameworkPreset();
+      expect(result).toBe(ProjectType.REACT_SCRIPTS);
+    });
+  });
+});
diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts
new file mode 100644
index 000000000000..9fccbacb74d8
--- /dev/null
+++ b/lib/cli/src/detect.ts
@@ -0,0 +1,117 @@
+import path from 'path';
+import fs from 'fs';
+
+import {
+  ProjectType,
+  supportedTemplates,
+  SUPPORTED_FRAMEWORKS,
+  SupportedLanguage,
+  TemplateConfiguration,
+  TemplateMatcher,
+} from './project_types';
+import { getBowerJson, getPackageJson } from './helpers';
+import { PackageJson } from './PackageJson';
+
+const hasDependency = (packageJson: PackageJson, name: string) => {
+  return !!packageJson.dependencies?.[name] || !!packageJson.devDependencies?.[name];
+};
+
+const hasPeerDependency = (packageJson: PackageJson, name: string) => {
+  return !!packageJson.peerDependencies?.[name];
+};
+
+const getFrameworkPreset = (
+  packageJson: PackageJson,
+  framework: TemplateConfiguration
+): ProjectType | null => {
+  const matcher: TemplateMatcher = {
+    dependencies: [false],
+    peerDependencies: [false],
+    files: [false],
+  };
+
+  const { preset, files, dependencies, peerDependencies, matcherFunction } = framework;
+
+  if (Array.isArray(dependencies) && dependencies.length > 0) {
+    matcher.dependencies = dependencies.map((name) => hasDependency(packageJson, name));
+  }
+
+  if (Array.isArray(peerDependencies) && peerDependencies.length > 0) {
+    matcher.peerDependencies = peerDependencies.map((name) => hasPeerDependency(packageJson, name));
+  }
+
+  if (Array.isArray(files) && files.length > 0) {
+    matcher.files = files.map((name) => fs.existsSync(path.join(process.cwd(), name)));
+  }
+
+  return matcherFunction(matcher) ? preset : null;
+};
+
+export function detectFrameworkPreset(packageJson = {}) {
+  const result = supportedTemplates.find((framework) => {
+    return getFrameworkPreset(packageJson, framework) !== null;
+  });
+
+  return result ? result.preset : ProjectType.UNDETECTED;
+}
+
+export function isStorybookInstalled(dependencies: PackageJson, force?: boolean) {
+  if (!dependencies) {
+    return false;
+  }
+
+  if (!force && dependencies.devDependencies) {
+    if (
+      SUPPORTED_FRAMEWORKS.reduce(
+        (storybookPresent, framework) =>
+          storybookPresent || !!dependencies.devDependencies[`@storybook/${framework}`],
+        false
+      )
+    ) {
+      return ProjectType.ALREADY_HAS_STORYBOOK;
+    }
+
+    if (
+      dependencies.devDependencies['@kadira/storybook'] ||
+      dependencies.devDependencies['@kadira/react-native-storybook']
+    ) {
+      return ProjectType.UPDATE_PACKAGE_ORGANIZATIONS;
+    }
+  }
+  return false;
+}
+
+export function detectLanguage() {
+  let language = SupportedLanguage.JAVASCRIPT;
+  const packageJson = getPackageJson();
+  const bowerJson = getBowerJson();
+  if (!packageJson && !bowerJson) {
+    return language;
+  }
+
+  if (hasDependency(packageJson || bowerJson, 'typescript')) {
+    language = SupportedLanguage.TYPESCRIPT;
+  }
+
+  return language;
+}
+
+export function detect(options: { force?: boolean; html?: boolean } = {}) {
+  const packageJson = getPackageJson();
+  const bowerJson = getBowerJson();
+
+  if (!packageJson && !bowerJson) {
+    return ProjectType.UNDETECTED;
+  }
+
+  const storyBookInstalled = isStorybookInstalled(packageJson, options.force);
+  if (storyBookInstalled) {
+    return storyBookInstalled;
+  }
+
+  if (options.html) {
+    return ProjectType.HTML;
+  }
+
+  return detectFrameworkPreset(packageJson || bowerJson);
+}
diff --git a/lib/cli/src/extract.ts b/lib/cli/src/extract.ts
new file mode 100644
index 000000000000..77aa3ba9420f
--- /dev/null
+++ b/lib/cli/src/extract.ts
@@ -0,0 +1,108 @@
+import path from 'path';
+import { writeFile } from 'fs-extra';
+import puppeteerCore from 'puppeteer-core';
+import express from 'express';
+import getPort from 'get-port';
+import { logger } from '@storybook/node-logger';
+
+const read = async (url: string) => {
+  const browser = await usePuppeteerBrowser();
+  const page = await browser.newPage();
+
+  await page.goto(url);
+
+  await page.waitForFunction(
+    'window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()'
+  );
+  const data = JSON.parse(
+    await page.evaluate(async () => {
+      // eslint-disable-next-line no-undef
+      const d = window.__STORYBOOK_STORY_STORE__.extract();
+
+      const result = Object.entries(d).reduce(
+        (acc, [k, v]: [string, any]) => ({
+          ...acc,
+          [k]: {
+            ...v,
+            parameters: {
+              globalArgs: v.parameters.globalArgs,
+              globalArgTypes: v.parameters.globalArgTypes,
+              options: v.parameters.options,
+              args: v.parameters.args,
+              argTypes: v.parameters.argTypes,
+              framework: v.parameters.framework,
+              fileName: v.parameters.fileName,
+              docsOnly: v.parameters.docsOnly,
+            },
+          },
+        }),
+        {}
+      );
+      return JSON.stringify(result, null, 2);
+    })
+  );
+
+  setImmediate(() => {
+    browser.close();
+  });
+  return data;
+};
+
+const useLocation: (input: string) => Promise<[string, () => void]> = async (input: string) => {
+  if (input.match(/^http/)) {
+    return [input, async () => {}];
+  }
+
+  const app = express();
+
+  app.use(express.static(input));
+
+  const port = await getPort();
+
+  return new Promise((resolve, reject) => {
+    const server = app.listen(port, (e) => {
+      if (e) {
+        reject(e);
+      }
+
+      const result = `http://localhost:${port}/iframe.html`;
+
+      logger.info(`connecting to: ${result}`);
+
+      resolve([result, server.close.bind(server)]);
+    });
+  });
+};
+
+const usePuppeteerBrowser: () => Promise<puppeteerCore.Browser> = async () => {
+  const args = ['--no-sandbox ', '--disable-setuid-sandbox'];
+  try {
+    return await puppeteerCore.launch({ args });
+  } catch (e) {
+    // it's not installed
+    logger.info('installing puppeteer...');
+    return new Promise((resolve, reject) => {
+      // eslint-disable-next-line global-require
+      require('child_process').exec(
+        `node ${require.resolve(path.join('puppeteer-core', 'install.js'))}`,
+        (error: any) => (error ? reject(error) : resolve(puppeteerCore.launch({ args })))
+      );
+    });
+  }
+};
+
+export async function extract(input: string, targetPath: string) {
+  if (input && targetPath) {
+    const [location, exit] = await useLocation(input);
+
+    const stories = await read(location);
+
+    await writeFile(targetPath, JSON.stringify({ stories }, null, 2));
+
+    await exit();
+  } else {
+    throw new Error(
+      'Extract: please specify a path where your built-storybook is (can be a public url) and a target directory'
+    );
+  }
+}
diff --git a/lib/cli/src/generate.ts b/lib/cli/src/generate.ts
new file mode 100644
index 000000000000..ad7457026091
--- /dev/null
+++ b/lib/cli/src/generate.ts
@@ -0,0 +1,98 @@
+import program from 'commander';
+import path from 'path';
+import chalk from 'chalk';
+import envinfo from 'envinfo';
+import leven from 'leven';
+import initiate from './initiate';
+import { add } from './add';
+import { migrate } from './migrate';
+import { extract } from './extract';
+
+// Cannot be `import` as it's not under TS root dir
+const pkg = require('../package.json');
+
+const logger = console;
+
+program
+  .command('init')
+  .description('Initialize Storybook into your project.')
+  .option('-f --force', 'Force add storybook')
+  .option('-s --skip-install', 'Skip installing deps')
+  .option('-N --use-npm', 'Use npm to install deps')
+  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-t --type <type>', 'Add Storybook for a specific project type')
+  .option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format')
+  .option('-y --yes', 'Answer yes to all prompts')
+  .action((options) => initiate(options, pkg));
+
+program
+  .command('add <addon>')
+  .description('Add an addon to your Storybook')
+  .option('-N --use-npm', 'Use NPM to build the Storybook server')
+  .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
+  .action((addonName, options) => add(addonName, options));
+
+program
+  .command('info')
+  .description('Prints debugging information about the local environment')
+  .action(() => {
+    logger.log(chalk.bold('\nEnvironment Info:'));
+    envinfo
+      .run({
+        System: ['OS', 'CPU'],
+        Binaries: ['Node', 'Yarn', 'npm'],
+        Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+        npmPackages: '@storybook/*',
+        npmGlobalPackages: '@storybook/*',
+      })
+      .then(logger.log);
+  });
+
+program
+  .command('migrate [migration]')
+  .description('Run a storybook codemod migration on your source files')
+  .option('-l --list', 'List available migrations')
+  .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js')
+  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option(
+    '-n --dry-run',
+    'Dry run: verify the migration exists and show the files to which it will be applied'
+  )
+  .option(
+    '-r --rename <from-to>',
+    'Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"'
+  )
+  .action((migration, { configDir, glob, dryRun, list, rename, parser }) => {
+    migrate(migration, { configDir, glob, dryRun, list, rename, parser, logger }).catch((err) => {
+      logger.error(err);
+      process.exit(1);
+    });
+  });
+
+program
+  .command('extract [location] [output]')
+  .description('extract stories.json from a built version')
+  .action((location = 'storybook-static', output = path.join(location, 'stories.json')) =>
+    extract(location, output).catch((e) => {
+      logger.error(e);
+      process.exit(1);
+    })
+  );
+
+program.command('*', { noHelp: true }).action(() => {
+  const [, , invalidCmd] = process.argv;
+  logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd);
+  // eslint-disable-next-line
+  const availableCommands = program.commands.map((cmd) => cmd._name);
+  const suggestion = availableCommands.find((cmd) => leven(cmd, invalidCmd) < 3);
+  if (suggestion) {
+    logger.log(`\n Did you mean ${suggestion}?`);
+  }
+  process.exit(1);
+});
+
+program.usage('<command> [options]').version(pkg.version).parse(process.argv);
+
+if (program.rawArgs.length < 3) {
+  program.help();
+}
diff --git a/lib/cli/generators/.eslintrc.js b/lib/cli/src/generators/.eslintrc.js
similarity index 100%
rename from lib/cli/generators/.eslintrc.js
rename to lib/cli/src/generators/.eslintrc.js
diff --git a/lib/cli/src/generators/ANGULAR/angular-helpers.ts b/lib/cli/src/generators/ANGULAR/angular-helpers.ts
new file mode 100644
index 000000000000..cf38ccf2c642
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/angular-helpers.ts
@@ -0,0 +1,54 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { readFileAsJson, writeFileAsJson } from '../../helpers';
+
+type TsConfig = {
+  extends: string;
+};
+
+export function getAngularAppTsConfigPath() {
+  const angularJson = readFileAsJson('angular.json', true);
+  const { defaultProject } = angularJson;
+  const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
+
+  if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
+    return false;
+  }
+  return tsConfigPath;
+}
+
+export function getAngularAppTsConfigJson() {
+  const tsConfigPath = getAngularAppTsConfigPath();
+
+  if (!tsConfigPath) {
+    return false;
+  }
+
+  return readFileAsJson(tsConfigPath, true);
+}
+
+function setStorybookTsconfigExtendsPath(tsconfigJson: TsConfig) {
+  const angularProjectTsConfigPath = getAngularAppTsConfigPath();
+  const newTsconfigJson = { ...tsconfigJson };
+  newTsconfigJson.extends = `../${angularProjectTsConfigPath}`;
+  return newTsconfigJson;
+}
+
+export function editStorybookTsConfig(tsconfigPath: string) {
+  let tsConfigJson;
+  try {
+    tsConfigJson = readFileAsJson(tsconfigPath);
+  } catch (e) {
+    if (e.name === 'SyntaxError' && e.message.indexOf('Unexpected token /') > -1) {
+      throw new Error(`Comments are disallowed in ${tsconfigPath}`);
+    }
+    throw e;
+  }
+  tsConfigJson = setStorybookTsconfigExtendsPath(tsConfigJson);
+  writeFileAsJson(tsconfigPath, tsConfigJson);
+}
+
+export function isDefaultProjectSet() {
+  const angularJson = readFileAsJson('angular.json', true);
+  return angularJson && !!angularJson.defaultProject;
+}
diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts
new file mode 100644
index 000000000000..cc9d5921366f
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/index.ts
@@ -0,0 +1,81 @@
+import path from 'path';
+import {
+  isDefaultProjectSet,
+  editStorybookTsConfig,
+  getAngularAppTsConfigJson,
+  getAngularAppTsConfigPath,
+} from './angular-helpers';
+import {
+  retrievePackageJson,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  writeFileAsJson,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { NpmOptions } from '../../NpmOptions';
+import { Generator, GeneratorOptions } from '../Generator';
+
+async function addDependencies(npmOptions: NpmOptions, { storyFormat }: GeneratorOptions) {
+  const packages = [
+    '@storybook/angular',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+  ];
+
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+}
+
+function editAngularAppTsConfig() {
+  const tsConfigJson = getAngularAppTsConfigJson();
+  const glob = '**/*.stories.ts';
+  if (!tsConfigJson) {
+    return;
+  }
+
+  const { exclude = [] } = tsConfigJson;
+  if (exclude.includes(glob)) {
+    return;
+  }
+
+  tsConfigJson.exclude = [...exclude, glob];
+  writeFileAsJson(getAngularAppTsConfigPath(), tsConfigJson);
+}
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  if (!isDefaultProjectSet()) {
+    throw new Error(
+      'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.'
+    );
+  }
+
+  copyTemplate(__dirname, storyFormat);
+
+  await addDependencies(npmOptions, { storyFormat });
+  editAngularAppTsConfig();
+  editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json'));
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/ANGULAR/template-csf/.storybook/main.js b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..16aa97cdc160
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/generators/ANGULAR/template-csf/.storybook/tsconfig.json b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json
similarity index 100%
rename from lib/cli/generators/ANGULAR/template-csf/.storybook/tsconfig.json
rename to lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json
diff --git a/lib/cli/generators/ANGULAR/template-csf/.storybook/typings.d.ts b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/typings.d.ts
similarity index 100%
rename from lib/cli/generators/ANGULAR/template-csf/.storybook/typings.d.ts
rename to lib/cli/src/generators/ANGULAR/template-csf/.storybook/typings.d.ts
diff --git a/lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
new file mode 100644
index 000000000000..058c0cc13555
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
@@ -0,0 +1,13 @@
+import { Welcome } from '@storybook/angular/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  component: Welcome,
+  props: {},
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts b/lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
new file mode 100644
index 000000000000..4f740006eaca
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/angular/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  component: Button,
+  props: {
+    text: 'Hello Button',
+  },
+});
+
+export const Emoji = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+});
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => ({
+  component: Button,
+  props: {
+    text: 'Trigger Action',
+    onClick: () => action('This was clicked')(),
+  },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..43bbb3968c48
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/tsconfig.json
similarity index 100%
rename from lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json
rename to lib/cli/src/generators/ANGULAR/template-mdx/.storybook/tsconfig.json
diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts b/lib/cli/src/generators/ANGULAR/template-mdx/.storybook/typings.d.ts
similarity index 100%
rename from lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts
rename to lib/cli/src/generators/ANGULAR/template-mdx/.storybook/typings.d.ts
diff --git a/lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx
new file mode 100644
index 000000000000..9aabc6f50ed2
--- /dev/null
+++ b/lib/cli/src/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx
@@ -0,0 +1,49 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/angular/demo';
+
+<Meta title="Button" component={Button} />
+
+# Button
+
+This `Button` document defines a few stories:
+
+<Story name="text">
+  {{
+    component: Button,
+    props: {
+      text: 'Hello Button',
+    },
+  }}
+</Story>
+
+<Story name="emoji">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+    },
+  }}
+</Story>
+
+<Story name="With an action">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+      onClick: () => action('This was clicked')(),
+    },
+  }}
+</Story>
+
+<Story name="button with link to another story">
+  {{
+    component: Button,
+    props: {
+      text: 'Go to Welcome Story',
+      onClick: linkTo('Welcome'),
+    },
+  }}
+</Story>
diff --git a/lib/cli/src/generators/AURELIA/index.ts b/lib/cli/src/generators/AURELIA/index.ts
new file mode 100644
index 000000000000..3f7362f13759
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/index.ts
@@ -0,0 +1,61 @@
+import {
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  getPackageJson,
+  writeFileAsJson,
+  copyTemplate,
+  readFileAsJson,
+} from '../../helpers';
+import { Generator } from '../Generator';
+import { StoryFormat } from '../../project_types';
+
+function addStorybookExcludeGlobToTsConfig() {
+  const tsConfigJson = readFileAsJson('tsconfig.json', true);
+  const glob = '**/*.stories.ts';
+  if (!tsConfigJson) {
+    return;
+  }
+
+  const { exclude = [] } = tsConfigJson;
+  if (exclude.includes(glob)) {
+    return;
+  }
+
+  tsConfigJson.exclude = [...exclude, glob];
+  writeFileAsJson('tsconfig.json', tsConfigJson);
+}
+const generator: Generator = async (npmOptions, { storyFormat = StoryFormat.CSF }) => {
+  copyTemplate(__dirname, storyFormat);
+  const packages = [
+    '@storybook/aurelia',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-options',
+    '@storybook/addon-a11y',
+    '@storybook/addon-backgrounds',
+    'aurelia',
+  ];
+
+  if (storyFormat === 'mdx') {
+    packages.push('@storybook/addon-docs');
+  }
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+  const packageJson = getPackageJson();
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+  writePackageJson(packageJson);
+  addStorybookExcludeGlobToTsConfig();
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js b/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..16aa97cdc160
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/AURELIA/template-csf/.storybook/tsconfig.json b/lib/cli/src/generators/AURELIA/template-csf/.storybook/tsconfig.json
new file mode 100644
index 000000000000..28aadc68fd9a
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-csf/.storybook/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "%SET_DURING_SB_INIT%",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}
diff --git a/lib/cli/src/generators/AURELIA/template-csf/.storybook/typings.d.ts b/lib/cli/src/generators/AURELIA/template-csf/.storybook/typings.d.ts
new file mode 100644
index 000000000000..f73d61b396c9
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-csf/.storybook/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
diff --git a/lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts
new file mode 100644
index 000000000000..92ddbc26b274
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts
@@ -0,0 +1,13 @@
+import { Welcome } from '@storybook/aurelia/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  component: Welcome,
+  props: {},
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts b/lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts
new file mode 100644
index 000000000000..436ff09cb414
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts
@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/aurelia/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  component: Button,
+  props: {
+    text: 'Hello Button',
+  },
+});
+
+export const Emoji = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+});
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => ({
+  component: Button,
+  props: {
+    text: 'Trigger Action',
+    onClick: () => action('This was clicked')(),
+  },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..43bbb3968c48
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/AURELIA/template-mdx/.storybook/tsconfig.json b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/tsconfig.json
new file mode 100644
index 000000000000..28aadc68fd9a
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "%SET_DURING_SB_INIT%",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}
diff --git a/lib/cli/src/generators/AURELIA/template-mdx/.storybook/typings.d.ts b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/typings.d.ts
new file mode 100644
index 000000000000..f73d61b396c9
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-mdx/.storybook/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx
new file mode 100644
index 000000000000..17ad75634de5
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/0-Welcome.stories.mdx
@@ -0,0 +1,17 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Welcome } from '@storybook/aurelia/demo';
+
+<Meta title="Welcome" component={Welcome} />
+
+# Welcome
+
+This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block:
+
+<Preview withToolbar>
+  <Story name="to Storybook">
+    {{
+      component: Welcome,
+      props: {},
+    }}
+  </Story>
+</Preview>
diff --git a/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx
new file mode 100644
index 000000000000..fe4f47834396
--- /dev/null
+++ b/lib/cli/src/generators/AURELIA/template-mdx/src/stories/1-Button.stories.mdx
@@ -0,0 +1,49 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/aurelia/demo';
+
+<Meta title="Button" component={Button} />
+
+# Button
+
+This `Button` document defines a few stories:
+
+<Story name="text">
+  {{
+    component: Button,
+    props: {
+      text: 'Hello Button',
+    },
+  }}
+</Story>
+
+<Story name="emoji">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+    },
+  }}
+</Story>
+
+<Story name="With an action">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+      onClick: () => action('This was clicked')(),
+    },
+  }}
+</Story>
+
+<Story name="button with link to another story">
+  {{
+    component: Button,
+    props: {
+      text: 'Go to Welcome Story',
+      onClick: linkTo('Welcome'),
+    },
+  }}
+</Story>
diff --git a/lib/cli/src/generators/EMBER/index.ts b/lib/cli/src/generators/EMBER/index.ts
new file mode 100644
index 000000000000..874e81e6e2e7
--- /dev/null
+++ b/lib/cli/src/generators/EMBER/index.ts
@@ -0,0 +1,61 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    babelPluginEmberModulePolyfillVersion,
+    babelPluginHtmlBarsInlinePrecompileVersion,
+    linksVersion,
+    actionsVersion,
+    addonsVersion,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/ember',
+    // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
+    'babel-plugin-ember-modules-api-polyfill',
+    // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
+    'babel-plugin-htmlbars-inline-precompile',
+    '@storybook/addon-links',
+    '@storybook/addon-actions',
+    '@storybook/addons'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = {
+    ...packageJson.scripts,
+    ...{
+      storybook: 'start-storybook -p 6006 -s dist',
+      'build-storybook': 'build-storybook -s dist',
+    },
+  };
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/ember@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+    `babel-plugin-ember-modules-api-polyfill@${babelPluginEmberModulePolyfillVersion}`,
+    `babel-plugin-htmlbars-inline-precompile@${babelPluginHtmlBarsInlinePrecompileVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js b/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/EMBER/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/EMBER/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/EMBER/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..2b6a7d76243e
--- /dev/null
+++ b/lib/cli/src/generators/EMBER/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,20 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => ({
+  template: hbs`
+    <div>
+      <h3> Welcome to storybook </h3>
+      <button {{action onClick}}> Checkout the button example </button>
+    </div>
+  `,
+  context: {
+    onClick: linkTo('Button'),
+  },
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/EMBER/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/EMBER/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..98e1959eb66f
--- /dev/null
+++ b/lib/cli/src/generators/EMBER/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,56 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Button',
+};
+
+export const Text = () => ({
+  template: hbs`<button {{action onClick}}>Hello Button</button>`,
+  context: {
+    onClick: action('clicked'),
+  },
+});
+
+export const Emoji = () => ({
+  template: hbs`
+    <button {{action onClick}}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </button>
+  `,
+  context: {
+    onClick: action('clicked'),
+  },
+});
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => ({
+  template: hbs`
+    <button {{action onClick}}>
+      Trigger Action
+    </button>
+  `,
+  context: {
+    onClick: () => action('This was clicked')(),
+  },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  template: hbs`
+    <button {{action onClick}}>
+      Go to Welcome Story
+    </button>
+  `,
+  context: {
+    onClick: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/Generator.ts b/lib/cli/src/generators/Generator.ts
new file mode 100644
index 000000000000..b6143c0c92dc
--- /dev/null
+++ b/lib/cli/src/generators/Generator.ts
@@ -0,0 +1,8 @@
+import { NpmOptions } from '../NpmOptions';
+import { StoryFormat } from '../project_types';
+
+export type GeneratorOptions = {
+  storyFormat: StoryFormat;
+};
+
+export type Generator = (npmOptions: NpmOptions, options: GeneratorOptions) => Promise<void>;
diff --git a/lib/cli/src/generators/HTML/index.ts b/lib/cli/src/generators/HTML/index.ts
new file mode 100755
index 000000000000..25d850192b6c
--- /dev/null
+++ b/lib/cli/src/generators/HTML/index.ts
@@ -0,0 +1,38 @@
+import {
+  retrievePackageJson,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links'];
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/HTML/template-csf/.storybook/main.js b/lib/cli/src/generators/HTML/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/HTML/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..8c44b0266d1f
--- /dev/null
+++ b/lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,46 @@
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => `
+<main>
+  <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
+    <span class="inline-code">src/stories</span> 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 (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component
+    called <span class="inline-code">Button</span> .
+  </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 <span class="inline-code">Button</span> stories located at
+    <span class="inline-code">src/stories/1-Button.stories.js</span>.)
+  </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"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Writing Stories
+    </a>
+    section in our documentation.
+  </p>
+  <p class="note">
+    <b>NOTE:</b> <br />
+    Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
+    webpack loaders and plugins you are using in this project.
+  </p>
+</main>`;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/HTML/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/HTML/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..63342a3f2ccd
--- /dev/null
+++ b/lib/cli/src/generators/HTML/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,45 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Button',
+};
+
+export const Text = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = 'Hello Button';
+  btn.addEventListener('click', action('clicked'));
+  return btn;
+};
+
+export const Emoji = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = '😀 😎 👍 💯';
+  btn.addEventListener('click', action('clicked'));
+  return btn;
+};
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = 'Trigger Action';
+  btn.addEventListener('click', () => action('This was clicked')());
+  return btn;
+};
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = 'Go to Welcome Story';
+  btn.addEventListener('click', linkTo('Welcome'));
+  return btn;
+};
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js b/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..c3211c951880
--- /dev/null
+++ b/lib/cli/src/generators/HTML/template-mdx/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|mdx)'],
+  addons: ['@storybook/addon-docs'],
+};
diff --git a/lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx b/lib/cli/src/generators/HTML/template-mdx/stories/index.stories.mdx
similarity index 100%
rename from lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx
rename to lib/cli/src/generators/HTML/template-mdx/stories/index.stories.mdx
diff --git a/lib/cli/src/generators/MARIONETTE/index.ts b/lib/cli/src/generators/MARIONETTE/index.ts
new file mode 100644
index 000000000000..e3ce805931a8
--- /dev/null
+++ b/lib/cli/src/generators/MARIONETTE/index.ts
@@ -0,0 +1,35 @@
+import fse from 'fs-extra';
+import path from 'path';
+import {
+  getVersion,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  retrievePackageJson,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions) => {
+  const storybookVersion = await getVersion(npmOptions, '@storybook/marionette');
+  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/marionette@${storybookVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/MARIONETTE/template/.storybook/main.js b/lib/cli/src/generators/MARIONETTE/template/.storybook/main.js
new file mode 100644
index 000000000000..a0f65ec500a5
--- /dev/null
+++ b/lib/cli/src/generators/MARIONETTE/template/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: '../stories/**/*.stories.js',
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
+};
diff --git a/lib/cli/src/generators/MARIONETTE/template/stories/index.stories.js b/lib/cli/src/generators/MARIONETTE/template/stories/index.stories.js
new file mode 100644
index 000000000000..32f924b93608
--- /dev/null
+++ b/lib/cli/src/generators/MARIONETTE/template/stories/index.stories.js
@@ -0,0 +1,20 @@
+import Marionette from 'backbone.marionette';
+
+import { storiesOf } from '@storybook/marionette';
+
+storiesOf('Demo', module).add(
+  'button',
+  () =>
+    new Marionette.View({
+      template: () => '<button id="my_button">some button</button>',
+      ui: {
+        button: '#my_button',
+      },
+      triggers: {
+        'click @ui.button': 'click',
+      },
+      onClick() {
+        console.log('button clicked');
+      },
+    })
+);
diff --git a/lib/cli/src/generators/MARKO/index.ts b/lib/cli/src/generators/MARKO/index.ts
new file mode 100644
index 000000000000..b8a3bc0e40e1
--- /dev/null
+++ b/lib/cli/src/generators/MARKO/index.ts
@@ -0,0 +1,42 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [storybookVersion, addonActionVersion, addonKnobsVersion] = await getVersions(
+    npmOptions,
+    '@storybook/marko',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/marko@${storybookVersion}`,
+    `@storybook/addon-actions@${addonActionVersion}`,
+    `@storybook/addon-knobs@${addonKnobsVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js b/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..c6a06f1fbc34
--- /dev/null
+++ b/lib/cli/src/generators/MARKO/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
+};
diff --git a/lib/cli/generators/MARKO/template-csf/stories/components/welcome/index.marko b/lib/cli/src/generators/MARKO/template-csf/stories/components/welcome/index.marko
similarity index 99%
rename from lib/cli/generators/MARKO/template-csf/stories/components/welcome/index.marko
rename to lib/cli/src/generators/MARKO/template-csf/stories/components/welcome/index.marko
index 09d5824d4c0b..272d7211f2bf 100644
--- a/lib/cli/generators/MARKO/template-csf/stories/components/welcome/index.marko
+++ b/lib/cli/src/generators/MARKO/template-csf/stories/components/welcome/index.marko
@@ -41,6 +41,6 @@ style {
 }
 
 <div#app>
-  <h1>Welcome to Storybook for Marko</h1>
+  <h1>Welcome to storybook</h1>
   <div.logo></div>
 </div>
diff --git a/lib/cli/generators/MARKO/template-csf/stories/index.stories.js b/lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js
similarity index 100%
rename from lib/cli/generators/MARKO/template-csf/stories/index.stories.js
rename to lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js
diff --git a/lib/cli/src/generators/METEOR/index.ts b/lib/cli/src/generators/METEOR/index.ts
new file mode 100644
index 000000000000..6420a01f0b03
--- /dev/null
+++ b/lib/cli/src/generators/METEOR/index.ts
@@ -0,0 +1,99 @@
+import fs from 'fs';
+import JSON5 from 'json5';
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    knobsVersion,
+    addonsVersion,
+    reactVersion,
+    reactDomVersion,
+    presetEnvVersion,
+    presetReactVersion,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/react',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addons',
+    'react',
+    'react-dom',
+    '@babel/preset-env',
+    '@babel/preset-react'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.dependencies = packageJson.dependencies || {};
+
+  const devDependencies = [
+    `@storybook/react@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addon-knobs@${knobsVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+  ];
+
+  // create or update .babelrc
+  let babelrc = null;
+  if (fs.existsSync('.babelrc')) {
+    const babelrcContent = fs.readFileSync('.babelrc', 'utf8');
+    babelrc = JSON5.parse(babelrcContent);
+    babelrc.plugins = babelrc.plugins || [];
+  } else {
+    babelrc = {
+      presets: [
+        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+        '@babel/preset-react',
+      ],
+    };
+
+    devDependencies.push(`@babel/preset-env@${presetEnvVersion}`);
+    devDependencies.push(`@babel/preset-react@${presetReactVersion}`);
+  }
+
+  fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
+
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  // add react packages.
+  const dependencies = [];
+  if (!packageJson.dependencies.react) {
+    dependencies.push(`react@${reactVersion}`);
+  }
+  if (!packageJson.dependencies['react-dom']) {
+    dependencies.push(`react-dom@${reactDomVersion}`);
+  }
+
+  if (dependencies.length > 0) {
+    installDependencies(
+      { ...npmOptions, packageJson, installAsDevDependencies: false },
+      dependencies
+    );
+  }
+
+  installDependencies({ ...npmOptions, packageJson }, [...devDependencies, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js b/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..c6a06f1fbc34
--- /dev/null
+++ b/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
+};
diff --git a/lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..9920a416e1ff
--- /dev/null
+++ b/lib/cli/src/generators/METEOR/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/METEOR/template-csf/stories/1-Button.stories.js
similarity index 100%
rename from lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js
rename to lib/cli/src/generators/METEOR/template-csf/stories/1-Button.stories.js
diff --git a/lib/cli/src/generators/MITHRIL/index.ts b/lib/cli/src/generators/MITHRIL/index.ts
new file mode 100644
index 000000000000..d6bff9454643
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/index.ts
@@ -0,0 +1,52 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    knobsVersion,
+    addonsVersion,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/mithril',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addons'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/mithril@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addon-knobs@${knobsVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js b/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..c6a06f1fbc34
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
+};
diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..13a71f805c32
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,14 @@
+import m from 'mithril';
+import { linkTo } from '@storybook/addon-links';
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  view: () => m(Welcome, { showApp: linkTo('Button') }),
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/MITHRIL/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..ac84800bc03f
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,37 @@
+import m from 'mithril';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+});
+
+export const Emoji = () => ({
+  view: () =>
+    m(
+      Button,
+      { onclick: action('clicked') },
+      m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+    ),
+});
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => ({
+  view: () => m(Button, { onclick: () => action('This was clicked')() }, 'Trigger Action'),
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  view: () => m(Button, { onclick: linkTo('Welcome') }, 'Go to Welcome Story'),
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/Button.js b/lib/cli/src/generators/MITHRIL/template-csf/stories/Button.js
new file mode 100644
index 000000000000..f459403fdca7
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/template-csf/stories/Button.js
@@ -0,0 +1,23 @@
+/** @jsx m */
+
+import m from 'mithril';
+
+const style = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = {
+  view: (vnode) => (
+    <button type="button" style={style} {...vnode.attrs}>
+      {vnode.children}
+    </button>
+  ),
+};
+
+export default Button;
diff --git a/lib/cli/src/generators/MITHRIL/template-csf/stories/Welcome.js b/lib/cli/src/generators/MITHRIL/template-csf/stories/Welcome.js
new file mode 100644
index 000000000000..6e34daae2774
--- /dev/null
+++ b/lib/cli/src/generators/MITHRIL/template-csf/stories/Welcome.js
@@ -0,0 +1,179 @@
+/** @jsx m */
+
+import m from 'mithril';
+import { linkTo, hrefTo } from '@storybook/addon-links';
+
+const Main = {
+  view: (vnode) => (
+    <article
+      style={{
+        padding: 15,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      {vnode.children}
+    </article>
+  ),
+};
+
+const Title = {
+  view: (vnode) => <h1>{vnode.children}</h1>,
+};
+
+const Note = {
+  view: (vnode) => (
+    <p
+      style={{
+        opacity: 0.5,
+      }}
+    >
+      {vnode.children}
+    </p>
+  ),
+};
+
+const InlineCode = {
+  view: (vnode) => (
+    <code
+      style={{
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      }}
+    >
+      {vnode.children}
+    </code>
+  ),
+};
+
+const Link = {
+  view: (vnode) => (
+    <a
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const NavButton = {
+  view: (vnode) => (
+    <button
+      type="button"
+      style={{
+        borderTop: 'none',
+        borderRight: 'none',
+        borderLeft: 'none',
+        backgroundColor: 'transparent',
+        padding: 0,
+        cursor: 'pointer',
+        font: 'inherit',
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </button>
+  ),
+};
+
+const StoryLink = {
+  oninit: (vnode) => {
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = '/';
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.onclick = () => {
+      linkTo(vnode.attrs.kind, vnode.attrs.story)();
+      return false;
+    };
+    StoryLink.updateHref(vnode);
+  },
+  updateHref: async (vnode) => {
+    const href = await hrefTo(vnode.attrs.kind, vnode.attrs.story);
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = href;
+    m.redraw();
+  },
+  view: (vnode) => (
+    <a
+      href={vnode.state.href}
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      }}
+      onClick={vnode.state.onclick}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const Welcome = {
+  view: (vnode) => (
+    <Main>
+      <Title>Welcome to storybook</Title>
+      <p>This is a UI component dev environment for your app.</p>
+      <p>
+        We've added some basic stories inside the <InlineCode>src/stories</InlineCode> 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&nbsp;
+        {vnode.attrs.showApp ? (
+          <NavButton onclick={vnode.attrs.showApp}>stories</NavButton>
+        ) : (
+          <StoryLink kind={vnode.attrs.showKind} story={vnode.attrs.showStory}>
+            stories
+          </StoryLink>
+        )}
+        &nbsp;for a component called <InlineCode>Button</InlineCode>.
+      </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 <InlineCode>Button</InlineCode> stories located at&nbsp;
+        <InlineCode>src/stories/1-Button.stories.js</InlineCode>
+        .)
+      </p>
+      <p>
+        Usually we create stories with smaller UI components in the app.
+        <br />
+        Have a look at the&nbsp;
+        <Link
+          href="https://storybook.js.org/basics/writing-stories"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Writing Stories
+        </Link>
+        &nbsp;section in our documentation.
+      </p>
+      <Note>
+        <b>NOTE:</b>
+        <br />
+        Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
+        loaders and plugins you are using in this project.
+      </Note>
+    </Main>
+  ),
+};
+
+export default Welcome;
diff --git a/lib/cli/src/generators/PREACT/index.ts b/lib/cli/src/generators/PREACT/index.ts
new file mode 100644
index 000000000000..42c9eb416c9d
--- /dev/null
+++ b/lib/cli/src/generators/PREACT/index.ts
@@ -0,0 +1,44 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
+    npmOptions,
+    '@storybook/preact',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/preact@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js b/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/PREACT/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/PREACT/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..1c647ee97411
--- /dev/null
+++ b/lib/cli/src/generators/PREACT/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,14 @@
+/** @jsx h */
+import { h } from 'preact';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/PREACT/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..0c4397ea036d
--- /dev/null
+++ b/lib/cli/src/generators/PREACT/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,36 @@
+/** @jsx h */
+import { h } from 'preact';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => (
+  <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
+);
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => (
+  <Button onClick={linkTo('Welcome')}>Go to Welcome Story</Button>
+);
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/generators/PREACT/template-csf/stories/Button.js b/lib/cli/src/generators/PREACT/template-csf/stories/Button.js
similarity index 100%
rename from lib/cli/generators/PREACT/template-csf/stories/Button.js
rename to lib/cli/src/generators/PREACT/template-csf/stories/Button.js
diff --git a/lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js b/lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js
new file mode 100644
index 000000000000..b4ce7052f260
--- /dev/null
+++ b/lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js
@@ -0,0 +1,129 @@
+/** @jsx h */
+import { h } from 'preact';
+
+const Main = (props) => (
+  <article
+    {...props}
+    style={{
+      padding: 15,
+      lineHeight: 1.4,
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#ffffff',
+    }}
+  />
+);
+
+// eslint-disable-next-line react/prop-types
+const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
+
+const Note = (props) => (
+  <p
+    {...props}
+    style={{
+      opacity: 0.5,
+    }}
+  />
+);
+
+const InlineCode = (props) => (
+  <code
+    {...props}
+    style={{
+      fontSize: 15,
+      fontWeight: 600,
+      padding: '2px 5px',
+      border: '1px solid #eae9e9',
+      borderRadius: 4,
+      backgroundColor: '#f3f2f2',
+      color: '#3a3a3a',
+    }}
+  />
+);
+
+// eslint-disable-next-line react/prop-types
+const Link = ({ children, href, ...props }) => (
+  <a
+    href={href}
+    {...props}
+    style={{
+      color: '#1474f3',
+      textDecoration: 'none',
+      borderBottom: '1px solid #1474f3',
+      paddingBottom: 2,
+    }}
+  >
+    {children}
+  </a>
+);
+
+// eslint-disable-next-line react/prop-types
+const NavButton = ({ children, ...props }) => (
+  <button
+    {...props}
+    type="button"
+    style={{
+      color: '#1474f3',
+      textDecoration: 'none',
+      borderBottom: '1px solid #1474f3',
+      paddingBottom: 2,
+      borderTop: 'none',
+      borderRight: 'none',
+      borderLeft: 'none',
+      backgroundColor: 'transparent',
+      padding: 0,
+      cursor: 'pointer',
+      font: 'inherit',
+    }}
+  >
+    {children}
+  </button>
+);
+
+/* eslint-disable-next-line react/prop-types */
+const Welcome = ({ showApp }) => (
+  <Main>
+    <Title>Welcome to storybook</Title>
+    <p>This is a UI component dev environment for your app.</p>
+    <p>
+      We've added some basic stories inside the <InlineCode>src/stories</InlineCode> 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 <NavButton onClick={showApp}>stories</NavButton> for a component called&nbsp;
+      <InlineCode>Button</InlineCode>.
+    </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 <InlineCode>Button</InlineCode> stories located at&nbsp;
+      <InlineCode>src/stories/1-Button.stories.js</InlineCode>
+      .)
+    </p>
+    <p>
+      Usually we create stories with smaller UI components in the app.
+      <br />
+      Have a look at the&nbsp;
+      <Link
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Writing Stories
+      </Link>
+      &nbsp;section in our documentation.
+    </p>
+    <Note>
+      <b>NOTE:</b>
+      <br />
+      Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
+      loaders and plugins you are using in this project.
+    </Note>
+  </Main>
+);
+
+export { Welcome as default };
diff --git a/lib/cli/src/generators/RAX/index.ts b/lib/cli/src/generators/RAX/index.ts
new file mode 100644
index 000000000000..4ac18e259ab9
--- /dev/null
+++ b/lib/cli/src/generators/RAX/index.ts
@@ -0,0 +1,62 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    addonsVersion,
+    latestRaxVersion,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/rax',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    'rax'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  const raxVersion = packageJson.dependencies.rax || latestRaxVersion;
+
+  // in case Rax project is not detected, `rax` package is not available either
+  packageJson.dependencies.rax = packageJson.dependencies.rax || raxVersion;
+
+  // these packages are required for Welcome story
+  packageJson.dependencies['rax-image'] = packageJson.dependencies['rax-image'] || raxVersion;
+  packageJson.dependencies['rax-link'] = packageJson.dependencies['rax-link'] || raxVersion;
+  packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
+  packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/rax@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/RAX/template-csf/.storybook/main.js b/lib/cli/src/generators/RAX/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/RAX/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/RAX/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/RAX/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..8dbdb2d533d3
--- /dev/null
+++ b/lib/cli/src/generators/RAX/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,13 @@
+import { createElement } from 'rax';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button', 'with text')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/RAX/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/RAX/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..7cdc117ed615
--- /dev/null
+++ b/lib/cli/src/generators/RAX/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,42 @@
+import { createElement } from 'rax';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Text from 'rax-text';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => (
+  <button type="button">
+    <Text>Hello Button</Text>
+  </button>
+);
+
+export const Emoji = () => (
+  <button onClick={action('clicked')} type="button">
+    <Text role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </Text>
+  </button>
+);
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => (
+  <button onClick={() => action('This was clicked')()} type="button">
+    <Text>Trigger Action</Text>
+  </button>
+);
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => (
+  <button onClick={linkTo('Welcome')} type="button">
+    <Text>Go to Welcome Story</Text>
+  </button>
+);
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/RAX/template-csf/stories/Welcome.js b/lib/cli/src/generators/RAX/template-csf/stories/Welcome.js
new file mode 100644
index 000000000000..340844748cd3
--- /dev/null
+++ b/lib/cli/src/generators/RAX/template-csf/stories/Welcome.js
@@ -0,0 +1,119 @@
+/* eslint-disable react/prop-types, jsx-a11y/anchor-is-valid */
+import { createElement } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Image from 'rax-image';
+import Link from 'rax-link';
+
+const Main = ({ children, ...props }) => (
+  <View
+    {...props}
+    style={{
+      margin: 15,
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+    }}
+  >
+    {children}
+  </View>
+);
+
+const P = ({ children, ...props }) => (
+  <View {...props} style={{ marginBottom: 10 }}>
+    <Text style={{ fontSize: 12 }}>{children}</Text>
+  </View>
+);
+
+const Title = ({ children, ...props }) => (
+  <Text {...props} style={{ fontSize: 40, fontWeight: 'bold' }}>
+    {children}
+  </Text>
+);
+
+const Note = ({ children, ...props }) => (
+  <View
+    {...props}
+    style={{
+      opacity: 0.5,
+    }}
+  >
+    {children}
+  </View>
+);
+
+const InlineCode = ({ children, ...props }) => (
+  <Text
+    {...props}
+    style={{
+      fontFamily: 'monospace',
+      fontSize: 12,
+      padding: '2px 5px',
+      border: '1px solid #eae9e9',
+      borderRadius: 4,
+      backgroundColor: '#f3f2f2',
+      color: '#3a3a3a',
+    }}
+  >
+    {children}
+  </Text>
+);
+
+const Welcome = ({ showApp }) => (
+  <Main>
+    <Title>Welcome to storybook for Rax</Title>
+    <Image
+      source={{
+        uri: './rax-logo.png',
+      }}
+      fallbackSource={{
+        uri:
+          'https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png',
+      }}
+      style={{
+        width: 100,
+        height: 100,
+        margin: '0 auto',
+      }}
+      resizeMode="cover"
+    />
+
+    <P>This is a UI component dev environment for your Rax app.</P>
+    <P>
+      We've added some basic stories inside the <InlineCode>src/stories</InlineCode> directory. A
+      story is a single state of one or more UI components. You can have as many stories as you
+      want. (Basically a story is like a visual test case.)
+    </P>
+    <P>
+      See these sample&nbsp;
+      <Link href="#" onPress={showApp} rel="noopener noreferrer">
+        stories
+      </Link>
+      &nbsp;for a component called <InlineCode>Button</InlineCode>.
+    </P>
+    <P>
+      Just like that, you can add your own components as stories. You can also edit those components
+      and see changes right away. (Try editing the <InlineCode>Button</InlineCode> stories located
+      at <InlineCode>src/stories/1-Button.stories.js</InlineCode>
+      .)
+    </P>
+    <P>
+      Usually we create stories with smaller UI components in the app. Have a look at the&nbsp;
+      <Link
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Writing Stories
+      </Link>
+      &nbsp;section in our documentation.
+    </P>
+    <Note>
+      <P style={{ fontWeight: 'bold' }}>NOTE:</P>
+      <P>
+        Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
+        loaders and plugins you are using in this project.
+      </P>
+    </Note>
+  </Main>
+);
+
+export default Welcome;
diff --git a/lib/cli/src/generators/REACT/index.ts b/lib/cli/src/generators/REACT/index.ts
new file mode 100644
index 000000000000..586dac39814b
--- /dev/null
+++ b/lib/cli/src/generators/REACT/index.ts
@@ -0,0 +1,43 @@
+import {
+  getVersionedPackages,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/react',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+  ];
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/REACT/template-csf/.storybook/main.js b/lib/cli/src/generators/REACT/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..64815ba01eaf
--- /dev/null
+++ b/lib/cli/src/generators/REACT/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..9920a416e1ff
--- /dev/null
+++ b/lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..fdbd42fe76fe
--- /dev/null
+++ b/lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => (
+  <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
+);
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => (
+  <Button onClick={linkTo('Welcome')}>Go to Welcome Story</Button>
+);
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js b/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..e44fb99d3d7e
--- /dev/null
+++ b/lib/cli/src/generators/REACT/template-mdx/.storybook/main.js
@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: { configureJSX: true },
+    },
+  ],
+};
diff --git a/lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx
similarity index 100%
rename from lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx
rename to lib/cli/src/generators/REACT/template-mdx/stories/1-Button.stories.mdx
diff --git a/lib/cli/src/generators/REACT_NATIVE/index.ts b/lib/cli/src/generators/REACT_NATIVE/index.ts
new file mode 100644
index 000000000000..aad02bcb16c6
--- /dev/null
+++ b/lib/cli/src/generators/REACT_NATIVE/index.ts
@@ -0,0 +1,81 @@
+import shell from 'shelljs';
+import chalk from 'chalk';
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  paddedLog,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { NpmOptions } from '../../NpmOptions';
+import { GeneratorOptions } from '../Generator';
+
+export default async (
+  npmOptions: NpmOptions,
+  installServer: boolean,
+  { storyFormat }: GeneratorOptions
+) => {
+  const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
+    npmOptions,
+    '@storybook/react-native',
+    '@storybook/addons',
+    '@storybook/addon-actions',
+    '@storybook/addon-links'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  // set correct project name on entry files if possible
+  const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;
+
+  // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
+  if (dirname) {
+    const projectName = dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
+
+    if (projectName) {
+      shell.sed('-i', '%APP_NAME%', projectName, 'storybook/storybook.js');
+    } else {
+      paddedLog(
+        chalk.red(
+          'ERR: Could not determine project name, to fix: https://github.com/storybookjs/storybook/issues/1277'
+        )
+      );
+    }
+  }
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  const devDependencies = [
+    `@storybook/react-native@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+  ];
+
+  if (installServer) {
+    devDependencies.push(`@storybook/react-native-server@${storybookVersion}`);
+  }
+
+  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
+    if (packageJson.dependencies.react) {
+      const reactVersion = packageJson.dependencies.react;
+      devDependencies.push(`react-dom@${reactVersion}`);
+    }
+  }
+
+  if (installServer) {
+    packageJson.scripts = packageJson.scripts || {};
+    packageJson.scripts.storybook = 'start-storybook -p 7007';
+  }
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...devDependencies, ...babelDependencies]);
+};
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js
similarity index 100%
rename from lib/cli/generators/REACT_NATIVE/template-csf/storybook/addons.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/index.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/index.js
similarity index 100%
rename from lib/cli/generators/REACT_NATIVE/template-csf/storybook/index.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/index.js
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
similarity index 100%
rename from lib/cli/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/Button/index.android.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js
similarity index 100%
rename from examples-native/crna-kitchen-sink/storybook/stories/Button/index.android.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/Button/index.ios.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js
similarity index 100%
rename from examples-native/crna-kitchen-sink/storybook/stories/Button/index.ios.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/CenterView/index.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js
similarity index 100%
rename from examples-native/crna-kitchen-sink/storybook/stories/CenterView/index.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js
diff --git a/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js
similarity index 100%
rename from lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js
rename to lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js
diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js
new file mode 100644
index 000000000000..4256f1597202
--- /dev/null
+++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text } from 'react-native';
+
+export default class Welcome extends React.Component {
+  styles = {
+    wrapper: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 18,
+      marginBottom: 18,
+    },
+    content: {
+      fontSize: 12,
+      marginBottom: 10,
+      lineHeight: 18,
+    },
+  };
+
+  showApp = (event) => {
+    const { showApp } = this.props;
+    event.preventDefault();
+
+    if (showApp) {
+      showApp();
+    }
+  };
+
+  render() {
+    return (
+      <View style={this.styles.wrapper}>
+        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.content}>
+          This is a UI Component development environment for your React Native app. Here you can
+          display and interact with your UI components as stories. A story is a single state of one
+          or more UI components. You can have as many stories as you want. In other words a story is
+          like a visual test case.
+        </Text>
+        <Text style={this.styles.content}>
+          We have added some stories inside the "storybook/stories" directory for examples. Try
+          editing the "storybook/stories/Welcome.js" file to edit this message.
+        </Text>
+      </View>
+    );
+  }
+}
+
+Welcome.defaultProps = {
+  showApp: null,
+};
+
+Welcome.propTypes = {
+  showApp: PropTypes.func,
+};
diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/index.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/index.js
new file mode 100644
index 000000000000..5ec8c1887b36
--- /dev/null
+++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { storiesOf } from '@storybook/react-native';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from './Button';
+import CenterView from './CenterView';
+import Welcome from './Welcome';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+  .add('with text', () => (
+    <Button onPress={action('clicked-text')}>
+      <Text>Hello Button</Text>
+    </Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  ));
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/lib/cli/src/generators/REACT_SCRIPTS/index.ts
new file mode 100644
index 000000000000..cc43eafdb98e
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/index.ts
@@ -0,0 +1,53 @@
+import path from 'path';
+import fs from 'fs';
+import {
+  retrievePackageJson,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/react',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+  ];
+
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 9009';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  if (fs.existsSync(path.resolve('./public'))) {
+    // has a public folder and add support to it.
+    packageJson.scripts.storybook += ' -s public';
+    packageJson.scripts['build-storybook'] += ' -s public';
+  }
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js
new file mode 100644
index 000000000000..cc503660aedf
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/.storybook/main.js
@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
similarity index 84%
rename from lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
rename to lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
index c76f45f3b4be..9920a416e1ff 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
@@ -9,6 +9,4 @@ export default {
 
 export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-ToStorybook.story = {
-  name: 'to Storybook',
-};
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx b/lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
similarity index 100%
rename from lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
rename to lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..8f79d4617f2b
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/.storybook/main.js
@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..9920a416e1ff
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
new file mode 100644
index 000000000000..fdbd42fe76fe
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => (
+  <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
+);
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => (
+  <Button onClick={linkTo('Welcome')}>Go to Welcome Story</Button>
+);
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..050ab43274f8
--- /dev/null
+++ b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/.storybook/main.js
@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/preset-create-react-app',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx
similarity index 100%
rename from lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx
rename to lib/cli/src/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx
diff --git a/lib/cli/src/generators/RIOT/index.ts b/lib/cli/src/generators/RIOT/index.ts
new file mode 100644
index 000000000000..2c624431018a
--- /dev/null
+++ b/lib/cli/src/generators/RIOT/index.ts
@@ -0,0 +1,57 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    addonsVersion,
+    tagLoaderVersion,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/riot',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    'riot-tag-loader'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  const dependencies = [
+    `@storybook/riot@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+  ];
+  if (
+    !packageJson.devDependencies['riot-tag-loader'] &&
+    !packageJson.dependencies['riot-tag-loader']
+  )
+    dependencies.push(`riot-tag-loader@${tagLoaderVersion}`);
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...dependencies, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js b/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/RIOT/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/RIOT/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..7ba50551fccd
--- /dev/null
+++ b/lib/cli/src/generators/RIOT/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,12 @@
+import { mount } from '@storybook/riot';
+import { linkTo } from '@storybook/addon-links';
+
+import './Welcome.tag';
+
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/RIOT/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..945d90d5c7a3
--- /dev/null
+++ b/lib/cli/src/generators/RIOT/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,36 @@
+import { mount } from '@storybook/riot';
+import { linkTo } from '@storybook/addon-links';
+import { action } from '@storybook/addon-actions';
+
+// eslint-disable-next-line
+import MyButtonRaw from 'raw-loader!./MyButton.tag';
+import './MyButton.tag';
+
+export default {
+  title: 'Button',
+};
+
+export const Text = () => ({
+  tags: ['<my-button>Hello Button</my-button>'],
+});
+
+export const WithScenario = () => ({
+  tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
+  template: '<MyButton>With scenario</MyButton>',
+});
+
+export const TextWithAction = () =>
+  mount('my-button', {
+    content: 'Trigger Action',
+    onClick: () => action('This was clicked')(),
+  });
+
+TextWithAction.storyName = 'With an action';
+
+export const ButtonWithLinkToAnotherStory = () =>
+  mount('my-button', {
+    content: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  });
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag b/lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag
new file mode 100644
index 000000000000..5a8862b42e54
--- /dev/null
+++ b/lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag
@@ -0,0 +1,24 @@
+<my-button>
+  <button class="buttonStyles" onclick={ onClick }>
+    {opts.content}
+    <yield/>
+  </button>
+
+  <style>
+    .buttonStyles {
+      border: solid 1px #eee;
+      border-radius: 3px;
+      background-color: #FFFFFF;
+      cursor: pointer;
+      font-size: 15px;
+      padding: 3px 10px;
+      margin: 10px;
+    }
+  </style>
+
+  <script>
+    this.onClick = this.opts.onClick || function(e){
+      console.log('clicked', e)
+    }
+  </script>
+</my-button>
diff --git a/lib/cli/generators/RIOT/template-csf/stories/Welcome.tag b/lib/cli/src/generators/RIOT/template-csf/stories/Welcome.tag
similarity index 98%
rename from lib/cli/generators/RIOT/template-csf/stories/Welcome.tag
rename to lib/cli/src/generators/RIOT/template-csf/stories/Welcome.tag
index b5ce07a889ed..614223b14db5 100644
--- a/lib/cli/generators/RIOT/template-csf/stories/Welcome.tag
+++ b/lib/cli/src/generators/RIOT/template-csf/stories/Welcome.tag
@@ -1,6 +1,6 @@
 <welcome>
   <div class="main">
-    <h1>Welcome to STORYBOOK</h1>
+    <h1>Welcome to storybook</h1>
     <p>
       This is a UI component dev environment for your app.
     </p>
diff --git a/lib/cli/src/generators/SFC_VUE/index.ts b/lib/cli/src/generators/SFC_VUE/index.ts
new file mode 100644
index 000000000000..0f85dbce6b12
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/index.ts
@@ -0,0 +1,42 @@
+import {
+  retrievePackageJson,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/vue',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+  ];
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/.storybook/main.js b/lib/cli/src/generators/SFC_VUE/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..302586ca4090
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..6496e9b1864d
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
@@ -0,0 +1,16 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome.vue';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
new file mode 100644
index 000000000000..2a8f67f6c0ae
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
@@ -0,0 +1,32 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton.vue';
+
+export default {
+  title: 'Button',
+  component: MyButton,
+};
+
+export const Text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const TextWithAction = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Trigger Action</my-button>',
+  methods: { action: () => action('This was clicked')() },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Go to Welcome Story</my-button>',
+  methods: { action: linkTo('Welcome') },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/MyButton.vue b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/MyButton.vue
similarity index 100%
rename from lib/cli/generators/SFC_VUE/template-csf/src/stories/MyButton.vue
rename to lib/cli/src/generators/SFC_VUE/template-csf/src/stories/MyButton.vue
diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
new file mode 100644
index 000000000000..bfb932da3d2a
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="main">
+    <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
+      <br />
+      <code class="code">src/stories</code>
+      <br />
+      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
+      <br />
+      <a class="link" @click="onClick" role="button" tabIndex="0">stories</a>
+      <br />
+      for a component called
+      <br />
+      <code class="code">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 class="code">Button</code> component located at
+      <code class="code">src/stories/Button.js</code>.)
+    </p>
+    <p>
+      This is just one thing you can do with Storybook.
+      <br />
+      Have a look at the
+      <br />
+      <a
+        class="link"
+        href="https://github.com/storybookjs/storybook"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Storybook
+      </a>
+      <br />
+      repo for more information.
+    </p>
+    <p class="note">
+      <b>NOTE:</b>
+      <br />
+      Have a look at the
+      <br />
+      <code class="code">.storybook/webpack.config.js</code>
+      <br />
+      to add webpack loaders and plugins you are using in this project.
+    </p>
+  </div>
+</template>
+
+<script>
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
+</script>
+
+<style>
+.main {
+  padding: 15px;
+  line-height: 1.4;
+  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+  background-color: #ffffff;
+}
+
+.logo {
+  width: 200px;
+}
+
+.link {
+  color: #1474f3;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
+
+.code {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
+
+.note {
+  opacity: 0.5;
+}
+</style>
diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js b/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..320231e699e0
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-mdx/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx
similarity index 100%
rename from lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx
rename to lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx
diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue
similarity index 100%
rename from lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue
rename to lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue
diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
new file mode 100644
index 000000000000..bfb932da3d2a
--- /dev/null
+++ b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="main">
+    <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
+      <br />
+      <code class="code">src/stories</code>
+      <br />
+      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
+      <br />
+      <a class="link" @click="onClick" role="button" tabIndex="0">stories</a>
+      <br />
+      for a component called
+      <br />
+      <code class="code">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 class="code">Button</code> component located at
+      <code class="code">src/stories/Button.js</code>.)
+    </p>
+    <p>
+      This is just one thing you can do with Storybook.
+      <br />
+      Have a look at the
+      <br />
+      <a
+        class="link"
+        href="https://github.com/storybookjs/storybook"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Storybook
+      </a>
+      <br />
+      repo for more information.
+    </p>
+    <p class="note">
+      <b>NOTE:</b>
+      <br />
+      Have a look at the
+      <br />
+      <code class="code">.storybook/webpack.config.js</code>
+      <br />
+      to add webpack loaders and plugins you are using in this project.
+    </p>
+  </div>
+</template>
+
+<script>
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
+</script>
+
+<style>
+.main {
+  padding: 15px;
+  line-height: 1.4;
+  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+  background-color: #ffffff;
+}
+
+.logo {
+  width: 200px;
+}
+
+.link {
+  color: #1474f3;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
+
+.code {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
+
+.note {
+  opacity: 0.5;
+}
+</style>
diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
new file mode 100644
index 000000000000..9da7bfa15463
--- /dev/null
+++ b/lib/cli/src/generators/SVELTE/index.ts
@@ -0,0 +1,55 @@
+import {
+  getVersions,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    addonsVersion,
+    svelte,
+    svelteLoader,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/svelte',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    'svelte',
+    'svelte-loader'
+  );
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [
+    `@storybook/svelte@${storybookVersion}`,
+    `@storybook/addon-actions@${actionsVersion}`,
+    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addons@${addonsVersion}`,
+    `svelte@${svelte}`,
+    `svelte-loader@${svelteLoader}`,
+    ...babelDependencies,
+  ]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js b/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/SVELTE/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js b/lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js
new file mode 100644
index 000000000000..35008941746a
--- /dev/null
+++ b/lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js
@@ -0,0 +1,13 @@
+import Welcome from './welcome.svelte';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  Component: Welcome,
+  props: {},
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js b/lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js
new file mode 100644
index 000000000000..d892433252b1
--- /dev/null
+++ b/lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js
@@ -0,0 +1,50 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from './button.svelte';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  Component: Button,
+  props: { text: 'Hello Button' },
+  on: { click: action('clicked') },
+});
+
+export const Emoji = () => ({
+  Component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+  on: { click: action('clicked') },
+});
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => ({
+  Component: Button,
+  props: {
+    text: 'Trigger Action',
+  },
+  on: {
+    click: () => action('This was clicked')(),
+  },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  Component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+  },
+  on: {
+    click: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/generators/SVELTE/template-csf/stories/button.svelte b/lib/cli/src/generators/SVELTE/template-csf/stories/button.svelte
similarity index 100%
rename from lib/cli/generators/SVELTE/template-csf/stories/button.svelte
rename to lib/cli/src/generators/SVELTE/template-csf/stories/button.svelte
diff --git a/lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte b/lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte
new file mode 100644
index 000000000000..b86218e10096
--- /dev/null
+++ b/lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte
@@ -0,0 +1,37 @@
+<script>
+
+</script>
+
+<style>
+  main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+
+  .inline-code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }
+</style>
+
+<main>
+  <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
+    <span class="inline-code">stories</span>
+    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>
+</main>
diff --git a/lib/cli/src/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.ts b/lib/cli/src/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.ts
new file mode 100644
index 000000000000..ab3a1e0fcf79
--- /dev/null
+++ b/lib/cli/src/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.ts
@@ -0,0 +1,82 @@
+/* eslint-disable no-param-reassign */
+import path from 'path';
+import { sync as spawnSync } from 'cross-spawn';
+import { packageNames } from '@storybook/codemod';
+import {
+  getBabelDependencies,
+  getPackageJson,
+  getVersion,
+  getVersions,
+  installDependencies,
+  writePackageJson,
+} from '../../helpers';
+import { PackageJson } from '../../PackageJson';
+import { NpmOptions } from '../../NpmOptions';
+
+async function updatePackage(
+  devDependencies: PackageJson['devDependencies'],
+  oldName: string,
+  newName: string,
+  npmOptions: NpmOptions
+) {
+  if (devDependencies[oldName]) {
+    delete devDependencies[oldName];
+    devDependencies[newName] = await getVersion(npmOptions, newName);
+  }
+}
+
+async function updatePackageJson(npmOptions: NpmOptions) {
+  const packageJson = getPackageJson();
+  const { devDependencies } = packageJson;
+
+  const [actionsVersion, linksVersion] = await getVersions(
+    npmOptions,
+    '@storybook/addon-actions',
+    '@storybook/addon-links'
+  );
+
+  devDependencies['@storybook/addon-actions'] = actionsVersion;
+  devDependencies['@storybook/addon-links'] = linksVersion;
+
+  await Promise.all(
+    Object.keys(packageNames).map((oldName) => {
+      const newName = packageNames[oldName];
+      return updatePackage(devDependencies, oldName, newName, npmOptions);
+    })
+  );
+
+  if (!devDependencies['@storybook/react'] && !devDependencies['@storybook/react-native']) {
+    throw new Error('Expected to find `@kadira/[react-native]-storybook` in devDependencies');
+  }
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  if (babelDependencies.length > 0) {
+    installDependencies({ ...npmOptions, packageJson }, babelDependencies);
+  }
+}
+
+function updateSourceCode(parser: string) {
+  const jscodeshiftPath = path.dirname(require.resolve('jscodeshift'));
+  const jscodeshiftCommand = path.join(jscodeshiftPath, 'bin', 'jscodeshift.sh');
+
+  ['update-organisation-name.js', 'move-buildin-addons.js'].forEach((codemod) => {
+    const codemodPath = path.join(
+      path.dirname(require.resolve('@storybook/codemod')),
+      'transforms',
+      codemod
+    );
+
+    const args = ['-t', codemodPath, '--silent', '--ignore-pattern', '"node_modules|dist"', '.'];
+    if (parser) args.push('--parser', parser);
+
+    spawnSync(jscodeshiftCommand, args, { stdio: 'inherit' });
+  });
+}
+
+export default async (parser: string, npmOptions: NpmOptions) => {
+  await updatePackageJson(npmOptions);
+  updateSourceCode(parser);
+};
diff --git a/lib/cli/src/generators/VUE/index.ts b/lib/cli/src/generators/VUE/index.ts
new file mode 100644
index 000000000000..d35af935858a
--- /dev/null
+++ b/lib/cli/src/generators/VUE/index.ts
@@ -0,0 +1,58 @@
+import {
+  retrievePackageJson,
+  getVersion,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  addToDevDependenciesIfNotPresent,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/vue',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    '@babel/core',
+  ];
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  const packageBabelCoreVersion =
+    packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
+
+  // This seems to be the version installed by the Vue CLI, and it is not handled by
+  // installBabel below. For some reason it leads to the wrong version of @babel/core (a beta)
+  // being installed
+  if (packageBabelCoreVersion === '7.0.0-bridge.0') {
+    addToDevDependenciesIfNotPresent(
+      packageJson,
+      '@babel/core',
+      await getVersion(npmOptions, '@babel/core')
+    );
+  }
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/VUE/template-csf/.storybook/main.js b/lib/cli/src/generators/VUE/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-csf/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/src/generators/VUE/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/VUE/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..751d3002ef69
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,16 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  components: { Welcome },
+  template: '<welcome :showApp="action" />',
+  methods: { action: linkTo('Button') },
+});
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/VUE/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/VUE/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..790039811cc5
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,32 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton';
+
+export default {
+  title: 'Button',
+  component: MyButton,
+};
+
+export const Text = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+});
+
+export const TextWithAction = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Trigger Action</my-button>',
+  methods: { action: () => action('This was clicked')() },
+});
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Go to Welcome Story</my-button>',
+  methods: { action: linkTo('Welcome') },
+});
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/generators/VUE/template-csf/stories/MyButton.js b/lib/cli/src/generators/VUE/template-csf/stories/MyButton.js
similarity index 100%
rename from lib/cli/generators/VUE/template-csf/stories/MyButton.js
rename to lib/cli/src/generators/VUE/template-csf/stories/MyButton.js
diff --git a/lib/cli/src/generators/VUE/template-csf/stories/Welcome.js b/lib/cli/src/generators/VUE/template-csf/stories/Welcome.js
new file mode 100644
index 000000000000..80df0039e05c
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-csf/stories/Welcome.js
@@ -0,0 +1,121 @@
+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  data() {
+    return {
+      main: {
+        padding: 15,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
+      },
+
+      logo: {
+        width: 200,
+      },
+
+      link: {
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      },
+
+      code: {
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      },
+
+      note: {
+        opacity: 0.5,
+      },
+    };
+  },
+
+  template: `
+    <div :style="main">
+      <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
+        <br />
+        <code :style="code">src/stories</code>
+        <br />
+        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
+        <br />
+        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="code">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="code">Button</code> component
+        located at <code :style="code">src/stories/Button.js</code>.)
+      </p>
+      <p>
+        This is just one thing you can do with Storybook.
+        <br />
+        Have a look at the
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/storybookjs/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information.
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
diff --git a/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js b/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..5545e141a54c
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-mdx/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(js|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx b/lib/cli/src/generators/VUE/template-mdx/stories/1-Button.stories.mdx
similarity index 100%
rename from lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx
rename to lib/cli/src/generators/VUE/template-mdx/stories/1-Button.stories.mdx
diff --git a/lib/cli/generators/VUE/template-mdx/stories/MyButton.js b/lib/cli/src/generators/VUE/template-mdx/stories/MyButton.js
similarity index 100%
rename from lib/cli/generators/VUE/template-mdx/stories/MyButton.js
rename to lib/cli/src/generators/VUE/template-mdx/stories/MyButton.js
diff --git a/lib/cli/src/generators/VUE/template-mdx/stories/Welcome.js b/lib/cli/src/generators/VUE/template-mdx/stories/Welcome.js
new file mode 100644
index 000000000000..80df0039e05c
--- /dev/null
+++ b/lib/cli/src/generators/VUE/template-mdx/stories/Welcome.js
@@ -0,0 +1,121 @@
+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  data() {
+    return {
+      main: {
+        padding: 15,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        backgroundColor: '#ffffff',
+      },
+
+      logo: {
+        width: 200,
+      },
+
+      link: {
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      },
+
+      code: {
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      },
+
+      note: {
+        opacity: 0.5,
+      },
+    };
+  },
+
+  template: `
+    <div :style="main">
+      <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
+        <br />
+        <code :style="code">src/stories</code>
+        <br />
+        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
+        <br />
+        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="code">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="code">Button</code> component
+        located at <code :style="code">src/stories/Button.js</code>.)
+      </p>
+      <p>
+        This is just one thing you can do with Storybook.
+        <br />
+        Have a look at the
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/storybookjs/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information.
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/lib/cli/src/generators/WEB-COMPONENTS/index.ts
new file mode 100755
index 000000000000..373eac327a67
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/index.ts
@@ -0,0 +1,45 @@
+import fse from 'fs-extra';
+import path from 'path';
+import {
+  getVersionedPackages,
+  retrievePackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/web-components',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    'lit-html',
+  ];
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+
+  if (storyFormat === StoryFormat.MDX) {
+    // TODO: handle adding of docs mode
+  }
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js b/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js
new file mode 100644
index 000000000000..3036098563cc
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+};
diff --git a/lib/cli/generators/WEB-COMPONENTS/template/.storybook/preview.js b/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/preview.js
similarity index 100%
rename from lib/cli/generators/WEB-COMPONENTS/template/.storybook/preview.js
rename to lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/preview.js
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..95a394760d52
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js
@@ -0,0 +1,47 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => html`<main>
+  <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
+    <span class="inline-code">src/stories</span> 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 (click)="showApp.emit($event)" role="button" tabindex="0">stories</a> for a component called
+    <span class="inline-code">Button</span> .
+  </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 <span class="inline-code">Button</span> stories located at
+    <span class="inline-code">src/stories/index.js</span>.)
+  </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"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Writing Stories
+    </a>
+    section in our documentation.
+  </p>
+  <p class="note">
+    <b>NOTE:</b> <br />
+    Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack
+    loaders and plugins you are using in this project.
+  </p>
+</main>`;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js
new file mode 100644
index 000000000000..d8d49356a9af
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js
@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Button',
+};
+
+export const Text = () => html`
+  <button @click=${action('clicked')}>
+    Hello Button
+  </button>
+`;
+
+export const Emoji = () => html`
+  <button @click=${action('clicked')}>
+    😀 😎 👍 💯
+  </button>
+`;
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => html`
+  <button @click=${() => action('This was clicked')()}>
+    Trigger Action
+  </button>
+`;
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => html`<button @click=${linkTo('Welcome')}>
+  Go to Welcome Story
+</button>`;
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/WEBPACK_REACT/index.ts b/lib/cli/src/generators/WEBPACK_REACT/index.ts
new file mode 100644
index 000000000000..75bec7324ed2
--- /dev/null
+++ b/lib/cli/src/generators/WEBPACK_REACT/index.ts
@@ -0,0 +1,42 @@
+import {
+  retrievePackageJson,
+  getVersionedPackages,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+  copyTemplate,
+} from '../../helpers';
+import { StoryFormat } from '../../project_types';
+import { Generator } from '../Generator';
+
+const generator: Generator = async (npmOptions, { storyFormat }) => {
+  const packages = [
+    '@storybook/react',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+  ];
+  if (storyFormat === StoryFormat.MDX) {
+    packages.push('@storybook/addon-docs');
+  }
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+
+  copyTemplate(__dirname, storyFormat);
+
+  const packageJson = await retrievePackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies({ ...npmOptions, packageJson }, [...versionedPackages, ...babelDependencies]);
+};
+
+export default generator;
diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js b/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js
new file mode 100644
index 000000000000..69e89d84f741
--- /dev/null
+++ b/lib/cli/src/generators/WEBPACK_REACT/template-csf/.storybook/main.js
@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  webpackFinal: async (config) => {
+    // do mutation to the config
+
+    return config;
+  },
+};
diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..9920a416e1ff
--- /dev/null
+++ b/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.storyName = 'to Storybook';
diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js b/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
new file mode 100644
index 000000000000..fdbd42fe76fe
--- /dev/null
+++ b/lib/cli/src/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.parameters = { notes: 'My notes on a button with emojis' };
+
+export const TextWithAction = () => (
+  <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>
+);
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => (
+  <Button onClick={linkTo('Welcome')}>Go to Welcome Story</Button>
+);
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
diff --git a/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js
new file mode 100644
index 000000000000..055aea01539a
--- /dev/null
+++ b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/.storybook/main.js
@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: { configureJSX: true },
+    },
+  ],
+  webpackFinal: async (config) => {
+    // do mutation to the config
+
+    return config;
+  },
+};
diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx
similarity index 100%
rename from lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx
rename to lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx
diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx
similarity index 100%
rename from lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx
rename to lib/cli/src/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx
diff --git a/lib/cli/src/has_yarn.ts b/lib/cli/src/has_yarn.ts
new file mode 100644
index 000000000000..62991684dd1a
--- /dev/null
+++ b/lib/cli/src/has_yarn.ts
@@ -0,0 +1,26 @@
+import { sync } from 'cross-spawn';
+import path from 'path';
+import findUp from 'find-up';
+
+export function hasYarn() {
+  const yarnAvailable = sync('yarn', ['--version']);
+  const npmAvailable = sync('npm', ['--version']);
+
+  const lockFile = findUp.sync(['yarn.lock', 'package-lock.json']);
+  const hasYarnLock = lockFile && path.basename(lockFile) === 'yarn.lock';
+
+  if (yarnAvailable.status === 0 && (hasYarnLock || npmAvailable.status !== 0)) {
+    return true;
+  }
+  return false;
+}
+
+export function hasYarn2() {
+  const yarnVersion = sync('yarn', ['--version'])
+    // @ts-ignore
+    .output.toString('utf8')
+    .replace(/,/g, '')
+    .replace(/"/g, '');
+
+  return !/^1\.+/.test(yarnVersion);
+}
diff --git a/lib/cli/src/helpers.test.ts b/lib/cli/src/helpers.test.ts
new file mode 100644
index 000000000000..f71887a352f7
--- /dev/null
+++ b/lib/cli/src/helpers.test.ts
@@ -0,0 +1,61 @@
+import fs from 'fs';
+import fse from 'fs-extra';
+
+import * as helpers from './helpers';
+import { StoryFormat } from './project_types';
+
+jest.mock('fs', () => ({
+  existsSync: jest.fn(),
+}));
+
+jest.mock('fs-extra', () => ({
+  copySync: jest.fn(() => ({})),
+}));
+
+jest.mock('path', () => ({
+  // make it return just the second path, for easier testing
+  resolve: jest.fn((_, p) => p),
+}));
+
+jest.mock('./npm_init', () => ({
+  npmInit: jest.fn(),
+}));
+
+jest.mock('./has_yarn', () => ({
+  hasYarn2: jest.fn(() => false),
+}));
+
+describe('Helpers', () => {
+  describe('copyTemplate', () => {
+    it(`should fall back to ${StoryFormat.CSF} 
+        in case ${StoryFormat.CSF_TYPESCRIPT} is not available`, () => {
+      const csfDirectory = `template-${StoryFormat.CSF}/`;
+      (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
+        return filePath === csfDirectory;
+      });
+      helpers.copyTemplate('', StoryFormat.CSF_TYPESCRIPT);
+
+      const copySyncSpy = jest.spyOn(fse, 'copySync');
+      expect(copySyncSpy).toHaveBeenCalledWith(csfDirectory, expect.anything(), expect.anything());
+    });
+
+    it(`should use ${StoryFormat.CSF_TYPESCRIPT} if it is available`, () => {
+      const csfDirectory = `template-${StoryFormat.CSF_TYPESCRIPT}/`;
+      (fs.existsSync as jest.Mock).mockImplementation((filePath) => {
+        return filePath === csfDirectory;
+      });
+      helpers.copyTemplate('', StoryFormat.CSF_TYPESCRIPT);
+
+      const copySyncSpy = jest.spyOn(fse, 'copySync');
+      expect(copySyncSpy).toHaveBeenCalledWith(csfDirectory, expect.anything(), expect.anything());
+    });
+
+    it(`should throw an error for unsupported story format`, () => {
+      const storyFormat = 'non-existent-format' as StoryFormat;
+      const expectedMessage = `Unsupported story format: ${storyFormat}`;
+      expect(() => {
+        helpers.copyTemplate('', storyFormat);
+      }).toThrowError(expectedMessage);
+    });
+  });
+});
diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts
new file mode 100644
index 000000000000..63eca144909c
--- /dev/null
+++ b/lib/cli/src/helpers.ts
@@ -0,0 +1,346 @@
+/* eslint-disable no-param-reassign */
+import path from 'path';
+import fs from 'fs';
+import fse from 'fs-extra';
+import chalk from 'chalk';
+import { sync as spawnSync } from 'cross-spawn';
+import { gt, satisfies } from '@storybook/semver';
+import stripJsonComments from 'strip-json-comments';
+
+import { latestVersion } from './latest_version';
+import { npmInit } from './npm_init';
+import { StoryFormat } from './project_types';
+import { PackageJson } from './PackageJson';
+import { NpmOptions } from './NpmOptions';
+import { hasYarn2 } from './has_yarn';
+
+// Cannot be `import` as it's not under TS root dir
+const { version, devDependencies } = require('../package.json');
+
+const logger = console;
+
+export async function getVersion(npmOptions: NpmOptions, packageName: string, constraint?: any) {
+  let current;
+  if (packageName === '@storybook/cli') {
+    current = version;
+  } else if (/storybook/.test(packageName)) {
+    current = devDependencies[packageName];
+  }
+
+  let latest;
+  try {
+    latest = await latestVersion(npmOptions, packageName, constraint);
+  } catch (e) {
+    if (current) {
+      logger.warn(`\n     ${chalk.yellow(e.message)}`);
+      return current;
+    }
+
+    logger.error(`\n     ${chalk.red(e.message)}`);
+    process.exit(1);
+  }
+
+  const versionToUse =
+    current && (!constraint || satisfies(current, constraint)) && gt(current, latest)
+      ? current
+      : latest;
+  return `^${versionToUse}`;
+}
+
+export function getVersions(npmOptions: NpmOptions, ...packageNames: string[]) {
+  return Promise.all(packageNames.map((packageName) => getVersion(npmOptions, packageName)));
+}
+
+export function getVersionedPackages(npmOptions: NpmOptions, ...packageNames: string[]) {
+  return Promise.all(
+    packageNames.map(
+      async (packageName) => `${packageName}@${await getVersion(npmOptions, packageName)}`
+    )
+  );
+}
+
+export function getPackageJson() {
+  const packageJsonPath = path.resolve('package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    return false;
+  }
+
+  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  return JSON.parse(jsonContent);
+}
+
+export async function retrievePackageJson() {
+  const existing = getPackageJson();
+  if (existing) {
+    return existing;
+  }
+
+  // npmInit will create a new package.json file
+  npmInit();
+
+  // read the newly created package.json file
+  return getPackageJson() || {};
+}
+
+export function getBowerJson() {
+  const bowerJsonPath = path.resolve('bower.json');
+  if (!fs.existsSync(bowerJsonPath)) {
+    return false;
+  }
+
+  const jsonContent = fs.readFileSync(bowerJsonPath, 'utf8');
+  return JSON.parse(jsonContent);
+}
+
+export function readFileAsJson(jsonPath: string, allowComments?: boolean) {
+  const filePath = path.resolve(jsonPath);
+  if (!fs.existsSync(filePath)) {
+    return false;
+  }
+
+  const fileContent = fs.readFileSync(filePath, 'utf8');
+  const jsonContent = allowComments ? stripJsonComments(fileContent) : fileContent;
+  return JSON.parse(jsonContent);
+}
+
+export const writeFileAsJson = (jsonPath: string, content: unknown) => {
+  const filePath = path.resolve(jsonPath);
+  if (!fs.existsSync(filePath)) {
+    return false;
+  }
+
+  fs.writeFileSync(filePath, `${JSON.stringify(content, null, 2)}\n`);
+  return true;
+};
+
+export function writePackageJson(packageJson: object) {
+  const content = `${JSON.stringify(packageJson, null, 2)}\n`;
+  const packageJsonPath = path.resolve('package.json');
+
+  fs.writeFileSync(packageJsonPath, content, 'utf8');
+}
+
+export const commandLog = (message: string) => {
+  process.stdout.write(chalk.cyan(' • ') + message);
+
+  // Need `void` to be able to use this function in a then of a Promise<void>
+  return (errorMessage?: string | void, errorInfo?: string) => {
+    if (errorMessage) {
+      process.stdout.write(`. ${chalk.red('✖')}\n`);
+      logger.error(`\n     ${chalk.red(errorMessage)}`);
+
+      if (!errorInfo) {
+        return;
+      }
+
+      const newErrorInfo = errorInfo
+        .split('\n')
+        .map((line) => `     ${chalk.dim(line)}`)
+        .join('\n');
+      logger.error(`${newErrorInfo}\n`);
+      return;
+    }
+
+    process.stdout.write(`. ${chalk.green('✓')}\n`);
+  };
+};
+
+export function paddedLog(message: string) {
+  const newMessage = message
+    .split('\n')
+    .map((line) => `    ${line}`)
+    .join('\n');
+
+  logger.log(newMessage);
+}
+
+export function getChars(char: string, amount: number) {
+  let line = '';
+  for (let lc = 0; lc < amount; lc += 1) {
+    line += char;
+  }
+
+  return line;
+}
+
+export function codeLog(codeLines: string[], leftPadAmount?: number) {
+  let maxLength = 0;
+  const newLines = codeLines.map((line) => {
+    maxLength = line.length > maxLength ? line.length : maxLength;
+    return line;
+  });
+
+  const finalResult = newLines
+    .map((line) => {
+      const rightPadAmount = maxLength - line.length;
+      let newLine = line + getChars(' ', rightPadAmount);
+      newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `);
+      return newLine;
+    })
+    .join('\n');
+
+  logger.log(finalResult);
+}
+
+export function installDepsFromPackageJson(options: NpmOptions) {
+  let done = commandLog('Preparing to install dependencies');
+  done();
+  logger.log();
+
+  let result;
+  if (options.useYarn) {
+    result = spawnSync('yarn', { stdio: 'inherit' });
+  } else {
+    result = spawnSync('npm', ['install'], { stdio: 'inherit' });
+  }
+
+  logger.log();
+  done = commandLog('Installing dependencies');
+  if (result.status !== 0) {
+    done('An error occurred while installing dependencies.');
+    process.exit(1);
+  }
+  done();
+}
+
+/**
+ * Add dependencies to a project using `yarn add` or `npm install`.
+ *
+ * @param {Object} options contains `useYarn`, `runInstall` and `installAsDevDependencies` which we use to determine how we install packages.
+ * @param {Array} dependencies contains a list of packages to add.
+ * @example
+ * installDependencies(options, [
+ *   `@storybook/react@${storybookVersion}`,
+ *   `@storybook/addon-actions@${actionsVersion}`,
+ *   `@storybook/addon-links@${linksVersion}`,
+ *   `@storybook/addons@${addonsVersion}`,
+ * ]);
+ */
+export function installDependencies(
+  options: NpmOptions & { packageJson: PackageJson },
+  dependencies: string[]
+) {
+  const { skipInstall } = options;
+
+  if (skipInstall) {
+    const { packageJson } = options;
+
+    const dependenciesMap = dependencies.reduce((acc, dep) => {
+      const idx = dep.lastIndexOf('@');
+      const packageName = dep.slice(0, idx);
+      const packageVersion = dep.slice(idx + 1);
+
+      return { ...acc, [packageName]: packageVersion };
+    }, {});
+
+    if (options.installAsDevDependencies) {
+      packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        ...dependenciesMap,
+      };
+    } else {
+      packageJson.dependencies = {
+        ...packageJson.dependencies,
+        ...dependenciesMap,
+      };
+    }
+
+    writePackageJson(packageJson);
+  } else {
+    const spawnCommand = options.useYarn ? 'yarn' : 'npm';
+    const installCommand = options.useYarn ? 'add' : 'install';
+
+    const installArgs = [installCommand, ...dependencies];
+
+    if (options.installAsDevDependencies) {
+      installArgs.push('-D');
+    }
+
+    if (options.useYarn && !hasYarn2()) {
+      installArgs.push('--ignore-workspace-root-check');
+    }
+
+    const dependencyResult = spawnSync(spawnCommand, installArgs, {
+      stdio: 'inherit',
+    });
+
+    if (dependencyResult.status !== 0) {
+      logger.error('An error occurred while installing dependencies.');
+      logger.log(dependencyResult);
+      process.exit(1);
+    }
+  }
+}
+
+/**
+ * Detect if any babel dependencies need to be added to the project
+ * @param {Object} npmOptions Passed along to `latestVersion` and `getVersion`
+ * @param {Object} packageJson The current package.json so we can inspect its contents
+ * @returns {Array} Contains the packages and versions that need to be installed
+ * @example
+ * const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+ * // you can then spread the result when using installDependencies
+ * installDependencies(npmOptions, [
+ *   `@storybook/react@${storybookVersion}`,
+ *   ...babelDependencies,
+ * ]);
+ */
+export async function getBabelDependencies(npmOptions: NpmOptions, packageJson: PackageJson) {
+  const dependenciesToAdd = [];
+  let babelLoaderVersion = '^8.0.0-0';
+
+  const babelCoreVersion =
+    packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
+
+  if (!babelCoreVersion) {
+    if (!packageJson.dependencies['@babel/core'] && !packageJson.devDependencies['@babel/core']) {
+      const babelCoreInstallVersion = await getVersion(npmOptions, '@babel/core');
+      dependenciesToAdd.push(`@babel/core@${babelCoreInstallVersion}`);
+    }
+  } else {
+    const latestCompatibleBabelVersion = await latestVersion(
+      npmOptions,
+      'babel-core',
+      babelCoreVersion
+    );
+    // Babel 6
+    if (satisfies(latestCompatibleBabelVersion, '^6.0.0')) {
+      babelLoaderVersion = '^7.0.0';
+    }
+  }
+
+  if (!packageJson.dependencies['babel-loader'] && !packageJson.devDependencies['babel-loader']) {
+    const babelLoaderInstallVersion = await getVersion(
+      npmOptions,
+      'babel-loader',
+      babelLoaderVersion
+    );
+    dependenciesToAdd.push(`babel-loader@${babelLoaderInstallVersion}`);
+  }
+
+  return dependenciesToAdd;
+}
+
+export function addToDevDependenciesIfNotPresent(
+  packageJson: PackageJson,
+  name: string,
+  packageVersion: string
+) {
+  if (!packageJson.dependencies[name] && !packageJson.devDependencies[name]) {
+    packageJson.devDependencies[name] = packageVersion;
+  }
+}
+
+export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) {
+  const templateDir = path.resolve(templateRoot, `template-${storyFormat}/`);
+  if (!fs.existsSync(templateDir)) {
+    // Fallback to CSF plain first, in case format is typescript but template is not available.
+    if (storyFormat === StoryFormat.CSF_TYPESCRIPT) {
+      copyTemplate(templateRoot, StoryFormat.CSF);
+      return;
+    }
+
+    throw new Error(`Unsupported story format: ${storyFormat}`);
+  }
+  fse.copySync(templateDir, '.', { overwrite: true });
+}
diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
new file mode 100644
index 000000000000..edaf6127e75e
--- /dev/null
+++ b/lib/cli/src/initiate.ts
@@ -0,0 +1,310 @@
+import { UpdateNotifier, IPackage } from 'update-notifier';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import { detect, isStorybookInstalled, detectLanguage } from './detect';
+import { hasYarn } from './has_yarn';
+import {
+  installableProjectTypes,
+  ProjectType,
+  StoryFormat,
+  SupportedLanguage,
+} from './project_types';
+import {
+  commandLog,
+  codeLog,
+  paddedLog,
+  installDepsFromPackageJson,
+  getPackageJson,
+} from './helpers';
+import angularGenerator from './generators/ANGULAR';
+import emberGenerator from './generators/EMBER';
+import meteorGenerator from './generators/METEOR';
+import reactGenerator from './generators/REACT';
+import reactNativeGenerator from './generators/REACT_NATIVE';
+import reactScriptsGenerator from './generators/REACT_SCRIPTS';
+import sfcVueGenerator from './generators/SFC_VUE';
+import updateOrganisationsGenerator from './generators/UPDATE_PACKAGE_ORGANIZATIONS';
+import vueGenerator from './generators/VUE';
+import webpackReactGenerator from './generators/WEBPACK_REACT';
+import mithrilGenerator from './generators/MITHRIL';
+import marionetteGenerator from './generators/MARIONETTE';
+import markoGenerator from './generators/MARKO';
+import htmlGenerator from './generators/HTML';
+import webComponentsGenerator from './generators/WEB-COMPONENTS';
+import riotGenerator from './generators/RIOT';
+import preactGenerator from './generators/PREACT';
+import svelteGenerator from './generators/SVELTE';
+import raxGenerator from './generators/RAX';
+import { warn } from './warn';
+
+const logger = console;
+
+type CommandOptions = {
+  useNpm?: boolean;
+  type?: any;
+  force?: any;
+  html?: boolean;
+  skipInstall?: boolean;
+  storyFormat?: StoryFormat;
+  parser?: string;
+  yes?: boolean;
+};
+
+const installStorybook = (projectType: ProjectType, options: CommandOptions): Promise<void> => {
+  const useYarn = Boolean(options.useNpm !== true) && hasYarn();
+
+  const npmOptions = {
+    useYarn,
+    installAsDevDependencies: true,
+    skipInstall: options.skipInstall,
+  };
+
+  const hasTSDependency = detectLanguage() === SupportedLanguage.TYPESCRIPT;
+
+  warn({ hasTSDependency });
+
+  const defaultStoryFormat = hasTSDependency ? StoryFormat.CSF_TYPESCRIPT : StoryFormat.CSF;
+
+  const generatorOptions = {
+    storyFormat: options.storyFormat || defaultStoryFormat,
+  };
+
+  const runStorybookCommand = useYarn ? 'yarn storybook' : 'npm run storybook';
+
+  const end = () => {
+    if (!options.skipInstall) {
+      installDepsFromPackageJson(npmOptions);
+    }
+
+    logger.log('\nTo run your storybook, type:\n');
+    codeLog([runStorybookCommand]);
+    logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
+
+    // Add a new line for the clear visibility.
+    logger.log();
+  };
+
+  const REACT_NATIVE_DISCUSSION =
+    'https://github.com/storybookjs/storybook/blob/master/app/react-native/docs/manual-setup.md';
+
+  const runGenerator: () => Promise<void> = () => {
+    switch (projectType) {
+      case ProjectType.ALREADY_HAS_STORYBOOK:
+        logger.log();
+        paddedLog('There seems to be a storybook already available in this project.');
+        paddedLog('Apply following command to force:\n');
+        codeLog(['sb init [options] -f']);
+
+        // Add a new line for the clear visibility.
+        logger.log();
+        return Promise.resolve();
+
+      case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
+        return updateOrganisationsGenerator(options.parser, npmOptions)
+          .then(() => null) // commmandLog doesn't like to see output
+          .then(commandLog('Upgrading your project to the new storybook packages.'))
+          .then(end);
+
+      case ProjectType.REACT_SCRIPTS:
+        return reactScriptsGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Create React App" based project'))
+          .then(end);
+
+      case ProjectType.REACT:
+        return reactGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "React" app'))
+          .then(end);
+
+      case ProjectType.REACT_NATIVE: {
+        return (options.yes
+          ? Promise.resolve({ server: true })
+          : (inquirer.prompt([
+              {
+                type: 'confirm',
+                name: 'server',
+                message:
+                  'Do you want to install dependencies necessary to run storybook server? You can manually do it later by install @storybook/react-native-server',
+                default: false,
+              },
+            ]) as Promise<{ server: boolean }>)
+        )
+          .then(({ server }) => reactNativeGenerator(npmOptions, server, generatorOptions))
+          .then(commandLog('Adding storybook support to your "React Native" app'))
+          .then(end)
+          .then(() => {
+            logger.log(chalk.red('NOTE: installation is not 100% automated.'));
+            logger.log(`To quickly run storybook, replace contents of your app entry with:\n`);
+            codeLog(["export default from './storybook';"]);
+            logger.log('\n For more in depth setup instructions, see:\n');
+            logger.log(chalk.cyan(REACT_NATIVE_DISCUSSION));
+            logger.log();
+          });
+      }
+
+      case ProjectType.METEOR:
+        return meteorGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Meteor" app'))
+          .then(end);
+
+      case ProjectType.WEBPACK_REACT:
+        return webpackReactGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Webpack React" app'))
+          .then(end);
+
+      case ProjectType.REACT_PROJECT:
+        return reactGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "React" library'))
+          .then(end);
+
+      case ProjectType.SFC_VUE:
+        return sfcVueGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
+          .then(end);
+
+      case ProjectType.VUE:
+        return vueGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Vue" app'))
+          .then(end);
+
+      case ProjectType.ANGULAR:
+        return angularGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Angular" app'))
+          .then(end);
+
+      case ProjectType.EMBER:
+        return emberGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Ember" app'))
+          .then(end);
+
+      case ProjectType.MITHRIL:
+        return mithrilGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Mithril" app'))
+          .then(end);
+
+      case ProjectType.MARIONETTE:
+        return marionetteGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Marionette.js" app'))
+          .then(end);
+
+      case ProjectType.MARKO:
+        return markoGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Marko" app'))
+          .then(end);
+
+      case ProjectType.HTML:
+        return htmlGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "HTML" app'))
+          .then(end);
+
+      case ProjectType.WEB_COMPONENTS:
+        return webComponentsGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "web components" app'))
+          .then(end);
+
+      case ProjectType.RIOT:
+        return riotGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "riot.js" app'))
+          .then(end);
+
+      case ProjectType.PREACT:
+        return preactGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Preact" app'))
+          .then(end);
+
+      case ProjectType.SVELTE:
+        return svelteGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Svelte" app'))
+          .then(end);
+
+      case ProjectType.RAX:
+        return raxGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "Rax" app'))
+          .then(end);
+
+      default:
+        paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
+        paddedLog(
+          'You can specify a project type explicitly via `sb init --type <type>` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
+        );
+
+        // Add a new line for the clear visibility.
+        logger.log();
+
+        return projectTypeInquirer(options);
+    }
+  };
+
+  return runGenerator().catch((ex) => {
+    logger.error(`\n     ${chalk.red(ex.stack)}`);
+    process.exit(1);
+  });
+};
+
+const projectTypeInquirer = async (options: { yes?: boolean }) => {
+  const manualAnswer = options.yes
+    ? true
+    : await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'manual',
+          message: 'Do you want to manually choose a Storybook project type to install?',
+          default: false,
+        },
+      ]);
+
+  if (manualAnswer !== true && manualAnswer.manual) {
+    const frameworkAnswer = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'manualFramework',
+        message: 'Please choose a project type from the following list:',
+        choices: installableProjectTypes.map((type) => type.toUpperCase()),
+      },
+    ]);
+    return installStorybook(frameworkAnswer.manualFramework, options);
+  }
+  return Promise.resolve();
+};
+
+export default function (options: CommandOptions, pkg: IPackage): Promise<void> {
+  const welcomeMessage = 'sb init - the simplest way to add a storybook to your project.';
+  logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
+
+  // Update notify code.
+  new UpdateNotifier({
+    pkg,
+    updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
+  }).notify();
+
+  let projectType;
+  const projectTypeProvided = options.type;
+  const infoText = projectTypeProvided
+    ? 'Installing Storybook for user specified project type'
+    : 'Detecting project type';
+  const done = commandLog(infoText);
+
+  try {
+    if (projectTypeProvided) {
+      if (installableProjectTypes.includes(options.type)) {
+        const storybookInstalled = isStorybookInstalled(getPackageJson(), options.force);
+        projectType = storybookInstalled
+          ? ProjectType.ALREADY_HAS_STORYBOOK
+          : options.type.toUpperCase();
+      } else {
+        done(`The provided project type was not recognized by Storybook.`);
+        logger.log(`\nThe project types currently supported by Storybook are:\n`);
+        installableProjectTypes.sort().forEach((framework) => paddedLog(`- ${framework}`));
+        logger.log();
+        process.exit(1);
+      }
+    } else {
+      projectType = detect(options);
+    }
+  } catch (ex) {
+    done(ex.message);
+    process.exit(1);
+  }
+  done();
+
+  return installStorybook(projectType, options);
+}
diff --git a/lib/cli/src/latest_version.ts b/lib/cli/src/latest_version.ts
new file mode 100644
index 000000000000..7015aa68c287
--- /dev/null
+++ b/lib/cli/src/latest_version.ts
@@ -0,0 +1,144 @@
+import { spawn, sync } from 'cross-spawn';
+import { satisfies } from '@storybook/semver';
+import { hasYarn2 } from './has_yarn';
+
+/**
+ * Get the latest version of the package available on npmjs.com.
+ * If constraint is set then it returns a version satisfying it, otherwise the latest version available is returned.
+ *
+ * @param {Object} npmOptions Object containing a `useYarn: boolean` attribute
+ * @param {string} packageName Name of the package
+ * @param {Object} constraint Version range to use to constraint the returned version
+ * @return {Promise<string>} Promise resolved with a version
+ */
+export async function latestVersion(
+  npmOptions: { useYarn: boolean },
+  packageName: string,
+  constraint?: any
+): Promise<string> {
+  let versions: string | string[];
+
+  // TODO: Refactor things to hide the package manager details:
+  // Create a `PackageManager` interface that expose some functions like `version`, `add` etc
+  // and then create classes that handle the npm/yarn/yarn2 specific behavior
+  if (npmOptions.useYarn) {
+    if (hasYarn2()) {
+      versions = await spawnVersionsWithYarn2(packageName, constraint);
+    } else {
+      versions = await spawnVersionsWithYarn(packageName, constraint);
+    }
+  } else {
+    versions = await spawnVersionsWithNpm(packageName, constraint);
+  }
+
+  if (!constraint) {
+    return versions as string;
+  }
+
+  return (versions as string[]).reverse().find((version) => satisfies(version, constraint));
+}
+
+/**
+ *  Get latest version(s) of the package available on npmjs.com using NPM
+ *
+ * @param {string} packageName Name of the package
+ * @param {Object} constraint Version range to use to constraint the returned version
+ * @returns {Promise<string|Array<string>>} versions  Promise resolved with a version or an array of versions
+ */
+function spawnVersionsWithNpm(packageName: string, constraint: any): Promise<string | string[]> {
+  return new Promise((resolve, reject) => {
+    const command = spawn(
+      'npm',
+      ['info', packageName, constraint ? 'versions' : 'version', '--json', '--silent'],
+      {
+        cwd: process.cwd(),
+        env: process.env,
+        stdio: 'pipe',
+      }
+    );
+
+    command.stdout.on('data', (data) => {
+      try {
+        const info = JSON.parse(data);
+        if (info.error) {
+          reject(new Error(info.error.summary));
+        } else {
+          resolve(info);
+        }
+      } catch (e) {
+        reject(new Error(`Unable to find versions of ${packageName} using npm`));
+      }
+    });
+  });
+}
+
+/**
+ *  Get latest version(s) of the package available on npmjs.com using Yarn
+ *
+ * @param {string} packageName Name of the package
+ * @param {Object} constraint Version range to use to constraint the returned version
+ * @returns {Promise<string|Array<string>>} versions  Promise resolved with a version or an array of versions
+ */
+function spawnVersionsWithYarn(packageName: string, constraint: any): Promise<string | string[]> {
+  return new Promise((resolve, reject) => {
+    const command = spawn(
+      'yarn',
+      ['info', packageName, constraint ? 'versions' : 'version', '--json', '--silent'],
+      {
+        cwd: process.cwd(),
+        env: process.env,
+        stdio: 'pipe',
+      }
+    );
+
+    command.stdout.on('data', (data) => {
+      try {
+        const info = JSON.parse(data);
+        if (info.type === 'inspect') {
+          resolve(info.data);
+        }
+      } catch (e) {
+        reject(new Error(`Unable to find versions of ${packageName} using yarn`));
+      }
+    });
+
+    command.stderr.on('data', (data) => {
+      const info = JSON.parse(data);
+      if (info.type === 'error') {
+        reject(new Error(info.data));
+      }
+    });
+  });
+}
+
+/**
+ *  Get latest version(s) of the package available on npmjs.com using Yarn 2 a.k.a Berry
+ *
+ * @param {string} packageName Name of the package
+ * @param {Object} constraint Version range to use to constraint the returned version
+ * @returns {Promise<string|Array<string>>} versions  Promise resolved with a version or an array of versions
+ */
+async function spawnVersionsWithYarn2(
+  packageName: string,
+  constraint: any
+): Promise<string | string[]> {
+  const field = constraint ? 'versions' : 'version';
+
+  const commandResult = sync('yarn', ['npm', 'info', packageName, '--fields', field, '--json'], {
+    cwd: process.cwd(),
+    env: process.env,
+    stdio: 'pipe',
+    encoding: 'utf-8',
+  });
+
+  if (commandResult.status !== 0) {
+    throw new Error(commandResult.stderr.toString());
+  }
+
+  try {
+    const parsedOutput = JSON.parse(commandResult.stdout.toString());
+    return parsedOutput[field];
+  } catch (e) {
+    throw new Error(`Unable to find versions of ${packageName} using yarn 2`);
+  }
+}
diff --git a/lib/cli/src/migrate.ts b/lib/cli/src/migrate.ts
new file mode 100644
index 000000000000..89e3e6759fa9
--- /dev/null
+++ b/lib/cli/src/migrate.ts
@@ -0,0 +1,14 @@
+import { listCodemods, runCodemod } from '@storybook/codemod';
+
+export async function migrate(
+  migration: any,
+  { configDir, glob, dryRun, list, rename, logger, parser }: any
+) {
+  if (list) {
+    listCodemods().forEach((key: any) => logger.log(key));
+  } else if (migration) {
+    await runCodemod(migration, { configDir, glob, dryRun, logger, rename, parser });
+  } else {
+    throw new Error('Migrate: please specify a migration name or --list');
+  }
+}
diff --git a/lib/cli/src/npm_init.ts b/lib/cli/src/npm_init.ts
new file mode 100644
index 000000000000..f409557809fc
--- /dev/null
+++ b/lib/cli/src/npm_init.ts
@@ -0,0 +1,14 @@
+import { sync } from 'cross-spawn';
+import { hasYarn } from './has_yarn';
+
+const packageManager = hasYarn() ? 'yarn' : 'npm';
+
+export function npmInit(): string {
+  const results = sync(packageManager, ['init', '-y'], {
+    cwd: process.cwd(),
+    env: process.env,
+    stdio: 'pipe',
+    encoding: 'utf-8',
+  });
+  return results.stdout;
+}
diff --git a/lib/cli/src/project_types.test.ts b/lib/cli/src/project_types.test.ts
new file mode 100644
index 000000000000..5fb59f45b98c
--- /dev/null
+++ b/lib/cli/src/project_types.test.ts
@@ -0,0 +1,9 @@
+import { installableProjectTypes, SUPPORTED_FRAMEWORKS } from './project_types';
+
+describe('installableProjectTypes should have an entry for the supported framework', () => {
+  SUPPORTED_FRAMEWORKS.forEach((framework) => {
+    it(`${framework}`, () => {
+      expect(installableProjectTypes.includes(framework.replace(/-/g, '_'))).toBe(true);
+    });
+  });
+});
diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts
new file mode 100644
index 000000000000..48df5d200767
--- /dev/null
+++ b/lib/cli/src/project_types.ts
@@ -0,0 +1,230 @@
+export type SupportedFrameworks =
+  | 'react'
+  | 'react-native'
+  | 'vue'
+  | 'angular'
+  | 'mithril'
+  | 'riot'
+  | 'ember'
+  | 'marionette'
+  | 'marko'
+  | 'meteor'
+  | 'preact'
+  | 'svelte'
+  | 'rax';
+
+export enum ProjectType {
+  UNDETECTED = 'UNDETECTED',
+  REACT_SCRIPTS = 'REACT_SCRIPTS',
+  METEOR = 'METEOR',
+  REACT = 'REACT',
+  REACT_NATIVE = 'REACT_NATIVE',
+  REACT_PROJECT = 'REACT_PROJECT',
+  WEBPACK_REACT = 'WEBPACK_REACT',
+  VUE = 'VUE',
+  SFC_VUE = 'SFC_VUE',
+  ANGULAR = 'ANGULAR',
+  EMBER = 'EMBER',
+  ALREADY_HAS_STORYBOOK = 'ALREADY_HAS_STORYBOOK',
+  UPDATE_PACKAGE_ORGANIZATIONS = 'UPDATE_PACKAGE_ORGANIZATIONS',
+  WEB_COMPONENTS = 'WEB_COMPONENTS',
+  MITHRIL = 'MITHRIL',
+  MARIONETTE = 'MARIONETTE',
+  MARKO = 'MARKO',
+  HTML = 'HTML',
+  RIOT = 'RIOT',
+  PREACT = 'PREACT',
+  SVELTE = 'SVELTE',
+  RAX = 'RAX',
+}
+
+export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [
+  'react',
+  'react-native',
+  'vue',
+  'angular',
+  'mithril',
+  'riot',
+  'ember',
+  'marionette',
+  'marko',
+  'meteor',
+  'preact',
+  'svelte',
+  'rax',
+];
+
+export enum StoryFormat {
+  CSF = 'csf',
+  CSF_TYPESCRIPT = 'csf-ts',
+  MDX = 'mdx',
+}
+
+export enum SupportedLanguage {
+  JAVASCRIPT = 'javascript',
+  TYPESCRIPT = 'typescript',
+}
+
+export type TemplateMatcher = {
+  files?: boolean[];
+  dependencies?: boolean[];
+  peerDependencies?: boolean[];
+};
+
+export type TemplateConfiguration = {
+  preset: ProjectType;
+  /** will be checked both against dependencies and devDependencies */
+  dependencies?: string[];
+  peerDependencies?: string[];
+  files?: string[];
+  matcherFunction: (matcher: TemplateMatcher) => boolean;
+};
+
+/**
+ * Configuration to match a storybook preset template.
+ *
+ * This has to be an array sorted in order of specificity/priority.
+ * Reason: both REACT and WEBPACK_REACT have react as dependency,
+ * therefore WEBPACK_REACT has to come first, as it's more specific.
+ */
+export const supportedTemplates: TemplateConfiguration[] = [
+  {
+    preset: ProjectType.METEOR,
+    files: ['.meteor'],
+    matcherFunction: ({ files }) => {
+      return files.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.SFC_VUE,
+    dependencies: ['vue-loader', 'vuetify'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.some(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.VUE,
+    dependencies: ['vue', 'nuxt'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.some(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.EMBER,
+    dependencies: ['ember-cli'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.REACT_PROJECT,
+    peerDependencies: ['react'],
+    matcherFunction: ({ peerDependencies }) => {
+      return peerDependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.REACT_NATIVE,
+    dependencies: ['react-native', 'react-native-scripts'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.some(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.REACT_SCRIPTS,
+    // For projects using a custom/forked `react-scripts` package.
+    files: ['/node_modules/.bin/react-scripts'],
+    // For standard CRA projects
+    dependencies: ['react-scripts'],
+    matcherFunction: ({ dependencies, files }) => {
+      return dependencies.every(Boolean) || files.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.WEBPACK_REACT,
+    dependencies: ['react', 'webpack'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.REACT,
+    dependencies: ['react'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.ANGULAR,
+    dependencies: ['@angular/core'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.WEB_COMPONENTS,
+    dependencies: ['lit-element'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.MITHRIL,
+    dependencies: ['mithril'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.MARIONETTE,
+    dependencies: ['backbone.marionette'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.MARKO,
+    dependencies: ['marko'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.RIOT,
+    dependencies: ['riot'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.PREACT,
+    dependencies: ['preact'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.SVELTE,
+    dependencies: ['svelte'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+  {
+    preset: ProjectType.RAX,
+    dependencies: ['rax'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
+];
+
+const notInstallableProjectTypes: ProjectType[] = [
+  ProjectType.UNDETECTED,
+  ProjectType.ALREADY_HAS_STORYBOOK,
+  ProjectType.UPDATE_PACKAGE_ORGANIZATIONS,
+];
+
+export const installableProjectTypes = Object.values(ProjectType)
+  .filter((type) => !notInstallableProjectTypes.includes(type))
+  .map((type) => type.toLowerCase());
diff --git a/lib/cli/src/typings.d.ts b/lib/cli/src/typings.d.ts
new file mode 100644
index 000000000000..c368af0c4fa0
--- /dev/null
+++ b/lib/cli/src/typings.d.ts
@@ -0,0 +1,3 @@
+declare module '@storybook/codemod';
+declare module 'envinfo';
+declare module '@storybook/semver';
diff --git a/lib/cli/src/warn.test.ts b/lib/cli/src/warn.test.ts
new file mode 100644
index 000000000000..7ce18679f218
--- /dev/null
+++ b/lib/cli/src/warn.test.ts
@@ -0,0 +1,39 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+import { warn } from './warn';
+
+jest.mock('@storybook/node-logger');
+jest.mock('globby');
+
+describe('warn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when TypeScript is installed as a dependency', () => {
+    it('should not warn', () => {
+      warn({
+        hasTSDependency: true,
+      });
+      expect(logger.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when TypeScript is not installed as a dependency', () => {
+    it('should not warn if `.tsx?` files are not found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce([]);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should warn if `.tsx?` files are found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce(['a.ts']);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(2);
+    });
+  });
+});
diff --git a/lib/cli/src/warn.ts b/lib/cli/src/warn.ts
new file mode 100644
index 000000000000..a0614112ac87
--- /dev/null
+++ b/lib/cli/src/warn.ts
@@ -0,0 +1,22 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+
+interface Options {
+  hasTSDependency: boolean;
+}
+
+export const warn = ({ hasTSDependency }: Options) => {
+  if (!hasTSDependency) {
+    const hasTSFiles = !!globby.sync(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']).length;
+    if (hasTSFiles) {
+      logger.warn(
+        'We have detected TypeScript files in your project directory, however TypeScript is not listed as a project dependency.'
+      );
+      logger.warn('Storybook will continue as though this is a JavaScript project.');
+      logger.line();
+      logger.info(
+        'For more information, see: https://storybook.js.org/docs/configurations/typescript-config/'
+      );
+    }
+  }
+};
diff --git a/lib/cli/src/window.d.ts b/lib/cli/src/window.d.ts
new file mode 100644
index 000000000000..420d0c9916c0
--- /dev/null
+++ b/lib/cli/src/window.d.ts
@@ -0,0 +1,7 @@
+import { StoryStore } from '@storybook/client-api';
+
+declare global {
+  interface Window {
+    __STORYBOOK_STORY_STORE__: StoryStore;
+  }
+}
diff --git a/lib/cli/test/.gitignore b/lib/cli/test/.gitignore
index 04e4b2f72b16..8e16582a4776 100644
--- a/lib/cli/test/.gitignore
+++ b/lib/cli/test/.gitignore
@@ -1,2 +1,3 @@
 cra-fixtures
 run
+run-yarn-2
diff --git a/lib/cli/test/berryfy_package_json.js b/lib/cli/test/berryfy_package_json.js
new file mode 100755
index 000000000000..e414dc9377ca
--- /dev/null
+++ b/lib/cli/test/berryfy_package_json.js
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+// Map between SB packages names and their folders inside this monorepo
+const sbRootDir = '../../../../..';
+const sbPackagesResolutionsMap = {
+  '@storybook/addons': `portal:${sbRootDir}/lib/addons`,
+  '@storybook/api': `portal:${sbRootDir}/lib/api`,
+  '@storybook/channel-postmessage': `portal:${sbRootDir}/lib/channel-postmessage`,
+  '@storybook/channel-websocket': `portal:${sbRootDir}/lib/channel-websocket`,
+  '@storybook/channels': `portal:${sbRootDir}/lib/channels`,
+  '@storybook/cli': `portal:${sbRootDir}/lib/cli`,
+  '@storybook/core': `portal:${sbRootDir}/lib/core`,
+  '@storybook/source-loader': `portal:${sbRootDir}/lib/source-loader`,
+  '@storybook/router': `portal:${sbRootDir}/lib/router`,
+  '@storybook/theming': `portal:${sbRootDir}/lib/theming`,
+  '@storybook/ui': `portal:${sbRootDir}/lib/ui`,
+  '@storybook/ember': `portal:${sbRootDir}/app/ember`,
+  '@storybook/html': `portal:${sbRootDir}/app/html`,
+  '@storybook/marionette': `portal:${sbRootDir}/app/marionette`,
+  '@storybook/marko': `portal:${sbRootDir}/app/marko`,
+  '@storybook/mithril': `portal:${sbRootDir}/app/mithril`,
+  '@storybook/preact': `portal:${sbRootDir}/app/preact`,
+  '@storybook/rax': `portal:${sbRootDir}/app/rax`,
+  '@storybook/react': `portal:${sbRootDir}/app/react`,
+  '@storybook/riot': `portal:${sbRootDir}/app/riot`,
+  '@storybook/server': `portal:${sbRootDir}/app/server`,
+  '@storybook/svelte': `portal:${sbRootDir}/app/svelte`,
+  '@storybook/vue': `portal:${sbRootDir}/app/vue`,
+  '@storybook/web-components': `portal:${sbRootDir}/app/web-components`,
+  '@storybook/addon-actions': `portal:${sbRootDir}/addons/actions`,
+  '@storybook/addon-links': `portal:${sbRootDir}/addons/links`,
+  '@storybook/addon-knobs': `portal:${sbRootDir}/addons/knobs`,
+};
+
+const fs = require('fs');
+
+const args = process.argv.slice(2);
+
+if (args.length !== 1) {
+  throw Error('This script must be ran with 1 argument: the path of the package.json to update');
+}
+
+const packageJsonPath = args[0];
+const packageJson = require(packageJsonPath);
+
+// Add `@storybook/cli` as dev dependency to be able to do `yarn sb init` with Yarn 2
+packageJson.devDependencies = {
+  ...packageJson.devDependencies,
+  '@storybook/cli': 'next',
+};
+
+// Link `@storybook/xxx` package to local one by filling `resolutions` attribute using "portal" protocol (https://yarnpkg.com/features/protocols)
+// We have to do it like this for now because we can not used Yarn v1 workspace.
+// This can be rework when the whole monorepo will be migrated to Yarn 2
+packageJson.resolutions = {
+  ...packageJson.resolutions,
+  ...sbPackagesResolutionsMap,
+};
+
+// Get a string representing updated `package.json` and write it
+const prettyUpdatedPackageJson = JSON.stringify(packageJson, null, 2);
+fs.writeFileSync(packageJsonPath, prettyUpdatedPackageJson);
diff --git a/lib/cli/test/fixtures/angular-cli-v6/angular.json b/lib/cli/test/fixtures/angular-cli-v6/angular.json
index da2b173de2e1..90486f8ff142 100644
--- a/lib/cli/test/fixtures/angular-cli-v6/angular.json
+++ b/lib/cli/test/fixtures/angular-cli-v6/angular.json
@@ -80,18 +80,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -110,15 +98,6 @@
               "devServerTarget": "angular-cli-v6:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
diff --git a/lib/cli/test/fixtures/angular-cli-v6/package.json b/lib/cli/test/fixtures/angular-cli-v6/package.json
index a19dfbbd17f7..cbfdde2c6aad 100644
--- a/lib/cli/test/fixtures/angular-cli-v6/package.json
+++ b/lib/cli/test/fixtures/angular-cli-v6/package.json
@@ -42,7 +42,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tslint": "^5.14.0",
     "typescript": "^3.4.0"
   }
 }
diff --git a/lib/cli/test/fixtures/angular-cli-v6/src/tslint.json b/lib/cli/test/fixtures/angular-cli-v6/src/tslint.json
deleted file mode 100644
index 52e2c1a5a74c..000000000000
--- a/lib/cli/test/fixtures/angular-cli-v6/src/tslint.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
-    }
-}
diff --git a/lib/cli/test/fixtures/angular-cli-v6/tslint.json b/lib/cli/test/fixtures/angular-cli-v6/tslint.json
deleted file mode 100644
index 6ddb6b293151..000000000000
--- a/lib/cli/test/fixtures/angular-cli-v6/tslint.json
+++ /dev/null
@@ -1,131 +0,0 @@
-{
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true
-  }
-}
diff --git a/lib/cli/test/fixtures/angular-cli-v7/angular.json b/lib/cli/test/fixtures/angular-cli-v7/angular.json
index 5fb64a03ee65..a0aabc89660d 100644
--- a/lib/cli/test/fixtures/angular-cli-v7/angular.json
+++ b/lib/cli/test/fixtures/angular-cli-v7/angular.json
@@ -93,18 +93,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -124,15 +112,6 @@
               "devServerTarget": "angular-cli-v7:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
diff --git a/lib/cli/test/fixtures/angular-cli-v7/package.json b/lib/cli/test/fixtures/angular-cli-v7/package.json
index 0d181a69b94b..e179eaf2e516 100644
--- a/lib/cli/test/fixtures/angular-cli-v7/package.json
+++ b/lib/cli/test/fixtures/angular-cli-v7/package.json
@@ -42,7 +42,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tslint": "^5.14.0",
     "typescript": "^3.4.0"
   }
 }
diff --git a/lib/cli/test/fixtures/angular-cli-v7/src/tslint.json b/lib/cli/test/fixtures/angular-cli-v7/src/tslint.json
deleted file mode 100644
index 52e2c1a5a74c..000000000000
--- a/lib/cli/test/fixtures/angular-cli-v7/src/tslint.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
-    }
-}
diff --git a/lib/cli/test/fixtures/angular-cli-v7/tslint.json b/lib/cli/test/fixtures/angular-cli-v7/tslint.json
deleted file mode 100644
index 6ddb6b293151..000000000000
--- a/lib/cli/test/fixtures/angular-cli-v7/tslint.json
+++ /dev/null
@@ -1,131 +0,0 @@
-{
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true
-  }
-}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/.editorconfig b/lib/cli/test/fixtures/angular-cli-v8/.editorconfig
new file mode 100644
index 000000000000..6e87a003da89
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/lib/cli/test/fixtures/angular-cli-v8/.gitignore b/lib/cli/test/fixtures/angular-cli-v8/.gitignore
new file mode 100644
index 000000000000..ee5c9d8336b7
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/.gitignore
@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/lib/cli/test/fixtures/angular-cli-v8/README.md b/lib/cli/test/fixtures/angular-cli-v8/README.md
new file mode 100644
index 000000000000..2004d322d3fa
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/README.md
@@ -0,0 +1,27 @@
+# AngularCliV7
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.0-rc.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/lib/cli/test/fixtures/angular-cli-v8/angular.json b/lib/cli/test/fixtures/angular-cli-v8/angular.json
new file mode 100644
index 000000000000..bcd6922d0d31
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/angular.json
@@ -0,0 +1,110 @@
+{
+  /* angular.json can have comments */
+  // angular.json can have comments
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-cli-v8": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-cli-v8",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-cli-v8:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-cli-v8:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-cli-v8:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": ["src/styles.scss"],
+            "scripts": [],
+            "assets": ["src/favicon.ico", "src/assets"]
+          }
+        }
+      }
+    },
+    "angular-cli-v8-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular-cli-v8:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angular-cli-v8:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-cli-v8"
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/package.json b/lib/cli/test/fixtures/angular-cli-v8/package.json
new file mode 100644
index 000000000000..2e060cd5d422
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "angular-cli-v8",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "ng build",
+    "e2e": "ng e2e",
+    "lint": "ng lint",
+    "ng": "ng",
+    "start": "ng serve",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "^8.2.13",
+    "@angular/common": "^8.2.13",
+    "@angular/compiler": "^8.2.13",
+    "@angular/core": "^8.2.13",
+    "@angular/forms": "^8.2.13",
+    "@angular/platform-browser": "^8.2.13",
+    "@angular/platform-browser-dynamic": "^8.2.13",
+    "@angular/router": "^8.2.13",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.802.0",
+    "@angular/cli": "~8.2.0",
+    "@angular/compiler-cli": "~8.2.0",
+    "@angular/language-service": "~8.2.0",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.0.8",
+    "codelyzer": "^5.0.0",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "typescript": "~3.5.3"
+  }
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.html b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.html
new file mode 100644
index 000000000000..fa2706a406ba
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.html
@@ -0,0 +1,20 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{ title }}!
+  </h1>
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.scss b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.spec.ts b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..85317a397a06
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'angular-cli-v7'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('angular-cli-v7');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-cli-v7!');
+  });
+});
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.ts b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.ts
new file mode 100644
index 000000000000..f13bc69b1af0
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  title = 'angular-cli-v8';
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/app/app.module.ts b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.module.ts
new file mode 100644
index 000000000000..f65716351aa5
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/app/app.module.ts
@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/assets/.gitkeep b/lib/cli/test/fixtures/angular-cli-v8/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/browserslist b/lib/cli/test/fixtures/angular-cli-v8/src/browserslist
new file mode 100644
index 000000000000..37371cb04b9f
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/browserslist
@@ -0,0 +1,11 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.prod.ts b/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.prod.ts
new file mode 100644
index 000000000000..3612073bc31c
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.ts b/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.ts
new file mode 100644
index 000000000000..7b4f817adb75
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/favicon.ico b/lib/cli/test/fixtures/angular-cli-v8/src/favicon.ico
new file mode 100644
index 000000000000..8081c7ceaf2b
Binary files /dev/null and b/lib/cli/test/fixtures/angular-cli-v8/src/favicon.ico differ
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/index.html b/lib/cli/test/fixtures/angular-cli-v8/src/index.html
new file mode 100644
index 000000000000..04c515deb452
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularCliV7</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/karma.conf.js b/lib/cli/test/fixtures/angular-cli-v8/src/karma.conf.js
new file mode 100644
index 000000000000..b6e00421c95f
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/karma.conf.js
@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/main.ts b/lib/cli/test/fixtures/angular-cli-v8/src/main.ts
new file mode 100644
index 000000000000..c7b673cf44b3
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/polyfills.ts b/lib/cli/test/fixtures/angular-cli-v8/src/polyfills.ts
new file mode 100644
index 000000000000..1ec5d9a37750
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/polyfills.ts
@@ -0,0 +1,81 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/**
+ * If the application will be indexed by Google Search, the following is required.
+ * Googlebot uses a renderer based on Chrome 41.
+ * https://developers.google.com/search/docs/guides/rendering
+ **/
+// import 'core-js/es6/array';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/styles.scss b/lib/cli/test/fixtures/angular-cli-v8/src/styles.scss
new file mode 100644
index 000000000000..90d4ee0072ce
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/styles.scss
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/test.ts b/lib/cli/test/fixtures/angular-cli-v8/src/test.ts
new file mode 100644
index 000000000000..16317897b1c5
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.app.json b/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.app.json
new file mode 100644
index 000000000000..190fd300b601
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.app.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.spec.json b/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.spec.json
new file mode 100644
index 000000000000..de7733630eb2
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/src/tsconfig.spec.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v8/tsconfig.json b/lib/cli/test/fixtures/angular-cli-v8/tsconfig.json
new file mode 100644
index 000000000000..03ed6abbcf2b
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v8/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  /* tsconfig.json can have comments */
+  // tsconfig.json can have comments
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/.editorconfig b/lib/cli/test/fixtures/angular-cli-v9/.editorconfig
new file mode 100644
index 000000000000..e89330a618c1
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/lib/cli/test/fixtures/angular-cli-v9/.gitignore b/lib/cli/test/fixtures/angular-cli-v9/.gitignore
new file mode 100644
index 000000000000..86d943a9b2e8
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/.gitignore
@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/lib/cli/test/fixtures/angular-cli-v9/README.md b/lib/cli/test/fixtures/angular-cli-v9/README.md
new file mode 100644
index 000000000000..b981ad7cd146
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/README.md
@@ -0,0 +1,27 @@
+# Ng9
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.0-rc.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/lib/cli/test/fixtures/angular-cli-v9/angular.json b/lib/cli/test/fixtures/angular-cli-v9/angular.json
new file mode 100644
index 000000000000..471778afb776
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/angular.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-cli-v9": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "css"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-cli-v9",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-cli-v9:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-cli-v9:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-cli-v9:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular-cli-v9:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angular-cli-v9:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-cli-v9"
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/browserslist b/lib/cli/test/fixtures/angular-cli-v9/browserslist
new file mode 100644
index 000000000000..80848532e47d
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/angular-cli-v9/karma.conf.js b/lib/cli/test/fixtures/angular-cli-v9/karma.conf.js
new file mode 100644
index 000000000000..5f70907a0c4b
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/ng9'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/lib/cli/test/fixtures/angular-cli-v9/package.json b/lib/cli/test/fixtures/angular-cli-v9/package.json
new file mode 100644
index 000000000000..e23c41c81c78
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "angular-cli-v9",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "ng build",
+    "e2e": "ng e2e",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
+    "lint": "ng lint",
+    "ng": "ng",
+    "start": "ng serve",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "9.0.0-rc.12",
+    "@angular/common": "9.0.0-rc.12",
+    "@angular/compiler": "9.0.0-rc.12",
+    "@angular/core": "9.0.0-rc.12",
+    "@angular/forms": "9.0.0-rc.12",
+    "@angular/platform-browser": "9.0.0-rc.12",
+    "@angular/platform-browser-dynamic": "9.0.0-rc.12",
+    "@angular/router": "9.0.0-rc.12",
+    "rxjs": "~6.5.3",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "0.900.0-rc.12",
+    "@angular/cli": "9.0.0-rc.12",
+    "@angular/compiler-cli": "9.0.0-rc.12",
+    "@angular/language-service": "9.0.0-rc.12",
+    "@types/jasmine": "~3.4.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.2",
+    "ts-node": "~8.3.0",
+    "typescript": "~3.6.4"
+  }
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/app/app-routing.module.ts b/lib/cli/test/fixtures/angular-cli-v9/src/app/app-routing.module.ts
new file mode 100644
index 000000000000..06c734263e17
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/app/app-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.html b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.html
new file mode 100644
index 000000000000..72fd8e2a5c1c
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.html
@@ -0,0 +1,531 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    height: 60px;
+    margin: -8px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 32px auto;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(black, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+
+<!-- Toolbar -->
+<div class="toolbar" role="banner">
+  <img
+    width="40"
+    alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
+  <span>Welcome</span>
+    <div class="spacer"></div>
+    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
+      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+        <rect width="400" height="400" fill="none"/>
+        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
+      </svg>
+    </a>
+</div>
+
+<div class="content" role="main">
+
+  <!-- Highlight Card -->
+  <div class="card highlight-card card-small">
+
+    <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
+      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
+        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
+        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
+          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
+          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
+        </g>
+      </g>
+    </svg>
+
+    <span>{{ title }} app is running!</span>
+
+    <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
+      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
+    </svg>
+
+  </div>
+
+  <!-- Resources -->
+  <h2>Resources</h2>
+  <p>Here are some links to help you get started:</p>
+
+  <div class="card-container">
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
+
+      <span>Learn Angular</span>
+
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
+
+      <span>CLI Documentation</span>
+
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
+
+      <span>Angular Blog</span>
+
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+    </a>
+
+  </div>
+
+  <!-- Next Steps -->
+  <h2>Next Steps</h2>
+  <p>What do you want to do next with your app?</p>
+
+  <input type="hidden" #selection>
+
+  <div class="card-container">
+    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>New Component</span>
+    </div>
+
+    <div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>Angular Material</span>
+    </div>
+
+    <div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>Add PWA Support</span>
+    </div>
+
+    <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>Add Dependency</span>
+    </div>
+
+    <div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>Run and Watch Tests</span>
+    </div>
+
+    <div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+
+      <span>Build for Production</span>
+    </div>
+  </div>
+
+  <!-- Terminal -->
+  <div class="terminal" [ngSwitch]="selection.value">
+      <pre *ngSwitchDefault>ng generate component xyz</pre>
+      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
+      <pre *ngSwitchCase="'test'">ng test</pre>
+      <pre *ngSwitchCase="'build'">ng build --prod</pre>
+  </div>
+
+  <!-- Links -->
+  <div class="card-container">
+    <a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
+      <svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
+        <path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
+        <path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
+        <path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
+        <path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
+        <path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
+      <svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
+        <g id="Group_21" data-name="Group 21" transform="translate(0)">
+          <path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
+          <path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
+          <path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
+          <path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
+          <rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
+        </g>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
+      <svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
+        <defs>
+          <clipPath id="clip-path">
+            <rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
+          </clipPath>
+        </defs>
+        <g id="Group_25" data-name="Group 25" transform="translate(0)">
+          <path id="Path_24" data-name="Path 24" d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
+          <path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-3851.207 -311.417)" fill="#311b92"/>
+          <g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
+            <g id="Group_23" data-name="Group 23" transform="translate(0 0)">
+              <g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
+                <path id="Path_26" data-name="Path 26" d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3822.107 -368.821)" fill="#fff"/>
+              </g>
+            </g>
+          </g>
+          <path id="Path_27" data-name="Path 27" d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3814.311 -359.969)" fill="#fff"/>
+        </g>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
+      <svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
+        <g id="Group_26" data-name="Group 26" transform="translate(0)">
+          <path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
+          <path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
+          <path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
+        </g>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
+      <svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
+        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
+      </svg>
+    </a>
+
+    <a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular" target="_blank" rel="noopener">
+      <svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447" viewBox="0 0 19.447 19.447">
+        <g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447" transform="translate(1612 405)" fill="#e60257"/>
+          <g id="gitter" transform="translate(1617.795 408.636)">
+            <g id="Group_33" data-name="Group 33" transform="translate(0 0)">
+              <rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601" transform="translate(2.304 2.324)" fill="#fff"/>
+              <rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601" transform="translate(4.607 2.324)" fill="#fff"/>
+              <rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648" transform="translate(6.91 2.324)" fill="#fff"/>
+              <rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971" transform="translate(0 0)" fill="#fff"/>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </a>
+  </div>
+
+  <!-- Footer -->
+  <footer>
+      Love Angular?&nbsp;
+      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
+        <div class="github-star-badge">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+          Star
+        </div>
+      </a>
+      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+      </a>
+  </footer>
+
+  <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
+    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
+  </svg>
+
+</div>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+
+
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.spec.ts b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.spec.ts
new file mode 100644
index 000000000000..a75606b8cd3d
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ng9'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('ng9');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('ng9 app is running!');
+  });
+});
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.ts b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.ts
new file mode 100644
index 000000000000..737f54a57870
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  title = 'angular-cli-v9';
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/app/app.module.ts b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.module.ts
new file mode 100644
index 000000000000..2c3ba2995c85
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/app/app.module.ts
@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/assets/.gitkeep b/lib/cli/test/fixtures/angular-cli-v9/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.prod.ts b/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.prod.ts
new file mode 100644
index 000000000000..3612073bc31c
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.ts b/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.ts
new file mode 100644
index 000000000000..7b4f817adb75
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/favicon.ico b/lib/cli/test/fixtures/angular-cli-v9/src/favicon.ico
new file mode 100644
index 000000000000..997406ad22c2
Binary files /dev/null and b/lib/cli/test/fixtures/angular-cli-v9/src/favicon.ico differ
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/index.html b/lib/cli/test/fixtures/angular-cli-v9/src/index.html
new file mode 100644
index 000000000000..7f3a41e64024
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Ng9</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/main.ts b/lib/cli/test/fixtures/angular-cli-v9/src/main.ts
new file mode 100644
index 000000000000..c7b673cf44b3
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/polyfills.ts b/lib/cli/test/fixtures/angular-cli-v9/src/polyfills.ts
new file mode 100644
index 000000000000..aa665d6b8740
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/polyfills.ts
@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/styles.css b/lib/cli/test/fixtures/angular-cli-v9/src/styles.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/lib/cli/test/fixtures/angular-cli-v9/src/test.ts b/lib/cli/test/fixtures/angular-cli-v9/src/test.ts
new file mode 100644
index 000000000000..16317897b1c5
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/lib/cli/test/fixtures/angular-cli-v9/tsconfig.app.json b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.app.json
new file mode 100644
index 000000000000..f758d9820d53
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/tsconfig.json b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.json
new file mode 100644
index 000000000000..30956ae7ea26
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}
diff --git a/lib/cli/test/fixtures/angular-cli-v9/tsconfig.spec.json b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.spec.json
new file mode 100644
index 000000000000..6400fde7d544
--- /dev/null
+++ b/lib/cli/test/fixtures/angular-cli-v9/tsconfig.spec.json
@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/lib/cli/test/fixtures/ember-cli/package.json b/lib/cli/test/fixtures/ember-cli/package.json
index 64bf0b7aa2b2..c7d37a388c06 100644
--- a/lib/cli/test/fixtures/ember-cli/package.json
+++ b/lib/cli/test/fixtures/ember-cli/package.json
@@ -29,7 +29,6 @@
     "ember-cli-dependency-checker": "^3.0.0",
     "ember-cli-eslint": "^4.2.3",
     "ember-cli-htmlbars": "^3.0.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
     "ember-cli-qunit": "^4.3.2",
     "ember-cli-sri": "^2.1.1",
diff --git a/lib/cli/test/fixtures/polymer/package.json b/lib/cli/test/fixtures/polymer/package.json
deleted file mode 100644
index ba2702e69795..000000000000
--- a/lib/cli/test/fixtures/polymer/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "polymer-fixture",
-  "version": "1.0.0",
-  "license": "MIT",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack -p dist"
-  },
-  "dependencies": {
-    "@polymer/polymer": "^2.2.0"
-  },
-  "devDependencies": {}
-}
diff --git a/lib/cli/test/fixtures/react_babel_6/.babelrc b/lib/cli/test/fixtures/react_babel_6/.babelrc
deleted file mode 100644
index f93c98353c11..000000000000
--- a/lib/cli/test/fixtures/react_babel_6/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "presets": ["react"],
-  "plugins": ["external-helpers"]
-}
diff --git a/lib/cli/test/fixtures/react_babel_6/index.html b/lib/cli/test/fixtures/react_babel_6/index.html
deleted file mode 100644
index bcb2f9489a6f..000000000000
--- a/lib/cli/test/fixtures/react_babel_6/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Hello world</title>
-</head>
-<body>
-    <div id="root"></div>
-    <script src="dist/bundle.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_babel_6/index.js b/lib/cli/test/fixtures/react_babel_6/index.js
deleted file mode 100644
index 8e5bb96fc9cd..000000000000
--- a/lib/cli/test/fixtures/react_babel_6/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-ReactDOM.render(
-  <h1>Hello, world!</h1>,
-  document.getElementById('root')
-);
diff --git a/lib/cli/test/fixtures/react_babel_6/package.json b/lib/cli/test/fixtures/react_babel_6/package.json
deleted file mode 100644
index e7471988ceaf..000000000000
--- a/lib/cli/test/fixtures/react_babel_6/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "react-babel-6-fixture",
-  "version": "1.0.0",
-  "license": "MIT",
-  "main": "index.js",
-  "scripts": {
-    "build": "rollup -c"
-  },
-  "dependencies": {
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3"
-  },
-  "devDependencies": {
-    "babel-core": "6.26.3",
-    "babel-plugin-external-helpers": "6.22.0",
-    "babel-preset-react": "6.24.1",
-    "rollup": "^1.4.1",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-replace": "^2.1.0"
-  }
-}
diff --git a/lib/cli/test/fixtures/react_babel_6/rollup.config.js b/lib/cli/test/fixtures/react_babel_6/rollup.config.js
deleted file mode 100644
index 2f0639d761fe..000000000000
--- a/lib/cli/test/fixtures/react_babel_6/rollup.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import replace from 'rollup-plugin-replace';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import babel from 'rollup-plugin-babel';
-
-export default {
-  input: 'index.js',
-  output: {
-    file: 'dist/bundle.js',
-    format: 'iife'
-  },
-  plugins: [
-    replace({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    commonjs(),
-    resolve(),
-    babel({
-      exclude: 'node_modules/**' // only transpile our source code
-    })
-  ]
-};
diff --git a/lib/cli/test/fixtures/react_babel_config_js/.storybook/config.js b/lib/cli/test/fixtures/react_babel_config_js/.storybook/config.js
deleted file mode 100644
index 639b168f733c..000000000000
--- a/lib/cli/test/fixtures/react_babel_config_js/.storybook/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/react_babel_config_js/.storybook/main.js b/lib/cli/test/fixtures/react_babel_config_js/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/react_babel_config_js/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/react_babel_config_js/stories/index.stories.js b/lib/cli/test/fixtures/react_babel_config_js/stories/index.stories.js
deleted file mode 100644
index 3734505550ee..000000000000
--- a/lib/cli/test/fixtures/react_babel_config_js/stories/index.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-const data = {
-  user: {
-    name: 'Joe',
-  },
-};
-
-storiesOf('My Component', module)
-  .add('state', () => <span>Hello {data.user?.name}</span>)
diff --git a/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/config.js b/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/config.js
deleted file mode 100644
index 639b168f733c..000000000000
--- a/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/main.js b/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/react_babel_custom_preset/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/react_babel_custom_preset/stories/index.stories.js b/lib/cli/test/fixtures/react_babel_custom_preset/stories/index.stories.js
deleted file mode 100644
index 3734505550ee..000000000000
--- a/lib/cli/test/fixtures/react_babel_custom_preset/stories/index.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-const data = {
-  user: {
-    name: 'Joe',
-  },
-};
-
-storiesOf('My Component', module)
-  .add('state', () => <span>Hello {data.user?.name}</span>)
diff --git a/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/config.js b/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/config.js
deleted file mode 100644
index 639b168f733c..000000000000
--- a/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/main.js b/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/react_babel_pkg_json/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/react_babel_pkg_json/stories/index.stories.js b/lib/cli/test/fixtures/react_babel_pkg_json/stories/index.stories.js
deleted file mode 100644
index 3734505550ee..000000000000
--- a/lib/cli/test/fixtures/react_babel_pkg_json/stories/index.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-const data = {
-  user: {
-    name: 'Joe',
-  },
-};
-
-storiesOf('My Component', module)
-  .add('state', () => <span>Hello {data.user?.name}</span>)
diff --git a/lib/cli/test/fixtures/react_babelrc/.storybook/config.js b/lib/cli/test/fixtures/react_babelrc/.storybook/config.js
deleted file mode 100644
index 639b168f733c..000000000000
--- a/lib/cli/test/fixtures/react_babelrc/.storybook/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/react_babelrc/.storybook/main.js b/lib/cli/test/fixtures/react_babelrc/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/react_babelrc/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/react_babelrc/stories/index.stories.js b/lib/cli/test/fixtures/react_babelrc/stories/index.stories.js
deleted file mode 100644
index 3734505550ee..000000000000
--- a/lib/cli/test/fixtures/react_babelrc/stories/index.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-const data = {
-  user: {
-    name: 'Joe',
-  },
-};
-
-storiesOf('My Component', module)
-  .add('state', () => <span>Hello {data.user?.name}</span>)
diff --git a/lib/cli/test/fixtures/react_babelrc_js/.storybook/config.js b/lib/cli/test/fixtures/react_babelrc_js/.storybook/config.js
deleted file mode 100644
index 639b168f733c..000000000000
--- a/lib/cli/test/fixtures/react_babelrc_js/.storybook/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/react_babelrc_js/.storybook/main.js b/lib/cli/test/fixtures/react_babelrc_js/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/react_babelrc_js/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/react_babelrc_js/stories/index.stories.js b/lib/cli/test/fixtures/react_babelrc_js/stories/index.stories.js
deleted file mode 100644
index 3734505550ee..000000000000
--- a/lib/cli/test/fixtures/react_babelrc_js/stories/index.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-const data = {
-  user: {
-    name: 'Joe',
-  },
-};
-
-storiesOf('My Component', module)
-  .add('state', () => <span>Hello {data.user?.name}</span>)
diff --git a/lib/cli/test/fixtures/react_native/.babelrc b/lib/cli/test/fixtures/react_native/.babelrc
deleted file mode 100644
index a9ce1369e617..000000000000
--- a/lib/cli/test/fixtures/react_native/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["react-native"]
-}
diff --git a/lib/cli/test/fixtures/react_native/.buckconfig b/lib/cli/test/fixtures/react_native/.buckconfig
deleted file mode 100644
index 934256cb29d4..000000000000
--- a/lib/cli/test/fixtures/react_native/.buckconfig
+++ /dev/null
@@ -1,6 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2
diff --git a/lib/cli/test/fixtures/react_native/.flowconfig b/lib/cli/test/fixtures/react_native/.flowconfig
deleted file mode 100644
index 83461209da06..000000000000
--- a/lib/cli/test/fixtures/react_native/.flowconfig
+++ /dev/null
@@ -1,45 +0,0 @@
-[ignore]
-; We fork some components by platform
-.*/*[.]android.js
-
-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow
-flow/
-
-[options]
-emoji=true
-
-module.system=haste
-
-munge_underscores=true
-
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-unsafe.enable_getters_and_setters=true
-
-[version]
-^0.49.1
diff --git a/lib/cli/test/fixtures/react_native/.gitattributes b/lib/cli/test/fixtures/react_native/.gitattributes
deleted file mode 100644
index d42ff18354df..000000000000
--- a/lib/cli/test/fixtures/react_native/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-*.pbxproj -text
diff --git a/lib/cli/test/fixtures/react_native/.gitignore b/lib/cli/test/fixtures/react_native/.gitignore
deleted file mode 100644
index 10be19751feb..000000000000
--- a/lib/cli/test/fixtures/react_native/.gitignore
+++ /dev/null
@@ -1,53 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
-
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
diff --git a/lib/cli/test/fixtures/react_native/.watchmanconfig b/lib/cli/test/fixtures/react_native/.watchmanconfig
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/lib/cli/test/fixtures/react_native/.watchmanconfig
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_native/__tests__/index.android.js b/lib/cli/test/fixtures/react_native/__tests__/index.android.js
deleted file mode 100644
index b49b9087f416..000000000000
--- a/lib/cli/test/fixtures/react_native/__tests__/index.android.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.android.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
-});
diff --git a/lib/cli/test/fixtures/react_native/__tests__/index.ios.js b/lib/cli/test/fixtures/react_native/__tests__/index.ios.js
deleted file mode 100644
index ba7c5b5e1679..000000000000
--- a/lib/cli/test/fixtures/react_native/__tests__/index.ios.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.ios.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
-});
diff --git a/lib/cli/test/fixtures/react_native/android/app/BUCK b/lib/cli/test/fixtures/react_native/android/app/BUCK
deleted file mode 100644
index 0086489176c1..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/BUCK
+++ /dev/null
@@ -1,65 +0,0 @@
-# To learn about Buck see [Docs](https://buckbuild.com/).
-# To run your application with Buck:
-# - install Buck
-# - `npm start` - to start the packager
-# - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
-# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
-# - `buck install -r android/app` - compile, install and run application
-#
-
-lib_deps = []
-
-for jarfile in glob(['libs/*.jar']):
-  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
-  lib_deps.append(':' + name)
-  prebuilt_jar(
-    name = name,
-    binary_jar = jarfile,
-  )
-
-for aarfile in glob(['libs/*.aar']):
-  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
-  lib_deps.append(':' + name)
-  android_prebuilt_aar(
-    name = name,
-    aar = aarfile,
-  )
-
-android_library(
-    name = "all-libs",
-    exported_deps = lib_deps,
-)
-
-android_library(
-    name = "app-code",
-    srcs = glob([
-        "src/main/java/**/*.java",
-    ]),
-    deps = [
-        ":all-libs",
-        ":build_config",
-        ":res",
-    ],
-)
-
-android_build_config(
-    name = "build_config",
-    package = "com.react_native",
-)
-
-android_resource(
-    name = "res",
-    package = "com.react_native",
-    res = "src/main/res",
-)
-
-android_binary(
-    name = "app",
-    keystore = "//android/keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    package_type = "debug",
-    deps = [
-        ":app-code",
-    ],
-)
diff --git a/lib/cli/test/fixtures/react_native/android/app/build.gradle b/lib/cli/test/fixtures/react_native/android/app/build.gradle
deleted file mode 100644
index 79f42dbb943d..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/build.gradle
+++ /dev/null
@@ -1,146 +0,0 @@
-apply plugin: "com.android.application"
-
-import com.android.build.OutputFile
-
-/**
- * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
- * and bundleReleaseJsAndAssets).
- * These basically call `react-native bundle` with the correct arguments during the Android build
- * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
- * bundle directly from the development server. Below you can see all the possible configurations
- * and their defaults. If you decide to add a configuration block, make sure to add it before the
- * `apply from: "../../node_modules/react-native/react.gradle"` line.
- *
- * project.ext.react = [
- *   // the name of the generated asset file containing your JS bundle
- *   bundleAssetName: "index.android.bundle",
- *
- *   // the entry file for bundle generation
- *   entryFile: "index.android.js",
- *
- *   // whether to bundle JS and assets in debug mode
- *   bundleInDebug: false,
- *
- *   // whether to bundle JS and assets in release mode
- *   bundleInRelease: true,
- *
- *   // whether to bundle JS and assets in another build variant (if configured).
- *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
- *   // The configuration property can be in the following formats
- *   //         'bundleIn${productFlavor}${buildType}'
- *   //         'bundleIn${buildType}'
- *   // bundleInFreeDebug: true,
- *   // bundleInPaidRelease: true,
- *   // bundleInBeta: true,
- *
- *   // whether to disable dev mode in custom build variants (by default only disabled in release)
- *   // for example: to disable dev mode in the staging build type (if configured)
- *   devDisabledInStaging: true,
- *   // The configuration property can be in the following formats
- *   //         'devDisabledIn${productFlavor}${buildType}'
- *   //         'devDisabledIn${buildType}'
- *
- *   // the root of your project, i.e. where "package.json" lives
- *   root: "../../",
- *
- *   // where to put the JS bundle asset in debug mode
- *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
- *
- *   // where to put the JS bundle asset in release mode
- *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in debug mode
- *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in release mode
- *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
- *
- *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
- *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
- *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
- *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
- *   // for example, you might want to remove it from here.
- *   inputExcludes: ["android/**", "ios/**"],
- *
- *   // override which node gets called and with what additional arguments
- *   nodeExecutableAndArgs: ["node"],
- *
- *   // supply additional arguments to the packager
- *   extraPackagerArgs: []
- * ]
- */
-
-apply from: "../../node_modules/react-native/react.gradle"
-
-/**
- * Set this to true to create two separate APKs instead of one:
- *   - An APK that only works on ARM devices
- *   - An APK that only works on x86 devices
- * The advantage is the size of the APK is reduced by about 4MB.
- * Upload all the APKs to the Play Store and people will download
- * the correct one based on the CPU architecture of their device.
- */
-def enableSeparateBuildPerCPUArchitecture = false
-
-/**
- * Run Proguard to shrink the Java bytecode in release builds.
- */
-def enableProguardInReleaseBuilds = false
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-        applicationId "com.react_native"
-        minSdkVersion 16
-        targetSdkVersion 22
-        versionCode 1
-        versionName "1.0"
-        ndk {
-            abiFilters "armeabi-v7a", "x86"
-        }
-    }
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86"
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "x86":2]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
-            }
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:23.0.1"
-    compile "com.facebook.react:react-native:+"  // From node_modules
-}
-
-// Run this once to be able to run the application with BUCK
-// puts all compile dependencies into folder libs for BUCK to use
-task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
-    into 'libs'
-}
diff --git a/lib/cli/test/fixtures/react_native/android/app/proguard-rules.pro b/lib/cli/test/fixtures/react_native/android/app/proguard-rules.pro
deleted file mode 100644
index 6e8516c8d6dd..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/proguard-rules.pro
+++ /dev/null
@@ -1,70 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
-
-# Disabling obfuscation is useful if you collect stack traces from production crashes
-# (unless you are using a system that supports de-obfuscate the stack traces).
--dontobfuscate
-
-# React Native
-
-# Keep our interfaces so they can be used by other ProGuard rules.
-# See http://sourceforge.net/p/proguard/bugs/466/
--keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
--keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
--keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
-
-# Do not strip any method/class that is annotated with @DoNotStrip
--keep @com.facebook.proguard.annotations.DoNotStrip class *
--keep @com.facebook.common.internal.DoNotStrip class *
--keepclassmembers class * {
-    @com.facebook.proguard.annotations.DoNotStrip *;
-    @com.facebook.common.internal.DoNotStrip *;
-}
-
--keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
-  void set*(***);
-  *** get*();
-}
-
--keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
--keep class * extends com.facebook.react.bridge.NativeModule { *; }
--keepclassmembers,includedescriptorclasses class * { native <methods>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
-
--dontwarn com.facebook.react.**
-
-# TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
-# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
--dontwarn android.text.StaticLayout
-
-# okhttp
-
--keepattributes Signature
--keepattributes *Annotation*
--keep class okhttp3.** { *; }
--keep interface okhttp3.** { *; }
--dontwarn okhttp3.**
-
-# okio
-
--keep class sun.misc.Unsafe { *; }
--dontwarn java.nio.file.*
--dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
--dontwarn okio.**
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/AndroidManifest.xml b/lib/cli/test/fixtures/react_native/android/app/src/main/AndroidManifest.xml
deleted file mode 100644
index c5e88afe95f6..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/src/main/AndroidManifest.xml
+++ /dev/null
@@ -1,32 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.react_native"
-    android:versionCode="1"
-    android:versionName="1.0">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <uses-sdk
-        android:minSdkVersion="16"
-        android:targetSdkVersion="22" />
-
-    <application
-      android:name=".MainApplication"
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
-        android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
-</manifest>
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainActivity.java b/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainActivity.java
deleted file mode 100644
index 9587cecbe3ab..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainActivity.java
+++ /dev/null
@@ -1,15 +0,0 @@
-package com.react_native;
-
-import com.facebook.react.ReactActivity;
-
-public class MainActivity extends ReactActivity {
-
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "react_native";
-    }
-}
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainApplication.java b/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainApplication.java
deleted file mode 100644
index 093602e57d26..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/src/main/java/com/react_native/MainApplication.java
+++ /dev/null
@@ -1,40 +0,0 @@
-package com.react_native;
-
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-import com.facebook.soloader.SoLoader;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MainApplication extends Application implements ReactApplication {
-
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public boolean getUseDeveloperSupport() {
-      return BuildConfig.DEBUG;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    SoLoader.init(this, /* native exopackage */ false);
-  }
-}
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
deleted file mode 100644
index 0bb4547a98ee..000000000000
Binary files a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
deleted file mode 100644
index 4581c3cc09c5..000000000000
Binary files a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
deleted file mode 100644
index 75862994964a..000000000000
Binary files a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
deleted file mode 100644
index ba80f5368494..000000000000
Binary files a/lib/cli/test/fixtures/react_native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/strings.xml b/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/strings.xml
deleted file mode 100644
index 4e998e085e75..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/strings.xml
+++ /dev/null
@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">react_native</string>
-</resources>
diff --git a/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/styles.xml b/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/styles.xml
deleted file mode 100644
index 319eb0ca100b..000000000000
--- a/lib/cli/test/fixtures/react_native/android/app/src/main/res/values/styles.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<resources>
-
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <!-- Customize your theme here. -->
-    </style>
-
-</resources>
diff --git a/lib/cli/test/fixtures/react_native/android/build.gradle b/lib/cli/test/fixtures/react_native/android/build.gradle
deleted file mode 100644
index eed9972b5c13..000000000000
--- a/lib/cli/test/fixtures/react_native/android/build.gradle
+++ /dev/null
@@ -1,24 +0,0 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-    repositories {
-        jcenter()
-    }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
-
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
-    }
-}
-
-allprojects {
-    repositories {
-        mavenLocal()
-        jcenter()
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
-        }
-    }
-}
diff --git a/lib/cli/test/fixtures/react_native/android/gradle.properties b/lib/cli/test/fixtures/react_native/android/gradle.properties
deleted file mode 100644
index 1fd964e90b1c..000000000000
--- a/lib/cli/test/fixtures/react_native/android/gradle.properties
+++ /dev/null
@@ -1,20 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
-# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-android.useDeprecatedNdk=true
diff --git a/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.jar b/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.jar
deleted file mode 100644
index b5166dad4d90..000000000000
Binary files a/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.jar and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.properties b/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.properties
deleted file mode 100644
index dbdc05d274d7..000000000000
--- a/lib/cli/test/fixtures/react_native/android/gradle/wrapper/gradle-wrapper.properties
+++ /dev/null
@@ -1,5 +0,0 @@
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
diff --git a/lib/cli/test/fixtures/react_native/android/gradlew b/lib/cli/test/fixtures/react_native/android/gradlew
deleted file mode 100755
index 91a7e269e19d..000000000000
--- a/lib/cli/test/fixtures/react_native/android/gradlew
+++ /dev/null
@@ -1,164 +0,0 @@
-#!/usr/bin/env bash
-
-##############################################################################
-##
-##  Gradle start up script for UN*X
-##
-##############################################################################
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn ( ) {
-    echo "$*"
-}
-
-die ( ) {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-esac
-
-# For Cygwin, ensure paths are in UNIX format before anything is touched.
-if $cygwin ; then
-    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
-fi
-
-# Attempt to set APP_HOME
-# Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
-done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >&-
-APP_HOME="`pwd -P`"
-cd "$SAVED" >&-
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
-    else
-        JAVACMD="$JAVA_HOME/bin/java"
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD="java"
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-fi
-
-# Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin, switch paths to Windows format before running java
-if $cygwin ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=$((i+1))
-    done
-    case $i in
-        (0) set -- ;;
-        (1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
-    esac
-fi
-
-# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
-function splitJvmOpts() {
-    JVM_OPTS=("$@")
-}
-eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
-JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
-
-exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
diff --git a/lib/cli/test/fixtures/react_native/android/gradlew.bat b/lib/cli/test/fixtures/react_native/android/gradlew.bat
deleted file mode 100644
index 8a0b282aa688..000000000000
--- a/lib/cli/test/fixtures/react_native/android/gradlew.bat
+++ /dev/null
@@ -1,90 +0,0 @@
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto init
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:init
-@rem Get command-line arguments, handling Windowz variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-if "%@eval[2+2]" == "4" goto 4NT_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-goto execute
-
-:4NT_args
-@rem Get arguments from the 4NT Shell from JP Software
-set CMD_LINE_ARGS=%$
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
diff --git a/lib/cli/test/fixtures/react_native/android/keystores/BUCK b/lib/cli/test/fixtures/react_native/android/keystores/BUCK
deleted file mode 100644
index 88e4c31b28d4..000000000000
--- a/lib/cli/test/fixtures/react_native/android/keystores/BUCK
+++ /dev/null
@@ -1,8 +0,0 @@
-keystore(
-    name = "debug",
-    properties = "debug.keystore.properties",
-    store = "debug.keystore",
-    visibility = [
-        "PUBLIC",
-    ],
-)
diff --git a/lib/cli/test/fixtures/react_native/android/keystores/debug.keystore.properties b/lib/cli/test/fixtures/react_native/android/keystores/debug.keystore.properties
deleted file mode 100644
index 121bfb49f0df..000000000000
--- a/lib/cli/test/fixtures/react_native/android/keystores/debug.keystore.properties
+++ /dev/null
@@ -1,4 +0,0 @@
-key.store=debug.keystore
-key.alias=androiddebugkey
-key.store.password=android
-key.alias.password=android
diff --git a/lib/cli/test/fixtures/react_native/android/settings.gradle b/lib/cli/test/fixtures/react_native/android/settings.gradle
deleted file mode 100644
index 9a04978fa752..000000000000
--- a/lib/cli/test/fixtures/react_native/android/settings.gradle
+++ /dev/null
@@ -1,3 +0,0 @@
-rootProject.name = 'react_native'
-
-include ':app'
diff --git a/lib/cli/test/fixtures/react_native/app.json b/lib/cli/test/fixtures/react_native/app.json
deleted file mode 100644
index f61f27bc9b6d..000000000000
--- a/lib/cli/test/fixtures/react_native/app.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "react_native",
-  "displayName": "react_native"
-}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_native/index.android.js b/lib/cli/test/fixtures/react_native/index.android.js
deleted file mode 100644
index 676f7c398b1e..000000000000
--- a/lib/cli/test/fixtures/react_native/index.android.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class react_native extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('react_native', () => react_native);
diff --git a/lib/cli/test/fixtures/react_native/index.ios.js b/lib/cli/test/fixtures/react_native/index.ios.js
deleted file mode 100644
index 9ed22824ea69..000000000000
--- a/lib/cli/test/fixtures/react_native/index.ios.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class react_native extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('react_native', () => react_native);
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native-tvOS/Info.plist b/lib/cli/test/fixtures/react_native/ios/react_native-tvOS/Info.plist
deleted file mode 100644
index 2fb6a11c2c33..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native-tvOS/Info.plist
+++ /dev/null
@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-</dict>
-</plist>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native-tvOSTests/Info.plist b/lib/cli/test/fixtures/react_native/ios/react_native-tvOSTests/Info.plist
deleted file mode 100644
index 886825ccc9bf..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native-tvOSTests/Info.plist
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/project.pbxproj b/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/project.pbxproj
deleted file mode 100644
index 8b3c518421ec..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/project.pbxproj
+++ /dev/null
@@ -1,1251 +0,0 @@
-// !$*UTF8*$!
-{
-	archiveVersion = 1;
-	classes = {
-	};
-	objectVersion = 46;
-	objects = {
-
-/* Begin PBXBuildFile section */
-		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
-		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
-		00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };
-		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
-		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
-		00E356F31AD99517003FC87E /* react_nativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* react_nativeTests.m */; };
-		133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };
-		139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; };
-		139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
-		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
-		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
-		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
-		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
-		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
-		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		2D02E4C21E0B4AEC006451C7 /* libRCTAnimation-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */; };
-		2D02E4C31E0B4AEC006451C7 /* libRCTImage-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */; };
-		2D02E4C41E0B4AEC006451C7 /* libRCTLinking-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */; };
-		2D02E4C51E0B4AEC006451C7 /* libRCTNetwork-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */; };
-		2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */; };
-		2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */; };
-		2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */; };
-		2D02E4C91E0B4AEC006451C7 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
-		2DCD954D1E0B4F2C00145EB5 /* react_nativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* react_nativeTests.m */; };
-		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
-		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
-/* End PBXBuildFile section */
-
-/* Begin PBXContainerItemProxy section */
-		00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTActionSheet;
-		};
-		00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTGeolocation;
-		};
-		00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
-			remoteInfo = RCTImage;
-		};
-		00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
-		00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 832C81801AAF6DEF007FA2F7;
-			remoteInfo = RCTVibration;
-		};
-		00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
-			remoteInfo = react_native;
-		};
-		139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTSettings;
-		};
-		139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
-			remoteInfo = RCTWebSocket;
-		};
-		146834031AC3E56700842450 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
-			remoteInfo = React;
-		};
-		2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;
-			remoteInfo = "react_native-tvOS";
-		};
-		3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A283A1D9B042B00D4039D;
-			remoteInfo = "RCTImage-tvOS";
-		};
-		3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28471D9B043800D4039D;
-			remoteInfo = "RCTLinking-tvOS";
-		};
-		3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28541D9B044C00D4039D;
-			remoteInfo = "RCTNetwork-tvOS";
-		};
-		3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28611D9B046600D4039D;
-			remoteInfo = "RCTSettings-tvOS";
-		};
-		3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A287B1D9B048500D4039D;
-			remoteInfo = "RCTText-tvOS";
-		};
-		3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28881D9B049200D4039D;
-			remoteInfo = "RCTWebSocket-tvOS";
-		};
-		3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28131D9B038B00D4039D;
-			remoteInfo = "React-tvOS";
-		};
-		3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3C059A1DE3340900C268FA;
-			remoteInfo = yoga;
-		};
-		3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3C06751DE3340C00C268FA;
-			remoteInfo = "yoga-tvOS";
-		};
-		3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD9251DE5FBEC00167DC4;
-			remoteInfo = cxxreact;
-		};
-		3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD9321DE5FBEE00167DC4;
-			remoteInfo = "cxxreact-tvOS";
-		};
-		3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD90B1DE5FBD600167DC4;
-			remoteInfo = jschelpers;
-		};
-		3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4;
-			remoteInfo = "jschelpers-tvOS";
-		};
-		5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTAnimation;
-		};
-		5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 2D2A28201D9B03D100D4039D;
-			remoteInfo = "RCTAnimation-tvOS";
-		};
-		78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTLinking;
-		};
-		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
-			remoteInfo = RCTText;
-		};
-/* End PBXContainerItemProxy section */
-
-/* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
-		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
-		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
-		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
-		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
-		00E356EE1AD99517003FC87E /* react_nativeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = react_nativeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
-		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		00E356F21AD99517003FC87E /* react_nativeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = react_nativeTests.m; sourceTree = "<group>"; };
-		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
-		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
-		13B07F961A680F5B00A75B9A /* react_native.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = react_native.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = react_native/AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = react_native/AppDelegate.m; sourceTree = "<group>"; };
-		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
-		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = react_native/Images.xcassets; sourceTree = "<group>"; };
-		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = react_native/Info.plist; sourceTree = "<group>"; };
-		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = react_native/main.m; sourceTree = "<group>"; };
-		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
-		2D02E47B1E0B4A5D006451C7 /* react_native-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "react_native-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
-		2D02E4901E0B4A5D006451C7 /* react_native-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "react_native-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
-		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
-		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
-		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
-/* End PBXFileReference section */
-
-/* Begin PBXFrameworksBuildPhase section */
-		00E356EB1AD99517003FC87E /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				146834051AC3E58100842450 /* libReact.a in Frameworks */,
-				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
-				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
-				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
-				00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,
-				133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,
-				00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */,
-				139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */,
-				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
-				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
-				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E4781E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4C91E0B4AEC006451C7 /* libReact.a in Frameworks */,
-				2D02E4C21E0B4AEC006451C7 /* libRCTAnimation-tvOS.a in Frameworks */,
-				2D02E4C31E0B4AEC006451C7 /* libRCTImage-tvOS.a in Frameworks */,
-				2D02E4C41E0B4AEC006451C7 /* libRCTLinking-tvOS.a in Frameworks */,
-				2D02E4C51E0B4AEC006451C7 /* libRCTNetwork-tvOS.a in Frameworks */,
-				2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,
-				2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
-				2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXFrameworksBuildPhase section */
-
-/* Begin PBXGroup section */
-		00C302A81ABCB8CE00DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302B61ABCB90400DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302BC1ABCB91800DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302C01ABCB91800DB3ED1 /* libRCTImage.a */,
-				3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302D41ABCB9D200DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */,
-				3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302E01ABCB9EE00DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00E356EF1AD99517003FC87E /* react_nativeTests */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F21AD99517003FC87E /* react_nativeTests.m */,
-				00E356F01AD99517003FC87E /* Supporting Files */,
-			);
-			path = react_nativeTests;
-			sourceTree = "<group>";
-		};
-		00E356F01AD99517003FC87E /* Supporting Files */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F11AD99517003FC87E /* Info.plist */,
-			);
-			name = "Supporting Files";
-			sourceTree = "<group>";
-		};
-		139105B71AF99BAD00B5F7CC /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				139105C11AF99BAD00B5F7CC /* libRCTSettings.a */,
-				3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		139FDEE71B06529A00C62182 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				139FDEF41B06529B00C62182 /* libRCTWebSocket.a */,
-				3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		13B07FAE1A68108700A75B9A /* react_native */ = {
-			isa = PBXGroup;
-			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
-				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
-				13B07FB01A68108700A75B9A /* AppDelegate.m */,
-				13B07FB51A68108700A75B9A /* Images.xcassets */,
-				13B07FB61A68108700A75B9A /* Info.plist */,
-				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
-				13B07FB71A68108700A75B9A /* main.m */,
-			);
-			name = react_native;
-			sourceTree = "<group>";
-		};
-		146834001AC3E56700842450 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				146834041AC3E56700842450 /* libReact.a */,
-				3DAD3EA31DF850E9000B6D8A /* libReact.a */,
-				3DAD3EA51DF850E9000B6D8A /* libyoga.a */,
-				3DAD3EA71DF850E9000B6D8A /* libyoga.a */,
-				3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */,
-				3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
-				3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
-				3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */,
-				5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		78C398B11ACF4ADC00677621 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				78C398B91ACF4ADC00677621 /* libRCTLinking.a */,
-				3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
-			isa = PBXGroup;
-			children = (
-				5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
-				146833FF1AC3E56700842450 /* React.xcodeproj */,
-				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
-				00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
-				00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
-				78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
-				00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,
-				139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,
-				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
-				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
-				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
-			);
-			name = Libraries;
-			sourceTree = "<group>";
-		};
-		832341B11AAA6A8300B99B32 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				832341B51AAA6A8300B99B32 /* libRCTText.a */,
-				3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		83CBB9F61A601CBA00E9B192 = {
-			isa = PBXGroup;
-			children = (
-				13B07FAE1A68108700A75B9A /* react_native */,
-				832341AE1AAA6A7D00B99B32 /* Libraries */,
-				00E356EF1AD99517003FC87E /* react_nativeTests */,
-				83CBBA001A601CBA00E9B192 /* Products */,
-			);
-			indentWidth = 2;
-			sourceTree = "<group>";
-			tabWidth = 2;
-		};
-		83CBBA001A601CBA00E9B192 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				13B07F961A680F5B00A75B9A /* react_native.app */,
-				00E356EE1AD99517003FC87E /* react_nativeTests.xctest */,
-				2D02E47B1E0B4A5D006451C7 /* react_native-tvOS.app */,
-				2D02E4901E0B4A5D006451C7 /* react_native-tvOSTests.xctest */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-/* End PBXGroup section */
-
-/* Begin PBXNativeTarget section */
-		00E356ED1AD99517003FC87E /* react_nativeTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "react_nativeTests" */;
-			buildPhases = (
-				00E356EA1AD99517003FC87E /* Sources */,
-				00E356EB1AD99517003FC87E /* Frameworks */,
-				00E356EC1AD99517003FC87E /* Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				00E356F51AD99517003FC87E /* PBXTargetDependency */,
-			);
-			name = react_nativeTests;
-			productName = react_nativeTests;
-			productReference = 00E356EE1AD99517003FC87E /* react_nativeTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
-		13B07F861A680F5B00A75B9A /* react_native */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "react_native" */;
-			buildPhases = (
-				13B07F871A680F5B00A75B9A /* Sources */,
-				13B07F8C1A680F5B00A75B9A /* Frameworks */,
-				13B07F8E1A680F5B00A75B9A /* Resources */,
-				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = react_native;
-			productName = "Hello World";
-			productReference = 13B07F961A680F5B00A75B9A /* react_native.app */;
-			productType = "com.apple.product-type.application";
-		};
-		2D02E47A1E0B4A5D006451C7 /* react_native-tvOS */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "react_native-tvOS" */;
-			buildPhases = (
-				2D02E4771E0B4A5D006451C7 /* Sources */,
-				2D02E4781E0B4A5D006451C7 /* Frameworks */,
-				2D02E4791E0B4A5D006451C7 /* Resources */,
-				2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = "react_native-tvOS";
-			productName = "react_native-tvOS";
-			productReference = 2D02E47B1E0B4A5D006451C7 /* react_native-tvOS.app */;
-			productType = "com.apple.product-type.application";
-		};
-		2D02E48F1E0B4A5D006451C7 /* react_native-tvOSTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "react_native-tvOSTests" */;
-			buildPhases = (
-				2D02E48C1E0B4A5D006451C7 /* Sources */,
-				2D02E48D1E0B4A5D006451C7 /* Frameworks */,
-				2D02E48E1E0B4A5D006451C7 /* Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,
-			);
-			name = "react_native-tvOSTests";
-			productName = "react_native-tvOSTests";
-			productReference = 2D02E4901E0B4A5D006451C7 /* react_native-tvOSTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
-/* End PBXNativeTarget section */
-
-/* Begin PBXProject section */
-		83CBB9F71A601CBA00E9B192 /* Project object */ = {
-			isa = PBXProject;
-			attributes = {
-				LastUpgradeCheck = 0610;
-				ORGANIZATIONNAME = Facebook;
-				TargetAttributes = {
-					00E356ED1AD99517003FC87E = {
-						CreatedOnToolsVersion = 6.2;
-						TestTargetID = 13B07F861A680F5B00A75B9A;
-					};
-					2D02E47A1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						ProvisioningStyle = Automatic;
-					};
-					2D02E48F1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						ProvisioningStyle = Automatic;
-						TestTargetID = 2D02E47A1E0B4A5D006451C7;
-					};
-				};
-			};
-			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "react_native" */;
-			compatibilityVersion = "Xcode 3.2";
-			developmentRegion = English;
-			hasScannedForEncodings = 0;
-			knownRegions = (
-				en,
-				Base,
-			);
-			mainGroup = 83CBB9F61A601CBA00E9B192;
-			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
-			projectDirPath = "";
-			projectReferences = (
-				{
-					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
-					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
-				},
-				{
-					ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */;
-					ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
-					ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */;
-					ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
-				},
-				{
-					ProductGroup = 78C398B11ACF4ADC00677621 /* Products */;
-					ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;
-					ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
-				},
-				{
-					ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */;
-					ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
-				},
-				{
-					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
-					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */;
-					ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
-				},
-				{
-					ProductGroup = 139FDEE71B06529A00C62182 /* Products */;
-					ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
-				},
-				{
-					ProductGroup = 146834001AC3E56700842450 /* Products */;
-					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-				},
-			);
-			projectRoot = "";
-			targets = (
-				13B07F861A680F5B00A75B9A /* react_native */,
-				00E356ED1AD99517003FC87E /* react_nativeTests */,
-				2D02E47A1E0B4A5D006451C7 /* react_native-tvOS */,
-				2D02E48F1E0B4A5D006451C7 /* react_native-tvOSTests */,
-			);
-		};
-/* End PBXProject section */
-
-/* Begin PBXReferenceProxy section */
-		00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTActionSheet.a;
-			remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTGeolocation.a;
-			remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTImage.a;
-			remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTVibration.a;
-			remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTSettings.a;
-			remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTWebSocket.a;
-			remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		146834041AC3E56700842450 /* libReact.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libReact.a;
-			remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTImage-tvOS.a";
-			remoteRef = 3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTLinking-tvOS.a";
-			remoteRef = 3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTNetwork-tvOS.a";
-			remoteRef = 3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTSettings-tvOS.a";
-			remoteRef = 3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTText-tvOS.a";
-			remoteRef = 3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTWebSocket-tvOS.a";
-			remoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EA31DF850E9000B6D8A /* libReact.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libReact.a;
-			remoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EA51DF850E9000B6D8A /* libyoga.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libyoga.a;
-			remoteRef = 3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EA71DF850E9000B6D8A /* libyoga.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libyoga.a;
-			remoteRef = 3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libcxxreact.a;
-			remoteRef = 3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libcxxreact.a;
-			remoteRef = 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjschelpers.a;
-			remoteRef = 3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjschelpers.a;
-			remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTAnimation.a;
-			remoteRef = 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRCTAnimation-tvOS.a";
-			remoteRef = 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTLinking.a;
-			remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTText.a;
-			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-/* End PBXReferenceProxy section */
-
-/* Begin PBXResourcesBuildPhase section */
-		00E356EC1AD99517003FC87E /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F8E1A680F5B00A75B9A /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E4791E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48E1E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXResourcesBuildPhase section */
-
-/* Begin PBXShellScriptBuildPhase section */
-		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Bundle React Native code and images";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
-		};
-		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Bundle React Native Code And Images";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
-		};
-/* End PBXShellScriptBuildPhase section */
-
-/* Begin PBXSourcesBuildPhase section */
-		00E356EA1AD99517003FC87E /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				00E356F31AD99517003FC87E /* react_nativeTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F871A680F5B00A75B9A /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
-				13B07FC11A68108700A75B9A /* main.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E4771E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
-				2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48C1E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2DCD954D1E0B4F2C00145EB5 /* react_nativeTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXSourcesBuildPhase section */
-
-/* Begin PBXTargetDependency section */
-		00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 13B07F861A680F5B00A75B9A /* react_native */;
-			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
-		};
-		2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 2D02E47A1E0B4A5D006451C7 /* react_native-tvOS */;
-			targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
-		};
-/* End PBXTargetDependency section */
-
-/* Begin PBXVariantGroup section */
-		13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
-			isa = PBXVariantGroup;
-			children = (
-				13B07FB21A68108700A75B9A /* Base */,
-			);
-			name = LaunchScreen.xib;
-			path = react_native;
-			sourceTree = "<group>";
-		};
-/* End PBXVariantGroup section */
-
-/* Begin XCBuildConfiguration section */
-		00E356F61AD99517003FC87E /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				INFOPLIST_FILE = react_nativeTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native.app/react_native";
-			};
-			name = Debug;
-		};
-		00E356F71AD99517003FC87E /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				COPY_PHASE_STRIP = NO;
-				INFOPLIST_FILE = react_nativeTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native.app/react_native";
-			};
-			name = Release;
-		};
-		13B07F941A680F5B00A75B9A /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CURRENT_PROJECT_VERSION = 1;
-				DEAD_CODE_STRIPPING = NO;
-				INFOPLIST_FILE = react_native/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_NAME = react_native;
-				VERSIONING_SYSTEM = "apple-generic";
-			};
-			name = Debug;
-		};
-		13B07F951A680F5B00A75B9A /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CURRENT_PROJECT_VERSION = 1;
-				INFOPLIST_FILE = react_native/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_NAME = react_native;
-				VERSIONING_SYSTEM = "apple-generic";
-			};
-			name = Release;
-		};
-		2D02E4971E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "react_native-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.react_native-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Debug;
-		};
-		2D02E4981E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "react_native-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.react_native-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Release;
-		};
-		2D02E4991E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "react_native-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.react_native-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native-tvOS.app/react_native-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Debug;
-		};
-		2D02E49A1E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "react_native-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.react_native-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native-tvOS.app/react_native-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Release;
-		};
-		83CBBA201A601CBA00E9B192 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				COPY_PHASE_STRIP = NO;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu99;
-				GCC_DYNAMIC_NO_PIC = NO;
-				GCC_OPTIMIZATION_LEVEL = 0;
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
-				MTL_ENABLE_DEBUG_INFO = YES;
-				ONLY_ACTIVE_ARCH = YES;
-				SDKROOT = iphoneos;
-			};
-			name = Debug;
-		};
-		83CBBA211A601CBA00E9B192 /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				COPY_PHASE_STRIP = YES;
-				ENABLE_NS_ASSERTIONS = NO;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu99;
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
-				MTL_ENABLE_DEBUG_INFO = NO;
-				SDKROOT = iphoneos;
-				VALIDATE_PRODUCT = YES;
-			};
-			name = Release;
-		};
-/* End XCBuildConfiguration section */
-
-/* Begin XCConfigurationList section */
-		00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "react_nativeTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				00E356F61AD99517003FC87E /* Debug */,
-				00E356F71AD99517003FC87E /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "react_native" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				13B07F941A680F5B00A75B9A /* Debug */,
-				13B07F951A680F5B00A75B9A /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "react_native-tvOS" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4971E0B4A5E006451C7 /* Debug */,
-				2D02E4981E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "react_native-tvOSTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4991E0B4A5E006451C7 /* Debug */,
-				2D02E49A1E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "react_native" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				83CBBA201A601CBA00E9B192 /* Debug */,
-				83CBBA211A601CBA00E9B192 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-/* End XCConfigurationList section */
-	};
-	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
-}
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native-tvOS.xcscheme b/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native-tvOS.xcscheme
deleted file mode 100644
index 396dd475c7c4..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native-tvOS.xcscheme
+++ /dev/null
@@ -1,129 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Scheme
-   LastUpgradeVersion = "0820"
-   version = "1.3">
-   <BuildAction
-      parallelizeBuildables = "NO"
-      buildImplicitDependencies = "YES">
-      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D2A28121D9B038B00D4039D"
-               BuildableName = "libReact.a"
-               BlueprintName = "React-tvOS"
-               ReferencedContainer = "container:../node_modules/react-native/React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-               BuildableName = "react_native-tvOS.app"
-               BlueprintName = "react_native-tvOS"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "NO"
-            buildForArchiving = "NO"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
-               BuildableName = "react_native-tvOSTests.xctest"
-               BlueprintName = "react_native-tvOSTests"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-      </BuildActionEntries>
-   </BuildAction>
-   <TestAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-         <TestableReference
-            skipped = "NO">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
-               BuildableName = "react_native-tvOSTests.xctest"
-               BlueprintName = "react_native-tvOSTests"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </TestableReference>
-      </Testables>
-      <MacroExpansion>
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-            BuildableName = "react_native-tvOS.app"
-            BlueprintName = "react_native-tvOS"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
-   </TestAction>
-   <LaunchAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      launchStyle = "0"
-      useCustomWorkingDirectory = "NO"
-      ignoresPersistentStateOnLaunch = "NO"
-      debugDocumentVersioning = "YES"
-      debugServiceExtension = "internal"
-      allowLocationSimulation = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-            BuildableName = "react_native-tvOS.app"
-            BlueprintName = "react_native-tvOS"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
-   </LaunchAction>
-   <ProfileAction
-      buildConfiguration = "Release"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      savedToolIdentifier = ""
-      useCustomWorkingDirectory = "NO"
-      debugDocumentVersioning = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-            BuildableName = "react_native-tvOS.app"
-            BlueprintName = "react_native-tvOS"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </ProfileAction>
-   <AnalyzeAction
-      buildConfiguration = "Debug">
-   </AnalyzeAction>
-   <ArchiveAction
-      buildConfiguration = "Release"
-      revealArchiveInOrganizer = "YES">
-   </ArchiveAction>
-</Scheme>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native.xcscheme b/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native.xcscheme
deleted file mode 100644
index fc2b62f48be5..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native.xcodeproj/xcshareddata/xcschemes/react_native.xcscheme
+++ /dev/null
@@ -1,129 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Scheme
-   LastUpgradeVersion = "0620"
-   version = "1.3">
-   <BuildAction
-      parallelizeBuildables = "NO"
-      buildImplicitDependencies = "YES">
-      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
-               BuildableName = "libReact.a"
-               BlueprintName = "React"
-               ReferencedContainer = "container:../node_modules/react-native/React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-               BuildableName = "react_native.app"
-               BlueprintName = "react_native"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "NO"
-            buildForArchiving = "NO"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
-               BuildableName = "react_nativeTests.xctest"
-               BlueprintName = "react_nativeTests"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-      </BuildActionEntries>
-   </BuildAction>
-   <TestAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-         <TestableReference
-            skipped = "NO">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
-               BuildableName = "react_nativeTests.xctest"
-               BlueprintName = "react_nativeTests"
-               ReferencedContainer = "container:react_native.xcodeproj">
-            </BuildableReference>
-         </TestableReference>
-      </Testables>
-      <MacroExpansion>
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "react_native.app"
-            BlueprintName = "react_native"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
-   </TestAction>
-   <LaunchAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      launchStyle = "0"
-      useCustomWorkingDirectory = "NO"
-      ignoresPersistentStateOnLaunch = "NO"
-      debugDocumentVersioning = "YES"
-      debugServiceExtension = "internal"
-      allowLocationSimulation = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "react_native.app"
-            BlueprintName = "react_native"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
-   </LaunchAction>
-   <ProfileAction
-      buildConfiguration = "Release"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      savedToolIdentifier = ""
-      useCustomWorkingDirectory = "NO"
-      debugDocumentVersioning = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "react_native.app"
-            BlueprintName = "react_native"
-            ReferencedContainer = "container:react_native.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </ProfileAction>
-   <AnalyzeAction
-      buildConfiguration = "Debug">
-   </AnalyzeAction>
-   <ArchiveAction
-      buildConfiguration = "Release"
-      revealArchiveInOrganizer = "YES">
-   </ArchiveAction>
-</Scheme>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.h b/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.h
deleted file mode 100644
index a9654d5e01b1..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.h
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-#import <UIKit/UIKit.h>
-
-@interface AppDelegate : UIResponder <UIApplicationDelegate>
-
-@property (nonatomic, strong) UIWindow *window;
-
-@end
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.m b/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.m
deleted file mode 100644
index c50c0f2fbd5d..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/AppDelegate.m
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-#import "AppDelegate.h"
-
-#import <React/RCTBundleURLProvider.h>
-#import <React/RCTRootView.h>
-
-@implementation AppDelegate
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-  NSURL *jsCodeLocation;
-
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"react_native"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
-
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
-  return YES;
-}
-
-@end
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/Base.lproj/LaunchScreen.xib b/lib/cli/test/fixtures/react_native/ios/react_native/Base.lproj/LaunchScreen.xib
deleted file mode 100644
index c6f2b0ae32d0..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/Base.lproj/LaunchScreen.xib
+++ /dev/null
@@ -1,42 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
-    <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
-        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
-    </dependencies>
-    <objects>
-        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
-        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
-        <view contentMode="scaleToFill" id="iN0-l3-epB">
-            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
-            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-            <subviews>
-                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
-                    <rect key="frame" x="20" y="439" width="441" height="21"/>
-                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                    <nil key="highlightedColor"/>
-                </label>
-                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="react_native" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
-                    <rect key="frame" x="20" y="140" width="441" height="43"/>
-                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                    <nil key="highlightedColor"/>
-                </label>
-            </subviews>
-            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
-            <constraints>
-                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
-                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
-                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
-                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
-                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
-                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
-            </constraints>
-            <nil key="simulatedStatusBarMetrics"/>
-            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
-            <point key="canvasLocation" x="548" y="455"/>
-        </view>
-    </objects>
-</document>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/Images.xcassets/AppIcon.appiconset/Contents.json b/lib/cli/test/fixtures/react_native/ios/react_native/Images.xcassets/AppIcon.appiconset/Contents.json
deleted file mode 100644
index 118c98f7461b..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/Images.xcassets/AppIcon.appiconset/Contents.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/Info.plist b/lib/cli/test/fixtures/react_native/ios/react_native/Info.plist
deleted file mode 100644
index ccb175f0ab58..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/Info.plist
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleDisplayName</key>
-	<string>react_native</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-</dict>
-</plist>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_native/main.m b/lib/cli/test/fixtures/react_native/ios/react_native/main.m
deleted file mode 100644
index 3d767fcbb9fc..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_native/main.m
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-#import <UIKit/UIKit.h>
-
-#import "AppDelegate.h"
-
-int main(int argc, char * argv[]) {
-  @autoreleasepool {
-    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
-  }
-}
diff --git a/lib/cli/test/fixtures/react_native/ios/react_nativeTests/Info.plist b/lib/cli/test/fixtures/react_native/ios/react_nativeTests/Info.plist
deleted file mode 100644
index 886825ccc9bf..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_nativeTests/Info.plist
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>
diff --git a/lib/cli/test/fixtures/react_native/ios/react_nativeTests/react_nativeTests.m b/lib/cli/test/fixtures/react_native/ios/react_nativeTests/react_nativeTests.m
deleted file mode 100644
index c8f1114e2ea7..000000000000
--- a/lib/cli/test/fixtures/react_native/ios/react_nativeTests/react_nativeTests.m
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-#import <UIKit/UIKit.h>
-#import <XCTest/XCTest.h>
-
-#import <React/RCTLog.h>
-#import <React/RCTRootView.h>
-
-#define TIMEOUT_SECONDS 600
-#define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
-
-@interface react_nativeTests : XCTestCase
-
-@end
-
-@implementation react_nativeTests
-
-- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
-{
-  if (test(view)) {
-    return YES;
-  }
-  for (UIView *subview in [view subviews]) {
-    if ([self findSubviewInView:subview matching:test]) {
-      return YES;
-    }
-  }
-  return NO;
-}
-
-- (void)testRendersWelcomeScreen
-{
-  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
-  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
-  BOOL foundElement = NO;
-
-  __block NSString *redboxError = nil;
-  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
-    if (level >= RCTLogLevelError) {
-      redboxError = message;
-    }
-  });
-
-  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
-    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-
-    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
-      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
-        return YES;
-      }
-      return NO;
-    }];
-  }
-
-  RCTSetLogFunction(RCTDefaultLogFunction);
-
-  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
-  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
-}
-
-
-@end
diff --git a/lib/cli/test/fixtures/react_native/package.json b/lib/cli/test/fixtures/react_native/package.json
deleted file mode 100644
index 1f02e5aa16b1..000000000000
--- a/lib/cli/test/fixtures/react_native/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-	"name": "react-native-fixture",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"start": "node node_modules/react-native/local-cli/cli.js start",
-		"test": "jest"
-	},
-	"jest": {
-		"preset": "react-native"
-	},
-	"dependencies": {
-		"react": "16.0.0-alpha.12",
-		"react-native": "0.47.2"
-	},
-	"devDependencies": {
-		"babel-jest": "24.7.1",
-		"babel-preset-react-native": "3.0.1",
-		"jest": "24.7.1",
-		"react-test-renderer": "16.0.0-alpha.12"
-	}
-}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_native_scripts/App.js b/lib/cli/test/fixtures/react_native_scripts/App.js
deleted file mode 100644
index b06aee1d19e9..000000000000
--- a/lib/cli/test/fixtures/react_native_scripts/App.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default class App extends React.Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text>Open up App.js to start working on your app!</Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
diff --git a/lib/cli/test/fixtures/react_native_scripts/app.json b/lib/cli/test/fixtures/react_native_scripts/app.json
deleted file mode 100644
index 3011acc9f3ec..000000000000
--- a/lib/cli/test/fixtures/react_native_scripts/app.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "expo": {
-    "name": "storybook example",
-    "slug": "my-app",
-    "privacy": "public",
-    "sdkVersion": "32.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    }
-  }
-}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_native_scripts/assets/icon.png b/lib/cli/test/fixtures/react_native_scripts/assets/icon.png
deleted file mode 100644
index 7c5bceacbf11..000000000000
Binary files a/lib/cli/test/fixtures/react_native_scripts/assets/icon.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native_scripts/assets/splash.png b/lib/cli/test/fixtures/react_native_scripts/assets/splash.png
deleted file mode 100644
index 4f9ade699a4d..000000000000
Binary files a/lib/cli/test/fixtures/react_native_scripts/assets/splash.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_native_scripts/babel.config.js b/lib/cli/test/fixtures/react_native_scripts/babel.config.js
deleted file mode 100644
index 2900afe9d85a..000000000000
--- a/lib/cli/test/fixtures/react_native_scripts/babel.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};
diff --git a/lib/cli/test/fixtures/react_native_scripts/package.json b/lib/cli/test/fixtures/react_native_scripts/package.json
deleted file mode 100644
index b59679dbe7f9..000000000000
--- a/lib/cli/test/fixtures/react_native_scripts/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "expo-fixture",
-  "version": "0.0.1",
-  "private": true,
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "android": "expo start --android",
-    "eject": "expo eject",
-    "ios": "expo start --ios",
-    "start": "expo start"
-  },
-  "dependencies": {
-    "expo": "^32.0.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
-  },
-  "devDependencies": {
-    "babel-preset-expo": "^5.0.0"
-  }
-}
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_scripts/README.md b/lib/cli/test/fixtures/react_scripts/README.md
index 933fd2faea91..17abff875706 100644
--- a/lib/cli/test/fixtures/react_scripts/README.md
+++ b/lib/cli/test/fixtures/react_scripts/README.md
@@ -333,10 +333,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example:
     // ...
   },
 + "lint-staged": {
-+   "src/**/*.{js,jsx,json,css}": [
-+     "prettier --single-quote --write",
-+     "git add"
-+   ]
++   "src/**/*.{js,jsx,json,css}": [ "prettier --single-quote --write" ]
 + },
   "scripts": {
 ```
diff --git a/lib/cli/test/fixtures/react_scripts_ts/package.json b/lib/cli/test/fixtures/react_scripts_ts/package.json
index d02214350660..1e4cc408925f 100644
--- a/lib/cli/test/fixtures/react_scripts_ts/package.json
+++ b/lib/cli/test/fixtures/react_scripts_ts/package.json
@@ -24,13 +24,13 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@types/jest": "24.0.19",
-    "@types/node": "12.11.1",
-    "@types/react": "16.9.9",
-    "@types/react-dom": "16.9.2",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0",
-    "typescript": "3.6.4"
+    "@types/jest": "^24.9.1",
+    "@types/node": "^12.11.1",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "typescript": "^3.8.3"
   }
 }
diff --git a/lib/cli/test/fixtures/react_static/.babelrc b/lib/cli/test/fixtures/react_static/.babelrc
deleted file mode 100644
index 167eaf5c61e9..000000000000
--- a/lib/cli/test/fixtures/react_static/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "react-static/.babelrc"
-}
diff --git a/lib/cli/test/fixtures/react_static/.gitignore b/lib/cli/test/fixtures/react_static/.gitignore
deleted file mode 100644
index dc353a145faf..000000000000
--- a/lib/cli/test/fixtures/react_static/.gitignore
+++ /dev/null
@@ -1,20 +0,0 @@
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/dist
-/tmp
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/lib/cli/test/fixtures/react_static/README.md b/lib/cli/test/fixtures/react_static/README.md
deleted file mode 100644
index a0005ec20d4f..000000000000
--- a/lib/cli/test/fixtures/react_static/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# React-Static - Blank Example
-
-This example is a blank version of react-static. It includes::
-- Babel
-- CSS imports
-- Image imports
-- File imports
-
-To get started, run `react-static create` and use the `blank` template.
diff --git a/lib/cli/test/fixtures/react_static/package.json b/lib/cli/test/fixtures/react_static/package.json
deleted file mode 100644
index 5d456f60fb20..000000000000
--- a/lib/cli/test/fixtures/react_static/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "react-static-fixture",
-  "version": "1.0.1",
-  "license": "MIT",
-  "main": "index.js",
-  "scripts": {
-    "build": "react-static build",
-    "serve": "serve dist -p 3000",
-    "stage": "react-static build --staging",
-    "start": "react-static start"
-  },
-  "dependencies": {
-    "axios": "^0.18.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-router": "^4.3.1",
-    "react-static": "^5"
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.3",
-    "eslint-config-react-tools": "1.x.x",
-    "serve": "^6.1.0"
-  }
-}
diff --git a/lib/cli/test/fixtures/react_static/public/robots.txt b/lib/cli/test/fixtures/react_static/public/robots.txt
deleted file mode 100644
index 7d329b1db3f0..000000000000
--- a/lib/cli/test/fixtures/react_static/public/robots.txt
+++ /dev/null
@@ -1 +0,0 @@
-User-agent: *
diff --git a/lib/cli/test/fixtures/react_static/src/App.js b/lib/cli/test/fixtures/react_static/src/App.js
deleted file mode 100644
index 5675adb22297..000000000000
--- a/lib/cli/test/fixtures/react_static/src/App.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { Component } from 'react'
-import { hot } from 'react-hot-loader'
-//
-import './app.css'
-import logo from './logo.png'
-
-class App extends Component {
-  render () {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React-Static</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    )
-  }
-}
-
-export default hot(module)(App)
diff --git a/lib/cli/test/fixtures/react_static/src/app.css b/lib/cli/test/fixtures/react_static/src/app.css
deleted file mode 100644
index cc6998a42b2f..000000000000
--- a/lib/cli/test/fixtures/react_static/src/app.css
+++ /dev/null
@@ -1,41 +0,0 @@
-body {
-  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
-    'Lucida Grande', sans-serif;
-  font-weight: 300;
-  font-size: 16px;
-  margin: 0;
-  padding: 0;
-}
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 120px;
-}
-
-.App-header {
-  background-color: #ddd;
-  height: 170px;
-  padding: 20px;
-  color: black;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/lib/cli/test/fixtures/react_static/src/index.js b/lib/cli/test/fixtures/react_static/src/index.js
deleted file mode 100644
index c43c07252a20..000000000000
--- a/lib/cli/test/fixtures/react_static/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-// Your top level component
-import App from './App'
-
-// Export your top level component as JSX (for static rendering)
-export default App
-
-// Render your app
-if (typeof document !== 'undefined') {
-  const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate || ReactDOM.render
-  const render = Comp => {
-    renderMethod(<Comp />, document.getElementById('root'))
-  }
-
-  // Render!
-  render(App)
-}
diff --git a/lib/cli/test/fixtures/react_static/src/logo.png b/lib/cli/test/fixtures/react_static/src/logo.png
deleted file mode 100644
index 3d30eaad75d6..000000000000
Binary files a/lib/cli/test/fixtures/react_static/src/logo.png and /dev/null differ
diff --git a/lib/cli/test/fixtures/react_static/static.config.js b/lib/cli/test/fixtures/react_static/static.config.js
deleted file mode 100644
index 8c2623407af2..000000000000
--- a/lib/cli/test/fixtures/react_static/static.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Though this file is optional, there are SO MANY COOL THINGS you can do here.
-// Read the docs at https://github.com/nozzle/react-static/blob/master/README.md to learn more!
-export default {}
diff --git a/lib/cli/test/fixtures/riot/package.json b/lib/cli/test/fixtures/riot/package.json
index e7bb5dfff137..3335af03101f 100644
--- a/lib/cli/test/fixtures/riot/package.json
+++ b/lib/cli/test/fixtures/riot/package.json
@@ -19,6 +19,7 @@
     "raw-loader": "^1.0.0",
     "riot-compiler": "^3.6.0",
     "riot-hot-reload": "^1.0.0",
+    "riot-tmpl": "^3.0.8",
     "style-loader": "^0.23.1",
     "webpack": "^4.33.0",
     "webpack-bundle-analyzer": "^3.3.2",
diff --git a/lib/cli/test/fixtures/sfc_vue/.babelrc b/lib/cli/test/fixtures/sfc_vue/.babelrc
index 32df804ee902..ba3f407ed478 100644
--- a/lib/cli/test/fixtures/sfc_vue/.babelrc
+++ b/lib/cli/test/fixtures/sfc_vue/.babelrc
@@ -5,7 +5,7 @@
       "targets": {
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
       }
-    }],
+    }]
   ],
   "plugins": ["@babel/plugin-transform-runtime"],
   "env": {
diff --git a/lib/cli/test/fixtures/sfc_vue/package.json b/lib/cli/test/fixtures/sfc_vue/package.json
index 884f8a277ab8..ed04921b8506 100644
--- a/lib/cli/test/fixtures/sfc_vue/package.json
+++ b/lib/cli/test/fixtures/sfc_vue/package.json
@@ -42,7 +42,7 @@
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^3.2.0",
     "rimraf": "^2.6.3",
-    "semver": "^6.0.0",
+    "@storybook/semver": "^7.3.2",
     "shelljs": "^0.8.3",
     "url-loader": "^1.1.2",
     "vue-loader": "15.7.0",
diff --git a/lib/cli/test/fixtures/update_package_organisations/.storybook/config.js b/lib/cli/test/fixtures/update_package_organisations/.storybook/config.js
deleted file mode 100644
index 8e314a81f7bb..000000000000
--- a/lib/cli/test/fixtures/update_package_organisations/.storybook/config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { configure } from '@kadira/storybook';
-
-function loadStories() {
-  require('../stories');
-}
-
-configure(loadStories, module);
diff --git a/lib/cli/test/fixtures/update_package_organisations/.storybook/main.js b/lib/cli/test/fixtures/update_package_organisations/.storybook/main.js
new file mode 100644
index 000000000000..94e6dabfea00
--- /dev/null
+++ b/lib/cli/test/fixtures/update_package_organisations/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.js'],
+}
diff --git a/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js b/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
index 0c6ac3e87e89..f5be220e77e3 100644
--- a/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
+++ b/lib/cli/test/fixtures/update_package_organisations/stories/Welcome.js
@@ -22,8 +22,8 @@ const styles = {
   code: {
     fontSize: 15,
     fontWeight: 600,
-    padding: "2px 5px",
-    border: "1px solid #eae9e9",
+    padding: '2px 5px',
+    border: '1px solid #eae9e9',
     borderRadius: 4,
     backgroundColor: '#f3f2f2',
     color: '#3a3a3a',
@@ -33,38 +33,46 @@ const styles = {
 export default class Welcome extends React.Component {
   showApp(e) {
     e.preventDefault();
-    if(this.props.showApp) this.props.showApp();
+    if (this.props.showApp) this.props.showApp();
   }
 
   render() {
     return (
       <div style={styles.main}>
-        <h1>Welcome to STORYBOOK</h1>
+        <h1>Welcome to storybook</h1>
+        <p>This is a UI component dev environment for your app.</p>
         <p>
-          This is a UI component dev environment for your app.
-        </p>
-        <p>
-          We've added some basic stories inside the <code style={styles.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/>
+          We've added some basic stories inside the <code style={styles.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 style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+          See these sample{' '}
+          <a style={styles.link} href="#" onClick={this.showApp.bind(this)}>
+            stories
+          </a>{' '}
+          for a component called <code style={styles.code}>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={styles.code}>Button</code> component
-          located at <code style={styles.code}>src/stories/Button.js</code>.)
+          (Try editing the <code style={styles.code}>Button</code> component located at{' '}
+          <code style={styles.code}>src/stories/Button.js</code>.)
         </p>
         <p>
           This is just one thing you can do with Storybook.
-          <br/>
-          Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
+          <br />
+          Have a look at the{' '}
+          <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">
+            React Storybook
+          </a>{' '}
+          repo for more information.
         </p>
       </div>
     );
diff --git a/lib/cli/test/run_tests.sh b/lib/cli/test/run_tests.sh
index 9dd48d567087..6c327dbb6988 100755
--- a/lib/cli/test/run_tests.sh
+++ b/lib/cli/test/run_tests.sh
@@ -43,21 +43,13 @@ do
     yarn sb init --skip-install --yes
     ;;
   mdx)
-    if [[ $dir =~ (react_native*|angular-cli-v6|ember-cli|marko|meteor|mithril|polymer|riot|react_babel_6) ]]
+    if [[ $dir =~ (react_native*|angular-cli-v6|ember-cli|marko|meteor|mithril|riot) ]]
     then
       yarn sb init --skip-install --yes
     else
       yarn sb init --skip-install --yes --story-format mdx
     fi
     ;;
-  csf-ts)
-    if [[ $dir =~ (react_scripts_ts) ]]
-    then
-      yarn sb init --skip-install --yes --story-format csf-ts
-    else
-      yarn sb init --skip-install --yes
-    fi
-    ;;
   esac
   cd ..
 done
diff --git a/lib/cli/test/run_tests_yarn_2.sh b/lib/cli/test/run_tests_yarn_2.sh
new file mode 100755
index 000000000000..aee0740583f9
--- /dev/null
+++ b/lib/cli/test/run_tests_yarn_2.sh
@@ -0,0 +1,93 @@
+#!/bin/bash
+
+# exit on error
+set -e
+
+declare test_root=$PWD
+
+test_folder='run-yarn-2'
+fixtures_dir='fixtures'
+story_format='csf'
+
+# remove run directory before exit to prevent yarn.lock spoiling
+function cleanup {
+  rm -rfd ${test_root}/$test_folder
+}
+trap cleanup EXIT
+
+# parse command-line options
+# '-s' sets story format to use
+while getopts ":s:" opt; do
+  case $opt in
+    s)
+      story_format=$OPTARG
+      ;;
+  esac
+done
+
+rm -rfd $test_folder
+mkdir $test_folder
+# copy some files from fixtures directory, the goal is to test that CLI is running well with Yarn 2 not to have all framework covered (especially because some are not compatible with Yarn 2 yet)
+cp -r $fixtures_dir/react $test_folder/react
+cp -r $fixtures_dir/react_babelrc_js $test_folder/react_babelrc_js
+cp -r $fixtures_dir/webpack_react $test_folder/webpack_react
+cd $test_folder
+
+for dir in *
+do
+  cd $dir
+  echo "Set Yarn 2 in $dir"
+  # First command is for Yarn <=1.21, second for Yarn 1.22
+  yarn policies set-version berry || yarn set version berry
+
+  # Do some magic to make Yarn 2 work inside a Yarn 1 monorepo
+  unset YARN_WRAP_OUTPUT
+  touch yarn.lock
+
+  # Transform `package.json`:
+  #   - add `@storybook/cli` dep to be able to do `yarn sb init` with Yarn 2
+  #   - fill `resolutions` attribute with link to local `@storybook` packages because we can not use Yarn v1 workspace
+  #   directly, this can be rework when the whole monorepo will be migrated to Yarn 2
+  ../../berryfy_package_json.js $PWD/package.json
+
+  echo "Installing dependencies in $dir"
+  # Need to do `yarn install` first to have `@storybook/cli` correctly linked
+  yarn install
+
+  echo "Running storybook-cli in $dir"
+  case $story_format in
+  csf)
+    yarn sb init --skip-install --yes
+    ;;
+  mdx)
+    if [[ $dir =~ (react_native*|angular-cli-v6|ember-cli|marko|meteor|mithril|riot) ]]
+    then
+      yarn sb init --skip-install --yes
+    else
+      yarn sb init --skip-install --yes --story-format mdx
+    fi
+    ;;
+  csf-ts)
+    if [[ $dir =~ (react_scripts_ts) ]]
+    then
+      yarn sb init --skip-install --yes --story-format csf-ts
+    else
+      yarn sb init --skip-install --yes
+    fi
+    ;;
+  esac
+
+  # Need to do a new `yarn install` to have all `@storybook/xxx` packages correctly linked to local ones
+  yarn install
+
+  echo "Running smoke test in $dir"
+  failed=0
+  yarn storybook --smoke-test --quiet || failed=1
+
+  if [ $failed -eq 1 ]
+  then
+    exit 1
+  fi
+
+  cd ..
+done
diff --git a/lib/cli/tsconfig.json b/lib/cli/tsconfig.json
new file mode 100644
index 000000000000..c4e40706894b
--- /dev/null
+++ b/lib/cli/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node", "jest"],
+    "strict": false,
+    "strictNullChecks": false,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/template*"]
+}
diff --git a/lib/cli/versions.json b/lib/cli/versions.json
new file mode 100644
index 000000000000..7098b041d36b
--- /dev/null
+++ b/lib/cli/versions.json
@@ -0,0 +1,17 @@
+{
+  "@storybook/angular": "6.0.0-beta.21",
+  "@storybook/aurelia": "6.0.0-beta.21",
+  "@storybook/ember": "6.0.0-beta.21",
+  "@storybook/html": "6.0.0-beta.21",
+  "@storybook/marionette": "6.0.0-beta.21",
+  "@storybook/marko": "6.0.0-beta.21",
+  "@storybook/mithril": "6.0.0-beta.21",
+  "@storybook/preact": "6.0.0-beta.21",
+  "@storybook/rax": "6.0.0-beta.21",
+  "@storybook/react": "6.0.0-beta.21",
+  "@storybook/riot": "6.0.0-beta.21",
+  "@storybook/server": "6.0.0-beta.21",
+  "@storybook/svelte": "6.0.0-beta.21",
+  "@storybook/vue": "6.0.0-beta.21",
+  "@storybook/web-components": "6.0.0-beta.21"
+}
\ No newline at end of file
diff --git a/lib/client-api/README.md b/lib/client-api/README.md
new file mode 100644
index 000000000000..a23c8f23f560
--- /dev/null
+++ b/lib/client-api/README.md
@@ -0,0 +1,120 @@
+# `@storybook/client-api` -- APIs that control the rendering of stories in the preview iframe.
+
+## Story store
+
+The story store contains the list of stories loaded in a Storybook.
+
+Each story is loaded via the `.add()` API and contains the follow attributes, which are available on the `context` (which is passed to the story's render function and decorators):
+
+- `kind` - the grouping of the story, typically corresponds to a single component. Also known as the `title` in CSF.
+- `name` - the name of the specific story.
+- `id` - an unique, URL sanitized identifier for the story, created from the `kind` and `name`.
+- `parameters` - static data about the story, see below.
+- `args` - dynamic inputs to the story, see below.
+- `hooks` - listeners that will rerun when the story changes or is unmounted, see `@storybook/addons`.
+
+## Parameters
+
+The story parameters is a static, serializable object of data that provides details about the story. Those details can be used by addons or Storybook itself to render UI or provide defaults about the story rendering.
+
+Parameters _cannot change_ and are syncronized to the manager once when the story is loaded (note over the lifetime of a development Storybook a story can be loaded several times due to hot module reload, so the parameters technically can change for that reason).
+
+Usually addons will read from a single key of `parameters` namespaced by the name of that addon. For instance the configuration of the `backgrounds` addon is driven by the `parameters.backgrounds` namespace.
+
+Parameters are inheritable -- you can set global parameters via `addParameters` (exported by `client_api` and each framework), at the component level by the `parameters` key of the component (default) export in CSF (or in `.storiesOf`), and on a single story via the `parameters` key on the story data, or the third argument to `.add()`.
+
+Some notable parameters:
+
+- `parameters.fileName` - the file that the story was defined in, when available
+- `parameters.argsTypes` - type information about args (see below)
+
+### Parameter enhancement
+
+Ideally all parameters should be set _at build time_ of the Storybook, either directly by the user, or via the use of a webpack loader. (For an example of this, see `addon-storysource`, which writes to the `parameters.storysource` parameter with a set of static information about the story file).
+
+However, in some cases it is necessary to set parameters at _load time_ when the Storybook first loads. This should be avoided if at all possible as it is cost that must be paid each time a Storybook loads, rather than just once when the Storybook is built.
+
+To add a parameter enhancer, call `store.addArgTypesEnhancer(enhancer)` _before_ any stories are loaded (in addon registration or in `preview.js`). As each story is loaded, the enhancer will be called with the full story `context` -- the return value should be an object that will be patched into the Story's `argTypes`.
+
+## Args
+
+Args are "inputs" to stories.
+
+You can think of them equivalently to React props, Angular inputs and outputs, etc.
+
+Changing the args cause the story to be re-rendered with the new set of args.
+
+### Using args in a story
+
+By default (starting in 6.0) the args will be passed to the story as first argument and the context as second:
+
+```js
+const YourStory = ({ x, y } /*, context*/) => /* render your story using `x` and `y` */
+```
+
+If you set the `parameters.options.passArgsFirst` option on a story to false, args are passed to a story in the context, preserving the pre-6.0 story API; like parameters, they are available as `context.args`.
+
+```js
+const YourStory = ({ args: { x, y }}) => /* render your story using `x` and `y` */
+```
+
+### Arg types and values
+
+Arg types are used by the docs addon to populate the props table and are documented there. They are controlled by `parameters.argTypes` and can (sometimes) be automatically inferred from type information about the story or the component rendered by the story.
+
+A story can set initial values of its args with the `parameters.args` parameter. If you set an initial value for an arg that doesn't have a type a simple type will be inferred from the value.
+
+The initial value for an arg named "X" will be either `parameters.args.X` (if set) or `parameters.argTypes.X.defaultValue`. If an arg doesn't have a default value or an initial value, it will start unset, although it can still be set later via user interaction.
+
+For instance, for this story:
+
+```js
+export MyStory = ....
+MyStory.argTypes = {
+  primary: { defaultValue: true, /* other things */ },
+  size: { /* other things */ },
+  color: { /* other things */ },
+};
+MyStory.args = {
+  size: 'large',
+  extra: 'prop',
+};
+```
+
+Then `context.args` will default to `{ primary: true, size: 'large', extra: 'prop' }`.
+
+### Using args in an addon
+
+Args values are automatically syncronized (via the `changeStoryArgs` and `storyArgsChanged` events) between the preview and manager; APIs exist in `lib/api` to read and set args in the manager.
+
+Args need to be serializable -- so currently cannot include callbacks (this may change in a future version).
+
+Note that arg values are passed directly to a story -- you should only store the actual value that the story needs to render in the arg. If you need more complex information supporting that, use parameters or addon state.
+
+Both `@storybook/client-api` (preview) and `@storybook/api` (manager) export a `useArgs()` hook that you can use to access args in decorators or addon panels. The API is as follows:
+
+```js
+import { useArgs } from '@storybook/client-api'; // or '@storybook/api'
+
+// `args` is the args of the currently rendered story
+// `updateArgs` will update its args. You can pass a subset of the args; other args will not be changed.
+const [args, updateArgs] = useArgs();
+```
+
+## Global Args
+
+Global args are args that are "global" across all stories. They are used for things like themes and internationalization (i18n) in stories, where you want Storybook to "remember" your setting as you browse between stories.
+
+### Initial values of global args
+
+To set initial values of global args, set the `parameters.globalArgs` parameters. Addons can use parameter enhancers (see above) to do this.
+
+### Using global args in an addon
+
+Similar to args, global args are syncronized to the manager and can be accessed via the `useGlobalArgs` hook.
+
+```js
+import { useGlobalArgs } from '@storybook/client-api'; // or '@storybook/api'
+
+const [globalArgs, updateGlobalArgs] = useGlobalArgs();
+```
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 43a5dfc513fd..3646e3f128b9 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -15,24 +15,26 @@
     "directory": "lib/client-api"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/channel-postmessage": "5.3.0-rc.0",
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/channel-postmessage": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
+    "@types/webpack-env": "^1.15.2",
     "core-js": "^3.0.1",
     "eventemitter3": "^4.0.0",
     "global": "^4.3.2",
@@ -41,11 +43,21 @@
     "memoizerific": "^1.11.3",
     "qs": "^6.6.0",
     "stable": "^0.1.8",
-    "ts-dedent": "^1.1.0",
-    "util-deprecate": "^1.0.2"
+    "ts-dedent": "^1.1.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts
index b7abf255af22..0e352f4819bd 100644
--- a/lib/client-api/src/client_api.test.ts
+++ b/lib/client-api/src/client_api.test.ts
@@ -1,16 +1,16 @@
 import { logger } from '@storybook/client-logger';
 import addons, { mockChannel } from '@storybook/addons';
+import Events from '@storybook/core-events';
 import ClientApi from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
-const getContext = (() => decorateStory => {
+const getContext = (clientApiOptions = {}) => {
   const channel = mockChannel();
   addons.setChannel(channel);
   const storyStore = new StoryStore({ channel });
-  const clientApi = new ClientApi({ storyStore, decorateStory });
-  const { clearDecorators } = clientApi;
-  const configApi = new ConfigApi({ clearDecorators, storyStore, channel, clientApi });
+  const clientApi = new ClientApi({ storyStore, ...clientApiOptions });
+  const configApi = new ConfigApi({ storyStore });
 
   return {
     configApi,
@@ -18,21 +18,16 @@ const getContext = (() => decorateStory => {
     channel,
     clientApi,
   };
-})();
+};
 
 jest.mock('@storybook/client-logger', () => ({
   logger: { warn: jest.fn(), log: jest.fn() },
 }));
 
 describe('preview.client_api', () => {
-  afterEach(() => {
-    const { clientApi } = getContext(undefined);
-    clientApi.clearDecorators();
-    clientApi.clearParameters();
-  });
   describe('setAddon', () => {
     it('should register addons', () => {
-      const { clientApi } = getContext(undefined);
+      const { clientApi } = getContext();
       let data;
 
       clientApi.setAddon({
@@ -46,7 +41,7 @@ describe('preview.client_api', () => {
     });
 
     it('should not remove previous addons', () => {
-      const { clientApi } = getContext(undefined);
+      const { clientApi } = getContext();
       const data = [];
 
       clientApi.setAddon({
@@ -61,15 +56,12 @@ describe('preview.client_api', () => {
         },
       });
 
-      clientApi
-        .storiesOf('none', module)
-        .aa()
-        .bb();
+      clientApi.storiesOf('none', module).aa().bb();
       expect(data).toEqual(['foo', 'bar']);
     });
 
     it('should call with the clientApi context', () => {
-      const { clientApi } = getContext(undefined);
+      const { clientApi } = getContext();
       let data;
 
       clientApi.setAddon({
@@ -83,7 +75,7 @@ describe('preview.client_api', () => {
     });
 
     it('should be able to access addons added previously', () => {
-      const { clientApi } = getContext(undefined);
+      const { clientApi } = getContext();
       let data;
 
       clientApi.setAddon({
@@ -103,7 +95,7 @@ describe('preview.client_api', () => {
     });
 
     it('should be able to access the current kind', () => {
-      const { clientApi } = getContext(undefined);
+      const { clientApi } = getContext();
       const kind = 'dfdwf3e3';
       let data;
 
@@ -120,26 +112,26 @@ describe('preview.client_api', () => {
 
   describe('addParameters', () => {
     it('should add parameters', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addParameters({ a: 1 });
-      storiesOf('kind', module).add('name', ({ parameters }) => parameters);
+      storiesOf('kind', module).add('name', (_args, { parameters }) => parameters);
 
       const result = storyStore.fromId('kind--name').storyFn();
       // @ts-ignore
-      const { docs, fileName, options, ...rest } = result;
+      const { docs, fileName, options, argTypes, ...rest } = result;
 
       expect(rest).toEqual({ a: 1 });
     });
 
     it('should merge options', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addParameters({ options: { a: '1' } });
       clientApi.addParameters({ options: { b: '2' } });
-      storiesOf('kind', module).add('name', ({ parameters }) => parameters);
+      storiesOf('kind', module).add('name', (_args, { parameters }) => parameters);
 
       // @ts-ignore
       const {
@@ -150,12 +142,12 @@ describe('preview.client_api', () => {
     });
 
     it('should override specific properties in options', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
       clientApi.addParameters({ options: { a: '2' } });
-      storiesOf('kind', module).add('name', ({ parameters }) => parameters);
+      storiesOf('kind', module).add('name', (_args, { parameters }) => parameters);
 
       // @ts-ignore
       const {
@@ -168,12 +160,12 @@ describe('preview.client_api', () => {
     });
 
     it('should replace top level properties and override specific properties in options', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
       clientApi.addParameters({ backgrounds: [], options: { a: '2' } });
-      storiesOf('kind', module).add('name', ({ parameters }) => parameters);
+      storiesOf('kind', module).add('name', (_args, { parameters }) => parameters);
 
       // @ts-ignore
       const {
@@ -186,12 +178,12 @@ describe('preview.client_api', () => {
     });
 
     it('should deep merge in options', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addParameters({ options: { a: '1', b: '2', theming: { c: '3' } } });
       clientApi.addParameters({ options: { theming: { c: '4', d: '5' } } });
-      storiesOf('kind', module).add('name', ({ parameters }) => parameters);
+      storiesOf('kind', module).add('name', (_args, { parameters }) => parameters);
 
       // @ts-ignore
       const {
@@ -207,10 +199,10 @@ describe('preview.client_api', () => {
       const {
         clientApi: { storiesOf },
         storyStore,
-      } = getContext(undefined);
+      } = getContext();
 
       storiesOf('kind', module)
-        .addDecorator(fn => `aa-${fn()}`)
+        .addDecorator((fn) => `aa-${fn()}`)
         .add('name', () => 'Hello');
 
       expect(storyStore.fromId('kind--name').storyFn()).toBe('aa-Hello');
@@ -220,9 +212,9 @@ describe('preview.client_api', () => {
       const {
         clientApi: { addDecorator, storiesOf },
         storyStore,
-      } = getContext(undefined);
+      } = getContext();
 
-      addDecorator(fn => `bb-${fn()}`);
+      addDecorator((fn) => `bb-${fn()}`);
 
       storiesOf('kind', module).add('name', () => 'Hello');
       const f = storyStore.fromId('x');
@@ -234,12 +226,12 @@ describe('preview.client_api', () => {
       const {
         clientApi: { addDecorator, storiesOf },
         storyStore,
-      } = getContext(undefined);
+      } = getContext();
 
-      addDecorator(fn => `aa-${fn()}`);
+      addDecorator((fn) => `aa-${fn()}`);
 
       storiesOf('kind', module)
-        .addDecorator(fn => `bb-${fn()}`)
+        .addDecorator((fn) => `bb-${fn()}`)
         .add('name', () => 'Hello');
 
       expect(storyStore.fromId('kind--name').storyFn()).toBe('aa-bb-Hello');
@@ -249,11 +241,11 @@ describe('preview.client_api', () => {
       const {
         clientApi: { storiesOf },
         storyStore,
-      } = getContext(undefined);
+      } = getContext();
 
       storiesOf('kind', module)
-        .addDecorator(fn => `aa-${fn()}`)
-        .add('name', c => `${c.kind}-${c.name}`);
+        .addDecorator((fn) => `aa-${fn()}`)
+        .add('name', (_args, c) => `${c.kind}-${c.name}`);
 
       const result = storyStore.fromId('kind--name').storyFn();
       expect(result).toBe(`aa-kind-name`);
@@ -263,7 +255,7 @@ describe('preview.client_api', () => {
       const {
         clientApi: { storiesOf },
         storyStore,
-      } = getContext(undefined);
+      } = getContext();
 
       storiesOf('kind', module)
         .addDecorator((fn, { kind, name }) => `${kind}-${name}-${fn()}`)
@@ -276,7 +268,7 @@ describe('preview.client_api', () => {
 
   describe('clearDecorators', () => {
     it('should remove all global decorators', () => {
-      const { clientApi, storyStore } = getContext(undefined);
+      const { clientApi, storyStore } = getContext();
       const { storiesOf } = clientApi;
 
       clientApi.addDecorator(() => 'foo');
@@ -293,7 +285,7 @@ describe('preview.client_api', () => {
     it('should transform the storybook to an array with filenames', () => {
       const {
         clientApi: { getStorybook, storiesOf },
-      } = getContext(undefined);
+      } = getContext();
 
       let book;
 
@@ -346,7 +338,7 @@ describe('preview.client_api', () => {
       it('returns values set via parameters', () => {
         const {
           clientApi: { getSeparators, storiesOf, addParameters },
-        } = getContext(undefined);
+        } = getContext();
 
         const options = { hierarchySeparator: /a/, hierarchyRootSeparator: 'b' };
         addParameters({ options });
@@ -357,7 +349,7 @@ describe('preview.client_api', () => {
       it('returns old defaults if kind uses old separators', () => {
         const {
           clientApi: { getSeparators, storiesOf },
-        } = getContext(undefined);
+        } = getContext();
 
         storiesOf('kind|1', module).add('name 1', () => '1');
         expect(getSeparators()).toEqual({
@@ -369,7 +361,7 @@ describe('preview.client_api', () => {
       it('returns new values if showRoots is set', () => {
         const {
           clientApi: { getSeparators, storiesOf, addParameters },
-        } = getContext(undefined);
+        } = getContext();
         addParameters({ options: { showRoots: false } });
 
         storiesOf('kind|1', module).add('name 1', () => '1');
@@ -379,7 +371,7 @@ describe('preview.client_api', () => {
       it('returns new values if kind does not use old separators', () => {
         const {
           clientApi: { getSeparators, storiesOf },
-        } = getContext(undefined);
+        } = getContext();
 
         storiesOf('kind/1', module).add('name 1', () => '1');
         expect(getSeparators()).toEqual({ hierarchySeparator: '/' });
@@ -389,10 +381,10 @@ describe('preview.client_api', () => {
     it('reads filename from module', () => {
       const {
         clientApi: { getStorybook, storiesOf },
-      } = getContext(undefined);
+      } = getContext();
 
       const fn = jest.fn();
-      storiesOf('kind', { id: 'foo.js' }).add('name', fn);
+      storiesOf('kind', { id: 'foo.js' } as NodeModule).add('name', fn);
 
       const storybook = getStorybook();
 
@@ -413,10 +405,10 @@ describe('preview.client_api', () => {
     it('should stringify ids from module', () => {
       const {
         clientApi: { getStorybook, storiesOf },
-      } = getContext(undefined);
+      } = getContext();
 
       const fn = jest.fn();
-      storiesOf('kind', { id: 1211 }).add('name', fn);
+      storiesOf('kind', { id: 1211 } as NodeModule).add('name', fn);
 
       const storybook = getStorybook();
 
@@ -445,38 +437,22 @@ describe('preview.client_api', () => {
           this.callbacks.push(fn);
         },
         reload() {
-          this.callbacks.forEach(fn => fn());
+          this.callbacks.forEach((fn) => fn());
         },
       };
     }
 
-    it('should increment store revision when the module reloads', () => {
-      const {
-        storyStore,
-        clientApi: { storiesOf },
-      } = getContext(undefined);
-      const module = new MockModule();
-
-      expect(storyStore.getRevision()).toEqual(0);
-
-      storiesOf('kind', module);
-
-      module.hot.reload();
-
-      expect(storyStore.getRevision()).toEqual(1);
-    });
-
     it('should replace a kind when the module reloads', () => {
       const {
         clientApi: { storiesOf, getStorybook },
-      } = getContext(undefined);
-      const module = new MockModule();
+      } = getContext();
+      const mod = new MockModule();
 
       const stories = [jest.fn(), jest.fn()];
 
       expect(getStorybook()).toEqual([]);
 
-      storiesOf('kind', module).add('story', stories[0]);
+      storiesOf('kind', (mod as unknown) as NodeModule).add('story', stories[0]);
 
       const firstStorybook = getStorybook();
       expect(firstStorybook).toEqual([
@@ -490,7 +466,7 @@ describe('preview.client_api', () => {
       firstStorybook[0].stories[0].render();
       expect(stories[0]).toHaveBeenCalled();
 
-      module.hot.reload();
+      mod.hot.reload();
       expect(getStorybook()).toEqual([]);
 
       storiesOf('kind', module).add('story', stories[1]);
@@ -507,6 +483,87 @@ describe('preview.client_api', () => {
       expect(stories[1]).toHaveBeenCalled();
       expect(logger.warn).not.toHaveBeenCalled();
     });
+
+    it('should maintain kind order when the module reloads', async () => {
+      const {
+        clientApi: { storiesOf, getStorybook },
+        storyStore,
+        channel,
+      } = getContext();
+      const module0 = new MockModule();
+      const module1 = new MockModule();
+      const module2 = new MockModule();
+
+      const mockChannelEmit = jest.fn();
+      channel.emit = mockChannelEmit;
+
+      expect(getStorybook()).toEqual([]);
+
+      storyStore.startConfiguring();
+      storiesOf('kind0', (module0 as unknown) as NodeModule).add('story0-docs-only', jest.fn(), {
+        docsOnly: true,
+      });
+      storiesOf('kind1', (module1 as unknown) as NodeModule).add('story1', jest.fn());
+      storiesOf('kind2', (module2 as unknown) as NodeModule).add('story2', jest.fn());
+      storyStore.finishConfiguring();
+
+      let [event, args] = mockChannelEmit.mock.calls[0];
+      expect(event).toEqual(Events.SET_STORIES);
+      expect(Object.values(args.stories as [{ kind: string }]).map((v) => v.kind)).toEqual([
+        'kind0',
+        'kind1',
+        'kind2',
+      ]);
+      expect(getStorybook().map((story) => story.kind)).toEqual(['kind1', 'kind2']);
+
+      mockChannelEmit.mockClear();
+
+      // simulate an HMR of kind1, which would cause it to go to the end
+      // if the original order is not maintainaed
+      module1.hot.reload();
+      storyStore.startConfiguring();
+      storiesOf('kind1', (module1 as unknown) as NodeModule).add('story1', jest.fn());
+      storyStore.finishConfiguring();
+
+      // eslint-disable-next-line prefer-destructuring
+      [event, args] = mockChannelEmit.mock.calls[0];
+
+      expect(event).toEqual(Events.SET_STORIES);
+      expect(Object.values(args.stories as [{ kind: string }]).map((v) => v.kind)).toEqual([
+        'kind0',
+        'kind1',
+        'kind2',
+      ]);
+      expect(getStorybook().map((story) => story.kind)).toEqual(['kind1', 'kind2']);
+    });
+
+    it('should call `module.hot.dispose` inside add and soriesOf by default', () => {
+      const mod = (new MockModule() as unknown) as NodeModule;
+      const mockHotDispose = jest.fn();
+      mod.hot.dispose = mockHotDispose;
+
+      const {
+        clientApi: { storiesOf, getStorybook },
+      } = getContext();
+
+      storiesOf('kind', mod).add('story', jest.fn());
+
+      expect(mockHotDispose.mock.calls.length).toEqual(2);
+    });
+
+    it('should not call `module.hot.dispose` inside add when noStoryModuleAddMethodHotDispose is true', () => {
+      const mod = (new MockModule() as unknown) as NodeModule;
+      const mockHotDispose = jest.fn();
+      mod.hot.dispose = mockHotDispose;
+
+      const {
+        clientApi: { storiesOf, getStorybook },
+      } = getContext({ noStoryModuleAddMethodHotDispose: true });
+
+      storiesOf('kind', mod).add('story', jest.fn());
+
+      expect(mockHotDispose.mock.calls.length).toEqual(1);
+    });
   });
 
   describe('parameters', () => {
@@ -514,7 +571,7 @@ describe('preview.client_api', () => {
       const {
         storyStore,
         clientApi: { storiesOf, addParameters },
-      } = getContext(undefined);
+      } = getContext();
 
       addParameters({ a: 'global', b: 'global', c: 'global' });
 
@@ -528,8 +585,7 @@ describe('preview.client_api', () => {
         b: 'kind',
         c: 'story',
         fileName: expect.any(String),
-        options: expect.any(Object),
-        docs: expect.any(Object),
+        argTypes: {},
       });
     });
 
@@ -537,7 +593,7 @@ describe('preview.client_api', () => {
       const {
         storyStore,
         clientApi: { storiesOf, addParameters },
-      } = getContext(undefined);
+      } = getContext();
 
       addParameters({
         addon1: 'global string value',
@@ -546,8 +602,6 @@ describe('preview.client_api', () => {
           global: true,
           sub: { global: true },
         },
-        options: expect.any(Object),
-        docs: expect.any(Object),
       });
 
       storiesOf('kind', module)
@@ -584,8 +638,7 @@ describe('preview.client_api', () => {
           },
         },
         fileName: expect.any(String),
-        options: expect.any(Object),
-        docs: expect.any(Object),
+        argTypes: {},
       });
     });
   });
@@ -597,7 +650,7 @@ describe('preview.client_api', () => {
 
         const {
           clientApi: { storiesOf, getStorybook },
-        } = getContext(undefined);
+        } = getContext();
 
         expect(getStorybook()).toEqual([]);
 
@@ -611,12 +664,7 @@ describe('preview.client_api', () => {
           expect(entry.stories).toHaveLength(1);
           expect(entry.stories[0].name).toBe('story');
 
-          // v3 returns the same function we passed in
-          if (jest.isMockFunction(entry.stories[0].render)) {
-            expect(entry.stories[0].render).toBe(stories[0]);
-          } else {
-            expect(entry.stories[0].render()).toBe('story1');
-          }
+          expect(entry.stories[0].render()).toBe('story1');
         }
 
         storiesOf('kind', module).add('story', stories[1]);
@@ -633,12 +681,7 @@ describe('preview.client_api', () => {
           expect(entry.stories).toHaveLength(1);
           expect(entry.stories[0].name).toBe('story');
 
-          // v3 returns the same function we passed in
-          if (jest.isMockFunction(entry.stories[0].render)) {
-            expect(entry.stories[0].render).toBe(stories[0]);
-          } else {
-            expect(entry.stories[0].render()).toBe('story2');
-          }
+          expect(entry.stories[0].render()).toBe('story2');
         }
       });
     });
diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
index af2c9db0844f..4e848b9ff50f 100644
--- a/lib/client-api/src/client_api.ts
+++ b/lib/client-api/src/client_api.ts
@@ -1,107 +1,41 @@
 /* eslint no-underscore-dangle: 0 */
-import deprecate from 'util-deprecate';
-import isPlainObject from 'is-plain-object';
 import { logger } from '@storybook/client-logger';
-import addons, { StoryContext, StoryFn, Parameters } from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { StoryFn, Parameters, DecorateStoryFunction } from '@storybook/addons';
 import { toId } from '@storybook/csf';
 
-import mergeWith from 'lodash/mergeWith';
-import isEqual from 'lodash/isEqual';
-import get from 'lodash/get';
-import { ClientApiParams, DecoratorFunction, ClientApiAddons, StoryApi } from './types';
-import subscriptionsStore from './subscriptions_store';
+import {
+  ClientApiParams,
+  DecoratorFunction,
+  ClientApiAddons,
+  StoryApi,
+  ArgTypesEnhancer,
+} from './types';
 import { applyHooks } from './hooks';
 import StoryStore from './story_store';
+import { defaultDecorateStory } from './decorators';
 
-// merge with concatenating arrays, but no duplicates
-const merge = (a: any, b: any) =>
-  mergeWith({}, a, b, (objValue, srcValue) => {
-    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach(s => {
-        const existing = objValue.find(o => o === s || isEqual(o, s));
-        if (!existing) {
-          objValue.push(s);
-        }
-      });
+// ClientApi (and StoreStore) are really singletons. However they are not created until the
+// relevant framework instanciates them via `start.js`. The good news is this happens right away.
+let singleton: ClientApi;
 
-      return objValue;
-    }
-    if (Array.isArray(objValue)) {
-      logger.log('the types mismatch, picking', objValue);
-      return objValue;
-    }
-    return undefined;
-  });
-
-const defaultContext: StoryContext = {
-  id: 'unspecified',
-  name: 'unspecified',
-  kind: 'unspecified',
-  parameters: {},
-};
+export const addDecorator = (decorator: DecoratorFunction) => {
+  if (!singleton)
+    throw new Error(`Singleton client API not yet initialized, cannot call addDecorator`);
 
-export const defaultDecorateStory = (storyFn: StoryFn, decorators: DecoratorFunction[]) =>
-  decorators.reduce(
-    (decorated, decorator) => (context: StoryContext = defaultContext) =>
-      decorator(
-        p =>
-          decorated(
-            p
-              ? {
-                  ...context,
-                  ...p,
-                  parameters: { ...context.parameters, ...p.parameters },
-                }
-              : context
-          ),
-        context
-      ),
-    storyFn
-  );
-
-const metaSubscriptionHandler = deprecate(
-  subscriptionsStore.register,
-  'Events.REGISTER_SUBSCRIPTION is deprecated and will be removed in 6.0. Please use useEffect from @storybook/client-api instead.'
-);
-
-const metaSubscription = () => {
-  addons.getChannel().on(Events.REGISTER_SUBSCRIPTION, metaSubscriptionHandler);
-  return () =>
-    addons.getChannel().removeListener(Events.REGISTER_SUBSCRIPTION, metaSubscriptionHandler);
+  singleton.addDecorator(decorator);
 };
+export const addParameters = (parameters: Parameters) => {
+  if (!singleton)
+    throw new Error(`Singleton client API not yet initialized, cannot call addParameters`);
 
-const withSubscriptionTracking = (storyFn: StoryFn) => {
-  if (!addons.hasChannel()) {
-    return storyFn();
-  }
-  subscriptionsStore.markAllAsUnused();
-  subscriptionsStore.register(metaSubscription);
-  const result = storyFn();
-  subscriptionsStore.clearUnused();
-  return result;
+  singleton.addParameters(parameters);
 };
 
-let _globalDecorators: DecoratorFunction[] = [];
+export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => {
+  if (!singleton)
+    throw new Error(`Singleton client API not yet initialized, cannot call addArgTypesEnhancer`);
 
-let _globalParameters: Parameters = {};
-
-export const addDecorator = (decoratorFn: DecoratorFunction) => {
-  _globalDecorators.push(decoratorFn);
-};
-
-export const addParameters = (parameters: Parameters) => {
-  _globalParameters = {
-    ..._globalParameters,
-    ...parameters,
-    options: {
-      ...merge(get(_globalParameters, 'options', {}), get(parameters, 'options', {})),
-    },
-    // FIXME: https://github.com/storybookjs/storybook/issues/7872
-    docs: {
-      ...merge(get(_globalParameters, 'docs', {}), get(parameters, 'docs', {})),
-    },
-  };
+  singleton.addArgTypesEnhancer(enhancer);
 };
 
 export default class ClientApi {
@@ -109,17 +43,26 @@ export default class ClientApi {
 
   private _addons: ClientApiAddons<unknown>;
 
-  private _decorateStory: (storyFn: StoryFn, decorators: DecoratorFunction[]) => any;
+  private _decorateStory: DecorateStoryFunction;
+
+  // React Native Fast refresh doesn't allow multiple dispose calls
+  private _noStoryModuleAddMethodHotDispose: boolean;
 
-  constructor({ storyStore, decorateStory = defaultDecorateStory }: ClientApiParams) {
+  constructor({
+    storyStore,
+    decorateStory = defaultDecorateStory,
+    noStoryModuleAddMethodHotDispose,
+  }: ClientApiParams) {
     this._storyStore = storyStore;
     this._addons = {};
 
+    this._noStoryModuleAddMethodHotDispose = noStoryModuleAddMethodHotDispose || false;
+
     this._decorateStory = decorateStory;
 
-    if (!storyStore) {
-      throw new Error('storyStore is required');
-    }
+    if (!storyStore) throw new Error('storyStore is required');
+
+    singleton = this;
   }
 
   setAddon = (addon: any) => {
@@ -131,7 +74,7 @@ export default class ClientApi {
 
   getSeparators = () => {
     const { hierarchySeparator, hierarchyRootSeparator, showRoots } =
-      _globalParameters.options || {};
+      this._storyStore._globalMetadata.parameters.options || {};
 
     // Note these checks will be removed in 6.0, leaving this much simpler
     if (
@@ -144,7 +87,7 @@ export default class ClientApi {
       typeof showRoots === 'undefined' &&
       this.store()
         .getStoryKinds()
-        .some(kind => kind.match(/\.|\|/))
+        .some((kind) => kind.match(/\.|\|/))
     ) {
       return {
         hierarchyRootSeparator: '|',
@@ -155,20 +98,19 @@ export default class ClientApi {
   };
 
   addDecorator = (decorator: DecoratorFunction) => {
-    addDecorator(decorator);
+    this._storyStore.addGlobalMetadata({ decorators: [decorator], parameters: {} });
   };
 
   addParameters = (parameters: Parameters) => {
-    addParameters(parameters);
+    this._storyStore.addGlobalMetadata({ decorators: [], parameters });
   };
 
-  clearDecorators = () => {
-    _globalDecorators = [];
+  addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => {
+    this._storyStore.addArgTypesEnhancer(enhancer);
   };
 
-  clearParameters = () => {
-    // Utility function FOR TESTING USE ONLY
-    _globalParameters = {};
+  clearDecorators = () => {
+    this._storyStore.clearGlobalDecorators();
   };
 
   // what are the occasions that "m" is a boolean vs an obj
@@ -199,13 +141,13 @@ export default class ClientApi {
     if (m && m.hot && m.hot.dispose) {
       m.hot.dispose(() => {
         const { _storyStore } = this;
-        _storyStore.removeStoryKind(kind);
-        _storyStore.incrementRevision();
+        // If HMR dispose happens in a story file, we know that HMR will pass up to the configuration file (preview.js)
+        // and be handled by the HMR.allow in config_api, leading to a re-run of configuration.
+        // So configuration is about to happen--we can skip the safety check.
+        _storyStore.removeStoryKind(kind, { allowUnsafe: true });
       });
     }
 
-    const localDecorators: DecoratorFunction<StoryFnReturnType>[] = [];
-    let localParameters: Parameters = {};
     let hasAdded = false;
     const api: StoryApi<StoryFnReturnType> = {
       kind: kind.toString(),
@@ -215,7 +157,7 @@ export default class ClientApi {
     };
 
     // apply addons
-    Object.keys(this._addons).forEach(name => {
+    Object.keys(this._addons).forEach((name) => {
       const addon = this._addons[name];
       api[name] = (...args: any[]) => {
         addon.apply(api, args);
@@ -223,7 +165,11 @@ export default class ClientApi {
       };
     });
 
-    api.add = (storyName, storyFn, parameters = {}) => {
+    api.add = (
+      storyName: string,
+      storyFn: StoryFn<StoryFnReturnType>,
+      parameters: Parameters = {}
+    ) => {
       hasAdded = true;
 
       const id = parameters.__id || toId(kind, storyName);
@@ -231,87 +177,56 @@ export default class ClientApi {
       if (typeof storyName !== 'string') {
         throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
       }
-      if (m && m.hot && m.hot.dispose) {
+
+      if (!this._noStoryModuleAddMethodHotDispose && m && m.hot && m.hot.dispose) {
         m.hot.dispose(() => {
           const { _storyStore } = this;
-          _storyStore.remove(id);
+          // See note about allowUnsafe above
+          _storyStore.remove(id, { allowUnsafe: true });
         });
       }
 
       const fileName = m && m.id ? `${m.id}` : undefined;
 
-      const allParam = [_globalParameters, localParameters, parameters].reduce(
-        (acc: Parameters, p) => {
-          if (p) {
-            Object.entries(p).forEach(([key, value]) => {
-              const existingValue = acc[key];
-
-              if (Array.isArray(value)) {
-                acc[key] = value;
-              } else if (isPlainObject(value) && isPlainObject(existingValue)) {
-                acc[key] = merge(existingValue, value);
-              } else {
-                acc[key] = value;
-              }
-            });
-          }
-          return acc;
-        },
-        { fileName }
-      );
-
+      const { decorators, ...storyParameters } = parameters;
       this._storyStore.addStory(
         {
           id,
           kind,
           name: storyName,
           storyFn,
-          parameters: allParam,
+          parameters: { fileName, ...storyParameters },
+          decorators,
         },
         {
           applyDecorators: applyHooks(this._decorateStory),
-          getDecorators: () => [
-            ...(allParam.decorators || []),
-            ...localDecorators,
-            ..._globalDecorators,
-            withSubscriptionTracking,
-          ],
         }
       );
       return api;
     };
 
     api.addDecorator = (decorator: DecoratorFunction<StoryFnReturnType>) => {
-      if (hasAdded) {
-        logger.warn(`You have added a decorator to the kind '${kind}' after a story has already been added.
-In Storybook 4 this applied the decorator only to subsequent stories. In Storybook 5+ it applies to all stories.
-This is probably not what you intended. Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`);
-      }
+      if (hasAdded)
+        throw new Error(`You cannot add a decorator after the first story for a kind.
+Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decorators-parameters-after-stories`);
 
-      localDecorators.push(decorator);
+      this._storyStore.addKindMetadata(kind, { decorators: [decorator], parameters: [] });
       return api;
     };
 
     api.addParameters = (parameters: Parameters) => {
-      localParameters = { ...localParameters, ...parameters };
+      if (hasAdded)
+        throw new Error(`You cannot add parameters after the first story for a kind.
+Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decorators-parameters-after-stories`);
+
+      this._storyStore.addKindMetadata(kind, { decorators: [], parameters });
       return api;
     };
 
     return api;
   };
 
-  // legacy
-  getStorybook = () =>
-    this._storyStore.getStoryKinds().map(kind => {
-      const fileName = this._storyStore.getStoryFileName(kind);
-
-      const stories = this._storyStore.getStories(kind).map(name => {
-        const render = this._storyStore.getStoryWithContext(kind, name);
-        return { name, render };
-      });
-
-      return { kind, fileName, stories };
-    });
+  getStorybook = () => this._storyStore.getStorybook();
 
   raw = () => this._storyStore.raw();
 
diff --git a/lib/client-api/src/config_api.ts b/lib/client-api/src/config_api.ts
index cc89a22e41c0..90e8967e53a1 100644
--- a/lib/client-api/src/config_api.ts
+++ b/lib/client-api/src/config_api.ts
@@ -1,8 +1,6 @@
 /* eslint no-underscore-dangle: 0 */
 
-import Events from '@storybook/core-events';
 import Channel from '@storybook/channels';
-import { ErrorLike } from './types';
 import StoryStore from './story_store';
 import ClientApi from './client_api';
 
@@ -15,82 +13,32 @@ export default class ConfigApi {
 
   clientApi: ClientApi;
 
-  constructor({
-    channel,
-    storyStore,
-    clientApi,
-    clearDecorators,
-  }: {
-    channel: Channel | null;
-    storyStore: StoryStore;
-    clientApi: ClientApi;
-    clearDecorators: () => void;
-  }) {
-    // channel can be null when running in node
-    // always check whether channel is available
-    this._channel = channel;
+  constructor({ storyStore }: { storyStore: StoryStore }) {
     this._storyStore = storyStore;
-    this._clearDecorators = clearDecorators;
-    this.clientApi = clientApi;
-  }
-
-  _renderMain() {
-    // do initial render of story
-    this._storyStore.emit(Events.STORY_INIT);
-  }
-
-  _renderError(err: Error) {
-    const { stack, message } = err;
-    const error: ErrorLike = { stack, message };
-    this._storyStore.setSelection(undefined, error);
   }
 
   configure = (loaders: () => void, module: NodeModule) => {
-    const render = () => {
-      const errors = [];
-
-      try {
-        if (loaders) {
-          loaders();
-        }
-      } catch (e) {
-        errors.push(e);
-      }
-
-      if (!errors.length) {
-        try {
-          this._renderMain();
-        } catch (e) {
-          errors.push(e);
-        }
-      }
+    this._storyStore.startConfiguring();
 
-      if (errors.length) {
-        this._storyStore.setSelection(undefined, errors[0]);
+    try {
+      loaders();
 
-        throw errors[0];
-      } else {
-        this._storyStore.setSelection(undefined, null);
-      }
-    };
+      this._storyStore.clearError();
+    } catch (err) {
+      this._storyStore.setError(err);
+    }
+    this._storyStore.finishConfiguring();
 
     if (module.hot) {
       module.hot.accept();
-      module.hot.dispose(() => {
-        this._clearDecorators();
-      });
-    }
-
-    if (this._channel) {
-      // in Browser
-      render();
-      // Send a signal to the manager that configure() is done. We do this in a timeout
-      // because the story_store sends stories in a debounced function, which results in
-      // as setTimeout. We want to ensure this happens after, to avoid a FOUC.
-      setTimeout(() => this._channel.emit(Events.STORIES_CONFIGURED), 0);
-    } else {
-      // in NodeJS
-      loaders();
+      // The generated entry point for main.js:stories adds this flag as it cannot
+      // set decorators but calls configure, and aims not to clear decorators added by other files.
+      // HOWEVER: this will still clear global decorators added by addons when reloading preview.js
+      //   which is a bug!
+      // @ts-ignore
+      if (!module._StorybookPreserveDecorators) {
+        module.hot.dispose(() => this._storyStore.clearGlobalDecorators());
+      }
     }
   };
 }
diff --git a/lib/client-api/src/decorators.test.ts b/lib/client-api/src/decorators.test.ts
new file mode 100644
index 000000000000..be76e03ba33e
--- /dev/null
+++ b/lib/client-api/src/decorators.test.ts
@@ -0,0 +1,69 @@
+import { StoryContext } from '@storybook/addons';
+
+import { defaultDecorateStory } from './decorators';
+
+function makeContext(input: Record<string, any>): StoryContext {
+  return {
+    id: 'id',
+    kind: 'kind',
+    name: 'name',
+    parameters: {},
+    ...input,
+  };
+}
+
+describe('client-api.decorators', () => {
+  it('calls decorators in out to in order', () => {
+    const order = [];
+    const decorators = [
+      (s) => order.push(1) && s(),
+      (s) => order.push(2) && s(),
+      (s) => order.push(3) && s(),
+    ];
+    const decorated = defaultDecorateStory(() => order.push(4), decorators);
+
+    expect(order).toEqual([]);
+    decorated();
+    expect(order).toEqual([3, 2, 1, 4]);
+  });
+
+  it('passes context through to sub decorators', () => {
+    const contexts = [];
+    const decorators = [
+      (s, c) => contexts.push(c) && s({ k: 1 }),
+      (s, c) => contexts.push(c) && s({ k: 2 }),
+      (s, c) => contexts.push(c) && s({ k: 3 }),
+    ];
+    const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
+
+    expect(contexts).toEqual([]);
+    decorated(makeContext({ k: 0 }));
+    expect(contexts.map((c) => c.k)).toEqual([0, 3, 2, 1]);
+  });
+
+  it('merges contexts', () => {
+    const contexts = [];
+    const decorators = [(s, c) => contexts.push(c) && s({ c: 'd' })];
+    const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
+
+    expect(contexts).toEqual([]);
+    decorated(makeContext({ a: 'b' }));
+    expect(contexts).toEqual([
+      expect.objectContaining({ a: 'b' }),
+      expect.objectContaining({ a: 'b', c: 'd' }),
+    ]);
+  });
+
+  it('DOES NOT merge parameter or pass through parameters key in context', () => {
+    const contexts = [];
+    const decorators = [(s, c) => contexts.push(c) && s({ parameters: { c: 'd' } })];
+    const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
+
+    expect(contexts).toEqual([]);
+    decorated(makeContext({ parameters: { a: 'b' } }));
+    expect(contexts).toEqual([
+      expect.objectContaining({ parameters: { a: 'b' } }),
+      expect.objectContaining({ parameters: { a: 'b' } }),
+    ]);
+  });
+});
diff --git a/lib/client-api/src/decorators.ts b/lib/client-api/src/decorators.ts
new file mode 100644
index 000000000000..1547f64366f4
--- /dev/null
+++ b/lib/client-api/src/decorators.ts
@@ -0,0 +1,27 @@
+import { StoryContext, StoryFn } from '@storybook/addons';
+import { DecoratorFunction } from './types';
+
+interface StoryContextUpdate {
+  [key: string]: any;
+}
+
+const defaultContext: StoryContext = {
+  id: 'unspecified',
+  name: 'unspecified',
+  kind: 'unspecified',
+  parameters: {},
+  args: {},
+  globalArgs: {},
+};
+
+export const defaultDecorateStory = (storyFn: StoryFn, decorators: DecoratorFunction[]) =>
+  decorators.reduce(
+    (decorated, decorator) => (context: StoryContext = defaultContext) =>
+      decorator(
+        // You cannot override the parameters key, it is fixed
+        ({ parameters, ...innerContext }: StoryContextUpdate = {}) =>
+          decorated({ ...context, ...innerContext }),
+        context
+      ),
+    storyFn
+  );
diff --git a/lib/client-api/src/hooks.test.js b/lib/client-api/src/hooks.test.js
index ab8f180e91e1..6c3458ecfe25 100644
--- a/lib/client-api/src/hooks.test.js
+++ b/lib/client-api/src/hooks.test.js
@@ -1,6 +1,11 @@
-import { FORCE_RE_RENDER, STORY_RENDERED } from '@storybook/core-events';
+import {
+  FORCE_RE_RENDER,
+  STORY_RENDERED,
+  UPDATE_STORY_ARGS,
+  UPDATE_GLOBAL_ARGS,
+} from '@storybook/core-events';
 import addons from '@storybook/addons';
-import { defaultDecorateStory } from './client_api';
+import { defaultDecorateStory } from './decorators';
 import {
   applyHooks,
   useEffect,
@@ -13,6 +18,8 @@ import {
   useParameter,
   useStoryContext,
   HooksContext,
+  useArgs,
+  useGlobalArgs,
 } from './hooks';
 
 jest.mock('@storybook/client-logger', () => ({
@@ -67,7 +74,7 @@ describe('Preview hooks', () => {
     it('triggers the effect from decorator', () => {
       const effect = jest.fn();
       run(() => {}, [
-        storyFn => {
+        (storyFn) => {
           useEffect(effect);
           return storyFn();
         },
@@ -77,7 +84,7 @@ describe('Preview hooks', () => {
     it('triggers the effect from decorator if story call comes before useEffect', () => {
       const effect = jest.fn();
       run(() => {}, [
-        storyFn => {
+        (storyFn) => {
           const story = storyFn();
           useEffect(effect);
           return story;
@@ -105,7 +112,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed", () => {
       const effect = jest.fn();
-      const decorator = storyFn => {
+      const decorator = (storyFn) => {
         useEffect(effect, []);
         return storyFn();
       };
@@ -115,7 +122,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed and story call comes before useEffect", () => {
       const effect = jest.fn();
-      const decorator = storyFn => {
+      const decorator = (storyFn) => {
         const story = storyFn();
         useEffect(effect, []);
         return story;
@@ -129,7 +136,7 @@ describe('Preview hooks', () => {
       const story = () => {
         useEffect(effect, []);
       };
-      const decorator = storyFn => {
+      const decorator = (storyFn) => {
         storyFn();
         return storyFn();
       };
@@ -177,7 +184,7 @@ describe('Preview hooks', () => {
     it('performs cleanup when removing the decorator', () => {
       const destroy = jest.fn();
       run(() => {}, [
-        storyFn => {
+        (storyFn) => {
           useEffect(() => destroy);
           return storyFn();
         },
@@ -190,7 +197,7 @@ describe('Preview hooks', () => {
     it('calls .on when rendering the decorator', () => {
       const handler = () => {};
       run(() => {}, [
-        storyFn => {
+        (storyFn) => {
           useChannel({
             [SOME_EVENT]: handler,
           });
@@ -203,7 +210,7 @@ describe('Preview hooks', () => {
     it('calls .removeListener when removing the decorator', () => {
       const handler = () => {};
       run(() => {}, [
-        storyFn => {
+        (storyFn) => {
           useChannel({
             [SOME_EVENT]: handler,
           });
@@ -233,7 +240,7 @@ describe('Preview hooks', () => {
       run(
         () => {},
         [
-          storyFn => {
+          (storyFn) => {
             expect(useParameter('foo', 4)).toEqual(42);
             return storyFn();
           },
@@ -245,7 +252,7 @@ describe('Preview hooks', () => {
       run(
         () => {},
         [
-          storyFn => {
+          (storyFn) => {
             expect(useParameter('bar', 4)).toEqual(4);
             return storyFn();
           },
@@ -257,7 +264,7 @@ describe('Preview hooks', () => {
       run(
         () => {},
         [
-          storyFn => {
+          (storyFn) => {
             expect(useParameter('bar')).toBe(undefined);
             return storyFn();
           },
@@ -411,7 +418,7 @@ describe('Preview hooks', () => {
       const storyFn = jest.fn(() => {
         [state, setState] = useState(0);
         if (state < 3) {
-          setState(prevState => prevState + 1);
+          setState((prevState) => prevState + 1);
         }
       });
       run(storyFn);
@@ -446,7 +453,7 @@ describe('Preview hooks', () => {
         [state] = useReducer(
           () => 'bar',
           'foo',
-          arg => arg
+          (arg) => arg
         );
       };
       run(storyFn);
@@ -492,4 +499,59 @@ describe('Preview hooks', () => {
       expect(state).toBe(1);
     });
   });
+  describe('useArgs', () => {
+    it('will pull args from context', () => {
+      run(
+        () => {},
+        [
+          (storyFn) => {
+            expect(useArgs()[0]).toEqual({ a: 'b' });
+            return storyFn();
+          },
+        ],
+        { args: { a: 'b' } }
+      );
+    });
+    it('will emit UPDATE_STORY_ARGS when called', () => {
+      run(
+        () => {},
+        [
+          (storyFn) => {
+            useArgs()[1]({ a: 'b' });
+            expect(mockChannel.emit).toHaveBeenCalledWith(UPDATE_STORY_ARGS, '1', { a: 'b' });
+            return storyFn();
+          },
+        ],
+        { id: '1', args: {} }
+      );
+    });
+  });
+
+  describe('useGlobalArgs', () => {
+    it('will pull globalArgs from context', () => {
+      run(
+        () => {},
+        [
+          (storyFn) => {
+            expect(useGlobalArgs()[0]).toEqual({ a: 'b' });
+            return storyFn();
+          },
+        ],
+        { globalArgs: { a: 'b' } }
+      );
+    });
+    it('will emit UPDATE_GLOBAL_ARGS when called', () => {
+      run(
+        () => {},
+        [
+          (storyFn) => {
+            useGlobalArgs()[1]({ a: 'b' });
+            expect(mockChannel.emit).toHaveBeenCalledWith(UPDATE_GLOBAL_ARGS, { a: 'b' });
+            return storyFn();
+          },
+        ],
+        { globalArgs: {} }
+      );
+    });
+  });
 });
diff --git a/lib/client-api/src/hooks.ts b/lib/client-api/src/hooks.ts
index 05d6776031a6..fa43a5f7abc9 100644
--- a/lib/client-api/src/hooks.ts
+++ b/lib/client-api/src/hooks.ts
@@ -1,4 +1,4 @@
-import { ADDON_STATE_CHANGED, ADDON_STATE_SET } from '@storybook/core-events';
+import { SHARED_STATE_CHANGED, SHARED_STATE_SET } from '@storybook/core-events';
 
 import {
   addons,
@@ -13,6 +13,8 @@ import {
   useChannel,
   useStoryContext,
   useParameter,
+  useArgs,
+  useGlobalArgs,
 } from '@storybook/addons';
 
 export {
@@ -27,40 +29,46 @@ export {
   useChannel,
   useStoryContext,
   useParameter,
+  useArgs,
+  useGlobalArgs,
 };
 
-export function useAddonState<S>(addonId: string, defaultState?: S): [S, (s: S) => void] {
+export function useSharedState<S>(sharedId: string, defaultState?: S): [S, (s: S) => void] {
   const channel = addons.getChannel();
 
   const [lastValue] =
-    channel.last(`${ADDON_STATE_CHANGED}-manager-${addonId}`) ||
-    channel.last(`${ADDON_STATE_SET}-manager-${addonId}`) ||
+    channel.last(`${SHARED_STATE_CHANGED}-manager-${sharedId}`) ||
+    channel.last(`${SHARED_STATE_SET}-manager-${sharedId}`) ||
     [];
 
   const [state, setState] = useState<S>(lastValue || defaultState);
 
   const allListeners = useMemo(
     () => ({
-      [`${ADDON_STATE_CHANGED}-manager-${addonId}`]: (s: S) => setState(s),
-      [`${ADDON_STATE_SET}-manager-${addonId}`]: (s: S) => setState(s),
+      [`${SHARED_STATE_CHANGED}-manager-${sharedId}`]: (s: S) => setState(s),
+      [`${SHARED_STATE_SET}-manager-${sharedId}`]: (s: S) => setState(s),
     }),
-    [addonId]
+    [sharedId]
   );
 
-  const emit = useChannel(allListeners, [addonId]);
+  const emit = useChannel(allListeners, [sharedId]);
 
   useEffect(() => {
     // init
     if (defaultState !== undefined && !lastValue) {
-      emit(`${ADDON_STATE_SET}-client-${addonId}`, defaultState);
+      emit(`${SHARED_STATE_SET}-client-${sharedId}`, defaultState);
     }
-  }, [addonId]);
+  }, [sharedId]);
 
   return [
     state,
-    s => {
+    (s) => {
       setState(s);
-      emit(`${ADDON_STATE_CHANGED}-client-${addonId}`, s);
+      emit(`${SHARED_STATE_CHANGED}-client-${sharedId}`, s);
     },
   ];
 }
+
+export function useAddonState<S>(addonId: string, defaultState?: S): [S, (s: S) => void] {
+  return useSharedState<S>(addonId, defaultState);
+}
diff --git a/lib/client-api/src/index.ts b/lib/client-api/src/index.ts
index 1ee7795e0aab..d170cf881a15 100644
--- a/lib/client-api/src/index.ts
+++ b/lib/client-api/src/index.ts
@@ -1,22 +1,26 @@
-import ClientApi, { defaultDecorateStory, addDecorator, addParameters } from './client_api';
+import ClientApi, { addDecorator, addParameters, addArgTypesEnhancer } from './client_api';
+import { defaultDecorateStory } from './decorators';
+import { combineParameters } from './parameters';
 import StoryStore from './story_store';
 import ConfigApi from './config_api';
-import subscriptionsStore from './subscriptions_store';
 import pathToId from './pathToId';
 
 import { getQueryParams, getQueryParam } from './queryparams';
 
 export * from './hooks';
+export * from './types';
+export * from './parameters';
 
 export {
   ClientApi,
+  addDecorator,
+  addParameters,
+  addArgTypesEnhancer,
+  combineParameters,
   StoryStore,
   ConfigApi,
-  subscriptionsStore,
   defaultDecorateStory,
   pathToId,
   getQueryParams,
   getQueryParam,
-  addDecorator,
-  addParameters,
 };
diff --git a/lib/client-api/src/parameters.test.ts b/lib/client-api/src/parameters.test.ts
new file mode 100644
index 000000000000..689a92bd10ab
--- /dev/null
+++ b/lib/client-api/src/parameters.test.ts
@@ -0,0 +1,29 @@
+import { combineParameters } from './parameters';
+
+describe('client-api.parameters', () => {
+  it('merges different sets of parameters by key, preferencing last', () => {
+    expect(combineParameters({ a: 'b', c: 'd' }, { e: 'f', a: 'g' })).toEqual({
+      a: 'g',
+      c: 'd',
+      e: 'f',
+    });
+  });
+
+  it('merges sub-keys', () => {
+    expect(combineParameters({ ns: { a: 'b', c: 'd' } }, { ns: { e: 'f', a: 'g' } })).toEqual({
+      ns: {
+        a: 'g',
+        c: 'd',
+        e: 'f',
+      },
+    });
+  });
+
+  it('treats array values as scalars', () => {
+    expect(combineParameters({ ns: { array: [1, 2, 3] } }, { ns: { array: [3, 4, 5] } })).toEqual({
+      ns: {
+        array: [3, 4, 5],
+      },
+    });
+  });
+});
diff --git a/lib/client-api/src/parameters.ts b/lib/client-api/src/parameters.ts
new file mode 100644
index 000000000000..62f475c809ce
--- /dev/null
+++ b/lib/client-api/src/parameters.ts
@@ -0,0 +1,12 @@
+// Utilities for handling parameters
+import mergeWith from 'lodash/mergeWith';
+
+import { Parameters } from '@storybook/addons';
+
+export const combineParameters = (...parameterSets: Parameters[]) =>
+  mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
+    // Treat arrays as scalars:
+    if (Array.isArray(srcValue)) return srcValue;
+
+    return undefined;
+  });
diff --git a/lib/client-api/src/queryparams.ts b/lib/client-api/src/queryparams.ts
index d7717a5fb75c..bbd12c2aaebd 100644
--- a/lib/client-api/src/queryparams.ts
+++ b/lib/client-api/src/queryparams.ts
@@ -9,7 +9,7 @@ export const getQueryParams = () => {
   return {};
 };
 
-export const getQueryParam = (key: string): string | void => {
+export const getQueryParam = (key: string) => {
   const params = getQueryParams();
 
   return params[key];
diff --git a/lib/client-api/src/storySort.test.ts b/lib/client-api/src/storySort.test.ts
new file mode 100644
index 000000000000..74fc0ef990dc
--- /dev/null
+++ b/lib/client-api/src/storySort.test.ts
@@ -0,0 +1,76 @@
+import storySort from './storySort';
+
+describe('preview.storySort', () => {
+  const fixture = {
+    a: ['', { kind: 'a' }],
+    á: ['', { kind: 'á' }],
+    A: ['', { kind: 'A' }],
+    b: ['', { kind: 'b' }],
+    a_a: ['', { kind: 'a/a' }],
+    a_b: ['', { kind: 'a/b' }],
+    b_a_a: ['', { kind: 'b/a/a' }],
+    b_b: ['', { kind: 'b/b' }],
+    locale1: ['', { kind: 'Б' }],
+    locale2: ['', { kind: 'Г' }],
+  };
+
+  it('uses configure order by default', () => {
+    const sortFn = storySort();
+
+    expect(sortFn(fixture.a, fixture.b)).toBe(0);
+    expect(sortFn(fixture.b, fixture.a)).toBe(0);
+    expect(sortFn(fixture.a, fixture.a)).toBe(0);
+  });
+
+  it('can sort shallow kinds alphabetically', () => {
+    const sortFn = storySort({ method: 'alphabetical' });
+
+    expect(sortFn(fixture.a, fixture.b)).toBeLessThan(0);
+    expect(sortFn(fixture.b, fixture.a)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a, fixture.á)).toBeLessThan(0);
+    expect(sortFn(fixture.á, fixture.a)).toBeGreaterThan(0);
+  });
+
+  it('can sort deep kinds alphabetically', () => {
+    const sortFn = storySort({ method: 'alphabetical' });
+
+    expect(sortFn(fixture.a_a, fixture.a_b)).toBeLessThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_a)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_a, fixture.b)).toBeLessThan(0);
+    expect(sortFn(fixture.b, fixture.a_a)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_a, fixture.a)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a, fixture.a_a)).toBeLessThan(0);
+    expect(sortFn(fixture.b_a_a, fixture.b_b)).toBeLessThan(0);
+    expect(sortFn(fixture.b_b, fixture.b_a_a)).toBeGreaterThan(0);
+  });
+
+  it('ignores case when sorting alphabetically', () => {
+    const sortFn = storySort({ method: 'alphabetical' });
+
+    expect(sortFn(fixture.a, fixture.A)).toBe(0);
+    expect(sortFn(fixture.A, fixture.a)).toBe(0);
+  });
+
+  it('sorts alphabetically using the given locales', () => {
+    const sortFn = storySort({ method: 'alphabetical', locales: 'ru-RU' });
+
+    expect(sortFn(fixture.locale1, fixture.locale2)).toBeLessThan(0);
+    expect(sortFn(fixture.locale2, fixture.locale1)).toBeGreaterThan(0);
+  });
+
+  it('sorts according to the order array', () => {
+    const sortFn = storySort({ order: ['b', 'c'] });
+
+    expect(sortFn(fixture.a, fixture.b)).toBeGreaterThan(0);
+    expect(sortFn(fixture.b, fixture.a)).toBeLessThan(0);
+    expect(sortFn(fixture.b_a_a, fixture.b_b)).toBe(0);
+    expect(sortFn(fixture.b_b, fixture.b_a_a)).toBe(0);
+  });
+
+  it('sorts according to the nested order array', () => {
+    const sortFn = storySort({ order: ['a', ['b', 'c'], 'c'] });
+
+    expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
+  });
+});
diff --git a/lib/client-api/src/storySort.ts b/lib/client-api/src/storySort.ts
new file mode 100644
index 000000000000..a782ab5184a7
--- /dev/null
+++ b/lib/client-api/src/storySort.ts
@@ -0,0 +1,77 @@
+import { StorySortObjectParameter, Comparator } from '@storybook/addons';
+
+const storySort = (options: StorySortObjectParameter = {}): Comparator<any> => (
+  a: any,
+  b: any
+): number => {
+  // If the two stories have the same story kind, then use the default
+  // ordering, which is the order they are defined in the story file.
+  if (a[1].kind === b[1].kind) {
+    return 0;
+  }
+
+  // Get the StorySortParameter options.
+  const method = options.method || 'configure';
+  let order = options.order || [];
+
+  // Examine each part of the story kind in turn.
+  const storyKindA = a[1].kind.split('/');
+  const storyKindB = b[1].kind.split('/');
+  let depth = 0;
+  while (storyKindA[depth] || storyKindB[depth]) {
+    // Stories with a shorter depth should go first.
+    if (!storyKindA[depth]) {
+      return -1;
+    }
+    if (!storyKindB[depth]) {
+      return 1;
+    }
+
+    // Compare the next part of the story kind.
+    const nameA = storyKindA[depth];
+    const nameB = storyKindB[depth];
+    if (nameA !== nameB) {
+      // Look for the names in the given `order` array.
+      let indexA = order.indexOf(nameA);
+      let indexB = order.indexOf(nameB);
+
+      // If at least one of the names is found, sort by the `order` array.
+      if (indexA !== -1 || indexB !== -1) {
+        // If one of the names is not found in `order`, list it last.
+        if (indexA === -1) {
+          indexA = order.length;
+        }
+        if (indexB === -1) {
+          indexB = order.length;
+        }
+
+        return indexA - indexB;
+      }
+
+      // Use the default configure() order.
+      if (method === 'configure') {
+        return 0;
+      }
+
+      // Otherwise, use alphabetical order.
+      return nameA.localeCompare(nameB, options.locales ? options.locales : undefined, {
+        numeric: true,
+        sensitivity: 'accent',
+      });
+    }
+
+    // If a nested array is provided for a name, use it for ordering.
+    const index = order.indexOf(nameA);
+    order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
+
+    // We'll need to look at the next part of the name.
+    depth += 1;
+  }
+
+  // Identical story kinds. The shortcut at the start of this function prevents
+  // this from ever being used.
+  /* istanbul ignore next */
+  return 0;
+};
+
+export default storySort;
diff --git a/lib/client-api/src/story_store.test.ts b/lib/client-api/src/story_store.test.ts
index 20c61f2893f4..c62f1f7af4fd 100644
--- a/lib/client-api/src/story_store.test.ts
+++ b/lib/client-api/src/story_store.test.ts
@@ -1,10 +1,11 @@
+//
 import createChannel from '@storybook/channel-postmessage';
 import { toId } from '@storybook/csf';
-import addons from '@storybook/addons';
+import addons, { mockChannel } from '@storybook/addons';
 import Events from '@storybook/core-events';
 
-import StoryStore from './story_store';
-import { defaultDecorateStory } from './client_api';
+import StoryStore, { ErrorLike } from './story_store';
+import { defaultDecorateStory } from './decorators';
 
 jest.mock('@storybook/node-logger', () => ({
   logger: {
@@ -14,29 +15,38 @@ jest.mock('@storybook/node-logger', () => ({
   },
 }));
 
-const channel = createChannel({ page: 'preview' });
+let channel;
+beforeEach(() => {
+  channel = createChannel({ page: 'preview' });
+});
 
-const make = (kind, name, storyFn, parameters = {}) => [
-  {
-    kind,
-    name,
-    storyFn,
-    parameters,
-    id: toId(kind, name),
-  },
-  {
-    applyDecorators: defaultDecorateStory,
-    getDecorators: () => [],
-  },
-];
+// make a story and add it to the store
+const addStoryToStore = (store, kind, name, storyFn, parameters = {}) =>
+  store.addStory(
+    {
+      kind,
+      name,
+      storyFn,
+      parameters,
+      id: toId(kind, name),
+    },
+    {
+      applyDecorators: defaultDecorateStory,
+    }
+  );
 
 describe('preview.story_store', () => {
-  describe('raw storage', () => {
-    it('stores hash object', () => {
+  describe('extract', () => {
+    it('produces stories objects with inherited (denormalized) metadata', () => {
       const store = new StoryStore({ channel });
-      store.addStory(...make('a', '1', () => 0), undefined);
-      store.addStory(...make('a', '2', () => 0));
-      store.addStory(...make('b', '1', () => 0));
+
+      store.addGlobalMetadata({ parameters: { global: 'global' }, decorators: [] });
+
+      store.addKindMetadata('a', { parameters: { kind: 'kind' }, decorators: [] });
+
+      addStoryToStore(store, 'a', '1', () => 0, { story: 'story' });
+      addStoryToStore(store, 'a', '2', () => 0);
+      addStoryToStore(store, 'b', '1', () => 0);
 
       const extracted = store.extract();
 
@@ -48,36 +58,477 @@ describe('preview.story_store', () => {
         id: 'a--1',
         kind: 'a',
         name: '1',
-        parameters: expect.any(Object),
+        parameters: { global: 'global', kind: 'kind', story: 'story' },
       });
     });
   });
 
+  describe('getDataForManager', () => {
+    it('produces stories objects with normalized metadata', () => {
+      const store = new StoryStore({ channel });
+
+      store.addGlobalMetadata({ parameters: { global: 'global' }, decorators: [] });
+
+      store.addKindMetadata('a', { parameters: { kind: 'kind' }, decorators: [] });
+
+      addStoryToStore(store, 'a', '1', () => 0, { story: 'story' });
+
+      const { v, globalParameters, kindParameters, stories } = store.getDataForManager();
+
+      expect(v).toBe(2);
+      expect(globalParameters).toEqual({ global: 'global' });
+      expect(Object.keys(kindParameters)).toEqual(['a']);
+      expect(kindParameters.a).toEqual({ kind: 'kind' });
+
+      expect(Object.keys(stories)).toEqual(['a--1']);
+      expect(stories['a--1']).toMatchObject({
+        id: 'a--1',
+        kind: 'a',
+        name: '1',
+        parameters: { story: 'story' },
+      });
+    });
+  });
+
+  describe('getRawStory', () => {
+    it('produces a story with inherited decorators applied', () => {
+      const store = new StoryStore({ channel });
+
+      const globalDecorator = jest.fn().mockImplementation((s) => s());
+      store.addGlobalMetadata({ parameters: {}, decorators: [globalDecorator] });
+
+      const kindDecorator = jest.fn().mockImplementation((s) => s());
+      store.addKindMetadata('a', { parameters: {}, decorators: [kindDecorator] });
+
+      const story = jest.fn();
+      addStoryToStore(store, 'a', '1', story);
+
+      const { getDecorated } = store.getRawStory('a', '1');
+      getDecorated()();
+
+      expect(globalDecorator).toHaveBeenCalled();
+      expect(kindDecorator).toHaveBeenCalled();
+      expect(story).toHaveBeenCalled();
+    });
+  });
+
+  describe('args', () => {
+    it('is initialized to the value stored in parameters.args[name] || parameters.argType[name].defaultValue', () => {
+      const store = new StoryStore({ channel });
+      addStoryToStore(store, 'a', '1', () => 0, {
+        argTypes: {
+          arg1: { defaultValue: 'arg1' },
+          arg2: { defaultValue: 2 },
+          arg3: { defaultValue: { complex: { object: ['type'] } } },
+          arg4: {},
+          arg5: {},
+        },
+        args: {
+          arg2: 3,
+          arg4: 'foo',
+          arg6: false,
+        },
+      });
+      expect(store.getRawStory('a', '1').args).toEqual({
+        arg1: 'arg1',
+        arg2: 3,
+        arg3: { complex: { object: ['type'] } },
+        arg4: 'foo',
+        arg6: false,
+      });
+    });
+
+    it('updateStoryArgs changes the args of a story, per-key', () => {
+      const store = new StoryStore({ channel });
+      addStoryToStore(store, 'a', '1', () => 0);
+      expect(store.getRawStory('a', '1').args).toEqual({});
+
+      store.updateStoryArgs('a--1', { foo: 'bar' });
+      expect(store.getRawStory('a', '1').args).toEqual({ foo: 'bar' });
+
+      store.updateStoryArgs('a--1', { baz: 'bing' });
+      expect(store.getRawStory('a', '1').args).toEqual({ foo: 'bar', baz: 'bing' });
+    });
+
+    it('is passed to the story in the context', () => {
+      const storyFn = jest.fn();
+      const store = new StoryStore({ channel });
+      addStoryToStore(store, 'a', '1', storyFn, { passArgsFirst: false });
+      store.updateStoryArgs('a--1', { foo: 'bar' });
+      store.getRawStory('a', '1').storyFn();
+
+      expect(storyFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          args: { foo: 'bar' },
+        })
+      );
+    });
+
+    it('updateStoryArgs emits STORY_ARGS_UPDATED', () => {
+      const onArgsChangedChannel = jest.fn();
+      const testChannel = mockChannel();
+      testChannel.on(Events.STORY_ARGS_UPDATED, onArgsChangedChannel);
+
+      const store = new StoryStore({ channel: testChannel });
+      addStoryToStore(store, 'a', '1', () => 0);
+
+      store.updateStoryArgs('a--1', { foo: 'bar' });
+      expect(onArgsChangedChannel).toHaveBeenCalledWith('a--1', { foo: 'bar' });
+
+      store.updateStoryArgs('a--1', { baz: 'bing' });
+      expect(onArgsChangedChannel).toHaveBeenCalledWith('a--1', { foo: 'bar', baz: 'bing' });
+    });
+
+    it('should update if the UPDATE_STORY_ARGS event is received', () => {
+      const testChannel = mockChannel();
+      const store = new StoryStore({ channel: testChannel });
+      addStoryToStore(store, 'a', '1', () => 0);
+
+      testChannel.emit(Events.UPDATE_STORY_ARGS, 'a--1', { foo: 'bar' });
+
+      expect(store.getRawStory('a', '1').args).toEqual({ foo: 'bar' });
+    });
+
+    it('passes args as the first argument to the story if `parameters.passArgsFirst` is true', () => {
+      const store = new StoryStore({ channel });
+
+      store.addKindMetadata('a', {
+        parameters: {
+          argTypes: {
+            a: { defaultValue: 1 },
+          },
+        },
+        decorators: [],
+      });
+
+      const storyOne = jest.fn();
+      addStoryToStore(store, 'a', '1', storyOne, { passArgsFirst: false });
+
+      store.getRawStory('a', '1').storyFn();
+      expect(storyOne).toHaveBeenCalledWith(
+        expect.objectContaining({
+          args: { a: 1 },
+          parameters: expect.objectContaining({}),
+        })
+      );
+
+      const storyTwo = jest.fn();
+      addStoryToStore(store, 'a', '2', storyTwo, { passArgsFirst: true });
+      store.getRawStory('a', '2').storyFn();
+      expect(storyTwo).toHaveBeenCalledWith(
+        { a: 1 },
+        expect.objectContaining({
+          args: { a: 1 },
+          parameters: expect.objectContaining({}),
+        })
+      );
+    });
+  });
+
+  describe('globalArgs', () => {
+    it('is initialized to the value stored in parameters.globalArgs on the first story', () => {
+      const store = new StoryStore({ channel });
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgs: {
+            arg1: 'arg1',
+            arg2: 2,
+            arg3: { complex: { object: ['type'] } },
+          },
+        },
+      });
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({
+        arg1: 'arg1',
+        arg2: 2,
+        arg3: { complex: { object: ['type'] } },
+      });
+    });
+
+    it('is initialized to the default values stored in parameters.globalArgsTypes on the first story', () => {
+      const store = new StoryStore({ channel });
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgs: {
+            arg1: 'arg1',
+            arg2: 2,
+          },
+          globalArgTypes: {
+            arg2: { defaultValue: 'arg2' },
+            arg3: { defaultValue: { complex: { object: ['type'] } } },
+          },
+        },
+      });
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({
+        arg1: 'arg1',
+        arg2: 2,
+        arg3: { complex: { object: ['type'] } },
+      });
+    });
+
+    it('on HMR it sensibly re-initializes with memory', () => {
+      const store = new StoryStore({ channel });
+      addons.setChannel(channel);
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgs: {
+            arg1: 'arg1',
+            arg2: 2,
+            arg3: { complex: { object: ['type'] } },
+          },
+        },
+      });
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
+
+      // HMR
+      store.startConfiguring();
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgs: {
+            arg2: 2,
+            // Although we have changed the default there is no way to tell that the user didn't change
+            // it themselves
+            arg3: { complex: { object: ['changed'] } },
+            arg4: 'new',
+          },
+        },
+      });
+      store.finishConfiguring();
+
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({
+        // You cannot remove a global arg in HMR currently
+        arg1: 'arg1',
+        arg2: 2,
+        arg3: { complex: { object: ['type'] } },
+        arg4: 'new',
+      });
+    });
+
+    it('updateGlobalArgs changes the global args', () => {
+      const store = new StoryStore({ channel });
+      addStoryToStore(store, 'a', '1', () => 0);
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({});
+
+      store.updateGlobalArgs({ foo: 'bar' });
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({ foo: 'bar' });
+
+      store.updateGlobalArgs({ baz: 'bing' });
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({ foo: 'bar', baz: 'bing' });
+    });
+
+    it('is passed to the story in the context', () => {
+      const storyFn = jest.fn();
+      const store = new StoryStore({ channel });
+
+      store.updateGlobalArgs({ foo: 'bar' });
+      addStoryToStore(store, 'a', '1', storyFn, { passArgsFirst: false });
+      store.getRawStory('a', '1').storyFn();
+
+      expect(storyFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          globalArgs: { foo: 'bar' },
+        })
+      );
+
+      store.updateGlobalArgs({ baz: 'bing' });
+      store.getRawStory('a', '1').storyFn();
+
+      expect(storyFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          globalArgs: { foo: 'bar', baz: 'bing' },
+        })
+      );
+    });
+
+    it('updateGlobalArgs emits GLOBAL_ARGS_UPDATED', () => {
+      const onGlobalArgsChangedChannel = jest.fn();
+      const testChannel = mockChannel();
+      testChannel.on(Events.GLOBAL_ARGS_UPDATED, onGlobalArgsChangedChannel);
+
+      const store = new StoryStore({ channel: testChannel });
+      addStoryToStore(store, 'a', '1', () => 0);
+
+      store.updateGlobalArgs({ foo: 'bar' });
+      expect(onGlobalArgsChangedChannel).toHaveBeenCalledWith({ foo: 'bar' });
+
+      store.updateGlobalArgs({ baz: 'bing' });
+      expect(onGlobalArgsChangedChannel).toHaveBeenCalledWith({ foo: 'bar', baz: 'bing' });
+    });
+
+    it('should update if the UPDATE_GLOBAL_ARGS event is received', () => {
+      const testChannel = mockChannel();
+      const store = new StoryStore({ channel: testChannel });
+      addStoryToStore(store, 'a', '1', () => 0);
+
+      testChannel.emit(Events.UPDATE_GLOBAL_ARGS, { foo: 'bar' });
+
+      expect(store.getRawStory('a', '1').globalArgs).toEqual({ foo: 'bar' });
+    });
+
+    it('DOES NOT pass globalArgs as the first argument to the story if `parameters.passArgsFirst` is true', () => {
+      const store = new StoryStore({ channel });
+
+      const storyOne = jest.fn();
+      addStoryToStore(store, 'a', '1', storyOne, { passArgsFirst: false });
+
+      store.updateGlobalArgs({ foo: 'bar' });
+
+      store.getRawStory('a', '1').storyFn();
+      expect(storyOne).toHaveBeenCalledWith(
+        expect.objectContaining({
+          globalArgs: { foo: 'bar' },
+        })
+      );
+
+      const storyTwo = jest.fn();
+      addStoryToStore(store, 'a', '2', storyTwo, { passArgsFirst: true });
+      store.getRawStory('a', '2').storyFn();
+      expect(storyTwo).toHaveBeenCalledWith(
+        {},
+        expect.objectContaining({
+          globalArgs: { foo: 'bar' },
+        })
+      );
+    });
+  });
+
+  describe('argTypesEnhancer', () => {
+    it('allows you to alter argTypes when stories are added', () => {
+      const store = new StoryStore({ channel });
+
+      const enhancer = jest.fn((context) => ({ ...context.parameters.argTypes, c: 'd' }));
+      store.addArgTypesEnhancer(enhancer);
+
+      addStoryToStore(store, 'a', '1', () => 0, { argTypes: { a: 'b' } });
+
+      expect(enhancer).toHaveBeenCalledWith(
+        expect.objectContaining({ parameters: { argTypes: { a: 'b' } } })
+      );
+      expect(store.getRawStory('a', '1').parameters.argTypes).toEqual({ a: 'b', c: 'd' });
+    });
+
+    it('recursively passes argTypes to successive enhancers', () => {
+      const store = new StoryStore({ channel });
+
+      const firstEnhancer = jest.fn((context) => ({ ...context.parameters.argTypes, c: 'd' }));
+      store.addArgTypesEnhancer(firstEnhancer);
+      const secondEnhancer = jest.fn((context) => ({ ...context.parameters.argTypes, e: 'f' }));
+      store.addArgTypesEnhancer(secondEnhancer);
+
+      addStoryToStore(store, 'a', '1', () => 0, { argTypes: { a: 'b' } });
+
+      expect(firstEnhancer).toHaveBeenCalledWith(
+        expect.objectContaining({ parameters: { argTypes: { a: 'b' } } })
+      );
+      expect(secondEnhancer).toHaveBeenCalledWith(
+        expect.objectContaining({ parameters: { argTypes: { a: 'b', c: 'd' } } })
+      );
+      expect(store.getRawStory('a', '1').parameters.argTypes).toEqual({ a: 'b', c: 'd', e: 'f' });
+    });
+
+    it('does not merge argType enhancer results', () => {
+      const store = new StoryStore({ channel });
+
+      const enhancer = jest.fn().mockReturnValue({ c: 'd' });
+      store.addArgTypesEnhancer(enhancer);
+
+      addStoryToStore(store, 'a', '1', () => 0, { argTypes: { a: 'b' } });
+
+      expect(enhancer).toHaveBeenCalledWith(
+        expect.objectContaining({ parameters: { argTypes: { a: 'b' } } })
+      );
+      expect(store.getRawStory('a', '1').parameters.argTypes).toEqual({ c: 'd' });
+    });
+
+    it('allows you to alter argTypes when stories are re-added', () => {
+      const store = new StoryStore({ channel });
+      addons.setChannel(channel);
+
+      const enhancer = jest.fn((context) => ({ ...context.parameters.argTypes, c: 'd' }));
+      store.addArgTypesEnhancer(enhancer);
+
+      addStoryToStore(store, 'a', '1', () => 0, { argTypes: { a: 'b' } });
+
+      enhancer.mockClear();
+      store.removeStoryKind('a');
+
+      addStoryToStore(store, 'a', '1', () => 0, { argTypes: { e: 'f' } });
+      expect(enhancer).toHaveBeenCalledWith(
+        expect.objectContaining({ parameters: { argTypes: { e: 'f' } } })
+      );
+      expect(store.getRawStory('a', '1').parameters.argTypes).toEqual({ e: 'f', c: 'd' });
+    });
+  });
+
   describe('storySort', () => {
     it('sorts stories using given function', () => {
-      const parameters = {
-        options: {
-          // Test function does alphabetical ordering.
-          storySort: (a: any, b: any): number =>
-            a[1].kind === b[1].kind
-              ? 0
-              : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
-        },
-      };
       const store = new StoryStore({ channel });
-      store.addStory(...make('a/a', '1', () => 0, parameters));
-      store.addStory(...make('a/a', '2', () => 0, parameters));
-      store.addStory(...make('a/b', '1', () => 0, parameters));
-      store.addStory(...make('b/b1', '1', () => 0, parameters));
-      store.addStory(...make('b/b10', '1', () => 0, parameters));
-      store.addStory(...make('b/b9', '1', () => 0, parameters));
-      store.addStory(...make('c', '1', () => 0, parameters));
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          options: {
+            // Test function does reverse alphabetical ordering.
+            storySort: (a: any, b: any): number =>
+              a[1].kind === b[1].kind
+                ? 0
+                : -1 * a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+          },
+        },
+      });
+      addStoryToStore(store, 'a/a', '1', () => 0);
+      addStoryToStore(store, 'a/a', '2', () => 0);
+      addStoryToStore(store, 'a/b', '1', () => 0);
+      addStoryToStore(store, 'b/b1', '1', () => 0);
+      addStoryToStore(store, 'b/b10', '1', () => 0);
+      addStoryToStore(store, 'b/b9', '1', () => 0);
+      addStoryToStore(store, 'c', '1', () => 0);
 
       const extracted = store.extract();
 
       expect(Object.keys(extracted)).toEqual([
+        'c--1',
+        'b-b10--1',
+        'b-b9--1',
+        'b-b1--1',
+        'a-b--1',
         'a-a--1',
         'a-a--2',
+      ]);
+    });
+
+    it('sorts stories alphabetically', () => {
+      const store = new StoryStore({ channel });
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          options: {
+            storySort: {
+              method: 'alphabetical',
+            },
+          },
+        },
+      });
+      addStoryToStore(store, 'a/b', '1', () => 0);
+      addStoryToStore(store, 'a/a', '2', () => 0);
+      addStoryToStore(store, 'a/a', '1', () => 0);
+      addStoryToStore(store, 'c', '1', () => 0);
+      addStoryToStore(store, 'b/b10', '1', () => 0);
+      addStoryToStore(store, 'b/b9', '1', () => 0);
+      addStoryToStore(store, 'b/b1', '1', () => 0);
+
+      const extracted = store.extract();
+
+      expect(Object.keys(extracted)).toEqual([
+        'a-a--2',
+        'a-a--1',
         'a-b--1',
         'b-b1--1',
         'b-b9--1',
@@ -85,191 +536,342 @@ describe('preview.story_store', () => {
         'c--1',
       ]);
     });
-  });
 
-  describe('emitting behaviour', () => {
-    it('is syncronously emits STORY_RENDER if the channel is defined', async () => {
-      const onChannelRender = jest.fn();
-      const testChannel = createChannel({ page: 'preview' });
-      testChannel.on(Events.STORY_RENDER, onChannelRender);
+    it('sorts stories in specified order or alphabetically', () => {
+      const store = new StoryStore({ channel });
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          options: {
+            storySort: {
+              method: 'alphabetical',
+              order: ['b', ['bc', 'ba', 'bb'], 'a', 'c'],
+            },
+          },
+        },
+      });
+      addStoryToStore(store, 'a/b', '1', () => 0);
+      addStoryToStore(store, 'a', '1', () => 0);
+      addStoryToStore(store, 'c', '1', () => 0);
+      addStoryToStore(store, 'b/bd', '1', () => 0);
+      addStoryToStore(store, 'b/bb', '1', () => 0);
+      addStoryToStore(store, 'b/ba', '1', () => 0);
+      addStoryToStore(store, 'b/bc', '1', () => 0);
+      addStoryToStore(store, 'b', '1', () => 0);
 
-      const onStoreRender = jest.fn();
-      const store = new StoryStore({ channel: testChannel });
-      store.on(Events.STORY_RENDER, onStoreRender);
+      const extracted = store.extract();
+
+      expect(Object.keys(extracted)).toEqual([
+        'b--1',
+        'b-bc--1',
+        'b-ba--1',
+        'b-bb--1',
+        'b-bd--1',
+        'a--1',
+        'a-b--1',
+        'c--1',
+      ]);
+    });
+
+    it('sorts stories in specified order or by configure order', () => {
+      const store = new StoryStore({ channel });
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          options: {
+            storySort: {
+              method: 'configure',
+              order: ['b', 'a', 'c'],
+            },
+          },
+        },
+      });
+      addStoryToStore(store, 'a/b', '1', () => 0);
+      addStoryToStore(store, 'a', '1', () => 0);
+      addStoryToStore(store, 'c', '1', () => 0);
+      addStoryToStore(store, 'b/bd', '1', () => 0);
+      addStoryToStore(store, 'b/bb', '1', () => 0);
+      addStoryToStore(store, 'b/ba', '1', () => 0);
+      addStoryToStore(store, 'b/bc', '1', () => 0);
+      addStoryToStore(store, 'b', '1', () => 0);
+
+      const extracted = store.extract();
 
-      store.setSelection({ storyId: 'storyId', viewMode: 'viewMode' }, undefined);
-      expect(onChannelRender).toHaveBeenCalled();
-      expect(onStoreRender).not.toHaveBeenCalled();
+      expect(Object.keys(extracted)).toEqual([
+        'b--1',
+        'b-bd--1',
+        'b-bb--1',
+        'b-ba--1',
+        'b-bc--1',
+        'a--1',
+        'a-b--1',
+        'c--1',
+      ]);
+    });
+  });
+
+  describe('configuration', () => {
+    it('does not allow addStory if not configuring, unless allowUsafe=true', () => {
+      const store = new StoryStore({ channel });
+      store.finishConfiguring();
 
-      onChannelRender.mockClear();
-      await new Promise(r => setTimeout(r, 10));
-      expect(onChannelRender).not.toHaveBeenCalled();
-      expect(onStoreRender).toHaveBeenCalled();
+      expect(() => addStoryToStore(store, 'a', '1', () => 0)).toThrow(
+        'Cannot add a story when not configuring'
+      );
+
+      expect(() =>
+        store.addStory(
+          {
+            kind: 'a',
+            name: '1',
+            storyFn: () => 0,
+            parameters: {},
+            id: 'a--1',
+          },
+          {
+            applyDecorators: defaultDecorateStory,
+            allowUnsafe: true,
+          }
+        )
+      ).not.toThrow();
     });
 
-    it('is asychronously emits STORY_RENDER if the channel is not yet defined', async () => {
-      const onChannelRender = jest.fn();
-      const testChannel = createChannel({ page: 'preview' });
-      testChannel.on(Events.STORY_RENDER, onChannelRender);
+    it('does not allow remove if not configuring, unless allowUsafe=true', () => {
+      const store = new StoryStore({ channel });
+      addons.setChannel(channel);
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
 
-      const onStoreRender = jest.fn();
-      const store = new StoryStore({ channel: undefined });
-      store.on(Events.STORY_RENDER, onStoreRender);
+      expect(() => store.remove('a--1')).toThrow('Cannot remove a story when not configuring');
+      expect(() => store.remove('a--1', { allowUnsafe: true })).not.toThrow();
+    });
 
-      store.setSelection({ storyId: 'storyId', viewMode: 'viewMode' }, undefined);
-      expect(onChannelRender).not.toHaveBeenCalled();
-      expect(onStoreRender).not.toHaveBeenCalled();
+    it('does not allow removeStoryKind if not configuring, unless allowUsafe=true', () => {
+      const store = new StoryStore({ channel });
+      addons.setChannel(channel);
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
 
-      store.setChannel(testChannel);
-      await new Promise(r => setTimeout(r, 10));
-      expect(onChannelRender).toHaveBeenCalled();
-      expect(onStoreRender).toHaveBeenCalled();
+      expect(() => store.removeStoryKind('a')).toThrow('Cannot remove a kind when not configuring');
+      expect(() => store.removeStoryKind('a', { allowUnsafe: true })).not.toThrow();
     });
-  });
 
-  describe('dumpStoryBook', () => {
-    it('should return nothing when empty', () => {
+    it('waits for configuration to be over before emitting SET_STORIES', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       const store = new StoryStore({ channel });
-      expect(store.dumpStoryBook()).toEqual([]);
+
+      addStoryToStore(store, 'a', '1', () => 0);
+      expect(onSetStories).not.toHaveBeenCalled();
+
+      store.finishConfiguring();
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: {},
+        globalParameters: {},
+        kindParameters: { a: {} },
+        stories: {
+          'a--1': expect.objectContaining({
+            id: 'a--1',
+          }),
+        },
+      });
     });
 
-    it('should return storybook with stories', () => {
+    it('correctly emits globalArgs with SET_STORIES', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       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.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgTypes: {
+            arg1: { defaultValue: 'arg1' },
+          },
+        },
+      });
 
-      expect(store.dumpStoryBook()).toEqual([
-        {
-          kind: 'kind-1',
-          stories: ['story-1.1', 'story-1.2'],
+      addStoryToStore(store, 'a', '1', () => 0);
+      expect(onSetStories).not.toHaveBeenCalled();
+
+      store.finishConfiguring();
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: { arg1: 'arg1' },
+        globalParameters: {
+          // NOTE: Currently globalArg[Types] are emitted as parameters but this may not remain
+          globalArgTypes: {
+            arg1: { defaultValue: 'arg1' },
+          },
         },
-        {
-          kind: 'kind-2',
-          stories: ['story-2.1', 'story-2.2'],
+        kindParameters: { a: {} },
+        stories: {
+          'a--1': expect.objectContaining({
+            id: 'a--1',
+          }),
         },
-      ]);
+      });
     });
-  });
 
-  describe('getStoryFileName', () => {
-    it('should return the filename of the first story passed for the kind', () => {
+    it('emits an empty SET_STORIES if no stories were added during configuration', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       const store = new StoryStore({ channel });
-      store.addStory(...make('kind-1', 'story-1.1', () => 0, { fileName: 'foo.js' }));
-      store.addStory(...make('kind-1', 'story-1.2', () => 0, { fileName: 'foo-2.js' }));
-      store.addStory(...make('kind-2', 'story-2.1', () => 0, { fileName: 'bar.js' }));
 
-      expect(store.getStoryFileName('kind-1')).toBe('foo.js');
-      expect(store.getStoryFileName('kind-2')).toBe('bar.js');
+      store.finishConfiguring();
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: {},
+        globalParameters: {},
+        kindParameters: {},
+        stories: {},
+      });
     });
-  });
 
-  describe('removeStoryKind', () => {
-    it('should not error even if there is no kind', () => {
+    it('allows configuration as second time (HMR)', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       const store = new StoryStore({ channel });
-      store.removeStoryKind('kind');
+      store.finishConfiguring();
+
+      onSetStories.mockClear();
+      store.startConfiguring();
+      addStoryToStore(store, 'a', '1', () => 0);
+      store.finishConfiguring();
+
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: {},
+        globalParameters: {},
+        kindParameters: { a: {} },
+        stories: {
+          'a--1': expect.objectContaining({
+            id: 'a--1',
+          }),
+        },
+      });
     });
-    it('should remove the kind in both modern and legacy APIs', () => {
+  });
+
+  describe('HMR behaviour', () => {
+    it('emits the right things after removing a story', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       const store = new StoryStore({ channel });
+
+      // For hooks
       addons.setChannel(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');
+      store.startConfiguring();
+      addStoryToStore(store, 'kind-1', 'story-1.1', () => 0);
+      addStoryToStore(store, 'kind-1', 'story-1.2', () => 0);
+      store.finishConfiguring();
 
-      // _legacydata
-      expect(store.hasStory('kind-1', 'story-1.1')).toBeFalsy();
-      expect(store.hasStory('kind-2', 'story-2.1')).toBeTruthy();
+      onSetStories.mockClear();
+      store.startConfiguring();
+      store.remove(toId('kind-1', 'story-1.1'));
+      store.finishConfiguring();
+
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: {},
+        globalParameters: {},
+        kindParameters: { 'kind-1': {} },
+        stories: {
+          'kind-1--story-1-2': expect.objectContaining({
+            id: 'kind-1--story-1-2',
+          }),
+        },
+      });
 
-      // _data
       expect(store.fromId(toId('kind-1', 'story-1.1'))).toBeFalsy();
-      expect(store.fromId(toId('kind-2', 'story-2.1'))).toBeTruthy();
+      expect(store.fromId(toId('kind-1', 'story-1.2'))).toBeTruthy();
     });
-  });
 
-  describe('remove', () => {
-    it('should remove the kind in both modern and legacy APIs', () => {
+    it('emits the right things after removing a kind', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
       const store = new StoryStore({ channel });
+
+      // For hooks
       addons.setChannel(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'));
+      store.startConfiguring();
+      addStoryToStore(store, 'kind-1', 'story-1.1', () => 0);
+      addStoryToStore(store, 'kind-1', 'story-1.2', () => 0);
+      addStoryToStore(store, 'kind-2', 'story-2.1', () => 0);
+      addStoryToStore(store, 'kind-2', 'story-2.2', () => 0);
+      store.finishConfiguring();
 
-      // _legacydata
-      expect(store.hasStory('kind-1', 'story-1.1')).toBeFalsy();
-      expect(store.hasStory('kind-1', 'story-1.2')).toBeTruthy();
+      onSetStories.mockClear();
+      store.startConfiguring();
+      store.removeStoryKind('kind-1');
+      store.finishConfiguring();
+
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: {},
+        globalParameters: {},
+        kindParameters: { 'kind-1': {}, 'kind-2': {} },
+        stories: {
+          'kind-2--story-2-1': expect.objectContaining({
+            id: 'kind-2--story-2-1',
+          }),
+          'kind-2--story-2-2': expect.objectContaining({
+            id: 'kind-2--story-2-2',
+          }),
+        },
+      });
 
-      // _data
       expect(store.fromId(toId('kind-1', 'story-1.1'))).toBeFalsy();
-      expect(store.fromId(toId('kind-1', 'story-1.2'))).toBeTruthy();
+      expect(store.fromId(toId('kind-2', 'story-2.1'))).toBeTruthy();
+    });
+
+    // eslint-disable-next-line jest/expect-expect
+    it('should not error even if you remove a kind that does not exist', () => {
+      const store = new StoryStore({ channel });
+      store.removeStoryKind('kind');
     });
   });
 
-  describe('getStoryAndParameters', () => {
-    it('should return parameters that we passed in', () => {
+  describe('RENDER_CURRENT_STORY', () => {
+    it('is NOT emitted when setError is called during configuration', () => {
+      const onRenderCurrentStory = jest.fn();
+      channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
       const store = new StoryStore({ channel });
-      const story = jest.fn();
-      const parameters = {
-        fileName: 'foo.js',
-        parameter: 'value',
-      };
-      store.addStory(...make('kind', 'name', story, parameters));
 
-      expect(store.getStoryAndParameters('kind', 'name').parameters).toEqual(parameters);
+      store.setError(new Error('Something is bad!') as ErrorLike);
+      expect(onRenderCurrentStory).not.toHaveBeenCalled();
     });
-  });
 
-  describe('getStoryWithContext', () => {
-    it('should return a function that calls the story with the context', () => {
+    it('is NOT emitted when setSelection is called during configuration', () => {
+      const onRenderCurrentStory = jest.fn();
+      channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
       const store = new StoryStore({ channel });
-      const storyFn = jest.fn();
-      const parameters = {
-        fileName: 'foo.js',
-        parameter: 'value',
-      };
-      store.addStory(...make('kind', 'name', storyFn, parameters));
-
-      const storyWithContext = store.getStoryWithContext('kind', 'name');
-      storyWithContext();
-      const { hooks } = store.fromId(toId('kind', 'name'));
-      expect(storyFn).toHaveBeenCalledWith({
-        id: 'kind--name',
-        name: 'name',
-        kind: 'kind',
-        story: 'name',
-        parameters,
-        hooks,
-      });
+
+      store.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      expect(onRenderCurrentStory).not.toHaveBeenCalled();
     });
-  });
 
-  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', () => {
+    it('is emitted when configuration ends', () => {
+      const onRenderCurrentStory = jest.fn();
+      channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
       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()) as any[];
-      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');
+      store.finishConfiguring();
+      expect(onRenderCurrentStory).toHaveBeenCalled();
+    });
+
+    it('is emitted when setSelection is called outside of configuration', () => {
+      const onRenderCurrentStory = jest.fn();
+      channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
+      const store = new StoryStore({ channel });
+      store.finishConfiguring();
+
+      onRenderCurrentStory.mockClear();
+      store.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      expect(onRenderCurrentStory).toHaveBeenCalled();
     });
   });
 });
diff --git a/lib/client-api/src/story_store.ts b/lib/client-api/src/story_store.ts
index d2ba13df81fb..0ed018ccdd63 100644
--- a/lib/client-api/src/story_store.ts
+++ b/lib/client-api/src/story_store.ts
@@ -1,60 +1,49 @@
 /* eslint no-underscore-dangle: 0 */
-import EventEmitter from 'eventemitter3';
 import memoize from 'memoizerific';
-import debounce from 'lodash/debounce';
 import dedent from 'ts-dedent';
 import stable from 'stable';
+import mapValues from 'lodash/mapValues';
 
 import { Channel } from '@storybook/channels';
 import Events from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
-import { StoryFn, Parameters } from '@storybook/addons';
+import {
+  StoryId,
+  ViewMode,
+  Comparator,
+  Parameters,
+  Args,
+  LegacyStoryFn,
+  ArgsStoryFn,
+  StoryContext,
+  StoryKind,
+} from '@storybook/addons';
 import {
   DecoratorFunction,
-  LegacyData,
-  LegacyItem,
+  StoryMetadata,
   StoreData,
   AddStoryArgs,
   StoreItem,
+  PublishedStoreItem,
   ErrorLike,
+  GetStorybookKind,
+  ArgTypesEnhancer,
 } from './types';
 import { HooksContext } from './hooks';
-
-// TODO: these are copies from components/nav/lib
-// refactor to DRY
-const toKey = (input: string) =>
-  input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
-
-let count = 0;
-
-const getId = (): number => {
-  count += 1;
-  return count;
-};
-
-const toExtracted = <T>(obj: T) =>
-  Object.entries(obj).reduce((acc, [key, value]) => {
-    if (typeof value === 'function') {
-      return acc;
-    }
-    if (key === 'hooks') {
-      return acc;
-    }
-    if (Array.isArray(value)) {
-      return Object.assign(acc, { [key]: value.slice().sort() });
-    }
-    return Object.assign(acc, { [key]: value });
-  }, {});
+import storySort from './storySort';
+import { combineParameters } from './parameters';
 
 interface Selection {
-  storyId: string;
-  viewMode: string;
+  storyId: StoryId;
+  viewMode: ViewMode;
 }
 
 interface StoryOptions {
   includeDocsOnly?: boolean;
 }
 
+type KindMetadata = StoryMetadata & { order: number };
+
 const isStoryDocsOnly = (parameters?: Parameters) => {
   return parameters && parameters.docsOnly;
 };
@@ -66,135 +55,220 @@ const includeStory = (story: StoreItem, options: StoryOptions = { includeDocsOnl
   return !isStoryDocsOnly(story.parameters);
 };
 
-export default class StoryStore extends EventEmitter {
+const checkGlobalArgs = (parameters: Parameters) => {
+  const { globalArgs, globalArgTypes } = parameters;
+  if (globalArgs || globalArgTypes) {
+    logger.error(
+      'Global args/argTypes can only be set globally',
+      JSON.stringify({
+        globalArgs,
+        globalArgTypes,
+      })
+    );
+  }
+};
+
+const checkStorySort = (parameters: Parameters) => {
+  const { options } = parameters;
+  if (options?.storySort) logger.error('The storySort option parameter can only be set globally');
+};
+
+interface AllowUnsafeOption {
+  allowUnsafe?: boolean;
+}
+
+const toExtracted = <T>(obj: T) =>
+  Object.entries(obj).reduce((acc, [key, value]) => {
+    if (typeof value === 'function') {
+      return acc;
+    }
+    if (key === 'hooks') {
+      return acc;
+    }
+    if (Array.isArray(value)) {
+      return Object.assign(acc, { [key]: value.slice().sort() });
+    }
+    return Object.assign(acc, { [key]: value });
+  }, {});
+
+export default class StoryStore {
   _error?: ErrorLike;
 
   _channel: Channel;
 
-  _data: StoreData;
+  _configuring: boolean;
+
+  _globalArgs: Args;
 
-  _legacyData?: LegacyData;
+  _globalMetadata: StoryMetadata;
 
-  _legacydata: LegacyData;
+  // Keyed on kind name
+  _kinds: Record<string, KindMetadata>;
 
-  _revision: number;
+  // Keyed on storyId
+  _stories: StoreData;
+
+  _argTypesEnhancers: ArgTypesEnhancer[];
 
   _selection: Selection;
 
   constructor(params: { channel: Channel }) {
-    super();
-
-    this._legacydata = {} as any;
-    this._data = {} as any;
-    this._revision = 0;
+    // Assume we are configuring until we hear otherwise
+    this._configuring = true;
+
+    this._globalArgs = {};
+    this._globalMetadata = { parameters: {}, decorators: [] };
+    this._kinds = {};
+    this._stories = {};
+    this._argTypesEnhancers = [];
     this._selection = {} as any;
-    this._channel = params.channel;
     this._error = undefined;
-  }
+    this._channel = params.channel;
 
-  setChannel = (channel: Channel) => {
-    this._channel = channel;
-  };
+    this.setupListeners();
+  }
 
-  // NEW apis
-  fromId = (id: string): StoreItem | null => {
-    try {
-      const data = this._data[id as string];
+  setupListeners() {
+    // Channel can be null in StoryShots
+    if (!this._channel) return;
 
-      if (!data || !data.getDecorated) {
-        return null;
-      }
+    this._channel.on(Events.SET_CURRENT_STORY, ({ storyId, viewMode }) =>
+      this.setSelection({ storyId, viewMode })
+    );
 
-      return data;
-    } catch (e) {
-      logger.warn('failed to get story:', this._data);
-      logger.error(e);
-      return null;
-    }
-  };
+    this._channel.on(Events.UPDATE_STORY_ARGS, (id: string, newArgs: Args) =>
+      this.updateStoryArgs(id, newArgs)
+    );
 
-  raw(options?: StoryOptions) {
-    return Object.values(this._data)
-      .filter(i => !!i.getDecorated)
-      .filter(i => includeStory(i, options))
-      .map(({ id }) => this.fromId(id));
+    this._channel.on(Events.UPDATE_GLOBAL_ARGS, (newGlobalArgs: Args) =>
+      this.updateGlobalArgs(newGlobalArgs)
+    );
   }
 
-  extract(options?: StoryOptions) {
-    const stories = Object.entries(this._data);
-    // determine if we should apply a sort to the stories or 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;
-        stable.inplace(stories, sortFn);
-      }
-    }
-    // removes function values from all stories so they are safe to transport over the channel
-    return stories.reduce(
-      (a, [k, v]) => (includeStory(v, options) ? Object.assign(a, { [k]: toExtracted(v) }) : a),
-      {}
-    );
+  startConfiguring() {
+    this._configuring = true;
   }
 
-  setSelection(data: Selection | undefined, error: ErrorLike): void {
-    this._selection =
-      data === undefined ? this._selection : { storyId: data.storyId, viewMode: data.viewMode };
-    this._error = error === undefined ? this._error : error;
+  finishConfiguring() {
+    this._configuring = false;
+
+    const { globalArgs: initialGlobalArgs, globalArgTypes } = this._globalMetadata.parameters;
+
+    const defaultGlobalArgs: Args = globalArgTypes
+      ? Object.entries(globalArgTypes as Record<string, { defaultValue: any }>).reduce(
+          (acc, [arg, { defaultValue }]) => {
+            if (defaultValue) acc[arg] = defaultValue;
+            return acc;
+          },
+          {} as Args
+        )
+      : {};
+
+    // To deal with HMR, we consider the previous value of global args, and:
+    //   1. Remove any keys that are not in the new parameter
+    //   2. Preference any keys that were already set
+    //   3. Use any new keys from the new parameter
+    this._globalArgs = Object.entries(this._globalArgs || {}).reduce(
+      (acc, [key, previousValue]) => {
+        if (acc[key]) acc[key] = previousValue;
 
-    // Try and emit the STORY_RENDER event synchronously, but if the channel is not ready (RN),
-    // we'll try again later.
-    let isStarted = false;
+        return acc;
+      },
+      { ...defaultGlobalArgs, ...initialGlobalArgs }
+    );
+
+    this.pushToManager();
     if (this._channel) {
-      this._channel.emit(Events.STORY_RENDER);
-      isStarted = true;
+      this._channel.emit(Events.RENDER_CURRENT_STORY);
     }
+  }
 
-    setTimeout(() => {
-      if (this._channel && !isStarted) {
-        this._channel.emit(Events.STORY_RENDER);
-      }
+  addGlobalMetadata({ parameters, decorators }: StoryMetadata) {
+    if (parameters) {
+      const { args, argTypes } = parameters;
+      if (args || argTypes)
+        logger.warn(
+          'Found args/argTypes in global parameters.',
+          JSON.stringify({ args, argTypes })
+        );
+    }
+    const globalParameters = this._globalMetadata.parameters;
 
-      // should be deprecated in future.
-      this.emit(Events.STORY_RENDER);
-    }, 1);
+    this._globalMetadata.parameters = combineParameters(globalParameters, parameters);
+
+    this._globalMetadata.decorators.push(...decorators);
   }
 
-  getSelection = (): Selection => this._selection;
+  clearGlobalDecorators() {
+    this._globalMetadata.decorators = [];
+  }
 
-  getError = (): ErrorLike | undefined => this._error;
+  ensureKind(kind: string) {
+    if (!this._kinds[kind]) {
+      this._kinds[kind] = {
+        order: Object.keys(this._kinds).length,
+        parameters: {},
+        decorators: [],
+      };
+    }
+  }
 
-  remove = (id: string): void => {
-    const { _data } = this;
-    const story = _data[id];
-    delete _data[id];
-
-    if (story) {
-      story.hooks.clean();
-      const { kind, name } = story;
-      const kindData = this._legacydata[toKey(kind)];
-      if (kindData) {
-        delete kindData.stories[toKey(name)];
-      }
+  addKindMetadata(kind: string, { parameters, decorators }: StoryMetadata) {
+    this.ensureKind(kind);
+    if (parameters) {
+      checkGlobalArgs(parameters);
+      checkStorySort(parameters);
     }
-  };
+    this._kinds[kind].parameters = combineParameters(this._kinds[kind].parameters, parameters);
+
+    this._kinds[kind].decorators.push(...decorators);
+  }
+
+  addArgTypesEnhancer(argTypesEnhancer: ArgTypesEnhancer) {
+    if (Object.keys(this._stories).length > 0)
+      throw new Error('Cannot add a parameter enhancer to the store after a story has been added.');
+
+    this._argTypesEnhancers.push(argTypesEnhancer);
+  }
+
+  // Combine the global, kind & story parameters of a story
+  combineStoryParameters(parameters: Parameters, kind: StoryKind) {
+    return combineParameters(
+      this._globalMetadata.parameters,
+      this._kinds[kind].parameters,
+      parameters
+    );
+  }
 
   addStory(
-    { id, kind, name, storyFn: original, parameters = {} }: AddStoryArgs,
     {
-      getDecorators,
+      id,
+      kind,
+      name,
+      storyFn: original,
+      parameters: storyParameters = {},
+      decorators: storyDecorators = [],
+    }: AddStoryArgs,
+    {
       applyDecorators,
+      allowUnsafe = false,
     }: {
-      getDecorators: () => DecoratorFunction[];
-      applyDecorators: (fn: StoryFn, decorators: DecoratorFunction[]) => any;
-    }
+      applyDecorators: (fn: LegacyStoryFn, decorators: DecoratorFunction[]) => any;
+    } & AllowUnsafeOption
   ) {
-    const { _data } = this;
+    if (!this._configuring && !allowUnsafe)
+      throw new Error(
+        'Cannot add a story when not configuring, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration'
+      );
+
+    if (storyParameters) {
+      checkGlobalArgs(storyParameters);
+      checkStorySort(storyParameters);
+    }
 
-    if (_data[id]) {
+    const { _stories } = this;
+
+    if (_stories[id]) {
       logger.warn(dedent`
         Story with id ${id} already exists in the store!
 
@@ -213,22 +287,68 @@ export default class StoryStore extends EventEmitter {
     // immutable original storyFn
     const getOriginal = () => original;
 
+    this.ensureKind(kind);
+    const kindMetadata: KindMetadata = this._kinds[kind];
+    const decorators = [
+      ...storyDecorators,
+      ...kindMetadata.decorators,
+      ...this._globalMetadata.decorators,
+    ];
+
+    const finalStoryFn = (context: StoryContext) => {
+      const { passArgsFirst } = context.parameters;
+      return passArgsFirst || typeof passArgsFirst === 'undefined'
+        ? (original as ArgsStoryFn)(context.args, context)
+        : original(context);
+    };
+
     // lazily decorate the story when it's loaded
-    const getDecorated: () => StoryFn = memoize(1)(() =>
-      applyDecorators(getOriginal(), getDecorators())
+    const getDecorated: () => LegacyStoryFn = memoize(1)(() =>
+      applyDecorators(finalStoryFn, decorators)
     );
 
     const hooks = new HooksContext();
 
-    const storyFn: StoryFn = p =>
+    // We need the combined parameters now in order to calculate argTypes, but we won't keep them
+    const combinedParameters = this.combineStoryParameters(storyParameters, kind);
+
+    const { argTypes = {} } = this._argTypesEnhancers.reduce(
+      (accumlatedParameters: Parameters, enhancer) => ({
+        ...accumlatedParameters,
+        argTypes: enhancer({
+          ...identification,
+          storyFn: original,
+          parameters: accumlatedParameters,
+          args: {},
+          globalArgs: {},
+        }),
+      }),
+      combinedParameters
+    );
+
+    const storyParametersWithArgTypes = { ...storyParameters, argTypes };
+
+    const storyFn: LegacyStoryFn = (runtimeContext: StoryContext) =>
       getDecorated()({
         ...identification,
-        ...p,
+        ...runtimeContext,
+        // Calculate "combined" parameters at render time (NOTE: for perf we could just use combinedParameters from above?)
+        parameters: this.combineStoryParameters(storyParametersWithArgTypes, kind),
         hooks,
-        parameters: { ...parameters, ...(p && p.parameters) },
+        args: _stories[id].args,
+        globalArgs: this._globalArgs,
       });
 
-    _data[id] = {
+    // Pull out parameters.args.$ || .argTypes.$.defaultValue into initialArgs
+    const initialArgs: Args = combinedParameters.args;
+    const defaultArgs: Args = Object.entries(
+      argTypes as Record<string, { defaultValue: any }>
+    ).reduce((acc, [arg, { defaultValue }]) => {
+      if (defaultValue) acc[arg] = defaultValue;
+      return acc;
+    }, {} as Args);
+
+    _stories[id] = {
       ...identification,
 
       hooks,
@@ -236,182 +356,213 @@ export default class StoryStore extends EventEmitter {
       getOriginal,
       storyFn,
 
-      parameters,
+      parameters: { ...storyParameters, argTypes },
+      args: { ...defaultArgs, ...initialArgs },
     };
+  }
 
-    // LEGACY DATA
-    if (!isStoryDocsOnly(parameters)) {
-      this.addLegacyStory({ kind, name, storyFn, parameters });
-    }
+  remove = (id: string, { allowUnsafe = false }: AllowUnsafeOption = {}): void => {
+    if (!this._configuring && !allowUnsafe)
+      throw new Error(
+        'Cannot remove a story when not configuring, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration'
+      );
 
-    // LET'S SEND IT TO THE MANAGER
-    this.pushToManager();
-  }
+    const { _stories } = this;
+    const story = _stories[id];
+    delete _stories[id];
 
-  pushToManager = debounce(() => {
-    if (this._channel) {
-      const stories = this.extract({ includeDocsOnly: true });
+    if (story) story.hooks.clean();
+  };
 
-      // send to the parent frame.
-      this._channel.emit(Events.SET_STORIES, { stories });
-    }
-  }, 0);
+  removeStoryKind(kind: string, { allowUnsafe = false }: AllowUnsafeOption = {}) {
+    if (!this._configuring && !allowUnsafe)
+      throw new Error(
+        'Cannot remove a kind when not configuring, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration'
+      );
 
-  // OLD apis
-  getRevision() {
-    return this._revision;
-  }
+    if (!this._kinds[kind]) return;
 
-  incrementRevision() {
-    this._revision += 1;
-  }
+    this._kinds[kind].parameters = {};
+    this._kinds[kind].decorators = [];
 
-  addLegacyStory({
-    kind,
-    name,
-    storyFn,
-    parameters,
-  }: {
-    kind: string;
-    name: string;
-    storyFn: StoryFn;
-    parameters: Parameters;
-  }) {
-    const k = toKey(kind);
-    if (!this._legacydata[k as string]) {
-      this._legacydata[k as string] = {
-        kind,
-        fileName: parameters.fileName,
-        index: getId(),
-        stories: {},
-      };
-    }
+    this.cleanHooksForKind(kind);
+    this._stories = Object.entries(this._stories).reduce((acc: StoreData, [id, story]) => {
+      if (story.kind !== kind) acc[id] = story;
 
-    this._legacydata[k as string].stories[toKey(name)] = {
-      name,
-      // kind,
-      index: getId(),
-      story: storyFn,
-      parameters,
-    };
+      return acc;
+    }, {});
   }
 
-  getStoryKinds() {
-    return Object.values(this._legacydata)
-      .filter((kind: LegacyItem) => Object.keys(kind.stories).length > 0)
-      .sort((info1: LegacyItem, info2: LegacyItem) => info1.index - info2.index)
-      .map((info: LegacyItem) => info.kind);
+  updateGlobalArgs(newGlobalArgs: Args) {
+    this._globalArgs = { ...this._globalArgs, ...newGlobalArgs };
+    this._channel.emit(Events.GLOBAL_ARGS_UPDATED, this._globalArgs);
   }
 
-  getStories(kind: string) {
-    const key = toKey(kind);
-
-    if (!this._legacydata[key as string]) {
-      return [];
-    }
+  updateStoryArgs(id: string, newArgs: Args) {
+    if (!this._stories[id]) throw new Error(`No story for id ${id}`);
+    const { args } = this._stories[id];
+    this._stories[id].args = { ...args, ...newArgs };
 
-    return Object.keys(this._legacydata[key as string].stories)
-      .map(name => this._legacydata[key as string].stories[name])
-      .sort((info1, info2) => info1.index - info2.index)
-      .map(info => info.name);
+    this._channel.emit(Events.STORY_ARGS_UPDATED, id, this._stories[id].args);
   }
 
-  getStoriesForKind(kind: string) {
-    return this.raw().filter(story => story.kind === kind);
-  }
+  fromId = (id: string): PublishedStoreItem | null => {
+    try {
+      const data = this._stories[id as string];
 
-  getStoryFileName(kind: string) {
-    const key = toKey(kind);
-    const storiesKind = this._legacydata[key as string];
-    if (!storiesKind) {
+      if (!data || !data.getDecorated) {
+        return null;
+      }
+
+      return this.mergeAdditionalDataToStory(data);
+    } catch (e) {
+      logger.warn('failed to get story:', this._stories);
+      logger.error(e);
       return null;
     }
+  };
 
-    return storiesKind.fileName;
+  raw(options?: StoryOptions): PublishedStoreItem[] {
+    return Object.values(this._stories)
+      .filter((i) => !!i.getDecorated)
+      .filter((i) => includeStory(i, options))
+      .map((i) => this.mergeAdditionalDataToStory(i));
   }
 
-  getStoryAndParameters(kind: string, name: string) {
-    if (!kind || !name) {
-      return null;
-    }
+  extract(options: StoryOptions & { normalizeParameters?: boolean } = {}) {
+    const stories = Object.entries(this._stories);
 
-    const storiesKind = this._legacydata[toKey(kind) as string];
-    if (!storiesKind) {
-      return null;
+    const storySortParameter = this._globalMetadata.parameters?.options?.storySort;
+    if (storySortParameter) {
+      let sortFn: Comparator<any>;
+      if (typeof storySortParameter === 'function') {
+        sortFn = storySortParameter;
+      } else {
+        sortFn = storySort(storySortParameter);
+      }
+      stable.inplace(stories, sortFn);
+    } else {
+      // NOTE: when kinds are HMR'ed they get temporarily removed from the `_stories` array
+      // and thus lose order. However `_kindOrder` preservers the original load order
+      stable.inplace(
+        stories,
+        (s1, s2) => this._kinds[s1[1].kind].order - this._kinds[s2[1].kind].order
+      );
     }
 
-    const storyInfo = storiesKind.stories[toKey(name)];
-    if (!storyInfo) {
-      return null;
-    }
+    // removes function values from all stories so they are safe to transport over the channel
+    return stories.reduce((acc, [id, story]) => {
+      if (!includeStory(story, options)) return acc;
 
-    const { story, parameters } = storyInfo;
-    return {
-      story,
-      parameters,
-    };
-  }
+      const extracted = toExtracted(story);
+      if (options.normalizeParameters) return Object.assign(acc, { [id]: extracted });
 
-  getStory(kind: string, name: string) {
-    const data = this.getStoryAndParameters(kind, name);
-    return data && data.story;
+      const { parameters, kind } = extracted as { parameters: Parameters; kind: StoryKind };
+      return Object.assign(acc, {
+        [id]: Object.assign(extracted, {
+          parameters: this.combineStoryParameters(parameters, kind),
+        }),
+      });
+    }, {});
   }
 
-  getStoryWithContext(kind: string, name: string) {
-    const data = this.getStoryAndParameters(kind, name);
-    if (!data) {
-      return null;
-    }
-    const { story } = data;
-    return story;
+  clearError() {
+    this._error = null;
   }
 
-  removeStoryKind(kind: string) {
-    if (this.hasStoryKind(kind)) {
-      this._legacydata[toKey(kind)].stories = {};
-      this.cleanHooksForKind(kind);
-      this._data = Object.entries(this._data).reduce((acc, [id, story]) => {
-        if (story.kind !== kind) {
-          Object.assign(acc, { [id]: story });
-        }
-        return acc;
-      }, {});
-      this.pushToManager();
+  setError = (err: ErrorLike) => {
+    this._error = err;
+  };
+
+  getError = (): ErrorLike | undefined => this._error;
+
+  setSelection(selection: Selection): void {
+    this._selection = selection;
+
+    if (this._channel) {
+      this._channel.emit(Events.CURRENT_STORY_WAS_SET, this._selection);
+
+      // If the selection is set while configuration is in process, we are guaranteed
+      // we'll emit RENDER_CURRENT_STORY at the end of the process, so we shouldn't do it now.
+      if (!this._configuring) {
+        this._channel.emit(Events.RENDER_CURRENT_STORY);
+      }
     }
   }
 
-  hasStoryKind(kind: string) {
-    return Boolean(this._legacydata[toKey(kind) as string]);
-  }
+  getSelection = (): Selection => this._selection;
 
-  hasStory(kind: string, name: string) {
-    return Boolean(this.getStory(kind, name));
-  }
+  getDataForManager = () => {
+    return {
+      v: 2,
+      globalParameters: this._globalMetadata.parameters,
+      globalArgs: this._globalArgs,
+      error: this.getError(),
+      kindParameters: mapValues(this._kinds, (metadata) => metadata.parameters),
+      stories: this.extract({ includeDocsOnly: true, normalizeParameters: true }),
+    };
+  };
 
-  dumpStoryBook() {
-    const data = this.getStoryKinds().map(kind => ({
-      kind,
-      stories: this.getStories(kind),
-    }));
+  pushToManager = () => {
+    if (this._channel) {
+      // send to the parent frame.
+      this._channel.emit(Events.SET_STORIES, this.getDataForManager());
+    }
+  };
 
-    return data;
+  getStoryKinds() {
+    return Array.from(new Set(this.raw().map((s) => s.kind)));
   }
 
-  size() {
-    return Object.keys(this._legacydata).length;
+  getStoriesForKind(kind: string) {
+    return this.raw().filter((story) => story.kind === kind);
   }
 
-  clean() {
-    this.getStoryKinds().forEach(kind => delete this._legacydata[toKey(kind) as string]);
+  getRawStory(kind: string, name: string) {
+    return this.getStoriesForKind(kind).find((s) => s.name === name);
   }
 
   cleanHooks(id: string) {
-    if (this._data[id]) {
-      this._data[id].hooks.clean();
+    if (this._stories[id]) {
+      this._stories[id].hooks.clean();
     }
   }
 
   cleanHooksForKind(kind: string) {
-    this.getStoriesForKind(kind).map(story => this.cleanHooks(story.id));
+    this.getStoriesForKind(kind).map((story) => this.cleanHooks(story.id));
+  }
+
+  // This API is a reimplementation of Storybook's original getStorybook() API.
+  // As such it may not behave *exactly* the same, but aims to. Some notes:
+  //  - It is *NOT* sorted by the user's sort function, but remains sorted in "insertion order"
+  //  - It does not include docs-only stories
+  getStorybook(): GetStorybookKind[] {
+    return Object.values(
+      this.raw().reduce((kinds: { [kind: string]: GetStorybookKind }, story) => {
+        if (!includeStory(story)) return kinds;
+
+        const {
+          kind,
+          name,
+          storyFn,
+          parameters: { fileName },
+        } = story;
+
+        // eslint-disable-next-line no-param-reassign
+        if (!kinds[kind]) kinds[kind] = { kind, fileName, stories: [] };
+
+        kinds[kind].stories.push({ name, render: storyFn });
+
+        return kinds;
+      }, {})
+    ).sort((s1, s2) => this._kinds[s1.kind].order - this._kinds[s2.kind].order);
+  }
+
+  private mergeAdditionalDataToStory(story: StoreItem): PublishedStoreItem {
+    return {
+      ...story,
+      parameters: this.combineStoryParameters(story.parameters, story.kind),
+      globalArgs: this._globalArgs,
+    };
   }
 }
diff --git a/lib/client-api/src/subscriptions_store.test.ts b/lib/client-api/src/subscriptions_store.test.ts
deleted file mode 100644
index f19ca3729eb0..000000000000
--- a/lib/client-api/src/subscriptions_store.test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { createSubscriptionsStore } from './subscriptions_store';
-
-const mockSubscription = () => {
-  let listening = false;
-  const listener = jest.fn();
-
-  return {
-    listener,
-    subscribe() {
-      listening = true;
-      return () => {
-        listening = false;
-      };
-    },
-    trigger(value?) {
-      if (listening) {
-        listener(value);
-      }
-    },
-  };
-};
-
-describe('preview.subscriptions_store', () => {
-  describe('register', () => {
-    it('should register a subscription', () => {
-      const { listener, subscribe, trigger } = mockSubscription();
-      const store = createSubscriptionsStore();
-
-      trigger('foo');
-      store.register(subscribe);
-      trigger('bar');
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith('bar');
-    });
-
-    it("shouldn't subscribe when subscription is already registered", () => {
-      const subscribe = jest.fn();
-      const store = createSubscriptionsStore();
-
-      store.register(subscribe);
-      store.register(subscribe);
-
-      expect(subscribe).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('clearUnused', () => {
-    it('should stop unused subscriptions', () => {
-      const { listener, subscribe, trigger } = mockSubscription();
-      const store = createSubscriptionsStore();
-
-      store.register(subscribe);
-      store.markAllAsUnused();
-      store.clearUnused();
-
-      trigger();
-
-      expect(listener).not.toHaveBeenCalled();
-    });
-
-    it("shouldn't stop used subscriptions", () => {
-      const { listener, subscribe, trigger } = mockSubscription();
-      const store = createSubscriptionsStore();
-
-      store.register(subscribe);
-      store.markAllAsUnused();
-      store.register(subscribe);
-      store.clearUnused();
-
-      trigger();
-
-      expect(listener).toHaveBeenCalled();
-    });
-
-    it('should subscribe again after unsubscribing', () => {
-      const { listener, subscribe, trigger } = mockSubscription();
-      const store = createSubscriptionsStore();
-
-      store.register(subscribe);
-      store.markAllAsUnused();
-      store.clearUnused();
-
-      trigger('foo');
-      store.register(subscribe);
-      trigger('bar');
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith('bar');
-    });
-  });
-});
diff --git a/lib/client-api/src/subscriptions_store.ts b/lib/client-api/src/subscriptions_store.ts
deleted file mode 100644
index 7cf418f1799b..000000000000
--- a/lib/client-api/src/subscriptions_store.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const createSubscriptionsStore = () => {
-  const subscriptions = new Map();
-
-  return {
-    register(subscribe: () => void): void {
-      let subscription = subscriptions.get(subscribe);
-      if (!subscription) {
-        subscription = {
-          unsubscribe: subscribe(),
-        };
-        subscriptions.set(subscribe, subscription);
-      }
-      subscription.used = true;
-    },
-
-    markAllAsUnused(): void {
-      subscriptions.forEach(subscription => {
-        // eslint-disable-next-line no-param-reassign
-        subscription.used = false;
-      });
-    },
-
-    clearUnused(): void {
-      subscriptions.forEach((subscription, key) => {
-        if (subscription.used) return;
-
-        subscription.unsubscribe();
-        subscriptions.delete(key);
-      });
-    },
-  };
-};
-
-export default createSubscriptionsStore();
diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts
index d509750fb6c6..e12134fd9784 100644
--- a/lib/client-api/src/types.ts
+++ b/lib/client-api/src/types.ts
@@ -1,10 +1,14 @@
 import {
   Addon,
+  StoryIdentifier,
   StoryFn,
-  StoryContext,
   Parameters,
+  Args,
+  ArgTypes,
   StoryApi,
   DecoratorFunction,
+  DecorateStoryFunction,
+  StoryContext,
 } from '@storybook/addons';
 import StoryStore from './story_store';
 import { HooksContext } from './hooks';
@@ -14,13 +18,31 @@ export interface ErrorLike {
   stack: string;
 }
 
-export interface StoreItem extends StoryContext {
-  getDecorated: () => StoryFn;
-  getOriginal: () => StoryFn;
-  story: string;
-  storyFn: StoryFn;
-  hooks: HooksContext;
+// Metadata about a story that can be set at various levels: global, for a kind, or for a single story.
+export interface StoryMetadata {
+  parameters: Parameters;
+  decorators: DecoratorFunction[];
 }
+export type ArgTypesEnhancer = (context: StoryContext) => ArgTypes;
+
+export type AddStoryArgs = StoryIdentifier & {
+  storyFn: StoryFn<any>;
+  parameters?: Parameters;
+  decorators?: DecoratorFunction[];
+};
+
+export type StoreItem = StoryIdentifier & {
+  parameters: Parameters;
+  getDecorated: () => StoryFn<any>;
+  getOriginal: () => StoryFn<any>;
+  storyFn: StoryFn<any>;
+  hooks: HooksContext;
+  args: Args;
+};
+
+export type PublishedStoreItem = StoreItem & {
+  globalArgs: Args;
+};
 
 export interface StoreData {
   [key: string]: StoreItem;
@@ -28,38 +50,39 @@ export interface StoreData {
 
 export interface ClientApiParams {
   storyStore: StoryStore;
-  decorateStory?: (storyFn: any, decorators: any) => any;
+  decorateStory?: DecorateStoryFunction;
+  noStoryModuleAddMethodHotDispose?: boolean;
 }
 
 export type ClientApiReturnFn<StoryFnReturnType> = (...args: any[]) => StoryApi<StoryFnReturnType>;
 
 export { StoryApi, DecoratorFunction };
 
-export interface LegacyItem {
-  fileName: string;
-  index: number;
-  kind: string;
-  stories: { [key: string]: any };
-  revision?: number;
-  selection?: { storyId: string };
+export interface ClientApiAddon<StoryFnReturnType = unknown> extends Addon {
+  apply: (a: StoryApi<StoryFnReturnType>, b: any[]) => any;
 }
 
-export interface AddStoryArgs {
-  id: string;
-  kind: string;
-  name: string;
-  storyFn: StoryFn;
-  parameters: Parameters;
+export interface ClientApiAddons<StoryFnReturnType> {
+  [key: string]: ClientApiAddon<StoryFnReturnType>;
 }
 
-export interface LegacyData {
-  [K: string]: LegacyItem;
+export interface GetStorybookStory {
+  name: string;
+  render: StoryFn;
 }
 
-export interface ClientApiAddon<StoryFnReturnType = unknown> extends Addon {
-  apply: (a: StoryApi<StoryFnReturnType>, b: any[]) => any;
+export interface GetStorybookKind {
+  kind: string;
+  fileName: string;
+  stories: GetStorybookStory[];
 }
 
-export interface ClientApiAddons<StoryFnReturnType> {
-  [key: string]: ClientApiAddon<StoryFnReturnType>;
-}
+// This really belongs in lib/core, but that depends on lib/ui which (dev) depends on app/react
+// which needs this type. So we put it here to avoid the circular dependency problem.
+export type RenderContext = StoreItem & {
+  forceRender: boolean;
+
+  showMain: () => void;
+  showError: (error: { title: string; description: string }) => void;
+  showException: (err: Error) => void;
+};
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 8d367406fbf7..0c2dd0250e20 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -15,22 +15,32 @@
     "directory": "lib/client-logger"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "core-js": "^3.0.1"
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "loglevel": "^1.6.7"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/client-logger/src/index.test.ts b/lib/client-logger/src/index.test.ts
index 0d2bc5782bcf..3272d11bf949 100644
--- a/lib/client-logger/src/index.test.ts
+++ b/lib/client-logger/src/index.test.ts
@@ -1,8 +1,11 @@
 import { logger } from '.';
 
+jest.mock('loglevel', () => global.console);
+
 describe('client-logger', () => {
   const initialConsole = { ...global.console };
   beforeEach(() => {
+    global.console.trace = jest.fn();
     global.console.debug = jest.fn();
     global.console.log = jest.fn();
     global.console.info = jest.fn();
diff --git a/lib/client-logger/src/index.ts b/lib/client-logger/src/index.ts
index c501e05b99e5..6dedb9df4991 100644
--- a/lib/client-logger/src/index.ts
+++ b/lib/client-logger/src/index.ts
@@ -1,11 +1,54 @@
-const { console } = global;
-
-/* tslint:disable: no-console */
+import { window, LOGLEVEL } from 'global';
+import console from 'loglevel';
 
 export const logger = {
+  trace: (message: any, ...rest: any[]): void => console.trace(message, ...rest),
   debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
-  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  log: (message: any, ...rest: any[]): void => window.console.log(message, ...rest),
   info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
   warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
   error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };
+
+if (LOGLEVEL) {
+  console.setLevel(LOGLEVEL);
+}
+
+if (window) {
+  // eslint-disable-next-line no-underscore-dangle
+  window.__STORYBOOK_LOGGER = console;
+}
+
+export const pretty = (type: 'trace' | 'debug' | 'info' | 'warn' | 'error') => (
+  ...args: string[]
+) => {
+  const argArray = [];
+
+  if (args.length) {
+    const startTagRe = /<span\s+style=(['"])([^'"]*)\1\s*>/gi;
+    const endTagRe = /<\/span>/gi;
+
+    let reResultArray;
+    argArray.push(args[0].replace(startTagRe, '%c').replace(endTagRe, '%c'));
+    // eslint-disable-next-line no-cond-assign
+    while ((reResultArray = startTagRe.exec(args[0]))) {
+      argArray.push(reResultArray[2]);
+      argArray.push('');
+    }
+
+    // pass through subsequent args since chrome dev tools does not (yet) support console.log styling of the following form: console.log('%cBlue!', 'color: blue;', '%cRed!', 'color: red;');
+    // eslint-disable-next-line no-plusplus
+    for (let j = 1; j < args.length; j++) {
+      argArray.push(args[j]);
+    }
+  }
+
+  // eslint-disable-next-line prefer-spread
+  console[type].apply(console, argArray);
+};
+
+pretty.trace = pretty('trace');
+pretty.debug = pretty('debug');
+pretty.info = pretty('info');
+pretty.warn = pretty('warn');
+pretty.error = pretty('error');
diff --git a/addons/contexts/src/shared/@mock-types/_global.d.ts b/lib/client-logger/src/typings.d.ts
similarity index 100%
rename from addons/contexts/src/shared/@mock-types/_global.d.ts
rename to lib/client-logger/src/typings.d.ts
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index 47844e7044ec..0cb4f2b2794f 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -305,3 +305,33 @@ export default {
   title: 'Foo/Bar/baz/whatever',
 };
 ```
+
+### csf-hoist-story-annotations
+
+Starting in 6.0, Storybook has deprecated the `.story` annotation in CSF and is using hoisted annotations.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/csf-hoist-story-annotations.js . --ignore-pattern "node_modules|dist" --extensions=js
+```
+
+For example:
+
+```js
+export const Basic = () => <Button />
+Basic.story = {
+  name: 'foo',
+  parameters: { ... },
+  decorators: [ ... ],
+};
+```
+
+Becomes:
+
+```js
+export const Basic = () => <Button />
+Basic.storyName = 'foo';
+Basic.parameters = { ... };
+Basic.decorators = [ ... ];
+```
+
+The new syntax is slightly more compact, is more ergonomic, and resembles React's `displayName`/`propTypes`/`defaultProps` annotations.
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index b6786bac7c3d..0cbce012bfa9 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -15,33 +15,37 @@
     "directory": "lib/codemod"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.5.1",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "5.3.0-rc.0",
+    "@storybook/node-logger": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "cross-spawn": "^7.0.0",
-    "globby": "^10.0.1",
-    "jest-specific-snapshot": "^2.0.0",
+    "globby": "^11.0.0",
     "jscodeshift": "^0.7.0",
     "lodash": "^4.17.15",
-    "prettier": "^1.16.4",
-    "recast": "^0.16.1",
+    "prettier": "^2.0.5",
+    "recast": "^0.19.0",
     "regenerator-runtime": "^0.13.3"
   },
+  "devDependencies": {
+    "jest": "^26.0.0",
+    "jest-specific-snapshot": "^3.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/lib/codemod/src/index.js b/lib/codemod/src/index.js
index 8a69bbd0b690..fd399d05fb31 100644
--- a/lib/codemod/src/index.js
+++ b/lib/codemod/src/index.js
@@ -16,8 +16,8 @@ const TRANSFORM_DIR = `${__dirname}/transforms`;
 export function listCodemods() {
   return fs
     .readdirSync(TRANSFORM_DIR)
-    .filter(fname => fname.endsWith('.js'))
-    .map(fname => fname.slice(0, -3));
+    .filter((fname) => fname.endsWith('.js'))
+    .map((fname) => fname.slice(0, -3));
 }
 
 const renameAsync = promisify(fs.rename);
@@ -58,6 +58,8 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
   if (renameParts) {
     const [from, to] = renameParts;
     logger.log(`=> Renaming ${rename}: ${files.length} files`);
-    await Promise.all(files.map(file => renameFile(file, new RegExp(`${from}$`), to, { logger })));
+    await Promise.all(
+      files.map((file) => renameFile(file, new RegExp(`${from}$`), to, { logger }))
+    );
   }
 }
diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js
index c16dd0592522..55623881dfae 100644
--- a/lib/codemod/src/lib/utils.js
+++ b/lib/codemod/src/lib/utils.js
@@ -1,11 +1,15 @@
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 
-export const sanitizeName = name => {
+export const sanitizeName = (name) => {
   let key = upperFirst(camelCase(name));
   // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
     key = `_${key}`;
   }
+  // prepend _ if name starts with a digit
+  if (/^\d/.test(key)) {
+    key = `_${key}`;
+  }
   return key;
 };
diff --git a/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js
new file mode 100644
index 000000000000..7a8a3eaa0717
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {
+  name: 'complex story',
+  parameters: { foo: { bar: baz } },
+  decorators: [(storyFn) => <bar>{storyFn}</bar>],
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot
new file mode 100644
index 000000000000..3508512e0d3b
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;
diff --git a/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js
new file mode 100644
index 000000000000..76796d8c460f
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+story2.story.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {};
+story3.story.name = 'complex story';
+story3.story.parameters = { foo: { bar: baz } };
+story3.story.decorators = [(storyFn) => <bar>{storyFn}</bar>];
diff --git a/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.output.snapshot
new file mode 100644
index 000000000000..3ece8c67141d
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.output.snapshot
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "overrides.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+story2.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
index 1504bb144894..89c3d77617e2 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
@@ -6,7 +6,7 @@ import Button from './Button';
 
 export default {
   title: 'Some.Button',
-  decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
+  decorators: [withKnobs, (storyFn) => <div className=\\"foo\\">{storyFn}</div>],
 };
 
 export const WithDecorator = () => <Button label=\\"The Button\\" />;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
index f138089ac6c8..230199df8b2f 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
@@ -10,7 +10,7 @@ export default {
   component: Button,
 
   decorators: [
-    storyFn => (
+    (storyFn) => (
       <div
         style={{
           backgroundColor: 'yellow',
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
index a9a663a780f0..5ef412be865d 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
@@ -7,7 +7,7 @@ import Button from './Button';
 
 export default {
   title: 'Some.Button',
-  decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
+  decorators: [withKnobs, (storyFn) => <div className=\\"foo\\">{storyFn}</div>],
 };
 
 export const WithDecorator = () => <Button label=\\"The Button\\" />;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js
new file mode 100644
index 000000000000..0dfb48fb260d
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js
@@ -0,0 +1,5 @@
+export default {
+  title: 'bar',
+};
+
+export const _1 = () => <button />;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.output.snapshot
index a190c7cfc9fa..49096c22ffd3 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.output.snapshot
@@ -11,7 +11,7 @@ export function someHelper() {
 
 export default {
   title: 'ComponentItem',
-  decorators: [storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>],
+  decorators: [(storyFn) => <div style={{ margin: '1rem' }}>{storyFn()}</div>],
   excludeStories: ['someHelper'],
 };
 
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
index 9a8a79208ebf..235b5d50e9b1 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
@@ -17,7 +17,7 @@ WithStoryParamsAndDecorators.story = {
     bar: 1,
   },
 
-  decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
+  decorators: [withKnobs, (storyFn) => <div className=\\"foo\\">{storyFn}</div>],
 };
 
 export const WithStoryDecorators = () => <Button label=\\"The Button\\" />;
diff --git a/lib/codemod/src/transforms/__tests__/transforms.tests.js b/lib/codemod/src/transforms/__tests__/transforms.tests.js
index 2ac56a0a3852..ddbd7b6fb29a 100644
--- a/lib/codemod/src/transforms/__tests__/transforms.tests.js
+++ b/lib/codemod/src/transforms/__tests__/transforms.tests.js
@@ -8,13 +8,13 @@ jest.mock('@storybook/node-logger');
 const inputRegExp = /\.input\.js$/;
 
 const fixturesDir = path.resolve(__dirname, '../__testfixtures__');
-fs.readdirSync(fixturesDir).forEach(transformName => {
+fs.readdirSync(fixturesDir).forEach((transformName) => {
   const transformFixturesDir = path.join(fixturesDir, transformName);
   describe(transformName, () =>
     fs
       .readdirSync(transformFixturesDir)
-      .filter(fileName => inputRegExp.test(fileName))
-      .forEach(fileName => {
+      .filter((fileName) => inputRegExp.test(fileName))
+      .forEach((fileName) => {
         const inputPath = path.join(transformFixturesDir, fileName);
         it(`transforms correctly using "${fileName}" data`, () =>
           expect(
diff --git a/lib/codemod/src/transforms/add-component-parameters.js b/lib/codemod/src/transforms/add-component-parameters.js
index 6a26c7794fc3..a0eebc933a36 100644
--- a/lib/codemod/src/transforms/add-component-parameters.js
+++ b/lib/codemod/src/transforms/add-component-parameters.js
@@ -29,8 +29,8 @@ export default function transformer(file, api) {
   //
   //  => { foo: true, bar: true, baz: true }
   const importMap = {};
-  root.find(j.ImportDeclaration).forEach(imp =>
-    imp.node.specifiers.forEach(spec => {
+  root.find(j.ImportDeclaration).forEach((imp) =>
+    imp.node.specifiers.forEach((spec) => {
       importMap[spec.local.name] = true;
     })
   );
@@ -50,9 +50,9 @@ export default function transformer(file, api) {
 
   const storiesOfCalls = root
     .find(j.CallExpression)
-    .filter(call => call.node.callee.name === 'storiesOf')
-    .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
-    .filter(call => {
+    .filter((call) => call.node.callee.name === 'storiesOf')
+    .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+    .filter((call) => {
       const leafName = getLeafName(call.node.arguments[0].value);
       return importMap[leafName];
     })
diff --git a/lib/codemod/src/transforms/csf-hoist-story-annotations.js b/lib/codemod/src/transforms/csf-hoist-story-annotations.js
new file mode 100644
index 000000000000..ae0c61f5d4e9
--- /dev/null
+++ b/lib/codemod/src/transforms/csf-hoist-story-annotations.js
@@ -0,0 +1,93 @@
+const getContainingStatement = (n) => {
+  if (n.node.type.endsWith('Statement')) {
+    return n;
+  }
+  return getContainingStatement(n.parent);
+};
+
+/**
+ * Hoist CSF .story annotations
+ *
+ * For example:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.story = {
+ *   name: 'foo',
+ *   parameters: { ... },
+ *   decorators = [ ... ],
+ * };
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.storyName = 'foo';
+ * Basic.parameters = { ... };
+ * Basic.decorators = [ ... ];
+ * ```
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const renameKey = (exp) =>
+    exp.type === 'Identifier' && exp.name === 'name' ? j.identifier('storyName') : exp;
+
+  // 1. If the program does not have `export default { title: '....' }, skip it
+  const defaultExportWithTitle = root
+    .find(j.ExportDefaultDeclaration)
+    .filter((def) => def.node.declaration.properties.map((p) => p.key.name).includes('title'));
+  if (defaultExportWithTitle.size() === 0) {
+    return root.toSource();
+  }
+
+  // 2. Replace each Foo.story = { x: xVal } with Foo.x = xVal;
+  const storyAssignments = root.find(j.AssignmentExpression).filter((exp) => {
+    const { left, right } = exp.node;
+    return (
+      left.type === 'MemberExpression' &&
+      left.object.type === 'Identifier' &&
+      left.property.type === 'Identifier' &&
+      left.property.name === 'story' &&
+      right.type === 'ObjectExpression'
+    );
+  });
+  storyAssignments.forEach((exp) => {
+    const { left, right } = exp.node;
+    right.properties.forEach((prop) => {
+      const stmt = getContainingStatement(exp);
+      stmt.insertBefore(
+        j.assignmentStatement('=', j.memberExpression(left.object, renameKey(prop.key)), prop.value)
+      );
+    });
+  });
+
+  // 3. Remove the .story annotations
+  storyAssignments.remove();
+
+  // 4. Replace each Foo.story.x with Foo.x;
+  const storyOverrides = root.find(j.AssignmentExpression).filter((exp) => {
+    const { left } = exp.node;
+    return (
+      left.type === 'MemberExpression' &&
+      left.object.type === 'MemberExpression' &&
+      left.object.property.type === 'Identifier' &&
+      left.object.property.name === 'story' &&
+      left.property.type === 'Identifier'
+      // ?? ANNOTATION_FIELDS.includes(right.property.name)
+    );
+  });
+  storyOverrides.replaceWith((exp) => {
+    const { left, right } = exp.node;
+    return j.assignmentExpression(
+      '=',
+      j.memberExpression(left.object.object, renameKey(left.property)),
+      right
+    );
+  });
+
+  // 4. Render the updated tree
+  return root.toSource({ quote: 'single' });
+}
diff --git a/lib/codemod/src/transforms/csf-to-mdx.js b/lib/codemod/src/transforms/csf-to-mdx.js
index 020426e1ba3c..533effb843b3 100644
--- a/lib/codemod/src/transforms/csf-to-mdx.js
+++ b/lib/codemod/src/transforms/csf-to-mdx.js
@@ -1,4 +1,4 @@
-import recast from 'recast';
+import { prettyPrint } from 'recast';
 import { isExportStory } from '@storybook/csf';
 
 function exportMdx(root, options) {
@@ -7,8 +7,8 @@ function exportMdx(root, options) {
 
   // FIXME: insert the title as markdown after all of the imports
   return path.node.program.body
-    .map(n => {
-      const { code } = recast.prettyPrint(n, options);
+    .map((n) => {
+      const { code } = prettyPrint(n, options);
       if (n.type === 'JSXElement') {
         return `${code}\n`;
       }
@@ -18,7 +18,7 @@ function exportMdx(root, options) {
 }
 
 function parseIncludeExclude(prop) {
-  const { code } = recast.prettyPrint(prop, {});
+  const { code } = prettyPrint(prop, {});
   // eslint-disable-next-line no-eval
   return eval(code);
 }
@@ -74,7 +74,7 @@ export default function transformer(file, api) {
   function getName(storyKey) {
     const story = storyKeyToStory[storyKey];
     if (story) {
-      const name = story.properties.find(prop => prop.key.name === 'name');
+      const name = story.properties.find((prop) => prop.key.name === 'name');
       if (name && name.value.type === 'Literal') {
         return name.value.value;
       }
@@ -86,7 +86,7 @@ export default function transformer(file, api) {
     const attrs = [];
     const story = storyKeyToStory[storyKey];
     if (story) {
-      story.properties.forEach(prop => {
+      story.properties.forEach((prop) => {
         const { key, value } = prop;
         if (key.name !== 'name') {
           attrs.push(makeAttr(key.name, value));
@@ -99,7 +99,7 @@ export default function transformer(file, api) {
   // 1. If the program does not have `export default { title: '....' }, skip it
   const defaultExportWithTitle = root
     .find(j.ExportDefaultDeclaration)
-    .filter(def => def.node.declaration.properties.map(p => p.key.name).includes('title'));
+    .filter((def) => def.node.declaration.properties.map((p) => p.key.name).includes('title'));
   if (defaultExportWithTitle.size() === 0) {
     return root.toSource();
   }
@@ -118,12 +118,12 @@ export default function transformer(file, api) {
   // 2b. Remove react import which is implicit
   root
     .find(j.ImportDeclaration)
-    .filter(decl => decl.node.source.value === 'react')
+    .filter((decl) => decl.node.source.value === 'react')
     .remove();
 
   // 3. Save out all the excluded stories
-  defaultExportWithTitle.forEach(exp => {
-    exp.node.declaration.properties.forEach(p => {
+  defaultExportWithTitle.forEach((exp) => {
+    exp.node.declaration.properties.forEach((p) => {
       if (['includeStories', 'excludeStories'].includes(p.key.name)) {
         meta[p.key.name] = parseIncludeExclude(p.value);
       }
@@ -132,7 +132,7 @@ export default function transformer(file, api) {
 
   // 4. Collect all the story exports in storyKeyToStory[key] = null;
   const namedExports = root.find(j.ExportNamedDeclaration);
-  namedExports.forEach(exp => {
+  namedExports.forEach((exp) => {
     const storyKey = exp.node.declaration.declarations[0].id.name;
     if (isExportStory(storyKey, meta)) {
       storyKeyToStory[storyKey] = null;
@@ -140,7 +140,7 @@ export default function transformer(file, api) {
   });
 
   // 5. Collect all the storyKey.story in storyKeyToStory and also remove them
-  const storyAssignments = root.find(j.AssignmentExpression).filter(exp => {
+  const storyAssignments = root.find(j.AssignmentExpression).filter((exp) => {
     const { left } = exp.node;
     return (
       left.type === 'MemberExpression' &&
@@ -150,17 +150,17 @@ export default function transformer(file, api) {
       left.property.name === 'story'
     );
   });
-  storyAssignments.forEach(exp => {
+  storyAssignments.forEach((exp) => {
     const { left, right } = exp.node;
     storyKeyToStory[left.object.name] = right;
   });
   storyAssignments.remove();
 
   // 6. Convert the default export to <Meta />
-  defaultExportWithTitle.replaceWith(exp => {
+  defaultExportWithTitle.replaceWith((exp) => {
     const jsxId = j.jsxIdentifier('Meta');
     const attrs = [];
-    exp.node.declaration.properties.forEach(prop => {
+    exp.node.declaration.properties.forEach((prop) => {
       const { key, value } = prop;
       if (!['includeStories', 'excludeStories'].includes(key.name)) {
         attrs.push(makeAttr(key.name, value));
@@ -172,7 +172,7 @@ export default function transformer(file, api) {
   });
 
   // 7. Convert all the named exports to <Story>...</Story>
-  namedExports.replaceWith(exp => {
+  namedExports.replaceWith((exp) => {
     const storyKey = exp.node.declaration.declarations[0].id.name;
     if (!isExportStory(storyKey, meta)) {
       return exp.node;
diff --git a/lib/codemod/src/transforms/mdx-to-csf.js b/lib/codemod/src/transforms/mdx-to-csf.js
index 4a7b0acad15f..53dc8284260a 100644
--- a/lib/codemod/src/transforms/mdx-to-csf.js
+++ b/lib/codemod/src/transforms/mdx-to-csf.js
@@ -13,7 +13,7 @@ export default function transformer(file, api) {
 
   function parseJsxAttributes(attributes) {
     const result = {};
-    attributes.forEach(attr => {
+    attributes.forEach((attr) => {
       const key = attr.name.name;
       const val = attr.value.type === 'JSXExpressionContainer' ? attr.value.expression : attr.value;
       result[key] = val;
@@ -37,14 +37,14 @@ export default function transformer(file, api) {
     // get rid of all mdxType junk
     base
       .find(j.JSXAttribute)
-      .filter(attr => attr.node.name.name === 'mdxType')
+      .filter((attr) => attr.node.name.name === 'mdxType')
       .remove();
 
     // parse <Meta title="..." />
     base
       .find(j.JSXElement)
-      .filter(elt => elt.node.openingElement.name.name === 'Meta')
-      .forEach(elt => {
+      .filter((elt) => elt.node.openingElement.name.name === 'Meta')
+      .forEach((elt) => {
         const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
         Object.assign(meta, attrs);
       });
@@ -52,8 +52,8 @@ export default function transformer(file, api) {
     // parse <Story name="..." />
     base
       .find(j.JSXElement)
-      .filter(elt => elt.node.openingElement.name.name === 'Story')
-      .forEach(elt => {
+      .filter((elt) => elt.node.openingElement.name.name === 'Story')
+      .forEach((elt) => {
         const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
         if (attrs.name) {
           const storyKey = sanitizeName(attrs.name.value);
@@ -62,7 +62,7 @@ export default function transformer(file, api) {
             delete attrs.name;
           }
           let body =
-            elt.node.children.find(n => n.type !== 'JSXText') ||
+            elt.node.children.find((n) => n.type !== 'JSXText') ||
             j.literal(elt.node.children[0].value);
 
           if (body.type === 'JSXExpressionContainer') {
@@ -96,7 +96,7 @@ export default function transformer(file, api) {
       });
 
     if (root.find(j.ExportNamedDeclaration).size() > 0) {
-      meta.includeStories = j.arrayExpression(includeStories.map(key => j.literal(key)));
+      meta.includeStories = j.arrayExpression(includeStories.map((key) => j.literal(key)));
     }
     const statements = [
       j.exportDefaultDeclaration(genObjectExpression(meta)),
@@ -105,7 +105,7 @@ export default function transformer(file, api) {
     ];
 
     const lastStatement = root.find(j.Statement).at(-1);
-    statements.reverse().forEach(stmt => {
+    statements.reverse().forEach((stmt) => {
       lastStatement.insertAfter(stmt);
     });
     base.remove();
@@ -119,12 +119,12 @@ export default function transformer(file, api) {
   root
     .find(j.ImportDeclaration)
     .at(0)
-    .replaceWith(exp => j.importDeclaration(exp.node.specifiers, exp.node.source));
+    .replaceWith((exp) => j.importDeclaration(exp.node.specifiers, exp.node.source));
 
   //  import { Story, Meta } from '@storybook/addon-docs/blocks';
   root
     .find(j.ImportDeclaration)
-    .filter(exp => exp.node.source.value === '@storybook/addon-docs/blocks')
+    .filter((exp) => exp.node.source.value === '@storybook/addon-docs/blocks')
     .remove();
 
   //   const makeShortcode = ...
@@ -134,7 +134,7 @@ export default function transformer(file, api) {
   root
     .find(j.VariableDeclaration)
     .filter(
-      decl =>
+      (decl) =>
         decl.node.declarations.length === 1 && MDX_DECLS.includes(decl.node.declarations[0].id.name)
     )
     .remove();
@@ -143,7 +143,7 @@ export default function transformer(file, api) {
   root
     .find(j.VariableDeclarator)
     .filter(
-      expr =>
+      (expr) =>
         expr.node.init.type === 'CallExpression' &&
         expr.node.init.callee.type === 'Identifier' &&
         expr.node.init.callee.name === 'makeShortcode'
@@ -154,7 +154,7 @@ export default function transformer(file, api) {
   root
     .find(j.AssignmentExpression)
     .filter(
-      expr =>
+      (expr) =>
         expr.node.left.type === 'MemberExpression' &&
         expr.node.left.object.type === 'Identifier' &&
         expr.node.left.object.name === 'MDXContent'
@@ -162,7 +162,7 @@ export default function transformer(file, api) {
     .remove();
 
   // Add back `import React from 'react';` which is implicit in MDX
-  const react = root.find(j.ImportDeclaration).filter(decl => decl.node.source.value === 'react');
+  const react = root.find(j.ImportDeclaration).filter((decl) => decl.node.source.value === 'react');
   if (react.size() === 0) {
     root
       .find(j.Statement)
diff --git a/lib/codemod/src/transforms/move-buildin-addons.js b/lib/codemod/src/transforms/move-buildin-addons.js
index f4a80cb4fc8d..3612f07405a7 100644
--- a/lib/codemod/src/transforms/move-buildin-addons.js
+++ b/lib/codemod/src/transforms/move-buildin-addons.js
@@ -3,7 +3,7 @@ export default function transformer(file, api) {
 
   const createImportDeclaration = (specifiers, source) =>
     j.importDeclaration(
-      specifiers.map(s => j.importSpecifier(j.identifier(s))),
+      specifiers.map((s) => j.importSpecifier(j.identifier(s))),
       j.literal(source)
     );
 
@@ -14,10 +14,10 @@ export default function transformer(file, api) {
 
   const transform = j(file.source)
     .find(j.ImportDeclaration)
-    .filter(i => i.value.source.value === '@storybook/react')
-    .forEach(i => {
+    .filter((i) => i.value.source.value === '@storybook/react')
+    .forEach((i) => {
       const importStatement = i.value;
-      importStatement.specifiers = importStatement.specifiers.filter(specifier => {
+      importStatement.specifiers = importStatement.specifiers.filter((specifier) => {
         const item = deprecates[specifier.local.name];
         if (item) {
           const [specifiers, moduleName] = item;
diff --git a/lib/codemod/src/transforms/storiesof-to-csf.js b/lib/codemod/src/transforms/storiesof-to-csf.js
index 77e46900cdc8..73cf2a1e353d 100644
--- a/lib/codemod/src/transforms/storiesof-to-csf.js
+++ b/lib/codemod/src/transforms/storiesof-to-csf.js
@@ -35,13 +35,13 @@ export default function transformer(file, api, options) {
     if (!parameters.properties) {
       return { storyParams: parameters };
     }
-    let storyDecorators = parameters.properties.find(p => p.key.name === 'decorators');
+    let storyDecorators = parameters.properties.find((p) => p.key.name === 'decorators');
     if (!storyDecorators) {
       return { storyParams: parameters };
     }
     storyDecorators = storyDecorators.value;
     const storyParams = { ...parameters };
-    storyParams.properties = storyParams.properties.filter(p => p.key.name !== 'decorators');
+    storyParams.properties = storyParams.properties.filter((p) => p.key.name !== 'decorators');
     if (storyParams.properties.length === 0) {
       return { storyDecorators };
     }
@@ -59,9 +59,9 @@ export default function transformer(file, api, options) {
     base
       .find(j.CallExpression)
       .filter(
-        call => call.node.callee.property && call.node.callee.property.name === 'addDecorator'
+        (call) => call.node.callee.property && call.node.callee.property.name === 'addDecorator'
       )
-      .forEach(add => {
+      .forEach((add) => {
         const decorator = add.node.arguments[0];
         decorators.push(decorator);
       });
@@ -77,14 +77,14 @@ export default function transformer(file, api, options) {
     base
       .find(j.CallExpression)
       .filter(
-        call => call.node.callee.property && call.node.callee.property.name === 'addParameters'
+        (call) => call.node.callee.property && call.node.callee.property.name === 'addParameters'
       )
-      .forEach(add => {
+      .forEach((add) => {
         // jscodeshift gives us the find results in reverse, but these args come in
         // order, so we double reverse here. ugh.
         const params = [...add.node.arguments[0].properties];
         params.reverse();
-        params.forEach(prop => parameters.push(prop));
+        params.forEach((prop) => parameters.push(prop));
       });
     if (parameters.length > 0) {
       parameters.reverse();
@@ -98,7 +98,7 @@ export default function transformer(file, api, options) {
         j.property(
           'init',
           j.identifier('excludeStories'),
-          j.arrayExpression(originalExports.map(exp => j.literal(exp)))
+          j.arrayExpression(originalExports.map((exp) => j.literal(exp)))
         )
       );
     }
@@ -106,9 +106,9 @@ export default function transformer(file, api, options) {
     // storiesOf(...)
     base
       .find(j.CallExpression)
-      .filter(call => call.node.callee.name === 'storiesOf')
-      .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
-      .forEach(storiesOf => {
+      .filter((call) => call.node.callee.name === 'storiesOf')
+      .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+      .forEach((storiesOf) => {
         const title = storiesOf.node.arguments[0].value;
         statements.push(
           j.exportDefaultDeclaration(
@@ -124,16 +124,16 @@ export default function transformer(file, api, options) {
     const adds = [];
     base
       .find(j.CallExpression)
-      .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
-      .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
-      .forEach(add => adds.push(add));
+      .filter((add) => add.node.callee.property && add.node.callee.property.name === 'add')
+      .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+      .forEach((add) => adds.push(add));
 
     adds.reverse();
     adds.push(path);
 
     const identifiers = new Set();
     root.find(j.Identifier).forEach(({ value }) => identifiers.add(value.name));
-    adds.forEach(add => {
+    adds.forEach((add) => {
       let name = add.node.arguments[0].value;
       let key = sanitizeName(name);
       while (identifiers.has(key)) {
@@ -183,14 +183,14 @@ export default function transformer(file, api, options) {
     const stmt = path.parent.node.type === 'VariableDeclarator' ? path.parent.parent : path.parent;
 
     statements.reverse();
-    statements.forEach(s => stmt.insertAfter(s));
+    statements.forEach((s) => stmt.insertAfter(s));
     j(stmt).remove();
   }
 
   // Save the original storiesOf
   const initialStoriesOf = root
     .find(j.CallExpression)
-    .filter(call => call.node.callee.name === 'storiesOf');
+    .filter((call) => call.node.callee.name === 'storiesOf');
 
   const defaultExports = root.find(j.ExportDefaultDeclaration);
   // If there's already a default export
@@ -207,24 +207,24 @@ export default function transformer(file, api, options) {
 
   // Exclude all the original named exports
   const originalExports = [];
-  root.find(j.ExportNamedDeclaration).forEach(exp => {
+  root.find(j.ExportNamedDeclaration).forEach((exp) => {
     const { declaration, specifiers } = exp.node;
     if (declaration) {
       const { id, declarations } = declaration;
       if (declarations) {
-        declarations.forEach(decl => {
+        declarations.forEach((decl) => {
           const { name, properties } = decl.id;
           if (name) {
             originalExports.push(name);
           } else if (properties) {
-            properties.forEach(prop => originalExports.push(prop.key.name));
+            properties.forEach((prop) => originalExports.push(prop.key.name));
           }
         });
       } else if (id) {
         originalExports.push(id.name);
       }
     } else if (specifiers) {
-      specifiers.forEach(spec => originalExports.push(spec.exported.name));
+      specifiers.forEach((spec) => originalExports.push(spec.exported.name));
     }
   });
 
@@ -232,20 +232,22 @@ export default function transformer(file, api, options) {
   // replace it with the entire export statements
   root
     .find(j.CallExpression)
-    .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
-    .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
-    .filter(add => ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type))
-    .forEach(path => convertToModuleExports(path, originalExports));
+    .filter((add) => add.node.callee.property && add.node.callee.property.name === 'add')
+    .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+    .filter((add) =>
+      ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type)
+    )
+    .forEach((path) => convertToModuleExports(path, originalExports));
 
   // remove storiesOf import
   root
     .find(j.ImportSpecifier)
     .filter(
-      spec =>
+      (spec) =>
         spec.node.imported.name === 'storiesOf' &&
         spec.parent.node.source.value.startsWith('@storybook/')
     )
-    .forEach(spec => {
+    .forEach((spec) => {
       const toRemove = spec.parent.node.specifiers.length > 1 ? spec : spec.parent;
       j(toRemove).remove();
     });
diff --git a/lib/codemod/src/transforms/update-addon-info.js b/lib/codemod/src/transforms/update-addon-info.js
index 1417e7fe88a8..443c562e6e9e 100644
--- a/lib/codemod/src/transforms/update-addon-info.js
+++ b/lib/codemod/src/transforms/update-addon-info.js
@@ -34,7 +34,7 @@ export default function transformer(file, api) {
    * @param {list} args - original addWithInfo function parameters
    * @return {list} the modified list of parameters for the new function
    */
-  const getOptions = args => {
+  const getOptions = (args) => {
     if (args[3] === undefined) {
       if (args[2] === undefined) {
         // when the optional description string is not supplied for addWithInfo, use story name
@@ -56,7 +56,7 @@ export default function transformer(file, api) {
    * @param {CallExpression} addWithInfoExpression - original function
    * @returns {CallExpression} the new withInfo function
    */
-  const withInfo = addWithInfoExpression => {
+  const withInfo = (addWithInfoExpression) => {
     const { node } = addWithInfoExpression;
     const args = node.arguments;
 
@@ -81,7 +81,7 @@ export default function transformer(file, api) {
   const checkWithInfoImport = () => {
     const importExists = root
       .find(j.ImportDeclaration)
-      .filter(imp => imp.node.source.value === '@storybook/addon-info')
+      .filter((imp) => imp.node.source.value === '@storybook/addon-info')
       .size();
 
     if (importExists) return;
diff --git a/lib/codemod/src/transforms/update-organisation-name.js b/lib/codemod/src/transforms/update-organisation-name.js
index a07875858b2d..699f62fb511c 100644
--- a/lib/codemod/src/transforms/update-organisation-name.js
+++ b/lib/codemod/src/transforms/update-organisation-name.js
@@ -31,7 +31,7 @@ export default function transformer(file, api) {
    * @param {string} the import declaration node
    * @returns {string} whether the node value matches a Storybook package
    */
-  const getMatch = oldpart => packageNamesKeys.find(newpart => oldpart.match(newpart));
+  const getMatch = (oldpart) => packageNamesKeys.find((newpart) => oldpart.match(newpart));
 
   /**
    * Returns the name of the Storybook packages with the organisation name,
@@ -42,7 +42,7 @@ export default function transformer(file, api) {
    * // returns '@storybook/storybook'
    * getNewPackageName('@kadira/storybook')
    */
-  const getNewPackageName = oldPackageName => {
+  const getNewPackageName = (oldPackageName) => {
     const match = getMatch(oldPackageName);
 
     if (match) {
@@ -57,7 +57,7 @@ export default function transformer(file, api) {
    * @param {ImportDeclaration} declaration the import declaration
    * @returns {ImportDeclaration.Node} the import declaration node
    */
-  const updatePackageName = declaration => {
+  const updatePackageName = (declaration) => {
     // eslint-disable-next-line no-param-reassign
     declaration.node.source.value = getNewPackageName(declaration.node.source.value);
 
diff --git a/lib/codemod/src/transforms/upgrade-hierarchy-separators.js b/lib/codemod/src/transforms/upgrade-hierarchy-separators.js
index 987e92d6de44..9b6ea87454a4 100644
--- a/lib/codemod/src/transforms/upgrade-hierarchy-separators.js
+++ b/lib/codemod/src/transforms/upgrade-hierarchy-separators.js
@@ -9,13 +9,13 @@ export default function transformer(file, api, options) {
   // storiesOf(...)
   root
     .find(j.CallExpression)
-    .filter(call => call.node.callee.name === 'storiesOf')
+    .filter((call) => call.node.callee.name === 'storiesOf')
     .filter(
-      call =>
+      (call) =>
         call.node.arguments.length > 0 &&
         ['Literal', 'StringLiteral'].includes(call.node.arguments[0].type)
     )
-    .forEach(call => {
+    .forEach((call) => {
       const arg0 = call.node.arguments[0];
       arg0.value = upgradeSeparator(arg0.value);
     });
@@ -23,10 +23,10 @@ export default function transformer(file, api, options) {
   // export default { title: ... }
   root
     .find(j.ExportDefaultDeclaration)
-    .filter(def => def.node.declaration.properties.map(p => p.key.name).includes('title'))
-    .forEach(def => {
+    .filter((def) => def.node.declaration.properties.map((p) => p.key.name).includes('title'))
+    .forEach((def) => {
       if (def.node.declaration && def.node.declaration.properties) {
-        def.node.declaration.properties.forEach(p => {
+        def.node.declaration.properties.forEach((p) => {
           if (p.key.name === 'title') {
             // eslint-disable-next-line no-param-reassign
             p.value.value = upgradeSeparator(p.value.value);
diff --git a/lib/components/package.json b/lib/components/package.json
index 085aac4930c7..1b05fab0eb1b 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -15,43 +15,48 @@
     "directory": "lib/components"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
-    "@types/react-syntax-highlighter": "11.0.2",
-    "@types/react-textarea-autosize": "^4.3.3",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/csf": "0.0.1",
+    "@storybook/theming": "6.0.0-beta.21",
+    "@types/overlayscrollbars": "^1.9.0",
+    "@types/react-color": "^3.0.1",
+    "@types/react-syntax-highlighter": "11.0.4",
     "core-js": "^3.0.1",
+    "fast-deep-equal": "^3.1.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
-    "markdown-to-jsx": "^6.9.1",
+    "markdown-to-jsx": "^6.11.4",
     "memoizerific": "^1.11.3",
-    "polished": "^3.3.1",
+    "overlayscrollbars": "^1.10.2",
+    "overlayscrollbars-react": "^0.2.1",
+    "polished": "^3.4.4",
     "popper.js": "^1.14.7",
-    "prop-types": "^15.7.2",
     "react": "^16.8.3",
+    "react-color": "^2.17.0",
     "react-dom": "^16.8.3",
-    "react-focus-lock": "^2.1.0",
     "react-helmet-async": "^1.0.2",
-    "react-popper-tooltip": "^2.8.3",
-    "react-syntax-highlighter": "^11.0.2",
-    "react-textarea-autosize": "^7.1.0",
-    "simplebar-react": "^1.0.0-alpha.6",
-    "ts-dedent": "^1.1.0"
+    "react-popper-tooltip": "^2.11.0",
+    "react-syntax-highlighter": "^12.2.1",
+    "react-textarea-autosize": "^8.0.1",
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
+    "css": "^2.2.4",
     "enzyme": "^3.9.0",
-    "jest": "^24.7.1",
+    "jest": "^26.0.0",
     "jest-enzyme": "^7.0.2"
   },
   "peerDependencies": {
@@ -61,5 +66,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/components/scripts/writeCssScript.js b/lib/components/scripts/writeCssScript.js
new file mode 100644
index 000000000000..94a718c936fc
--- /dev/null
+++ b/lib/components/scripts/writeCssScript.js
@@ -0,0 +1,132 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-param-reassign */
+
+// This little script converts the overflowscrollbars CSS file into the css-in-js file
+// it's normal you have to run prettier over the file after
+
+const fs = require('fs');
+const { parse } = require('css');
+const { isNaN } = require('global');
+
+const INPUT = require.resolve('overlayscrollbars/css/OverlayScrollbars.min.css');
+const OUTPUT = `${__dirname}/../src/ScrollArea/ScrollAreaStyles.ts`;
+const OPTIONS = { camelCase: true, numbers: true };
+
+const read = (file) => {
+  return fs
+    .readFileSync(file)
+    .toString()
+    .replace(/(?:\r\n|\r|\n)/g, '');
+};
+
+const convert = (css, opts) => {
+  const ast = parse(css, { source: css });
+  const obj = cssToObject(opts)(ast.stylesheet.rules);
+  return obj;
+};
+
+const cssToObject = (opts) => (rules, result = {}) => {
+  rules.forEach((rule) => {
+    if (rule.type === 'media') {
+      const key = `@media ${rule.media}`;
+      const decs = cssToObject(opts)(rule.rules);
+      result[key] = decs;
+      return;
+    }
+    if (rule.type === 'keyframes') {
+      result.__keyframes = Object.assign(result.__keyframes || {}, { [camel(rule.name)]: rule });
+      return;
+    }
+    if (rule.type === 'comment') {
+      return;
+    }
+
+    const key = rule.selectors.filter((s) => !s.includes('.os-theme-none')).join(', ');
+
+    if (key.length) {
+      Object.assign(result, {
+        [key]: Object.assign(result[key] || {}, getDeclarations(rule.declarations, opts)),
+      });
+    }
+  });
+  return result;
+};
+
+const getDeclarations = (decs, opts = {}) => {
+  const result = decs
+    .filter((d) => {
+      const filtered = d.type === 'comment' || d.property.match(/^(?:-webkit-|-ms-|-moz-)/);
+      return !filtered;
+    })
+    .map((d) => ({
+      key: opts.camelCase ? camel(d.property) : d.property,
+      value: opts.numbers ? parsePx(d.value) : d.value,
+    }))
+    .reduce((a, b) => {
+      a[b.key] = b.value;
+      return a;
+    }, {});
+  return result;
+};
+
+const camel = (str) => str.replace(/(-[a-z])/g, (x) => x.toUpperCase()).replace(/-/g, '');
+
+const parsePx = (val) => {
+  return /px$/.test(val) || val === '' || (val.match(/\d$/) && !isNaN(parseInt(val, 10)))
+    ? parseFloat(val.replace(/px$/, ''))
+    : val;
+};
+
+const { __keyframes, ...styles } = convert(read(INPUT), OPTIONS);
+
+const stringifiedKeyFrames = Object.values(__keyframes)
+  .map((k) => {
+    return `const ${camel(k.name)} = keyframes\`${k.keyframes.reduce(
+      (acc, item) =>
+        `${acc}${k.position.source.substring(
+          item.position.start.column - 1,
+          item.position.end.column - 1
+        )}`,
+      ''
+    )}\`;`;
+  })
+  .join('\n');
+
+const stringifiedStyles = JSON.stringify(
+  Object.entries(styles).reduce((acc, [key, item]) => {
+    if (item.animationName && __keyframes[camel(item.animationName)]) {
+      item.animationName = camel(item.animationName);
+    }
+
+    if (item.backgroundImage && item.backgroundImage.match(/^url/)) {
+      item.backgroundImage =
+        'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)';
+    }
+
+    acc[key] = item;
+    return acc;
+  }, {}),
+  null,
+  2
+);
+
+const stringifiedStylesWithReplacedKeyframes = Object.keys(__keyframes)
+  .reduce((acc, item) => {
+    // replace keyframes
+    return acc.replace(`"${item}"`, `\`\${${item}}\``);
+  }, stringifiedStyles)
+  .replace(/"([^\s]+)!important"/g, (f, p1) => {
+    // make "!important" rules work with TS
+    const v = parsePx(p1);
+    return `"${p1}!important" as any as ${JSON.stringify(v)}`;
+  });
+
+const result = `
+  import { Theme, CSSObject, keyframes } from '@storybook/theming';
+
+  ${stringifiedKeyFrames}
+
+  export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => (${stringifiedStylesWithReplacedKeyframes});
+`;
+
+fs.writeFileSync(OUTPUT, result);
diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx
index fd0576ab6985..186d9caa8d71 100644
--- a/lib/components/src/Badge/Badge.tsx
+++ b/lib/components/src/Badge/Badge.tsx
@@ -1,63 +1,66 @@
 import React, { FunctionComponent } from 'react';
-import { styled, css } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 
-type BadgeWrapperProps = BadgeProps;
+const BadgeWrapper = styled.div<BadgeProps>(
+  ({ theme }) => ({
+    display: 'inline-block',
+    fontSize: 11,
+    lineHeight: '12px',
+    alignSelf: 'center',
+    padding: '4px 12px',
+    borderRadius: '3em',
+    fontWeight: theme.typography.weight.bold,
+  }),
+  {
+    svg: {
+      height: 12,
+      width: 12,
+      marginRight: 4,
+      marginTop: -2,
 
-const BadgeWrapper = styled.div<BadgeWrapperProps>`
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: ${props => props.theme.typography.weight.bold};
-
-  svg {
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
-    margin-top: -2px;
-
-    path {
-      fill: currentColor;
+      path: {
+        fill: 'currentColor',
+      },
+    },
+  },
+  ({ theme, status }) => {
+    switch (status) {
+      case 'critical': {
+        return {
+          color: theme.color.critical,
+          background: theme.background.critical,
+        };
+      }
+      case 'negative': {
+        return {
+          color: theme.color.negative,
+          background: theme.background.negative,
+        };
+      }
+      case 'warning': {
+        return {
+          color: theme.color.warning,
+          background: theme.background.warning,
+        };
+      }
+      case 'neutral': {
+        return {
+          color: theme.color.dark,
+          background: theme.color.mediumlight,
+        };
+      }
+      case 'positive': {
+        return {
+          color: theme.color.positive,
+          background: theme.background.positive,
+        };
+      }
+      default: {
+        return {};
+      }
     }
   }
-
-  ${props =>
-    props.status === 'critical' &&
-    css`
-      color: ${props.theme.color.critical};
-      background: ${props.theme.background.critical};
-    `};
-
-  ${props =>
-    props.status === 'negative' &&
-    css`
-      color: ${props.theme.color.negative};
-      background: ${props.theme.background.negative};
-    `};
-
-  ${props =>
-    props.status === 'warning' &&
-    css`
-      color: ${props.theme.color.warning};
-      background: ${props.theme.background.warning};
-    `};
-
-  ${props =>
-    props.status === 'neutral' &&
-    css`
-      color: ${props.theme.color.dark};
-      background: ${props.theme.color.mediumlight};
-    `};
-
-  ${props =>
-    props.status === 'positive' &&
-    css`
-      color: ${props.theme.color.positive};
-      background: ${props.theme.background.positive};
-    `};
-`;
+);
 
 export interface BadgeProps {
   status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx
index 9eb18d888821..da248be179cb 100644
--- a/lib/components/src/Button/Button.stories.tsx
+++ b/lib/components/src/Button/Button.stories.tsx
@@ -36,6 +36,9 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
     <Button secondary small>
       Secondary
     </Button>
+    <Button gray small>
+      Secondary
+    </Button>
     <Button outline small>
       Outline
     </Button>
diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
index e5ca2f385334..f958d0ec5fbb 100644
--- a/lib/components/src/Button/Button.tsx
+++ b/lib/components/src/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, forwardRef } from 'react';
+import React, { forwardRef, FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
@@ -7,11 +7,13 @@ export interface ButtonProps {
   primary?: boolean;
   secondary?: boolean;
   tertiary?: boolean;
+  gray?: boolean;
   inForm?: boolean;
   disabled?: boolean;
   small?: boolean;
   outline?: boolean;
   containsIcon?: boolean;
+  children?: React.ReactNode;
 }
 
 type ButtonWrapperProps = ButtonProps;
@@ -78,7 +80,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
           ...(small ? { padding: 9 } : { padding: 12 }),
         }
       : {},
-  ({ theme, primary, secondary }) => {
+  ({ theme, primary, secondary, gray }) => {
     let color;
 
     if (primary) {
@@ -87,11 +89,14 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
     if (secondary) {
       color = theme.color.secondary;
     }
+    if (gray) {
+      color = theme.color.medium;
+    }
 
     return color
       ? {
           background: color,
-          color: theme.color.lightest,
+          color: gray ? '#333333' : theme.color.inverseText,
 
           '&:hover': {
             background: darken(0.05, color),
@@ -226,7 +231,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
 
 const ButtonLink = ButtonWrapper.withComponent('a');
 
-export const Button = Object.assign(
+export const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>> = Object.assign(
   forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
     if (isLink) {
       return (
diff --git a/lib/components/src/Colors/SideBySide.tsx b/lib/components/src/Colors/SideBySide.tsx
new file mode 100644
index 000000000000..e2e95e7b80dc
--- /dev/null
+++ b/lib/components/src/Colors/SideBySide.tsx
@@ -0,0 +1,18 @@
+import { styled } from '@storybook/theming';
+
+export const SideBySide = styled.div({
+  display: 'grid',
+  gridColumnGap: 30,
+  gridTemplateColumns: '1fr 1fr',
+
+  position: 'absolute',
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  top: 0,
+  left: 0,
+
+  '& > *': {
+    padding: 20,
+  },
+});
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
new file mode 100644
index 000000000000..89116dcf34a4
--- /dev/null
+++ b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -0,0 +1,123 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
+
+import { SideBySide } from './SideBySide';
+
+<Meta title="Basics/ColorPalette" />
+
+<SideBySide>
+  <div style={{background: '#202020' }}>
+<ThemeProvider theme={ensure(themes.dark)}>
+
+Dark theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).color).map(([k,v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Dark theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </ThemeProvider></div>
+  <div styles={{ background: '#eeeeee'}}>
+
+Light theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).color).map(([k,v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Light theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </div>
+</SideBySide>
diff --git a/lib/components/src/Loader/Loader.stories.tsx b/lib/components/src/Loader/Loader.stories.tsx
new file mode 100644
index 000000000000..30da9c305fe7
--- /dev/null
+++ b/lib/components/src/Loader/Loader.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Loader } from './Loader';
+
+storiesOf('Basics/Loader', module)
+  .addDecorator((storyFn) => (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        background:
+          'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: 0,
+          height: '50vh',
+          width: '100vw',
+          background:
+            'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)',
+        }}
+      />
+      {storyFn()}
+    </div>
+  ))
+  .add('infinite state', () => <Loader role="progressbar" />)
+  .add('size adjusted', () => <Loader size={64} role="progressbar" />);
diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx
new file mode 100644
index 000000000000..c822d5fc533f
--- /dev/null
+++ b/lib/components/src/Loader/Loader.tsx
@@ -0,0 +1,30 @@
+import React, { FunctionComponent, ComponentProps } from 'react';
+import { styled } from '@storybook/theming';
+import { rotate360 } from '../shared/animation';
+
+const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
+  borderRadius: '50%',
+  cursor: 'progress',
+  display: 'inline-block',
+  overflow: 'hidden',
+  position: 'absolute',
+  transition: 'all 200ms ease-out',
+  verticalAlign: 'top',
+  top: '50%',
+  left: '50%',
+  marginTop: -(size / 2),
+  marginLeft: -(size / 2),
+  height: size,
+  width: size,
+  zIndex: 4,
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'rgba(97, 97, 97, 0.29)',
+  borderTopColor: 'rgb(100,100,100)',
+  animation: `${rotate360} 0.7s linear infinite`,
+  mixBlendMode: 'difference',
+}));
+
+export const Loader: FunctionComponent<ComponentProps<typeof LoaderWrapper>> = (props) => (
+  <LoaderWrapper aria-label="Content is loading ..." aria-live="polite" role="status" {...props} />
+);
diff --git a/lib/components/src/ScrollArea/OverlayScrollbarsComponent.tsx b/lib/components/src/ScrollArea/OverlayScrollbarsComponent.tsx
new file mode 100644
index 000000000000..05b09912d731
--- /dev/null
+++ b/lib/components/src/ScrollArea/OverlayScrollbarsComponent.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import OverlayScrollbars from 'overlayscrollbars';
+
+interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  options?: OverlayScrollbars.Options;
+  extensions?: OverlayScrollbars.Extensions;
+}
+
+/**
+ * Using overlayscrollbars-react component results use the esm modules
+ * which doesn't go through babel leading to IE 11 uncompatibility
+ * A PR is submitted that may fix this:
+ * https://github.com/KingSora/OverlayScrollbars/pull/218
+ * */
+
+export const OverlayScrollbarsComponent: React.FC<OverlayScrollbarsComponentProps> = ({
+  options = {},
+  extensions,
+  className,
+  children,
+  ...rest
+}) => {
+  const osTargetRef = React.useRef<HTMLDivElement>();
+  const osInstance = React.useRef<OverlayScrollbars>();
+
+  React.useEffect(() => {
+    osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
+    mergeHostClassNames(osInstance.current, className);
+    return () => {
+      if (OverlayScrollbars.valid(osInstance.current)) {
+        osInstance.current.destroy();
+        osInstance.current = null;
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (OverlayScrollbars.valid(osInstance.current)) {
+      osInstance.current.options(options);
+    }
+  }, [options]);
+
+  React.useEffect(() => {
+    if (OverlayScrollbars.valid(osInstance.current)) {
+      mergeHostClassNames(osInstance.current, className);
+    }
+  }, [className]);
+
+  return (
+    <div className="os-host" {...rest} ref={osTargetRef}>
+      <div className="os-resize-observer-host" />
+      <div className="os-padding">
+        <div className="os-viewport">
+          <div className="os-content">{children}</div>
+        </div>
+      </div>
+      <div className="os-scrollbar os-scrollbar-horizontal ">
+        <div className="os-scrollbar-track">
+          <div className="os-scrollbar-handle" />
+        </div>
+      </div>
+      <div className="os-scrollbar os-scrollbar-vertical">
+        <div className="os-scrollbar-track">
+          <div className="os-scrollbar-handle" />
+        </div>
+      </div>
+      <div className="os-scrollbar-corner" />
+    </div>
+  );
+};
+
+function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) {
+  if (OverlayScrollbars.valid(osInstance)) {
+    const { host } = osInstance.getElements();
+    const regex = new RegExp(
+      `(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, '$|')}$`,
+      'g'
+    );
+    const osClassNames = host.className
+      .split(' ')
+      .filter((name) => name.match(regex))
+      .join(' ');
+
+    host.className = `${osClassNames} ${className || ''}`;
+  }
+}
diff --git a/lib/components/src/ScrollArea/ScrollArea.stories.tsx b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
index 9251095ff769..c27fac7a234c 100644
--- a/lib/components/src/ScrollArea/ScrollArea.stories.tsx
+++ b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
@@ -41,7 +41,7 @@ export default {
 
 export const vertical = () => (
   <ScrollArea vertical>
-    {list(i => (
+    {list((i) => (
       <Fragment key={i}>
         <Block>{i}</Block>
         <br />
@@ -52,7 +52,7 @@ export const vertical = () => (
 
 export const horizontal = () => (
   <ScrollArea horizontal>
-    {list(i => (
+    {list((i) => (
       <Block key={i}>{i}</Block>
     ))}
   </ScrollArea>
@@ -60,9 +60,9 @@ export const horizontal = () => (
 
 export const both = () => (
   <ScrollArea horizontal vertical>
-    {list(i => (
+    {list((i) => (
       <Fragment key={i}>
-        {list(ii => (
+        {list((ii) => (
           <Block key={ii}>{ii * i}</Block>
         ))}
         <br />
diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx
index 04d05f9779d2..f7adaeee9317 100644
--- a/lib/components/src/ScrollArea/ScrollArea.tsx
+++ b/lib/components/src/ScrollArea/ScrollArea.tsx
@@ -1,10 +1,7 @@
-// Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
-// Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
-
 import React, { Fragment, FunctionComponent } from 'react';
 import { styled, Global } from '@storybook/theming';
 
-import SimpleBar from 'simplebar-react';
+import { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';
 import { getScrollAreaStyles } from './ScrollAreaStyles';
 
 export interface ScrollProps {
@@ -14,7 +11,7 @@ export interface ScrollProps {
 }
 
 const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => (
-  <SimpleBar {...rest} scrollableNodeProps={{ tabIndex: 0 }} />
+  <OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'scroll' } }} {...rest} />
 ))<ScrollProps>(
   ({ vertical }) =>
     !vertical
diff --git a/lib/components/src/ScrollArea/ScrollAreaStyles.ts b/lib/components/src/ScrollArea/ScrollAreaStyles.ts
new file mode 100644
index 000000000000..645134a20916
--- /dev/null
+++ b/lib/components/src/ScrollArea/ScrollAreaStyles.ts
@@ -0,0 +1,445 @@
+import { Theme, CSSObject, keyframes } from '@storybook/theming';
+
+const hsResizeObserverDummyAnimation = keyframes`0%{z-index:0}to{z-index:-1}`;
+
+export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => ({
+  'html.os-html, html.os-html>.os-host': {
+    display: 'block',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    height: ('100%!important' as any) as '100%',
+    width: ('100%!important' as any) as '100%',
+    minWidth: ('100%!important' as any) as '100%',
+    minHeight: ('100%!important' as any) as '100%',
+    margin: ('0!important' as any) as 0,
+    position: ('absolute!important' as any) as 'absolute',
+  },
+  'html.os-html>.os-host>.os-padding': {
+    position: 'absolute',
+  },
+  'body.os-dragging, body.os-dragging *': {
+    cursor: 'default',
+  },
+  '.os-host, .os-host-textarea': {
+    position: 'relative',
+    overflow: ('visible!important' as any) as 'visible',
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+    justifyContent: 'flex-start',
+    alignContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  '.os-host-flexbox': {
+    overflow: ('hidden!important' as any) as 'hidden',
+    display: 'flex',
+  },
+  '.os-host-flexbox>.os-size-auto-observer': {
+    height: ('inherit!important' as any) as 'inherit',
+  },
+  '.os-host-flexbox>.os-content-glue': {
+    flexGrow: 1,
+    flexShrink: 0,
+  },
+  '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': {
+    minHeight: 0,
+    minWidth: 0,
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  },
+  '#os-dummy-scrollbar-size': {
+    position: 'fixed',
+    opacity: 0,
+    visibility: 'hidden',
+    overflow: 'scroll',
+    height: 500,
+    width: 500,
+  },
+  '#os-dummy-scrollbar-size>div': {
+    width: '200%',
+    height: '200%',
+    margin: 10,
+  },
+  '#os-dummy-scrollbar-size, .os-viewport': {},
+  '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport': {
+    scrollbarWidth: ('none!important' as any) as 'none',
+  },
+  '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner': {
+    display: ('none!important' as any) as 'none',
+    width: ('0!important' as any) as 0,
+    height: ('0!important' as any) as 0,
+    visibility: ('hidden!important' as any) as 'hidden',
+    background: '0 0!important',
+  },
+  '.os-content-glue': {
+    boxSizing: 'inherit',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    width: '100%',
+    pointerEvents: 'none',
+  },
+  '.os-padding': {
+    boxSizing: 'inherit',
+    direction: 'inherit',
+    position: 'absolute',
+    overflow: 'visible',
+    padding: 0,
+    margin: 0,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: ('auto!important' as any) as 'auto',
+    height: ('auto!important' as any) as 'auto',
+    zIndex: 1,
+  },
+  '.os-host-overflow>.os-padding': {
+    overflow: 'hidden',
+  },
+  '.os-viewport': {
+    direction: ('inherit!important' as any) as 'inherit',
+    boxSizing: ('inherit!important' as any) as 'inherit',
+    resize: ('none!important' as any) as 'none',
+    outline: ('0!important' as any) as 0,
+    position: 'absolute',
+    overflow: 'hidden',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    padding: 0,
+    margin: 0,
+  },
+  '.os-content-arrange': {
+    position: 'absolute',
+    zIndex: -1,
+    minHeight: 1,
+    minWidth: 1,
+    pointerEvents: 'none',
+  },
+  '.os-content': {
+    direction: 'inherit',
+    boxSizing: ('border-box!important' as any) as 'border-box',
+    position: 'relative',
+    display: 'block',
+    height: '100%',
+    width: '100%',
+    visibility: 'visible',
+  },
+  '.os-content:before, .os-content:after': {
+    content: "''",
+    display: 'table',
+    width: 0,
+    height: 0,
+    lineHeight: 0,
+    fontSize: 0,
+  },
+  '.os-content>.os-textarea': {
+    boxSizing: ('border-box!important' as any) as 'border-box',
+    direction: ('inherit!important' as any) as 'inherit',
+    background: '0 0!important',
+    outline: '0 transparent!important',
+    overflow: ('hidden!important' as any) as 'hidden',
+    position: ('absolute!important' as any) as 'absolute',
+    display: ('block!important' as any) as 'block',
+    top: ('0!important' as any) as 0,
+    left: ('0!important' as any) as 0,
+    margin: ('0!important' as any) as 0,
+    borderRadius: ('0!important' as any) as 0,
+    float: ('none!important' as any) as 'none',
+    filter: ('none!important' as any) as 'none',
+    border: ('0!important' as any) as 0,
+    resize: ('none!important' as any) as 'none',
+    transform: ('none!important' as any) as 'none',
+    maxWidth: ('none!important' as any) as 'none',
+    maxHeight: ('none!important' as any) as 'none',
+    boxShadow: ('none!important' as any) as 'none',
+    perspective: ('none!important' as any) as 'none',
+    opacity: ('1!important' as any) as 1,
+    zIndex: ('1!important' as any) as 1,
+    clip: ('auto!important' as any) as 'auto',
+    verticalAlign: ('baseline!important' as any) as 'baseline',
+    padding: 0,
+  },
+  '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': {
+    right: ('0!important' as any) as 0,
+  },
+  '.os-content>.os-textarea-cover': {
+    zIndex: -1,
+    pointerEvents: 'none',
+  },
+  '.os-content>.os-textarea[wrap=off]': {
+    whiteSpace: ('pre!important' as any) as 'pre',
+    margin: ('0!important' as any) as 0,
+  },
+  '.os-text-inherit': {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    fontStyle: 'inherit',
+    fontVariant: 'inherit',
+    textTransform: 'inherit',
+    textDecoration: 'inherit',
+    textIndent: 'inherit',
+    textAlign: 'inherit',
+    textShadow: 'inherit',
+    textOverflow: 'inherit',
+    letterSpacing: 'inherit',
+    wordSpacing: 'inherit',
+    lineHeight: 'inherit',
+    unicodeBidi: 'inherit',
+    direction: 'inherit',
+    color: 'inherit',
+    cursor: 'text',
+  },
+  '.os-resize-observer, .os-resize-observer-host': {
+    boxSizing: 'inherit',
+    display: 'block',
+    opacity: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+  '.os-resize-observer-host': {
+    padding: 'inherit',
+    border: 'inherit',
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+  },
+  '.os-resize-observer-host:after': {
+    content: "''",
+  },
+  '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': {
+    height: '200%',
+    width: '200%',
+    padding: 'inherit',
+    border: 'inherit',
+    margin: 0,
+    display: 'block',
+    boxSizing: 'content-box',
+  },
+  '.os-resize-observer.observed, object.os-resize-observer': {
+    boxSizing: ('border-box!important' as any) as 'border-box',
+  },
+  '.os-size-auto-observer': {
+    boxSizing: ('inherit!important' as any) as 'inherit',
+    height: '100%',
+    width: 'inherit',
+    maxWidth: 1,
+    position: 'relative',
+    float: 'left',
+    maxHeight: 1,
+    overflow: 'hidden',
+    zIndex: -1,
+    padding: 0,
+    margin: 0,
+    pointerEvents: 'none',
+    flexGrow: 'inherit',
+    flexShrink: 0,
+    flexBasis: 0,
+  },
+  '.os-size-auto-observer>.os-resize-observer': {
+    width: '1000%',
+    height: '1000%',
+    minHeight: 1,
+    minWidth: 1,
+  },
+  '.os-resize-observer-item': {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    overflow: 'hidden',
+    zIndex: -1,
+    opacity: 0,
+    direction: ('ltr!important' as any) as 'ltr',
+    flex: ('none!important' as any) as 'none',
+  },
+  '.os-resize-observer-item-final': {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    transition: ('none!important' as any) as 'none',
+    flex: ('none!important' as any) as 'none',
+  },
+  '.os-resize-observer': {
+    animationDuration: '.001s',
+    animationName: `${hsResizeObserverDummyAnimation}`,
+  },
+  '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': {
+    transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s',
+  },
+  'html.os-html>.os-host>.os-scrollbar': {
+    position: 'absolute',
+    zIndex: 999999,
+  },
+  '.os-scrollbar, .os-scrollbar-corner': {
+    position: 'absolute',
+    opacity: 1,
+    zIndex: 1,
+  },
+  '.os-scrollbar-corner': {
+    bottom: 0,
+    right: 0,
+    height: 10,
+    width: 10,
+    backgroundColor: 'transparent',
+  },
+  '.os-scrollbar': {
+    pointerEvents: 'none',
+    padding: 2,
+    boxSizing: 'border-box',
+    background: 0,
+  },
+  '.os-scrollbar-track': {
+    pointerEvents: 'auto',
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+    padding: ('0!important' as any) as 0,
+    border: ('0!important' as any) as 0,
+  },
+  '.os-scrollbar-handle': {
+    pointerEvents: 'auto',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  '.os-scrollbar-handle-off, .os-scrollbar-track-off': {
+    pointerEvents: 'none',
+  },
+  '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': {
+    pointerEvents: ('none!important' as any) as 'none',
+  },
+  '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': {
+    opacity: ('0!important' as any) as 0,
+  },
+  '.os-scrollbar-horizontal': {
+    bottom: 0,
+    left: 0,
+    right: 10,
+    height: 10,
+  },
+  '.os-scrollbar-vertical': {
+    top: 0,
+    right: 0,
+    bottom: 10,
+    width: 10,
+  },
+  '.os-host-rtl>.os-scrollbar-horizontal': {
+    right: 0,
+  },
+  '.os-host-rtl>.os-scrollbar-vertical': {
+    right: 'auto',
+    left: 0,
+  },
+  '.os-host-rtl>.os-scrollbar-corner': {
+    right: 'auto',
+    left: 0,
+  },
+  '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner': {
+    opacity: 0,
+    visibility: 'hidden',
+    pointerEvents: 'none',
+  },
+  '.os-scrollbar-corner-resize-both': {
+    cursor: 'nwse-resize',
+  },
+  '.os-host-rtl>.os-scrollbar-corner-resize-both': {
+    cursor: 'nesw-resize',
+  },
+  '.os-scrollbar-corner-resize-horizontal': {
+    cursor: 'ew-resize',
+  },
+  '.os-scrollbar-corner-resize-vertical': {
+    cursor: 'ns-resize',
+  },
+  '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': {
+    cursor: 'default',
+  },
+  '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': {
+    top: 0,
+    bottom: 0,
+  },
+  '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal': {
+    right: 0,
+    left: 0,
+  },
+  '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': {
+    opacity: ('1!important' as any) as 1,
+    visibility: ('visible!important' as any) as 'visible',
+  },
+  '.os-scrollbar-corner.os-scrollbar-corner-resize': {
+    backgroundImage:
+      'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '100% 100%',
+    pointerEvents: ('auto!important' as any) as 'auto',
+  },
+  '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': {
+    transform: 'scale(-1,1)',
+  },
+  '.os-host-overflow': {
+    overflow: ('hidden!important' as any) as 'hidden',
+  },
+  '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': {
+    left: 10,
+    right: 0,
+  },
+  '.os-scrollbar.os-scrollbar-unusable': {
+    background: 0,
+  },
+  '.os-scrollbar>.os-scrollbar-track': {
+    background: 0,
+  },
+  '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': {
+    minWidth: 30,
+  },
+  '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': {
+    minHeight: 30,
+  },
+  '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
+    transition: 'background-color .3s',
+  },
+  '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': {
+    borderRadius: 10,
+  },
+  '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
+    background: theme.color.darker,
+    opacity: 0.5,
+  },
+  '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {
+    opacity: 0.6,
+  },
+  '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before': {
+    content: "''",
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'block',
+  },
+  '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before': {
+    display: 'none',
+  },
+  '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
+    top: -6,
+    bottom: -2,
+  },
+  '.os-scrollbar-vertical .os-scrollbar-handle:before': {
+    left: -6,
+    right: -2,
+  },
+  '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': {
+    right: -6,
+    left: -2,
+  },
+});
diff --git a/lib/components/src/ScrollArea/ScrollAreaStyles.tsx b/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
deleted file mode 100644
index 370d2b053231..000000000000
--- a/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { Theme, Interpolation } from '@storybook/theming';
-
-export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Theme) => ({
-  '[data-simplebar]': {
-    position: 'relative',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    alignContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-
-  '.simplebar-wrapper': {
-    overflow: 'hidden',
-    width: 'inherit',
-    height: 'inherit',
-    maxWidth: 'inherit',
-    maxHeight: 'inherit',
-  },
-
-  '.simplebar-mask': {
-    direction: 'inherit',
-    position: 'absolute',
-    overflow: 'hidden',
-    padding: 0,
-    margin: 0,
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: 'auto !important',
-    height: 'auto !important',
-    zIndex: 0,
-  },
-
-  '.simplebar-offset': {
-    direction: 'inherit !important' as 'inherit',
-    resize: 'none !important' as 'none',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    padding: 0,
-    margin: 0,
-    WebkitOverflowScrolling: 'touch',
-  },
-
-  '.simplebar-content-wrapper': {
-    direction: 'inherit',
-    position: 'relative',
-    display: 'block',
-    visibility: 'visible',
-  },
-
-  '.simplebar-placeholder': {
-    maxHeight: '100%',
-    maxWidth: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-  },
-
-  '.simplebar-height-auto-observer-wrapper': {
-    height: '100%',
-    width: 'inherit',
-    maxWidth: 1,
-    position: 'relative',
-    float: 'left',
-    maxHeight: 1,
-    overflow: 'hidden',
-    zIndex: -1,
-    padding: 0,
-    margin: 0,
-    pointerEvents: 'none',
-    flexGrow: 'inherit',
-    flexShrink: 0,
-    flexBasis: 0,
-  },
-
-  '.simplebar-height-auto-observer': {
-    display: 'block',
-    opacity: 0,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '1000%',
-    width: '1000%',
-    minHeight: 1,
-    minWidth: 1,
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-
-  '.simplebar-track': {
-    zIndex: 1,
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    overflow: 'hidden',
-  },
-
-  '[data-simplebar].simplebar-dragging .simplebar-track': {
-    pointerEvents: 'all',
-  },
-
-  '.simplebar-scrollbar': {
-    position: 'absolute',
-    right: 2,
-    width: 7,
-    minHeight: 10,
-  },
-
-  '.simplebar-scrollbar:before': {
-    position: 'absolute',
-    content: '""',
-    borderRadius: 7,
-    left: 0,
-    right: 0,
-    opacity: 0,
-    transition: 'opacity 0.2s linear',
-    background: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-  },
-
-  '.simplebar-track .simplebar-scrollbar.simplebar-visible:before': {
-    opacity: 0.5,
-    transition: 'opacity 0s linear',
-  },
-
-  '.simplebar-track.simplebar-vertical': {
-    top: 0,
-    width: 11,
-  },
-
-  '.simplebar-track.simplebar-vertical .simplebar-scrollbar:before': {
-    top: 2,
-    bottom: 2,
-  },
-
-  '.simplebar-track.simplebar-horizontal': {
-    left: 0,
-    height: 11,
-  },
-
-  '.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before': {
-    height: '100%',
-    left: 2,
-    right: 2,
-  },
-
-  '.simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
-    right: 'auto',
-    left: 0,
-    top: 2,
-    height: 7,
-    minHeight: 0,
-    minWidth: 10,
-    width: 'auto',
-  },
-
-  '[data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical': {
-    right: 'auto',
-    left: 0,
-  },
-});
diff --git a/lib/components/src/bar/bar.tsx b/lib/components/src/bar/bar.tsx
index c47c735aa6bb..c45a3961cce9 100644
--- a/lib/components/src/bar/bar.tsx
+++ b/lib/components/src/bar/bar.tsx
@@ -65,6 +65,7 @@ const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
   flexShrink: 0,
   height: 40,
   backgroundColor: bgColor || '',
+  overflowX: 'auto',
 }));
 
 export interface FlexBarProps {
@@ -80,14 +81,12 @@ export const FlexBar: FunctionComponent<FlexBarProps> = ({
 }) => {
   const [left, right] = Children.toArray(children);
   return (
-    <div>
-      <Bar {...rest}>
-        <BarInner bgColor={backgroundColor}>
-          <Side left>{left}</Side>
-          {right ? <Side right>{right}</Side> : null}
-        </BarInner>
-      </Bar>
-    </div>
+    <Bar {...rest}>
+      <BarInner bgColor={backgroundColor}>
+        <Side left>{left}</Side>
+        {right ? <Side right>{right}</Side> : null}
+      </BarInner>
+    </Bar>
   );
 };
 FlexBar.displayName = 'FlexBar';
diff --git a/lib/components/src/bar/button.ts b/lib/components/src/bar/button.ts
deleted file mode 100644
index da09d7ef5fca..000000000000
--- a/lib/components/src/bar/button.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { styled } from '@storybook/theming';
-
-export interface TabButtonProps {
-  active?: boolean;
-  textColor?: string;
-}
-
-export const TabButton = styled.button<TabButtonProps>(
-  {
-    whiteSpace: 'normal',
-    display: 'inline-flex',
-    overflow: 'hidden',
-    verticalAlign: 'top',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-    textDecoration: 'none',
-
-    '&:empty': {
-      display: 'none',
-    },
-  },
-  ({ theme }) => ({
-    padding: '0 15px',
-    textTransform: 'capitalize',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    height: 40,
-    lineHeight: '12px',
-    cursor: 'pointer',
-    background: 'transparent',
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    fontWeight: 'bold',
-    fontSize: 13,
-
-    '&:focus': {
-      outline: '0 none',
-      borderBottomColor: theme.color.secondary,
-    },
-  }),
-  ({ active, textColor, theme }) =>
-    active
-      ? {
-          color: textColor || theme.barSelectedColor,
-          borderBottomColor: theme.barSelectedColor,
-        }
-      : {
-          color: textColor || 'inherit',
-          borderBottomColor: 'transparent',
-        }
-);
-TabButton.displayName = 'TabButton';
-
-export interface IconButtonProps {
-  active?: boolean;
-}
-
-export const IconButton = styled.button<IconButtonProps>(
-  ({ theme }) => ({
-    height: 40,
-    background: 'none',
-    color: 'inherit',
-    padding: 0,
-    cursor: 'pointer',
-
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-
-    '&:hover, &:focus': {
-      outline: '0 none',
-      color: theme.color.secondary,
-    },
-    '& > svg': {
-      width: 15,
-    },
-  }),
-  ({ active, theme }) =>
-    active
-      ? {
-          outline: '0 none',
-          borderBottomColor: theme.color.secondary,
-        }
-      : {}
-);
-IconButton.displayName = 'IconButton';
diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx
new file mode 100644
index 000000000000..c69d6ef9e593
--- /dev/null
+++ b/lib/components/src/bar/button.tsx
@@ -0,0 +1,110 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { styled, isPropValid } from '@storybook/theming';
+
+interface ButtonProps
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  href?: void;
+}
+interface LinkProps
+  extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+  href: string;
+}
+
+const ButtonOrLink = ({ children, ...restProps }: ButtonProps | LinkProps) =>
+  restProps.href != null ? (
+    <a {...(restProps as LinkProps)}>{children}</a>
+  ) : (
+    <button type="button" {...(restProps as ButtonProps)}>
+      {children}
+    </button>
+  );
+
+export interface TabButtonProps {
+  active?: boolean;
+  textColor?: string;
+}
+
+export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<TabButtonProps>(
+  {
+    whiteSpace: 'normal',
+    display: 'inline-flex',
+    overflow: 'hidden',
+    verticalAlign: 'top',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    textDecoration: 'none',
+
+    '&:empty': {
+      display: 'none',
+    },
+  },
+  ({ theme }) => ({
+    padding: '0 15px',
+    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
+    height: 40,
+    lineHeight: '12px',
+    cursor: 'pointer',
+    background: 'transparent',
+    border: '0 solid transparent',
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    fontWeight: 'bold',
+    fontSize: 13,
+
+    '&:focus': {
+      outline: '0 none',
+      borderBottomColor: theme.color.secondary,
+    },
+  }),
+  ({ active, textColor, theme }) =>
+    active
+      ? {
+          color: textColor || theme.barSelectedColor,
+          borderBottomColor: theme.barSelectedColor,
+        }
+      : {
+          color: textColor || 'inherit',
+          borderBottomColor: 'transparent',
+        }
+);
+TabButton.displayName = 'TabButton';
+
+export interface IconButtonProps {
+  active?: boolean;
+}
+
+export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<IconButtonProps>(
+  ({ theme }) => ({
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 40,
+    background: 'none',
+    color: 'inherit',
+    padding: 0,
+    cursor: 'pointer',
+
+    border: '0 solid transparent',
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+
+    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
+
+    '&:hover, &:focus': {
+      outline: '0 none',
+      color: theme.color.secondary,
+    },
+    '& > svg': {
+      width: 15,
+    },
+  }),
+  ({ active, theme }) =>
+    active
+      ? {
+          outline: '0 none',
+          borderBottomColor: theme.color.secondary,
+        }
+      : {}
+);
+IconButton.displayName = 'IconButton';
diff --git a/lib/components/src/blocks/ArgsTable/ArgControl.tsx b/lib/components/src/blocks/ArgsTable/ArgControl.tsx
new file mode 100644
index 000000000000..6a99a36ce7b6
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgControl.tsx
@@ -0,0 +1,61 @@
+import React, { FC, useCallback } from 'react';
+import { Args, ArgType } from './types';
+import {
+  ArrayControl,
+  BooleanControl,
+  ColorControl,
+  DateControl,
+  NumberControl,
+  ObjectControl,
+  OptionsControl,
+  RangeControl,
+  TextControl,
+} from '../../controls';
+
+export interface ArgControlProps {
+  row: ArgType;
+  arg: any;
+  updateArgs: (args: Args) => void;
+}
+
+const NoControl = () => <>-</>;
+
+export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
+  const { name, control } = row;
+  const onChange = useCallback(
+    (argName: string, argVal: any) => {
+      updateArgs({ [name]: argVal });
+      return argVal;
+    },
+    [updateArgs, name]
+  );
+
+  const props = { name, argType: row, value: arg, onChange };
+  switch (control?.type) {
+    case 'array':
+      return <ArrayControl {...props} {...control} />;
+    case 'boolean':
+      return <BooleanControl {...props} {...control} />;
+    case 'color':
+      return <ColorControl {...props} {...control} />;
+    case 'date':
+      return <DateControl {...props} {...control} />;
+    case 'number':
+      return <NumberControl {...props} {...control} />;
+    case 'object':
+      return <ObjectControl {...props} {...control} />;
+    case 'check':
+    case 'inline-check':
+    case 'radio':
+    case 'inline-radio':
+    case 'select':
+    case 'multi-select':
+      return <OptionsControl {...props} {...control} controlType={control.type} />;
+    case 'range':
+      return <RangeControl {...props} {...control} />;
+    case 'text':
+      return <TextControl {...props} {...control} />;
+    default:
+      return <NoControl />;
+  }
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx b/lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx
new file mode 100644
index 000000000000..804816c46e67
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx
@@ -0,0 +1,98 @@
+import React, { FC } from 'react';
+import { styled } from '@storybook/theming';
+import { JsDocTags } from './types';
+import { codeCommon } from '../../typography/shared';
+
+interface ArgJsDocArgs {
+  tags: JsDocTags;
+}
+
+export const Table = styled.table(({ theme }) => ({
+  '&&': {
+    // Escape default table styles
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    border: 'none',
+
+    tr: {
+      border: 'none !important',
+      background: 'none',
+    },
+
+    'td, th': {
+      padding: 0,
+      border: 'none',
+      width: 'auto!important',
+    },
+    // End escape
+
+    marginTop: 0,
+    marginBottom: 0,
+
+    'th:first-of-type, td:first-of-type': {
+      paddingLeft: 0,
+    },
+
+    'th:last-of-type, td:last-of-type': {
+      paddingRight: 0,
+    },
+
+    td: {
+      paddingTop: 0,
+      paddingBottom: 4,
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 10,
+        paddingRight: 0,
+      },
+    },
+
+    tbody: {
+      boxShadow: 'none',
+      border: 'none',
+    },
+
+    code: codeCommon({ theme }),
+
+    '& code': {
+      margin: 0,
+      display: 'inline-block',
+    },
+  },
+}));
+
+export const ArgJsDoc: FC<ArgJsDocArgs> = ({ tags }) => {
+  const params = (tags.params || []).filter((x) => x.description);
+  const hasDisplayableParams = params.length !== 0;
+  const hasDisplayableReturns = tags.returns != null && tags.returns.description != null;
+
+  if (!hasDisplayableParams && !hasDisplayableReturns) {
+    return null;
+  }
+
+  return (
+    <Table>
+      <tbody>
+        {hasDisplayableParams &&
+          params.map((x) => {
+            return (
+              <tr key={x.name}>
+                <td>
+                  <code>{x.name}</code>
+                </td>
+                <td>{x.description}</td>
+              </tr>
+            );
+          })}
+        {hasDisplayableReturns && (
+          <tr key="returns">
+            <td>
+              <code>Returns</code>
+            </td>
+            <td>{tags.returns.description}</td>
+          </tr>
+        )}
+      </tbody>
+    </Table>
+  );
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
new file mode 100644
index 000000000000..7cba89c4724c
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { ArgRow } from './ArgRow';
+import { TableWrapper } from './ArgsTable';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
+
+export default {
+  component: ArgRow,
+  title: 'Docs/ArgRow',
+  excludeStories: /.*Type$/,
+  decorators: [
+    (getStory) => (
+      <ResetWrapper>
+        <TableWrapper>
+          <tbody>{getStory()}</tbody>
+        </TableWrapper>
+      </ResetWrapper>
+    ),
+  ],
+};
+
+export const stringType = {
+  name: 'someString',
+  description: 'someString description',
+  type: { required: true },
+  control: { type: 'text' },
+  table: {
+    type: { summary: 'string' },
+    defaultValue: { summary: 'fixme' },
+  },
+};
+
+export const longNameType = {
+  ...stringType,
+  name: 'reallyLongStringThatTakesUpSpace',
+};
+
+export const longDescType = {
+  ...stringType,
+  description: 'really long description that takes up a lot of space. sometimes this happens.',
+};
+
+export const numberType = {
+  name: 'someNumber',
+  description: 'someNumber description',
+  type: { required: false },
+  table: {
+    type: { summary: 'number' },
+    defaultValue: { summary: '0' },
+  },
+};
+
+export const objectType = {
+  name: 'someObject',
+  description: 'A simple `objectOf` propType.',
+  table: {
+    type: { summary: 'objectOf(number)' },
+    defaultValue: { summary: '{ key: 1 }' },
+  },
+};
+
+export const arrayType = {
+  name: 'someArray',
+  description: 'array of a certain type',
+  table: {
+    type: { summary: 'number[]' },
+    defaultValue: { summary: '[1, 2, 3]' },
+  },
+};
+
+export const complexType = {
+  name: 'someComplex',
+  description: 'A very complex `objectOf` propType.',
+  table: {
+    type: {
+      summary: 'object',
+      detail: `[{
+    id: number,
+    func: func,
+    arr: [{ index: number }]
+  }]`,
+    },
+    defaultValue: {
+      summary: 'object',
+      detail: `[{
+    id: 1,
+    func: () => {},
+    arr: [{ index: 1 }]
+  }]`,
+    },
+  },
+};
+
+export const funcType = {
+  name: 'concat',
+  description: 'concat 2 string values.',
+  type: { required: true },
+  table: {
+    type: { summary: '(a: string, b: string) => string' },
+    defaultValue: { summary: 'func', detail: '(a, b) => { return a + b; }' },
+    jsDocTags: {
+      params: [
+        { name: 'a', description: 'The first string' },
+        { name: 'b', description: 'The second string' },
+      ],
+      returns: { description: 'The concatenation of both strings' },
+    },
+  },
+};
+
+export const markdownType = {
+  name: 'someString',
+  description:
+    'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)',
+  table: {
+    type: { summary: 'string' },
+  },
+};
+
+const withArgs = {
+  arg: 'string value',
+  updateArgs: action('updateArgs'),
+};
+
+export const String = () => <ArgRow row={stringType} />;
+export const LongName = () => <ArgRow row={longNameType} />;
+export const LongDesc = () => <ArgRow row={longDescType} />;
+export const Number = () => <ArgRow row={numberType} />;
+export const ObjectOf = () => <ArgRow row={objectType} />;
+export const ArrayOf = () => <ArgRow row={arrayType} />;
+export const ComplexObject = () => <ArgRow row={complexType} />;
+export const Func = () => <ArgRow row={funcType} />;
+export const Markdown = () => <ArgRow row={markdownType} />;
+export const StringCompact = () => <ArgRow compact row={stringType} />;
+export const Args = () => <ArgRow row={stringType} {...withArgs} />;
+export const ArgsCompact = () => <ArgRow compact row={stringType} {...withArgs} />;
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
new file mode 100644
index 000000000000..9b9edf8ea743
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
@@ -0,0 +1,106 @@
+import React, { FC } from 'react';
+import Markdown from 'markdown-to-jsx';
+import { transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { TableArgType, Args, TableAnnotation } from './types';
+import { ArgJsDoc } from './ArgJsDoc';
+import { ArgValue } from './ArgValue';
+import { ArgControl, ArgControlProps } from './ArgControl';
+import { codeCommon } from '../../typography/shared';
+
+export interface ArgRowProps {
+  row: TableArgType;
+  arg: any;
+  updateArgs?: (args: Args) => void;
+  compact?: boolean;
+}
+
+const Name = styled.span({ fontWeight: 'bold' });
+
+const Required = styled.span(({ theme }) => ({
+  color: theme.color.negative,
+  fontFamily: theme.typography.fonts.mono,
+  cursor: 'help',
+}));
+
+const Description = styled.div(({ theme }) => ({
+  '&&': {
+    p: {
+      margin: '0 0 10px 0',
+    },
+  },
+
+  code: codeCommon({ theme }),
+
+  '& code': {
+    margin: 0,
+    display: 'inline-block',
+  },
+}));
+
+const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.1, theme.color.defaultText)
+      : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 4 : 0,
+}));
+
+const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.1, theme.color.defaultText)
+      : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 12 : 0,
+  marginBottom: 12,
+}));
+
+export const ArgRow: FC<ArgRowProps> = (props) => {
+  const { row, updateArgs, compact } = props;
+  const { name, description } = row;
+  const table = (row.table || {}) as TableAnnotation;
+  const type = table.type || row.type;
+  const defaultValue = table.defaultValue || row.defaultValue;
+  const required = row.type?.required;
+  const hasDescription = description != null && description !== '';
+
+  return (
+    <tr>
+      <td>
+        <Name>{name}</Name>
+        {required ? <Required title="Required">*</Required> : null}
+      </td>
+      {compact ? null : (
+        <td>
+          {hasDescription && (
+            <Description>
+              <Markdown>{description}</Markdown>
+            </Description>
+          )}
+          {table.jsDocTags != null ? (
+            <>
+              <TypeWithJsDoc hasDescription={hasDescription}>
+                <ArgValue value={type} />
+              </TypeWithJsDoc>
+              <ArgJsDoc tags={table.jsDocTags} />
+            </>
+          ) : (
+            <Type hasDescription={hasDescription}>
+              <ArgValue value={type} />
+            </Type>
+          )}
+        </td>
+      )}
+      {compact ? null : (
+        <td>
+          <ArgValue value={defaultValue} />
+        </td>
+      )}
+      {updateArgs ? (
+        <td>
+          <ArgControl {...(props as ArgControlProps)} />
+        </td>
+      ) : null}
+    </tr>
+  );
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
new file mode 100644
index 000000000000..b76c763e6c37
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -0,0 +1,114 @@
+import React, { FC, useState } from 'react';
+import { styled } from '@storybook/theming';
+import memoize from 'memoizerific';
+import { PropSummaryValue } from './types';
+import { WithTooltipPure } from '../../tooltip/WithTooltip';
+import { Icons } from '../../icon/icon';
+import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
+import { codeCommon } from '../../typography/shared';
+
+interface ArgValueProps {
+  value?: PropSummaryValue;
+}
+
+interface ArgTextProps {
+  text: string;
+}
+
+interface ArgSummaryProps {
+  value: PropSummaryValue;
+}
+
+const Text = styled.span(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s2 - 1,
+}));
+
+const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  color: theme.color.secondary,
+  margin: 0,
+  whiteSpace: 'nowrap',
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
+  width,
+  minWidth: 200,
+  maxWidth: 800,
+  padding: 15,
+  // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s2 - 1,
+  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
+  boxSizing: 'content-box',
+
+  '& code': {
+    padding: '0 !important',
+  },
+}));
+
+const ArrowIcon = styled(Icons)({
+  height: 10,
+  width: 10,
+  minWidth: 10,
+  marginLeft: 4,
+});
+
+const EmptyArg = () => {
+  return <span>-</span>;
+};
+
+const ArgText: FC<ArgTextProps> = ({ text }) => {
+  return <Text>{text}</Text>;
+};
+
+const calculateDetailWidth = memoize(1000)((detail: string): string => {
+  const lines = detail.split(/\r?\n/);
+
+  return `${Math.max(...lines.map((x) => x.length))}ch`;
+});
+
+const ArgSummary: FC<ArgSummaryProps> = ({ value }) => {
+  const { summary, detail } = value;
+
+  const [isOpen, setIsOpen] = useState(false);
+  // summary is used for the default value
+  // below check fixes not displaying default values for boolean typescript vars
+  const summaryAsString =
+    summary !== undefined && summary !== null && typeof summary.toString === 'function'
+      ? summary.toString()
+      : summary;
+  if (detail == null) {
+    return <ArgText text={summaryAsString} />;
+  }
+
+  return (
+    <WithTooltipPure
+      closeOnClick
+      trigger="click"
+      placement="bottom"
+      tooltipShown={isOpen}
+      onVisibilityChange={(isVisible) => {
+        setIsOpen(isVisible);
+      }}
+      tooltip={
+        <Detail width={calculateDetailWidth(detail)}>
+          <SyntaxHighlighter language="jsx" format={false}>
+            {detail}
+          </SyntaxHighlighter>
+        </Detail>
+      }
+    >
+      <Expandable className="sbdocs-expandable">
+        <span>{summaryAsString}</span>
+        <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
+      </Expandable>
+    </WithTooltipPure>
+  );
+};
+
+export const ArgValue: FC<ArgValueProps> = ({ value }) => {
+  return value == null ? <EmptyArg /> : <ArgSummary value={value} />;
+};
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
new file mode 100644
index 000000000000..49a71e38799f
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ArgsTable, ArgsTableError } from './ArgsTable';
+import { stringType, numberType } from './ArgRow.stories';
+
+export default {
+  component: ArgsTable,
+  title: 'Docs/ArgsTable',
+};
+
+const propsSection = { category: 'props ' };
+const eventsSection = { category: 'events ' };
+
+export const Normal = () => <ArgsTable rows={{ stringType, numberType }} />;
+
+export const Compact = () => <ArgsTable compact rows={{ stringType, numberType }} />;
+
+const sectionRows = {
+  a: { ...stringType, table: { ...stringType.table, ...propsSection } },
+  b: { ...numberType, table: { ...stringType.table, ...propsSection } },
+  c: { ...stringType, table: { ...stringType.table, ...eventsSection } },
+};
+
+export const Sections = () => <ArgsTable rows={sectionRows} />;
+
+export const SectionsCompact = () => <ArgsTable compact rows={sectionRows} />;
+
+export const Error = () => <ArgsTable error={ArgsTableError.NO_COMPONENT} />;
+
+export const Empty = () => <ArgsTable rows={{}} />;
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
new file mode 100644
index 000000000000..62835eb67a77
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -0,0 +1,229 @@
+import React, { FC } from 'react';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { opacify, transparentize, darken, lighten } from 'polished';
+import { ArgRow, ArgRowProps } from './ArgRow';
+import { SectionRow, SectionRowProps } from './SectionRow';
+import { ArgTypes, Args } from './types';
+import { EmptyBlock } from '../EmptyBlock';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
+
+export const TableWrapper = styled.table<{ compact?: boolean }>(({ theme, compact }) => ({
+  '&&': {
+    // Resets for cascading/system styles
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    color: theme.color.defaultText,
+    tr: {
+      border: 'none',
+      background: 'none',
+    },
+
+    'td, th': {
+      padding: 0,
+      border: 'none',
+      verticalAlign: 'top',
+    },
+    // End Resets
+
+    fontSize: theme.typography.size.s2,
+    lineHeight: '20px',
+    textAlign: 'left',
+    width: '100%',
+
+    // Margin collapse
+    marginTop: 25,
+    marginBottom: 40,
+
+    'th:first-of-type, td:first-of-type': {
+      paddingLeft: 20,
+    },
+
+    'th:last-of-type, td:last-of-type': {
+      paddingRight: 20,
+      ...(compact ? null : { width: '20%' }),
+    },
+
+    th: {
+      color:
+        theme.base === 'light'
+          ? transparentize(0.25, theme.color.defaultText)
+          : transparentize(0.45, theme.color.defaultText),
+      paddingTop: 10,
+      paddingBottom: 10,
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+    },
+
+    td: {
+      paddingTop: '16px',
+      paddingBottom: '16px',
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+
+      '&:last-of-type': {
+        paddingRight: 20,
+      },
+    },
+
+    // Table "block" styling
+    // Emphasize tbody's background and set borderRadius
+    // Calling out because styling tables is finicky
+
+    // Makes border alignment consistent w/other DocBlocks
+    marginLeft: 1,
+    marginRight: 1,
+
+    [`tr:first-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+        borderTopLeftRadius: theme.appBorderRadius,
+      },
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+        borderTopRightRadius: theme.appBorderRadius,
+      },
+    },
+
+    [`tr:last-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+        borderBottomLeftRadius: theme.appBorderRadius,
+      },
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+        borderBottomRightRadius: theme.appBorderRadius,
+      },
+    },
+
+    tbody: {
+      // slightly different than the other DocBlock shadows to account for table styling gymnastics
+      boxShadow:
+        theme.base === 'light'
+          ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
+          ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
+          : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
+          ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
+      borderRadius: theme.appBorderRadius,
+
+      tr: {
+        background: 'transparent',
+        overflow: 'hidden',
+        [`&:not(:first-child${ignoreSsrWarning})`]: {
+          borderTopWidth: 1,
+          borderTopStyle: 'solid',
+          borderTopColor:
+            theme.base === 'light'
+              ? darken(0.1, theme.background.content)
+              : lighten(0.05, theme.background.content),
+        },
+      },
+
+      td: {
+        background: theme.background.content,
+      },
+    },
+    // End finicky table styling
+  },
+}));
+
+export enum ArgsTableError {
+  NO_COMPONENT = 'No component found',
+  ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.',
+}
+
+export interface ArgsTableRowProps {
+  rows: ArgTypes;
+  args?: Args;
+  updateArgs?: (args: Args) => void;
+  compact?: boolean;
+}
+
+export interface ArgsTableErrorProps {
+  error: ArgsTableError;
+}
+
+export type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
+type RowProps = SectionRowProps | ArgRowProps;
+
+const ArgsTableRow: FC<RowProps> = (props) => {
+  const { section, updateArgs } = props as SectionRowProps;
+  if (section) {
+    return <SectionRow {...{ section, updateArgs }} />;
+  }
+  const { row, arg, compact } = props as ArgRowProps;
+  return <ArgRow {...{ row, arg, updateArgs, compact }} />;
+};
+
+/**
+ * Display the props for a component as a props table. Each row is a collection of
+ * ArgDefs, usually derived from docgen info for the component.
+ */
+export const ArgsTable: FC<ArgsTableProps> = (props) => {
+  const { error } = props as ArgsTableErrorProps;
+  if (error) {
+    return <EmptyBlock>{error}</EmptyBlock>;
+  }
+
+  const { rows, args, updateArgs, compact } = props as ArgsTableRowProps;
+
+  const ungroupedRows: ArgTypes = {};
+  const categoryRows: Record<string, ArgTypes> = {};
+  if (rows) {
+    Object.entries(rows).forEach(([key, row]) => {
+      const { table: { category = null } = {} } = row;
+      if (category) {
+        if (!categoryRows[category]) categoryRows[category] = {};
+        categoryRows[category][key] = row;
+      } else {
+        ungroupedRows[key] = row;
+      }
+    });
+  }
+
+  const allRows: { key: string; value: any }[] = [];
+  Object.entries(ungroupedRows).forEach(([key, row]) => {
+    const arg = args && args[key];
+    allRows.push({
+      key,
+      value: { row, arg, updateArgs },
+    });
+  });
+  Object.keys(categoryRows).forEach((category) => {
+    const catRows = categoryRows[category];
+    if (Object.keys(catRows).length > 0) {
+      allRows.push({ key: category, value: { section: category, updateArgs } });
+      Object.entries(catRows).forEach(([key, row]) => {
+        const arg = args && args[key];
+        allRows.push({
+          key: `${category}_${key}`,
+          value: { row, arg, updateArgs },
+        });
+      });
+    }
+  });
+
+  if (allRows.length === 0) {
+    return <EmptyBlock>No props found for this component</EmptyBlock>;
+  }
+  return (
+    <ResetWrapper>
+      <TableWrapper compact={compact} className="docblock-propstable">
+        <thead className="docblock-propstable-head">
+          <tr>
+            <th>Name</th>
+            {compact ? null : <th>Description</th>}
+            {compact ? null : <th>Default</th>}
+            {updateArgs ? <th>Control</th> : null}
+          </tr>
+        </thead>
+        <tbody className="docblock-propstable-body">
+          {allRows.map((row) => (
+            <ArgsTableRow compact={compact} key={row.key} {...row.value} />
+          ))}
+        </tbody>
+      </TableWrapper>
+    </ResetWrapper>
+  );
+};
diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx
new file mode 100644
index 000000000000..b33652c223c1
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { SectionRow } from './SectionRow';
+import { TableWrapper } from './ArgsTable';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
+
+export default {
+  component: SectionRow,
+  title: 'Docs/ArgsSectionRow',
+  decorators: [
+    (getStory) => (
+      <ResetWrapper>
+        <TableWrapper>
+          <tbody>{getStory()}</tbody>
+        </TableWrapper>
+      </ResetWrapper>
+    ),
+  ],
+};
+
+export const props = () => <SectionRow section="Args" />;
diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.tsx
new file mode 100644
index 000000000000..79fb0bee793d
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/SectionRow.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { Args } from './types';
+
+export interface SectionRowProps {
+  section: string;
+  updateArgs?: (args: Args) => void;
+}
+
+const SectionTh = styled.th<{}>(({ theme }) => ({
+  letterSpacing: '0.35em',
+  textTransform: 'uppercase',
+  fontWeight: theme.typography.weight.black,
+  fontSize: theme.typography.size.s1 - 1,
+  lineHeight: '24px',
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+  background: `${theme.background.app} !important`,
+}));
+
+export const SectionRow: FC<SectionRowProps> = ({ section, updateArgs }) => (
+  <tr>
+    <SectionTh colSpan={updateArgs ? 4 : 3}>{section}</SectionTh>
+  </tr>
+);
diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx
new file mode 100644
index 000000000000..249c3ea7bcca
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { ArgsTable, ArgsTableProps } from './ArgsTable';
+import { TabsState } from '../../tabs/tabs';
+
+export interface TabbedArgsTableProps {
+  tabs: Record<string, ArgsTableProps>;
+}
+
+export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs }) => {
+  const entries = Object.entries(tabs);
+
+  if (entries.length === 1) {
+    return <ArgsTable {...entries[0][1]} />;
+  }
+
+  return (
+    <TabsState>
+      {entries.map((entry) => {
+        const [label, table] = entry;
+        const id = `prop_table_div_${label}`;
+        return (
+          <div key={id} id={id} title={label}>
+            {({ active }: { active: boolean }) =>
+              active ? <ArgsTable key={`prop_table_${label}`} {...table} /> : null
+            }
+          </div>
+        );
+      })}
+    </TabsState>
+  );
+};
diff --git a/lib/components/src/blocks/ArgsTable/index.ts b/lib/components/src/blocks/ArgsTable/index.ts
new file mode 100644
index 000000000000..3be4e9b364cf
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+export * from './ArgsTable';
+export * from './TabbedArgsTable';
diff --git a/lib/components/src/blocks/ArgsTable/types.ts b/lib/components/src/blocks/ArgsTable/types.ts
new file mode 100644
index 000000000000..6d1f67e08e7e
--- /dev/null
+++ b/lib/components/src/blocks/ArgsTable/types.ts
@@ -0,0 +1,48 @@
+export interface JsDocParam {
+  name: string;
+  description?: string;
+}
+
+export interface JsDocReturns {
+  description?: string;
+}
+
+export interface JsDocTags {
+  params?: JsDocParam[];
+  returns?: JsDocReturns;
+}
+
+export interface PropSummaryValue {
+  summary: string;
+  detail?: string;
+  required?: boolean;
+}
+
+export type PropType = PropSummaryValue;
+export type PropDefaultValue = PropSummaryValue;
+
+export interface ArgType {
+  name?: string;
+  description?: string;
+  defaultValue?: any;
+  [key: string]: any;
+}
+
+export interface TableAnnotation {
+  type: PropType;
+  jsDocTags?: JsDocTags;
+  defaultValue?: PropDefaultValue;
+  category?: string;
+}
+
+export type TableArgType = ArgType & {
+  table: TableAnnotation;
+};
+
+export interface ArgTypes {
+  [key: string]: ArgType;
+}
+
+export interface Args {
+  [key: string]: any;
+}
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index e09e42c91f02..2f3830b98a07 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -25,5 +25,43 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.3)',
       ]}
     />
+    <ColorItem
+      title="gradient"
+      subtitle="Grayscale"
+      colors={['linear-gradient(to right,white,black)']}
+    />
+  </ColorPalette>
+);
+
+export const NamedColors = () => (
+  <ColorPalette>
+    <ColorItem
+      title="theme.color.greyscale"
+      subtitle="Some of the greys"
+      colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
+    />
+    <ColorItem
+      title="theme.color.primary"
+      subtitle="Coral"
+      colors={{ WildWatermelon: '#FF4785' }}
+    />
+    <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: '#1EA7FD' }} />
+    <ColorItem
+      title="theme.color.positive"
+      subtitle="Green"
+      colors={{
+        Apple: 'rgba(102,191,60,1)',
+        Apple80: 'rgba(102,191,60,.8)',
+        Apple60: 'rgba(102,191,60,.6)',
+        Apple30: 'rgba(102,191,60,.3)',
+      }}
+    />
+    <ColorItem
+      title="gradient"
+      subtitle="Grayscale"
+      colors={{
+        Gradient: 'linear-gradient(to right,white,black)',
+      }}
+    />
   </ColorPalette>
 );
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index e4deaaef8fa2..800469aa1d5c 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -39,6 +39,12 @@ const SwatchLabel = styled.div(({ theme }) => ({
     display: 'inline-block',
     overflow: 'hidden',
     maxWidth: '100%',
+    textOverflow: 'ellipsis',
+  },
+
+  span: {
+    display: 'block',
+    marginTop: 2,
   },
 }));
 
@@ -107,10 +113,54 @@ const List = styled.div(({ theme }) => ({
   flexDirection: 'column',
 }));
 
+type Colors = string[] | { [key: string]: string };
+
 interface ColorProps {
   title: string;
   subtitle: string;
-  colors: string[];
+  colors: Colors;
+}
+
+function renderSwatch(color: string) {
+  return (
+    <Swatch
+      key={color}
+      title={color}
+      style={{
+        background: color,
+      }}
+    />
+  );
+}
+
+function renderSwatchLabel(color: string, colorDescription?: string) {
+  return (
+    <SwatchLabel key={color} title={color}>
+      <div>
+        {color}
+        {colorDescription && <span>{colorDescription}</span>}
+      </div>
+    </SwatchLabel>
+  );
+}
+
+function renderSwatchSpecimen(colors: Colors) {
+  if (Array.isArray(colors)) {
+    return (
+      <SwatchSpecimen>
+        <SwatchColors>{colors.map((color) => renderSwatch(color))}</SwatchColors>
+        <SwatchLabels>{colors.map((color) => renderSwatchLabel(color))}</SwatchLabels>
+      </SwatchSpecimen>
+    );
+  }
+  return (
+    <SwatchSpecimen>
+      <SwatchColors>{Object.values(colors).map((color) => renderSwatch(color))}</SwatchColors>
+      <SwatchLabels>
+        {Object.keys(colors).map((color) => renderSwatchLabel(color, colors[color]))}
+      </SwatchLabels>
+    </SwatchSpecimen>
+  );
 }
 
 /**
@@ -124,29 +174,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colo
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-
-      <Swatches>
-        <SwatchSpecimen>
-          <SwatchColors>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                title={color}
-                style={{
-                  backgroundColor: color,
-                }}
-              />
-            ))}
-          </SwatchColors>
-          <SwatchLabels>
-            {colors.map(color => (
-              <SwatchLabel key={color} title={color}>
-                <div>{color}</div>
-              </SwatchLabel>
-            ))}
-          </SwatchLabels>
-        </SwatchSpecimen>
-      </Swatches>
+      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
     </Item>
   );
 };
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
index 6b8d7121c65a..61280d1875ee 100644
--- a/lib/components/src/blocks/DocsPage.stories.tsx
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -9,8 +9,11 @@ import * as descriptionStories from './Description.stories';
 export default {
   title: 'Docs/DocsPage',
   component: DocsWrapper,
+  parameters: {
+    layout: 'fullscreen',
+  },
   decorators: [
-    storyFn => (
+    (storyFn) => (
       <DocsWrapper>
         <DocsContent>{storyFn()}</DocsContent>
       </DocsWrapper>
@@ -30,7 +33,7 @@ export const withSubtitle = () => (
     {sourceStories.jsx()}
   </>
 );
-withSubtitle.story = { name: 'with subtitle' };
+withSubtitle.storyName = 'with subtitle';
 
 export const empty = () => (
   <>
@@ -48,7 +51,7 @@ export const noText = () => (
     {sourceStories.jsx()}
   </>
 );
-noText.story = { name: 'no text' };
+noText.storyName = 'no text';
 
 export const text = () => (
   <>
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.md b/lib/components/src/blocks/DocsPageExampleCaption.md
index 3542ca2cd8d2..beb4dee3ca25 100644
--- a/lib/components/src/blocks/DocsPageExampleCaption.md
+++ b/lib/components/src/blocks/DocsPageExampleCaption.md
@@ -76,13 +76,12 @@ A basic table:
 
 Let's throw in a crazy table, because why not?
 
-|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
-| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
-| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
-| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
-| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |           +            |        +         |                    |          +           |                  |         +          |          +           |
 
 ## Code
 
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.mdx b/lib/components/src/blocks/DocsPageExampleCaption.mdx
index 3542ca2cd8d2..beb4dee3ca25 100644
--- a/lib/components/src/blocks/DocsPageExampleCaption.mdx
+++ b/lib/components/src/blocks/DocsPageExampleCaption.mdx
@@ -76,13 +76,12 @@ A basic table:
 
 Let's throw in a crazy table, because why not?
 
-|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
-| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
-| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
-| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
-| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |           +            |        +         |                    |          +           |                  |         +          |          +           |
 
 ## Code
 
diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/components/src/blocks/EmptyBlock.tsx
index 39e117943eca..f406b8b314ef 100644
--- a/lib/components/src/blocks/EmptyBlock.tsx
+++ b/lib/components/src/blocks/EmptyBlock.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { withReset } from '../typography/shared';
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
index 3f03d4e212a4..95259b8b0177 100644
--- a/lib/components/src/blocks/Preview.stories.tsx
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -89,7 +89,7 @@ export const withToolbar = () => (
   </Preview>
 );
 
-const Horizontal = styled(props => <Spaced col={1} {...props} />)({
+const Horizontal = styled((props) => <Spaced col={1} {...props} />)({
   display: 'grid',
   gridTemplateColumns: '100px calc(100vw + 100px) 100px',
 });
@@ -110,3 +110,29 @@ export const withToolbarMulti = () => (
     <Story inline storyFn={buttonFn} title="story2" />
   </Preview>
 );
+
+export const withFullscreenSingle = () => (
+  <Preview withToolbar>
+    <Story inline storyFn={buttonFn} title="story1" parameters={{ layout: 'fullscreen' }} />
+  </Preview>
+);
+
+export const withFullscreenMulti = () => (
+  <Preview withToolbar>
+    <Story inline storyFn={buttonFn} title="story1" parameters={{ layout: 'fullscreen' }} />
+    <Story inline storyFn={buttonFn} title="story2" parameters={{ layout: 'fullscreen' }} />
+  </Preview>
+);
+
+export const withCenteredSingle = () => (
+  <Preview withToolbar>
+    <Story inline storyFn={buttonFn} title="story1" parameters={{ layout: 'centered' }} />
+  </Preview>
+);
+
+export const withCenteredMulti = () => (
+  <Preview withToolbar>
+    <Story inline storyFn={buttonFn} title="story1" parameters={{ layout: 'centered' }} />
+    <Story inline storyFn={buttonFn} title="story2" parameters={{ layout: 'centered' }} />
+  </Preview>
+);
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index 17535c54e974..36bb459afd96 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -1,12 +1,12 @@
 import React, { Children, FunctionComponent, ReactElement, ReactNode, useState } from 'react';
-import { styled } from '@storybook/theming';
 import { darken } from 'polished';
-import { logger } from '@storybook/client-logger';
+import { styled } from '@storybook/theming';
 
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 import { Source, SourceProps } from './Source';
 import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
+import { ZoomContext } from './ZoomContext';
 
 export interface PreviewProps {
   isColumn?: boolean;
@@ -17,20 +17,55 @@ export interface PreviewProps {
   className?: string;
 }
 
-const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
-  display: 'flex',
-  position: 'relative',
-  flexWrap: 'wrap',
-  padding: '10px 20px 30px 20px',
-  overflow: 'auto',
-  flexDirection: isColumn ? 'column' : 'row',
-
-  '> *': {
-    flex: columns ? `1 1 calc(100%/${columns} - 20px)` : `1 1 0%`,
-    marginTop: 20,
-    maxWidth: '100%',
-  },
-}));
+type layout = 'padded' | 'fullscreen' | 'centered';
+
+const ChildrenContainer = styled.div<PreviewProps & { zoom: number; layout: layout }>(
+  ({ isColumn, columns, layout }) => ({
+    display: isColumn || !columns ? 'block' : 'flex',
+    position: 'relative',
+    flexWrap: 'wrap',
+    overflow: 'auto',
+    flexDirection: isColumn ? 'column' : 'row',
+
+    '& > *': isColumn
+      ? {
+          width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
+          display: 'block',
+        }
+      : {
+          maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
+          display: 'inline-block',
+        },
+  }),
+  ({ layout = 'padded' }) =>
+    layout === 'centered' || layout === 'padded'
+      ? {
+          padding: '30px 20px',
+          margin: -10,
+          '& > *': {
+            width: 'auto',
+            border: '10px solid transparent!important',
+          },
+        }
+      : {},
+  ({ layout = 'padded' }) =>
+    layout === 'centered'
+      ? {
+          display: 'flex',
+          justifyContent: 'center',
+          justifyItems: 'center',
+          alignContent: 'center',
+          alignItems: 'center',
+        }
+      : {},
+  ({ zoom = 1 }) => ({
+    '> *': {
+      zoom: 1 / zoom,
+    },
+  }),
+  ({ columns }) =>
+    columns && columns > 1 ? { '> *': { minWidth: `calc(100% / ${columns} - 20px)` } } : {}
+);
 
 const StyledSource = styled(Source)<{}>(({ theme }) => ({
   margin: 0,
@@ -107,23 +142,6 @@ function getStoryId(children: ReactNode) {
   return null;
 }
 
-const Relative = styled.div({
-  position: 'relative',
-});
-
-const Scale = styled.div<{ scale: number }>(
-  {
-    position: 'relative',
-  },
-  ({ scale }) =>
-    scale
-      ? {
-          transform: `scale(${1 / scale})`,
-          transformOrigin: 'top left',
-        }
-      : {}
-);
-
 const PositionedToolbar = styled(Toolbar)({
   position: 'absolute',
   top: 0,
@@ -132,6 +150,23 @@ const PositionedToolbar = styled(Toolbar)({
   height: 40,
 });
 
+const Relative = styled.div({
+  overflow: 'hidden',
+  position: 'relative',
+});
+
+const getLayout = (children: ReactElement[]): layout => {
+  return children.reduce((result, c) => {
+    if (result) {
+      return result;
+    }
+    if (typeof c === 'string' || typeof c === 'number') {
+      return 'padded';
+    }
+    return (c.props && c.props.parameters && c.props.parameters.layout) || 'padded';
+  }, undefined);
+};
+
 /**
  * A preview component for showing one or more component `Story`
  * items. The preview also shows the source for the component
@@ -150,37 +185,44 @@ const Preview: FunctionComponent<PreviewProps> = ({
   const [expanded, setExpanded] = useState(isExpanded);
   const { source, actionItem } = getSource(withSource, expanded, setExpanded);
   const [scale, setScale] = useState(1);
-  const previewClasses = className ? `${className} sbdocs sbdocs-preview` : 'sbdocs sbdocs-preview';
+  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
+
+  // @ts-ignore
+  const layout = getLayout(Children.count(children) === 1 ? [children] : children);
 
-  if (withToolbar && Array.isArray(children)) {
-    logger.warn('Cannot use toolbar with multiple preview children, disabling');
-  }
-  const showToolbar = withToolbar && !Array.isArray(children);
   return (
     <PreviewContainer
-      {...{ withSource, withToolbar: showToolbar }}
+      {...{ withSource, withToolbar }}
       {...props}
-      className={previewClasses}
+      className={previewClasses.join(' ')}
     >
-      {showToolbar && (
+      {withToolbar && (
         <PositionedToolbar
           border
-          zoom={z => setScale(scale * z)}
+          zoom={(z) => setScale(scale * z)}
           resetZoom={() => setScale(1)}
           storyId={getStoryId(children)}
           baseUrl="./iframe.html"
         />
       )}
-      <Relative>
-        <ChildrenContainer isColumn={isColumn} columns={columns}>
-          {Array.isArray(children) ? (
-            children.map((child, i) => <div key={i.toString()}>{child}</div>)
-          ) : (
-            <Scale scale={scale}>{children}</Scale>
-          )}
-        </ChildrenContainer>
-        {withSource && <ActionBar actionItems={[actionItem]} />}
-      </Relative>
+      <ZoomContext.Provider value={{ scale }}>
+        <Relative>
+          <ChildrenContainer
+            isColumn={isColumn || !Array.isArray(children)}
+            columns={columns}
+            zoom={scale}
+            layout={layout}
+          >
+            {Array.isArray(children) ? (
+              // eslint-disable-next-line react/no-array-index-key
+              children.map((child, i) => <div key={i}>{child}</div>)
+            ) : (
+              <div>{children}</div>
+            )}
+          </ChildrenContainer>
+          {withSource && <ActionBar actionItems={[actionItem]} />}
+        </Relative>
+      </ZoomContext.Provider>
       {withSource && source}
     </PreviewContainer>
   );
diff --git a/lib/components/src/blocks/PropsTable/PropDef.ts b/lib/components/src/blocks/PropsTable/PropDef.ts
index 441f2da2540a..d81a85334e20 100644
--- a/lib/components/src/blocks/PropsTable/PropDef.ts
+++ b/lib/components/src/blocks/PropsTable/PropDef.ts
@@ -23,6 +23,7 @@ export type PropDefaultValue = PropSummaryValue;
 export interface PropDef {
   name: string;
   type: PropType;
+  sbType?: any;
   required: boolean;
   description?: string;
   defaultValue?: PropDefaultValue;
diff --git a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
index 5dbb8e98818c..e0080dc4e2b4 100644
--- a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
+++ b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { styled } from '@storybook/theming';
-import { isNil } from 'lodash';
 import { JsDocTags } from './PropDef';
 import { codeCommon } from '../../typography/shared';
 
@@ -63,9 +62,9 @@ export const Table = styled.table(({ theme }) => ({
 }));
 
 export const PropJsDoc: FC<PropJsDocProps> = ({ tags }) => {
-  const params = (tags.params || []).filter(x => x.description);
+  const params = (tags.params || []).filter((x) => x.description);
   const hasDisplayableParams = params.length !== 0;
-  const hasDisplayableReturns = !isNil(tags.returns) && !isNil(tags.returns.description);
+  const hasDisplayableReturns = tags.returns != null && tags.returns.description != null;
 
   if (!hasDisplayableParams && !hasDisplayableReturns) {
     return null;
@@ -75,7 +74,7 @@ export const PropJsDoc: FC<PropJsDocProps> = ({ tags }) => {
     <Table>
       <tbody>
         {hasDisplayableParams &&
-          params.map(x => {
+          params.map((x) => {
             return (
               <tr key={x.name}>
                 <td>
diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
index 624b7330f814..d67799621a66 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
@@ -8,7 +8,7 @@ export default {
   title: 'Docs/PropRow',
   excludeStories: /.*Def$/,
   decorators: [
-    getStory => (
+    (getStory) => (
       <ResetWrapper>
         <Table>
           <tbody>{getStory()}</tbody>
diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx
index 83d45fb841eb..47aff1e268b4 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import Markdown from 'markdown-to-jsx';
-import { isNil } from 'lodash';
 import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 import { PropDef } from './PropDef';
@@ -23,7 +22,15 @@ const Required = styled.span(({ theme }) => ({
 const Description = styled.div(({ theme }) => ({
   '&&': {
     p: {
-      margin: 0,
+      margin: '0 0 10px 0',
+    },
+
+    a: {
+      textDecoration: 'underline',
+
+      '&:hover': {
+        textDecoration: 'none',
+      },
     },
   },
 
@@ -55,7 +62,7 @@ const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescr
 export const PropRow: FC<PropRowProps> = ({
   row: { name, type, required, description, defaultValue, jsDocTags },
 }) => {
-  const hasDescription = !isNil(description) && description !== '';
+  const hasDescription = description != null && description !== '';
 
   return (
     <tr>
@@ -69,7 +76,7 @@ export const PropRow: FC<PropRowProps> = ({
             <Markdown>{description}</Markdown>
           </Description>
         )}
-        {!isNil(jsDocTags) ? (
+        {jsDocTags != null ? (
           <>
             <TypeWithJsDoc hasDescription={hasDescription}>
               <PropValue value={type} />
diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx
index f86e8dec98ba..4984c0d70075 100644
--- a/lib/components/src/blocks/PropsTable/PropValue.tsx
+++ b/lib/components/src/blocks/PropsTable/PropValue.tsx
@@ -1,5 +1,4 @@
 import React, { FC, useState } from 'react';
-import { isNil } from 'lodash';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { PropSummaryValue } from './PropDef';
@@ -68,16 +67,21 @@ const PropText: FC<PropTextProps> = ({ text }) => {
 const calculateDetailWidth = memoize(1000)((detail: string): string => {
   const lines = detail.split(/\r?\n/);
 
-  return `${Math.max(...lines.map(x => x.length))}ch`;
+  return `${Math.max(...lines.map((x) => x.length))}ch`;
 });
 
 const PropSummary: FC<PropSummaryProps> = ({ value }) => {
   const { summary, detail } = value;
 
   const [isOpen, setIsOpen] = useState(false);
-
-  if (isNil(detail)) {
-    return <PropText text={summary} />;
+  // summary is used for the default value
+  // below check fixes not displaying default values for boolean typescript vars
+  const summaryAsString =
+    summary !== undefined && summary !== null && typeof summary.toString === 'function'
+      ? summary.toString()
+      : summary;
+  if (detail == null) {
+    return <PropText text={summaryAsString} />;
   }
 
   return (
@@ -86,7 +90,7 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
       trigger="click"
       placement="bottom"
       tooltipShown={isOpen}
-      onVisibilityChange={isVisible => {
+      onVisibilityChange={(isVisible) => {
         setIsOpen(isVisible);
       }}
       tooltip={
@@ -98,7 +102,7 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
       }
     >
       <Expandable className="sbdocs-expandable">
-        <span>{summary}</span>
+        <span>{summaryAsString}</span>
         <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
       </Expandable>
     </WithTooltipPure>
@@ -106,5 +110,5 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
 };
 
 export const PropValue: FC<PropValueProps> = ({ value }) => {
-  return isNil(value) ? <EmptyProp /> : <PropSummary value={value} />;
+  return value == null ? <EmptyProp /> : <PropSummary value={value} />;
 };
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index d2914eb3561d..f9af83a95dc6 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { PropRow, PropRowProps } from './PropRow';
 import { SectionRow, SectionRowProps } from './SectionRow';
-import { PropDef, PropType, PropDefaultValue, PropSummaryValue } from './PropDef';
+import { PropDef } from './PropDef';
 import { EmptyBlock } from '../EmptyBlock';
 import { ResetWrapper } from '../../typography/DocumentFormatting';
 
@@ -79,20 +79,20 @@ export const Table = styled.table<{}>(({ theme }) => ({
     marginLeft: 1,
     marginRight: 1,
 
-    'tr:first-child': {
-      'td:first-child, th:first-child': {
+    [`tr:first-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderTopLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderTopRightRadius: theme.appBorderRadius,
       },
     },
 
-    'tr:last-child': {
-      'td:first-child, th:first-child': {
+    [`tr:last-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderBottomLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderBottomRightRadius: theme.appBorderRadius,
       },
     },
@@ -147,7 +147,7 @@ export interface PropsTableErrorProps {
 
 export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | PropsTableErrorProps;
 
-const PropsTableRow: FC<SectionRowProps | PropRowProps> = props => {
+const PropsTableRow: FC<SectionRowProps | PropRowProps> = (props) => {
   const { section } = props as SectionRowProps;
   if (section) {
     return <SectionRow section={section} />;
@@ -160,7 +160,7 @@ const PropsTableRow: FC<SectionRowProps | PropRowProps> = props => {
  * Display the props for a component as a props table. Each row is a collection of
  * PropDefs, usually derived from docgen info for the component.
  */
-const PropsTable: FC<PropsTableProps> = props => {
+const PropsTable: FC<PropsTableProps> = (props) => {
   const { error } = props as PropsTableErrorProps;
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;
@@ -170,11 +170,11 @@ const PropsTable: FC<PropsTableProps> = props => {
   const { sections } = props as PropsTableSectionsProps;
   const { rows } = props as PropsTableRowsProps;
   if (sections) {
-    Object.keys(sections).forEach(section => {
+    Object.keys(sections).forEach((section) => {
       const sectionRows = sections[section];
       if (sectionRows && sectionRows.length > 0) {
         allRows.push({ key: section, value: { section } });
-        sectionRows.forEach(row => {
+        sectionRows.forEach((row) => {
           allRows.push({
             key: `${section}_${row.name}`,
             value: { row },
@@ -183,7 +183,7 @@ const PropsTable: FC<PropsTableProps> = props => {
       }
     });
   } else if (rows) {
-    allRows = rows.map(row => ({
+    allRows = rows.map((row) => ({
       key: row.name,
       value: { row },
     }));
@@ -203,7 +203,7 @@ const PropsTable: FC<PropsTableProps> = props => {
           </tr>
         </thead>
         <tbody className="docblock-propstable-body">
-          {allRows.map(row => (
+          {allRows.map((row) => (
             <PropsTableRow key={row.key} {...row.value} />
           ))}
         </tbody>
@@ -212,4 +212,4 @@ const PropsTable: FC<PropsTableProps> = props => {
   );
 };
 
-export { PropsTable, PropDef, PropType, PropDefaultValue, PropSummaryValue };
+export { PropsTable, PropDef };
diff --git a/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx b/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx
index 4574b2045ad0..74fc1c0aca06 100644
--- a/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx
+++ b/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx
@@ -5,9 +5,9 @@ import { ResetWrapper } from '../../typography/DocumentFormatting';
 
 export default {
   component: SectionRow,
-  title: 'Docs/SectionRow',
+  title: 'Docs/SectionRow/Props',
   decorators: [
-    getStory => (
+    (getStory) => (
       <ResetWrapper>
         <Table>
           <tbody>{getStory()}</tbody>
diff --git a/lib/components/src/blocks/PropsTable/index.ts b/lib/components/src/blocks/PropsTable/index.ts
new file mode 100644
index 000000000000..165798d44676
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/index.ts
@@ -0,0 +1 @@
+export * from './PropsTable';
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
index 582801087ed6..9dfa676ba820 100644
--- a/lib/components/src/blocks/Source.tsx
+++ b/lib/components/src/blocks/Source.tsx
@@ -42,7 +42,7 @@ export type SourceProps = SourceErrorProps & SourceCodeProps;
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
-const Source: FunctionComponent<SourceProps> = props => {
+const Source: FunctionComponent<SourceProps> = (props) => {
   const { error } = props as SourceErrorProps;
   if (error) {
     return <EmptyBlock {...props}>{error}</EmptyBlock>;
@@ -69,4 +69,7 @@ const Source: FunctionComponent<SourceProps> = props => {
   return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
 };
 
+Source.defaultProps = {
+  format: false,
+};
 export { Source };
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 6ec9cd33f0c7..cd1f33047c9a 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -1,4 +1,8 @@
-import React, { createElement, ElementType, FunctionComponent } from 'react';
+import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Parameters } from '@storybook/api';
+
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
@@ -21,48 +25,22 @@ interface CommonProps {
   id: string;
 }
 
-type InlineStoryProps = {
+interface InlineStoryProps extends CommonProps {
+  parameters: Parameters;
   storyFn: ElementType;
-} & CommonProps;
+}
 
 type IFrameStoryProps = CommonProps;
 
-type ErrorProps = {
-  error?: StoryError;
-} & CommonProps;
-
-// How do you XOR properties in typescript?
-export type StoryProps = (InlineStoryProps | IFrameStoryProps | ErrorProps) & {
-  inline: boolean;
-};
-
-const InlineZoomWrapper: FunctionComponent<{ scale: number }> = ({ scale, children }) => {
-  return scale === 1 ? (
-    <>{children}</>
-  ) : (
-    <div style={{ overflow: 'hidden' }}>
-      <div
-        style={{
-          transform: `scale(${1 / scale})`,
-          transformOrigin: 'top left',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
+type StoryProps = InlineStoryProps | IFrameStoryProps;
 
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
-  <div style={{ height }}>
-    <ZoomContext.Consumer>
-      {({ scale }) => (
-        <InlineZoomWrapper scale={scale}>
-          {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
-        </InlineZoomWrapper>
-      )}
-    </ZoomContext.Consumer>
-  </div>
+  <Fragment>
+    {height ? <style>{`#story--${id} { min-height: ${height} }`}</style> : null}
+    <Fragment>
+      {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
+    </Fragment>
+  </Fragment>
 );
 
 const IFrameStory: FunctionComponent<IFrameStoryProps> = ({ id, title, height = '500px' }) => (
@@ -90,19 +68,22 @@ const IFrameStory: FunctionComponent<IFrameStoryProps> = ({ id, title, height =
 );
 
 /**
- * A story element, either renderend inline or in an iframe,
+ * A story element, either rendered inline or in an iframe,
  * with configurable height.
  */
-const Story: FunctionComponent<StoryProps> = props => {
-  const { error } = props as ErrorProps;
-  const { storyFn } = props as InlineStoryProps;
-  const { id, inline, title, height } = props;
+const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryError }> = ({
+  children,
+  error,
+  inline,
+  ...props
+}) => {
+  const { id, title, height } = props;
 
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;
   }
   return inline ? (
-    <InlineStory id={id} storyFn={storyFn} title={title} height={height} />
+    <InlineStory {...(props as InlineStoryProps)} />
   ) : (
     <IFrameStory id={id} title={title} height={height} />
   );
diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx
index 0791d39c8a15..b3e9909b24f7 100644
--- a/lib/components/src/blocks/Toolbar.tsx
+++ b/lib/components/src/blocks/Toolbar.tsx
@@ -1,7 +1,6 @@
-import React, { Fragment, FunctionComponent } from 'react';
+import React, { Fragment, FunctionComponent, MouseEvent } from 'react';
 import { styled } from '@storybook/theming';
 
-import { window } from 'global';
 import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -26,7 +25,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
   <>
     <IconButton
       key="zoomin"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         zoom(0.8);
       }}
@@ -36,7 +35,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
     </IconButton>
     <IconButton
       key="zoomout"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         zoom(1.25);
       }}
@@ -46,7 +45,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
     </IconButton>
     <IconButton
       key="zoomreset"
-      onClick={e => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         resetZoom();
       }}
@@ -60,14 +59,15 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
 const Eject: FunctionComponent<EjectProps> = ({ baseUrl, storyId }) => (
   <IconButton
     key="opener"
-    onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
+    href={`${baseUrl}?id=${storyId}`}
+    target="_blank"
     title="Open canvas in new tab"
   >
     <Icons icon="share" />
   </IconButton>
 );
 
-const Bar = styled(props => <FlexBar {...props} />)({
+const Bar = styled(FlexBar)({
   position: 'absolute',
   left: 0,
   right: 0,
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
index d88c7d6791e4..e9871aea4b03 100644
--- a/lib/components/src/blocks/Typeset.tsx
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -15,7 +15,6 @@ const Label = styled.div<{}>(({ theme }) => ({
 }));
 
 const Sample = styled.div({
-  lineHeight: 1,
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
@@ -53,7 +52,7 @@ export const Typeset: FunctionComponent<TypesetProps> = ({
   ...props
 }) => (
   <Wrapper {...props} className="docblock-typeset">
-    {fontSizes.map(size => (
+    {fontSizes.map((size) => (
       <TypeSpecimen key={size}>
         <Label>{size}</Label>
         <Sample
diff --git a/lib/components/src/blocks/index.ts b/lib/components/src/blocks/index.ts
index 3020d6ec5700..1c17ed6d2374 100644
--- a/lib/components/src/blocks/index.ts
+++ b/lib/components/src/blocks/index.ts
@@ -1,7 +1,8 @@
 export * from './Description';
 export * from './DocsPage';
 export * from './Preview';
-export * from './PropsTable/PropsTable';
+export * from './PropsTable';
+export * from './ArgsTable';
 export * from './Source';
 export * from './Story';
 export * from './IFrame';
diff --git a/lib/components/src/controls/Array.stories.tsx b/lib/components/src/controls/Array.stories.tsx
new file mode 100644
index 000000000000..ff83cb0679bb
--- /dev/null
+++ b/lib/components/src/controls/Array.stories.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { ArrayControl } from './Array';
+
+export default {
+  title: 'Controls/Array',
+  component: ArrayControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState(['Bat', 'Cat', 'Rat']);
+  return (
+    <>
+      <ArrayControl name="array" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <ul>{value && value.map((item) => <li key={item}>{item}</li>)}</ul>
+    </>
+  );
+};
+
+export const Null = () => {
+  const [value, setValue] = useState(null);
+  return (
+    <>
+      <ArrayControl name="array" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <ul>{value && value.map((item) => <li key={item}>{item}</li>)}</ul>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Array.tsx b/lib/components/src/controls/Array.tsx
new file mode 100644
index 000000000000..c23da40a37f1
--- /dev/null
+++ b/lib/components/src/controls/Array.tsx
@@ -0,0 +1,32 @@
+import React, { FC, ChangeEvent, useCallback } from 'react';
+
+import { Form } from '../form';
+import { ControlProps, ArrayValue, ArrayConfig } from './types';
+
+const parse = (value: string, separator: string): ArrayValue =>
+  !value || value.trim() === '' ? [] : value.split(separator);
+
+const format = (value: ArrayValue, separator: string) => {
+  return value && Array.isArray(value) ? value.join(separator) : '';
+};
+
+export type ArrayProps = ControlProps<ArrayValue> & ArrayConfig;
+export const ArrayControl: FC<ArrayProps> = ({ name, value, onChange, separator = ',' }) => {
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>): void => {
+      const { value: newVal } = e.target;
+      onChange(name, parse(newVal, separator));
+    },
+    [onChange]
+  );
+
+  return (
+    <Form.Textarea
+      id={name}
+      name={name}
+      value={format(value, separator)}
+      onChange={handleChange}
+      size="flex"
+    />
+  );
+};
diff --git a/lib/components/src/controls/Boolean.stories.tsx b/lib/components/src/controls/Boolean.stories.tsx
new file mode 100644
index 000000000000..c0bd2bc53c2d
--- /dev/null
+++ b/lib/components/src/controls/Boolean.stories.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { BooleanControl } from './Boolean';
+
+export default {
+  title: 'Controls/Boolean',
+  component: BooleanControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <>
+      <BooleanControl name="boolean" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>value: {value.toString()}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx
new file mode 100644
index 000000000000..7cc22467c3b7
--- /dev/null
+++ b/lib/components/src/controls/Boolean.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { styled } from '@storybook/theming';
+import { ControlProps, BooleanValue, BooleanConfig } from './types';
+
+const Input = styled.input({
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'top',
+  height: 21,
+  outline: 'none',
+  border: '1px solid #ececec',
+  fontSize: '12px',
+  color: '#555',
+});
+
+const format = (value: BooleanValue): string | null => (value ? String(value) : null);
+const parse = (value: string | null) => value === 'true';
+
+export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
+export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange }) => (
+  <Input
+    id={name}
+    name={name}
+    type="checkbox"
+    onChange={(e) => onChange(name, e.target.checked)}
+    checked={value}
+  />
+);
diff --git a/lib/components/src/controls/Color.stories.tsx b/lib/components/src/controls/Color.stories.tsx
new file mode 100644
index 000000000000..852f528b6106
--- /dev/null
+++ b/lib/components/src/controls/Color.stories.tsx
@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import { ColorControl } from './Color';
+
+export default {
+  title: 'Controls/Color',
+  component: ColorControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState('#ff0');
+  return <ColorControl name="Color" value={value} onChange={(name, newVal) => setValue(newVal)} />;
+};
diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
new file mode 100644
index 000000000000..fdb17b69a34c
--- /dev/null
+++ b/lib/components/src/controls/Color.tsx
@@ -0,0 +1,56 @@
+import React, { FC, useState } from 'react';
+import { SketchPicker, ColorResult } from 'react-color';
+
+import { styled } from '@storybook/theming';
+import { Form } from '../form';
+import { ControlProps, ColorValue, ColorConfig } from './types';
+
+const Swatch = styled.div<{}>(({ theme }) => ({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  left: 6,
+  width: 16,
+  height: 16,
+  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  borderRadius: '1rem',
+}));
+
+const ColorButton = styled(Form.Button)<{ active: boolean }>(({ active }) => ({
+  zIndex: active ? 3 : 'unset',
+  width: '100%',
+}));
+
+const Popover = styled.div({
+  position: 'absolute',
+  zIndex: 2,
+});
+
+const format = (color: ColorResult) =>
+  `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`;
+
+export type ColorProps = ControlProps<ColorValue> & ColorConfig;
+export const ColorControl: FC<ColorProps> = ({ name, value, onChange }) => {
+  const [showPicker, setShowPicker] = useState(false);
+
+  return (
+    <ColorButton
+      active={showPicker}
+      type="button"
+      name={name}
+      onClick={() => setShowPicker(!showPicker)}
+      size="flex"
+    >
+      {value && value.toUpperCase()}
+      <Swatch style={{ background: value }} />
+      {showPicker ? (
+        <Popover>
+          <SketchPicker
+            color={value}
+            onChange={(color: ColorResult) => onChange(name, format(color))}
+          />
+        </Popover>
+      ) : null}
+    </ColorButton>
+  );
+};
diff --git a/lib/components/src/controls/Date.stories.tsx b/lib/components/src/controls/Date.stories.tsx
new file mode 100644
index 000000000000..50fd587e374e
--- /dev/null
+++ b/lib/components/src/controls/Date.stories.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { DateControl } from './Date';
+
+export default {
+  title: 'Controls/Date',
+  component: DateControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState(new Date(2020, 4, 20));
+  return (
+    <>
+      <DateControl name="date" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value && new Date(value).toISOString()}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Date.tsx b/lib/components/src/controls/Date.tsx
new file mode 100644
index 000000000000..3e593f727410
--- /dev/null
+++ b/lib/components/src/controls/Date.tsx
@@ -0,0 +1,108 @@
+import React, { FC, ChangeEvent, RefObject, useState, useRef, useEffect } from 'react';
+import { styled } from '@storybook/theming';
+
+import { Form } from '../form';
+import { ControlProps, DateValue, DateConfig } from './types';
+
+const parseDate = (value: string) => {
+  const [year, month, day] = value.split('-');
+  const result = new Date();
+  result.setFullYear(parseInt(year, 10));
+  result.setMonth(parseInt(month, 10) - 1);
+  result.setDate(parseInt(day, 10));
+  return result;
+};
+
+const parseTime = (value: string) => {
+  const [hours, minutes] = value.split(':');
+  const result = new Date();
+  result.setHours(parseInt(hours, 10));
+  result.setMinutes(parseInt(minutes, 10));
+  return result;
+};
+
+const formatDate = (value: Date | number) => {
+  const date = new Date(value);
+  const year = `000${date.getFullYear()}`.slice(-4);
+  const month = `0${date.getMonth() + 1}`.slice(-2);
+  const day = `0${date.getDate()}`.slice(-2);
+  return `${year}-${month}-${day}`;
+};
+
+const formatTime = (value: Date | number) => {
+  const date = new Date(value);
+  const hours = `0${date.getHours()}`.slice(-2);
+  const minutes = `0${date.getMinutes()}`.slice(-2);
+  return `${hours}:${minutes}`;
+};
+
+const FlexSpaced = styled.div({
+  flex: 1,
+  display: 'flex',
+  '&& > *': {
+    marginLeft: 10,
+  },
+  '&& > *:first-of-type': {
+    marginLeft: 0,
+  },
+});
+const FlexInput = styled(Form.Input)({ flex: 1 });
+
+export type DateProps = ControlProps<DateValue> & DateConfig;
+export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
+  const [valid, setValid] = useState(true);
+  const dateRef = useRef<HTMLInputElement>();
+  const timeRef = useRef<HTMLInputElement>();
+  useEffect(() => {
+    if (valid !== false) {
+      if (dateRef && dateRef.current) {
+        dateRef.current.value = formatDate(value);
+      }
+      if (timeRef && timeRef.current) {
+        timeRef.current.value = formatTime(value);
+      }
+    }
+  }, [value]);
+
+  const onDateChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = parseDate(e.target.value);
+    const result = new Date(value);
+    result.setFullYear(parsed.getFullYear());
+    result.setMonth(parsed.getMonth());
+    result.setDate(parsed.getDate());
+    const time = result.getTime();
+    if (time) onChange(name, time);
+    setValid(!!time);
+  };
+
+  const onTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = parseTime(e.target.value);
+    const result = new Date(value);
+    result.setHours(parsed.getHours());
+    result.setMinutes(parsed.getMinutes());
+    const time = result.getTime();
+    if (time) onChange(name, time);
+    setValid(!!time);
+  };
+
+  return (
+    <FlexSpaced>
+      <FlexInput
+        type="date"
+        max="9999-12-31" // I do this because of a rendering bug in chrome
+        ref={dateRef as RefObject<HTMLInputElement>}
+        id={`${name}date`}
+        name={`${name}date`}
+        onChange={onDateChange}
+      />
+      <FlexInput
+        type="time"
+        id={`${name}time`}
+        name={`${name}time`}
+        ref={timeRef as RefObject<HTMLInputElement>}
+        onChange={onTimeChange}
+      />
+      {!valid ? <div>invalid</div> : null}
+    </FlexSpaced>
+  );
+};
diff --git a/lib/components/src/controls/Number.stories.tsx b/lib/components/src/controls/Number.stories.tsx
new file mode 100644
index 000000000000..b15b7a1b4849
--- /dev/null
+++ b/lib/components/src/controls/Number.stories.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { NumberControl } from './Number';
+
+export default {
+  title: 'Controls/Number',
+  component: NumberControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState(10);
+  return (
+    <>
+      <NumberControl name="number" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Number.tsx b/lib/components/src/controls/Number.tsx
new file mode 100644
index 000000000000..36ec9849c7d6
--- /dev/null
+++ b/lib/components/src/controls/Number.tsx
@@ -0,0 +1,32 @@
+import React, { FC, ChangeEvent } from 'react';
+
+import { Form } from '../form';
+import { ControlProps, NumberValue, NumberConfig } from './types';
+
+type NumberProps = ControlProps<NumberValue | null> & NumberConfig;
+
+export const parse = (value: string) => {
+  const result = parseFloat(value);
+  return Number.isNaN(result) ? null : result;
+};
+
+export const format = (value: NumberValue) => (value != null ? String(value) : '');
+
+export const NumberControl: FC<NumberProps> = ({ name, value, onChange, min, max, step }) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(name, parse(event.target.value));
+  };
+
+  return (
+    <Form.Input
+      value={value}
+      type="number"
+      name={name}
+      min={min}
+      max={max}
+      step={step}
+      onChange={handleChange}
+      size="flex"
+    />
+  );
+};
diff --git a/lib/components/src/controls/Object.stories.tsx b/lib/components/src/controls/Object.stories.tsx
new file mode 100644
index 000000000000..eae894ad71f8
--- /dev/null
+++ b/lib/components/src/controls/Object.stories.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { ObjectControl } from './Object';
+
+export default {
+  title: 'Controls/Object',
+  component: ObjectControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState({ name: 'Michael', nested: { something: true } });
+  return (
+    <>
+      <ObjectControl name="object" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value && JSON.stringify(value)}</p>
+    </>
+  );
+};
+
+export const Null = () => {
+  const [value, setValue] = useState(null);
+  return (
+    <>
+      <ObjectControl name="object" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value && JSON.stringify(value)}</p>
+    </>
+  );
+};
+
+export const ValidatedAsArray = () => {
+  const [value, setValue] = useState([]);
+  return (
+    <>
+      <ObjectControl
+        name="object"
+        argType={{ type: { name: 'array' } }}
+        value={value}
+        onChange={(name, newVal) => setValue(newVal)}
+      />
+      <p>{value && JSON.stringify(value)}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
new file mode 100644
index 000000000000..38da8744a56e
--- /dev/null
+++ b/lib/components/src/controls/Object.tsx
@@ -0,0 +1,52 @@
+import React, { FC, ChangeEvent, useState, useCallback } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { Form } from '../form';
+import { ControlProps, ObjectValue, ObjectConfig } from './types';
+import { ArgType } from '../blocks';
+
+const format = (value: any) => (value ? JSON.stringify(value) : '');
+
+const parse = (value: string) => {
+  const trimmed = value && value.trim();
+  return trimmed ? JSON.parse(trimmed) : {};
+};
+
+const validate = (value: any, argType: ArgType) => {
+  if (argType && argType.type.name === 'array') {
+    return Array.isArray(value);
+  }
+  return true;
+};
+
+export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
+export const ObjectControl: FC<ObjectProps> = ({ name, argType, value, onChange }) => {
+  const [valid, setValid] = useState(true);
+  const [text, setText] = useState(format(value));
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      try {
+        const newVal = parse(e.target.value);
+        const newValid = validate(newVal, argType);
+        if (newValid && !deepEqual(value, newVal)) {
+          onChange(name, newVal);
+        }
+        setValid(newValid);
+      } catch (err) {
+        setValid(false);
+      }
+      setText(e.target.value);
+    },
+    [onChange, setValid]
+  );
+
+  return (
+    <Form.Textarea
+      name={name}
+      valid={valid ? undefined : 'error'}
+      value={text}
+      onChange={handleChange}
+      size="flex"
+    />
+  );
+};
diff --git a/lib/components/src/controls/Range.stories.tsx b/lib/components/src/controls/Range.stories.tsx
new file mode 100644
index 000000000000..4d8c36f554c7
--- /dev/null
+++ b/lib/components/src/controls/Range.stories.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { RangeControl } from './Range';
+
+export default {
+  title: 'Controls/Range',
+  component: RangeControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState(10);
+  return (
+    <>
+      <RangeControl
+        name="range"
+        value={value}
+        onChange={(name, newVal) => setValue(newVal)}
+        min={0}
+        max={20}
+        step={2}
+      />
+      <p>{value}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Range.tsx b/lib/components/src/controls/Range.tsx
new file mode 100644
index 000000000000..928c1de6e116
--- /dev/null
+++ b/lib/components/src/controls/Range.tsx
@@ -0,0 +1,65 @@
+import React, { FC, ChangeEvent } from 'react';
+
+import { styled } from '@storybook/theming';
+import { ControlProps, NumberValue, RangeConfig } from './types';
+import { parse } from './Number';
+
+type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
+
+const RangeInput = styled.input(
+  {
+    boxSizing: 'border-box',
+    height: 25,
+    outline: 'none',
+    border: '1px solid #f7f4f4',
+    borderRadius: 2,
+    fontSize: 11,
+    padding: 5,
+    color: '#444',
+  },
+  {
+    display: 'table-cell',
+    flexGrow: 1,
+  }
+);
+
+const RangeLabel = styled.span({
+  paddingLeft: 5,
+  paddingRight: 5,
+  fontSize: 12,
+  whiteSpace: 'nowrap',
+});
+
+const RangeWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const RangeControl: FC<RangeProps> = ({
+  name,
+  value = 50,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+}) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(name, parse(event.target.value));
+  };
+  return (
+    <RangeWrapper>
+      <RangeLabel>{min}</RangeLabel>
+      <RangeInput
+        value={value}
+        type="range"
+        name={name}
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+      />
+      <RangeLabel>{`${value} / ${max}`}</RangeLabel>
+    </RangeWrapper>
+  );
+};
diff --git a/lib/components/src/controls/Text.stories.tsx b/lib/components/src/controls/Text.stories.tsx
new file mode 100644
index 000000000000..02d7bb90b1fc
--- /dev/null
+++ b/lib/components/src/controls/Text.stories.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { TextControl } from './Text';
+
+export default {
+  title: 'Controls/Text',
+  component: TextControl,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState('Hello text');
+  return (
+    <>
+      <TextControl name="Text" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx
new file mode 100644
index 000000000000..b90e63bd8f4c
--- /dev/null
+++ b/lib/components/src/controls/Text.tsx
@@ -0,0 +1,13 @@
+import React, { FC, ChangeEvent } from 'react';
+
+import { Form } from '../form';
+import { ControlProps, TextValue, TextConfig } from './types';
+
+export type TextProps = ControlProps<TextValue> & TextConfig;
+
+export const TextControl: FC<TextProps> = ({ name, value, onChange }) => {
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(name, event.target.value);
+  };
+  return <Form.Textarea id={name} name={name} value={value} onChange={handleChange} size="flex" />;
+};
diff --git a/lib/components/src/controls/index.ts b/lib/components/src/controls/index.ts
new file mode 100644
index 000000000000..90e70459b6f9
--- /dev/null
+++ b/lib/components/src/controls/index.ts
@@ -0,0 +1,11 @@
+export * from './types';
+
+export * from './Array';
+export * from './Boolean';
+export * from './Color';
+export * from './Date';
+export * from './Number';
+export * from './options';
+export * from './Object';
+export * from './Range';
+export * from './Text';
diff --git a/lib/components/src/controls/options/Checkbox.tsx b/lib/components/src/controls/options/Checkbox.tsx
new file mode 100644
index 000000000000..e922ae949b85
--- /dev/null
+++ b/lib/components/src/controls/options/Checkbox.tsx
@@ -0,0 +1,77 @@
+import React, { FC, ChangeEvent, useState } from 'react';
+import { styled } from '@storybook/theming';
+import { ControlProps, OptionsMultiSelection, NormalizedOptionsConfig } from '../types';
+import { selectedKeys, selectedValues } from './helpers';
+
+const CheckboxesWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
+
+const CheckboxFieldset = styled.fieldset({
+  border: 0,
+  padding: 0,
+  margin: 0,
+});
+
+const CheckboxLabel = styled.label({
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
+});
+
+type CheckboxConfig = NormalizedOptionsConfig & { isInline: boolean };
+type CheckboxProps = ControlProps<OptionsMultiSelection> & CheckboxConfig;
+export const CheckboxControl: FC<CheckboxProps> = ({
+  name,
+  options,
+  value,
+  onChange,
+  isInline,
+}) => {
+  const initial = selectedKeys(value, options);
+  const [selected, setSelected] = useState(initial);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const option = (e.target as HTMLInputElement).value;
+    const updated = [...selected];
+    if (updated.includes(option)) {
+      updated.splice(updated.indexOf(option), 1);
+    } else {
+      updated.push(option);
+    }
+    onChange(name, selectedValues(updated, options));
+    setSelected(updated);
+  };
+
+  return (
+    <CheckboxFieldset>
+      <CheckboxesWrapper isInline={isInline}>
+        {Object.keys(options).map((key: string) => {
+          const id = `${name}-${key}`;
+          return (
+            <div key={id}>
+              <input
+                type="checkbox"
+                id={id}
+                name={name}
+                value={key}
+                onChange={handleChange}
+                checked={selected.includes(key)}
+              />
+              <CheckboxLabel htmlFor={id}>{key}</CheckboxLabel>
+            </div>
+          );
+        })}
+      </CheckboxesWrapper>
+    </CheckboxFieldset>
+  );
+};
diff --git a/lib/components/src/controls/options/Options.stories.tsx b/lib/components/src/controls/options/Options.stories.tsx
new file mode 100644
index 000000000000..5c70774b04db
--- /dev/null
+++ b/lib/components/src/controls/options/Options.stories.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { OptionsControl } from './Options';
+
+export default {
+  title: 'Controls/Options',
+  component: OptionsControl,
+};
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+
+const optionsHelper = (options, type, isMulti) => {
+  const initial = Array.isArray(options) ? options[1] : options.B;
+  const [value, setValue] = useState(isMulti ? [initial] : initial);
+  return (
+    <>
+      <OptionsControl
+        name="options"
+        options={options}
+        value={value}
+        type={type}
+        onChange={(_name, newVal) => setValue(newVal)}
+      />
+      {value && Array.isArray(value) ? (
+        // eslint-disable-next-line react/no-array-index-key
+        <ul>{value && value.map((item, idx) => <li key={idx}>{JSON.stringify(item)}</li>)}</ul>
+      ) : (
+        <p>{value ? JSON.stringify(value) : '-'}</p>
+      )}
+    </>
+  );
+};
+
+// Check
+export const CheckArray = () => optionsHelper(arrayOptions, 'check', true);
+export const InlineCheckArray = () => optionsHelper(arrayOptions, 'inline-check', true);
+export const CheckObject = () => optionsHelper(objectOptions, 'check', true);
+export const InlineCheckObject = () => optionsHelper(objectOptions, 'inline-check', true);
+
+// Radio
+export const ArrayRadio = () => optionsHelper(arrayOptions, 'radio', false);
+export const ArrayInlineRadio = () => optionsHelper(arrayOptions, 'inline-radio', false);
+export const ObjectRadio = () => optionsHelper(objectOptions, 'radio', false);
+export const ObjectInlineRadio = () => optionsHelper(objectOptions, 'inline-radio', false);
+
+// Select
+export const ArraySelect = () => optionsHelper(arrayOptions, 'select', false);
+export const ArrayMultiSelect = () => optionsHelper(arrayOptions, 'multi-select', true);
+export const ObjectSelect = () => optionsHelper(objectOptions, 'select', false);
+export const ObjectMultiSelect = () => optionsHelper(objectOptions, 'multi-select', true);
diff --git a/lib/components/src/controls/options/Options.tsx b/lib/components/src/controls/options/Options.tsx
new file mode 100644
index 000000000000..d838b30e964d
--- /dev/null
+++ b/lib/components/src/controls/options/Options.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+
+import { CheckboxControl } from './Checkbox';
+import { RadioControl } from './Radio';
+import { SelectControl } from './Select';
+import { ControlProps, OptionsSelection, OptionsConfig, Options } from '../types';
+
+/**
+ * Options can accept `options` in two formats:
+ * - array: ['a', 'b', 'c'] OR
+ * - object: { a: 1, b: 2, c: 3 }
+ *
+ * We always normalize to the more generalized object format and ONLY handle
+ * the object format in the underlying control implementations.
+ */
+const normalizeOptions = (options: Options) => {
+  if (Array.isArray(options)) {
+    return options.reduce((acc, item) => {
+      acc[item.toString()] = item;
+      return acc;
+    }, {});
+  }
+  return options;
+};
+
+export type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;
+export const OptionsControl: FC<OptionsProps> = (props) => {
+  const { type = 'select', options } = props;
+  const normalized = { ...props, options: normalizeOptions(options) };
+  switch (type) {
+    case 'check':
+    case 'inline-check':
+      return <CheckboxControl {...normalized} isInline={type === 'inline-check'} />;
+    case 'radio':
+    case 'inline-radio':
+      return <RadioControl {...normalized} isInline={type === 'inline-radio'} />;
+    case 'select':
+    case 'multi-select':
+      return <SelectControl {...normalized} isMulti={type === 'multi-select'} />;
+    default:
+      throw new Error(`Unknown options type: ${type}`);
+  }
+};
diff --git a/lib/components/src/controls/options/Radio.tsx b/lib/components/src/controls/options/Radio.tsx
new file mode 100644
index 000000000000..1f0febb4f058
--- /dev/null
+++ b/lib/components/src/controls/options/Radio.tsx
@@ -0,0 +1,49 @@
+import React, { FC } from 'react';
+import { styled } from '@storybook/theming';
+import { ControlProps, OptionsSingleSelection, NormalizedOptionsConfig } from '../types';
+import { selectedKey } from './helpers';
+
+const RadiosWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
+
+const RadioLabel = styled.label({
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
+});
+
+type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
+type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
+export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, isInline }) => {
+  const selection = selectedKey(value, options);
+  return (
+    <RadiosWrapper isInline={isInline}>
+      {Object.keys(options).map((key) => {
+        const id = `${name}-${key}`;
+        return (
+          <div key={id}>
+            <input
+              type="radio"
+              id={id}
+              name={name}
+              value={key}
+              onChange={(e) => onChange(name, options[e.currentTarget.value])}
+              checked={key === selection}
+            />
+            <RadioLabel htmlFor={id}>{key}</RadioLabel>
+          </div>
+        );
+      })}
+    </RadiosWrapper>
+  );
+};
diff --git a/lib/components/src/controls/options/Select.tsx b/lib/components/src/controls/options/Select.tsx
new file mode 100644
index 000000000000..00000cd5ce61
--- /dev/null
+++ b/lib/components/src/controls/options/Select.tsx
@@ -0,0 +1,55 @@
+import React, { FC, ChangeEvent } from 'react';
+import { styled } from '@storybook/theming';
+import { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
+import { selectedKey, selectedKeys, selectedValues } from './helpers';
+
+const OptionsSelect = styled.select({
+  width: '100%',
+  maxWidth: '300px',
+  color: 'black',
+});
+
+type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
+type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
+
+const NO_SELECTION = 'Select...';
+
+const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    onChange(name, options[e.currentTarget.value]);
+  };
+  const selection = selectedKey(value, options) || NO_SELECTION;
+
+  return (
+    <OptionsSelect value={selection} onChange={handleChange}>
+      <option key="no-selection" disabled>
+        {NO_SELECTION}
+      </option>
+      {Object.keys(options).map((key) => (
+        <option key={key}>{key}</option>
+      ))}
+    </OptionsSelect>
+  );
+};
+
+const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const selection = Array.from(e.currentTarget.options)
+      .filter((option) => option.selected)
+      .map((option) => option.value);
+    onChange(name, selectedValues(selection, options));
+  };
+  const selection = selectedKeys(value, options);
+
+  return (
+    <OptionsSelect multiple value={selection} onChange={handleChange}>
+      {Object.keys(options).map((key) => (
+        <option key={key}>{key}</option>
+      ))}
+    </OptionsSelect>
+  );
+};
+
+export const SelectControl: FC<SelectProps> = (props) =>
+  // eslint-disable-next-line react/destructuring-assignment
+  props.isMulti ? <MultiSelect {...props} /> : <SingleSelect {...props} />;
diff --git a/lib/components/src/controls/options/helpers.ts b/lib/components/src/controls/options/helpers.ts
new file mode 100644
index 000000000000..3a7667ade8f3
--- /dev/null
+++ b/lib/components/src/controls/options/helpers.ts
@@ -0,0 +1,14 @@
+import { OptionsObject } from '../types';
+
+export const selectedKey = (value: any, options: OptionsObject) => {
+  const entry = Object.entries(options).find(([_key, val]) => val === value);
+  return entry ? entry[0] : undefined;
+};
+
+export const selectedKeys = (value: any[], options: OptionsObject) =>
+  Object.entries(options)
+    .filter((entry) => value.includes(entry[1]))
+    .map((entry) => entry[0]);
+
+export const selectedValues = (keys: string[], options: OptionsObject) =>
+  keys.map((key) => options[key]);
diff --git a/lib/components/src/controls/options/index.ts b/lib/components/src/controls/options/index.ts
new file mode 100644
index 000000000000..6e8a17140bbf
--- /dev/null
+++ b/lib/components/src/controls/options/index.ts
@@ -0,0 +1 @@
+export * from './Options';
diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts
new file mode 100644
index 000000000000..34db95d76027
--- /dev/null
+++ b/lib/components/src/controls/types.ts
@@ -0,0 +1,86 @@
+import { ArgType } from '../blocks';
+
+/* eslint-disable @typescript-eslint/no-empty-interface */
+export interface ControlProps<T> {
+  name: string;
+  value: T;
+  defaultValue?: T;
+  argType?: ArgType;
+  onChange: (name: string, value: T) => T | void;
+}
+
+export type ArrayValue = string[] | readonly string[];
+export interface ArrayConfig {
+  separator?: string;
+}
+
+export type BooleanValue = boolean;
+export interface BooleanConfig {}
+
+export type ColorValue = string;
+export interface ColorConfig {}
+
+export type DateValue = Date | number;
+export interface DateConfig {}
+
+export type NumberValue = number;
+export interface NumberConfig {
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export type RangeConfig = NumberConfig;
+
+export type ObjectValue = any;
+export interface ObjectConfig {}
+
+export type OptionsSingleSelection = any;
+export type OptionsMultiSelection = any[];
+export type OptionsSelection = OptionsSingleSelection | OptionsMultiSelection;
+export type OptionsArray = any[];
+export type OptionsObject = Record<string, any>;
+export type Options = OptionsArray | OptionsObject;
+export type OptionsControlType =
+  | 'radio'
+  | 'inline-radio'
+  | 'check'
+  | 'inline-check'
+  | 'select'
+  | 'multi-select';
+
+export interface OptionsConfig {
+  options: Options;
+  type: OptionsControlType;
+}
+
+export interface NormalizedOptionsConfig {
+  options: OptionsObject;
+}
+
+export type TextValue = string;
+export interface TextConfig {}
+
+export type ControlType =
+  | 'array'
+  | 'boolean'
+  | 'color'
+  | 'date'
+  | 'number'
+  | 'range'
+  | 'object'
+  | OptionsControlType
+  | 'text';
+
+export type Control =
+  | ArrayConfig
+  | BooleanConfig
+  | ColorConfig
+  | DateConfig
+  | NumberConfig
+  | ObjectConfig
+  | OptionsConfig
+  | RangeConfig
+  | TextConfig;
+
+export type Controls = Record<string, Control>;
diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx
index 4a009c83c1ab..10cf3507a93a 100644
--- a/lib/components/src/form/field/field.tsx
+++ b/lib/components/src/form/field/field.tsx
@@ -26,8 +26,8 @@ export interface FieldProps {
   label?: ReactNode;
 }
 
-export const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
-  <Wrapper>
+export const Field: FunctionComponent<FieldProps> = ({ label, children, ...props }) => (
+  <Wrapper {...props}>
     {label ? (
       <Label>
         <span>{label}</span>
diff --git a/lib/components/src/form/form.stories.tsx b/lib/components/src/form/form.stories.tsx
index a6a869888842..38124f1c9bca 100644
--- a/lib/components/src/form/form.stories.tsx
+++ b/lib/components/src/form/form.stories.tsx
@@ -22,7 +22,7 @@ storiesOf('Basics/Form/Field', module).add('field', () => (
 storiesOf('Basics/Form/Select', module)
   .add('sizes', () => (
     <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
+      {['auto', 'flex', '100%'].map((size) => (
         <Flexed key={size} label={size}>
           <Select value="val2" onChange={action('onChange')} size={size}>
             <option value="val1">Value 1</option>
@@ -36,7 +36,7 @@ storiesOf('Basics/Form/Select', module)
   .add('validations', () => (
     <div>
       <Spaced>
-        {['error', 'warn', 'valid', null].map(valid => (
+        {['error', 'warn', 'valid', null].map((valid) => (
           <Field label={String(valid)}>
             <Select
               key={valid}
@@ -65,7 +65,7 @@ storiesOf('Basics/Form/Select', module)
 storiesOf('Basics/Form/Button', module)
   .add('sizes', () => (
     <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
+      {['auto', 'flex', '100%'].map((size) => (
         <Flexed key={size} label={size}>
           <Button size={size}>click this button</Button>
         </Flexed>
@@ -74,7 +74,7 @@ storiesOf('Basics/Form/Button', module)
   ))
   .add('validations', () => (
     <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
+      {['error', 'warn', 'valid', null].map((valid) => (
         <Flexed key={valid} label={String(valid)}>
           <Button size="100%" valid={valid}>
             click this button
@@ -87,7 +87,7 @@ storiesOf('Basics/Form/Button', module)
 storiesOf('Basics/Form/Textarea', module)
   .add('sizes', () => (
     <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
+      {['auto', 'flex', '100%'].map((size) => (
         <Flexed key={size} label={size}>
           <Textarea defaultValue="textarea" size={size} />
         </Flexed>
@@ -96,7 +96,7 @@ storiesOf('Basics/Form/Textarea', module)
   ))
   .add('validations', () => (
     <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
+      {['error', 'warn', 'valid', null].map((valid) => (
         <Flexed key={valid} label={String(valid)}>
           <Textarea defaultValue="textarea" size="100%" valid={valid} />
         </Flexed>
@@ -105,18 +105,31 @@ storiesOf('Basics/Form/Textarea', module)
   ))
   .add('alignment', () => (
     <Spaced>
-      {['end', 'center', 'start'].map(align => (
+      {['end', 'center', 'start'].map((align) => (
         <Flexed key={align} label={align}>
           <Textarea defaultValue="textarea" size="100%" align={align} />
         </Flexed>
       ))}
     </Spaced>
+  ))
+  .add('height', () => (
+    <Spaced>
+      {[100, 200, undefined].map((height) => (
+        <Flexed key={(height || 'undefined').toString()} label={(height || 'undefined').toString()}>
+          <Textarea
+            defaultValue={[...new Array(650)].fill('textarea textvalue').join(' ')}
+            size="100%"
+            height={height}
+          />
+        </Flexed>
+      ))}
+    </Spaced>
   ));
 
 storiesOf('Basics/Form/Input', module)
   .add('sizes', () => (
     <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
+      {['auto', 'flex', '100%'].map((size) => (
         <Flexed key={size} label={size}>
           <Input defaultValue="text" size={size} />
         </Flexed>
@@ -125,7 +138,7 @@ storiesOf('Basics/Form/Input', module)
   ))
   .add('validations', () => (
     <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
+      {['error', 'warn', 'valid', null].map((valid) => (
         <Flexed key={valid} label={String(valid)}>
           <Input defaultValue="text" size="100%" valid={valid} />
         </Flexed>
@@ -134,7 +147,7 @@ storiesOf('Basics/Form/Input', module)
   ))
   .add('alignment', () => (
     <Spaced>
-      {['end', 'center', 'start'].map(align => (
+      {['end', 'center', 'start'].map((align) => (
         <Flexed key={align} label={align}>
           <Input defaultValue="text" size="100%" align={align} />
         </Flexed>
diff --git a/lib/components/src/form/input/input.tsx b/lib/components/src/form/input/input.tsx
index 6badf1b9b762..a825f3f76e62 100644
--- a/lib/components/src/form/input/input.tsx
+++ b/lib/components/src/form/input/input.tsx
@@ -51,6 +51,7 @@ export interface InputStyleProps {
   size?: Sizes;
   align?: Alignments;
   valid?: ValidationStates;
+  height?: number;
 }
 
 const sizes = ({ size }: { size?: Sizes }): CSSObject => {
@@ -116,10 +117,6 @@ export const Input = Object.assign(
   }
 );
 
-// (Input).styles = { ...styleResets, ...styles };
-// (Input).sizes = sizes;
-// (Input).alignment = alignment;
-
 type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, keyof InputStyleProps> &
   InputStyleProps;
 export const Select = Object.assign(
@@ -144,9 +141,10 @@ export const Textarea = Object.assign(
     forwardRef<any, TextareaProps>(({ size, valid, align, ...props }, ref) => (
       <TextareaAutoResize {...props} ref={ref} />
     ))
-  )<TextareaProps>(styles, sizes, alignment, validation, {
+  )<TextareaProps>(styles, sizes, alignment, validation, ({ height = 400 }) => ({
     overflow: 'visible',
-  }),
+    maxHeight: height,
+  })),
   {
     displayName: 'Textarea',
   }
diff --git a/lib/components/src/html.tsx b/lib/components/src/html.tsx
index 9b45fa7c582f..d97507002d96 100644
--- a/lib/components/src/html.tsx
+++ b/lib/components/src/html.tsx
@@ -1,19 +1,15 @@
-import * as React from 'react';
-import * as rawComponents from './typography/DocumentFormatting';
+import { createElement, ElementType } from 'react';
+
+import { components as rawComponents } from './typography/DocumentFormatting';
 
 export * from './typography/DocumentFormatting';
 
-export const components = Object.entries(rawComponents).reduce(
-  (acc, [k, V]) => ({
-    ...acc,
-    [k.toLowerCase()]: ({ className, ...rest }: { className: string }) => {
-      return (
-        <V
-          {...rest}
-          className={`sbdocs sbdocs-${k.toLowerCase()}${className ? ` ${className}` : ''}`}
-        />
-      );
-    },
-  }),
-  {}
-);
+export { rawComponents as components };
+
+const resetComponents: Record<string, ElementType> = {};
+
+Object.keys(rawComponents).forEach((key) => {
+  resetComponents[key] = (props: any) => createElement(key, props);
+});
+
+export { resetComponents };
diff --git a/lib/components/src/icon/icon.stories.tsx b/lib/components/src/icon/icon.stories.tsx
index 285f4be9b061..92892d5e9a1d 100644
--- a/lib/components/src/icon/icon.stories.tsx
+++ b/lib/components/src/icon/icon.stories.tsx
@@ -59,7 +59,7 @@ const list = Object.keys(icons).sort() as IconKey[];
 storiesOf('Basics/Icon', module)
   .add('labels', () => (
     <List>
-      {list.map(key => (
+      {list.map((key) => (
         <Item key={key}>
           <Icons icon={key} /> <Meta>{key}</Meta>
         </Item>
@@ -68,7 +68,7 @@ storiesOf('Basics/Icon', module)
   ))
   .add('no labels', () => (
     <List>
-      {list.map(key => (
+      {list.map((key) => (
         <Item minimal key={key}>
           <Icons icon={key} />
         </Item>
diff --git a/lib/components/src/icon/icon.tsx b/lib/components/src/icon/icon.tsx
index fc8f1b1a0202..d67d57db6c12 100644
--- a/lib/components/src/icon/icon.tsx
+++ b/lib/components/src/icon/icon.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import icons, { IconKey } from './icons';
 
@@ -8,7 +8,7 @@ const Path = styled.path({
   fill: 'currentColor',
 });
 
-export interface IconsProps {
+export interface IconsProps extends ComponentProps<typeof Svg> {
   icon: IconKey;
 }
 
diff --git a/lib/components/src/icon/svg.tsx b/lib/components/src/icon/svg.tsx
index 5ac7b150ef3d..3e2eb66254c5 100644
--- a/lib/components/src/icon/svg.tsx
+++ b/lib/components/src/icon/svg.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@storybook/theming';
 
-export interface SvgProps {
+interface SvgProps {
   inline?: boolean;
 }
 
diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
index 8768052d31c2..3e088e977270 100644
--- a/lib/components/src/index.ts
+++ b/lib/components/src/index.ts
@@ -3,7 +3,12 @@ export { Badge } from './Badge/Badge';
 // Typography
 export { Link } from './typography/link/link';
 export { DocumentWrapper } from './typography/DocumentWrapper';
-export { SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
+export {
+  SyntaxHighlighter,
+  SyntaxHighlighterProps,
+  SyntaxHighlighterRendererProps,
+  createSyntaxHighlighterElement,
+} from './syntaxhighlighter/syntaxhighlighter';
 
 // UI
 export { ActionBar } from './ActionBar/ActionBar';
@@ -29,9 +34,13 @@ export { Bar, FlexBar } from './bar/bar';
 export { AddonPanel } from './addon-panel/addon-panel';
 
 // Graphics
-export { Icons } from './icon/icon';
+export { Icons, IconsProps } from './icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
 
 // Doc blocks
 export * from './blocks';
+export * from './controls';
+
+// Loader
+export { Loader } from './Loader/Loader';
diff --git a/lib/components/src/placeholder/placeholder.tsx b/lib/components/src/placeholder/placeholder.tsx
index 64b2968afdf2..31e48adebb2b 100644
--- a/lib/components/src/placeholder/placeholder.tsx
+++ b/lib/components/src/placeholder/placeholder.tsx
@@ -1,18 +1,18 @@
 import React, { Children, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
-const Title = styled.div`
-  font-weight: ${props => props.theme.typography.weight.bold};
-`;
+const Title = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+}));
 
-const Desc = styled.div``;
+const Desc = styled.div();
 
-const Message = styled.div`
-  padding: 30px;
-  text-align: center;
-  color: ${props => props.theme.color.defaultText};
-  font-size: ${props => props.theme.typography.size.s2 - 1}px;
-`;
+const Message = styled.div(({ theme }) => ({
+  padding: 30,
+  textAlign: 'center',
+  color: theme.color.defaultText,
+  fontSize: theme.typography.size.s2 - 1,
+}));
 
 export const Placeholder: FunctionComponent = ({ children, ...props }) => {
   const [title, desc] = Children.toArray(children);
diff --git a/lib/components/src/shared/animation.ts b/lib/components/src/shared/animation.ts
new file mode 100644
index 000000000000..5f178d5653bd
--- /dev/null
+++ b/lib/components/src/shared/animation.ts
@@ -0,0 +1,10 @@
+import { keyframes } from '@storybook/theming';
+
+export const rotate360 = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+`;
diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
index 7666a4264932..8ce2e6274b61 100644
--- a/lib/components/src/spaced/Spaced.tsx
+++ b/lib/components/src/spaced/Spaced.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
@@ -19,7 +19,7 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          '& > *:first-of-type': {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginLeft: 0,
           },
         }
@@ -27,7 +27,7 @@ const Container = styled.div<ContainerProps>(
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          '& > *:first-of-type': {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginTop: 0,
           },
         },
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 73bfd3d6ea4b..7824cd5da7dd 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { ThemeProvider, themes, convert, ensure } from '@storybook/theming';
+import { ThemeProvider, themes, ensure } from '@storybook/theming';
 import { SyntaxHighlighter } from './syntaxhighlighter';
 
 storiesOf('Basics/SyntaxHighlighter', module)
@@ -9,6 +9,56 @@ storiesOf('Basics/SyntaxHighlighter', module)
       npx npm-check-updates '/storybook/' -u && npm install
     </SyntaxHighlighter>
   ))
+  .add('css', () => (
+    <SyntaxHighlighter language="css" copyable={false}>
+      {`
+        .className {
+          border: 1px solid hotpink;
+        }
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('json', () => (
+    <SyntaxHighlighter language="json" copyable={false}>
+      {`
+      {
+        "number": 1,
+        "string": "something",
+        "object": {
+          "property": "value",
+        },
+        array: [1,2,3],
+      }
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('markdown', () => (
+    <SyntaxHighlighter language="markdown" copyable={false}>
+      {`
+      # a big header
+
+      some code:
+
+      ~~~js
+      const name = "a string";
+      ~~~
+
+      > crazy
+
+      `}
+    </SyntaxHighlighter>
+  ))
+  .add('yaml', () => (
+    <SyntaxHighlighter language="yaml" copyable={false}>
+      {`
+        product:
+        - sku         : BL394D
+          quantity    : 4
+          description : Basketball
+          price       : 450.00
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('jsx', () => (
     <SyntaxHighlighter language="jsx" copyable={false}>
       {`import { Good, Things } from 'life';
@@ -19,6 +69,19 @@ storiesOf('Basics/SyntaxHighlighter', module)
       `}
     </SyntaxHighlighter>
   ))
+  .add('js', () => (
+    <SyntaxHighlighter language="jsx" copyable={false}>
+      {`import React, { createElement } from 'react';
+        import { Good, Things } from 'life';
+
+        const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
+
+        console.log(result);
+
+        export { result as default };
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('unsupported', () => (
     <SyntaxHighlighter language="C#" bordered copyable>
       {`
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 709c161f22d2..8a1099b60e6c 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -3,28 +3,37 @@ import { styled } from '@storybook/theming';
 import { document, window } from 'global';
 import memoize from 'memoizerific';
 
-import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
-import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
+import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
+import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';
+import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
+import html from 'react-syntax-highlighter/dist/cjs/languages/prism/markup';
+import md from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown';
+import yml from 'react-syntax-highlighter/dist/cjs/languages/prism/yaml';
+import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript';
 
 import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
-
+// @ts-ignore
+import createElement from 'react-syntax-highlighter/dist/cjs/create-element';
 import { ActionBar } from '../ActionBar/ActionBar';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 import { formatter } from './formatter';
 
+export { createElement as createSyntaxHighlighterElement };
+
 ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
+ReactSyntaxHighlighter.registerLanguage('json', json);
+ReactSyntaxHighlighter.registerLanguage('yml', yml);
+ReactSyntaxHighlighter.registerLanguage('md', md);
 ReactSyntaxHighlighter.registerLanguage('bash', bash);
 ReactSyntaxHighlighter.registerLanguage('css', css);
 ReactSyntaxHighlighter.registerLanguage('html', html);
 ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
 ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
 
-const themedSyntax = memoize(2)(theme =>
+const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
 );
 
@@ -82,6 +91,11 @@ const Code = styled.code({
   opacity: 1,
 });
 
+export interface SyntaxHighlighterRendererProps {
+  rows: any[];
+  stylesheet: string;
+  useInlineStyles: boolean;
+}
 export interface SyntaxHighlighterProps {
   language: string;
   copyable?: boolean;
@@ -89,6 +103,7 @@ export interface SyntaxHighlighterProps {
   padded?: boolean;
   format?: boolean;
   className?: string;
+  renderer?: (props: SyntaxHighlighterRendererProps) => React.ReactNode;
 }
 
 export interface SyntaxHighlighterState {
diff --git a/lib/components/src/tabs/tabs.stories.tsx b/lib/components/src/tabs/tabs.stories.tsx
index e008ea26a225..18924fa66515 100644
--- a/lib/components/src/tabs/tabs.stories.tsx
+++ b/lib/components/src/tabs/tabs.stories.tsx
@@ -5,7 +5,7 @@ import { logger } from '@storybook/client-logger';
 
 import { Tabs, TabsState, TabWrapper } from './tabs';
 
-const colours = Array.from(new Array(15), (val, index) => index).map(i =>
+const colours = Array.from(new Array(15), (val, index) => index).map((i) =>
   Math.floor((1 / 15) * i * 16777215)
     .toString(16)
     .padStart(6, '0')
@@ -114,7 +114,7 @@ const content = Object.entries(panels).map(([k, v]) => (
 ));
 
 storiesOf('Basics/Tabs', module)
-  .addDecorator(s => (
+  .addDecorator((s) => (
     <div
       style={{
         position: 'relative',
@@ -200,7 +200,12 @@ storiesOf('Basics/Tabs', module)
     </Tabs>
   ))
   .add('stateless - absolute', () => (
-    <Tabs bordered absolute selected="test3" actions={{ onSelect }}>
+    <Tabs absolute selected="test3" actions={{ onSelect }}>
+      {content}
+    </Tabs>
+  ))
+  .add('stateless - absolute bordered', () => (
+    <Tabs absolute bordered selected="test3" actions={{ onSelect }}>
       {content}
     </Tabs>
   ))
diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx
index 0a824afad720..154e3605a0b0 100644
--- a/lib/components/src/tabs/tabs.tsx
+++ b/lib/components/src/tabs/tabs.tsx
@@ -7,8 +7,8 @@ import React, {
   MouseEvent,
   ReactNode,
 } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
+import { sanitize } from '@storybook/csf';
 
 import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
@@ -30,6 +30,7 @@ const Wrapper = styled.div<WrapperProps>(
           border: `1px solid ${theme.appBorderColor}`,
           borderRadius: theme.appBorderRadius,
           overflow: 'hidden',
+          boxSizing: 'border-box',
         }
       : {},
   ({ absolute }) =>
@@ -56,6 +57,7 @@ export const TabBar = styled.div({
 
 export interface ContentProps {
   absolute?: boolean;
+  bordered?: boolean;
 }
 
 const Content = styled.div<ContentProps>(
@@ -65,25 +67,32 @@ const Content = styled.div<ContentProps>(
   },
   ({ theme }) => ({
     fontSize: theme.typography.size.s2 - 1,
+    background: theme.background.content,
   }),
-  ({ absolute }) =>
+  ({ bordered, theme }) =>
+    bordered
+      ? {
+          borderRadius: `0 0 ${theme.appBorderRadius - 1}px ${theme.appBorderRadius - 1}px`,
+        }
+      : {},
+  ({ absolute, bordered }) =>
     absolute
       ? {
-          height: 'calc(100% - 40px)',
+          height: `calc(100% - ${bordered ? 42 : 40}px)`,
 
           position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          top: 40,
+          left: 0 + (bordered ? 1 : 0),
+          right: 0 + (bordered ? 1 : 0),
+          bottom: 0 + (bordered ? 1 : 0),
+          top: 40 + (bordered ? 1 : 0),
           overflow: 'auto',
           [`& > *:first-child${ignoreSsrWarning}`]: {
             position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            top: 0,
-            height: '100%',
+            left: 0 + (bordered ? 1 : 0),
+            right: 0 + (bordered ? 1 : 0),
+            bottom: 0 + (bordered ? 1 : 0),
+            top: 0 + (bordered ? 1 : 0),
+            height: `calc(100% - ${bordered ? 2 : 0}px)`,
             overflow: 'auto',
           },
         }
@@ -108,13 +117,11 @@ export const TabWrapper: FunctionComponent<TabWrapperProps> = ({ active, render,
   <VisuallyHidden active={active}>{render ? render() : children}</VisuallyHidden>
 );
 
-export const panelProps = {
-  active: PropTypes.bool,
-};
+export const panelProps = {};
 
 const childrenToList = (children: any, selected: string) =>
   Children.toArray(children).map(
-    ({ props: { title, id, color, children: childrenOfChild } }, index) => {
+    ({ props: { title, id, color, children: childrenOfChild } }: React.ReactElement, index) => {
       const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
       return {
         active: selected ? id === selected : index === 0,
@@ -139,7 +146,7 @@ export interface TabsProps {
   selected?: string;
   actions?: {
     onSelect: (id: string) => void;
-  };
+  } & Record<string, any>;
   backgroundColor?: string;
   absolute?: boolean;
   bordered?: boolean;
@@ -153,26 +160,30 @@ export const Tabs: FunctionComponent<TabsProps> = memo(
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <FlexBar border backgroundColor={backgroundColor}>
           <TabBar role="tablist">
-            {list.map(({ title, id, active, color }) => (
-              <TabButton
-                type="button"
-                key={id}
-                active={active}
-                textColor={color}
-                onClick={(e: MouseEvent) => {
-                  e.preventDefault();
-                  actions.onSelect(id);
-                }}
-                role="tab"
-                className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
-              >
-                {typeof title === 'function' ? title() : title}
-              </TabButton>
-            ))}
+            {list.map(({ title, id, active, color }) => {
+              const tabTitle = typeof title === 'function' ? title() : title;
+              return (
+                <TabButton
+                  id={`tabbutton-${sanitize(tabTitle)}`}
+                  className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
+                  type="button"
+                  key={id}
+                  active={active}
+                  textColor={color}
+                  onClick={(e: MouseEvent) => {
+                    e.preventDefault();
+                    actions.onSelect(id);
+                  }}
+                  role="tab"
+                >
+                  {tabTitle}
+                </TabButton>
+              );
+            })}
           </TabBar>
           {tools ? <Fragment>{tools}</Fragment> : null}
         </FlexBar>
-        <Content absolute={absolute} tabIndex={0}>
+        <Content id="panel-tab-content" bordered={bordered} absolute={absolute} tabIndex={0}>
           {list.map(({ id, active, render }) => render({ key: id, active }))}
         </Content>
       </Wrapper>
@@ -224,6 +235,10 @@ export class TabsState extends Component<TabsStateProps, TabsStateState> {
     };
   }
 
+  handlers = {
+    onSelect: (id: string) => this.setState({ selected: id }),
+  };
+
   render() {
     const { bordered = false, absolute = false, children, backgroundColor } = this.props;
     const { selected } = this.state;
@@ -233,9 +248,7 @@ export class TabsState extends Component<TabsStateProps, TabsStateState> {
         absolute={absolute}
         selected={selected}
         backgroundColor={backgroundColor}
-        actions={{
-          onSelect: id => this.setState({ selected: id }),
-        }}
+        actions={this.handlers}
       >
         {children}
       </Tabs>
diff --git a/lib/components/src/tooltip/ListItem.tsx b/lib/components/src/tooltip/ListItem.tsx
index 7505e37280f9..94ad70b0a281 100644
--- a/lib/components/src/tooltip/ListItem.tsx
+++ b/lib/components/src/tooltip/ListItem.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { transparentize } from 'polished';
@@ -184,7 +184,7 @@ const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
 
 export type LinkWrapperType = FunctionComponent;
 
-export interface ListItemProps {
+export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
   loading?: boolean;
   left?: ReactNode;
   title?: ReactNode;
@@ -192,9 +192,8 @@ export interface ListItemProps {
   right?: ReactNode;
   active?: boolean;
   disabled?: boolean;
-  href?: string | object;
+  href?: string;
   LinkWrapper?: LinkWrapperType;
-  onClick?: () => void;
 }
 
 const ListItem: FunctionComponent<ListItemProps> = ({
diff --git a/lib/components/src/tooltip/TooltipLinkList.stories.tsx b/lib/components/src/tooltip/TooltipLinkList.stories.tsx
index 9eb189c7aa5d..3afc5dd84379 100644
--- a/lib/components/src/tooltip/TooltipLinkList.stories.tsx
+++ b/lib/components/src/tooltip/TooltipLinkList.stories.tsx
@@ -39,7 +39,7 @@ export const links = [
 ];
 
 storiesOf('basics/Tooltip/TooltipLinkList', module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/lib/components/src/tooltip/TooltipLinkList.tsx b/lib/components/src/tooltip/TooltipLinkList.tsx
index 26772a627524..6f046e14cef1 100644
--- a/lib/components/src/tooltip/TooltipLinkList.tsx
+++ b/lib/components/src/tooltip/TooltipLinkList.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, Key, ReactNode } from 'react';
+import React, { FunctionComponent, useCallback, SyntheticEvent } from 'react';
 import { styled } from '@storybook/theming';
 
 import ListItem, { LinkWrapperType, ListItemProps } from './ListItem';
@@ -15,9 +15,10 @@ const List = styled.div<{}>(
   })
 );
 
-export interface Link extends ListItemProps {
+export interface Link extends Omit<ListItemProps, 'onClick'> {
   id: string;
   isGatsby?: boolean;
+  onClick?: (event: SyntheticEvent, item: ListItemProps) => void;
 }
 
 export interface TooltipLinkListProps {
@@ -25,21 +26,37 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
+const Item: FunctionComponent<TooltipLinkListProps['links'][number]> = (props) => {
+  const { LinkWrapper, onClick: onClickFromProps, ...rest } = props;
+  const { title, href, active } = rest;
+  const onClick = useCallback(
+    (event: SyntheticEvent) => {
+      onClickFromProps(event, rest);
+    },
+    [onClickFromProps]
+  );
+
+  const hasOnClick = !!onClickFromProps;
+
+  return (
+    <ListItem
+      title={title}
+      active={active}
+      href={href}
+      LinkWrapper={LinkWrapper}
+      {...rest}
+      {...(hasOnClick ? { onClick } : {})}
+    />
+  );
+};
+
 export const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({
   links,
   LinkWrapper,
 }) => (
   <List>
-    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
-      <ListItem
-        key={id || (title as string)}
-        title={title}
-        onClick={onClick}
-        active={active}
-        href={href}
-        LinkWrapper={isGatsby ? LinkWrapper : null}
-        {...props}
-      />
+    {links.map(({ isGatsby, ...p }) => (
+      <Item key={p.id} LinkWrapper={isGatsby ? LinkWrapper : null} {...p} />
     ))}
   </List>
 );
diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx
index 79e4589cab3e..1e626b927663 100644
--- a/lib/components/src/tooltip/TooltipMessage.stories.tsx
+++ b/lib/components/src/tooltip/TooltipMessage.stories.tsx
@@ -5,7 +5,7 @@ import { WithTooltip } from './WithTooltip';
 import { TooltipMessage } from './TooltipMessage';
 
 storiesOf('basics/Tooltip/TooltipMessage', module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/lib/components/src/tooltip/TooltipMessage.tsx b/lib/components/src/tooltip/TooltipMessage.tsx
index 3ced72149de9..3e6242b37a23 100644
--- a/lib/components/src/tooltip/TooltipMessage.tsx
+++ b/lib/components/src/tooltip/TooltipMessage.tsx
@@ -3,32 +3,32 @@ import { styled } from '@storybook/theming';
 
 import { Link } from '../typography/link/link';
 
-const Title = styled.div`
-  font-weight: ${props => props.theme.typography.weight.black};
-`;
+const Title = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.black,
+}));
 
-const Desc = styled.span``;
+const Desc = styled.span();
 
-const Links = styled.div`
-  margin-top: 8px;
-  text-align: center;
+const Links = styled.div(({ theme }) => ({
+  marginTop: 8,
+  textAlign: 'center',
 
-  > * {
-    margin: 0 8px;
-    font-weight: ${props => props.theme.typography.weight.black};
-  }
-`;
+  '> *': {
+    margin: '0 8px',
+    fontWeight: theme.typography.weight.black,
+  },
+}));
 
-const Message = styled.div`
-  color: ${props => props.theme.color.darker};
-  line-height: 18px;
-`;
+const Message = styled.div(({ theme }) => ({
+  color: theme.textColor,
+  lineHeight: '18px',
+}));
 
-const MessageWrapper = styled.div`
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-`;
+const MessageWrapper = styled.div({
+  padding: 15,
+  width: 280,
+  boxSizing: 'border-box',
+});
 
 export interface TooltipMessageProps {
   title?: ReactNode;
diff --git a/lib/components/src/tooltip/TooltipNote.stories.tsx b/lib/components/src/tooltip/TooltipNote.stories.tsx
index 893fd374def1..2db9aa3e54dd 100644
--- a/lib/components/src/tooltip/TooltipNote.stories.tsx
+++ b/lib/components/src/tooltip/TooltipNote.stories.tsx
@@ -5,7 +5,7 @@ import { WithTooltip } from './WithTooltip';
 import { TooltipNote } from './TooltipNote';
 
 storiesOf('basics/Tooltip/TooltipNote', module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ height: '300px' }}>
       <WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
         <div>Tooltip</div>
diff --git a/lib/components/src/tooltip/TooltipNote.tsx b/lib/components/src/tooltip/TooltipNote.tsx
index be91c2f4bb8e..40515aea186a 100644
--- a/lib/components/src/tooltip/TooltipNote.tsx
+++ b/lib/components/src/tooltip/TooltipNote.tsx
@@ -1,20 +1,20 @@
 import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
-const Note = styled.div`
-  padding: 2px 6px;
-  line-height: 16px;
-  font-size: 10px;
-  font-weight: ${props => props.theme.typography.weight.bold};
-  color: ${props => props.theme.color.lightest};
-  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;
-`;
+const Note = styled.div(({ theme }) => ({
+  padding: '2px 6px',
+  lineHeight: '16px',
+  fontSize: 10,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.lightest,
+  boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.3)',
+  borderRadius: 4,
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none',
+  zIndex: -1,
+  background: 'rgba(0, 0, 0, 0.4)',
+  margin: 6,
+}));
 
 export interface TooltipNoteProps {
   note: string;
diff --git a/lib/components/src/tooltip/WithTooltip.stories.tsx b/lib/components/src/tooltip/WithTooltip.stories.tsx
index d73cbefb8155..9f12962f9ede 100644
--- a/lib/components/src/tooltip/WithTooltip.stories.tsx
+++ b/lib/components/src/tooltip/WithTooltip.stories.tsx
@@ -45,7 +45,7 @@ Tooltip.defaultProps = {
 };
 
 storiesOf('basics/Tooltip/WithTooltip', module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <ViewPort>
       <BackgroundBox>
         <Spacer />
diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx
index 950544c0b3d0..6703cad4adcd 100644
--- a/lib/components/src/tooltip/WithTooltip.tsx
+++ b/lib/components/src/tooltip/WithTooltip.tsx
@@ -1,7 +1,5 @@
 import React, { FunctionComponent, ReactNode, useState, useEffect } from 'react';
 import { styled } from '@storybook/theming';
-import { logger } from '@storybook/client-logger';
-// import { withState, lifecycle } from 'recompose';
 import { document } from 'global';
 
 import TooltipTrigger from 'react-popper-tooltip';
@@ -11,11 +9,11 @@ import { Tooltip } from './Tooltip';
 // A target that doesn't speak popper
 const TargetContainer = styled.div<{ mode: string }>`
   display: inline-block;
-  cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
+  cursor: ${(props) => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
 const TargetSvgContainer = styled.g<{ mode: string }>`
-  cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
+  cursor: ${(props) => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
 interface WithHideFn {
@@ -100,9 +98,11 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false,
 };
 
-const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
-  startOpen?: boolean;
-}> = ({ startOpen, ...rest }) => {
+const WithToolTipState: FunctionComponent<
+  WithTooltipPureProps & {
+    startOpen?: boolean;
+  }
+> = ({ startOpen, ...rest }) => {
   const [tooltipShown, onVisibilityChange] = useState(startOpen || false);
 
   useEffect(() => {
@@ -112,7 +112,7 @@ const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
     // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready)
     const iframes: HTMLIFrameElement[] = Array.from(document.getElementsByTagName('iframe'));
     const unbinders: (() => void)[] = [];
-    iframes.forEach(iframe => {
+    iframes.forEach((iframe) => {
       const bind = () => {
         try {
           if (iframe.contentWindow.document) {
@@ -121,12 +121,12 @@ const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
               try {
                 iframe.contentWindow.document.removeEventListener('click', hide);
               } catch (e) {
-                logger.warn('Removing a click listener from iframe failed: ', e);
+                // logger.debug('Removing a click listener from iframe failed: ', e);
               }
             });
           }
         } catch (e) {
-          logger.warn('Adding a click listener to iframe failed: ', e);
+          // logger.debug('Adding a click listener to iframe failed: ', e);
         }
       };
 
@@ -139,7 +139,7 @@ const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
 
     return () => {
       document.removeEventListener('keydown', hide);
-      unbinders.forEach(unbind => {
+      unbinders.forEach((unbind) => {
         unbind();
       });
     };
diff --git a/lib/components/src/typings.d.ts b/lib/components/src/typings.d.ts
index eb62749232fa..8e5fa7a2a147 100644
--- a/lib/components/src/typings.d.ts
+++ b/lib/components/src/typings.d.ts
@@ -1,4 +1,4 @@
 declare module 'global';
-declare module 'simplebar-react';
 declare module 'markdown-to-jsx';
 declare module '*.md';
+declare module '@storybook/semver';
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index 6c136299e283..9ae4a470d4ec 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -341,3 +341,43 @@ export const TT = styled.title<{}>(codeCommon);
  */
 
 export const ResetWrapper = styled.div<{}>(withReset);
+
+const nameSpaceClassNames = ({ ...props }, key: string) => {
+  const classes = [props.class, props.className];
+  // eslint-disable-next-line no-param-reassign
+  delete props.class;
+
+  // eslint-disable-next-line no-param-reassign
+  props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' ');
+
+  return props;
+};
+
+export const components = {
+  h1: ((props) => <H1 {...nameSpaceClassNames(props, 'h1')} />) as typeof H1,
+  h2: ((props) => <H2 {...nameSpaceClassNames(props, 'h2')} />) as typeof H2,
+  h3: ((props) => <H3 {...nameSpaceClassNames(props, 'h3')} />) as typeof H3,
+  h4: ((props) => <H4 {...nameSpaceClassNames(props, 'h4')} />) as typeof H4,
+  h5: ((props) => <H5 {...nameSpaceClassNames(props, 'h5')} />) as typeof H5,
+  h6: ((props) => <H6 {...nameSpaceClassNames(props, 'h6')} />) as typeof H6,
+  pre: ((props) => <Pre {...nameSpaceClassNames(props, 'pre')} />) as typeof Pre,
+  a: ((props) => <A {...nameSpaceClassNames(props, 'a')} />) as typeof A,
+  hr: ((props) => <HR {...nameSpaceClassNames(props, 'hr')} />) as typeof HR,
+  dl: ((props) => <DL {...nameSpaceClassNames(props, 'dl')} />) as typeof DL,
+  blockquote: ((props) => (
+    <Blockquote {...nameSpaceClassNames(props, 'blockquote')} />
+  )) as typeof Blockquote,
+  table: ((props) => <Table {...nameSpaceClassNames(props, 'table')} />) as typeof Table,
+  img: ((props) => <Img {...nameSpaceClassNames(props, 'img')} />) as typeof Img,
+  div: ((props) => <Div {...nameSpaceClassNames(props, 'div')} />) as typeof Div,
+  span: ((props) => <Span {...nameSpaceClassNames(props, 'span')} />) as typeof Span,
+  li: ((props) => <LI {...nameSpaceClassNames(props, 'li')} />) as typeof LI,
+  ul: ((props) => <UL {...nameSpaceClassNames(props, 'ul')} />) as typeof UL,
+  ol: ((props) => <OL {...nameSpaceClassNames(props, 'ol')} />) as typeof OL,
+  p: ((props) => <P {...nameSpaceClassNames(props, 'p')} />) as typeof P,
+  code: ((props) => <Code {...nameSpaceClassNames(props, 'code')} />) as typeof Code,
+  tt: ((props) => <TT {...nameSpaceClassNames(props, 'tt')} />) as typeof TT,
+  resetwrapper: ((props) => (
+    <ResetWrapper {...nameSpaceClassNames(props, 'resetwrapper')} />
+  )) as typeof ResetWrapper,
+};
diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx
index 50c9e33c23e7..6b5a2d4e8202 100644
--- a/lib/components/src/typography/DocumentWrapper.stories.tsx
+++ b/lib/components/src/typography/DocumentWrapper.stories.tsx
@@ -7,15 +7,7 @@ import markdownSample from './DocumentFormattingSample.md';
 export default {
   component: DocumentWrapper,
   title: 'Basics/DocumentFormatting',
-  decorators: [
-    (storyFn: any) => (
-      <div
-        style={{ width: '600px', margin: '3rem auto', padding: '40px 20px', background: 'white' }}
-      >
-        {storyFn()}
-      </div>
-    ),
-  ],
+  decorators: [(storyFn: any) => <div style={{ width: '600px' }}>{storyFn()}</div>],
 };
 
 export const withMarkdown = () => (
diff --git a/lib/components/src/typography/link/link.tsx b/lib/components/src/typography/link/link.tsx
index 2c5ff953e594..1b08faeb1ab2 100644
--- a/lib/components/src/typography/link/link.tsx
+++ b/lib/components/src/typography/link/link.tsx
@@ -193,7 +193,7 @@ export const Link: FunctionComponent<LinkProps & AProps> = ({
   ...rest
 }) => {
   return (
-    <A {...rest} onClick={cancel ? e => cancelled(e, onClick) : onClick} className={className}>
+    <A {...rest} onClick={cancel ? (e) => cancelled(e, onClick) : onClick} className={className}>
       <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
         {children}
         {withArrow && <Icons icon="arrowright" />}
diff --git a/lib/components/src/typography/typography.stories.tsx b/lib/components/src/typography/typography.stories.tsx
index 8fc9c2ca199b..6429be56dbaf 100644
--- a/lib/components/src/typography/typography.stories.tsx
+++ b/lib/components/src/typography/typography.stories.tsx
@@ -2,73 +2,73 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { storiesOf } from '@storybook/react';
 
-const Info = styled.div`
-  margin-bottom: 3rem;
-`;
+const Info = styled.div({
+  marginBottom: '3rem',
+});
 
-const Heading1 = styled.div`
-  font-size: ${props => props.theme.typography.size.l3}px;
-`;
-const Heading2 = styled.div`
-  font-size: ${props => props.theme.typography.size.l2}px;
-`;
-const Heading3 = styled.div`
-  font-size: ${props => props.theme.typography.size.l1}px;
-`;
-const Heading4 = styled.div`
-  font-size: ${props => props.theme.typography.size.m3}px;
-`;
-const Heading5 = styled.div`
-  font-size: ${props => props.theme.typography.size.m3}px;
-`;
-const Heading6 = styled.div`
-  font-size: ${props => props.theme.typography.size.m1}px;
-`;
-const Heading7 = styled.div`
-  font-size: ${props => props.theme.typography.size.s3}px;
-`;
-const Heading8 = styled.div`
-  font-size: ${props => props.theme.typography.size.s2}px;
-`;
-const Heading9 = styled.div`
-  font-size: ${props => props.theme.typography.size.s1}px;
-`;
+const Heading1 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.l3,
+}));
+const Heading2 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.l2,
+}));
+const Heading3 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.l1,
+}));
+const Heading4 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.m3,
+}));
+const Heading5 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.m3,
+}));
+const Heading6 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.m1,
+}));
+const Heading7 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s3,
+}));
+const Heading8 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+}));
+const Heading9 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+}));
 
-const HeadingWrapper = styled.div`
-  font-weight: ${props => props.theme.typography.weight.black};
-  > * {
-    margin-bottom: 1rem;
-  }
-`;
+const HeadingWrapper = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.black,
+  '> *': {
+    marginBottom: '1rem',
+  },
+}));
 
-const Type1 = styled.div`
-  font-size: ${props => props.theme.typography.size.s3}px;
-`;
-const Type2 = styled.div`
-  font-size: ${props => props.theme.typography.size.s2}px;
-`;
-const Type3 = styled.div`
-  font-size: ${props => props.theme.typography.size.s1}px;
-`;
+const Type1 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s3,
+}));
+const Type2 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+}));
+const Type3 = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+}));
 
-const TypeWrapper = styled.div`
-  > * {
-    margin-bottom: 1rem;
-  }
-`;
+const TypeWrapper = styled.div({
+  '> *': {
+    marginBottom: '1rem',
+  },
+});
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  > * {
-    flex: 1;
-    padding-right: 40px;
-  }
-`;
+const Wrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  '> *': {
+    flex: 1,
+    paddingRight: 40,
+  },
+});
 
-const Page = styled.div`
-  padding: 3rem;
-`;
+const Page = styled.div({
+  padding: '3rem',
+});
 
 storiesOf('Basics/typography', module).add('all', () => (
   <Page>
diff --git a/lib/components/tsconfig.json b/lib/components/tsconfig.json
index 088e0f247933..4fe652cb6509 100644
--- a/lib/components/tsconfig.json
+++ b/lib/components/tsconfig.json
@@ -3,9 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "types": [
-      "webpack-env",
-      "jest",
-      "react-syntax-highlighter"
+      "jest"
     ]
   },
   "include": [
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 2918de45a9cc..6be103c4a13e 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -15,14 +15,15 @@
     "directory": "lib/core-events"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -32,5 +33,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/core-events/src/index.test.ts b/lib/core-events/src/index.test.ts
index 4073e6ecc4bb..1ee0a9a7447f 100644
--- a/lib/core-events/src/index.test.ts
+++ b/lib/core-events/src/index.test.ts
@@ -1,5 +1,4 @@
-/* eslint-disable import/no-duplicates */
-import * as EventsPackageExport from '.';
+import * as EventsPackageExport from './index';
 import EventsDefaultExport, { CHANNEL_CREATED } from './index';
 
 describe('Core Events', () => {
diff --git a/lib/core-events/src/index.ts b/lib/core-events/src/index.ts
index 1b776491d7e5..62caf0e25cd2 100644
--- a/lib/core-events/src/index.ts
+++ b/lib/core-events/src/index.ts
@@ -1,28 +1,42 @@
 enum events {
   CHANNEL_CREATED = 'channelCreated',
-  GET_CURRENT_STORY = 'getCurrentStory',
+  // Set the current story selection in the preview
   SET_CURRENT_STORY = 'setCurrentStory',
-  GET_STORIES = 'getStories',
+  // The current story changed due to the above
+  CURRENT_STORY_WAS_SET = 'currentStoryWasSet',
+  // Emitted by the preview whenever the list of stories changes (in batches)
   SET_STORIES = 'setStories',
-  STORIES_CONFIGURED = 'storiesConfigured',
-  SELECT_STORY = 'selectStory',
-  PREVIEW_KEYDOWN = 'previewKeydown',
-  STORY_ADDED = 'storyAdded',
+  // Emitted by the preview when the current story (or error) should be rendered
+  RENDER_CURRENT_STORY = 'renderCurrentStory',
+  // Deprecated version of the above
+  STORY_RENDER = 'storyRender',
+  // Force the current story to re-render
+  FORCE_RE_RENDER = 'forceReRender',
+  // The next 6 events are emitted by the StoryRenderer when rendering the current story
   STORY_CHANGED = 'storyChanged',
   STORY_UNCHANGED = 'storyUnchanged',
-  FORCE_RE_RENDER = 'forceReRender',
-  REGISTER_SUBSCRIPTION = 'registerSubscription',
-  STORY_INIT = 'storyInit',
-  STORY_RENDER = 'storyRender',
   STORY_RENDERED = 'storyRendered',
   STORY_MISSING = 'storyMissing',
   STORY_ERRORED = 'storyErrored',
   STORY_THREW_EXCEPTION = 'storyThrewException',
+  // Tell the story store to update (a subset of) a stories arg values
+  UPDATE_STORY_ARGS = 'updateStoryArgs',
+  // The values of a stories args just changed
+  STORY_ARGS_UPDATED = 'storyArgsUpdated',
+  // As above
+  UPDATE_GLOBAL_ARGS = 'updateGlobalArgs',
+  GLOBAL_ARGS_UPDATED = 'globalArgsUpdated',
+  REGISTER_SUBSCRIPTION = 'registerSubscription',
+  // Tell the manager that the user pressed a key in the preview
+  PREVIEW_KEYDOWN = 'previewKeydown',
+  // Used in the manager to change the story selection
+  SELECT_STORY = 'selectStory',
   STORIES_COLLAPSE_ALL = 'storiesCollapseAll',
   STORIES_EXPAND_ALL = 'storiesExpandAll',
   DOCS_RENDERED = 'docsRendered',
-  ADDON_STATE_CHANGED = 'addonStateChanged',
-  ADDON_STATE_SET = 'addonStateSet',
+  SHARED_STATE_CHANGED = 'sharedStateChanged',
+  SHARED_STATE_SET = 'sharedStateSet',
+  NAVIGATE_URL = 'navigateUrl',
 }
 
 // Enables: `import Events from ...`
@@ -32,26 +46,29 @@ export default events;
 // This is the preferred method
 export const {
   CHANNEL_CREATED,
-  GET_CURRENT_STORY,
   SET_CURRENT_STORY,
-  GET_STORIES,
   SET_STORIES,
-  STORIES_CONFIGURED,
-  SELECT_STORY,
-  PREVIEW_KEYDOWN,
-  FORCE_RE_RENDER,
-  REGISTER_SUBSCRIPTION,
-  STORY_INIT,
-  STORY_ADDED,
+  RENDER_CURRENT_STORY,
   STORY_RENDER,
+  FORCE_RE_RENDER,
+  STORY_CHANGED,
+  STORY_UNCHANGED,
   STORY_RENDERED,
   STORY_MISSING,
   STORY_ERRORED,
-  STORY_CHANGED,
+  STORY_THREW_EXCEPTION,
+  UPDATE_STORY_ARGS,
+  STORY_ARGS_UPDATED,
+  UPDATE_GLOBAL_ARGS,
+  GLOBAL_ARGS_UPDATED,
+  REGISTER_SUBSCRIPTION,
+  PREVIEW_KEYDOWN,
+  SELECT_STORY,
   STORIES_COLLAPSE_ALL,
   STORIES_EXPAND_ALL,
-  STORY_THREW_EXCEPTION,
   DOCS_RENDERED,
-  ADDON_STATE_CHANGED,
-  ADDON_STATE_SET,
+  SHARED_STATE_CHANGED,
+  SHARED_STATE_SET,
+  NAVIGATE_URL,
+  CURRENT_STORY_WAS_SET,
 } = events;
diff --git a/lib/core/README.md b/lib/core/README.md
index d9684bab4947..9fbc57fa22ae 100644
--- a/lib/core/README.md
+++ b/lib/core/README.md
@@ -3,3 +3,26 @@
 This package contains common data structures and bootstrapping capabilities
 used among the different frameworks
 (React, RN, Vue, Ember, Angular, etc).
+
+## Preview
+
+The files in `src/client/preview` alongside the `@storybook/client-api` package form the "API" of the preview (iframe) side of Storybook. Here is a brief overview of the architecture:
+
+Each framework (e.g. `@storybook/react` / `@storybook/angular` / et al.) initializes the preview by calling into `src/client/preview/start.ts`, passing a `render` function that will be used to render stories.
+
+The `start` module initiaizes all the submodules:
+
+- `StoryStore` (from `@storybook/client-api`) - stores the stories and their state as well as the current selection or error.
+- `ClientApi` (from `@storybook/client-api`) - provides the entry point for `storiesOf()` API calls; re-exported by each framework.
+- `ConfigApi` (from `@storybook/client-api`) - provides the configure API (wrapped by `loadCsf` below).
+- `StoryRenderer` - controls the HTML that is rendered in the preview (calling the `render` function with the current story at appropriate times).
+- `url.js` - controls the URL in the preview and sets the selection based on it.
+- `loadCsf` - loads CSF files from `require.context()` calls and uses `ClientApi` to load them into the store.
+
+Each module uses the channel to communicate with each other and the manager. Each module also has direct access to the story store.
+
+### Events on startup
+
+The store can only be changed during "configuration". The `ConfigApi` will call `store.startConfiguration()`, then the user code (or `loadCsf`'s loader) which will use client API to load up stories. At the end of the user's code the `ConfigApi` will call `store.finishConfiguration()`. At this point the `SET_STORIES` event is emitted and the stories are transmitted to the manager.
+
+The `SET_CURRENT_STORY` "command" event can be used to set the selection on the store. However only once this has been recieved _and_ configuration is over will the store use the `RENDER_CURRENT_STORY` to tell the `StoryRenderer` to render it.
diff --git a/lib/core/package.json b/lib/core/package.json
index 61c7a752703f..32272f2dc525 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -15,60 +15,87 @@
     "directory": "lib/core"
   },
   "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
   "files": [
     "dist/**/*",
     "dll/**/*",
+    "types/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/client/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.2.0",
-    "@babel/preset-env": "^7.4.5",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/channel-postmessage": "5.3.0-rc.0",
-    "@storybook/client-api": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+    "@babel/plugin-proposal-private-methods": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-arrow-functions": "^7.8.3",
+    "@babel/plugin-transform-block-scoping": "^7.8.3",
+    "@babel/plugin-transform-classes": "^7.9.5",
+    "@babel/plugin-transform-destructuring": "^7.9.5",
+    "@babel/plugin-transform-for-of": "^7.9.0",
+    "@babel/plugin-transform-parameters": "^7.9.5",
+    "@babel/plugin-transform-react-constant-elements": "^7.9.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.8.3",
+    "@babel/plugin-transform-spread": "^7.8.3",
+    "@babel/plugin-transform-template-literals": "^7.8.3",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/register": "^7.8.3",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/channel-postmessage": "6.0.0-beta.21",
+    "@storybook/client-api": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "5.3.0-rc.0",
-    "@storybook/router": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
-    "@storybook/ui": "5.3.0-rc.0",
+    "@storybook/node-logger": "6.0.0-beta.21",
+    "@storybook/router": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "@storybook/ui": "6.0.0-beta.21",
+    "@types/glob-base": "^0.3.0",
+    "@types/micromatch": "^4.0.1",
+    "@types/node-fetch": "^2.5.4",
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "autoprefixer": "^9.7.2",
+    "babel-loader": "^8.0.6",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-emotion": "^10.0.20",
-    "babel-plugin-macros": "^2.7.0",
+    "babel-plugin-macros": "^2.8.0",
     "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5",
+    "better-opn": "^2.0.0",
     "boxen": "^4.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "chalk": "^3.0.0",
-    "cli-table3": "0.5.1",
-    "commander": "^4.0.1",
+    "chalk": "^4.0.0",
+    "cli-table3": "0.6.0",
+    "commander": "^5.0.0",
     "core-js": "^3.0.1",
-    "corejs-upgrade-webpack-plugin": "^2.2.0",
-    "css-loader": "^3.0.0",
+    "css-loader": "^3.5.3",
     "detect-port": "^1.3.0",
     "dotenv-webpack": "^1.7.0",
-    "ejs": "^2.7.4",
+    "ejs": "^3.1.2",
     "express": "^4.17.0",
-    "file-loader": "^4.2.0",
+    "file-loader": "^6.0.0",
     "file-system-cache": "^1.0.5",
     "find-cache-dir": "^3.0.0",
     "find-up": "^4.1.0",
-    "fs-extra": "^8.0.1",
+    "fork-ts-checker-webpack-plugin": "^4.1.4",
+    "fs-extra": "^9.0.0",
+    "glob": "^7.1.6",
     "glob-base": "^0.3.0",
+    "glob-promise": "^3.4.0",
     "global": "^4.3.2",
-    "html-webpack-plugin": "^4.0.0-beta.2",
+    "html-webpack-plugin": "^4.2.1",
     "inquirer": "^7.0.0",
     "interpret": "^2.0.0",
     "ip": "^1.1.5",
@@ -76,42 +103,42 @@
     "lazy-universal-dotenv": "^3.0.1",
     "micromatch": "^4.0.2",
     "node-fetch": "^2.6.0",
-    "open": "^7.0.0",
-    "pnp-webpack-plugin": "1.5.0",
+    "pkg-dir": "^4.2.0",
+    "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
     "pretty-hrtime": "^1.0.3",
     "qs": "^6.6.0",
-    "raw-loader": "^3.1.0",
-    "react-dev-utils": "^9.0.0",
+    "raw-loader": "^4.0.1",
+    "react-dev-utils": "^10.0.0",
     "regenerator-runtime": "^0.13.3",
-    "resolve": "^1.11.0",
+    "resolve": "^1.17.0",
     "resolve-from": "^5.0.0",
-    "semver": "^6.0.0",
+    "@storybook/semver": "^7.3.2",
     "serve-favicon": "^2.5.0",
     "shelljs": "^0.8.3",
-    "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^2.1.2",
-    "ts-dedent": "^1.1.0",
+    "stable": "^0.1.8",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^3.0.0",
+    "ts-dedent": "^1.1.1",
     "unfetch": "^4.1.0",
-    "url-loader": "^2.0.1",
+    "url-loader": "^4.0.0",
     "util-deprecate": "^1.0.2",
-    "webpack": "^4.33.0",
+    "webpack": "^4.43.0",
     "webpack-dev-middleware": "^3.7.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-virtual-modules": "^0.2.0"
+    "webpack-virtual-modules": "^0.2.2"
   },
   "devDependencies": {
-    "mock-fs": "^4.8.0"
+    "mock-fs": "^4.12.0"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "babel-loader": "^7.0.0 || ^8.0.0",
     "react": "*",
     "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/lib/core/src/client/index.js b/lib/core/src/client/index.js
deleted file mode 100644
index 7cec7d05ee95..000000000000
--- a/lib/core/src/client/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import preview from './preview';
-
-export default preview;
diff --git a/lib/core/src/client/index.ts b/lib/core/src/client/index.ts
new file mode 100644
index 000000000000..93b269dca3c6
--- /dev/null
+++ b/lib/core/src/client/index.ts
@@ -0,0 +1,5 @@
+import preview from './preview';
+
+export * from './preview/types';
+
+export default preview;
diff --git a/lib/core/src/client/preview/NoDocs.js b/lib/core/src/client/preview/NoDocs.js
deleted file mode 100644
index b9a57da4fc8b..000000000000
--- a/lib/core/src/client/preview/NoDocs.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-
-const wrapper = {
-  fontSize: '14px',
-  letterSpacing: '0.2px',
-  margin: '10px 0',
-};
-
-const main = {
-  margin: 'auto',
-  padding: 30,
-  borderRadius: 10,
-  background: 'rgba(0,0,0,0.03)',
-};
-
-const heading = {
-  textAlign: 'center',
-};
-
-export const NoDocs = () => (
-  <div style={wrapper} className="sb-nodocs sb-wrapper">
-    <div style={main}>
-      <h1 style={heading}>No Docs</h1>
-      <p>
-        Sorry, but there are no docs for the selected story. To add them, set the story's&nbsp;
-        <code>docs</code> parameter. If you think this is an error:
-      </p>
-      <ul>
-        <li>Please check the story definition.</li>
-        <li>Please check the Storybook config.</li>
-        <li>Try reloading the page.</li>
-      </ul>
-      <p>
-        If the problem persists, check the browser console, or the terminal you've run Storybook
-        from.
-      </p>
-    </div>
-  </div>
-);
diff --git a/lib/core/src/client/preview/NoDocs.tsx b/lib/core/src/client/preview/NoDocs.tsx
new file mode 100644
index 000000000000..b6932363d1ac
--- /dev/null
+++ b/lib/core/src/client/preview/NoDocs.tsx
@@ -0,0 +1,39 @@
+import React, { CSSProperties } from 'react';
+
+const wrapper = {
+  fontSize: '14px',
+  letterSpacing: '0.2px',
+  margin: '10px 0',
+};
+
+const main = {
+  margin: 'auto',
+  padding: 30,
+  borderRadius: 10,
+  background: 'rgba(0,0,0,0.03)',
+};
+
+const heading: CSSProperties = {
+  textAlign: 'center',
+};
+
+export const NoDocs = () => (
+  <div style={wrapper} className="sb-nodocs sb-wrapper">
+    <div style={main}>
+      <h1 style={heading}>No Docs</h1>
+      <p>
+        Sorry, but there are no docs for the selected story. To add them, set the story's&nbsp;
+        <code>docs</code> parameter. If you think this is an error:
+      </p>
+      <ul>
+        <li>Please check the story definition.</li>
+        <li>Please check the Storybook config.</li>
+        <li>Try reloading the page.</li>
+      </ul>
+      <p>
+        If the problem persists, check the browser console, or the terminal you've run Storybook
+        from.
+      </p>
+    </div>
+  </div>
+);
diff --git a/lib/core/src/client/preview/StoryRenderer.test.ts b/lib/core/src/client/preview/StoryRenderer.test.ts
new file mode 100644
index 000000000000..524352103360
--- /dev/null
+++ b/lib/core/src/client/preview/StoryRenderer.test.ts
@@ -0,0 +1,406 @@
+// a
+import { StoryStore, defaultDecorateStory } from '@storybook/client-api';
+import createChannel from '@storybook/channel-postmessage';
+import {
+  FORCE_RE_RENDER,
+  RENDER_CURRENT_STORY,
+  STORY_ERRORED,
+  STORY_THREW_EXCEPTION,
+  STORY_MISSING,
+  DOCS_RENDERED,
+  STORY_CHANGED,
+  STORY_UNCHANGED,
+  STORY_RENDERED,
+} from '@storybook/core-events';
+import { toId } from '@storybook/csf';
+import addons, { StoryKind, StoryName, Parameters } from '@storybook/addons';
+import ReactDOM from 'react-dom';
+
+import { StoryRenderer } from './StoryRenderer';
+
+jest.mock('react-dom');
+
+jest.mock('@storybook/client-logger', () => ({
+  logger: {
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+function prepareRenderer() {
+  const render = jest.fn();
+  const channel = createChannel({ page: 'preview' });
+  addons.setChannel(channel);
+  const storyStore = new StoryStore({ channel });
+  const renderer = new StoryRenderer({ render, channel, storyStore });
+
+  // mock out all the dom-touching functions
+  renderer.applyLayout = jest.fn();
+  renderer.showErrorDisplay = jest.fn();
+  renderer.showNoPreview = jest.fn();
+  renderer.showMain = jest.fn();
+  renderer.showDocs = jest.fn();
+  renderer.showStory = jest.fn();
+
+  return { render, channel, storyStore, renderer };
+}
+
+function addAndSelectStory(
+  storyStore: StoryStore,
+  kind: StoryKind,
+  name: StoryName,
+  parameters: Parameters = {}
+) {
+  const id = toId(kind, name);
+  storyStore.addStory(
+    { id, kind, name, storyFn: jest.fn(), parameters },
+    {
+      applyDecorators: defaultDecorateStory,
+    }
+  );
+  storyStore.setSelection({ storyId: id, viewMode: 'story' });
+}
+
+describe('core.preview.StoryRenderer', () => {
+  it('renders the current story with the correct context', async () => {
+    const { render, channel, storyStore, renderer } = prepareRenderer();
+    addAndSelectStory(storyStore, 'a', '1', { p: 'q' });
+
+    const onStoryRendered = jest.fn();
+    channel.on(STORY_RENDERED, onStoryRendered);
+
+    renderer.renderCurrentStory(false);
+    expect(render).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: 'a--1',
+        kind: 'a',
+        name: '1',
+        parameters: { argTypes: {}, p: 'q' },
+        forceRender: false,
+
+        showMain: expect.any(Function),
+        showError: expect.any(Function),
+        showException: expect.any(Function),
+      })
+    );
+
+    render.mockClear();
+    renderer.renderCurrentStory(true);
+    expect(render).toHaveBeenCalledWith(
+      expect.objectContaining({
+        forceRender: true,
+      })
+    );
+
+    // the render function does something async so we need to jump to the end of the promise queue
+    await Promise.resolve(null);
+
+    expect(onStoryRendered).toHaveBeenCalledWith('a--1');
+  });
+
+  describe('errors', () => {
+    it('renders an error if a config error is set on the store', () => {
+      const { render, storyStore, renderer } = prepareRenderer();
+      const err = { message: 'message', stack: 'stack' };
+      storyStore.setError(err);
+      storyStore.finishConfiguring();
+
+      expect(render).not.toHaveBeenCalled();
+      expect(renderer.showErrorDisplay).toHaveBeenCalledWith(err);
+    });
+
+    it('renders an error if the story calls renderError', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+
+      const onStoryErrored = jest.fn();
+      channel.on(STORY_ERRORED, onStoryErrored);
+
+      const err = { title: 'title', description: 'description' };
+      render.mockImplementation(({ showError }) => showError(err));
+      renderer.renderCurrentStory(false);
+
+      expect(renderer.showErrorDisplay).toHaveBeenCalledWith({
+        message: 'title',
+        stack: 'description',
+      });
+      expect(onStoryErrored).toHaveBeenCalledWith(err);
+    });
+
+    it('renders an exception if the story calls renderException', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+
+      const onStoryThrewException = jest.fn();
+      channel.on(STORY_THREW_EXCEPTION, onStoryThrewException);
+
+      const err = { message: 'message', stack: 'stack' };
+      render.mockImplementation(({ showException }) => showException(err));
+      renderer.renderCurrentStory(false);
+
+      expect(renderer.showErrorDisplay).toHaveBeenCalledWith(err);
+      expect(onStoryThrewException).toHaveBeenCalledWith(err);
+    });
+
+    it('renders an exception if the render function throws', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+
+      const onStoryThrewException = jest.fn();
+      channel.on(STORY_THREW_EXCEPTION, onStoryThrewException);
+
+      const err = { message: 'message', stack: 'stack' };
+      render.mockImplementation(() => {
+        throw err;
+      });
+      renderer.renderCurrentStory(false);
+
+      expect(renderer.showErrorDisplay).toHaveBeenCalledWith(err);
+      expect(onStoryThrewException).toHaveBeenCalledWith(err);
+    });
+
+    it('renders an error if the story is missing', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      storyStore.setSelection({ storyId: 'b--2', viewMode: 'story' });
+
+      const onStoryMissing = jest.fn();
+      channel.on(STORY_MISSING, onStoryMissing);
+
+      renderer.renderCurrentStory(false);
+
+      expect(render).not.toHaveBeenCalled();
+
+      expect(renderer.showNoPreview).toHaveBeenCalled();
+      expect(onStoryMissing).toHaveBeenCalledWith('b--2');
+    });
+  });
+
+  describe('docs mode', () => {
+    it('renders docs and emits when rendering a docs story', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+
+      const onDocsRendered = jest.fn();
+      channel.on(DOCS_RENDERED, onDocsRendered);
+      ((ReactDOM.render as unknown) as jest.Mock<
+        ReactDOM.Renderer
+      >).mockImplementationOnce((element, node, callback) => callback());
+
+      renderer.renderCurrentStory(false);
+
+      // Although the docs React component may ultimately render the story we are mocking out
+      // `react-dom` and just check that *something* is being rendered by react at this point
+      expect(render).not.toHaveBeenCalled();
+      expect(onDocsRendered).toHaveBeenCalledWith('a');
+    });
+
+    it('hides the root and shows the docs root as well as main when rendering a docs story', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+
+      renderer.renderCurrentStory(false);
+
+      expect(renderer.showDocs).toHaveBeenCalled();
+      expect(renderer.showMain).toHaveBeenCalled();
+    });
+
+    it('hides the docs root and shows the root, but does not show main when rendering a normal story', () => {
+      const { render, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      (renderer.showStory as jest.Mock<any>).mockClear();
+      (renderer.showMain as jest.Mock<any>).mockClear();
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'story' });
+
+      render.mockImplementationOnce(({ showMain }) => {
+        // showMain has not yet been called
+        expect(renderer.showStory).toHaveBeenCalled();
+        expect(renderer.showMain).not.toHaveBeenCalled();
+
+        // now the render function implementation calls showMain
+        showMain();
+        expect(renderer.showMain).toHaveBeenCalled();
+      });
+      renderer.renderCurrentStory(false);
+    });
+  });
+
+  describe('re-rendering behaviour', () => {
+    it('does not re-render if nothing changed', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      renderer.renderCurrentStory(false);
+
+      const onStoryUnchanged = jest.fn();
+      channel.on(STORY_UNCHANGED, onStoryUnchanged);
+
+      render.mockClear();
+      renderer.renderCurrentStory(false);
+      expect(render).not.toHaveBeenCalled();
+      // Not sure why STORY_UNCHANGED is called with all this stuff
+      expect(onStoryUnchanged).toHaveBeenCalledWith({
+        id: 'a--1',
+        kind: 'a',
+        name: '1',
+        viewMode: 'story',
+        getDecorated: expect.any(Function),
+      });
+    });
+    it('does re-render the current story if it has not changed if forceRender is true', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      renderer.renderCurrentStory(false);
+
+      const onStoryChanged = jest.fn();
+      channel.on(STORY_CHANGED, onStoryChanged);
+
+      render.mockClear();
+      renderer.renderCurrentStory(true);
+      expect(render).toHaveBeenCalled();
+
+      expect(onStoryChanged).not.toHaveBeenCalled();
+    });
+    it('does re-render if the selected story changes', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      addAndSelectStory(storyStore, 'a', '2');
+      renderer.renderCurrentStory(false); // renders a--2
+
+      const onStoryChanged = jest.fn();
+      channel.on(STORY_CHANGED, onStoryChanged);
+
+      render.mockClear();
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      renderer.renderCurrentStory(false);
+      expect(render).toHaveBeenCalled();
+
+      expect(onStoryChanged).toHaveBeenCalledWith('a--1');
+    });
+    it('does re-render if the story implementation changes', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      renderer.renderCurrentStory(false);
+
+      const onStoryChanged = jest.fn();
+      channel.on(STORY_CHANGED, onStoryChanged);
+
+      render.mockClear();
+      storyStore.removeStoryKind('a');
+      addAndSelectStory(storyStore, 'a', '1');
+      renderer.renderCurrentStory(false);
+      expect(render).toHaveBeenCalled();
+
+      expect(onStoryChanged).not.toHaveBeenCalled();
+    });
+    it('does re-render if the view mode changes', () => {
+      const { render, channel, storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      const onStoryChanged = jest.fn();
+      channel.on(STORY_CHANGED, onStoryChanged);
+
+      render.mockClear();
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      renderer.renderCurrentStory(false);
+      expect(render).toHaveBeenCalled();
+
+      expect(onStoryChanged).toHaveBeenCalledWith('a--1');
+    });
+  });
+
+  describe('hooks', () => {
+    it('cleans up kind hooks when changing kind in docs mode', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      addAndSelectStory(storyStore, 'b', '1');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      storyStore.cleanHooksForKind = jest.fn();
+
+      storyStore.setSelection({ storyId: 'b--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      expect(storyStore.cleanHooksForKind).toHaveBeenCalledWith('a');
+    });
+    it('does not clean up hooks when changing story but not kind in docs mode', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      addAndSelectStory(storyStore, 'a', '2');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      storyStore.cleanHooksForKind = jest.fn();
+
+      storyStore.setSelection({ storyId: 'a--2', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      expect(storyStore.cleanHooksForKind).not.toHaveBeenCalled();
+    });
+    it('cleans up kind hooks when changing view mode from docs', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      storyStore.cleanHooksForKind = jest.fn();
+
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      renderer.renderCurrentStory(false);
+
+      expect(storyStore.cleanHooksForKind).toHaveBeenCalledWith('a');
+    });
+    it('cleans up story hooks when changing story in story mode', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      addAndSelectStory(storyStore, 'a', '2');
+      renderer.renderCurrentStory(false);
+
+      storyStore.cleanHooks = jest.fn();
+
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'story' });
+      renderer.renderCurrentStory(false);
+
+      expect(storyStore.cleanHooks).toHaveBeenCalledWith('a--2');
+    });
+    it('cleans up story hooks when changing view mode from story', () => {
+      const { storyStore, renderer } = prepareRenderer();
+      addAndSelectStory(storyStore, 'a', '1');
+      renderer.renderCurrentStory(false);
+
+      storyStore.cleanHooks = jest.fn();
+
+      storyStore.setSelection({ storyId: 'a--1', viewMode: 'docs' });
+      renderer.renderCurrentStory(false);
+
+      expect(storyStore.cleanHooks).toHaveBeenCalledWith('a--1');
+    });
+  });
+
+  describe('event handling', () => {
+    it('renders on RENDER_CURRENT_STORY', () => {
+      const { channel, renderer } = prepareRenderer();
+      renderer.renderCurrentStory = jest.fn();
+
+      channel.emit(RENDER_CURRENT_STORY);
+      expect(renderer.renderCurrentStory).toHaveBeenCalledWith(false);
+    });
+
+    it('force renders on FORCE_RE_RENDER', () => {
+      const { channel, renderer } = prepareRenderer();
+      renderer.renderCurrentStory = jest.fn();
+
+      channel.emit(FORCE_RE_RENDER);
+      expect(renderer.renderCurrentStory).toHaveBeenCalledWith(true);
+    });
+  });
+});
diff --git a/lib/core/src/client/preview/StoryRenderer.tsx b/lib/core/src/client/preview/StoryRenderer.tsx
new file mode 100644
index 000000000000..5cf6aa7bea29
--- /dev/null
+++ b/lib/core/src/client/preview/StoryRenderer.tsx
@@ -0,0 +1,336 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { document } from 'global';
+import AnsiToHtml from 'ansi-to-html';
+
+import { StoryId, StoryKind, StoryFn, ViewMode, Channel } from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { logger } from '@storybook/client-logger';
+import { StoryStore } from '@storybook/client-api';
+
+import { NoDocs } from './NoDocs';
+import { RenderStoryFunction, RenderContext } from './types';
+
+// We have "changed" story if this changes
+interface RenderMetadata {
+  id: StoryId;
+  kind: StoryKind;
+  viewMode: ViewMode;
+  getDecorated: () => StoryFn<any>;
+}
+
+type Layout = keyof typeof layouts;
+
+const layouts = {
+  centered: {
+    margin: 0,
+    padding: '1rem',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    boxSizing: 'border-box',
+  },
+  fullscreen: {
+    margin: 0,
+    padding: 0,
+    display: 'block',
+    justifyContent: 'initial',
+    alignItems: 'initial',
+    minHeight: 'initial',
+    boxSizing: 'initial',
+  },
+  padded: {
+    margin: 0,
+    padding: '1rem',
+    display: 'block',
+    justifyContent: 'initial',
+    alignItems: 'initial',
+    minHeight: 'initial',
+    boxSizing: 'initial',
+  },
+} as const;
+
+const classes = {
+  MAIN: 'sb-show-main',
+  NOPREVIEW: 'sb-show-nopreview',
+  ERROR: 'sb-show-errordisplay',
+};
+
+const ansiConverter = new AnsiToHtml({
+  escapeXML: true,
+});
+
+/**
+ * StoryRenderer is responsible for rendering the correct story to the screen
+ *
+ * It is very much concerned with drawing to the screen and will do things like change classes
+ * on the body etc.
+ */
+export class StoryRenderer {
+  render: RenderStoryFunction;
+
+  channel?: Channel;
+
+  storyStore: StoryStore;
+
+  previousMetadata?: RenderMetadata;
+
+  previousStyles?: typeof layouts[keyof typeof layouts];
+
+  constructor({
+    render,
+    channel,
+    storyStore,
+  }: {
+    render: RenderStoryFunction;
+    channel?: Channel;
+    storyStore: StoryStore;
+  }) {
+    this.render = render;
+    this.channel = channel;
+    this.storyStore = storyStore;
+
+    this.setupListeners();
+  }
+
+  setupListeners() {
+    // Channel can be null in StoryShots
+    if (this.channel) {
+      this.channel.on(Events.RENDER_CURRENT_STORY, () => this.renderCurrentStory(false));
+      this.channel.on(Events.STORY_ARGS_UPDATED, () => this.forceReRender());
+      this.channel.on(Events.GLOBAL_ARGS_UPDATED, () => this.forceReRender());
+      this.channel.on(Events.FORCE_RE_RENDER, () => this.forceReRender());
+    }
+  }
+
+  forceReRender() {
+    this.renderCurrentStory(true);
+  }
+
+  renderCurrentStory(forceRender: boolean) {
+    const { storyStore } = this;
+
+    const loadError = storyStore.getError();
+    if (loadError) {
+      this.showErrorDisplay(loadError);
+      return;
+    }
+
+    const { storyId, viewMode: urlViewMode } = storyStore.getSelection();
+
+    const data = storyStore.fromId(storyId);
+    const { kind, id, parameters = {}, getDecorated } = data || {};
+    const { docsOnly, layout } = parameters;
+
+    const metadata: RenderMetadata = {
+      id,
+      kind,
+      viewMode: docsOnly ? 'docs' : urlViewMode,
+      getDecorated,
+    };
+
+    this.applyLayout(layout);
+
+    const context: RenderContext = {
+      id: storyId, // <- in case data is null, at least we'll know what we tried to render
+      ...data,
+      forceRender,
+      showMain: () => this.showMain(),
+      showError: ({ title, description }: { title: string; description: string }) =>
+        this.renderError({ title, description }),
+      showException: (err: Error) => this.renderException(err),
+    };
+
+    this.renderStoryIfChanged({ metadata, context });
+  }
+
+  renderStoryIfChanged({
+    metadata,
+    context,
+  }: {
+    metadata: RenderMetadata;
+    context: RenderContext;
+  }) {
+    const { forceRender, name } = context;
+
+    const { previousMetadata, storyStore } = this;
+
+    const storyChanged = !previousMetadata || previousMetadata.id !== metadata.id;
+    // getDecorated is a function that returns a decorated story function. It'll change whenever the story
+    // is reloaded into the store, which means the module the story was defined in was HMR-ed.
+    const implementationChanged =
+      !previousMetadata || previousMetadata.getDecorated !== metadata.getDecorated;
+    const viewModeChanged = !previousMetadata || previousMetadata.viewMode !== metadata.viewMode;
+    const kindChanged = !previousMetadata || previousMetadata.kind !== metadata.kind;
+
+    // Don't re-render the story if nothing has changed to justify it
+    if (!forceRender && !storyChanged && !implementationChanged && !viewModeChanged) {
+      this.channel.emit(Events.STORY_UNCHANGED, {
+        ...metadata,
+        name,
+      });
+      return;
+    }
+
+    // If we are rendering something new (as opposed to re-rendering the same or first story), emit
+    if (previousMetadata && (storyChanged || kindChanged || viewModeChanged)) {
+      this.channel.emit(Events.STORY_CHANGED, metadata.id);
+    }
+
+    switch (previousMetadata ? previousMetadata.viewMode : 'story') {
+      case 'docs':
+        if (kindChanged || viewModeChanged) {
+          this.storyStore.cleanHooksForKind(previousMetadata.kind);
+          ReactDOM.unmountComponentAtNode(document.getElementById('docs-root'));
+        }
+        break;
+      case 'story':
+      default:
+        if (previousMetadata && (storyChanged || viewModeChanged)) {
+          this.storyStore.cleanHooks(previousMetadata.id);
+          ReactDOM.unmountComponentAtNode(document.getElementById('root'));
+        }
+    }
+
+    // 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 (viewModeChanged) {
+      switch (metadata.viewMode) {
+        case 'docs': {
+          this.showMain();
+          this.showDocs();
+          break;
+        }
+        case 'story':
+        default: {
+          if (previousMetadata) {
+            this.showStory();
+          }
+        }
+      }
+    }
+    // Given a cleaned up state, render the appropriate view mode
+    switch (metadata.viewMode) {
+      case 'docs': {
+        this.renderDocs({ context, storyStore });
+        break;
+      }
+      case 'story':
+      default: {
+        this.renderStory({ context });
+        break;
+      }
+    }
+
+    this.previousMetadata = metadata;
+
+    if (!forceRender && metadata.viewMode !== 'docs') {
+      document.documentElement.scrollTop = 0;
+      document.documentElement.scrollLeft = 0;
+    }
+  }
+
+  applyLayout(layout: Layout) {
+    const styles = layouts[layout] || layouts.padded;
+
+    if (styles !== this.previousStyles) {
+      Object.assign(document.body.style, styles || {});
+      this.previousStyles = styles;
+    }
+  }
+
+  showErrorDisplay({ message = '', stack = '' }) {
+    document.getElementById('error-message').innerHTML = ansiConverter.toHtml(message);
+    document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(stack);
+
+    document.body.classList.remove(classes.MAIN);
+    document.body.classList.remove(classes.NOPREVIEW);
+
+    document.body.classList.add(classes.ERROR);
+  }
+
+  showNoPreview() {
+    document.body.classList.remove(classes.MAIN);
+    document.body.classList.remove(classes.ERROR);
+
+    document.body.classList.add(classes.NOPREVIEW);
+  }
+
+  showMain() {
+    document.body.classList.remove(classes.NOPREVIEW);
+    document.body.classList.remove(classes.ERROR);
+
+    document.body.classList.add(classes.MAIN);
+  }
+
+  showDocs() {
+    document.getElementById('root').setAttribute('hidden', 'true');
+    document.getElementById('docs-root').removeAttribute('hidden');
+  }
+
+  showStory() {
+    document.getElementById('docs-root').setAttribute('hidden', 'true');
+    document.getElementById('root').removeAttribute('hidden');
+  }
+
+  renderStory({ context, context: { id, getDecorated } }: { context: RenderContext }) {
+    if (getDecorated) {
+      (async () => {
+        try {
+          await this.render(context);
+          this.channel.emit(Events.STORY_RENDERED, id);
+        } catch (err) {
+          this.renderException(err);
+        }
+      })();
+    } else {
+      this.showNoPreview();
+      this.channel.emit(Events.STORY_MISSING, id);
+    }
+  }
+
+  renderDocs({ context, storyStore }: { context: RenderContext; storyStore: StoryStore }) {
+    const { kind, parameters, id } = context;
+    if (id === '*' || !parameters) {
+      return;
+    }
+
+    const docs = parameters.docs || {};
+    if (docs.page && !docs.container) {
+      throw new Error('No `docs.container` set, did you run `addon-docs/preset`?');
+    }
+
+    const DocsContainer =
+      docs.container || (({ children }: { children: Element }) => <>{children}</>);
+    const Page = docs.page || NoDocs;
+    // Docs context includes the storyStore. Probably it would be better if it didn't but that can be fixed in a later refactor
+    ReactDOM.render(
+      <DocsContainer context={{ storyStore, ...context }}>
+        <Page />
+      </DocsContainer>,
+      document.getElementById('docs-root'),
+      () => this.channel.emit(Events.DOCS_RENDERED, kind)
+    );
+  }
+
+  // renderException is used if we fail to render the story and it is uncaught by the app layer
+  renderException(err: Error) {
+    this.channel.emit(Events.STORY_THREW_EXCEPTION, err);
+    this.showErrorDisplay(err);
+
+    // Log the stack to the console. So, user could check the source code.
+    logger.error(err);
+  }
+
+  // renderError is used by the various app layers to inform the user they have done something
+  // wrong -- for instance returned the wrong thing from a story
+  renderError({ title, description }: { title: string; description: string }) {
+    this.channel.emit(Events.STORY_ERRORED, { title, description });
+    this.showErrorDisplay({
+      message: title,
+      stack: description,
+    });
+  }
+}
diff --git a/lib/core/src/client/preview/index.js b/lib/core/src/client/preview/index.ts
similarity index 100%
rename from lib/core/src/client/preview/index.js
rename to lib/core/src/client/preview/index.ts
diff --git a/lib/core/src/client/preview/loadCsf.test.ts b/lib/core/src/client/preview/loadCsf.test.ts
new file mode 100644
index 000000000000..75a44992eacc
--- /dev/null
+++ b/lib/core/src/client/preview/loadCsf.test.ts
@@ -0,0 +1,432 @@
+import { ConfigApi, ClientApi, StoryStore } from '@storybook/client-api';
+import { logger } from '@storybook/client-logger';
+import { RequireContext } from './types';
+
+import { loadCsf } from './loadCsf';
+
+jest.mock('@storybook/client-logger', () => ({
+  logger: { warn: jest.fn(), debug: jest.fn() },
+}));
+
+let cbs: ((data: any) => void)[];
+let mod: NodeModule;
+beforeEach(() => {
+  cbs = [];
+  mod = ({
+    hot: {
+      data: {},
+      dispose: (cb: (data: any) => void) => cbs.push(cb),
+    },
+  } as unknown) as NodeModule;
+});
+
+function doHMRDispose() {
+  cbs.forEach((cb) => cb(mod.hot.data));
+  cbs = [];
+}
+
+afterEach(() => {
+  doHMRDispose();
+});
+
+function makeMocks() {
+  const configApi = ({ configure: (x: Function) => x() } as unknown) as ConfigApi;
+  const storyStore = ({
+    removeStoryKind: jest.fn(),
+  } as unknown) as StoryStore;
+  const clientApi = ({
+    storiesOf: jest.fn().mockImplementation(() => ({
+      addParameters: jest.fn(),
+      addDecorator: jest.fn(),
+      add: jest.fn(),
+    })),
+  } as unknown) as ClientApi;
+
+  const context = { configApi, storyStore, clientApi };
+  const configure = loadCsf(context);
+  return { ...context, configure };
+}
+
+function makeRequireContext(map: Record<string, any>): RequireContext {
+  const context = (key: string) => map[key];
+
+  return Object.assign(context, {
+    keys: () => Object.keys(map),
+    resolve: (key: string) => key,
+  });
+}
+
+describe('core.preview.loadCsf', () => {
+  it('calls storiesOf and add correctly from CSF exports', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        1: () => 0,
+        2: () => 0,
+      },
+      b: {
+        default: {
+          title: 'b',
+        },
+        1: () => 0,
+        2: Object.assign(() => 0, { storyName: 'two' }),
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    expect(mockedStoriesOf).toHaveBeenCalledWith('a', true);
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add).toHaveBeenCalledWith('1', input.a[1], { __id: 'a--1' });
+    expect(aApi.add).toHaveBeenCalledWith('2', input.a[2], { __id: 'a--2' });
+
+    expect(mockedStoriesOf).toHaveBeenCalledWith('b', true);
+    const bApi = mockedStoriesOf.mock.results[1].value;
+    expect(bApi.add).toHaveBeenCalledWith('1', input.b[1], { __id: 'b--1' });
+    expect(bApi.add).toHaveBeenCalledWith('two', input.b[2], { __id: 'b--2' });
+  });
+
+  it('adds stories in the right order if __namedExportsOrder is supplied', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        // Note the export order doesn't work if the exports are numbers
+        x: () => 0,
+        y: () => 0,
+        z: () => 0,
+        w: () => 0,
+        __namedExportsOrder: ['w', 'x', 'z', 'y'],
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add.mock.calls.map((c: string[]) => c[0])).toEqual(['W', 'X', 'Z', 'Y']);
+  });
+
+  it('filters exports using includeStories', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+          includeStories: ['x', 'z'],
+        },
+        // Note the export order doesn't work if the exports are numbers
+        x: () => 0,
+        y: () => 0,
+        z: () => 0,
+        w: () => 0,
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add.mock.calls.map((c: string[]) => c[0])).toEqual(['X', 'Z']);
+  });
+
+  it('filters exports using excludeStories', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+          excludeStories: ['x', 'z'],
+        },
+        x: () => 0,
+        y: () => 0,
+        z: () => 0,
+        w: () => 0,
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add.mock.calls.map((c: string[]) => c[0])).toEqual(['Y', 'W']);
+  });
+
+  it('allows setting componentId', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+          id: 'random',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add).toHaveBeenCalledWith('X', input.a.x, { __id: 'random--x' });
+  });
+
+  it('sets various parameters on components', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+          component: 'c',
+          subcomponents: 'scs',
+        },
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.addParameters).toHaveBeenCalledWith({
+      framework: 'react',
+      component: 'c',
+      subcomponents: 'scs',
+      fileName: 'a',
+    });
+  });
+
+  it('allows setting component parameters, decorators, and args/argTypes', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const decorator = jest.fn();
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+          parameters: { x: 'y' },
+          decorators: [decorator],
+          args: { b: 1 },
+          argTypes: { b: 'string' },
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.addParameters).toHaveBeenCalledWith(
+      expect.objectContaining({ x: 'y', args: { b: 1 }, argTypes: { b: 'string' } })
+    );
+    expect(aApi.addDecorator).toHaveBeenCalledWith(decorator);
+  });
+
+  it('deprecates setting story parameters and decorators, and args/argTypes with story object', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const decorator = jest.fn();
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: Object.assign(() => 0, {
+          story: {
+            name: 'CustomName',
+            parameters: { x: 'y' },
+            decorators: [decorator],
+            args: { b: 1 },
+            argTypes: { b: 'string' },
+          },
+        }),
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add).toHaveBeenCalledWith('CustomName', input.a.x, {
+      x: 'y',
+      decorators: [decorator],
+      __id: 'a--x',
+      args: { b: 1 },
+      argTypes: { b: 'string' },
+    });
+    expect(logger.debug).toHaveBeenCalled();
+  });
+
+  it('allows setting story parameters and decorators, and args/argTypes', () => {
+    const { configure, clientApi } = makeMocks();
+
+    const decorator = jest.fn();
+    const input = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: Object.assign(() => 0, {
+          parameters: { x: 'y' },
+          decorators: [decorator],
+          args: { b: 1 },
+          argTypes: { b: 'string' },
+        }),
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    const aApi = mockedStoriesOf.mock.results[0].value;
+    expect(aApi.add).toHaveBeenCalledWith('X', input.a.x, {
+      x: 'y',
+      decorators: [decorator],
+      __id: 'a--x',
+      args: { b: 1 },
+      argTypes: { b: 'string' },
+    });
+    expect(logger.debug).not.toHaveBeenCalled();
+  });
+
+  it('handles HMR correctly when adding stories', () => {
+    const { configure, clientApi, storyStore } = makeMocks();
+
+    const firstInput = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(firstInput), mod, 'react');
+
+    // HMR dispose callbacks
+    doHMRDispose();
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    mockedStoriesOf.mockClear();
+    const secondInput = {
+      ...firstInput,
+      b: {
+        default: {
+          title: 'b',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(secondInput), mod, 'react');
+
+    expect(storyStore.removeStoryKind).not.toHaveBeenCalled();
+    expect(mockedStoriesOf).toHaveBeenCalledWith('b', true);
+  });
+
+  it('handles HMR correctly when removing stories', () => {
+    const { configure, clientApi, storyStore } = makeMocks();
+
+    const firstInput = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: () => 0,
+      },
+      b: {
+        default: {
+          title: 'b',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(firstInput), mod, 'react');
+
+    // HMR dispose callbacks
+    doHMRDispose();
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    mockedStoriesOf.mockClear();
+    const secondInput = {
+      a: firstInput.a,
+    };
+    configure(makeRequireContext(secondInput), mod, 'react');
+
+    expect(storyStore.removeStoryKind).toHaveBeenCalledWith('b');
+    expect(mockedStoriesOf).not.toHaveBeenCalled();
+  });
+
+  it('handles HMR correctly when changing stories', () => {
+    const { configure, clientApi, storyStore } = makeMocks();
+
+    const firstInput = {
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: () => 0,
+      },
+
+      b: {
+        default: {
+          title: 'b',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(firstInput), mod, 'react');
+
+    // HMR dispose callbacks
+    doHMRDispose();
+
+    const mockedStoriesOf = clientApi.storiesOf as jest.Mock;
+    mockedStoriesOf.mockClear();
+    const secondInput = {
+      ...firstInput,
+      a: {
+        default: {
+          title: 'a',
+        },
+        x: () => 0,
+        y: () => 0,
+      },
+    };
+    configure(makeRequireContext(secondInput), mod, 'react');
+
+    expect(storyStore.removeStoryKind).toHaveBeenCalledTimes(1);
+    expect(storyStore.removeStoryKind).toHaveBeenCalledWith('a');
+    expect(mockedStoriesOf).toHaveBeenCalledWith('a', true);
+  });
+
+  it('gives a warning if there are no exported stories', () => {
+    const { configure } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'MissingExportsComponent',
+        },
+        // no named exports, will not present a story
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+    expect(logger.warn).toHaveBeenCalled();
+  });
+
+  it('does not give a warning if there are exported stories', () => {
+    const { configure } = makeMocks();
+
+    const input = {
+      a: {
+        default: {
+          title: 'MissingExportsComponent',
+        },
+        x: () => 0,
+      },
+    };
+    configure(makeRequireContext(input), mod, 'react');
+    expect(logger.warn).not.toHaveBeenCalled();
+  });
+});
diff --git a/lib/core/src/client/preview/loadCsf.ts b/lib/core/src/client/preview/loadCsf.ts
new file mode 100644
index 000000000000..fe7924dcea14
--- /dev/null
+++ b/lib/core/src/client/preview/loadCsf.ts
@@ -0,0 +1,217 @@
+import { ConfigApi, ClientApi, StoryStore } from '@storybook/client-api';
+import { isExportStory, storyNameFromExport, toId } from '@storybook/csf';
+import { logger } from '@storybook/client-logger';
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
+
+import { Loadable, LoaderFunction, RequireContext } from './types';
+
+const deprecatedStoryAnnotationWarning = deprecate(
+  () => {},
+  dedent`
+    CSF .story annotations deprecated; annotate story functions directly:
+    - StoryFn.story.name => StoryFn.storyName
+    - StoryFn.story.(parameters|decorators) => StoryFn.(parameters|decorators)
+    See https://github.com/storybookjs/storybook/issues/10906 for details and codemod.
+`
+);
+
+let previousExports = new Map<any, string>();
+const loadStories = (
+  loadable: Loadable,
+  framework: string,
+  { clientApi, storyStore }: { clientApi: ClientApi; storyStore: StoryStore }
+) => () => {
+  let reqs = null;
+  // todo discuss / improve type check
+  if (Array.isArray(loadable)) {
+    reqs = loadable;
+  } else if ((loadable as RequireContext).keys) {
+    reqs = [loadable as RequireContext];
+  }
+
+  let currentExports = new Map<any, string>();
+  if (reqs) {
+    reqs.forEach((req) => {
+      req.keys().forEach((filename: string) => {
+        try {
+          const fileExports = req(filename);
+          currentExports.set(
+            fileExports,
+            // todo discuss: types infer that this is RequireContext; no checks needed?
+            // NOTE: turns out `babel-plugin-require-context-hook` doesn't implement this (yet)
+            typeof req.resolve === 'function' ? req.resolve(filename) : null
+          );
+        } catch (error) {
+          logger.warn(`Unexpected error: ${error}`);
+        }
+      });
+    });
+  } else {
+    const exported = (loadable as LoaderFunction)();
+    if (Array.isArray(exported) && exported.every((obj) => obj.default != null)) {
+      currentExports = new Map(exported.map((fileExports) => [fileExports, null]));
+    } else if (exported) {
+      logger.warn(
+        `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
+          exported
+        )}`
+      );
+    }
+  }
+
+  const removed = Array.from(previousExports.keys()).filter((exp) => !currentExports.has(exp));
+  removed.forEach((exp) => {
+    if (exp.default) {
+      storyStore.removeStoryKind(exp.default.title);
+    }
+  });
+
+  const added = Array.from(currentExports.keys()).filter((exp) => !previousExports.has(exp));
+
+  added.forEach((fileExports) => {
+    // An old-style story file
+    if (!fileExports.default) {
+      return;
+    }
+
+    if (!fileExports.default.title) {
+      throw new Error(
+        `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
+      );
+    }
+
+    const { default: meta, __namedExportsOrder, ...namedExports } = fileExports;
+    let exports = namedExports;
+
+    // prefer a user/loader provided `__namedExportsOrder` array if supplied
+    // we do this as es module exports are always ordered alphabetically
+    // see https://github.com/storybookjs/storybook/issues/9136
+    if (Array.isArray(__namedExportsOrder)) {
+      exports = {};
+      __namedExportsOrder.forEach((name) => {
+        if (namedExports[name]) {
+          exports[name] = namedExports[name];
+        }
+      });
+    }
+
+    const {
+      title: kindName,
+      id: componentId,
+      parameters: kindParameters,
+      decorators: kindDecorators,
+      component,
+      subcomponents,
+      args: kindArgs,
+      argTypes: kindArgTypes,
+    } = meta;
+    // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
+    // todo discuss: TS now wants a NodeModule; should we fix this differently?
+    const kind = clientApi.storiesOf(kindName, true as any);
+
+    // we should always have a framework, rest optional
+    kind.addParameters({
+      framework,
+      component,
+      subcomponents,
+      fileName: currentExports.get(fileExports),
+      ...kindParameters,
+      args: kindArgs,
+      argTypes: kindArgTypes,
+    });
+
+    // todo add type
+    (kindDecorators || []).forEach((decorator: any) => {
+      kind.addDecorator(decorator);
+    });
+
+    const storyExports = Object.keys(exports);
+    if (storyExports.length === 0) {
+      logger.warn(
+        dedent`
+          Found a story file for "${kindName}" but no exported stories.
+          Check the docs for reference: https://storybook.js.org/docs/formats/component-story-format/
+        `
+      );
+      return;
+    }
+
+    storyExports.forEach((key) => {
+      if (isExportStory(key, meta)) {
+        const storyFn = exports[key];
+        const { story } = storyFn;
+        if (story) {
+          logger.debug('deprecated story', story);
+          deprecatedStoryAnnotationWarning();
+        }
+
+        // storyFn.x takes precedence over storyFn.story.x, but
+        // mixtures are supported
+        const {
+          storyName = story?.name,
+          parameters = story?.parameters,
+          decorators = story?.decorators,
+          args = story?.args,
+          argTypes = story?.argTypes,
+        } = storyFn;
+
+        const decoratorParams = decorators ? { decorators } : null;
+        const exportName = storyNameFromExport(key);
+        const idParams = { __id: toId(componentId || kindName, exportName) };
+
+        const storyParams = {
+          ...parameters,
+          ...decoratorParams,
+          ...idParams,
+          args,
+          argTypes,
+        };
+        kind.add(storyName || exportName, storyFn, storyParams);
+      }
+    });
+  });
+  previousExports = currentExports;
+};
+
+let loaded = false;
+export const loadCsf = ({
+  clientApi,
+  storyStore,
+  configApi,
+}: {
+  clientApi: ClientApi;
+  storyStore: StoryStore;
+  configApi: ConfigApi;
+}) =>
+  /**
+   * Load a collection of stories. If it has a default export, assume that it is a module-style
+   * file and process its named exports as stories. If not, assume it's an old-style
+   * storiesof file and require it.
+   *
+   * @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports
+   * @param {*} m - ES module object for hot-module-reloading (HMR)
+   * @param {*} framework - name of framework in use, e.g. "react"
+   */
+  (loadable: Loadable, m: NodeModule, framework: string) => {
+    if (typeof m === 'string') {
+      throw new Error(
+        `Invalid module '${m}'. Did you forget to pass \`module\` as the second argument to \`configure\`"?`
+      );
+    }
+    if (m && m.hot && m.hot.dispose) {
+      ({ previousExports = new Map() } = m.hot.data || {});
+
+      m.hot.dispose((data) => {
+        loaded = false;
+        // eslint-disable-next-line no-param-reassign
+        data.previousExports = previousExports;
+      });
+    }
+    if (loaded) {
+      logger.warn('Unexpected loaded state. Did you call `load` twice?');
+    }
+    loaded = true;
+
+    configApi.configure(loadStories(loadable, framework, { clientApi, storyStore }), m);
+  };
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
deleted file mode 100644
index cee434775453..000000000000
--- a/lib/core/src/client/preview/start.js
+++ /dev/null
@@ -1,465 +0,0 @@
-import { navigator, window, document } from 'global';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import deprecate from 'util-deprecate';
-import AnsiToHtml from 'ansi-to-html';
-
-import addons from '@storybook/addons';
-import createChannel from '@storybook/channel-postmessage';
-import { ClientApi, StoryStore, ConfigApi } from '@storybook/client-api';
-import { toId, storyNameFromExport, isExportStory } from '@storybook/csf';
-import { logger } from '@storybook/client-logger';
-import Events from '@storybook/core-events';
-
-import { initializePath, setPath } from './url';
-import { NoDocs } from './NoDocs';
-
-const ansiConverter = new AnsiToHtml({
-  escapeXML: true,
-});
-
-const classes = {
-  MAIN: 'sb-show-main',
-  NOPREVIEW: 'sb-show-nopreview',
-  ERROR: 'sb-show-errordisplay',
-};
-
-function showMain() {
-  document.body.classList.remove(classes.NOPREVIEW);
-  document.body.classList.remove(classes.ERROR);
-
-  document.body.classList.add(classes.MAIN);
-}
-
-function showNopreview() {
-  document.body.classList.remove(classes.MAIN);
-  document.body.classList.remove(classes.ERROR);
-
-  document.body.classList.add(classes.NOPREVIEW);
-}
-
-function showErrorDisplay({ message = '', stack = '' }) {
-  document.getElementById('error-message').innerHTML = ansiConverter.toHtml(message);
-  document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(stack);
-
-  document.body.classList.remove(classes.MAIN);
-  document.body.classList.remove(classes.NOPREVIEW);
-
-  document.body.classList.add(classes.ERROR);
-}
-
-// showError is used by the various app layers to inform the user they have done something
-// wrong -- for instance returned the wrong thing from a story
-function showError({ title, description }) {
-  addons.getChannel().emit(Events.STORY_ERRORED, { title, description });
-  showErrorDisplay({
-    message: title,
-    stack: description,
-  });
-}
-
-// showException is used if we fail to render the story and it is uncaught by the app layer
-function showException(exception) {
-  addons.getChannel().emit(Events.STORY_THREW_EXCEPTION, exception);
-  showErrorDisplay(exception);
-
-  // Log the stack to the console. So, user could check the source code.
-  logger.error(exception);
-}
-
-const isBrowser =
-  navigator &&
-  navigator.userAgent &&
-  navigator.userAgent !== 'storyshots' &&
-  !(navigator.userAgent.indexOf('Node.js') > -1) &&
-  !(navigator.userAgent.indexOf('jsdom') > -1);
-
-export const getContext = (() => {
-  let cache;
-  return decorateStory => {
-    if (cache) {
-      return cache;
-    }
-    let channel = null;
-    if (isBrowser) {
-      try {
-        channel = addons.getChannel();
-      } catch (e) {
-        channel = createChannel({ page: 'preview' });
-        addons.setChannel(channel);
-      }
-    }
-    let storyStore;
-    let clientApi;
-    if (typeof window !== 'undefined' && window.__STORYBOOK_CLIENT_API__) {
-      clientApi = window.__STORYBOOK_CLIENT_API__;
-      // eslint-disable-next-line no-underscore-dangle
-      storyStore = clientApi._storyStore;
-    } else {
-      storyStore = new StoryStore({ channel });
-      clientApi = new ClientApi({ storyStore, decorateStory });
-    }
-    const { clearDecorators } = clientApi;
-    const configApi = new ConfigApi({ clearDecorators, storyStore, channel, clientApi });
-
-    return {
-      configApi,
-      storyStore,
-      channel,
-      clientApi,
-      showMain,
-      showError,
-      showException,
-    };
-  };
-})();
-
-function focusInInput(event) {
-  return (
-    /input|textarea/i.test(event.target.tagName) ||
-    event.target.getAttribute('contenteditable') !== null
-  );
-}
-
-export default function start(render, { decorateStory } = {}) {
-  const context = getContext(decorateStory);
-
-  const { clientApi, channel, configApi, storyStore } = context;
-  // Provide access to external scripts if `window` is defined.
-  // NOTE this is different to isBrowser, primarily for the JSDOM use case
-  let previousKind = '';
-  let previousStory = '';
-  let previousRevision = -1;
-  let previousViewMode = '';
-  let previousId = null;
-
-  const renderMain = forceRender => {
-    const revision = storyStore.getRevision();
-    const loadError = storyStore.getError();
-    const { storyId, viewMode: urlViewMode } = storyStore.getSelection();
-
-    const data = storyStore.fromId(storyId);
-
-    const { kind, name, getDecorated, id, parameters, error } = data || {};
-
-    const viewMode = parameters && parameters.docsOnly ? 'docs' : urlViewMode;
-
-    const renderContext = {
-      ...context,
-      ...data,
-      selectedKind: kind,
-      selectedStory: name,
-      parameters,
-      forceRender,
-    };
-
-    if (loadError || error) {
-      showErrorDisplay(loadError || error);
-      return;
-    }
-
-    // Render story only if selectedKind or selectedStory have changed.
-    // However, we DO want the story to re-render if the store itself has changed
-    // (which happens at the moment when HMR occurs)
-    if (
-      !forceRender &&
-      revision === previousRevision &&
-      viewMode === previousViewMode &&
-      kind === previousKind &&
-      name === previousStory
-    ) {
-      addons.getChannel().emit(Events.STORY_UNCHANGED, {
-        id,
-        revision,
-        kind,
-        name,
-        viewMode,
-      });
-      return;
-    }
-
-    if (!forceRender && previousKind && previousStory && revision === previousRevision) {
-      addons.getChannel().emit(Events.STORY_CHANGED, id);
-    }
-
-    switch (previousViewMode) {
-      case 'docs':
-        if (previousKind != null && (kind !== previousKind || viewMode !== previousViewMode)) {
-          storyStore.cleanHooksForKind(previousKind);
-          ReactDOM.unmountComponentAtNode(document.getElementById('docs-root'));
-        }
-        break;
-      case 'story':
-      default:
-        if (previousId != null && (id !== previousId || viewMode !== previousViewMode)) {
-          storyStore.cleanHooks(previousId);
-          ReactDOM.unmountComponentAtNode(document.getElementById('root'));
-        }
-    }
-
-    // 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': {
-          showMain();
-          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);
-            document.getElementById('root').removeAttribute('hidden');
-          }
-        }
-      }
-    }
-    // Given a cleaned up state, render the appropriate view mode
-    switch (viewMode) {
-      case 'docs': {
-        const docs = (parameters && parameters.docs) || {};
-        const DocsContainer = docs.container || (({ children }) => <>{children}</>);
-        const Page = docs.page || NoDocs;
-        ReactDOM.render(
-          <DocsContainer context={renderContext}>
-            <Page />
-          </DocsContainer>,
-          document.getElementById('docs-root'),
-          () => addons.getChannel().emit(Events.DOCS_RENDERED, kind)
-        );
-        break;
-      }
-      case 'story':
-      default: {
-        if (getDecorated) {
-          (async () => {
-            try {
-              await render(renderContext);
-              addons.getChannel().emit(Events.STORY_RENDERED, id);
-            } catch (ex) {
-              showException(ex);
-            }
-          })();
-        } else {
-          showNopreview();
-          addons.getChannel().emit(Events.STORY_MISSING, id);
-        }
-        break;
-      }
-    }
-
-    previousRevision = revision;
-    previousKind = kind;
-    previousStory = name;
-    previousViewMode = viewMode;
-    previousId = id;
-
-    if (!forceRender && viewMode !== 'docs') {
-      document.documentElement.scrollTop = 0;
-      document.documentElement.scrollLeft = 0;
-    }
-  };
-
-  // initialize the UI
-  const renderUI = forceRender => {
-    if (isBrowser) {
-      try {
-        renderMain(forceRender);
-      } catch (ex) {
-        showException(ex);
-      }
-    }
-  };
-
-  const forceReRender = () => renderUI(true);
-
-  // channel can be null in NodeJS
-  if (isBrowser) {
-    const deprecatedToId = deprecate(
-      toId,
-      `Passing name+kind to the SET_CURRENT_STORY event is deprecated, use a storyId instead`
-    );
-
-    channel.on(Events.FORCE_RE_RENDER, forceReRender);
-    channel.on(Events.SET_CURRENT_STORY, ({ storyId: inputStoryId, name, kind, viewMode }) => {
-      let storyId = inputStoryId;
-      // For backwards compatibility
-      if (!storyId) {
-        if (!name || !kind) {
-          throw new Error('You should pass `storyId` into SET_CURRENT_STORY');
-        }
-        storyId = deprecatedToId(kind, name);
-      }
-
-      storyStore.setSelection({ storyId, viewMode });
-      setPath({ storyId, viewMode });
-    });
-
-    // Handle keyboard shortcuts
-    window.onkeydown = event => {
-      if (!focusInInput(event)) {
-        // We have to pick off the keys of the event that we need on the other side
-        const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
-        channel.emit(Events.PREVIEW_KEYDOWN, {
-          event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
-        });
-      }
-    };
-  }
-
-  storyStore.on(Events.STORY_INIT, () => {
-    const { storyId, viewMode } = initializePath();
-    storyStore.setSelection({ storyId, viewMode });
-  });
-
-  storyStore.on(Events.STORY_RENDER, renderUI);
-
-  if (typeof window !== 'undefined') {
-    window.__STORYBOOK_CLIENT_API__ = clientApi;
-    window.__STORYBOOK_STORY_STORE__ = storyStore;
-    window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
-  }
-
-  let previousExports = new Map();
-  const loadStories = (loadable, framework) => () => {
-    let reqs = null;
-    if (Array.isArray(loadable)) {
-      reqs = loadable;
-    } else if (loadable.keys) {
-      reqs = [loadable];
-    }
-
-    let currentExports = new Map();
-    if (reqs) {
-      reqs.forEach(req => {
-        req.keys().forEach(filename => {
-          const fileExports = req(filename);
-          currentExports.set(
-            fileExports,
-            typeof req.resolve === 'function' ? req.resolve(filename) : null
-          );
-        });
-      });
-    } else {
-      const exported = loadable();
-      if (Array.isArray(exported) && exported.every(obj => obj.default != null)) {
-        currentExports = new Map(exported.map(fileExports => [fileExports, null]));
-      } else if (exported) {
-        logger.warn(
-          `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
-            exported
-          )}`
-        );
-      }
-    }
-
-    const removed = [...previousExports.keys()].filter(exp => !currentExports.has(exp));
-    removed.forEach(exp => {
-      if (exp.default) {
-        storyStore.removeStoryKind(exp.default.title);
-      }
-    });
-    if (removed.length > 0) {
-      storyStore.incrementRevision();
-    }
-
-    const added = [...currentExports.keys()].filter(exp => !previousExports.has(exp));
-    added.forEach(fileExports => {
-      // An old-style story file
-      if (!fileExports.default) {
-        return;
-      }
-
-      if (!fileExports.default.title) {
-        throw new Error(
-          `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
-        );
-      }
-
-      const { default: meta, __orderedExports, ...namedExports } = fileExports;
-      // prefer a user/loader provided `__orderedExports` object if supplied as es module exports
-      // are ordered alphabetically - see https://github.com/storybookjs/storybook/issues/9136
-      const exports = __orderedExports || namedExports;
-      const {
-        title: kindName,
-        id: componentId,
-        parameters: params,
-        decorators: decos,
-        component,
-        subcomponents,
-      } = meta;
-      // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
-      const kind = clientApi.storiesOf(kindName, true);
-
-      // we should always have a framework, rest optional
-      kind.addParameters({
-        framework,
-        component,
-        subcomponents,
-        fileName: currentExports.get(fileExports),
-        ...params,
-      });
-
-      (decos || []).forEach(decorator => {
-        kind.addDecorator(decorator);
-      });
-
-      Object.keys(exports).forEach(key => {
-        if (isExportStory(key, meta)) {
-          const storyFn = exports[key];
-          const { name, parameters, decorators } = storyFn.story || {};
-          if (parameters && parameters.decorators) {
-            deprecate(() => {},
-            `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
-          }
-          const decoratorParams = decorators ? { decorators } : null;
-          const exportName = storyNameFromExport(key);
-          const idParams = { __id: toId(componentId || kindName, exportName) };
-          kind.add(name || exportName, storyFn, {
-            ...parameters,
-            ...decoratorParams,
-            ...idParams,
-          });
-        }
-      });
-    });
-    previousExports = currentExports;
-  };
-
-  let loaded = false;
-  /**
-   * Load a collection of stories. If it has a default export, assume that it is a module-style
-   * file and process its named exports as stories. If not, assume it's an old-style
-   * storiesof file and require it.
-   *
-   * @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports
-   * @param {*} m - ES module object for hot-module-reloading (HMR)
-   * @param {*} framework - name of framework in use, e.g. "react"
-   */
-  const configure = (loadable, m, framework) => {
-    if (typeof m === 'string') {
-      throw new Error(
-        `Invalid module '${m}'. Did you forget to pass \`module\` as the second argument to \`configure\`"?`
-      );
-    }
-    if (m && m.hot && m.hot.dispose) {
-      ({ previousExports = new Map() } = m.hot.data || {});
-
-      m.hot.dispose(data => {
-        loaded = false;
-        // eslint-disable-next-line no-param-reassign
-        data.previousExports = previousExports;
-      });
-    }
-    if (loaded) {
-      logger.warn('Unexpected loaded state. Did you call `load` twice?');
-    }
-    loaded = true;
-    configApi.configure(loadStories(loadable, framework), m);
-  };
-
-  return { configure, context, clientApi, configApi, forceReRender };
-}
diff --git a/lib/core/src/client/preview/start.test.js b/lib/core/src/client/preview/start.test.js
deleted file mode 100644
index bf56348e50f4..000000000000
--- a/lib/core/src/client/preview/start.test.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { history, document, window } from 'global';
-
-import Events from '@storybook/core-events';
-import start from './start';
-
-jest.mock('@storybook/client-logger');
-jest.mock('global', () => ({
-  history: { replaceState: jest.fn() },
-  navigator: { userAgent: 'browser', platform: '' },
-  window: {
-    __STORYBOOK_CLIENT_API__: undefined,
-    addEventListener: jest.fn(),
-    location: { search: '' },
-    history: { replaceState: jest.fn() },
-    matchMedia: jest.fn().mockReturnValue({ matches: false }),
-  },
-  document: {
-    addEventListener: jest.fn(),
-    getElementById: jest.fn().mockReturnValue({}),
-    body: { classList: { add: jest.fn(), remove: jest.fn() } },
-    documentElement: {},
-    location: { search: '?id=kind--story' },
-  },
-}));
-
-afterEach(() => {
-  window.__STORYBOOK_CLIENT_API__ = undefined;
-});
-
-it('returns apis', () => {
-  const render = jest.fn();
-
-  const result = start(render);
-
-  expect(result).toEqual(
-    expect.objectContaining({
-      context: expect.any(Object),
-      clientApi: expect.any(Object),
-      configApi: expect.any(Object),
-      forceReRender: expect.any(Function),
-    })
-  );
-});
-
-it('reuses the current client api when the lib is reloaded', () => {
-  jest.useFakeTimers();
-  const render = jest.fn();
-
-  const { clientApi } = start(render);
-
-  const valueOfClientApi = window.__STORYBOOK_CLIENT_API__;
-
-  const { clientApi: newClientApi } = start(render);
-  jest.runAllTimers();
-
-  expect(clientApi).toEqual(newClientApi);
-  expect(clientApi).toEqual(valueOfClientApi);
-});
-
-it('calls render when you add a story', () => {
-  jest.useFakeTimers();
-  const render = jest.fn();
-
-  const { clientApi, configApi } = start(render);
-
-  configApi.configure(() => {
-    clientApi.storiesOf('kind', {}).add('story', () => {});
-  }, {});
-  jest.runAllTimers();
-
-  expect(render).toHaveBeenCalledWith(
-    expect.objectContaining({ selectedKind: 'kind', selectedStory: 'story' })
-  );
-});
-
-it('emits an exception and shows error when your story throws', () => {
-  jest.useFakeTimers();
-  const render = jest.fn();
-
-  const { clientApi, configApi } = start(render);
-
-  configApi.configure(() => {
-    clientApi.storiesOf('kind', {}).add('story1', () => {});
-  }, {});
-  jest.runAllTimers();
-
-  expect(render).not.toHaveBeenCalled();
-  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-nopreview');
-});
-
-it('emits an error and shows error when your framework calls showError', () => {
-  jest.useFakeTimers();
-  const error = {
-    title: 'Some error',
-    description: 'description',
-  };
-  const render = jest.fn().mockImplementation(({ showError }) => {
-    showError(error);
-  });
-
-  const { clientApi, configApi } = start(render);
-
-  configApi.configure(() => {
-    clientApi.storiesOf('kind', {}).add('story', () => {});
-  }, {});
-  jest.runAllTimers();
-
-  expect(render).toHaveBeenCalled();
-  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
-});
-
-describe('STORY_INIT', () => {
-  it('supports path params', () => {
-    document.location = {
-      pathname: 'pathname',
-      search: '?path=/story/kind--story&bar=baz',
-    };
-
-    const render = jest.fn();
-    const { clientApi } = start(render);
-    const store = clientApi._storyStore;
-    store.setSelection = jest.fn();
-    store.emit(Events.STORY_INIT);
-
-    store.emit();
-    expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
-  });
-
-  it('supports story kind/name params', () => {
-    document.location = {
-      pathname: 'pathname',
-      search: '?selectedKind=kind&selectedStory=story&bar=baz',
-    };
-
-    const render = jest.fn();
-    const { clientApi } = start(render);
-    const store = clientApi._storyStore;
-    store.setSelection = jest.fn();
-
-    store.emit(Events.STORY_INIT);
-    expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
-    expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
-  });
-});
diff --git a/lib/core/src/client/preview/start.test.ts b/lib/core/src/client/preview/start.test.ts
new file mode 100644
index 000000000000..697984cd29dd
--- /dev/null
+++ b/lib/core/src/client/preview/start.test.ts
@@ -0,0 +1,113 @@
+import { document, window } from 'global';
+import Events from '@storybook/core-events';
+
+import start from './start';
+
+jest.mock('@storybook/client-logger');
+jest.mock('global', () => ({
+  history: { replaceState: jest.fn() },
+  navigator: { userAgent: 'browser', platform: '' },
+  window: {
+    __STORYBOOK_CLIENT_API__: undefined,
+    addEventListener: jest.fn(),
+    location: { search: '' },
+    history: { replaceState: jest.fn() },
+    matchMedia: jest.fn().mockReturnValue({ matches: false }),
+  },
+  document: {
+    addEventListener: jest.fn(),
+    getElementById: jest.fn().mockReturnValue({}),
+    body: { classList: { add: jest.fn(), remove: jest.fn() }, style: {} },
+    documentElement: {},
+    location: { search: '?id=kind--story' },
+  },
+}));
+
+afterEach(() => {
+  window.__STORYBOOK_CLIENT_API__ = undefined;
+});
+
+it('returns apis', () => {
+  const render = jest.fn();
+
+  const result = start(render);
+
+  expect(result).toEqual(
+    expect.objectContaining({
+      configure: expect.any(Function),
+      channel: expect.any(Object),
+      clientApi: expect.any(Object),
+      configApi: expect.any(Object),
+      forceReRender: expect.any(Function),
+    })
+  );
+});
+
+it('reuses the current client api when the lib is reloaded', () => {
+  jest.useFakeTimers();
+  const render = jest.fn();
+
+  const { clientApi } = start(render);
+
+  const valueOfClientApi = window.__STORYBOOK_CLIENT_API__;
+
+  const { clientApi: newClientApi, channel } = start(render);
+
+  channel.emit(Events.SET_STORIES, {});
+
+  expect(clientApi).toEqual(newClientApi);
+  expect(clientApi).toEqual(valueOfClientApi);
+});
+
+it('calls render when you add a story', () => {
+  jest.useFakeTimers();
+  const render = jest.fn();
+
+  const { clientApi, configApi, channel } = start(render);
+
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {} as NodeModule).add('story', () => {});
+  }, {} as NodeModule);
+
+  channel.emit(Events.SET_STORIES, {});
+
+  expect(render).toHaveBeenCalledWith(expect.objectContaining({ kind: 'kind', name: 'story' }));
+});
+
+it('emits an exception and shows error when your story throws', () => {
+  jest.useFakeTimers();
+  const render = jest.fn();
+
+  const { clientApi, configApi, channel } = start(render);
+
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {} as NodeModule).add('story1', () => {});
+  }, {} as NodeModule);
+
+  channel.emit(Events.SET_STORIES, {});
+
+  expect(render).not.toHaveBeenCalled();
+  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-nopreview');
+});
+
+it('emits an error and shows error when your framework calls showError', () => {
+  jest.useFakeTimers();
+  const error = {
+    title: 'Some error',
+    description: 'description',
+  };
+  const render = jest.fn().mockImplementation(({ showError }) => {
+    showError(error);
+  });
+
+  const { clientApi, configApi, channel } = start(render);
+
+  configApi.configure(() => {
+    clientApi.storiesOf('kind', {} as NodeModule).add('story', () => {});
+  }, {} as NodeModule);
+
+  channel.emit(Events.SET_STORIES, {});
+
+  expect(render).toHaveBeenCalled();
+  expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
+});
diff --git a/lib/core/src/client/preview/start.ts b/lib/core/src/client/preview/start.ts
new file mode 100644
index 000000000000..266dc3eebab0
--- /dev/null
+++ b/lib/core/src/client/preview/start.ts
@@ -0,0 +1,108 @@
+import { navigator, window } from 'global';
+
+import addons, { DecorateStoryFunction, Channel } from '@storybook/addons';
+import createChannel from '@storybook/channel-postmessage';
+import { ClientApi, ConfigApi, StoryStore } from '@storybook/client-api';
+import Events from '@storybook/core-events';
+
+import { initializePath, setPath } from './url';
+import { RenderStoryFunction } from './types';
+import { loadCsf } from './loadCsf';
+import { StoryRenderer } from './StoryRenderer';
+
+const isBrowser =
+  navigator &&
+  navigator.userAgent &&
+  navigator.userAgent !== 'storyshots' &&
+  !(navigator.userAgent.indexOf('Node.js') > -1) &&
+  !(navigator.userAgent.indexOf('jsdom') > -1);
+
+function getOrCreateChannel() {
+  let channel = null;
+  if (isBrowser) {
+    try {
+      channel = addons.getChannel();
+    } catch (e) {
+      channel = createChannel({ page: 'preview' });
+      addons.setChannel(channel);
+    }
+  }
+
+  return channel;
+}
+
+function getClientApi(decorateStory: DecorateStoryFunction, channel?: Channel) {
+  let storyStore: StoryStore;
+  let clientApi: ClientApi;
+  if (
+    typeof window !== 'undefined' &&
+    window.__STORYBOOK_CLIENT_API__ &&
+    window.__STORYBOOK_STORY_STORE__
+  ) {
+    clientApi = window.__STORYBOOK_CLIENT_API__;
+    storyStore = window.__STORYBOOK_STORY_STORE__;
+  } else {
+    storyStore = new StoryStore({ channel });
+    clientApi = new ClientApi({ storyStore, decorateStory });
+  }
+  return { clientApi, storyStore };
+}
+
+function focusInInput(event: Event) {
+  const target = event.target as Element;
+  return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
+}
+
+// todo improve typings
+export default function start(
+  render: RenderStoryFunction,
+  { decorateStory }: { decorateStory?: DecorateStoryFunction } = {}
+) {
+  const channel = getOrCreateChannel();
+  const { clientApi, storyStore } = getClientApi(decorateStory, channel);
+  const configApi = new ConfigApi({ storyStore });
+  const storyRenderer = new StoryRenderer({ render, channel, storyStore });
+
+  // Only try and do URL/event based stuff in a browser context (i.e. not in storyshots)
+  if (isBrowser) {
+    const afterStoriesSet = () => {
+      // Initialize the story store with the selection in the URL
+      const { storyId, viewMode } = initializePath(storyStore);
+
+      if (storyId !== '*') {
+        storyStore.setSelection({ storyId, viewMode });
+
+        // Keep the URL updated based on the current story
+        channel.on(Events.CURRENT_STORY_WAS_SET, setPath);
+      }
+    };
+
+    channel.once(Events.SET_STORIES, afterStoriesSet);
+
+    // Handle keyboard shortcuts
+    window.onkeydown = (event: KeyboardEvent) => {
+      if (!focusInInput(event)) {
+        // We have to pick off the keys of the event that we need on the other side
+        const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
+        channel.emit(Events.PREVIEW_KEYDOWN, {
+          event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
+        });
+      }
+    };
+  }
+
+  if (typeof window !== 'undefined') {
+    window.__STORYBOOK_CLIENT_API__ = clientApi;
+    window.__STORYBOOK_STORY_STORE__ = storyStore;
+    window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
+  }
+
+  const configure = loadCsf({ clientApi, storyStore, configApi });
+  return {
+    configure,
+    clientApi,
+    configApi,
+    channel,
+    forceReRender: () => storyRenderer.forceReRender(),
+  };
+}
diff --git a/lib/core/src/client/preview/types.ts b/lib/core/src/client/preview/types.ts
new file mode 100644
index 000000000000..134edf7fc070
--- /dev/null
+++ b/lib/core/src/client/preview/types.ts
@@ -0,0 +1,29 @@
+import { RenderContext } from '@storybook/client-api';
+
+export interface PreviewError {
+  message?: string;
+  stack?: string;
+}
+
+// Copy of require.context
+// interface RequireContext {
+//   keys(): string[];
+//   (id: string): any;
+//   <T>(id: string): T;
+//   resolve(id: string): string;
+//   /** The module id of the context module. This may be useful for module.hot.accept. */
+//   id: string;
+// }
+
+export interface RequireContext {
+  keys: () => string[];
+  (id: string): any;
+  resolve(id: string): string;
+}
+export type LoaderFunction = () => void | any[];
+export type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+
+export { RenderContext };
+
+// The function used by a framework to render story to the DOM
+export type RenderStoryFunction = (context: RenderContext) => void;
diff --git a/lib/core/src/client/preview/url.js b/lib/core/src/client/preview/url.js
deleted file mode 100644
index 93f81c42678a..000000000000
--- a/lib/core/src/client/preview/url.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { history, document } from 'global';
-import qs from 'qs';
-import { toId } from '@storybook/csf';
-
-export function pathToId(path) {
-  const match = (path || '').match(/^\/story\/(.+)/);
-  if (!match) {
-    throw new Error(`Invalid path '${path}',  must start with '/story/'`);
-  }
-  return match[1];
-}
-
-export const setPath = ({ storyId, viewMode }) => {
-  const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
-    ignoreQueryPrefix: true,
-  });
-  const newPath = `${document.location.pathname}?${qs.stringify({
-    ...rest,
-    id: storyId,
-    viewMode,
-  })}`;
-  history.replaceState({}, '', newPath);
-};
-
-export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
-  (path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
-
-export const parseQueryParameters = search => {
-  const { id } = qs.parse(search, { ignoreQueryPrefix: true });
-  return id;
-};
-
-export const initializePath = () => {
-  const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
-  let { id: storyId, viewMode } = query; // eslint-disable-line prefer-const
-  if (!storyId) {
-    storyId = getIdFromLegacyQuery(query);
-    if (storyId) {
-      setPath({ storyId, viewMode });
-    }
-  }
-  return { storyId, viewMode };
-};
diff --git a/lib/core/src/client/preview/url.test.js b/lib/core/src/client/preview/url.test.js
deleted file mode 100644
index 0a33955e4c71..000000000000
--- a/lib/core/src/client/preview/url.test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { history, document } from 'global';
-import {
-  pathToId,
-  setPath,
-  getIdFromLegacyQuery,
-  parseQueryParameters,
-  initializePath,
-} from './url';
-
-jest.mock('global', () => ({
-  history: { replaceState: jest.fn() },
-  document: {
-    location: {
-      pathname: 'pathname',
-      search: '',
-    },
-  },
-}));
-
-describe('url', () => {
-  describe('pathToId', () => {
-    it('should parse valid ids', () => {
-      expect(pathToId('/story/story--id')).toEqual('story--id');
-    });
-    it('should error on invalid ids', () => {
-      [null, '', '/whatever/story/story--id'].forEach(path => {
-        expect(() => pathToId(path)).toThrow(/Invalid/);
-      });
-    });
-  });
-
-  describe('setPath', () => {
-    it('should navigate to storyId', () => {
-      setPath({ storyId: 'story--id' });
-      expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=story--id');
-    });
-    it('should replace legacy parameters but preserve others', () => {
-      document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
-      setPath({ storyId: 'story--id' });
-      expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?foo=bar&id=story--id');
-    });
-  });
-
-  describe('getIdFromLegacyQuery', () => {
-    it('should parse story paths', () => {
-      expect(getIdFromLegacyQuery({ path: '/story/story--id' })).toBe('story--id');
-    });
-    it('should parse legacy queries', () => {
-      expect(
-        getIdFromLegacyQuery({ path: null, selectedKind: 'kind', selectedStory: 'story' })
-      ).toBe('kind--story');
-    });
-    it('should not parse non-queries', () => {
-      expect(getIdFromLegacyQuery({})).toBeUndefined();
-    });
-  });
-
-  describe('parseQueryParameters', () => {
-    it('should parse id', () => {
-      expect(parseQueryParameters('?foo=bar&id=story--id')).toBe('story--id');
-    });
-    it('should not parse non-ids', () => {
-      expect(parseQueryParameters('')).toBeUndefined();
-    });
-  });
-
-  describe('initializePath', () => {
-    it('should handle id queries', () => {
-      document.location.search = '?id=story--id';
-      expect(initializePath()).toEqual({ storyId: 'story--id' });
-      expect(history.replaceState).not.toHaveBeenCalled();
-    });
-    it('should redirect legacy queries', () => {
-      document.location.search = '?selectedKind=kind&selectedStory=story';
-      expect(initializePath()).toEqual({ storyId: 'kind--story' });
-      expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=kind--story');
-    });
-  });
-});
diff --git a/lib/core/src/client/preview/url.test.ts b/lib/core/src/client/preview/url.test.ts
new file mode 100644
index 000000000000..eba4a6b848ad
--- /dev/null
+++ b/lib/core/src/client/preview/url.test.ts
@@ -0,0 +1,121 @@
+import { history, document } from 'global';
+
+import { StoryStore } from '@storybook/client-api';
+
+import {
+  pathToId,
+  setPath,
+  getIdFromLegacyQuery,
+  parseQueryParameters,
+  initializePath,
+} from './url';
+
+jest.mock('global', () => ({
+  history: { replaceState: jest.fn() },
+  document: {
+    location: {
+      pathname: 'pathname',
+      search: '',
+    },
+  },
+}));
+
+describe('url', () => {
+  describe('pathToId', () => {
+    it('should parse valid ids', () => {
+      expect(pathToId('/story/story--id')).toEqual('story--id');
+    });
+    it('should error on invalid ids', () => {
+      [null, '', '/whatever/story/story--id'].forEach((path) => {
+        expect(() => pathToId(path)).toThrow(/Invalid/);
+      });
+    });
+  });
+
+  describe('setPath', () => {
+    it('should navigate to storyId', () => {
+      setPath({ storyId: 'story--id', viewMode: 'story' });
+      expect(history.replaceState).toHaveBeenCalledWith(
+        {},
+        '',
+        'pathname?id=story--id&viewMode=story'
+      );
+    });
+    it('should replace legacy parameters but preserve others', () => {
+      document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
+      setPath({ storyId: 'story--id', viewMode: 'story' });
+      expect(history.replaceState).toHaveBeenCalledWith(
+        {},
+        '',
+        'pathname?foo=bar&id=story--id&viewMode=story'
+      );
+    });
+  });
+
+  describe('getIdFromLegacyQuery', () => {
+    const getRawStory = () => {};
+    const store: unknown = { getRawStory };
+    it('should parse story paths', () => {
+      expect(getIdFromLegacyQuery({ path: '/story/story--id' }, store as StoryStore)).toBe(
+        'story--id'
+      );
+    });
+    it('should use legacy parameters to look up custom story ids', () => {
+      const customStore: unknown = {
+        getRawStory: () => ({ id: 'custom--id' }),
+      };
+      expect(
+        getIdFromLegacyQuery(
+          { selectedKind: 'kind', selectedStory: 'story' },
+          customStore as StoryStore
+        )
+      ).toBe('custom--id');
+    });
+    it('should use fall-back behavior for legacy queries for unknown stories', () => {
+      expect(
+        getIdFromLegacyQuery(
+          { path: null, selectedKind: 'kind', selectedStory: 'story' },
+          store as StoryStore
+        )
+      ).toBe('kind--story');
+    });
+
+    it('should not parse non-queries', () => {
+      expect(getIdFromLegacyQuery({}, store as StoryStore)).toBeUndefined();
+    });
+  });
+
+  describe('parseQueryParameters', () => {
+    it('should parse id', () => {
+      expect(parseQueryParameters('?foo=bar&id=story--id')).toBe('story--id');
+    });
+    it('should not parse non-ids', () => {
+      expect(parseQueryParameters('')).toBeUndefined();
+    });
+  });
+
+  describe('initializePath', () => {
+    const getRawStory = () => {};
+    const store: unknown = { getRawStory };
+    it('should handle id queries', () => {
+      document.location.search = '?id=story--id';
+      expect(initializePath(store as StoryStore)).toEqual({
+        storyId: 'story--id',
+        viewMode: 'story',
+      });
+      expect(history.replaceState).not.toHaveBeenCalled();
+    });
+    it('should redirect legacy queries', () => {
+      document.location.search = '?selectedKind=kind&selectedStory=story';
+      expect(initializePath(store as StoryStore)).toEqual({
+        storyId: 'kind--story',
+        viewMode: 'story',
+      });
+      expect(history.replaceState).toHaveBeenCalledWith(
+        {},
+        '',
+        'pathname?id=kind--story&viewMode=story'
+      );
+    });
+  });
+});
diff --git a/lib/core/src/client/preview/url.ts b/lib/core/src/client/preview/url.ts
new file mode 100644
index 000000000000..3f0d55875261
--- /dev/null
+++ b/lib/core/src/client/preview/url.ts
@@ -0,0 +1,90 @@
+import { history, document } from 'global';
+import qs from 'qs';
+import { toId } from '@storybook/csf';
+import { StoryStore } from '@storybook/client-api';
+import { StoryId, ViewMode } from '@storybook/addons';
+
+export function pathToId(path: string) {
+  const match = (path || '').match(/^\/story\/(.+)/);
+  if (!match) {
+    throw new Error(`Invalid path '${path}',  must start with '/story/'`);
+  }
+  return match[1];
+}
+
+// todo add proper types
+export const setPath = ({ storyId, viewMode }: { storyId: StoryId; viewMode: ViewMode }) => {
+  const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
+    ignoreQueryPrefix: true,
+  });
+  const newPath = `${document.location.pathname}?${qs.stringify({
+    ...rest,
+    id: storyId,
+    viewMode,
+  })}`;
+  history.replaceState({}, '', newPath);
+};
+
+// todo add proper types
+export const getIdFromLegacyQuery = (query: qs.ParsedQs, storyStore: StoryStore) => {
+  const path = getFirstString(query.path);
+  const selectedKind = getFirstString(query.selectedKind);
+  const selectedStory = getFirstString(query.selectedStory);
+
+  if (path) {
+    return pathToId(path);
+  }
+  if (selectedKind && selectedStory) {
+    // Look up the story ID inside the story store, since as of 5.3, the
+    // Story ID is not necessarily a direct function of its kind/name.
+    const story = storyStore.getRawStory(selectedKind, selectedStory);
+    if (story) {
+      return story.id;
+    }
+    // this will preserve existing behavior of showing a "not found" screen,
+    // but the inputs will be preserved in the query param to help debugging
+    return toId(selectedKind, selectedStory);
+  }
+  return undefined;
+};
+
+export const parseQueryParameters = (search: string) => {
+  const { id } = qs.parse(search, { ignoreQueryPrefix: true });
+  return id;
+};
+
+type ValueOf<T> = T[keyof T];
+const isObject = (val: Record<string, any>) =>
+  val != null && typeof val === 'object' && Array.isArray(val) === false;
+
+const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
+  if (typeof v === 'string') {
+    return v;
+  }
+  if (Array.isArray(v)) {
+    return getFirstString(v[0]);
+  }
+  if (isObject(v)) {
+    // @ts-ignore
+    return getFirstString(Object.values(v));
+  }
+  return undefined;
+};
+
+export const initializePath = (storyStore: StoryStore) => {
+  const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
+  let storyId = getFirstString(query.id);
+  let viewMode = getFirstString(query.viewMode) as ViewMode;
+
+  if (typeof viewMode !== 'string' || !viewMode.match(/docs|story/)) {
+    viewMode = 'story';
+  }
+
+  if (!storyId) {
+    storyId = getIdFromLegacyQuery(query, storyStore);
+    if (storyId) {
+      setPath({ storyId, viewMode });
+    }
+  }
+  return { storyId, viewMode };
+};
diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js
index c15d87f9da6f..348f42c9bd25 100644
--- a/lib/core/src/server/build-dev.js
+++ b/lib/core/src/server/build-dev.js
@@ -9,10 +9,9 @@ import chalk from 'chalk';
 import { logger, colors, instance as npmLog } from '@storybook/node-logger';
 import fetch from 'node-fetch';
 import Cache from 'file-system-cache';
-import findCacheDir from 'find-cache-dir';
-import open from 'open';
+import open from 'better-opn';
 import boxen from 'boxen';
-import semver from 'semver';
+import semver from '@storybook/semver';
 import dedent from 'ts-dedent';
 import Table from 'cli-table3';
 import prettyTime from 'pretty-hrtime';
@@ -21,24 +20,24 @@ import detectFreePort from 'detect-port';
 
 import storybook from './dev-server';
 import { getDevCli } from './cli';
+import { resolvePathInStorybookCache } from './utils/resolve-path-in-sb-cache';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
-const cacheDir = findCacheDir({ name: 'storybook' });
 const cache = Cache({
-  basePath: cacheDir,
+  basePath: resolvePathInStorybookCache('dev-server'),
   ns: 'storybook', // Optional. A grouping namespace for items.
 });
 
 const writeStats = async (name, stats) => {
   await fs.writeFile(
-    path.join(cacheDir, `${name}-stats.json`),
+    resolvePathInStorybookCache(`${name}-stats.json`),
     JSON.stringify(stats.toJson(), null, 2),
     'utf8'
   );
 };
 
-const getFreePort = port =>
-  detectFreePort(port).catch(error => {
+const getFreePort = (port) =>
+  detectFreePort(port).catch((error) => {
     logger.error(error);
     process.exit(-1);
   });
@@ -59,7 +58,7 @@ async function getServer(app, options) {
   }
 
   const sslOptions = {
-    ca: await Promise.all((options.sslCa || []).map(ca => fs.readFile(ca, 'utf-8'))),
+    ca: await Promise.all((options.sslCa || []).map((ca) => fs.readFile(ca, 'utf-8'))),
     cert: await fs.readFile(options.sslCert, 'utf-8'),
     key: await fs.readFile(options.sslKey, 'utf-8'),
   };
@@ -74,7 +73,7 @@ async function applyStatic(app, options) {
 
   if (staticDir && staticDir.length) {
     await Promise.all(
-      staticDir.map(async dir => {
+      staticDir.map(async (dir) => {
         const staticPath = path.resolve(dir);
 
         if (await !fs.exists(staticPath)) {
@@ -100,7 +99,7 @@ async function applyStatic(app, options) {
   }
 }
 
-const updateCheck = async version => {
+const updateCheck = async (version) => {
   let result;
   const time = Date.now();
   try {
@@ -134,7 +133,7 @@ function listenToServer(server, listenAddr) {
     serverReject = reject;
   });
 
-  server.listen(...listenAddr, error => {
+  server.listen(...listenAddr, (error) => {
     if (error) {
       serverReject(error);
     } else {
@@ -231,17 +230,19 @@ async function outputStats(previewStats, managerStats) {
     await writeStats('preview', previewStats);
   }
   await writeStats('manager', managerStats);
-  logger.info(`stats written to => ${chalk.cyan(path.join(cacheDir, '[name].json'))}`);
+  logger.info(`stats written to => ${chalk.cyan(resolvePathInStorybookCache('[name].json'))}`);
 }
 
 function openInBrowser(address) {
-  open(address).catch(() => {
+  try {
+    open(address);
+  } catch (error) {
     logger.error(dedent`
       Could not open ${address} inside a browser. If you're running this command inside a
       docker container or on a CI, you need to pass the '--ci' flag to prevent opening a
       browser by default.
     `);
-  });
+  }
 }
 
 export async function buildDevStandalone(options) {
@@ -286,6 +287,12 @@ export async function buildDevStandalone(options) {
       extendServer(server);
     }
 
+    app.use((req, res, next) => {
+      res.header('Access-Control-Allow-Origin', '*');
+      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+      next();
+    });
+
     await applyStatic(app, options);
 
     const {
@@ -341,7 +348,7 @@ export async function buildDevStandalone(options) {
       if (error.error) {
         logger.error(error.error);
       } else if (error.stats && error.stats.compilation.errors) {
-        error.stats.compilation.errors.forEach(e => logger.plain(e));
+        error.stats.compilation.errors.forEach((e) => logger.plain(e));
       } else {
         logger.error(error);
       }
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
index 90990f2c2ec0..57f88a75f6c4 100644
--- a/lib/core/src/server/build-static.js
+++ b/lib/core/src/server/build-static.js
@@ -25,8 +25,8 @@ async function compileManager(managerConfig, managerStartTime) {
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
           const { warnings, errors } = stats.toJson(managerConfig.stats);
 
-          errors.forEach(e => logger.error(e));
-          warnings.forEach(e => logger.error(e));
+          errors.forEach((e) => logger.error(e));
+          warnings.forEach((e) => logger.error(e));
         }
 
         process.exitCode = 1;
@@ -35,7 +35,7 @@ async function compileManager(managerConfig, managerStartTime) {
       }
 
       logger.trace({ message: '=> manager built', time: process.hrtime(managerStartTime) });
-      stats.toJson(managerConfig.stats).warnings.forEach(e => logger.warn(e));
+      stats.toJson(managerConfig.stats).warnings.forEach((e) => logger.warn(e));
 
       resolve(stats);
     });
@@ -81,14 +81,16 @@ async function compilePreview(previewConfig, previewStartTime) {
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
           const { warnings, errors } = stats.toJson(previewConfig.stats);
 
-          errors.forEach(e => logger.error(e));
-          warnings.forEach(e => logger.error(e));
+          errors.forEach((e) => logger.error(e));
+          warnings.forEach((e) => logger.error(e));
           return reject(stats);
         }
       }
 
       logger.trace({ message: '=> Preview built', time: process.hrtime(previewStartTime) });
-      stats.toJson(previewConfig.stats).warnings.forEach(e => logger.warn(e));
+      if (stats) {
+        stats.toJson(previewConfig.stats).warnings.forEach((e) => logger.warn(e));
+      }
 
       return resolve(stats);
     });
@@ -98,7 +100,7 @@ async function compilePreview(previewConfig, previewStartTime) {
 async function copyAllStaticFiles(staticDir, outputDir) {
   if (staticDir && staticDir.length) {
     await Promise.all(
-      staticDir.map(async dir => {
+      staticDir.map(async (dir) => {
         const staticPath = path.resolve(dir);
 
         if (await !fs.exists(staticPath)) {
@@ -118,13 +120,11 @@ async function buildManager(configType, outputDir, configDir, options) {
 
   logger.info('=> Loading manager config..');
   const managerConfig = await loadManagerConfig({
+    ...options,
     configType,
     outputDir,
     configDir,
     corePresets: [require.resolve('./manager/manager-preset.js')],
-    frameworkPresets: options.frameworkPresets,
-    docsMode: options.docsMode,
-    previewUrl: options.previewUrl,
   });
 
   if (options.debugWebpack) {
@@ -142,12 +142,12 @@ async function buildPreview(configType, outputDir, packageJson, options) {
 
   logger.info('=> Loading preview config..');
   const previewConfig = await loadConfig({
+    ...options,
     configType,
     outputDir,
     packageJson,
     corePresets: [require.resolve('./preview/preview-preset.js')],
     overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
-    ...options,
   });
 
   if (debugWebpack) {
diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
index f8239ac6abdf..050b4f9de5b5 100644
--- a/lib/core/src/server/cli/dev.js
+++ b/lib/core/src/server/cli/dev.js
@@ -8,7 +8,7 @@ async function getCLI(packageJson) {
 
   program
     .version(packageJson.version)
-    .option('-p, --port [number]', 'Port to run Storybook', str => parseInt(str, 10))
+    .option('-p, --port [number]', 'Port to run Storybook', (str) => parseInt(str, 10))
     .option('-h, --host [string]', 'Host to run Storybook')
     .option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
     .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
@@ -25,6 +25,7 @@ async function getCLI(packageJson) {
     .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
     .option('--smoke-test', 'Exit after successful start')
     .option('--ci', "CI mode (skip interactive prompts, don't open browser)")
+    .option('--loglevel [level]', 'Control level of logging during build')
     .option('--quiet', 'Suppress verbose build output')
     .option('--no-version-updates', 'Suppress update check', true)
     .option('--no-dll', 'Do not use dll reference')
@@ -36,10 +37,12 @@ async function getCLI(packageJson) {
     .option('--docs', 'Build a documentation-only site using addon-docs')
     .parse(process.argv);
 
+  logger.setLevel(program.loglevel);
+
   // Workaround the `-h` shorthand conflict.
   // Output the help if `-h` is called without any value.
   // See storybookjs/storybook#5360
-  program.on('option:host', value => {
+  program.on('option:host', (value) => {
     if (!value) {
       program.help();
     }
diff --git a/lib/core/src/server/cli/utils.js b/lib/core/src/server/cli/utils.js
index b13d04e1181c..3e006cdf0c3d 100644
--- a/lib/core/src/server/cli/utils.js
+++ b/lib/core/src/server/cli/utils.js
@@ -3,7 +3,7 @@ export function parseList(str) {
 }
 
 export function getEnvConfig(program, configEnv) {
-  Object.keys(configEnv).forEach(fieldName => {
+  Object.keys(configEnv).forEach((fieldName) => {
     const envVarName = configEnv[fieldName];
     const envVarValue = process.env[envVarName];
     if (envVarValue) {
diff --git a/lib/core/src/server/common/babel-cache-preset.js b/lib/core/src/server/common/babel-cache-preset.js
index a5b798468132..7dc50253e525 100644
--- a/lib/core/src/server/common/babel-cache-preset.js
+++ b/lib/core/src/server/common/babel-cache-preset.js
@@ -1,10 +1,9 @@
-import findCacheDir from 'find-cache-dir';
+import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
 
-const extend = babelConfig => ({
+const extend = (babelConfig) => ({
   // This is a feature of `babel-loader` for webpack (not Babel itself).
   // It enables a cache directory for faster-rebuilds
-  // `find-cache-dir` will create the cache directory under the node_modules directory.
-  cacheDirectory: findCacheDir({ name: 'storybook' }),
+  cacheDirectory: resolvePathInStorybookCache('babel'),
   ...babelConfig,
 });
 
diff --git a/lib/core/src/server/common/babel-loader.js b/lib/core/src/server/common/babel-loader.js
deleted file mode 100644
index 3b762f613f0e..000000000000
--- a/lib/core/src/server/common/babel-loader.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { includePaths, excludePaths } from '../config/utils';
-
-export default options => ({
-  test: /\.(mjs|jsx?)$/,
-  use: [
-    {
-      loader: 'babel-loader',
-      options,
-    },
-  ],
-  include: includePaths,
-  exclude: excludePaths,
-});
diff --git a/lib/core/src/server/common/babel.js b/lib/core/src/server/common/babel.js
index 8c5d84c41616..18a0afed1728 100644
--- a/lib/core/src/server/common/babel.js
+++ b/lib/core/src/server/common/babel.js
@@ -1,34 +1,46 @@
-function createProdPresets() {
-  return [
-    [
-      require.resolve('babel-preset-minify'),
-      {
-        builtIns: false,
-        mangle: false,
-      },
-    ],
-  ];
-}
+export const plugins = [
+  require.resolve('@babel/plugin-transform-shorthand-properties'),
+  require.resolve('@babel/plugin-transform-block-scoping'),
+  [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+  [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+  require.resolve('@babel/plugin-proposal-export-default-from'),
+  require.resolve('@babel/plugin-syntax-dynamic-import'),
+  [
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    { loose: true, useBuiltIns: true },
+  ],
+  require.resolve('@babel/plugin-transform-classes'),
+  require.resolve('@babel/plugin-transform-arrow-functions'),
+  require.resolve('@babel/plugin-transform-parameters'),
+  require.resolve('@babel/plugin-transform-destructuring'),
+  require.resolve('@babel/plugin-transform-spread'),
+  require.resolve('@babel/plugin-transform-for-of'),
+  require.resolve('babel-plugin-macros'),
+  /*
+   * Optional chaining and nullish coalescing are supported in
+   * @babel/preset-env, but not yet supported in Webpack due to support
+   * missing from acorn. These can be removed once Webpack has support.
+   * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
+   */
+  require.resolve('@babel/plugin-proposal-optional-chaining'),
+  require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+];
 
-export default ({ configType }) => {
-  const isProd = configType === 'PRODUCTION';
-  const prodPresets = isProd ? createProdPresets() : [];
+export const presets = [
+  [
+    require.resolve('@babel/preset-env'),
+    { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
+  ],
+  require.resolve('@babel/preset-typescript'),
+];
 
+export default () => {
   return {
     sourceType: 'unambiguous',
-    presets: [
-      [
-        require.resolve('@babel/preset-env'),
-        { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
-      ],
-      ...prodPresets,
-    ],
+    presets: [...presets],
     plugins: [
-      require.resolve('@babel/plugin-proposal-object-rest-spread'),
-      require.resolve('@babel/plugin-proposal-class-properties'),
-      require.resolve('@babel/plugin-syntax-dynamic-import'),
+      ...plugins,
       [require.resolve('babel-plugin-emotion'), { sourceMap: true, autoLabel: true }],
-      require.resolve('babel-plugin-macros'),
     ],
   };
 };
diff --git a/lib/core/src/server/common/common-preset.js b/lib/core/src/server/common/common-preset.js
index 222a9127a75a..8ef5e36fa30f 100644
--- a/lib/core/src/server/common/common-preset.js
+++ b/lib/core/src/server/common/common-preset.js
@@ -6,6 +6,8 @@ export const babel = async (_, options) => {
   const { configDir, presets } = options;
 
   return loadCustomBabelConfig(configDir, () =>
-    presets.apply('babelDefault', babelConfig(options), options)
+    presets.apply('babelDefault', babelConfig(), options)
   );
 };
+
+export const logLevel = (previous, options) => previous || options.loglevel || 'info';
diff --git a/lib/core/src/server/common/custom-presets.js b/lib/core/src/server/common/custom-presets.js
index ef56074726e6..7d6912d15c28 100644
--- a/lib/core/src/server/common/custom-presets.js
+++ b/lib/core/src/server/common/custom-presets.js
@@ -1,21 +1,15 @@
 import path from 'path';
-import dedent from 'ts-dedent';
-import serverRequire from '../utils/server-require';
+import { serverRequire, serverResolve } from '../utils/server-require';
+import validateConfigurationFiles from '../utils/validate-configuration-files';
 
 export default function loadCustomPresets({ configDir }) {
+  validateConfigurationFiles(configDir);
+
   const presets = serverRequire(path.resolve(configDir, 'presets'));
   const main = serverRequire(path.resolve(configDir, 'main'));
 
-  if (presets && main) {
-    throw new Error(dedent`
-      You have both a "main.js" and a "presets.js", remove the "presets.js" file from your configDir (${path.resolve(
-        configDir,
-        'presets'
-      )})`);
-  }
-
   if (main) {
-    return [path.resolve(configDir, 'main')];
+    return [serverResolve(path.resolve(configDir, 'main'))];
   }
 
   return presets || [];
diff --git a/lib/core/src/server/common/es6Transpiler.js b/lib/core/src/server/common/es6Transpiler.js
new file mode 100644
index 000000000000..b731e992e857
--- /dev/null
+++ b/lib/core/src/server/common/es6Transpiler.js
@@ -0,0 +1,29 @@
+import { plugins } from './babel';
+
+const es6Transpiler = () => {
+  // TODO: generate regexp using are-you-es5
+
+  const include = /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/;
+  return {
+    test: /\.js$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          sourceType: 'unambiguous',
+          presets: [
+            [
+              require.resolve('@babel/preset-env'),
+              { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
+            ],
+            require.resolve('@babel/preset-react'),
+          ],
+          plugins,
+        },
+      },
+    ],
+    include,
+  };
+};
+
+export default es6Transpiler;
diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js
index 9d49b62f18d3..f29703372afa 100644
--- a/lib/core/src/server/config.js
+++ b/lib/core/src/server/config.js
@@ -1,15 +1,27 @@
+import { logger } from '@storybook/node-logger';
 import loadPresets from './presets';
 import loadCustomPresets from './common/custom-presets';
+import { typeScriptDefaults } from './config/defaults';
 
 async function getPreviewWebpackConfig(options, presets) {
-  const babelOptions = await presets.apply('babel', {}, options);
+  const typescriptOptions = await presets.apply('typescript', { ...typeScriptDefaults }, options);
+  const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions });
   const entries = await presets.apply('entries', [], options);
   const stories = await presets.apply('stories', [], options);
 
-  return presets.apply('webpack', {}, { ...options, babelOptions, entries, stories });
+  return presets.apply(
+    'webpack',
+    {},
+    { ...options, babelOptions, entries, stories, typescriptOptions }
+  );
 }
 
-export default async options => {
+export const filterPresetsConfig = (presetsConfig) =>
+  presetsConfig.filter(
+    (preset) => !/@storybook[\\\\/]preset-typescript/.test(preset.name || preset)
+  );
+
+export default async (options) => {
   const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options;
 
   const presetsConfig = [
@@ -20,7 +32,15 @@ export default async options => {
     ...overridePresets,
   ];
 
-  const presets = loadPresets(presetsConfig, restOptions);
+  // Remove `@storybook/preset-typescript` and add a warning if in use.
+  const filteredPresetConfig = filterPresetsConfig(presetsConfig);
+  if (filteredPresetConfig.length < presetsConfig.length) {
+    logger.warn(
+      'Storybook now supports TypeScript natively. You can safely remove `@storybook/preset-typescript`.'
+    );
+  }
+
+  const presets = loadPresets(filteredPresetConfig, restOptions);
 
   return getPreviewWebpackConfig({ ...restOptions, presets }, presets);
 };
diff --git a/lib/core/src/server/config.test.js b/lib/core/src/server/config.test.js
new file mode 100644
index 000000000000..44cf29c13ea3
--- /dev/null
+++ b/lib/core/src/server/config.test.js
@@ -0,0 +1,21 @@
+import { filterPresetsConfig } from './config';
+
+describe('filterPresetsConfig', () => {
+  it('string config', () => {
+    expect(
+      filterPresetsConfig(['@storybook/preset-scss', '@storybook/preset-typescript'])
+    ).toEqual(['@storybook/preset-scss']);
+  });
+
+  it('windows paths', () => {
+    expect(filterPresetsConfig(['a', '@storybook\\preset-typescript'])).toEqual(['a']);
+  });
+
+  it('object config', () => {
+    const tsConfig = {
+      name: '@storybook/preset-typescript',
+      options: { foo: 1 },
+    };
+    expect(filterPresetsConfig([tsConfig, 'a'])).toEqual(['a']);
+  });
+});
diff --git a/lib/core/src/server/config/defaults.js b/lib/core/src/server/config/defaults.js
new file mode 100644
index 000000000000..a2ba128cc833
--- /dev/null
+++ b/lib/core/src/server/config/defaults.js
@@ -0,0 +1,7 @@
+export const typeScriptDefaults = {
+  check: false,
+  reactDocgen: 'react-docgen-typescript',
+  reactDocgenTypescriptOptions: {
+    propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+  },
+};
diff --git a/lib/core/src/server/config/useBaseTsSupport.js b/lib/core/src/server/config/useBaseTsSupport.js
new file mode 100644
index 000000000000..0706158ed3e5
--- /dev/null
+++ b/lib/core/src/server/config/useBaseTsSupport.js
@@ -0,0 +1,8 @@
+/**
+ * Returns true if the framework can use the base TS config.
+ * @param {string} framework
+ */
+export const useBaseTsSupport = (framework) => {
+  // These packages both have their own TS implementation.
+  return !['vue', 'angular'].includes(framework);
+};
diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js
index ee4fc7a2e02f..7fb2db2caa23 100644
--- a/lib/core/src/server/config/utils.js
+++ b/lib/core/src/server/config/utils.js
@@ -15,7 +15,7 @@ const projectRoot = () => {
     //
   }
   try {
-    result = result || __dirname.split('node-modules')[0];
+    result = result || __dirname.split('node_modules')[0];
   } catch (e) {
     //
   }
@@ -25,13 +25,12 @@ const projectRoot = () => {
 
 export const includePaths = [projectRoot()];
 export const nodeModulesPaths = path.resolve('./node_modules');
-export const excludePaths = [/node_modules/];
 
-const nodePathsToArray = nodePath =>
+const nodePathsToArray = (nodePath) =>
   nodePath
     .split(process.platform === 'win32' ? ';' : ':')
     .filter(Boolean)
-    .map(p => path.resolve('./', p));
+    .map((p) => path.resolve('./', p));
 
 // Load environment variables starts with STORYBOOK_ to the client side.
 export function loadEnv(options = {}) {
@@ -48,8 +47,8 @@ export function loadEnv(options = {}) {
   };
 
   Object.keys(process.env)
-    .filter(name => /^STORYBOOK_/.test(name))
-    .forEach(name => {
+    .filter((name) => /^STORYBOOK_/.test(name))
+    .forEach((name) => {
       env[name] = process.env[name];
     });
 
diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js
index 4a49a1a6d3ca..7213b491b485 100644
--- a/lib/core/src/server/dev-server.js
+++ b/lib/core/src/server/dev-server.js
@@ -10,6 +10,7 @@ import { getMiddleware } from './utils/middleware';
 import { logConfig } from './logConfig';
 import loadConfig from './config';
 import loadManagerConfig from './manager/manager-config';
+import { resolvePathInStorybookCache } from './utils/resolve-path-in-sb-cache';
 
 const dllPath = path.join(__dirname, '../../dll');
 
@@ -21,9 +22,9 @@ let resolved = false;
 
 const router = new Router();
 
-export default function(options) {
+export default function (options) {
   const configDir = path.resolve(options.configDir);
-  const outputDir = path.resolve(options.outputDir || path.join(__dirname, '..', 'public'));
+  const outputDir = path.resolve(options.outputDir || resolvePathInStorybookCache('public'));
   const configType = 'DEVELOPMENT';
 
   const startTime = process.hrtime();
@@ -37,45 +38,53 @@ export default function(options) {
     cache,
     corePresets: [require.resolve('./manager/manager-preset.js')],
     ...options,
-  }).then(config => {
+  }).then((config) => {
     if (options.debugWebpack) {
       logConfig('Manager webpack config', config, logger);
     }
+    const managerCompiler = webpack(config);
+
+    const devMiddlewareOptions = {
+      publicPath: config.output.publicPath,
+      watchOptions: {
+        aggregateTimeout: 2000,
+        ignored: /node_modules/,
+      },
+      // this actually causes 0 (regular) output from wdm & webpack
+      logLevel: 'warn',
+      clientLogLevel: 'warning',
+      noInfo: true,
+    };
+
+    const managerDevMiddlewareInstance = webpackDevMiddleware(
+      managerCompiler,
+      devMiddlewareOptions
+    );
+
+    router.get(/\/static\/media\/.*\..*/, (request, response, next) => {
+      response.set('Cache-Control', `public, max-age=31536000`);
+      next();
+    });
+
+    router.use(managerDevMiddlewareInstance);
+
     return new Promise((resolve, reject) => {
-      webpack(config).watch(
-        {
-          aggregateTimeout: 1,
-          ignored: /node_modules/,
-        },
-        (err, stats) => {
-          managerTotalTime = process.hrtime(startTime);
-          if (!resolved && (err || stats.hasErrors())) {
-            const error = new Error('Manager build is broken');
-            error.error = err;
-            error.close = true;
-            error.stats = stats;
-            stats.toJson(options.errorDetails);
-            logger.line();
-            logger.line();
-            try {
-              previewReject(error);
-              previewProcess.close();
-              logger.warn('force closed preview build');
-            } catch (e) {
-              logger.warn('Unable to close preview build!');
-            }
-            logger.line();
-            reject(error);
-          } else {
-            resolve(stats);
-          }
+      managerDevMiddlewareInstance.waitUntilValid((stats) => {
+        managerTotalTime = process.hrtime(startTime);
+
+        if (!stats) {
+          reject(new Error('no stats after building preview'));
+        } else if (stats.hasErrors()) {
+          reject(stats);
+        } else {
+          resolve(stats);
         }
-      );
+      });
     });
   });
 
   const previewPromise = options.ignorePreview
-    ? new Promise(resolve => resolve())
+    ? new Promise((resolve) => resolve())
     : loadConfig({
         configType,
         outputDir,
@@ -83,7 +92,7 @@ export default function(options) {
         corePresets: [require.resolve('./preview/preview-preset.js')],
         overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
         ...options,
-      }).then(previewConfig => {
+      }).then((previewConfig) => {
         if (options.debugWebpack) {
           logConfig('Preview webpack config', previewConfig, logger);
         }
@@ -110,17 +119,18 @@ export default function(options) {
           ...previewConfig.devServer,
         };
 
-        const webpackDevMiddlewareInstance = webpackDevMiddleware(
+        const previewDevMiddlewareInstance = webpackDevMiddleware(
           previewCompiler,
           devMiddlewareOptions
         );
 
-        router.use(webpackDevMiddlewareInstance);
+        router.use(previewDevMiddlewareInstance);
         router.use(webpackHotMiddleware(previewCompiler));
 
         return new Promise((resolve, reject) => {
           previewReject = reject;
-          webpackDevMiddlewareInstance.waitUntilValid(stats => {
+          previewDevMiddlewareInstance.waitUntilValid((stats) => {
+            resolved = true;
             previewTotalTime = process.hrtime(startTime);
 
             if (!stats) {
@@ -131,7 +141,7 @@ export default function(options) {
               resolve(stats);
             }
           });
-          previewProcess = webpackDevMiddlewareInstance;
+          previewProcess = previewDevMiddlewareInstance;
         });
       });
 
@@ -139,8 +149,19 @@ export default function(options) {
   const middlewareFn = getMiddleware(configDir);
   middlewareFn(router);
 
+  managerPromise.catch((e) => {
+    try {
+      if (!resolved) {
+        previewReject();
+      }
+      previewProcess.close();
+      logger.warn('force closed preview build');
+    } catch (err) {
+      logger.warn('Unable to close preview build!');
+    }
+  });
+
   return Promise.all([managerPromise, previewPromise]).then(([managerStats, previewStats]) => {
-    resolved = true;
     router.get('/', (request, response) => {
       response.set('Content-Type', 'text/html');
       response.sendFile(path.join(`${outputDir}/index.html`));
@@ -153,10 +174,6 @@ export default function(options) {
       response.set('Content-Type', 'text/html');
       response.sendFile(path.join(`${dllPath}/${request.params[0]}`));
     });
-    router.get(/(.+\.js)$/, (request, response) => {
-      response.set('Content-Type', 'text/javascript');
-      response.sendFile(path.join(`${outputDir}/${request.params[0]}`));
-    });
 
     return { previewStats, managerStats, managerTotalTime, previewTotalTime, router };
   });
diff --git a/lib/core/src/server/manager/babel-loader-manager.js b/lib/core/src/server/manager/babel-loader-manager.js
new file mode 100644
index 000000000000..d377a81be8de
--- /dev/null
+++ b/lib/core/src/server/manager/babel-loader-manager.js
@@ -0,0 +1,23 @@
+import { includePaths } from '../config/utils';
+import { plugins, presets } from '../common/babel';
+
+export default () => ({
+  test: /\.(mjs|tsx?|jsx?)$/,
+  use: [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        sourceType: 'unambiguous',
+        presets: [...presets, require.resolve('@babel/preset-react')],
+        plugins: [
+          ...plugins,
+          // Shoud only be done on manager. Template literals are not meant to be
+          // transformed for frameworks like ember
+          require.resolve('@babel/plugin-transform-template-literals'),
+        ],
+      },
+    },
+  ],
+  include: includePaths,
+  exclude: [/node_modules/, /dist/],
+});
diff --git a/lib/core/src/server/manager/manager-config.js b/lib/core/src/server/manager/manager-config.js
index 57e9fd315fe3..309af8af7a98 100644
--- a/lib/core/src/server/manager/manager-config.js
+++ b/lib/core/src/server/manager/manager-config.js
@@ -1,14 +1,86 @@
+import path from 'path';
+import fs from 'fs-extra';
+import findUp from 'find-up';
+import resolveFrom from 'resolve-from';
+
+import { logger } from '@storybook/node-logger';
+
 import loadPresets from '../presets';
 import loadCustomPresets from '../common/custom-presets';
+import { typeScriptDefaults } from '../config/defaults';
+
+const getAutoRefs = async (options) => {
+  const location = await findUp('package.json', { cwd: options.configDir });
+  const directory = path.dirname(location);
+
+  const { dependencies, devDependencies } = await fs.readJSON(location);
+
+  const list = await Promise.all(
+    Object.keys({ ...dependencies, ...devDependencies }).map(async (d) => {
+      try {
+        const l = resolveFrom(directory, path.join(d, 'package.json'));
+
+        const { storybook, name } = await fs.readJSON(l);
+
+        if (storybook?.url) {
+          return { id: name, ...storybook };
+        }
+      } catch {
+        logger.warn(`unable to find package.json for ${d}`);
+        return undefined;
+      }
+      return undefined;
+    })
+  );
+
+  return list.filter(Boolean);
+};
+
+const toTitle = (input) => {
+  const result = input
+    .replace(/[A-Z]/g, (f) => ` ${f}`)
+    .replace(/[-_][A-Z]/gi, (f) => ` ${f.toUppercase()}`)
+    .replace('-', ' ')
+    .replace('_', ' ');
+
+  return `${result.substring(0, 1).toUpperCase()}${result.substring(1)}`.trim();
+};
 
 async function getManagerWebpackConfig(options, presets) {
-  const babelOptions = await presets.apply('babel', {}, options);
+  const typescriptOptions = await presets.apply('typescript', { ...typeScriptDefaults }, options);
+  const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions });
+
+  const autoRefs = await getAutoRefs(options);
+  const refs = await presets.apply('refs', undefined, options);
   const entries = await presets.apply('managerEntries', [], options);
 
-  return presets.apply('managerWebpack', {}, { ...options, babelOptions, entries });
+  if (refs) {
+    autoRefs.forEach(({ id, url, title }) => {
+      refs[id] = {
+        id,
+        url,
+        title,
+      };
+    });
+
+    Object.entries(refs).forEach(([key, value]) => {
+      const url = typeof value === 'string' ? value : value.url;
+      const title = typeof value === 'string' ? toTitle(key) : value.title || toTitle(value.key);
+
+      refs[key] = {
+        id: key,
+        title,
+        url,
+      };
+    });
+
+    entries.push(path.resolve(path.join(options.configDir, `generated-refs.js`)));
+  }
+
+  return presets.apply('managerWebpack', {}, { ...options, babelOptions, entries, refs });
 }
 
-export default async options => {
+export default async (options) => {
   const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options;
 
   const presetsConfig = [
diff --git a/lib/core/src/server/manager/manager-preset.js b/lib/core/src/server/manager/manager-preset.js
index 7b4906d45ea6..b51924045b3a 100644
--- a/lib/core/src/server/manager/manager-preset.js
+++ b/lib/core/src/server/manager/manager-preset.js
@@ -1,27 +1,25 @@
-import loadCustomAddons from '../utils/load-custom-addons-file';
+import { loadManagerOrAddonsFile } from '../utils/load-manager-or-addons-file';
 import createDevConfig from './manager-webpack.config';
 
 export async function managerWebpack(_, options) {
   return createDevConfig(options);
 }
 
-export async function managerEntries(_, options) {
-  const { presets, managerEntry = '../../client/manager' } = options;
+export async function managerEntries(installedAddons, options) {
+  const { managerEntry = '../../client/manager' } = options;
   const entries = [require.resolve('../common/polyfills')];
 
-  const installedAddons = await presets.apply('addons', [], options);
-
   if (installedAddons && installedAddons.length) {
     entries.push(...installedAddons);
   }
 
-  entries.push(require.resolve(managerEntry));
+  const managerConfig = loadManagerOrAddonsFile(options);
+  if (managerConfig) {
+    entries.push(managerConfig);
+  }
 
+  entries.push(require.resolve(managerEntry));
   return entries;
 }
 
-export async function addons(_, options) {
-  return loadCustomAddons(options);
-}
-
 export * from '../common/common-preset';
diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js
index 8516d389317d..f818e4e1a9cc 100644
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@@ -1,38 +1,48 @@
 import path from 'path';
-import webpack, { DefinePlugin, ContextReplacementPlugin } from 'webpack';
+import fse from 'fs-extra';
+import { DefinePlugin, DllReferencePlugin } from 'webpack';
 import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import CoreJSUpgradeWebpackPlugin from 'corejs-upgrade-webpack-plugin';
+import PnpWebpackPlugin from 'pnp-webpack-plugin';
+import VirtualModulePlugin from 'webpack-virtual-modules';
 
 import themingPaths from '@storybook/theming/paths';
 import uiPaths from '@storybook/ui/paths';
 
-import findCacheDir from 'find-cache-dir';
-
 import { version } from '../../../package.json';
 import { getManagerHeadHtml } from '../utils/template';
 import { loadEnv } from '../config/utils';
-import babelLoader from '../common/babel-loader';
+
+import babelLoader from './babel-loader-manager';
+import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
+import es6Transpiler from '../common/es6Transpiler';
 
 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
-const context = path.join(coreDirName, '../../node_modules');
-const cacheDir = findCacheDir({ name: 'storybook' });
+// TODO: improve node_modules detection
+const context = coreDirName.includes('node_modules')
+  ? path.join(coreDirName, '../../') // Real life case, already in node_modules
+  : path.join(coreDirName, '../../node_modules'); // SB Monorepo
 
-export default ({
+export default async ({
   configDir,
   configType,
   docsMode,
   entries,
+  refs,
   dll,
   outputDir,
   cache,
-  babelOptions,
   previewUrl,
   versionCheck,
+  presets,
 }) => {
   const { raw, stringified } = loadEnv();
+  const logLevel = await presets.apply('logLevel', undefined);
   const isProd = configType === 'PRODUCTION';
+  const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
+    encoding: 'utf8',
+  });
 
   return {
     name: 'manager',
@@ -47,10 +57,18 @@ export default ({
     },
     cache,
     plugins: [
+      refs
+        ? new VirtualModulePlugin({
+            [path.resolve(path.join(configDir, `generated-refs.js`))]: refsTemplate.replace(
+              `'{{refs}}'`,
+              JSON.stringify(refs)
+            ),
+          })
+        : null,
       dll
-        ? new webpack.DllReferencePlugin({
+        ? new DllReferencePlugin({
             context,
-            manifest: path.join(__dirname, '../../../dll/storybook_ui-manifest.json'),
+            manifest: path.join(coreDirName, 'dll', 'storybook_ui-manifest.json'),
           })
         : null,
       new HtmlWebpackPlugin({
@@ -65,6 +83,7 @@ export default ({
           version,
           dlls: dll ? ['./sb_dll/storybook_ui_dll.js'] : [],
           globals: {
+            LOGLEVEL: logLevel,
             VERSIONCHECK: JSON.stringify(versionCheck),
             DOCS_MODE: docsMode, // global docs mode
             PREVIEW_URL: previewUrl, // global preview URL
@@ -80,13 +99,11 @@ export default ({
         'process.env': stringified,
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
       }),
-      // See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
-      new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
-      new CoreJSUpgradeWebpackPlugin({ resolveFrom: __dirname }),
     ].filter(Boolean),
     module: {
       rules: [
-        babelLoader(babelOptions),
+        babelLoader(),
+        es6Transpiler(),
         {
           test: /\.css$/,
           use: [
@@ -117,14 +134,22 @@ export default ({
       ],
     },
     resolve: {
-      extensions: ['.mjs', '.js', '.jsx', '.json'],
+      extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'],
       modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
         ...themingPaths,
         ...uiPaths,
+        semver: require.resolve('@storybook/semver'),
       },
+      plugins: [
+        // Transparently resolve packages via PnP when needed; noop otherwise
+        PnpWebpackPlugin,
+      ],
+    },
+    resolveLoader: {
+      plugins: [PnpWebpackPlugin.moduleLoader(module)],
     },
-    recordsPath: path.join(cacheDir, 'records.json'),
+    recordsPath: resolvePathInStorybookCache('records.json'),
     performance: {
       hints: false,
     },
diff --git a/lib/core/src/server/manager/virtualModuleRef.template.js b/lib/core/src/server/manager/virtualModuleRef.template.js
new file mode 100644
index 000000000000..a7ac896f4197
--- /dev/null
+++ b/lib/core/src/server/manager/virtualModuleRef.template.js
@@ -0,0 +1,5 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  refs: '{{refs}}',
+});
diff --git a/lib/core/src/server/presets.js b/lib/core/src/server/presets.js
index 411573f2e1e9..16eff965499c 100644
--- a/lib/core/src/server/presets.js
+++ b/lib/core/src/server/presets.js
@@ -1,10 +1,35 @@
-import { logger } from '@storybook/node-logger';
 import dedent from 'ts-dedent';
+import { join } from 'path';
+import { logger } from '@storybook/node-logger';
+import fs from 'fs';
+import { resolveFile } from './utils/resolve-file';
+
+const isObject = (val) => val != null && typeof val === 'object' && Array.isArray(val) === false;
+const isFunction = (val) => typeof val === 'function';
+
+// Copied out of parse-package-name
+//  '@storybook/addon-actions/register' => ( name: '@storybook/addon-actions', path: '/register', version: '' )
+const RE_SCOPED = /^(@[^/]+\/[^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
+const RE_NORMAL = /^([^/@]+)(?:\/([^@]+))?(?:@([\s\S]+))?/;
+function parsePackageName(input) {
+  if (typeof input !== 'string') {
+    throw new TypeError('Expected a string');
+  }
 
-const isObject = val => val != null && typeof val === 'object' && Array.isArray(val) === false;
-const isFunction = val => typeof val === 'function';
+  const matched = input.startsWith('@') ? input.match(RE_SCOPED) : input.match(RE_NORMAL);
 
-const sanitizeSubPresets = (input, presetOptions, storybookOptions) => {
+  if (!matched) {
+    throw new Error(`[parse-package-name] "${input}" is not a valid string`);
+  }
+
+  return {
+    name: matched[1],
+    path: matched[2] || '',
+    version: matched[3] || '',
+  };
+}
+
+const resolvePresetFunction = (input, presetOptions, storybookOptions) => {
   if (isFunction(input)) {
     return input({ ...storybookOptions, ...presetOptions });
   }
@@ -15,6 +40,85 @@ const sanitizeSubPresets = (input, presetOptions, storybookOptions) => {
   return [];
 };
 
+const isLocalFileImport = (packageName) => fs.existsSync(packageName);
+
+/**
+ * Parse an addon into either a managerEntry or a preset. Throw on invalid input.
+ *
+ * Valid inputs:
+ * - '@storybook/addon-actions/register'
+ *   =>  { type: 'managerEntries', item }
+ *
+ * - '@storybook/addon-docs/preset'
+ *   =>  { type: 'presets', item }
+ *
+ * - '@storybook/addon-docs'
+ *   =>  { type: 'presets', item: '@storybook/addon-docs/preset' }
+ *
+ * - { name: '@storybook/addon-docs(/preset)?', options: { ... } }
+ *   =>  { type: 'presets', item: { name: '@storybook/addon-docs/preset', options } }
+ */
+export const resolveAddonName = (name) => {
+  let path;
+  if (isLocalFileImport(name)) {
+    path = name;
+  } else {
+    ({ path } = parsePackageName(name));
+  }
+
+  // when user provides full path, we don't need to do anything
+  if (path) {
+    return {
+      name,
+      // Accept `register`, `register.js`, `require.resolve('foo/register'), `register-panel`
+      type: path.match(/register(-panel)?(.(js|ts|tsx|jsx))?$/) ? 'managerEntries' : 'presets',
+    };
+  }
+
+  try {
+    return {
+      name: resolveFile(join(name, 'preset')),
+      type: 'presets',
+    };
+    // eslint-disable-next-line no-empty
+  } catch (err) {}
+
+  try {
+    return {
+      name: resolveFile(join(name, 'register')),
+      type: 'managerEntries',
+    };
+    // eslint-disable-next-line no-empty
+  } catch (err) {}
+
+  return { name, type: 'presets' };
+};
+
+export const splitAddons = (addons) => {
+  return addons.reduce(
+    (acc, item) => {
+      try {
+        if (isObject(item)) {
+          const { name } = resolveAddonName(item.name);
+          acc.presets.push({ ...item, name });
+        } else {
+          const { name, type } = resolveAddonName(item);
+          acc[type].push(name);
+        }
+      } catch (err) {
+        logger.error(
+          `Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/presets/introduction/\n${item}`
+        );
+      }
+      return acc;
+    },
+    {
+      managerEntries: [],
+      presets: [],
+    }
+  );
+};
+
 function interopRequireDefault(filePath) {
   // eslint-disable-next-line global-require,import/no-dynamic-require
   const result = require(`${filePath}`);
@@ -29,7 +133,12 @@ function loadPreset(input, level, storybookOptions) {
   try {
     const name = input.name ? input.name : input;
     const presetOptions = input.options ? input.options : {};
-    const contents = interopRequireDefault(name);
+    let contents = interopRequireDefault(name);
+
+    if (typeof contents === 'function') {
+      // allow the export of a preset to be a function, that gets storybookOptions
+      contents = contents(storybookOptions);
+    }
 
     if (Array.isArray(contents)) {
       const subPresets = contents;
@@ -37,11 +146,16 @@ function loadPreset(input, level, storybookOptions) {
     }
 
     if (isObject(contents)) {
-      const { presets: subPresetsInput, ...rest } = contents;
-      const subPresets = sanitizeSubPresets(subPresetsInput, presetOptions, storybookOptions);
+      const { addons: addonsInput, presets: presetsInput, ...rest } = contents;
+
+      const subPresets = resolvePresetFunction(presetsInput, presetOptions, storybookOptions);
+      const subAddons = resolvePresetFunction(addonsInput, presetOptions, storybookOptions);
+
+      const { managerEntries, presets } = splitAddons(subAddons);
 
       return [
-        ...loadPresets(subPresets, level + 1, storybookOptions),
+        ...loadPresets([...subPresets, ...presets], level + 1, storybookOptions),
+        { name: `${name}_additionalManagerEntries`, preset: { managerEntries } },
         {
           name,
           preset: rest,
@@ -81,8 +195,8 @@ function loadPresets(presets, level, storybookOptions) {
   }, []);
 }
 
-function applyPresets(presets, extension, config, args) {
-  const presetResult = new Promise(resolve => resolve(config));
+function applyPresets(presets, extension, config, args, storybookOptions) {
+  const presetResult = new Promise((resolve) => resolve(config));
 
   if (!presets.length) {
     return presetResult;
@@ -100,15 +214,15 @@ function applyPresets(presets, extension, config, args) {
       const context = {
         extensionFn,
         preset,
-        combinedOptions: { ...args, ...options, presetsList: presets },
+        combinedOptions: { ...storybookOptions, ...args, ...options, presetsList: presets },
       };
 
-      return accumulationPromise.then(newConfig =>
+      return accumulationPromise.then((newConfig) =>
         context.extensionFn.call(context.preset, newConfig, context.combinedOptions)
       );
     }
 
-    return accumulationPromise.then(newConfig => {
+    return accumulationPromise.then((newConfig) => {
       if (Array.isArray(newConfig) && Array.isArray(change)) {
         return [...newConfig, ...change];
       }
@@ -125,7 +239,7 @@ function getPresets(presets, storybookOptions) {
 
   return {
     apply: async (extension, config, args = {}) =>
-      applyPresets(loadedPresets, extension, config, args),
+      applyPresets(loadedPresets, extension, config, args, storybookOptions),
   };
 }
 
diff --git a/lib/core/src/server/presets.test.js b/lib/core/src/server/presets.test.js
index 613f4cddd5af..711825a2528f 100644
--- a/lib/core/src/server/presets.test.js
+++ b/lib/core/src/server/presets.test.js
@@ -17,9 +17,23 @@ jest.mock('@storybook/node-logger', () => ({
   },
 }));
 
+jest.mock('./utils/resolve-file', () => ({
+  resolveFile: (name) => {
+    const KNOWN_FILES = [
+      '@storybook/addon-actions/register',
+      '@storybook/addon-knobs/register',
+      '@storybook/addon-docs/preset',
+    ];
+    if (KNOWN_FILES.includes(name)) {
+      return name;
+    }
+    throw new Error(`Cannot find module '${name}'`);
+  },
+}));
+
 describe('presets', () => {
   it('does not throw when there is no preset file', async () => {
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     let presets;
 
     async function testPresets() {
@@ -34,7 +48,7 @@ describe('presets', () => {
   });
 
   it('does not throw when presets are empty', async () => {
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(getPresets([]));
 
     async function testPresets() {
@@ -46,7 +60,7 @@ describe('presets', () => {
   });
 
   it('does not throw when preset can not be loaded', async () => {
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(getPresets(['preset-foo']));
 
     async function testPresets() {
@@ -59,11 +73,11 @@ describe('presets', () => {
 
   it('loads and applies presets when they are combined in another preset', async () => {
     mockPreset('preset-foo', {
-      foo: exec => exec.concat('foo'),
+      foo: (exec) => exec.concat('foo'),
     });
 
     mockPreset('preset-bar', {
-      foo: exec => exec.concat('bar'),
+      foo: (exec) => exec.concat('bar'),
     });
 
     mockPreset('preset-got', [
@@ -72,14 +86,14 @@ describe('presets', () => {
     ]);
 
     mockPreset('preset-dracarys', {
-      foo: exec => exec.concat('dracarys'),
+      foo: (exec) => exec.concat('dracarys'),
     });
 
     mockPreset('preset-valar', {
       foo: (exec, options) => exec.concat(`valar ${options.custom}`),
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = getPresets(['preset-foo', 'preset-got', 'preset-bar']);
 
     const result = await presets.apply('foo', []);
@@ -99,7 +113,7 @@ describe('presets', () => {
       babel: mockPresetBarExtendBabel,
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(getPresets(['preset-foo', 'preset-bar']));
 
     async function testPresets() {
@@ -125,7 +139,7 @@ describe('presets', () => {
       babel: mockPresetBarExtendBabel,
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(getPresets([{ name: 'preset-foo' }, { name: 'preset-bar' }]));
 
     async function testPresets() {
@@ -151,7 +165,7 @@ describe('presets', () => {
       babel: mockPresetBarExtendBabel,
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(
       getPresets([
         { name: 'preset-foo', options: { foo: 1 } },
@@ -188,7 +202,7 @@ describe('presets', () => {
       babel: mockPresetBarExtendBabel,
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(
       getPresets([
         'preset-foo',
@@ -230,7 +244,7 @@ describe('presets', () => {
       webpack: mockPresetBarExtendWebpack,
     });
 
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const presets = wrapPreset(
       getPresets([
         'preset-foo',
@@ -265,7 +279,7 @@ describe('presets', () => {
   });
 
   it('allows for presets to export presets array', async () => {
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const input = {};
     const mockPresetBar = jest.fn(() => input);
 
@@ -287,7 +301,7 @@ describe('presets', () => {
   });
 
   it('allows for presets to export presets fn', async () => {
-    const getPresets = require.requireActual('./presets').default;
+    const getPresets = jest.requireActual('./presets').default;
     const input = {};
     const storybookOptions = { a: 1 };
     const presetOptions = { b: 2 };
@@ -316,3 +330,104 @@ describe('presets', () => {
     jest.resetModules();
   });
 });
+
+describe('resolveAddonName', () => {
+  const { resolveAddonName } = jest.requireActual('./presets');
+
+  it('should resolve packages with metadata (relative path)', () => {
+    expect(resolveAddonName('@storybook/addon-docs')).toEqual({
+      name: '@storybook/addon-docs/preset',
+      type: 'presets',
+    });
+  });
+
+  it('should resolve packages with metadata (absolute path)', () => {
+    expect(resolveAddonName('@storybook/addon-knobs')).toEqual({
+      name: '@storybook/addon-knobs/register',
+      type: 'managerEntries',
+    });
+  });
+
+  it('should resolve packages without metadata', () => {
+    expect(resolveAddonName('@storybook/preset-create-react-app')).toEqual({
+      name: '@storybook/preset-create-react-app',
+      type: 'presets',
+    });
+  });
+
+  it('should resolve managerEntries', () => {
+    expect(resolveAddonName('@storybook/addon-actions/register')).toEqual({
+      name: '@storybook/addon-actions/register',
+      type: 'managerEntries',
+    });
+  });
+
+  it('should resolve presets', () => {
+    expect(resolveAddonName('@storybook/addon-docs/preset')).toEqual({
+      name: '@storybook/addon-docs/preset',
+      type: 'presets',
+    });
+  });
+
+  it('should resolve preset packages', () => {
+    expect(resolveAddonName('@storybook/addon-essentials')).toEqual({
+      name: '@storybook/addon-essentials',
+      type: 'presets',
+    });
+  });
+
+  it('should error on invalid inputs', () => {
+    expect(() => resolveAddonName(null)).toThrow();
+  });
+});
+
+describe('splitAddons', () => {
+  const { splitAddons } = jest.requireActual('./presets');
+
+  it('should split managerEntries that end in register', () => {
+    const addons = [
+      '@storybook/addon-actions/register',
+      'storybook-addon-readme/register',
+      'addon-foo/register.js',
+      'addon-bar/register.ts',
+      'addon-baz/register.tsx',
+      '@storybook/addon-notes/register-panel',
+    ];
+    expect(splitAddons(addons)).toEqual({
+      managerEntries: addons,
+      presets: [],
+    });
+  });
+
+  it('should split preset packages and package entries', () => {
+    const addons = [
+      '@storybook/addon-essentials',
+      '@storybook/addon-docs/presets',
+      'addon-bar/presets.js',
+      './local-addon-relative/presets',
+    ];
+    expect(splitAddons(addons)).toEqual({
+      managerEntries: [],
+      presets: addons,
+    });
+  });
+
+  it('should split preset objects', () => {
+    const addons = [
+      { name: '@storybook/addon-essentials' },
+      { name: '@storybook/addon-docs/presets', options: { configureJSX: true } },
+    ];
+    expect(splitAddons(addons)).toEqual({
+      managerEntries: [],
+      presets: addons,
+    });
+  });
+
+  it('should skip invalid objects', () => {
+    const addons = [1, true, { foo: 'bar' }];
+    expect(splitAddons(addons)).toEqual({
+      managerEntries: [],
+      presets: [],
+    });
+  });
+});
diff --git a/lib/core/src/server/preview/babel-loader-preview.js b/lib/core/src/server/preview/babel-loader-preview.js
new file mode 100644
index 000000000000..9f01aab60dba
--- /dev/null
+++ b/lib/core/src/server/preview/babel-loader-preview.js
@@ -0,0 +1,14 @@
+import { includePaths } from '../config/utils';
+import { useBaseTsSupport } from '../config/useBaseTsSupport';
+
+export const createBabelLoader = (options, framework) => ({
+  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options,
+    },
+  ],
+  include: includePaths,
+  exclude: /node_modules/,
+});
diff --git a/lib/core/src/server/preview/base-webpack.config.js b/lib/core/src/server/preview/base-webpack.config.js
index 87a87972683a..b8c5c75704bc 100644
--- a/lib/core/src/server/preview/base-webpack.config.js
+++ b/lib/core/src/server/preview/base-webpack.config.js
@@ -4,7 +4,11 @@ import path from 'path';
 import { logger } from '@storybook/node-logger';
 
 export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  if (options.presetsList.some(({ name }) => name === '@storybook/preset-create-react-app')) {
+  if (
+    options.presetsList.some(
+      (preset) => (preset.name || preset) === '@storybook/preset-create-react-app'
+    )
+  ) {
     return storybookBaseConfig;
   }
 
@@ -64,8 +68,9 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
           loader: require.resolve('file-loader'),
-          query: {
+          options: {
             name: 'static/media/[name].[hash:8].[ext]',
+            esModule: false,
           },
         },
         {
diff --git a/lib/core/src/server/preview/custom-webpack-preset.js b/lib/core/src/server/preview/custom-webpack-preset.js
index 5b408c53f9e1..7d82edfbfc8f 100644
--- a/lib/core/src/server/preview/custom-webpack-preset.js
+++ b/lib/core/src/server/preview/custom-webpack-preset.js
@@ -1,8 +1,5 @@
-import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
 import { logger } from '@storybook/node-logger';
 import loadCustomWebpackConfig from '../utils/load-custom-webpack-config';
-import mergeConfigs from '../utils/merge-webpack-config';
 import { createDefaultWebpackConfig } from './base-webpack.config';
 
 async function createFinalDefaultConfig(presets, config, options) {
@@ -12,10 +9,10 @@ async function createFinalDefaultConfig(presets, config, options) {
 
 export async function webpack(config, options) {
   const { configDir, configType, presets, webpackConfig } = options;
+  const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
 
   // through standalone webpackConfig option
   if (webpackConfig) {
-    const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
     return webpackConfig(finalDefaultConfig);
   }
 
@@ -23,27 +20,11 @@ export async function webpack(config, options) {
   // return the (extended) base configuration if it's not available.
   const customConfig = loadCustomWebpackConfig(configDir);
 
-  if (customConfig === null) {
-    logger.info('=> Using default Webpack setup.');
-    return createFinalDefaultConfig(presets, config, options);
-  }
-
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom Webpack config (full-control mode).');
-    const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
     return customConfig({ config: finalDefaultConfig, mode: configType });
   }
 
-  logger.info('=> Loading custom webpack config (extending mode).');
-
-  // Restore 4.x behavior, but deprecate this mode of extending webpack
-  const finalConfig = await presets.apply('webpackFinal', config, options);
-  return deprecate(
-    () => mergeConfigs(finalConfig, customConfig),
-    dedent`
-      Extend-mode configuration is deprecated, please use full-control mode instead.
-      
-      See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
-    `
-  )();
+  logger.info('=> Using default Webpack setup.');
+  return finalDefaultConfig;
 }
diff --git a/lib/core/src/server/preview/entries.js b/lib/core/src/server/preview/entries.js
index 34ba576ec1aa..fdb2618600b2 100644
--- a/lib/core/src/server/preview/entries.js
+++ b/lib/core/src/server/preview/entries.js
@@ -1,22 +1,79 @@
 import path from 'path';
 import { logger } from '@storybook/node-logger';
+import stable from 'stable';
+import dedent from 'ts-dedent';
+import glob from 'glob-promise';
+import { loadPreviewOrConfigFile } from '../utils/load-preview-or-config-file';
+
+export const sortEntries = (entries) => {
+  const isGenerated = /generated-(config|other)-entry/;
+  const isGeneratedConfig = /(?:preview|config)\..+-generated-config-entry/;
+
+  return stable(entries.slice(0), (a, b) => {
+    // We need to ensure that all parameters and decorators that are added by preview entrypoints added by addons happen before any configure() calls executed by the user's preview.js (or config.js), or by main.js:stories.
+    // As those addons will create generated entries, this means we need to ensure all generated entries come before all other entries (generated or otherwise).
+
+    switch (true) {
+      case !!a.match(isGeneratedConfig) && !!b.match(isGenerated): {
+        return 1;
+      }
+      case !!b.match(isGeneratedConfig) && !!a.match(isGenerated): {
+        return -1;
+      }
+      default: {
+        return 0;
+      }
+    }
+  });
+};
+
+const getMainConfigs = (options) => {
+  const previewPath = loadPreviewOrConfigFile(options);
+  return previewPath ? [previewPath] : [];
+};
 
 export async function createPreviewEntry(options) {
   const { configDir, presets } = options;
-  const entries = [require.resolve('../common/polyfills'), require.resolve('./globals')];
+  const entries = [
+    require.resolve('../common/polyfills'),
+    require.resolve('./globals'),
+    path.resolve(path.join(configDir, 'storybook-init-framework-entry.js')),
+  ];
 
-  const configs = await presets.apply('config', [], options);
+  const configs = getMainConfigs(options);
+  const other = await presets.apply('config', [], options);
   const stories = await presets.apply('stories', [], options);
 
-  if (configs && configs.length) {
+  if (configs.length) {
+    logger.info(`=> Loading config/preview file in "${configDir}".`);
+    entries.push(...configs.map((filename) => `${filename}-generated-config-entry.js`));
+  }
+
+  if (other && other.length) {
     logger.info(`=> Loading config/preview file in "${configDir}".`);
-    entries.push(...configs);
+    entries.push(...other.map((filename) => `${filename}-generated-other-entry.js`));
   }
 
   if (stories && stories.length) {
-    logger.info(`=> Adding stories defined in "${path.join(configDir, 'main.js')}".`);
-    entries.push(path.resolve(path.join(configDir, `generated-entry.js`)));
+    entries.push(path.resolve(path.join(configDir, `generated-stories-entry.js`)));
+
+    const files = (
+      await Promise.all(stories.map((g) => glob(path.join(configDir, g))))
+    ).reduce((a, b) => a.concat(b));
+
+    if (files.length === 0) {
+      logger.warn(dedent`
+        We found no files matching any of the following globs:
+        
+        ${stories.join('\n')}
+
+        Maybe your glob was invalid?
+        see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
+      `);
+    } else {
+      logger.info(`=> Adding stories defined in "${path.join(configDir, 'main.js')}".`);
+    }
   }
 
-  return entries;
+  return sortEntries(entries);
 }
diff --git a/lib/core/src/server/preview/entries.test.js b/lib/core/src/server/preview/entries.test.js
new file mode 100644
index 000000000000..b0ed86990b2a
--- /dev/null
+++ b/lib/core/src/server/preview/entries.test.js
@@ -0,0 +1,68 @@
+import { sortEntries } from './entries';
+
+describe('sortEntries', () => {
+  it('should do nothing', () => {
+    const input = ['a', 'b', 'c', 'aa', 'cc', '123', '8000'];
+    const output = sortEntries(input);
+
+    expect(output).toEqual(['a', 'b', 'c', 'aa', 'cc', '123', '8000']);
+  });
+  it('should move preview-type generated-config entries after all other generated entries', () => {
+    const input = [
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/common/polyfills.js',
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/preview/globals.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/web-components-kitchen-sink/.storybook/storybook-init-framework-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/common/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/web-components/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/a11y/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/actions/dist/preset/addArgs.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/knobs/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/links/dist/preset/addDecorator.js-generated-other-entry.js',
+    ];
+    const output = sortEntries(input);
+    expect(output).toEqual([
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/common/polyfills.js',
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/preview/globals.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/web-components-kitchen-sink/.storybook/storybook-init-framework-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/common/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/web-components/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/a11y/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/actions/dist/preset/addArgs.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/knobs/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/links/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js',
+    ]);
+  });
+  it('should move stories-type after all other generated entries', () => {
+    const input = [
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/common/polyfills.js',
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/preview/globals.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/storybook-init-framework-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/preview.js-generated-config-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/common/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/react/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/actions/dist/preset/addArgs.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/links/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/knobs/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/a11y/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/queryparams/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/generated-stories-entry.js',
+    ];
+    const output = sortEntries(input);
+    expect(output).toEqual([
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/common/polyfills.js',
+      '/Users/dev/Projects/GitHub/storybook/core/lib/core/dist/server/preview/globals.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/storybook-init-framework-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/common/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/docs/dist/frameworks/react/config.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/actions/dist/preset/addArgs.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/links/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/knobs/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/a11y/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/addons/queryparams/dist/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/preview.js-generated-config-entry.js',
+      '/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/generated-stories-entry.js',
+    ]);
+  });
+});
diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js
index 937704ad09dd..c3a458036333 100644
--- a/lib/core/src/server/preview/iframe-webpack.config.js
+++ b/lib/core/src/server/preview/iframe-webpack.config.js
@@ -1,19 +1,24 @@
 import path from 'path';
+import fse from 'fs-extra';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';
 import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
-import CoreJSUpgradeWebpackPlugin from 'corejs-upgrade-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
+import PnpWebpackPlugin from 'pnp-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 import resolveFrom from 'resolve-from';
 
-import createBabelLoader from '../common/babel-loader';
+import { createBabelLoader } from './babel-loader-preview';
+import es6Transpiler from '../common/es6Transpiler';
+
 import { nodeModulesPaths, loadEnv } from '../config/utils';
 import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';
 import { toRequireContextString } from './to-require-context';
+import { useBaseTsSupport } from '../config/useBaseTsSupport';
 
 const reactPaths = {};
 try {
@@ -23,7 +28,7 @@ try {
   //
 }
 
-export default ({
+export default async ({
   configDir,
   babelOptions,
   entries,
@@ -33,15 +38,61 @@ export default ({
   packageJson,
   configType,
   framework,
+  presets,
+  typescriptOptions,
 }) => {
+  const dlls = await presets.apply('webpackDlls', []);
+  const logLevel = await presets.apply('logLevel', undefined);
   const { raw, stringified } = loadEnv({ production: true });
-  const babelLoader = createBabelLoader(babelOptions);
+  const babelLoader = createBabelLoader(babelOptions, framework);
   const isProd = configType === 'PRODUCTION';
+  const entryTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleEntry.template.js'), {
+    encoding: 'utf8',
+  });
+  const storyTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleStory.template.js'), {
+    encoding: 'utf8',
+  });
+  const frameworkInitEntry = path.resolve(
+    path.join(configDir, 'storybook-init-framework-entry.js')
+  );
+  const virtualModuleMapping = {
+    // Ensure that the client API is initialized by the framework before any other iframe code
+    // is loaded. That way our client-apis can assume the existence of the API+store
+    [frameworkInitEntry]: `import '@storybook/${framework}';`,
+  };
+  entries.forEach((entryFilename) => {
+    const match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/);
+    if (match) {
+      const configFilename = match[1];
+      const isUsingYarnPnp = typeof process.versions.pnp !== 'undefined';
+      const clientApi = isUsingYarnPnp
+        ? `${require.resolve('@storybook/client-api')}`
+        : '@storybook/client-api';
+      const clientLogger = isUsingYarnPnp
+        ? `${require.resolve('@storybook/client-logger')}`
+        : '@storybook/client-logger';
+
+      virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
+        configFilename,
+        clientApi,
+        clientLogger,
+      });
+    }
+  });
+  if (stories) {
+    const storiesFilename = path.resolve(path.join(configDir, `generated-stories-entry.js`));
+    virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { framework })
+      // Make sure we also replace quotes for this one
+      .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
+  }
+
+  const shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check;
+  const tsCheckOptions = typescriptOptions.checkOptions || {};
 
   return {
     mode: isProd ? 'production' : 'development',
     bail: isProd,
-    devtool: '#cheap-module-source-map',
+    devtool: isProd ? 'inline-source-map' : '#cheap-module-source-map',
     entry: entries,
     output: {
       path: path.resolve(process.cwd(), outputDir),
@@ -49,15 +100,8 @@ export default ({
       publicPath: '',
     },
     plugins: [
-      stories && stories.length
-        ? new VirtualModulePlugin({
-            [path.resolve(path.join(configDir, `generated-entry.js`))]: `
-              import { configure, addDecorator, addParameters } from '@storybook/${framework}';
-
-              configure([${stories.map(toRequireContextString).join(',')}
-              ], module);
-            `,
-          })
+      Object.keys(virtualModuleMapping).length > 0
+        ? new VirtualModulePlugin(virtualModuleMapping)
         : null,
       new HtmlWebpackPlugin({
         filename: `iframe.html`,
@@ -69,11 +113,21 @@ export default ({
           files,
           options,
           version: packageJson.version,
-          globals: {},
+          globals: {
+            LOGLEVEL: logLevel,
+          },
           headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
-          dlls: [],
+          dlls,
           bodyHtmlSnippet: getPreviewBodyHtml(configDir, process.env),
         }),
+        minify: {
+          collapseWhitespace: true,
+          removeComments: true,
+          removeRedundantAttributes: true,
+          removeScriptTypeAttributes: false,
+          removeStyleLinkTypeAttributes: true,
+          useShortDoctype: true,
+        },
         template: require.resolve(`../templates/index.ejs`),
       }),
       new DefinePlugin({
@@ -85,11 +139,12 @@ export default ({
       new CaseSensitivePathsPlugin(),
       quiet ? null : new ProgressPlugin(),
       new Dotenv({ silent: true }),
-      new CoreJSUpgradeWebpackPlugin({ resolveFrom: __dirname }),
+      shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null,
     ].filter(Boolean),
     module: {
       rules: [
         babelLoader,
+        es6Transpiler(),
         {
           test: /\.md$/,
           use: [
@@ -101,12 +156,21 @@ export default ({
       ],
     },
     resolve: {
-      extensions: ['.mjs', '.js', '.jsx', '.json'],
+      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
         'babel-runtime/core-js/object/assign': require.resolve('core-js/es/object/assign'),
+        semver: require.resolve('@storybook/semver'),
         ...reactPaths,
       },
+
+      plugins: [
+        // Transparently resolve packages via PnP when needed; noop otherwise
+        PnpWebpackPlugin,
+      ],
+    },
+    resolveLoader: {
+      plugins: [PnpWebpackPlugin.moduleLoader(module)],
     },
     optimization: {
       splitChunks: {
@@ -130,3 +194,18 @@ export default ({
     },
   };
 };
+
+/**
+ * Return a string corresponding to template filled with bindings using following pattern:
+ * For each (key, value) of `bindings` replace, in template, `{{key}}` by escaped version of `value`
+ *
+ * @param template {String} Template with `{{binding}}`
+ * @param bindings {Object} key-value object use to fill the template, `{{key}}` will be replaced by `escaped(value)`
+ * @returns {String} Filled template
+ */
+const interpolate = (template, bindings) => {
+  return Object.entries(bindings).reduce((acc, [k, v]) => {
+    const escapedString = v.replace(/\\/g, '/').replace(/\$/g, '$$$');
+    return acc.replace(new RegExp(`{{${k}}}`, 'g'), escapedString);
+  }, template);
+};
diff --git a/lib/core/src/server/preview/preview-preset.js b/lib/core/src/server/preview/preview-preset.js
index ef334b49eb65..2749578f8986 100644
--- a/lib/core/src/server/preview/preview-preset.js
+++ b/lib/core/src/server/preview/preview-preset.js
@@ -1,5 +1,3 @@
-import loadCustomConfig from '../utils/load-custom-config-file';
-
 import webpackConfig from './iframe-webpack.config';
 import { createPreviewEntry } from './entries';
 
@@ -12,13 +10,11 @@ export const entries = async (_, options) => {
 
   if (options.configType === 'DEVELOPMENT') {
     result = result.concat(
-      `${require.resolve('webpack-hot-middleware/client')}?reload=true&quiet=true`
+      `${require.resolve('webpack-hot-middleware/client')}?reload=true&quiet=false`
     );
   }
 
   return result;
 };
 
-export const config = async (_, options) => loadCustomConfig(options);
-
 export * from '../common/common-preset';
diff --git a/lib/core/src/server/preview/to-require-context.js b/lib/core/src/server/preview/to-require-context.js
deleted file mode 100644
index 1a5bf611e8d0..000000000000
--- a/lib/core/src/server/preview/to-require-context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import globBase from 'glob-base';
-import { makeRe } from 'micromatch';
-
-const isObject = val => val != null && typeof val === 'object' && Array.isArray(val) === false;
-export const toRequireContext = input => {
-  switch (true) {
-    case typeof input === 'string': {
-      const { base, glob } = globBase(input);
-      const regex = makeRe(glob)
-        .toString()
-        // webpack prepends the relative path with './'
-        .replace(/^\/\^/, '/^\\.\\/')
-        .replace(/\?:\^/g, '?:');
-
-      return { path: base, recursive: glob.startsWith('**'), match: regex };
-    }
-    case isObject(input): {
-      return input;
-    }
-
-    default: {
-      throw new Error('the provided input cannot be transformed into a require.context');
-    }
-  }
-};
-
-export const toRequireContextString = input => {
-  const { path: p, recursive: r, match: m } = toRequireContext(input);
-  return `require.context('${p}', ${r}, ${m})`;
-};
diff --git a/lib/core/src/server/preview/to-require-context.test.js b/lib/core/src/server/preview/to-require-context.test.js
new file mode 100644
index 000000000000..a028594ed1f5
--- /dev/null
+++ b/lib/core/src/server/preview/to-require-context.test.js
@@ -0,0 +1,148 @@
+import path from 'path';
+import { toRequireContext } from './to-require-context';
+
+const testCases = [
+  {
+    glob: '**/*.stories.tsx',
+    validPaths: [
+      './Icon.stories.tsx',
+      './src/Icon.stories.tsx',
+      './src/components/Icon.stories.tsx',
+      './src/components/Icon.stories/Icon.stories.tsx',
+    ],
+    invalidPaths: [
+      './stories.tsx',
+      './Icon.stories.ts',
+      './Icon.stories.js',
+      './src/components/stories.tsx',
+      './src/components/Icon.stories/stories.tsx',
+      './src/components/Icon.stories.ts',
+      './src/components/Icon.stories.js',
+    ],
+  },
+  // INVALID GLOB
+  {
+    glob: '../src/stories/**/*.stories.(js|mdx)',
+    validPaths: [
+      '../src/stories/components/Icon.stories.js',
+      '../src/stories/Icon.stories.js',
+      '../src/stories/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.js',
+      '../src/stories/components/Icon.stories/Icon.stories.mdx',
+    ],
+    invalidPaths: [
+      './stories.js',
+      './src/stories/Icon.stories.js',
+      './Icon.stories.js',
+      '../src/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.mdx',
+    ],
+  },
+  {
+    glob: 'dirname/../stories/*.stories.*',
+    validPaths: [
+      './dirname/../stories/App.stories.js',
+      './dirname/../stories/addon-centered.stories.js',
+    ],
+    invalidPaths: ['./dirname/../stories.js', './dirname/../App.stories.js'],
+  },
+  {
+    glob: '../src/stories/**/@(*.stories.js|*.stories.mdx)',
+    validPaths: [
+      '../src/stories/components/Icon.stories.js',
+      '../src/stories/Icon.stories.js',
+      '../src/stories/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.js',
+      '../src/stories/components/Icon.stories/Icon.stories.mdx',
+    ],
+    invalidPaths: [
+      './stories.js',
+      './src/stories/Icon.stories.js',
+      './Icon.stories.js',
+      '../src/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.mdx',
+    ],
+  },
+  {
+    glob: '../src/stories/**/*.stories.+(js|mdx)',
+    validPaths: [
+      '../src/stories/components/Icon.stories.js',
+      '../src/stories/Icon.stories.js',
+      '../src/stories/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.js',
+      '../src/stories/components/Icon.stories/Icon.stories.mdx',
+    ],
+    invalidPaths: [
+      './stories.js',
+      './src/stories/Icon.stories.js',
+      './Icon.stories.js',
+      '../src/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.mdx',
+    ],
+  },
+  {
+    glob: '../src/stories/**/*.stories.*(js|mdx)',
+    validPaths: [
+      '../src/stories/components/Icon.stories.js',
+      '../src/stories/Icon.stories.js',
+      '../src/stories/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.js',
+      '../src/stories/components/Icon.stories/Icon.stories.mdx',
+    ],
+    invalidPaths: [
+      './stories.js',
+      './src/stories/Icon.stories.js',
+      './Icon.stories.js',
+      '../src/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.mdx',
+    ],
+  },
+  // DUMB GLOB
+  {
+    glob: '../src/stories/**/*.stories.[tj]sx',
+    validPaths: [
+      '../src/stories/components/Icon.stories.jsx',
+      '../src/stories/Icon.stories.jsx',
+      '../src/stories/Icon.stories.tsx',
+      '../src/stories/components/Icon/Icon.stories.jsx',
+      '../src/stories/components/Icon.stories/Icon.stories.tsx',
+    ],
+    invalidPaths: [
+      './stories.jsx',
+      './src/stories/Icon.stories.jsx',
+      './Icon.stories.jsx',
+      '../src/Icon.stories.tsx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.tsx',
+    ],
+  },
+];
+
+describe('toRequireContext', () => {
+  testCases.forEach(({ glob, validPaths, invalidPaths }) => {
+    it(`matches only suitable paths - ${glob}`, () => {
+      const { path: base, match } = toRequireContext(glob);
+
+      const regex = new RegExp(match);
+
+      function isMatched(filePath) {
+        const relativePath = `./${path.relative(base, filePath)}`;
+
+        const baseIncluded = filePath.includes(base);
+        const matched = regex.test(relativePath);
+
+        return baseIncluded && matched;
+      }
+
+      const isMatchedForValidPaths = validPaths.filter((filePath) => !isMatched(filePath));
+      const isMatchedForInvalidPaths = invalidPaths.filter((filePath) => !!isMatched(filePath));
+
+      expect(isMatchedForValidPaths).toEqual([]);
+      expect(isMatchedForInvalidPaths).toEqual([]);
+    });
+  });
+});
diff --git a/lib/core/src/server/preview/to-require-context.ts b/lib/core/src/server/preview/to-require-context.ts
new file mode 100644
index 000000000000..853423243f9e
--- /dev/null
+++ b/lib/core/src/server/preview/to-require-context.ts
@@ -0,0 +1,63 @@
+import globBase from 'glob-base';
+import { makeRe } from 'micromatch';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+
+// LEGACY support for bad glob patterns we had in SB 5 - remove in SB7
+const fixBadGlob = deprecate(
+  (match: RegExpMatchArray) => {
+    return match.input.replace(match[1], `@${match[1]}`);
+  },
+  dedent`
+    You're specified an invalid glob, we've attempted to fix it, please ensure the glob you specify is a valid glob. See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
+  `
+);
+const detectBadGlob = (val: string) => {
+  const match = val.match(/\.(\([^)]+\))/);
+
+  if (match) {
+    return fixBadGlob(match);
+  }
+
+  return val;
+};
+
+const isObject = (val: Record<string, any>) =>
+  val != null && typeof val === 'object' && Array.isArray(val) === false;
+
+export const toRequireContext = (input: any) => {
+  const fixedInput = detectBadGlob(input);
+  switch (true) {
+    case typeof input === 'string': {
+      const { base, glob } = globBase(fixedInput);
+
+      const recursive = glob.startsWith('**');
+      const indicator = glob.replace(/^(\*\*\/)*/, '');
+      const regex = makeRe(indicator, { fastpaths: false, noglobstar: false, bash: true });
+      const { source } = regex;
+
+      if (source.startsWith('^')) {
+        // prepended '^' char causes webpack require.context to fail
+        const match = source.substring(1);
+
+        return { path: base, recursive, match };
+      }
+
+      throw new Error(`Invalid glob: >> ${input} >> ${regex}`);
+    }
+    case isObject(input): {
+      return input;
+    }
+
+    default: {
+      throw new Error('the provided input cannot be transformed into a require.context');
+    }
+  }
+};
+
+export const toRequireContextString = (input: any) => {
+  const { path: p, recursive: r, match: m } = toRequireContext(input);
+
+  const result = `require.context('${p}', ${r}, /${m}/)`;
+  return result;
+};
diff --git a/lib/core/src/server/preview/virtualModuleEntry.template.js b/lib/core/src/server/preview/virtualModuleEntry.template.js
new file mode 100644
index 000000000000..cb4815d7f1bb
--- /dev/null
+++ b/lib/core/src/server/preview/virtualModuleEntry.template.js
@@ -0,0 +1,25 @@
+/* eslint-disable import/no-unresolved */
+import { addDecorator, addParameters, addArgTypesEnhancer } from '{{clientApi}}';
+import { logger } from '{{clientLogger}}';
+import {
+  decorators,
+  parameters,
+  argTypesEnhancers,
+  globalArgs,
+  globalArgTypes,
+  args,
+  argTypes,
+} from '{{configFilename}}';
+
+if (args || argTypes) {
+  logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify({ args, argTypes }));
+}
+if (decorators) {
+  decorators.forEach((decorator) => addDecorator(decorator));
+}
+if (parameters || globalArgs || globalArgTypes) {
+  addParameters({ ...parameters, globalArgs, globalArgTypes });
+}
+if (argTypesEnhancers) {
+  argTypesEnhancers.forEach((enhancer) => addArgTypesEnhancer(enhancer));
+}
diff --git a/lib/core/src/server/preview/virtualModuleStory.template.js b/lib/core/src/server/preview/virtualModuleStory.template.js
new file mode 100644
index 000000000000..3687c6daf83c
--- /dev/null
+++ b/lib/core/src/server/preview/virtualModuleStory.template.js
@@ -0,0 +1,6 @@
+import { configure } from '@storybook/{{framework}}';
+
+// eslint-disable-next-line no-underscore-dangle
+module._StorybookPreserveDecorators = true;
+
+configure(['{{stories}}'], module);
diff --git a/lib/core/src/server/utils/interpret-files.js b/lib/core/src/server/utils/interpret-files.js
index ec2ec877cbfa..a44231d70740 100644
--- a/lib/core/src/server/utils/interpret-files.js
+++ b/lib/core/src/server/utils/interpret-files.js
@@ -1,13 +1,13 @@
 import fs from 'fs';
 import { extensions } from 'interpret';
 
-const boost = new Set(['.js', '.jsx', '.ts', '.tsx']);
+export const boost = new Set(['.js', '.jsx', '.ts', '.tsx', '.cjs', '.mjs']);
 
 function sortExtensions() {
   return [
     ...Array.from(boost),
     ...Object.keys(extensions)
-      .filter(ext => !boost.has(ext))
+      .filter((ext) => !boost.has(ext))
       .sort((a, b) => a.length - b.length),
   ];
 }
@@ -16,15 +16,12 @@ const possibleExtensions = sortExtensions();
 
 export function getInterpretedFile(pathToFile) {
   return possibleExtensions
-    .map(ext => `${pathToFile}${ext}`)
-    .find(candidate => fs.existsSync(candidate));
+    .map((ext) => `${pathToFile}${ext}`)
+    .find((candidate) => fs.existsSync(candidate));
 }
 
 export function getInterpretedFileWithExt(pathToFile) {
   return possibleExtensions
-    .map(ext => ({
-      path: `${pathToFile}${ext}`,
-      ext,
-    }))
-    .find(candidate => fs.existsSync(candidate.path));
+    .map((ext) => ({ path: `${pathToFile}${ext}`, ext }))
+    .find((candidate) => fs.existsSync(candidate.path));
 }
diff --git a/lib/core/src/server/utils/load-custom-addons-file.js b/lib/core/src/server/utils/load-custom-addons-file.js
deleted file mode 100644
index 9b63eec02d74..000000000000
--- a/lib/core/src/server/utils/load-custom-addons-file.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import path from 'path';
-import { logger } from '@storybook/node-logger';
-import dedent from 'ts-dedent';
-
-import { getInterpretedFile } from './interpret-files';
-
-const toArray = a => (a ? [a] : a);
-
-function loadCustomAddons({ configDir }) {
-  const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
-  const storybookCustomManagerPath = getInterpretedFile(path.resolve(configDir, 'manager'));
-
-  if (storybookCustomAddonsPath || storybookCustomManagerPath) {
-    logger.info('=> Loading custom manager config.');
-  }
-
-  if (storybookCustomAddonsPath && storybookCustomManagerPath) {
-    throw new Error(dedent`
-      You have both a "addons.js" and a "manager.js", remove the "addons.js" file from your configDir (${path.resolve(
-        configDir,
-        'addons'
-      )})`);
-  }
-
-  return [...(toArray(storybookCustomManagerPath) || toArray(storybookCustomAddonsPath) || [])];
-}
-
-export default loadCustomAddons;
diff --git a/lib/core/src/server/utils/load-custom-babel-config.js b/lib/core/src/server/utils/load-custom-babel-config.js
index 397fd7a11e81..a3940504b94b 100644
--- a/lib/core/src/server/utils/load-custom-babel-config.js
+++ b/lib/core/src/server/utils/load-custom-babel-config.js
@@ -1,8 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
-import { satisfies } from 'semver';
-import { sync as resolveSync } from 'resolve';
 
 import { logger } from '@storybook/node-logger';
 
@@ -37,7 +35,7 @@ function loadFromPath(babelConfigPath) {
 
     if (!config) {
       logger.error(`=> Error parsing babel config file: ${babelConfigPath}
-      
+
       We tried both loading as JS & JSON, neither worked.
       Maybe there's a syntax error in the file?`);
       logger.error(`=> From JS loading we got: ${error.js.message}`);
@@ -67,24 +65,15 @@ function loadFromPath(babelConfigPath) {
   return config;
 }
 
-function isBabelLoader8() {
-  try {
-    // eslint-disable-next-line import/no-dynamic-require,global-require
-    const babelLoaderPkg = require(resolveSync('babel-loader/package.json', {
-      basedir: process.cwd(),
-    }));
-    return satisfies(babelLoaderPkg.version, '>=8.0.0-0');
-  } catch (e) {
-    return false;
-  }
-}
-
-export default async function(configDir, getDefaultConfig) {
+export default async function (configDir, getDefaultConfig) {
   // Between versions 5.1.0 - 5.1.9 this loaded babel.config.js from the project
   // root, which was an unintentional breaking change. We can add back project support
   // in 6.0.
   const babelConfig =
     loadFromPath(path.resolve(configDir, '.babelrc')) ||
+    loadFromPath(path.resolve(configDir, '.babelrc.json')) ||
+    loadFromPath(path.resolve(configDir, '.babelrc.js')) ||
+    loadFromPath(path.resolve(configDir, 'babel.config.json')) ||
     loadFromPath(path.resolve(configDir, 'babel.config.js'));
 
   if (babelConfig) {
@@ -96,5 +85,5 @@ export default async function(configDir, getDefaultConfig) {
     return babelConfig;
   }
 
-  return isBabelLoader8() ? getDefaultConfig() : {};
+  return getDefaultConfig();
 }
diff --git a/lib/core/src/server/utils/load-custom-config-file.js b/lib/core/src/server/utils/load-custom-config-file.js
deleted file mode 100644
index 2291aea8cc40..000000000000
--- a/lib/core/src/server/utils/load-custom-config-file.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import path from 'path';
-import dedent from 'ts-dedent';
-
-import { getInterpretedFile } from './interpret-files';
-
-const toArray = a => (a ? [a] : a);
-
-function loadConfigFiles({ configDir }) {
-  const storybookConfigPath = getInterpretedFile(path.resolve(configDir, 'config'));
-  const storybookPreviewPath = getInterpretedFile(path.resolve(configDir, 'preview'));
-
-  if (storybookConfigPath && storybookPreviewPath) {
-    throw new Error(dedent`
-      You have both a "config.js" and a "preview.js", remove the "config.js" file from your configDir (${path.resolve(
-        configDir,
-        'config'
-      )})`);
-  }
-
-  return [...(toArray(storybookPreviewPath) || toArray(storybookConfigPath) || [])];
-}
-
-export default loadConfigFiles;
diff --git a/lib/core/src/server/utils/load-custom-webpack-config.js b/lib/core/src/server/utils/load-custom-webpack-config.js
index 73dcc0aa9476..d0eabbcf6e12 100644
--- a/lib/core/src/server/utils/load-custom-webpack-config.js
+++ b/lib/core/src/server/utils/load-custom-webpack-config.js
@@ -1,7 +1,7 @@
 import path from 'path';
-import serverRequire from './server-require';
+import { serverRequire } from './server-require';
 
 const webpackConfigs = ['webpack.config', 'webpackfile'];
 
-export default configDir =>
-  serverRequire(webpackConfigs.map(configName => path.resolve(configDir, configName)));
+export default (configDir) =>
+  serverRequire(webpackConfigs.map((configName) => path.resolve(configDir, configName)));
diff --git a/lib/core/src/server/utils/load-manager-or-addons-file.js b/lib/core/src/server/utils/load-manager-or-addons-file.js
new file mode 100644
index 000000000000..90adea9a4296
--- /dev/null
+++ b/lib/core/src/server/utils/load-manager-or-addons-file.js
@@ -0,0 +1,26 @@
+import path from 'path';
+import { logger } from '@storybook/node-logger';
+import dedent from 'ts-dedent';
+
+import { getInterpretedFile } from './interpret-files';
+
+const toArray = (a) => (a ? [a] : a);
+
+export function loadManagerOrAddonsFile({ configDir }) {
+  const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
+  const storybookCustomManagerPath = getInterpretedFile(path.resolve(configDir, 'manager'));
+
+  if (storybookCustomAddonsPath || storybookCustomManagerPath) {
+    logger.info('=> Loading custom manager config.');
+  }
+
+  if (storybookCustomAddonsPath && storybookCustomManagerPath) {
+    throw new Error(dedent`
+      You have both a "addons.js" and a "manager.js", remove the "addons.js" file from your configDir (${path.resolve(
+        configDir,
+        'addons'
+      )})`);
+  }
+
+  return storybookCustomManagerPath || storybookCustomAddonsPath;
+}
diff --git a/lib/core/src/server/utils/load-preview-or-config-file.js b/lib/core/src/server/utils/load-preview-or-config-file.js
new file mode 100644
index 000000000000..8ffa790c1243
--- /dev/null
+++ b/lib/core/src/server/utils/load-preview-or-config-file.js
@@ -0,0 +1,19 @@
+import path from 'path';
+import dedent from 'ts-dedent';
+
+import { getInterpretedFile } from './interpret-files';
+
+export function loadPreviewOrConfigFile({ configDir }) {
+  const storybookConfigPath = getInterpretedFile(path.resolve(configDir, 'config'));
+  const storybookPreviewPath = getInterpretedFile(path.resolve(configDir, 'preview'));
+
+  if (storybookConfigPath && storybookPreviewPath) {
+    throw new Error(dedent`
+      You have both a "config.js" and a "preview.js", remove the "config.js" file from your configDir (${path.resolve(
+        configDir,
+        'config'
+      )})`);
+  }
+
+  return storybookPreviewPath || storybookConfigPath;
+}
diff --git a/lib/core/src/server/utils/resolve-file.js b/lib/core/src/server/utils/resolve-file.js
new file mode 100644
index 000000000000..b5d262be8dfe
--- /dev/null
+++ b/lib/core/src/server/utils/resolve-file.js
@@ -0,0 +1 @@
+export const resolveFile = require.resolve;
diff --git a/lib/core/src/server/utils/resolve-path-in-sb-cache.js b/lib/core/src/server/utils/resolve-path-in-sb-cache.js
new file mode 100644
index 000000000000..c4ea135606fb
--- /dev/null
+++ b/lib/core/src/server/utils/resolve-path-in-sb-cache.js
@@ -0,0 +1,25 @@
+import path from 'path';
+import pkgDir from 'pkg-dir';
+
+/**
+ * Get the path of the file or directory with input name inside the Storybook cache directory:
+ *  - `node_modules/.cache/storybook/{directoryName}` in a Node.js project or npm package
+ *  - `.cache/storybook/{directoryName}` otherwise
+ *
+ * @param fileOrDirectoryName {string} Name of the file or directory
+ * @return {string} Absolute path to the file or directory
+ */
+export function resolvePathInStorybookCache(fileOrDirectoryName) {
+  const cwd = process.cwd();
+  const projectDir = pkgDir.sync(cwd);
+
+  let cacheDirectory;
+
+  if (!projectDir) {
+    cacheDirectory = path.resolve(cwd, '.cache/storybook');
+  } else {
+    cacheDirectory = path.resolve(projectDir, 'node_modules/.cache/storybook');
+  }
+
+  return path.join(cacheDirectory, fileOrDirectoryName);
+}
diff --git a/lib/core/src/server/utils/server-require.js b/lib/core/src/server/utils/server-require.js
index 6b2f70f0bec2..f87df2364286 100644
--- a/lib/core/src/server/utils/server-require.js
+++ b/lib/core/src/server/utils/server-require.js
@@ -1,4 +1,5 @@
 import interpret from 'interpret';
+import path from 'path';
 import { logger } from '@storybook/node-logger';
 import { getInterpretedFileWithExt } from './interpret-files';
 
@@ -68,16 +69,14 @@ function getCandidate(paths) {
   return undefined;
 }
 
-export default function serverRequire(filePath) {
-  const paths = Array.isArray(filePath) ? filePath : [filePath];
-  const existingCandidate = getCandidate(paths);
+export function serverRequire(filePath) {
+  const candidatePath = serverResolve(filePath);
 
-  if (!existingCandidate) {
+  if (!candidatePath) {
     return null;
   }
 
-  const { path: candidatePath, ext: candidateExt } = existingCandidate;
-
+  const candidateExt = path.extname(candidatePath);
   const moduleDescriptor = interpret.extensions[candidateExt];
 
   // The "moduleDescriptor" either "undefined" or "null". The warning isn't needed in these cases.
@@ -90,3 +89,14 @@ export default function serverRequire(filePath) {
 
   return interopRequireDefault(candidatePath);
 }
+
+export function serverResolve(filePath) {
+  const paths = Array.isArray(filePath) ? filePath : [filePath];
+  const existingCandidate = getCandidate(paths);
+
+  if (!existingCandidate) {
+    return null;
+  }
+
+  return existingCandidate.path;
+}
diff --git a/lib/core/src/server/utils/validate-configuration-files.js b/lib/core/src/server/utils/validate-configuration-files.js
new file mode 100644
index 000000000000..8b04eb344cde
--- /dev/null
+++ b/lib/core/src/server/utils/validate-configuration-files.js
@@ -0,0 +1,70 @@
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
+import glob from 'glob';
+import path from 'path';
+
+import { boost } from './interpret-files';
+
+const warnLegacyConfigurationFiles = deprecate(
+  () => {},
+  dedent`
+    Configuration files such as "config", "presets" and "addons" are deprecated and will be removed in Storybook 7.0.
+    Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md
+  `
+);
+
+const errorMixingConfigFiles = (first, second, configDir) => {
+  const firstPath = path.resolve(configDir, first);
+  const secondPath = path.resolve(configDir, second);
+  throw new Error(dedent`
+    You have mixing configuration files:
+    ${firstPath}
+    ${secondPath}
+    "${first}" and "${second}" cannot coexist.
+    Please check the documentation for migration steps: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md
+  `);
+};
+
+export default function validateConfigurationFiles(configDir) {
+  const extensionsPattern = `{${Array.from(boost).join(',')}}`;
+  const exists = (file) =>
+    !!glob.sync(path.resolve(configDir, `${file}${extensionsPattern}`)).length;
+
+  const main = exists('main');
+  const config = exists('config');
+
+  if (!main && !config) {
+    throw new Error(dedent`
+      No configuration files have been found in your configDir (${path.resolve(configDir)}).
+      Storybook needs either a "main" or "config" file.
+    `);
+  }
+
+  if (main && config) {
+    throw new Error(dedent`
+      You have both a "main" and a "config". Please remove the "config" file from your configDir (${path.resolve(
+        configDir,
+        'config'
+      )})`);
+  }
+
+  const presets = exists('presets');
+  if (main && presets) {
+    errorMixingConfigFiles('main', 'presets', configDir);
+  }
+
+  const preview = exists('preview');
+  if (preview && config) {
+    errorMixingConfigFiles('preview', 'config', configDir);
+  }
+
+  const addons = exists('addons');
+  const manager = exists('manager');
+  if (manager && addons) {
+    errorMixingConfigFiles('manager', 'addons', configDir);
+  }
+
+  if (presets || config || addons) {
+    warnLegacyConfigurationFiles();
+  }
+}
diff --git a/lib/core/src/typings.d.ts b/lib/core/src/typings.d.ts
index 2f4eb9cf4fd9..56e9012bf86f 100644
--- a/lib/core/src/typings.d.ts
+++ b/lib/core/src/typings.d.ts
@@ -1 +1,2 @@
 declare module 'global';
+declare module '@storybook/semver';
diff --git a/lib/core/tsconfig.json b/lib/core/tsconfig.json
index a24ec6393862..f7457fe9690c 100644
--- a/lib/core/tsconfig.json
+++ b/lib/core/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src"
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*", "typings.d.ts"],
+  "exclude": ["src/**.test.ts"],
+  "files": ["./typings.d.ts"]
 }
diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts
new file mode 100644
index 000000000000..4c766c46e305
--- /dev/null
+++ b/lib/core/types/index.ts
@@ -0,0 +1,69 @@
+import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import type LoaderOptions from 'react-docgen-typescript-loader/dist/LoaderOptions';
+import { Configuration } from 'webpack';
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export interface StorybookConfig {
+  /**
+   * Sets the addons you want to use with Storybook.
+   *
+   * @example `['@storybook/addon-essentials']`
+   */
+  addons?: string[];
+  /**
+   * Tells Storybook where to find stories.
+   *
+   * @example `['./src/*.stories.@(j|t)sx?']`
+   */
+  stories: string[];
+  /**
+   * Controls how Storybook handles TypeScript files.
+   */
+  typescript?: Partial<TypescriptOptions>;
+  /**
+   * Modify or return a custom Webpack config.
+   */
+  webpackFinal?: (
+    config: Configuration,
+    options: StorybookOptions
+  ) => Configuration | Promise<Configuration>;
+}
+
+/**
+ * The internal options object, used by Storybook frameworks and addons.
+ */
+export interface StorybookOptions {
+  configType: 'DEVELOPMENT' | 'PRODUCTION';
+  typescriptOptions: TypescriptOptions;
+}
+
+/**
+ * Options for TypeScript usage within Storybook.
+ */
+export interface TypescriptOptions {
+  /**
+   * Enables type checking within Storybook.
+   *
+   * @defalt `false`
+   */
+  check: boolean;
+  /**
+   * Configures `fork-ts-checker-webpack-plugin`
+   */
+  checkOptions?: ForkTsCheckerWebpackPlugin['options'];
+  /**
+   * Sets the type of Docgen when working with React and TypeScript
+   *
+   * @default `'react-docgen-typescript'`
+   */
+  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
+  /**
+   * Configures `react-docgen-typescript-loader`
+   *
+   * @default
+   * @see https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/defaults.js#L4-L6
+   */
+  reactDocgenTypescriptOptions: LoaderOptions;
+}
diff --git a/lib/core/typings.d.ts b/lib/core/typings.d.ts
new file mode 100644
index 000000000000..faea2fff4fbe
--- /dev/null
+++ b/lib/core/typings.d.ts
@@ -0,0 +1,6 @@
+declare module 'ansi-to-html';
+declare class AnsiToHtml {
+  constructor(options: { escapeHtml: boolean });
+
+  toHtml: (ansi: string) => string;
+}
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index e786cd7caa80..d6140a620872 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -15,30 +15,37 @@
     "directory": "lib/node-logger"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "chalk": "^3.0.0",
+    "@types/npmlog": "^4.1.2",
+    "chalk": "^4.0.0",
     "core-js": "^3.0.1",
     "npmlog": "^4.1.2",
-    "pretty-hrtime": "^1.0.3",
-    "regenerator-runtime": "^0.13.3"
+    "pretty-hrtime": "^1.0.3"
   },
   "devDependencies": {
-    "@types/npmlog": "^4.1.1",
     "@types/pretty-hrtime": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index 644be1f51fe0..84b67ab1fac6 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
@@ -16,14 +16,15 @@
     "directory": "lib/postinstall"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -32,10 +33,18 @@
   },
   "devDependencies": {
     "@hypnosphi/jscodeshift": "^0.6.4",
-    "jest-specific-snapshot": "^2.0.0"
+    "jest": "^26.0.0",
+    "jest-specific-snapshot": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/postinstall/src/codemods.test.ts b/lib/postinstall/src/codemods.test.ts
index 53929ad5e046..c4abd1919b38 100644
--- a/lib/postinstall/src/codemods.test.ts
+++ b/lib/postinstall/src/codemods.test.ts
@@ -9,13 +9,13 @@ jest.mock('@storybook/node-logger');
 const inputRegExp = /\.input\.js$/;
 
 const fixturesDir = path.resolve(__dirname, './__testfixtures__');
-fs.readdirSync(fixturesDir).forEach(transformName => {
+fs.readdirSync(fixturesDir).forEach((transformName) => {
   const transformFixturesDir = path.join(fixturesDir, transformName);
   describe(transformName, () =>
     fs
       .readdirSync(transformFixturesDir)
-      .filter(fileName => inputRegExp.test(fileName))
-      .forEach(fileName => {
+      .filter((fileName) => inputRegExp.test(fileName))
+      .forEach((fileName) => {
         const inputPath = path.join(transformFixturesDir, fileName);
         it(`transforms correctly using "${fileName}" data`, () =>
           expect(
diff --git a/lib/postinstall/src/frameworks.ts b/lib/postinstall/src/frameworks.ts
index dd0710d612e8..ee9260e2c230 100644
--- a/lib/postinstall/src/frameworks.ts
+++ b/lib/postinstall/src/frameworks.ts
@@ -10,7 +10,6 @@ const FRAMEWORKS = [
   'html',
   'marko',
   'mithril',
-  'polymer',
   'preact',
   'rax',
   'react',
@@ -26,5 +25,5 @@ export const getFrameworks = ({ dependencies, devDependencies }: PackageJson): s
   Object.assign(allDeps, dependencies || {});
   Object.assign(allDeps, devDependencies || {});
 
-  return FRAMEWORKS.filter(f => !!allDeps[`@storybook/${f}`]);
+  return FRAMEWORKS.filter((f) => !!allDeps[`@storybook/${f}`]);
 };
diff --git a/lib/router/package.json b/lib/router/package.json
index 4b3842d88f50..c2933ad2767d 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -15,21 +15,22 @@
     "directory": "lib/router"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@reach/router": "^1.2.1",
+    "@reach/router": "^1.3.3",
     "@storybook/csf": "0.0.1",
-    "@types/reach__router": "^1.2.3",
+    "@types/reach__router": "^1.3.5",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
@@ -43,5 +44,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/router/src/router.tsx b/lib/router/src/router.tsx
index 0db11e7aee37..669b4cfc8fbb 100644
--- a/lib/router/src/router.tsx
+++ b/lib/router/src/router.tsx
@@ -7,17 +7,19 @@ import {
   navigate,
   LocationProvider,
   RouteComponentProps,
+  LocationContext,
   NavigateFn,
 } from '@reach/router';
 import { ToggleVisibility } from './visibility';
-import { queryFromString, parsePath, getMatch } from './utils';
+import { queryFromString, parsePath, getMatch, StoryData } from './utils';
 
-interface Other {
-  viewMode?: string;
-  storyId?: string;
+interface Other extends StoryData {
+  path: string;
 }
 
-export type RenderData = RouteComponentProps & Other;
+export type RenderData = Pick<LocationContext, 'location'> &
+  Partial<Pick<LocationContext, 'navigate'>> &
+  Other;
 
 interface MatchingData {
   match: null | { path: string };
@@ -33,12 +35,12 @@ interface QueryMatchProps {
 }
 interface RouteProps {
   path: string;
-  startsWith: boolean;
-  hideOnly: boolean;
-  children: (renderData: RenderData) => ReactNode;
+  startsWith?: boolean;
+  hideOnly?: boolean;
+  children: ReactNode;
 }
 
-interface QueryLinkProps {
+export interface QueryLinkProps {
   to: string;
   children: ReactNode;
 }
@@ -62,15 +64,16 @@ const QueryLocation = ({ children }: QueryLocationProps) => (
   <Location>
     {({ location }: RouteComponentProps): ReactNode => {
       const { path } = queryFromString(location.search);
-      const { viewMode, storyId } = parsePath(path);
-      return children({ path, location, navigate: queryNavigate, viewMode, storyId });
+      const { viewMode, storyId, refId } = parsePath(path);
+
+      return children({ path, location, navigate: queryNavigate, viewMode, storyId, refId });
     }}
   </Location>
 );
 QueryLocation.displayName = 'QueryLocation';
 
 // A render-prop component for rendering when a certain path is hit.
-// It's immensly similar to `Location` but it receives an addition data property: `match`.
+// It's immensely similar to `Location` but it receives an addition data property: `match`.
 // match has a truethy value when the path is hit.
 const QueryMatch = ({ children, path: targetPath, startsWith = false }: QueryMatchProps) => (
   <QueryLocation>
diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts
new file mode 100644
index 000000000000..5bae92792d6a
--- /dev/null
+++ b/lib/router/src/utils.test.ts
@@ -0,0 +1,31 @@
+import { parsePath } from './utils';
+
+describe('parsePath', () => {
+  it('should parse /foo/bar correctly', () => {
+    const output = parsePath('/foo/bar');
+
+    expect(output).toMatchObject({
+      viewMode: 'foo',
+      storyId: 'bar',
+    });
+  });
+
+  it('should parse /foo/bar/x correctly', () => {
+    const output = parsePath('/foo/bar/x');
+
+    expect(output).toMatchObject({
+      viewMode: 'foo',
+      storyId: 'bar',
+    });
+  });
+
+  it('should parse /viewMode/refId_story--id correctly', () => {
+    const output = parsePath('/viewMode/refId_story--id');
+
+    expect(output).toMatchObject({
+      viewMode: 'viewmode',
+      storyId: 'story--id',
+      refId: 'refid',
+    });
+  });
+});
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
index 97bac2a40ea6..4c80d8db44b7 100644
--- a/lib/router/src/utils.ts
+++ b/lib/router/src/utils.ts
@@ -1,25 +1,25 @@
 import qs from 'qs';
 import memoize from 'memoizerific';
 
-// FIXME: Remove in SB 6.0
-export { toId, parseKind, sanitize } from '@storybook/csf';
-
-interface StoryData {
+export interface StoryData {
   viewMode?: string;
   storyId?: string;
+  refId?: string;
 }
 
-const splitPathRegex = /\/([^/]+)\/([^/]+)?/;
+const splitPathRegex = /\/([^/]+)\/(?:(.*)_)?([^/]+)?/;
 
 export const parsePath: (path?: string) => StoryData = memoize(1000)(
   (path: string | undefined | null) => {
     const result: StoryData = {
       viewMode: undefined,
       storyId: undefined,
+      refId: undefined,
     };
 
     if (path) {
-      const [, viewMode, storyId] = path.toLowerCase().match(splitPathRegex) || [
+      const [, viewMode, refId, storyId] = path.toLowerCase().match(splitPathRegex) || [
+        undefined,
         undefined,
         undefined,
         undefined,
@@ -28,6 +28,7 @@ export const parsePath: (path?: string) => StoryData = memoize(1000)(
         Object.assign(result, {
           viewMode,
           storyId,
+          refId,
         });
       }
     }
diff --git a/lib/router/tsconfig.json b/lib/router/tsconfig.json
index 48a78502378b..d26ac88f32ee 100644
--- a/lib/router/tsconfig.json
+++ b/lib/router/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
+    "rootDir": "./src"
   },
   "include": [
     "src/**/*"
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 30bbf95bab26..293fdf3480fa 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -16,31 +16,35 @@
     "directory": "lib/source-loader"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/server/index.js",
-  "jsnext:main": "src/server/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
     "@storybook/csf": "0.0.1",
     "core-js": "^3.0.1",
     "estraverse": "^4.2.0",
     "global": "^4.3.2",
-    "loader-utils": "^1.2.3",
-    "prettier": "^1.16.4",
-    "prop-types": "^15.7.2",
+    "loader-utils": "^2.0.0",
+    "prettier": "^2.0.5",
     "regenerator-runtime": "^0.13.3"
   },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
 }
diff --git a/lib/source-loader/preview.js b/lib/source-loader/preview.js
deleted file mode 100644
index 6f5b28b4b66e..000000000000
--- a/lib/source-loader/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/client/preview');
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap
similarity index 85%
rename from lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap
rename to lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap
index f9a49b512b43..d9ab6ca62e3a 100644
--- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap
+++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap
@@ -15,15 +15,15 @@ export const text = () => (
   <Button onClick={action(\\"clicked\\")}>Hello Button</Button>
 );
 
-export const emoji = addSourceDecorator(() => (
+export const emoji = () => (
   <Button onClick={action(\\"clicked\\")}>
     <span role=\\"img\\" aria-label=\\"so cool\\">
       😀 😎 👍 💯
     </span>
   </Button>
-), {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});;
+);;
 
-export const emojiFn = addSourceDecorator(function emojiFn() {
+export const emojiFn = function emojiFn() {
   return (
     <Button onClick={action(\\"clicked\\")}>
       <span role=\\"img\\" aria-label=\\"so cool\\">
@@ -31,6 +31,6 @@ export const emojiFn = addSourceDecorator(function emojiFn() {
       </span>
     </Button>
   )
-}, {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});
+};
 "
 `;
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
similarity index 87%
rename from lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
rename to lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
index 0566e7fe2e50..db66423186bd 100644
--- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
+++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
@@ -283,7 +283,7 @@ import { storiesOf } from '@storybook/angular';
 })
 class WithNgContentComponent {}
 
-storiesOf('Custom|ng-content', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({
+storiesOf('Custom|ng-content', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add('Default', () => ({
   template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
   moduleMetadata: {
     declarations: [WithNgContentComponent],
@@ -328,7 +328,7 @@ class Table extends React.Component<Props, State> {
   }
 }
 
-const stories = storiesOf('Table', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__));
+const stories = storiesOf('Table', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } });
 stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
 "
 `;
@@ -377,7 +377,7 @@ class WithStoreComponent {
   }
 }
 
-storiesOf('ngrx|Store', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('ngrx|Store', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .addDecorator(
     moduleMetadata({
       imports: [StoreModule.forRoot({})],
@@ -659,7 +659,7 @@ import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
 
-storiesOf('Addons|Info.React Docgen', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.React Docgen', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .add(
     'Comments from PropType declarations',
     withInfo(
@@ -690,12 +690,12 @@ const Button = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 \`;
 
-storiesOf('Addons|Info.Markdown', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Markdown', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -703,7 +703,7 @@ storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -711,7 +711,7 @@ storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -719,7 +719,7 @@ storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -727,7 +727,7 @@ storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource:
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -740,7 +740,7 @@ storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ story
   ))
 );
 
-storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .add(
     'Extend info styles with an object',
     withInfo({
@@ -774,14 +774,14 @@ storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { s
     })(() => <BaseButton label=\\"Button\\" />)
   );
 
-storiesOf('Addons|Info.Options.TableComponent', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.TableComponent', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Decorator', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.Decorator', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .addDecorator((story, context) =>
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
@@ -793,7 +793,7 @@ const Input = hoc(() => <input type=\\"text\\" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/default-options.js b/lib/source-loader/src/abstract-syntax-tree/default-options.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/default-options.js
rename to lib/source-loader/src/abstract-syntax-tree/default-options.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
similarity index 76%
rename from lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js
rename to lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
index 5c77a0b0846b..492e1e9e4165 100644
--- a/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js
+++ b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -3,14 +3,13 @@ import getParser from './parsers';
 import {
   splitSTORYOF,
   findAddsMap,
-  findDependencies,
   splitExports,
   popParametersObjectFromDefaultExport,
   findExportsMap as generateExportsMap,
 } from './traverse-helpers';
 
 function isUglyComment(comment, uglyCommentsRegex) {
-  return uglyCommentsRegex.some(regex => regex.test(comment));
+  return uglyCommentsRegex.some((regex) => regex.test(comment));
 }
 
 function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex }) {
@@ -18,9 +17,9 @@ function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex
   const parts = [source];
 
   comments
-    .filter(comment => isUglyComment(comment.value.trim(), uglyCommentsRegex))
+    .filter((comment) => isUglyComment(comment.value.trim(), uglyCommentsRegex))
     .map(patchNode)
-    .forEach(comment => {
+    .forEach((comment) => {
       parts.pop();
 
       const start = source.slice(lastIndex, comment.start);
@@ -63,24 +62,20 @@ function prettifyCode(source, { prettierConfig, parser, filepath }) {
   }
 }
 
-const STORY_DECORATOR_STATEMENT =
-  '.addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))';
 const ADD_PARAMETERS_STATEMENT =
-  '.addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })';
-const applyExportDecoratorStatement = part =>
+  '.addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })';
+const applyExportDecoratorStatement = (part) =>
   part.declaration.isVariableDeclaration
-    ? ` addSourceDecorator(${part.source}, {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});`
-    : ` const ${part.declaration.ident} = addSourceDecorator(${part.source}, {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});`;
+    ? ` ${part.source};`
+    : ` const ${part.declaration.ident} = ${part.source};`;
 
-export function generateSourceWithDecorators(source, ast, withParameters) {
+export function generateSourceWithDecorators(source, ast) {
   const { comments = [] } = ast;
 
   const partsUsingStoryOfToken = splitSTORYOF(ast, source);
 
   if (partsUsingStoryOfToken.length > 1) {
-    const newSource = partsUsingStoryOfToken.join(
-      (withParameters ? ADD_PARAMETERS_STATEMENT : '') + STORY_DECORATOR_STATEMENT
-    );
+    const newSource = partsUsingStoryOfToken.join(ADD_PARAMETERS_STATEMENT);
 
     return {
       storyOfTokenFound: true,
@@ -120,7 +115,7 @@ export function generateAddsMap(ast, storiesOfIdentifiers) {
 
 export function generateStoriesLocationsMap(ast, storiesOfIdentifiers) {
   const usingAddsMap = generateAddsMap(ast, storiesOfIdentifiers);
-  const { addsMap } = usingAddsMap;
+  const addsMap = usingAddsMap;
 
   if (Object.keys(addsMap).length > 0) {
     return usingAddsMap;
@@ -130,10 +125,6 @@ export function generateStoriesLocationsMap(ast, storiesOfIdentifiers) {
   return usingExportsMap || usingAddsMap;
 }
 
-export function generateDependencies(ast) {
-  return findDependencies(ast);
-}
-
 export function generateStorySource({ source, ...options }) {
   let storySource = source;
 
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js
rename to lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
new file mode 100644
index 000000000000..5ca85d1327c4
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
@@ -0,0 +1,77 @@
+import defaultOptions from './default-options';
+import getParser from './parsers';
+
+import {
+  generateSourceWithDecorators,
+  generateSourceWithoutDecorators,
+  generateStorySource,
+  generateStoriesLocationsMap,
+  generateSourcesInExportedParameters,
+} from './generate-helpers';
+
+function extendOptions(source, comments, filepath, options) {
+  return {
+    ...defaultOptions,
+    ...options,
+    source,
+    comments,
+    filepath,
+  };
+}
+
+function inject(source, filepath, options = {}, log = (message) => {}) {
+  const { injectDecorator = true, injectParameters = false } = options;
+  const obviouslyNotCode = ['md', 'txt', 'json'].includes(options.parser);
+  let parser = null;
+  try {
+    parser = getParser(options.parser || filepath);
+  } catch (e) {
+    log(new Error(`(not fatal, only impacting storysource) Could not load a parser (${e})`));
+  }
+
+  if (obviouslyNotCode || !parser) {
+    return {
+      source,
+      storySource: {},
+      addsMap: {},
+      changed: false,
+    };
+  }
+  const ast = parser.parse(source);
+
+  const { changed, source: cleanedSource, comments, exportTokenFound } =
+    injectDecorator === true
+      ? generateSourceWithDecorators(source, ast)
+      : generateSourceWithoutDecorators(source, ast);
+
+  const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
+  const newAst = parser.parse(storySource);
+  const addsMap = generateStoriesLocationsMap(newAst, []);
+
+  let newSource = cleanedSource;
+  if (exportTokenFound) {
+    const cleanedSourceAst = parser.parse(cleanedSource);
+    newSource = generateSourcesInExportedParameters(cleanedSource, cleanedSourceAst, {
+      source: storySource,
+      locationsMap: addsMap,
+    });
+  }
+
+  if (!changed && Object.keys(addsMap || {}).length === 0) {
+    return {
+      source: newSource,
+      storySource,
+      addsMap: {},
+      changed,
+    };
+  }
+
+  return {
+    source: newSource,
+    storySource,
+    addsMap,
+    changed,
+  };
+}
+
+export default inject;
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.test.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.test.js
rename to lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/parse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/parse-helpers.js
rename to lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/parsers/index.js b/lib/source-loader/src/abstract-syntax-tree/parsers/index.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/parsers/index.js
rename to lib/source-loader/src/abstract-syntax-tree/parsers/index.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-flow.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-flow.js
rename to lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-js.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
similarity index 87%
rename from lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-js.js
rename to lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
index 98c459aef1d1..657bd8ab8ae7 100644
--- a/lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-js.js
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
@@ -1,4 +1,4 @@
-import parseJs from 'prettier/parser-babylon';
+import parseJs from 'prettier/parser-babel';
 
 function parse(source) {
   try {
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-ts.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
similarity index 100%
rename from lib/source-loader/src/server/abstract-syntax-tree/parsers/parser-ts.js
rename to lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
similarity index 82%
rename from lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js
rename to lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
index f80ae30b22fd..20ab7eeb2880 100644
--- a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js
+++ b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
@@ -9,7 +9,7 @@ export function splitSTORYOF(ast, source) {
 
   estraverse.traverse(ast, {
     fallback: 'iteration',
-    enter: node => {
+    enter: (node) => {
       patchNode(node);
 
       if (node.type === 'CallExpression') {
@@ -49,7 +49,7 @@ function getDescriptor(metaDeclaration, propertyName) {
   const property =
     metaDeclaration &&
     metaDeclaration.declaration &&
-    metaDeclaration.declaration.properties.find(p => p.key && p.key.name === propertyName);
+    metaDeclaration.declaration.properties.find((p) => p.key && p.key.name === propertyName);
   if (!property) {
     return undefined;
   }
@@ -58,7 +58,7 @@ function getDescriptor(metaDeclaration, propertyName) {
 
   switch (type) {
     case 'ArrayExpression':
-      return property.value.elements.map(t => {
+      return property.value.elements.map((t) => {
         if (!['StringLiteral', 'Literal'].includes(t.type)) {
           throw new Error(`Unexpected descriptor element: ${t.type}`);
         }
@@ -78,7 +78,7 @@ function findIncludeExclude(ast) {
     program &&
     program.body &&
     program.body.find(
-      d =>
+      (d) =>
         d.type === 'ExportDefaultDeclaration' &&
         d.declaration.type === 'ObjectExpression' &&
         (d.declaration.properties || []).length
@@ -101,7 +101,7 @@ export function splitExports(ast, source) {
 
   estraverse.traverse(ast, {
     fallback: 'iteration',
-    enter: node => {
+    enter: (node) => {
       patchNode(node);
 
       const isNamedExport = node.type === 'ExportNamedDeclaration' && node.declaration;
@@ -139,7 +139,6 @@ export function splitExports(ast, source) {
 
 export function findAddsMap(ast, storiesOfIdentifiers) {
   const addsMap = {};
-  const idsToFrameworks = {};
 
   estraverse.traverse(ast, {
     fallback: 'iteration',
@@ -149,23 +148,21 @@ export function findAddsMap(ast, storiesOfIdentifiers) {
       if (node.type === 'MemberExpression') {
         const { toAdd, idToFramework } = handleADD(node, parent, storiesOfIdentifiers);
         Object.assign(addsMap, toAdd);
-        Object.assign(idsToFrameworks, idToFramework);
       }
     },
   });
 
-  return { addsMap, idsToFrameworks };
+  return addsMap;
 }
 
 export function findExportsMap(ast) {
   const addsMap = {};
-  const idsToFrameworks = {};
   const program = (ast && ast.program) || ast;
   const metaDeclaration =
     program &&
     program.body &&
     program.body.find(
-      d =>
+      (d) =>
         d.type === 'ExportDefaultDeclaration' &&
         d.declaration.type === 'ObjectExpression' &&
         (d.declaration.properties || []).length
@@ -174,10 +171,10 @@ export function findExportsMap(ast) {
   const titleProperty =
     metaDeclaration &&
     metaDeclaration.declaration &&
-    metaDeclaration.declaration.properties.find(p => p.key && p.key.name === 'title');
+    metaDeclaration.declaration.properties.find((p) => p.key && p.key.name === 'title');
 
   if (!titleProperty) {
-    return { addsMap, idsToFrameworks };
+    return addsMap;
   }
   const titleValue = titleProperty.value;
   let title;
@@ -191,7 +188,7 @@ export function findExportsMap(ast) {
   if (title) {
     estraverse.traverse(ast, {
       fallback: 'iteration',
-      enter: node => {
+      enter: (node) => {
         patchNode(node);
 
         const isNamedExport = node.type === 'ExportNamedDeclaration' && node.declaration;
@@ -229,48 +226,7 @@ export function findExportsMap(ast) {
       },
     });
   }
-  return { addsMap, idsToFrameworks };
-}
-
-export function findDependencies(ast) {
-  const dependencies = [];
-  const storiesOfIdentifiers = {};
-
-  estraverse.traverse(ast, {
-    fallback: 'iteration',
-    enter: node => {
-      patchNode(node);
-
-      if (node.type === 'ImportDeclaration') {
-        const candidateSpecifier = (node.specifiers || []).find(
-          s => (s.imported || {}).name === 'storiesOf'
-        );
-        if (node.source.value.startsWith('@storybook/') && candidateSpecifier) {
-          Object.assign(storiesOfIdentifiers, {
-            [candidateSpecifier.local.name]: node.source.value,
-          });
-        }
-        dependencies.push(node.source.value);
-      }
-    },
-  });
-  return { dependencies, storiesOfIdentifiers };
-}
-
-export function endOfImports(ast) {
-  let end = 0;
-
-  estraverse.traverse(ast, {
-    fallback: 'iteration',
-    enter: node => {
-      patchNode(node);
-
-      if (node.type === 'ImportDeclaration') {
-        end = Math.max(node.end, end);
-      }
-    },
-  });
-  return end;
+  return addsMap;
 }
 
 export function popParametersObjectFromDefaultExport(source, ast) {
@@ -280,7 +236,7 @@ export function popParametersObjectFromDefaultExport(source, ast) {
   let foundParametersProperty = false;
   estraverse.traverse(ast, {
     fallback: 'iteration',
-    enter: node => {
+    enter: (node) => {
       patchNode(node);
 
       if (
@@ -289,7 +245,7 @@ export function popParametersObjectFromDefaultExport(source, ast) {
         (node.declaration.properties || []).length
       ) {
         const parametersProperty = node.declaration.properties.find(
-          p => p.key.name === 'parameters' && p.value.type === 'ObjectExpression'
+          (p) => p.key.name === 'parameters' && p.value.type === 'ObjectExpression'
         );
 
         foundParametersProperty = !!parametersProperty;
diff --git a/lib/source-loader/src/build.js b/lib/source-loader/src/build.js
new file mode 100644
index 000000000000..b87101dbbb2c
--- /dev/null
+++ b/lib/source-loader/src/build.js
@@ -0,0 +1,23 @@
+import { readStory } from './dependencies-lookup/readAsObject';
+
+export function transform(inputSource) {
+  return readStory(this, inputSource).then((sourceObject) => {
+    // if source-loader had trouble parsing the story exports, return the original story
+    // example is
+    // const myStory = () => xxx
+    // export { myStory }
+    if (!sourceObject.source || sourceObject.source.length === 0) {
+      return inputSource;
+    }
+    const { source, sourceJson, addsMap } = sourceObject;
+    const preamble = `
+      /* eslint-disable */
+      // @ts-nocheck
+      // @ts-ignore
+      var __STORY__ = ${sourceJson};
+      // @ts-ignore
+      var __LOCATIONS_MAP__ = ${JSON.stringify(addsMap)};
+    `;
+    return `${preamble}\n${source}`;
+  });
+}
diff --git a/lib/source-loader/src/client/events.js b/lib/source-loader/src/client/events.js
deleted file mode 100644
index ebeb7da51bde..000000000000
--- a/lib/source-loader/src/client/events.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const ADDON_ID = 'storybook/source-loader';
-export const STORY_EVENT_ID = `${ADDON_ID}/set`;
diff --git a/lib/source-loader/src/client/preview.js b/lib/source-loader/src/client/preview.js
deleted file mode 100644
index 05491f18cf8b..000000000000
--- a/lib/source-loader/src/client/preview.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import addons from '@storybook/addons';
-import { logger } from '@storybook/client-logger';
-import { STORY_EVENT_ID } from './events';
-
-const getLocation = (context, locationsMap) => locationsMap[context.id];
-
-function sendEvent(
-  context,
-  source,
-  locationsMap,
-  mainFileLocation,
-  dependencies,
-  localDependencies,
-  prefix,
-  idsToFrameworks
-) {
-  if (!context || !context.id || !context.kind || !context.story) {
-    logger.warn(
-      '@storybook/source-loader was applied to a file which does not contain a story. Please check your webpack configuration and make sure to apply @storybook/source-loader only to files containg stories. Related file:'
-    );
-    logger.warn(source);
-    return;
-  }
-
-  const channel = addons.getChannel();
-  const currentLocation = getLocation(context, locationsMap);
-
-  channel.emit(STORY_EVENT_ID, {
-    edition: {
-      source,
-      mainFileLocation,
-      dependencies,
-      localDependencies,
-      prefix,
-      idsToFrameworks,
-    },
-    story: {
-      kind: context.kind,
-      story: context.story,
-    },
-    location: {
-      currentLocation,
-      locationsMap,
-    },
-  });
-}
-
-export function addSource(storyFn, sourceContext) {
-  const {
-    __STORY__: source,
-    __ADDS_MAP__: locationsMap = {},
-    __MAIN_FILE_LOCATION__: mainFileLocation = '/index.js',
-    __MODULE_DEPENDENCIES__: dependencies = [],
-    __LOCAL_DEPENDENCIES__: localDependencies = {},
-    __SOURCE_PREFIX__: prefix,
-    __IDS_TO_FRAMEWORKS__: idsToFrameworks,
-  } = sourceContext;
-  const decorated = (context = {}) => {
-    sendEvent(
-      context,
-      source,
-      locationsMap,
-      mainFileLocation,
-      dependencies,
-      localDependencies,
-      prefix,
-      idsToFrameworks
-    );
-    if (typeof storyFn === 'function') {
-      return storyFn(context);
-    }
-    return storyFn;
-  };
-  decorated.story = (storyFn || {}).story;
-  return decorated;
-}
-
-export function withSource(
-  source,
-  locationsMap = {},
-  mainFileLocation = '/index.js',
-  dependencies = [],
-  localDependencies = {},
-  prefix,
-  idsToFrameworks
-) {
-  return (storyFn, context) => {
-    sendEvent(
-      context,
-      source,
-      locationsMap,
-      mainFileLocation,
-      dependencies,
-      localDependencies,
-      prefix,
-      idsToFrameworks
-    );
-    return storyFn(context);
-  };
-}
diff --git a/lib/source-loader/src/dependencies-lookup/readAsObject.js b/lib/source-loader/src/dependencies-lookup/readAsObject.js
new file mode 100644
index 000000000000..3093df7d06b2
--- /dev/null
+++ b/lib/source-loader/src/dependencies-lookup/readAsObject.js
@@ -0,0 +1,34 @@
+import { getOptions } from 'loader-utils';
+import injectDecorator from '../abstract-syntax-tree/inject-decorator';
+
+function readAsObject(classLoader, inputSource, mainFile) {
+  const options = getOptions(classLoader) || {};
+  const result = injectDecorator(
+    inputSource,
+    classLoader.resourcePath,
+    {
+      ...options,
+      parser: options.parser || classLoader.extension,
+    },
+    classLoader.emitWarning.bind(classLoader)
+  );
+
+  const sourceJson = JSON.stringify(result.storySource || inputSource)
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+
+  const addsMap = result.addsMap || {};
+  const source = mainFile ? result.source : inputSource;
+
+  return new Promise((resolve) =>
+    resolve({
+      source,
+      sourceJson,
+      addsMap,
+    })
+  );
+}
+
+export function readStory(classLoader, inputSource) {
+  return readAsObject(classLoader, inputSource, true);
+}
diff --git a/lib/source-loader/src/index.ts b/lib/source-loader/src/index.ts
new file mode 100644
index 000000000000..ce664491534a
--- /dev/null
+++ b/lib/source-loader/src/index.ts
@@ -0,0 +1,6 @@
+// @ts-ignore
+import { transform } from './build';
+
+export default transform;
+
+export * from './types';
diff --git a/lib/source-loader/src/server/__snapshots__/build.test.js.snap b/lib/source-loader/src/server/__snapshots__/build.test.js.snap
deleted file mode 100644
index 1e30b863dd27..000000000000
--- a/lib/source-loader/src/server/__snapshots__/build.test.js.snap
+++ /dev/null
@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`insertAfterImports addon-notes 1`] = `
-"import React from 'react';
-
-import BaseButton from '../components/BaseButton';
-import markdownNotes from './notes/notes.md';
-INSERT
-
-
-
-const markdownString = '...';"
-`;
-
-exports[`insertAfterImports imports 1`] = `
-"import './foo';
-import './bar';
-INSERT
-
-
-whatever;"
-`;
-
-exports[`insertAfterImports multi-line imports 1`] = `
-"import 'foo';
-import {
-  bar
-} from 'baz';
-INSERT
-
-
-whatever;"
-`;
-
-exports[`insertAfterImports no imports 1`] = `
-"
-INSERT
-
-foo bar;
-baz;"
-`;
-
-exports[`insertAfterImports single-line imports 1`] = `
-"import 'foo';
-import { bar } from 'baz';
-INSERT
-
-
-whatever;"
-`;
diff --git a/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.js b/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.js
deleted file mode 100644
index f5c994b54684..000000000000
--- a/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import defaultOptions from './default-options';
-import getParser from './parsers';
-
-import {
-  generateSourceWithDecorators,
-  generateSourceWithoutDecorators,
-  generateStorySource,
-  generateStoriesLocationsMap,
-  generateDependencies,
-  generateSourcesInExportedParameters,
-} from './generate-helpers';
-
-function extendOptions(source, comments, filepath, options) {
-  return {
-    ...defaultOptions,
-    ...options,
-    source,
-    comments,
-    filepath,
-  };
-}
-
-function inject(source, filepath, options = {}, log = message => {}) {
-  const { injectDecorator = true, injectParameters = true, inspectDependencies } = options;
-  const obviouslyNotCode = ['md', 'txt', 'json'].includes(options.parser);
-  let parser = null;
-  try {
-    parser = getParser(options.parser || filepath);
-  } catch (e) {
-    log(new Error(`(not fatal, only impacting storysource) Could not load a parser (${e})`));
-  }
-
-  if (obviouslyNotCode || !parser) {
-    return {
-      source,
-      storySource: {},
-      addsMap: {},
-      changed: false,
-      dependencies: [],
-    };
-  }
-  const ast = parser.parse(source);
-
-  const { changed, source: cleanedSource, comments, exportTokenFound } =
-    injectDecorator === true
-      ? generateSourceWithDecorators(source, ast, injectParameters)
-      : generateSourceWithoutDecorators(source, ast);
-
-  const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
-  const newAst = parser.parse(storySource);
-  const { dependencies, storiesOfIdentifiers } = inspectDependencies
-    ? generateDependencies(newAst)
-    : { dependencies: [], storiesOfIdentifiers: {} };
-  const { addsMap, idsToFrameworks } = generateStoriesLocationsMap(newAst, storiesOfIdentifiers);
-
-  let newSource = cleanedSource;
-  if (exportTokenFound) {
-    const cleanedSourceAst = parser.parse(cleanedSource);
-    newSource = generateSourcesInExportedParameters(cleanedSource, cleanedSourceAst, {
-      source: storySource,
-      locationsMap: addsMap,
-    });
-  }
-
-  if (!changed && Object.keys(addsMap || {}).length === 0) {
-    return {
-      source: newSource,
-      storySource,
-      addsMap: {},
-      changed,
-      dependencies,
-      idsToFrameworks: idsToFrameworks || {},
-    };
-  }
-
-  return {
-    source: newSource,
-    storySource,
-    addsMap,
-    changed,
-    dependencies,
-    idsToFrameworks: idsToFrameworks || {},
-  };
-}
-
-export default inject;
diff --git a/lib/source-loader/src/server/build.js b/lib/source-loader/src/server/build.js
deleted file mode 100644
index 50999c595355..000000000000
--- a/lib/source-loader/src/server/build.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { getOptions } from 'loader-utils';
-import { readStory } from './dependencies-lookup/readAsObject';
-import { getRidOfUselessFilePrefixes } from './dependencies-lookup/getRidOfUselessFilePrefixes';
-import getParser from './abstract-syntax-tree/parsers';
-import { endOfImports } from './abstract-syntax-tree/traverse-helpers';
-
-export function insertAfterImports(classLoader, insert, source) {
-  const options = getOptions(classLoader) || {};
-  let ast;
-  try {
-    ast = getParser(options.parser || classLoader.extension || 'javascript').parse(source);
-  } catch (e) {
-    // if not working, then we will fallback to not adding anything
-    // perhaps the code was not written in javascript
-    return source;
-  }
-  if (!ast) return `${insert}${source}`;
-  const endOfImportsIndex = endOfImports(ast);
-  const result = `${source.substring(0, endOfImportsIndex)}\n${insert}\n${source.substring(
-    endOfImportsIndex
-  )}`;
-  return result;
-}
-
-export function transform(inputSource) {
-  return readStory(this, inputSource)
-    .then(getRidOfUselessFilePrefixes)
-    .then(
-      ({
-        prefix,
-        resource,
-        source,
-        sourceJson,
-        addsMap,
-        dependencies,
-        localDependencies,
-        idsToFrameworks,
-      }) => {
-        const preamble = `
-/* eslint-disable no-unused-vars,@typescript-eslint/no-unused-vars */
-// @ts-ignore
-var withSourceLoader = require('@storybook/source-loader/preview').withSource;
-// @ts-ignore
-var addSourceDecorator = require("@storybook/source-loader/preview").addSource;
-// @ts-ignore
-var __SOURCE_PREFIX__ = "${prefix.replace(/\\([^\\ ])/g, '\\\\$1')}";
-// @ts-ignore
-var __STORY__ = ${sourceJson};
-// @ts-ignore
-var __ADDS_MAP__ = ${JSON.stringify(addsMap)};
-// @ts-ignore
-var __MAIN_FILE_LOCATION__ = ${JSON.stringify(resource)};
-// @ts-ignore
-var __MODULE_DEPENDENCIES__ = ${JSON.stringify(dependencies)};
-// @ts-ignore
-var __LOCAL_DEPENDENCIES__ = ${JSON.stringify(localDependencies)};
-// @ts-ignore
-var __IDS_TO_FRAMEWORKS__ = ${JSON.stringify(idsToFrameworks)};
-/* eslint-enable no-unused-vars,@typescript-eslint/no-unused-vars */
-        `;
-        return insertAfterImports(this, preamble, source);
-        // return `${preamble}${source}`;
-      }
-    );
-}
diff --git a/lib/source-loader/src/server/build.test.js b/lib/source-loader/src/server/build.test.js
deleted file mode 100644
index 7b4a15fb73a4..000000000000
--- a/lib/source-loader/src/server/build.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { insertAfterImports } from './build';
-
-const insert = 'INSERT\n';
-
-describe('insertAfterImports', () => {
-  it('no imports', () => {
-    const noImports = `
-foo bar;
-baz;
-    `.trim();
-    expect(insertAfterImports({}, insert, noImports)).toMatchSnapshot();
-  });
-
-  it('imports', () => {
-    const hasImports = `
-import './foo';
-import './bar';
-whatever;
-    `.trim();
-    expect(insertAfterImports({}, insert, hasImports)).toMatchSnapshot();
-  });
-
-  it('single-line imports', () => {
-    const hasImports = `
-import 'foo';
-import { bar } from 'baz';
-whatever;
-    `.trim();
-    expect(insertAfterImports({}, insert, hasImports)).toMatchSnapshot();
-  });
-
-  it('multi-line imports', () => {
-    const hasImports = `
-import 'foo';
-import {
-  bar
-} from 'baz';
-whatever;
-    `.trim();
-    expect(insertAfterImports({}, insert, hasImports)).toMatchSnapshot();
-  });
-
-  it('addon-notes', () => {
-    const notesStory = `
-    import React from 'react';
-
-import BaseButton from '../components/BaseButton';
-import markdownNotes from './notes/notes.md';
-
-const markdownString = '...';
-    `.trim();
-    expect(insertAfterImports({}, insert, notesStory)).toMatchSnapshot();
-  });
-});
diff --git a/lib/source-loader/src/server/dependencies-lookup/getRidOfUselessFilePrefixes.js b/lib/source-loader/src/server/dependencies-lookup/getRidOfUselessFilePrefixes.js
deleted file mode 100644
index 1f0ca22ce8e1..000000000000
--- a/lib/source-loader/src/server/dependencies-lookup/getRidOfUselessFilePrefixes.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import path from 'path';
-
-function commonDir(...resources) {
-  const firstResource = (resources[0] || '').split(path.sep);
-  let i = 1;
-  while (
-    i < firstResource.length &&
-    // eslint-disable-next-line no-loop-func
-    resources.every(resource => resource.startsWith(firstResource.slice(0, i).join(path.sep)))
-  ) {
-    i += 1;
-  }
-  return firstResource.slice(0, i - 1).join(path.sep);
-}
-
-export function getRidOfUselessFilePrefixes({
-  resource,
-  source,
-  sourceJson,
-  addsMap,
-  dependencies,
-  localDependencies,
-  idsToFrameworks,
-}) {
-  const commondir = commonDir(resource, ...Object.keys(localDependencies || {}));
-  return {
-    prefix: commondir,
-    source,
-    sourceJson,
-    addsMap,
-    dependencies,
-    idsToFrameworks,
-    resource:
-      commondir === resource
-        ? '/index.js'
-        : resource.substring(commondir.length).replace(path.sep === '\\' ? /\\/g : /\//g, '/'),
-    localDependencies: Object.assign(
-      {},
-      ...Object.entries(localDependencies || {}).map(([depFileName, dependency]) => ({
-        [depFileName
-          .substring(commondir.length)
-          .replace(new RegExp(path.sep === '\\' ? /\\/g : /\//g, 'g'), '/')]: dependency,
-      }))
-    ),
-  };
-}
diff --git a/lib/source-loader/src/server/dependencies-lookup/readAsObject.js b/lib/source-loader/src/server/dependencies-lookup/readAsObject.js
deleted file mode 100644
index 4e8f11c0852d..000000000000
--- a/lib/source-loader/src/server/dependencies-lookup/readAsObject.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import { getOptions } from 'loader-utils';
-import path from 'path';
-import injectDecorator from '../abstract-syntax-tree/inject-decorator';
-
-function extractDependenciesFrom(tree) {
-  return !Object.entries(tree || {}).length
-    ? []
-    : Object.entries(tree)
-        .map(([, value]) =>
-          (value.dependencies || []).concat(extractDependenciesFrom(value.localDependencies))
-        )
-        .reduce((acc, value) => acc.concat(value), []);
-}
-
-function extractLocalDependenciesFrom(tree) {
-  return Object.assign(
-    {},
-    ...Object.entries(tree || {}).map(([thisPath, value]) => ({
-      [thisPath]: { code: value.source || value.code },
-      ...extractLocalDependenciesFrom(value.localDependencies),
-    }))
-  );
-}
-
-function readAsObject(classLoader, inputSource, mainFile) {
-  const options = getOptions(classLoader) || {};
-  const { inspectLocalDependencies } = options;
-  const result = injectDecorator(
-    inputSource,
-    classLoader.resourcePath,
-    {
-      ...options,
-      parser: options.parser || classLoader.extension,
-    },
-    classLoader.emitWarning.bind(classLoader)
-  );
-
-  const sourceJson = JSON.stringify(result.storySource || inputSource)
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029');
-
-  const addsMap = result.addsMap || {};
-  const dependencies = result.dependencies || [];
-  const source = mainFile ? result.source : inputSource;
-  const idsToFrameworks = result.idsToFrameworks || {};
-  const resource = classLoader.resourcePath || classLoader.resource;
-
-  const moduleDependencies = (result.dependencies || []).filter(d => d[0] === '.' || d[0] === '/');
-  const workspaceFileNames = inspectLocalDependencies
-    ? moduleDependencies.map(d => path.join(path.dirname(resource), d))
-    : [];
-
-  return Promise.all(
-    workspaceFileNames.map(
-      d =>
-        new Promise(resolve =>
-          classLoader.loadModule(d, (err1, compiledSource, sourceMap, theModule) => {
-            if (err1) {
-              classLoader.emitError(err1);
-            }
-            classLoader.fs.readFile(theModule.resource, (err2, dependencyInputData) => {
-              if (err2) {
-                classLoader.emitError(err2);
-              }
-              resolve({
-                d,
-                err: err1 || err2,
-                inputSource: dependencyInputData.toString(),
-                compiledSource,
-                sourceMap,
-                theModule,
-              });
-            });
-          })
-        )
-    )
-  )
-    .then(data =>
-      Promise.all(
-        data.map(({ inputSource: dependencyInputSource, theModule }) =>
-          readAsObject(
-            {
-              ...classLoader,
-              resourcePath: theModule.resourcePath,
-              resource: theModule.resource,
-              extension: (theModule.resource || '').split('.').slice(-1)[0],
-            },
-            dependencyInputSource
-          )
-        )
-      ).then(moduleObjects =>
-        Object.assign(
-          {},
-          ...moduleObjects.map(asObject => ({
-            [asObject.resource]: asObject,
-          }))
-        )
-      )
-    )
-    .then(localDependencies => ({
-      resource,
-      source,
-      sourceJson,
-      addsMap,
-      idsToFrameworks,
-      dependencies: dependencies
-        .concat(extractDependenciesFrom(localDependencies))
-        .filter(d => d[0] !== '.' && d[0] !== '/')
-        .map(d => (d[0] === '@' ? `${d.split('/')[0]}/${d.split('/')[1]}` : d.split('/')[0])),
-      localDependencies: Object.assign(
-        ...Object.entries(localDependencies).map(([name, value]) => ({
-          [name]: { code: value.source },
-        })),
-        extractLocalDependenciesFrom(localDependencies)
-      ),
-    }));
-}
-
-export function readStory(classLoader, inputSource) {
-  return readAsObject(classLoader, inputSource, true);
-}
diff --git a/lib/source-loader/src/server/index.js b/lib/source-loader/src/server/index.js
deleted file mode 100644
index 42166bb122ce..000000000000
--- a/lib/source-loader/src/server/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { transform } from './build';
-
-export default transform;
diff --git a/lib/source-loader/src/types.ts b/lib/source-loader/src/types.ts
new file mode 100644
index 000000000000..0319646364a0
--- /dev/null
+++ b/lib/source-loader/src/types.ts
@@ -0,0 +1,13 @@
+export interface SourceLoc {
+  line: number;
+  col: number;
+}
+
+export interface SourceBlock {
+  startLoc: SourceLoc;
+  endLoc: SourceLoc;
+}
+
+export interface LocationsMap {
+  [key: string]: SourceBlock;
+}
diff --git a/lib/source-loader/tsconfig.json b/lib/source-loader/tsconfig.json
new file mode 100644
index 000000000000..48a78502378b
--- /dev/null
+++ b/lib/source-loader/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/tests/**/*",
+    "src/__tests__/**/*"
+  ]
+}
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 81ea79c8eaa5..57b973468054 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -15,30 +15,31 @@
     "directory": "lib/theming"
   },
   "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@emotion/core": "^10.0.20",
+    "@emotion/is-prop-valid": "^0.8.6",
     "@emotion/styled": "^10.0.17",
-    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/client-logger": "6.0.0-beta.21",
     "core-js": "^3.0.1",
     "deep-object-diff": "^1.1.0",
     "emotion-theming": "^10.0.19",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
-    "polished": "^3.3.1",
-    "prop-types": "^15.7.2",
+    "polished": "^3.4.4",
     "resolve-from": "^5.0.0",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -47,5 +48,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts
index c35030a6ae1d..da0666ded750 100644
--- a/lib/theming/src/convert.ts
+++ b/lib/theming/src/convert.ts
@@ -49,15 +49,15 @@ const createColors = (vars: ThemeVars): Color => ({
   ultraviolet: color.ultraviolet,
 
   // Monochrome
-  lightest: color.lightest,
-  lighter: color.lighter,
-  light: color.light,
-  mediumlight: color.mediumlight,
+  lightest: vars.base === 'dark' ? color.darkest : color.lightest,
+  lighter: vars.base === 'dark' ? color.darker : color.lighter,
+  light: vars.base === 'dark' ? color.dark : color.light,
+  mediumlight: vars.base === 'dark' ? color.mediumdark : color.mediumlight,
   medium: color.medium,
-  mediumdark: color.mediumdark,
-  dark: color.dark,
-  darker: color.darker,
-  darkest: color.darkest,
+  mediumdark: vars.base === 'dark' ? color.mediumlight : color.mediumdark,
+  dark: vars.base === 'dark' ? color.light : color.dark,
+  darker: vars.base === 'dark' ? color.lighter : color.darker,
+  darkest: vars.base === 'dark' ? color.lightest : color.darkest,
 
   // For borders
   border: color.border,
diff --git a/lib/theming/src/global.ts b/lib/theming/src/global.ts
index a2f114ab418b..55a82dbd75e8 100644
--- a/lib/theming/src/global.ts
+++ b/lib/theming/src/global.ts
@@ -32,7 +32,6 @@ export const createReset = memoize(1)(
     },
 
     'button, input, textarea, select': {
-      outline: 'none',
       fontFamily: 'inherit',
       fontSize: 'inherit',
       boxSizing: 'border-box',
diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
index 4a8dd64f646e..86d514f19ad7 100644
--- a/lib/theming/src/index.ts
+++ b/lib/theming/src/index.ts
@@ -8,6 +8,7 @@ export * from './types';
 
 export * from '@emotion/core';
 export * from 'emotion-theming';
+export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';
 export * from './create';
@@ -15,3 +16,6 @@ export * from './convert';
 export * from './ensure';
 
 export { lightenColor as lighten, darkenColor as darken } from './utils';
+
+export const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
diff --git a/lib/theming/src/tests/create.test.js b/lib/theming/src/tests/create.test.js
index d5716dc4df11..4cdc2471cceb 100644
--- a/lib/theming/src/tests/create.test.js
+++ b/lib/theming/src/tests/create.test.js
@@ -1,6 +1,4 @@
 import { create } from '../create';
-import darkThemeVars from '../themes/dark';
-import lightThemeVars from '../themes/light';
 
 describe('create base', () => {
   it('should create a theme with minimal viable theme', () => {
diff --git a/lib/theming/tsconfig.json b/lib/theming/tsconfig.json
index 8876bb6737a1..30079a2f7435 100644
--- a/lib/theming/tsconfig.json
+++ b/lib/theming/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
+    "rootDir": "./src"
   },
   "include": [
     "src/**/*"
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 1a5c0f0cd17d..5e07905242ea 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "5.3.0-rc.0",
+  "version": "6.0.0-beta.21",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -15,39 +15,41 @@
     "directory": "lib/ui"
   },
   "license": "MIT",
+  "main": "dist/index.js",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
-  "main": "dist/index.js",
   "scripts": {
     "createDlls": "node -r esm ./scripts/createDlls.js",
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@emotion/core": "^10.0.20",
-    "@storybook/addons": "5.3.0-rc.0",
-    "@storybook/api": "5.3.0-rc.0",
-    "@storybook/channels": "5.3.0-rc.0",
-    "@storybook/client-logger": "5.3.0-rc.0",
-    "@storybook/components": "5.3.0-rc.0",
-    "@storybook/core-events": "5.3.0-rc.0",
-    "@storybook/router": "5.3.0-rc.0",
-    "@storybook/theming": "5.3.0-rc.0",
+    "@storybook/addons": "6.0.0-beta.21",
+    "@storybook/api": "6.0.0-beta.21",
+    "@storybook/channels": "6.0.0-beta.21",
+    "@storybook/client-logger": "6.0.0-beta.21",
+    "@storybook/components": "6.0.0-beta.21",
+    "@storybook/core-events": "6.0.0-beta.21",
+    "@storybook/router": "6.0.0-beta.21",
+    "@storybook/theming": "6.0.0-beta.21",
+    "@types/markdown-to-jsx": "^6.11.0",
+    "@types/rfdc": "^1.1.0",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "core-js-pure": "^3.0.1",
     "emotion-theming": "^10.0.19",
-    "fast-deep-equal": "^2.0.1",
-    "fuse.js": "^3.4.6",
+    "fast-deep-equal": "^3.1.1",
+    "fuse.js": "^3.6.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
-    "markdown-to-jsx": "^6.9.3",
+    "markdown-to-jsx": "^6.11.4",
     "memoizerific": "^1.11.3",
-    "polished": "^3.3.1",
-    "prop-types": "^15.7.2",
+    "polished": "^3.4.4",
     "qs": "^6.6.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
@@ -55,23 +57,35 @@
     "react-helmet-async": "^1.0.2",
     "react-hotkeys": "2.0.0",
     "react-sizeme": "^2.6.7",
-    "regenerator-runtime": "^0.13.2",
+    "regenerator-runtime": "^0.13.3",
     "resolve-from": "^5.0.0",
-    "semver": "^6.0.0",
+    "rfdc": "^1.1.4",
+    "@storybook/semver": "^7.3.2",
     "store2": "^2.7.1",
-    "telejson": "^3.2.0",
-    "util-deprecate": "^1.0.2"
+    "telejson": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.3.0-rc.0",
-    "@storybook/addon-knobs": "5.3.0-rc.0",
-    "corejs-upgrade-webpack-plugin": "^2.2.0",
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-actions": "6.0.0-beta.21",
+    "@storybook/addon-knobs": "6.0.0-beta.21",
+    "@storybook/react": "6.0.0-beta.21",
+    "@testing-library/react": "^10.0.3",
+    "babel-loader": "^8.0.6",
+    "chromatic": "^4.0.2",
+    "enzyme": "^3.11.0",
     "flush-promises": "^1.0.2",
-    "terser-webpack-plugin": "^2.1.2",
+    "terser-webpack-plugin": "^3.0.0",
     "webpack": "^4.33.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }
diff --git a/lib/ui/paths.js b/lib/ui/paths.js
index e14bef875a3a..935886acba6c 100644
--- a/lib/ui/paths.js
+++ b/lib/ui/paths.js
@@ -14,7 +14,6 @@ module.exports = {
   '@storybook/router': dirname(resolve('@storybook/router/package.json')),
   '@storybook/theming': dirname(resolve('@storybook/theming/package.json')),
   '@storybook/ui': dirname(resolve('@storybook/ui/package.json')),
-  'prop-types': dirname(resolve('prop-types/package.json')),
   react: dirname(resolve('react/package.json')),
   'react-dom': dirname(resolve('react-dom/package.json')),
 };
diff --git a/lib/ui/scripts/createDlls.js b/lib/ui/scripts/createDlls.js
index 10453bf29277..25821e0ffc4a 100644
--- a/lib/ui/scripts/createDlls.js
+++ b/lib/ui/scripts/createDlls.js
@@ -3,8 +3,8 @@ import webpack from 'webpack';
 
 import config from './webpackDllsConfig';
 
-const resolveLocal = dir => path.join(__dirname, dir);
-const webpackAsPromised = c =>
+const resolveLocal = (dir) => path.join(__dirname, dir);
+const webpackAsPromised = (c) =>
   new Promise((res, rej) => {
     webpack(c).run((err, stats) => {
       if (err || stats.hasErrors() || stats.hasWarnings()) {
@@ -29,7 +29,6 @@ const run = () =>
           '@storybook/theming',
           'airbnb-js-shims',
           'emotion-theming',
-          'prop-types',
           'react',
           'react-dom',
           'regenerator-runtime/runtime',
@@ -40,12 +39,12 @@ const run = () =>
   );
 
 run().then(
-  s => {
+  (s) => {
     // eslint-disable-next-line no-console
     console.log('success: ', s.toString());
     process.exitCode = 0;
   },
-  s => {
+  (s) => {
     // eslint-disable-next-line no-console
     console.error('failed: ', s.toString());
     process.exitCode = 1;
diff --git a/lib/ui/scripts/webpackDllsConfig.js b/lib/ui/scripts/webpackDllsConfig.js
index 839a147d1bfd..16a8a2888a3e 100644
--- a/lib/ui/scripts/webpackDllsConfig.js
+++ b/lib/ui/scripts/webpackDllsConfig.js
@@ -1,38 +1,72 @@
 import path from 'path';
 import { ProgressPlugin, DllPlugin } from 'webpack';
 import TerserPlugin from 'terser-webpack-plugin';
-import CoreJSUpgradeWebpackPlugin from 'corejs-upgrade-webpack-plugin';
 
-const resolveLocal = dir => path.join(__dirname, dir);
+import themingPaths from '@storybook/theming/paths';
+import uiPaths from '../paths';
+
+const resolveLocal = (dir) => path.join(__dirname, dir);
 
 const r = resolveLocal('../../../node_modules');
 const out = resolveLocal('../../core/dll');
 
 export default ({ entry, provided = [] }) => ({
-  name: 'storybook-ui',
-  mode: 'production',
+  name: 'storybook_ui',
+  mode: 'development',
 
   entry,
   output: {
     path: out,
-    filename: '[name]_dll.js',
-    library: '[name]_dll',
+    filename: 'storybook_ui_dll.js',
+    library: 'storybook_ui_dll',
   },
   externals: provided,
 
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              sourceType: 'unambiguous',
+              plugins: [
+                require.resolve('@babel/plugin-transform-shorthand-properties'),
+                require.resolve('@babel/plugin-proposal-object-rest-spread'),
+                require.resolve('@babel/plugin-transform-template-literals'),
+                require.resolve('@babel/plugin-transform-block-scoping'),
+                require.resolve('@babel/plugin-transform-classes'),
+                require.resolve('@babel/plugin-transform-arrow-functions'),
+                require.resolve('@babel/plugin-transform-parameters'),
+                require.resolve('@babel/plugin-transform-destructuring'),
+                require.resolve('@babel/plugin-transform-spread'),
+                require.resolve('@babel/plugin-transform-for-of'),
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+
   resolve: {
     extensions: ['.mjs', '.js', '.jsx', '.json'],
     modules: [path.join(__dirname, '../../../node_modules')],
+    alias: {
+      ...themingPaths,
+      ...uiPaths,
+      semver: require.resolve('@storybook/semver'),
+    },
   },
 
   plugins: [
     new ProgressPlugin(),
     new DllPlugin({
       context: r,
-      path: `${out}/[name]-manifest.json`,
-      name: '[name]_dll',
+      path: `${out}/storybook_ui-manifest.json`,
+      name: 'storybook_ui_dll',
     }),
-    new CoreJSUpgradeWebpackPlugin(),
   ],
   optimization: {
     concatenateModules: true,
@@ -42,8 +76,8 @@ export default ({ entry, provided = [] }) => ({
       new TerserPlugin({
         extractComments: {
           condition: /^\**!|@preserve|@license|@cc_on/i,
-          filename: file => file.replace('.js', '.LICENCE'),
-          banner: licenseFile => `License information can be found in ${licenseFile}`,
+          filename: (file) => file.replace('.js', '.LICENCE'),
+          banner: (licenseFile) => `License information can be found in ${licenseFile}`,
         },
       }),
     ],
diff --git a/lib/ui/src/FakeProvider.tsx b/lib/ui/src/FakeProvider.tsx
new file mode 100644
index 000000000000..8aa3c68cdb85
--- /dev/null
+++ b/lib/ui/src/FakeProvider.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { addons } from '@storybook/addons';
+import Provider from './provider';
+
+export class FakeProvider extends Provider {
+  constructor() {
+    super();
+
+    // @ts-ignore
+    this.addons = addons;
+    // @ts-ignore
+    this.channel = {
+      on: () => {},
+      off: () => {},
+      emit: () => {},
+      addListener: () => {},
+    };
+  }
+
+  // @ts-ignore
+  getElements(type) {
+    return addons.getElements(type);
+  }
+
+  renderPreview() {
+    return <div>This is from a 'renderPreview' call from FakeProvider</div>;
+  }
+
+  // @ts-ignore
+  handleAPI(api) {
+    addons.loadAddons(api);
+  }
+
+  // @ts-ignore
+  getConfig() {
+    return {};
+  }
+}
+
+export const Centered = styled.div({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+});
+
+export class PrettyFakeProvider extends FakeProvider {
+  renderPreview(...args: any[]) {
+    return (
+      <Centered>
+        This is from a 'renderPreview' call from FakeProvider
+        <hr />
+        'renderPreview' was called with:
+        <pre>{JSON.stringify(args, null, 2)}</pre>
+      </Centered>
+    );
+  }
+}
diff --git a/lib/ui/src/app.js b/lib/ui/src/app.js
deleted file mode 100644
index 39459c5437a8..000000000000
--- a/lib/ui/src/app.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Global, createGlobal, styled } from '@storybook/theming';
-import memoize from 'memoizerific';
-import sizeMe from 'react-sizeme';
-
-import { Route } from '@storybook/router';
-
-import { Mobile } from './components/layout/mobile';
-import { Desktop } from './components/layout/desktop';
-import Nav from './containers/nav';
-import Preview from './containers/preview';
-import Panel from './containers/panel';
-import Notifications from './containers/notifications';
-
-import SettingsPages from './settings';
-
-const createProps = memoize(1)(() => ({
-  Nav,
-  Preview,
-  Panel,
-  Notifications,
-  pages: [
-    {
-      key: 'settings',
-      render: () => <SettingsPages />,
-      // eslint-disable-next-line react/prop-types
-      route: ({ children }) => (
-        <Route path="/settings" startsWith>
-          {children}
-        </Route>
-      ),
-    },
-  ],
-}));
-
-const View = styled.div({
-  position: 'fixed',
-  overflow: 'hidden',
-  height: '100vh',
-  width: '100vw',
-});
-
-const App = React.memo(({ viewMode, docsOnly, layout, panelCount, size: { width, height } }) => {
-  const props = createProps();
-
-  let content;
-
-  if (!width || !height) {
-    content = (
-      <div>
-        {width} x {height}
-      </div>
-    );
-  } else if (width < 600) {
-    content = <Mobile {...props} viewMode={viewMode} options={layout} panelCount={panelCount} />;
-  } else {
-    content = (
-      <Desktop
-        {...props}
-        viewMode={viewMode}
-        options={layout}
-        docsOnly={docsOnly}
-        {...{ width, height }}
-        panelCount={panelCount}
-      />
-    );
-  }
-
-  return (
-    <View>
-      <Global styles={createGlobal} />
-      {content}
-    </View>
-  );
-});
-App.propTypes = {
-  viewMode: PropTypes.string,
-  panelCount: PropTypes.number.isRequired,
-  layout: PropTypes.shape({}).isRequired,
-  size: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }).isRequired,
-  docsOnly: PropTypes.bool,
-};
-App.defaultProps = {
-  viewMode: undefined,
-  docsOnly: false,
-};
-
-const SizedApp = sizeMe({ monitorHeight: true })(App);
-
-App.displayName = 'App';
-
-export default SizedApp;
diff --git a/lib/ui/src/app.stories.js b/lib/ui/src/app.stories.js
deleted file mode 100644
index 121409f3868d..000000000000
--- a/lib/ui/src/app.stories.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import addons from '@storybook/addons';
-
-import { Root as App, Provider } from './index';
-
-class FakeProvider extends Provider {
-  constructor() {
-    super();
-
-    this.addons = addons;
-    this.channel = {
-      on: () => {},
-      off: () => {},
-      emit: () => {},
-      addPeerListener: () => {},
-    };
-  }
-
-  getElements(type) {
-    return addons.getElements(type);
-  }
-
-  renderPreview() {
-    return <div>Hello world</div>;
-  }
-
-  handleAPI(api) {
-    addons.loadAddons(api);
-  }
-
-  getConfig() {
-    return {};
-  }
-}
-
-storiesOf('UI/Layout/App', module)
-  .addParameters({
-    component: App,
-  })
-  .add('default', () => <App provider={new FakeProvider()} />);
diff --git a/lib/ui/src/app.stories.tsx b/lib/ui/src/app.stories.tsx
new file mode 100644
index 000000000000..6f7fbb7ca872
--- /dev/null
+++ b/lib/ui/src/app.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Root as App } from './index';
+import { PrettyFakeProvider, FakeProvider } from './FakeProvider';
+import Provider from './provider';
+
+export default {
+  title: 'UI/App',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = () => <App provider={(new FakeProvider() as unknown) as Provider} />;
+export const LoadingState = () => (
+  <App provider={(new PrettyFakeProvider() as unknown) as Provider} />
+);
diff --git a/lib/ui/src/app.tsx b/lib/ui/src/app.tsx
new file mode 100644
index 000000000000..e017d011e9ec
--- /dev/null
+++ b/lib/ui/src/app.tsx
@@ -0,0 +1,90 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import { Global, createGlobal, styled } from '@storybook/theming';
+import sizeMe from 'react-sizeme';
+
+import { Route } from '@storybook/router';
+
+import { State } from '@storybook/api';
+import { Mobile } from './components/layout/mobile';
+import { Desktop } from './components/layout/desktop';
+import Sidebar from './containers/sidebar';
+import Preview from './containers/preview';
+import Panel from './containers/panel';
+import Notifications from './containers/notifications';
+
+import SettingsPages from './settings';
+
+const View = styled.div({
+  position: 'fixed',
+  overflow: 'hidden',
+  height: '100vh',
+  width: '100vw',
+});
+
+export interface AppProps {
+  viewMode: State['viewMode'];
+  docsOnly: boolean;
+  layout: State['layout'];
+  panelCount: number;
+  size: {
+    width: number;
+    height: number;
+  };
+}
+
+const App = React.memo<AppProps>(
+  ({ viewMode, docsOnly, layout, panelCount, size: { width, height } }) => {
+    let content;
+
+    const props = useMemo(
+      () => ({
+        Sidebar,
+        Preview,
+        Panel,
+        Notifications,
+        pages: [
+          {
+            key: 'settings',
+            render: () => <SettingsPages />,
+            route: (({ children }) => (
+              <Route path="/settings" startsWith>
+                {children}
+              </Route>
+            )) as FunctionComponent,
+          },
+        ],
+      }),
+      []
+    );
+
+    if (!width || !height) {
+      content = <div />;
+    } else if (width < 600) {
+      content = <Mobile {...props} viewMode={viewMode} options={layout} />;
+    } else {
+      content = (
+        <Desktop
+          {...props}
+          viewMode={viewMode}
+          options={layout}
+          docsOnly={docsOnly}
+          {...{ width, height }}
+          panelCount={panelCount}
+        />
+      );
+    }
+
+    return (
+      <View>
+        <Global styles={createGlobal} />
+        {content}
+      </View>
+    );
+  }
+);
+
+const SizedApp = sizeMe({ monitorHeight: true })(App);
+
+App.displayName = 'App';
+
+export default SizedApp;
diff --git a/lib/ui/src/components/layout/Root.tsx b/lib/ui/src/components/layout/Root.tsx
new file mode 100644
index 000000000000..9a940b999f8d
--- /dev/null
+++ b/lib/ui/src/components/layout/Root.tsx
@@ -0,0 +1,10 @@
+import { styled } from '@storybook/theming';
+
+export const Root = styled.div({
+  position: 'fixed',
+  left: 0,
+  top: 0,
+  width: '100vw',
+  height: '100vh',
+  overflow: 'hidden',
+});
diff --git a/lib/ui/src/components/layout/app.mockdata.tsx b/lib/ui/src/components/layout/app.mockdata.tsx
new file mode 100644
index 000000000000..689bad5648dd
--- /dev/null
+++ b/lib/ui/src/components/layout/app.mockdata.tsx
@@ -0,0 +1,168 @@
+import { setInterval } from 'global';
+import React, { Component, FunctionComponent } from 'react';
+import { styled } from '@storybook/theming';
+import { Collection } from '@storybook/addons';
+import Sidebar, { SidebarProps } from '../sidebar/Sidebar';
+import Panel from '../panel/panel';
+import { Preview } from '../preview/preview';
+
+import { previewProps } from '../preview/preview.mockdata';
+import { mockDataset } from '../sidebar/mockdata';
+import { DesktopProps } from './desktop';
+
+export const panels: Collection = {
+  test1: {
+    title: 'Test 1',
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test1" key={key}>
+          TEST 1
+        </div>
+      ) : null,
+  },
+  test2: {
+    title: 'Test 2',
+    render: ({ active, key }) =>
+      active ? (
+        <div id="test2" key={key}>
+          TEST 2
+        </div>
+      ) : null,
+  },
+};
+
+const realSidebarProps: SidebarProps = {
+  stories: mockDataset.withRoot,
+  menu: [],
+  refs: {},
+  storiesConfigured: true,
+};
+
+const PlaceholderBlock = styled.div(({ color }) => ({
+  background: color || 'hotpink',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+}));
+
+class PlaceholderClock extends Component<{ color: string }, { count: number }> {
+  state = {
+    count: 1,
+  };
+
+  interval: ReturnType<typeof setTimeout>;
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      const { count } = this.state;
+      this.setState({ count: count + 1 });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    const { interval } = this;
+    clearInterval(interval);
+  }
+
+  render() {
+    const { children, color } = this.props;
+    const { count } = this.state;
+    return (
+      <PlaceholderBlock color={color}>
+        <h2
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            color: 'rgba(0,0,0,0.2)',
+            fontSize: '150px',
+            lineHeight: '150px',
+            margin: '-20px',
+          }}
+        >
+          {count}
+        </h2>
+        {children}
+      </PlaceholderBlock>
+    );
+  }
+}
+
+const MockSidebar: FunctionComponent<any> = (props) => (
+  <PlaceholderClock color="hotpink">
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </PlaceholderClock>
+);
+const MockPreview: FunctionComponent<any> = (props) => (
+  <PlaceholderClock color="deepskyblue">
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </PlaceholderClock>
+);
+const MockPanel: FunctionComponent<any> = (props) => (
+  <PlaceholderClock color="orangered">
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </PlaceholderClock>
+);
+export const MockPage: FunctionComponent<any> = (props) => (
+  <PlaceholderClock color="cyan">
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </PlaceholderClock>
+);
+
+export const mockProps: DesktopProps = {
+  Sidebar: MockSidebar,
+  Preview: MockPreview,
+  Panel: MockPanel,
+  Notifications: () => null,
+  pages: [],
+  options: {
+    isFullscreen: false,
+    showNav: true,
+    showPanel: true,
+    panelPosition: 'right',
+    isToolshown: true,
+    initialActive: 'canvas',
+  },
+  viewMode: 'story',
+  panelCount: 2,
+  width: 900,
+  height: 600,
+  docsOnly: false,
+};
+
+export const realProps: DesktopProps = {
+  Sidebar: () => <Sidebar {...realSidebarProps} />,
+  Preview: () => <Preview {...previewProps} />,
+  Notifications: () => null,
+  Panel: () => (
+    <Panel
+      panels={panels}
+      actions={{ onSelect: () => {}, toggleVisibility: () => {}, togglePosition: () => {} }}
+      selectedPanel="test2"
+      panelPosition="bottom"
+      absolute={false}
+    />
+  ),
+  pages: [],
+  options: {
+    isFullscreen: false,
+    showNav: true,
+    showPanel: true,
+    panelPosition: 'right',
+    isToolshown: true,
+    initialActive: 'canvas',
+  },
+  viewMode: 'story',
+  panelCount: 2,
+  width: 900,
+  height: 600,
+  docsOnly: false,
+};
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
deleted file mode 100644
index 72fbf2cf33fc..000000000000
--- a/lib/ui/src/components/layout/container.js
+++ /dev/null
@@ -1,572 +0,0 @@
-/* eslint-disable react/no-did-update-set-state */
-
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { styled, withTheme } from '@storybook/theming';
-import * as persistence from './persist';
-
-import { Draggable, Handle } from './draggers';
-
-export const Root = styled.div({
-  position: 'fixed',
-  left: 0,
-  top: 0,
-  width: '100vw',
-  height: '100vh',
-  overflow: 'hidden',
-});
-
-const Pane = styled.div(
-  {
-    position: 'absolute',
-    boxSizing: 'border-box',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-  ({ hidden }) =>
-    hidden
-      ? {
-          opacity: 0,
-        }
-      : {
-          opacity: 1,
-        },
-  ({ top }) =>
-    top
-      ? {
-          zIndex: 9,
-        }
-      : {},
-  ({ border, theme }) => {
-    switch (border) {
-      case 'left': {
-        return {
-          borderLeft: `1px solid ${theme.appBorderColor}`,
-        };
-      }
-      case 'right': {
-        return {
-          borderRight: `1px solid ${theme.appBorderColor}`,
-        };
-      }
-      case 'top': {
-        return {
-          borderTop: `1px solid ${theme.appBorderColor}`,
-        };
-      }
-      case 'bottom': {
-        return {
-          borderBottom: `1px solid ${theme.appBorderColor}`,
-        };
-      }
-      default: {
-        return {};
-      }
-    }
-  },
-  ({ animate }) =>
-    animate
-      ? {
-          transition: ['width', 'height', 'top', 'left', 'background', 'opacity', 'transform']
-            .map(p => `${p} 0.1s ease-out`)
-            .join(','),
-        }
-      : {}
-);
-
-const Paper = styled.div(
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-  ({ isFullscreen, theme }) =>
-    isFullscreen
-      ? {
-          boxShadow: 'none',
-          borderRadius: 0,
-        }
-      : {
-          background: theme.background.content,
-          borderRadius: theme.appBorderRadius,
-          overflow: 'hidden',
-          boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
-        }
-);
-
-export const Nav = ({ hidden, children, position, ...props }) =>
-  hidden ? null : (
-    <Pane style={position} {...props}>
-      {children}
-    </Pane>
-  );
-
-Nav.propTypes = {
-  hidden: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  position: PropTypes.shape({}),
-};
-Nav.defaultProps = {
-  hidden: false,
-  position: undefined,
-};
-
-export const Main = ({ isFullscreen, children, position, ...props }) => (
-  <Pane style={position} top {...props}>
-    <Paper isFullscreen={isFullscreen}>{children}</Paper>
-  </Pane>
-);
-
-Main.propTypes = {
-  isFullscreen: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  position: PropTypes.shape({}),
-};
-Main.defaultProps = {
-  isFullscreen: false,
-  position: undefined,
-};
-
-export const Preview = ({ hidden, children, position, ...props }) => (
-  <Pane style={position} top hidden={hidden} {...props}>
-    {children}
-  </Pane>
-);
-
-Preview.propTypes = {
-  hidden: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  position: PropTypes.shape({}),
-};
-Preview.defaultProps = {
-  hidden: false,
-  position: undefined,
-};
-
-export const Panel = ({ hidden, children, position, align, ...props }) => (
-  <Pane style={position} hidden={hidden} {...props} border={align === 'bottom' ? 'top' : 'left'}>
-    {children}
-  </Pane>
-);
-
-Panel.propTypes = {
-  hidden: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  position: PropTypes.shape({}),
-  align: PropTypes.oneOf(['bottom', 'right']),
-};
-
-Panel.defaultProps = {
-  hidden: false,
-  position: undefined,
-  align: 'right',
-};
-
-const HoverBlocker = styled.div({
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  zIndex: 15,
-  height: '100vh',
-  width: '100vw',
-});
-
-const getPreviewPosition = ({
-  panelPosition,
-  isPanelHidden,
-  isNavHidden,
-  isFullscreen,
-  bounds,
-  resizerPanel,
-  resizerNav,
-  margin,
-}) => {
-  if (isFullscreen || isPanelHidden) {
-    return {};
-  }
-
-  const navX = isNavHidden ? 0 : resizerNav.x;
-  const panelX = isPanelHidden ? 0 : resizerPanel.x;
-  const panelY = isPanelHidden ? 0 : resizerPanel.y;
-
-  return panelPosition === 'bottom'
-    ? {
-        height: panelY - margin,
-        left: 0,
-        top: 0,
-        width: bounds.width - navX - 2 * margin,
-      }
-    : {
-        height: bounds.height - 2 * margin,
-        left: 0,
-        top: 0,
-        width: panelX - navX - margin,
-      };
-};
-
-const getMainPosition = ({ bounds, resizerNav, isNavHidden, isFullscreen, margin }) => {
-  if (isFullscreen) {
-    return {};
-  }
-
-  const navX = isNavHidden ? 0 : resizerNav.x;
-
-  return {
-    height: bounds.height - margin * 2,
-    left: navX + margin,
-    top: margin,
-    width: bounds.width - navX - margin * 2,
-  };
-};
-
-const getPanelPosition = ({
-  isPanelBottom,
-  isPanelHidden,
-  isNavHidden,
-  bounds,
-  resizerPanel,
-  resizerNav,
-  margin,
-}) => {
-  const navX = isNavHidden ? 0 : resizerNav.x;
-  const panelX = resizerPanel.x;
-  const panelY = resizerPanel.y;
-
-  if (isPanelBottom && isPanelHidden) {
-    return {
-      height: bounds.height - panelY - margin,
-      left: 0,
-      top: panelY - margin,
-      width: bounds.width - navX - 2 * margin,
-    };
-  }
-  if (!isPanelBottom && isPanelHidden) {
-    return {
-      height: bounds.height - 2 * margin,
-      left: panelX - navX - margin,
-      top: 0,
-      width: bounds.width - panelX - margin,
-    };
-  }
-
-  return isPanelBottom
-    ? {
-        height: bounds.height - panelY - margin,
-        left: 0,
-        top: panelY - margin,
-        width: bounds.width - navX - 2 * margin,
-      }
-    : {
-        height: bounds.height - 2 * margin,
-        left: panelX - navX - margin,
-        top: 0,
-        width: bounds.width - panelX - margin,
-      };
-};
-
-class Layout extends Component {
-  constructor(props) {
-    super(props);
-
-    const { bounds, options } = props;
-
-    const { resizerNav, resizerPanel } = persistence.get();
-
-    this.state = {
-      isDragging: false,
-      resizerNav: resizerNav || { x: 200, y: 0 },
-      resizerPanel:
-        resizerPanel ||
-        (options.panelPosition === 'bottom'
-          ? { x: 0, y: Math.round(bounds.height * 0.6) }
-          : { x: bounds.width - 400, y: 0 }),
-    };
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const { bounds, options } = props;
-    const { resizerPanel, resizerNav } = state;
-
-    const isNavHidden = options.isFullscreen || !options.showNav;
-    const isPanelHidden = options.isFullscreen || !options.showPanel;
-
-    const { panelPosition } = options;
-    const isPanelRight = panelPosition === 'right';
-    const isPanelBottom = panelPosition === 'bottom';
-
-    const navX = resizerNav.x;
-    const panelX = resizerPanel.x;
-    const panelY = resizerPanel.y;
-    const minimalMainWidth = !isPanelHidden && isPanelRight ? 400 : 200;
-
-    const mutation = {};
-
-    if (!isNavHidden) {
-      if (bounds.width - minimalMainWidth < navX) {
-        mutation.resizerNav = {
-          x: bounds.width - minimalMainWidth,
-          y: 0,
-        };
-      } else if (bounds.width - minimalMainWidth < 200 || navX < 200) {
-        mutation.resizerNav = {
-          x: 200,
-          y: 0,
-        };
-      }
-    }
-    if (isPanelRight && !isPanelHidden) {
-      if (bounds.width - 200 < panelX || panelX === 0) {
-        mutation.resizerPanel = {
-          x: bounds.width - 200,
-          y: 0,
-        };
-      } else if (navX + 200 > panelX) {
-        mutation.resizerPanel = {
-          x: navX + 200,
-          y: 0,
-        };
-      }
-    }
-
-    if (isPanelBottom && !isPanelHidden) {
-      if (bounds.height - 200 < panelY || panelY === 0) {
-        mutation.resizerPanel = {
-          x: 0,
-          y: bounds.height - 200,
-        };
-      }
-    }
-
-    return mutation.resizerPanel || mutation.resizerNav ? { ...state, ...mutation } : state;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { resizerPanel, resizerNav } = this.state;
-
-    persistence.set({
-      resizerPanel,
-      resizerNav,
-    });
-    const { width: prevWidth, height: prevHeight } = prevProps.bounds;
-    const { bounds, options } = this.props;
-    const { width, height } = bounds;
-    if (width !== prevWidth || height !== prevHeight) {
-      const { panelPosition } = options;
-      const isPanelBottom = panelPosition === 'bottom';
-      if (isPanelBottom) {
-        this.setState({
-          resizerPanel: {
-            x: prevState.resizerPanel.x,
-            y: prevState.resizerPanel.y - (prevHeight - height),
-          },
-        });
-      } else {
-        this.setState({
-          resizerPanel: {
-            x: prevState.resizerPanel.x - (prevWidth - width),
-            y: prevState.resizerPanel.y,
-          },
-        });
-      }
-    }
-  }
-
-  resizeNav = (e, data) => {
-    if (data.deltaX) {
-      this.setState({ resizerNav: { x: data.x, y: data.y } });
-    }
-  };
-
-  resizePanel = (e, data) => {
-    const { options } = this.props;
-
-    if (
-      (data.deltaY && options.panelPosition === 'bottom') ||
-      (data.deltaX && options.panelPosition === 'right')
-    ) {
-      this.setState({ resizerPanel: { x: data.x, y: data.y } });
-    }
-  };
-
-  setDragNav = () => {
-    this.setState({ isDragging: 'nav' });
-  };
-
-  setDragPanel = () => {
-    this.setState({ isDragging: 'panel' });
-  };
-
-  unsetDrag = () => {
-    this.setState({ isDragging: false });
-  };
-
-  render() {
-    const { children, bounds, options, theme, viewMode, docsOnly, panelCount } = this.props;
-    const { isDragging, resizerNav, resizerPanel } = this.state;
-
-    const margin = theme.layoutMargin;
-    const isNavHidden = options.isFullscreen || !options.showNav;
-    const isPanelHidden =
-      options.isFullscreen ||
-      !options.showPanel ||
-      docsOnly ||
-      viewMode !== 'story' ||
-      panelCount === 0;
-    const isFullscreen = options.isFullscreen || (isNavHidden && isPanelHidden);
-    const { isToolshown } = options;
-
-    const { panelPosition } = options;
-    const isPanelBottom = panelPosition === 'bottom';
-    const isPanelRight = panelPosition === 'right';
-
-    const panelX = resizerPanel.x;
-    const navX = resizerNav.x;
-
-    return bounds ? (
-      <Fragment>
-        {isNavHidden ? null : (
-          <Draggable
-            axis="x"
-            position={resizerNav}
-            bounds={{
-              left: 200,
-              top: 0,
-              right: isPanelRight && !isPanelHidden ? panelX - 200 : bounds.width - 200,
-              bottom: 0,
-            }}
-            onStart={this.setDragNav}
-            onDrag={this.resizeNav}
-            onStop={this.unsetDrag}
-          >
-            <Handle shadow="left" axis="x" isDragging={isDragging === 'nav'} />
-          </Draggable>
-        )}
-
-        {isPanelHidden ? null : (
-          <Draggable
-            axis={isPanelBottom ? 'y' : 'x'}
-            position={resizerPanel}
-            bounds={
-              isPanelBottom
-                ? {
-                    left: 0,
-                    top: 200,
-                    right: 0,
-                    bottom: bounds.height - 200,
-                  }
-                : {
-                    left: isNavHidden ? 200 : navX + 200,
-                    top: 0,
-                    right: bounds.width - 200,
-                    bottom: 0,
-                  }
-            }
-            onStart={this.setDragPanel}
-            onDrag={this.resizePanel}
-            onStop={this.unsetDrag}
-          >
-            <Handle
-              isDragging={isDragging === 'panel'}
-              shadow={isPanelBottom ? 'top' : 'left'}
-              style={
-                isPanelBottom
-                  ? {
-                      left: navX + margin,
-                      width: bounds.width - navX - 2 * margin,
-                      marginTop: -margin,
-                    }
-                  : {
-                      marginLeft: -margin,
-                    }
-              }
-              axis={isPanelBottom ? 'y' : 'x'}
-            />
-          </Draggable>
-        )}
-
-        {isDragging ? <HoverBlocker /> : null}
-        {children({
-          mainProps: {
-            viewMode,
-            animate: !isDragging,
-            isFullscreen,
-            position: getMainPosition({ bounds, resizerNav, isNavHidden, isFullscreen, margin }),
-          },
-          previewProps: {
-            viewMode,
-            docsOnly,
-            animate: !isDragging,
-            isFullscreen,
-            isToolshown,
-            position: getPreviewPosition({
-              isFullscreen,
-              isNavHidden,
-              isPanelHidden,
-              resizerNav,
-              resizerPanel,
-              bounds,
-              panelPosition,
-              margin,
-            }),
-          },
-          navProps: {
-            viewMode,
-            animate: !isDragging,
-            hidden: isNavHidden,
-            position: {
-              height: bounds.height,
-              left: 0,
-              top: 0,
-              width: navX + margin,
-            },
-          },
-          panelProps: {
-            viewMode,
-            animate: !isDragging,
-            align: options.panelPosition,
-            hidden: isPanelHidden,
-            position: getPanelPosition({
-              isPanelBottom,
-              isPanelHidden,
-              isNavHidden,
-              bounds,
-              resizerPanel,
-              resizerNav,
-              margin,
-            }),
-          },
-        })}
-      </Fragment>
-    ) : null;
-  }
-}
-Layout.propTypes = {
-  children: PropTypes.func.isRequired,
-  panelCount: PropTypes.number.isRequired,
-  bounds: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-  }).isRequired,
-  options: PropTypes.shape({
-    isFullscreen: PropTypes.bool.isRequired,
-    showNav: PropTypes.bool.isRequired,
-    showPanel: PropTypes.bool.isRequired,
-    panelPosition: PropTypes.string.isRequired,
-    isToolshown: PropTypes.bool.isRequired,
-  }).isRequired,
-  viewMode: PropTypes.string,
-  docsOnly: PropTypes.bool,
-  theme: PropTypes.shape({ layoutMargin: PropTypes.number }).isRequired,
-};
-Layout.defaultProps = {
-  viewMode: undefined,
-  docsOnly: false,
-};
-
-const ThemedLayout = withTheme(Layout);
-
-export { ThemedLayout as Layout };
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
new file mode 100644
index 000000000000..2e693d749f43
--- /dev/null
+++ b/lib/ui/src/components/layout/container.tsx
@@ -0,0 +1,616 @@
+/* eslint-disable react/no-did-update-set-state */
+
+import React, { Component, Fragment, FunctionComponent, CSSProperties, ReactNode } from 'react';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { State } from '@storybook/api';
+import * as persistence from './persist';
+
+import { Draggable, Handle, DraggableData, DraggableEvent } from './draggers';
+
+const Pane = styled.div<{
+  border?: 'left' | 'right' | 'top' | 'bottom';
+  animate?: boolean;
+  top?: boolean;
+  hidden?: boolean;
+  children: ReactNode;
+}>(
+  {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  ({ hidden }) =>
+    hidden
+      ? {
+          opacity: 0,
+        }
+      : {
+          opacity: 1,
+        },
+  ({ top }) =>
+    top
+      ? {
+          zIndex: 9,
+        }
+      : {},
+  ({ border, theme }) => {
+    switch (border) {
+      case 'left': {
+        return {
+          borderLeft: `1px solid ${theme.appBorderColor}`,
+        };
+      }
+      case 'right': {
+        return {
+          borderRight: `1px solid ${theme.appBorderColor}`,
+        };
+      }
+      case 'top': {
+        return {
+          borderTop: `1px solid ${theme.appBorderColor}`,
+        };
+      }
+      case 'bottom': {
+        return {
+          borderBottom: `1px solid ${theme.appBorderColor}`,
+        };
+      }
+      default: {
+        return {};
+      }
+    }
+  },
+  ({ animate }) =>
+    animate
+      ? {
+          transition: ['width', 'height', 'top', 'left', 'background', 'opacity', 'transform']
+            .map((p) => `${p} 0.1s ease-out`)
+            .join(','),
+        }
+      : {}
+);
+
+const Paper = styled.div<{ isFullscreen: boolean }>(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  ({ isFullscreen, theme }) =>
+    isFullscreen
+      ? {
+          boxShadow: 'none',
+          borderRadius: 0,
+        }
+      : {
+          borderRadius: theme.appBorderRadius,
+          overflow: 'hidden',
+          boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
+        }
+);
+
+export const Sidebar: FunctionComponent<{ hidden: boolean; position: CSSProperties }> = ({
+  hidden = false,
+  children,
+  position = undefined,
+  ...props
+}) =>
+  hidden ? null : (
+    <Pane style={position} {...props}>
+      {children}
+    </Pane>
+  );
+
+export const Main: FunctionComponent<{ isFullscreen: boolean; position: CSSProperties }> = ({
+  isFullscreen = false,
+  children,
+  position = undefined,
+  ...props
+}) => (
+  <Pane style={position} top {...props}>
+    <Paper isFullscreen={isFullscreen}>{children}</Paper>
+  </Pane>
+);
+
+export const Preview: FunctionComponent<{ hidden: boolean; position: CSSProperties }> = ({
+  hidden = false,
+  children,
+  position = undefined,
+  ...props
+}) => (
+  <Pane style={position} top hidden={hidden} {...props}>
+    {children}
+  </Pane>
+);
+
+export const Panel: FunctionComponent<{
+  hidden: boolean;
+  position: CSSProperties;
+  align: 'bottom' | 'right';
+}> = ({ hidden = false, children, position = undefined, align = 'right', ...props }) => (
+  <Pane style={position} hidden={hidden} {...props} border={align === 'bottom' ? 'top' : 'left'}>
+    {children}
+  </Pane>
+);
+
+const HoverBlocker = styled.div({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  zIndex: 15,
+  height: '100vh',
+  width: '100vw',
+});
+
+export type PanelPosition = 'right' | 'bottom';
+export interface Bounds {
+  top: number;
+  width: number;
+  left: number;
+  height: number;
+}
+
+export interface Coordinates {
+  x: number;
+  y: number;
+}
+
+const getPreviewPosition = ({
+  panelPosition,
+  isPanelHidden,
+  isNavHidden,
+  isFullscreen,
+  bounds,
+  resizerPanel,
+  resizerNav,
+  margin,
+}: {
+  panelPosition: PanelPosition;
+  isPanelHidden: boolean;
+  isNavHidden: boolean;
+  isFullscreen: boolean;
+  bounds: Bounds;
+  resizerPanel: Coordinates;
+  resizerNav: Coordinates;
+  margin: number;
+}): Bounds => {
+  if (isFullscreen || isPanelHidden) {
+    return {} as Bounds;
+  }
+
+  const navX = isNavHidden ? 0 : resizerNav.x;
+  const panelX = resizerPanel.x;
+  const panelY = resizerPanel.y;
+
+  return panelPosition === 'bottom'
+    ? {
+        height: panelY - margin,
+        left: 0,
+        top: 0,
+        width: bounds.width - navX - 2 * margin,
+      }
+    : {
+        height: bounds.height - 2 * margin,
+        left: 0,
+        top: 0,
+        width: panelX - navX - margin,
+      };
+};
+
+const getMainPosition = ({
+  bounds,
+  resizerNav,
+  isNavHidden,
+  isFullscreen,
+  margin,
+}: {
+  bounds: Bounds;
+  resizerNav: Coordinates;
+  isNavHidden: boolean;
+  isFullscreen: boolean;
+  margin: number;
+}): Bounds => {
+  if (isFullscreen) {
+    return {} as Bounds;
+  }
+
+  const navX = isNavHidden ? 0 : resizerNav.x;
+
+  return {
+    height: bounds.height - margin * 2,
+    left: navX + margin,
+    top: margin,
+    width: bounds.width - navX - margin * 2,
+  };
+};
+
+const getPanelPosition = ({
+  isPanelBottom,
+  isPanelHidden,
+  isNavHidden,
+  bounds,
+  resizerPanel,
+  resizerNav,
+  margin,
+}: {
+  isPanelBottom: boolean;
+  isPanelHidden: boolean;
+  isNavHidden: boolean;
+  bounds: Bounds;
+  resizerPanel: Coordinates;
+  resizerNav: Coordinates;
+  margin: number;
+}): Bounds => {
+  const navX = isNavHidden ? 0 : resizerNav.x;
+  const panelX = resizerPanel.x;
+  const panelY = resizerPanel.y;
+
+  if (isPanelBottom && isPanelHidden) {
+    return {
+      height: bounds.height - panelY - margin,
+      left: 0,
+      top: panelY - margin,
+      width: bounds.width - navX - 2 * margin,
+    };
+  }
+  if (!isPanelBottom && isPanelHidden) {
+    return {
+      height: bounds.height - 2 * margin,
+      left: panelX - navX - margin,
+      top: 0,
+      width: bounds.width - panelX - margin,
+    };
+  }
+
+  return isPanelBottom
+    ? {
+        height: bounds.height - panelY - margin,
+        left: 0,
+        top: panelY - margin,
+        width: bounds.width - navX - 2 * margin,
+      }
+    : {
+        height: bounds.height - 2 * margin,
+        left: panelX - navX - margin,
+        top: 0,
+        width: bounds.width - panelX - margin,
+      };
+};
+
+export interface BasePanelRenderProps {
+  viewMode?: State['viewMode'];
+  animate: boolean;
+  isFullscreen?: boolean;
+  position: Bounds;
+}
+
+export interface LayoutRenderProps {
+  mainProps: BasePanelRenderProps;
+  previewProps: BasePanelRenderProps & {
+    docsOnly: boolean;
+    isToolshown: boolean;
+  };
+  navProps: BasePanelRenderProps & {
+    hidden: boolean;
+  };
+  panelProps: BasePanelRenderProps & {
+    align: PanelPosition;
+    hidden: boolean;
+  };
+}
+
+export interface LayoutState {
+  isDragging: 'nav' | 'panel' | false;
+  resizerNav: Coordinates;
+  resizerPanel: Coordinates;
+}
+export interface LayoutProps {
+  children: (data: LayoutRenderProps) => ReactNode;
+  panelCount: number;
+  bounds: {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+  };
+  options: {
+    isFullscreen: boolean;
+    showNav: boolean;
+    showPanel: boolean;
+    panelPosition: 'bottom' | 'right';
+    isToolshown: boolean;
+  };
+  viewMode: State['viewMode'];
+  docsOnly: boolean;
+  theme: Theme;
+}
+
+class Layout extends Component<LayoutProps, LayoutState> {
+  static defaultProps: Partial<LayoutProps> = {
+    viewMode: undefined,
+    docsOnly: false,
+  };
+
+  constructor(props: LayoutProps) {
+    super(props);
+
+    const { bounds, options } = props;
+
+    const { resizerNav, resizerPanel } = persistence.get();
+
+    this.state = {
+      isDragging: false,
+      resizerNav: resizerNav || { x: 200, y: 0 },
+      resizerPanel:
+        resizerPanel ||
+        (options.panelPosition === 'bottom'
+          ? { x: 0, y: Math.round(bounds.height * 0.6) }
+          : { x: bounds.width - 400, y: 0 }),
+    };
+  }
+
+  static getDerivedStateFromProps(props: LayoutProps, state: LayoutState) {
+    const { bounds, options } = props;
+    const { resizerPanel, resizerNav } = state;
+
+    const isNavHidden = options.isFullscreen || !options.showNav;
+    const isPanelHidden = options.isFullscreen || !options.showPanel;
+
+    const { panelPosition } = options;
+    const isPanelRight = panelPosition === 'right';
+    const isPanelBottom = panelPosition === 'bottom';
+
+    const navX = resizerNav.x;
+    const panelX = resizerPanel.x;
+    const panelY = resizerPanel.y;
+    const minimalMainWidth = !isPanelHidden && isPanelRight ? 400 : 200;
+
+    const mutation = {} as LayoutState;
+
+    if (!isNavHidden) {
+      if (bounds.width - minimalMainWidth < navX) {
+        mutation.resizerNav = {
+          x: bounds.width - minimalMainWidth,
+          y: 0,
+        };
+      } else if (bounds.width - minimalMainWidth < 200 || navX < 200) {
+        mutation.resizerNav = {
+          x: 200,
+          y: 0,
+        };
+      }
+    }
+    if (isPanelRight && !isPanelHidden) {
+      if (bounds.width - 200 < panelX || panelX === 0) {
+        mutation.resizerPanel = {
+          x: bounds.width - 200,
+          y: 0,
+        };
+      } else if (navX + 200 > panelX) {
+        mutation.resizerPanel = {
+          x: navX + 200,
+          y: 0,
+        };
+      }
+    }
+
+    if (isPanelBottom && !isPanelHidden) {
+      if (bounds.height - 200 < panelY || panelY === 0) {
+        mutation.resizerPanel = {
+          x: 0,
+          y: bounds.height - 200,
+        };
+      }
+    }
+
+    return mutation.resizerPanel || mutation.resizerNav ? { ...state, ...mutation } : state;
+  }
+
+  componentDidUpdate(prevProps: LayoutProps, prevState: LayoutState) {
+    const { resizerPanel, resizerNav } = this.state;
+
+    persistence.set({
+      resizerPanel,
+      resizerNav,
+    });
+    const { width: prevWidth, height: prevHeight } = prevProps.bounds;
+    const { bounds, options } = this.props;
+    const { width, height } = bounds;
+    if (width !== prevWidth || height !== prevHeight) {
+      const { panelPosition } = options;
+      const isPanelBottom = panelPosition === 'bottom';
+      if (isPanelBottom) {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x,
+            y: prevState.resizerPanel.y - (prevHeight - height),
+          },
+        });
+      } else {
+        this.setState({
+          resizerPanel: {
+            x: prevState.resizerPanel.x - (prevWidth - width),
+            y: prevState.resizerPanel.y,
+          },
+        });
+      }
+    }
+  }
+
+  resizeNav = (e: DraggableEvent, data: DraggableData) => {
+    if (data.deltaX) {
+      this.setState({ resizerNav: { x: data.x, y: data.y } });
+    }
+  };
+
+  resizePanel = (e: DraggableEvent, data: DraggableData) => {
+    const { options } = this.props;
+
+    if (
+      (data.deltaY && options.panelPosition === 'bottom') ||
+      (data.deltaX && options.panelPosition === 'right')
+    ) {
+      this.setState({ resizerPanel: { x: data.x, y: data.y } });
+    }
+  };
+
+  setDragNav = () => {
+    this.setState({ isDragging: 'nav' });
+  };
+
+  setDragPanel = () => {
+    this.setState({ isDragging: 'panel' });
+  };
+
+  unsetDrag = () => {
+    this.setState({ isDragging: false });
+  };
+
+  render() {
+    const { children, bounds, options, theme, viewMode, docsOnly, panelCount } = this.props;
+    const { isDragging, resizerNav, resizerPanel } = this.state;
+
+    const margin = theme.layoutMargin;
+    const isNavHidden = options.isFullscreen || !options.showNav;
+    const isPanelHidden =
+      options.isFullscreen ||
+      !options.showPanel ||
+      docsOnly ||
+      viewMode !== 'story' ||
+      panelCount === 0;
+    const isFullscreen = options.isFullscreen || (isNavHidden && isPanelHidden);
+    const { isToolshown } = options;
+
+    const { panelPosition } = options;
+    const isPanelBottom = panelPosition === 'bottom';
+    const isPanelRight = panelPosition === 'right';
+
+    const panelX = resizerPanel.x;
+    const navX = resizerNav.x;
+
+    return bounds ? (
+      <Fragment>
+        {isNavHidden ? null : (
+          <Draggable
+            axis="x"
+            position={resizerNav}
+            bounds={{
+              left: 200,
+              top: 0,
+              right: isPanelRight && !isPanelHidden ? panelX - 200 : bounds.width - 200,
+              bottom: 0,
+            }}
+            onStart={this.setDragNav}
+            onDrag={this.resizeNav}
+            onStop={this.unsetDrag}
+          >
+            <Handle axis="x" isDragging={isDragging === 'nav'} />
+          </Draggable>
+        )}
+
+        {isPanelHidden ? null : (
+          <Draggable
+            axis={isPanelBottom ? 'y' : 'x'}
+            position={resizerPanel}
+            bounds={
+              isPanelBottom
+                ? {
+                    left: 0,
+                    top: 200,
+                    right: 0,
+                    bottom: bounds.height - 200,
+                  }
+                : {
+                    left: isNavHidden ? 200 : navX + 200,
+                    top: 0,
+                    right: bounds.width - 200,
+                    bottom: 0,
+                  }
+            }
+            onStart={this.setDragPanel}
+            onDrag={this.resizePanel}
+            onStop={this.unsetDrag}
+          >
+            <Handle
+              isDragging={isDragging === 'panel'}
+              style={
+                isPanelBottom
+                  ? {
+                      left: navX + margin,
+                      width: bounds.width - navX - 2 * margin,
+                      marginTop: -margin,
+                    }
+                  : {
+                      marginLeft: -margin,
+                    }
+              }
+              axis={isPanelBottom ? 'y' : 'x'}
+            />
+          </Draggable>
+        )}
+
+        {isDragging ? <HoverBlocker /> : null}
+        {children({
+          mainProps: {
+            viewMode,
+            animate: !isDragging,
+            isFullscreen,
+            position: getMainPosition({ bounds, resizerNav, isNavHidden, isFullscreen, margin }),
+          },
+          previewProps: {
+            viewMode,
+            docsOnly,
+            animate: !isDragging,
+            isFullscreen,
+            isToolshown,
+            position: getPreviewPosition({
+              isFullscreen,
+              isNavHidden,
+              isPanelHidden,
+              resizerNav,
+              resizerPanel,
+              bounds,
+              panelPosition,
+              margin,
+            }),
+          },
+          navProps: {
+            viewMode,
+            animate: !isDragging,
+            hidden: isNavHidden,
+            position: {
+              height: bounds.height,
+              left: 0,
+              top: 0,
+              width: navX + margin,
+            },
+          },
+          panelProps: {
+            viewMode,
+            animate: !isDragging,
+            align: options.panelPosition,
+            hidden: isPanelHidden,
+            position: getPanelPosition({
+              isPanelBottom,
+              isPanelHidden,
+              isNavHidden,
+              bounds,
+              resizerPanel,
+              resizerNav,
+              margin,
+            }),
+          },
+        })}
+      </Fragment>
+    ) : null;
+  }
+}
+
+const ThemedLayout = withTheme(Layout);
+
+export { ThemedLayout as Layout };
diff --git a/lib/ui/src/components/layout/desktop.js b/lib/ui/src/components/layout/desktop.js
deleted file mode 100644
index 5e2cc88a25f2..000000000000
--- a/lib/ui/src/components/layout/desktop.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-
-import * as S from './container';
-
-const Desktop = React.memo(
-  ({
-    Panel,
-    Nav,
-    Preview,
-    Notifications,
-    pages,
-    options,
-    viewMode,
-    width,
-    height,
-    panelCount,
-    docsOnly,
-  }) => (
-    <Fragment>
-      <Notifications
-        placement={{
-          position: 'fixed',
-          bottom: 20,
-          left: 20,
-        }}
-      />
-      {width && height ? (
-        <S.Layout
-          options={options}
-          bounds={{ width, height }}
-          viewMode={viewMode}
-          docsOnly={docsOnly}
-          panelCount={panelCount}
-        >
-          {({ navProps, mainProps, panelProps, previewProps }) => (
-            <Fragment>
-              <S.Nav {...navProps}>
-                <Nav debug={navProps} />
-              </S.Nav>
-              <S.Main {...mainProps}>
-                <S.Preview {...previewProps} hidden={viewMode === 'settings'}>
-                  <Preview id="main" debug={previewProps} />
-                </S.Preview>
-
-                <S.Panel {...panelProps} hidden={viewMode !== 'story'}>
-                  <Panel debug={panelProps} />
-                </S.Panel>
-
-                {pages.map(({ key, route: Route, render: content }) => (
-                  <Route key={key}>{content()}</Route>
-                ))}
-              </S.Main>
-            </Fragment>
-          )}
-        </S.Layout>
-      ) : (
-        <div title={JSON.stringify({ width, height })} />
-      )}
-    </Fragment>
-  )
-);
-
-Desktop.displayName = 'DesktopLayout';
-Desktop.propTypes = {
-  width: PropTypes.number,
-  panelCount: PropTypes.number.isRequired,
-  height: PropTypes.number,
-  Nav: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Preview: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Panel: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Notifications: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  pages: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      route: PropTypes.func.isRequired,
-      render: PropTypes.func.isRequired,
-    })
-  ).isRequired,
-  options: PropTypes.shape({
-    isFullscreen: PropTypes.bool.isRequired,
-    showNav: PropTypes.bool.isRequired,
-    showPanel: PropTypes.bool.isRequired,
-    panelPosition: PropTypes.string.isRequired,
-    isToolshown: PropTypes.bool.isRequired,
-  }).isRequired,
-  viewMode: PropTypes.string,
-  docsOnly: PropTypes.bool,
-};
-Desktop.defaultProps = {
-  viewMode: undefined,
-  docsOnly: false,
-  height: 0,
-  width: 0,
-};
-
-export { Desktop };
diff --git a/lib/ui/src/components/layout/desktop.stories.tsx b/lib/ui/src/components/layout/desktop.stories.tsx
new file mode 100644
index 000000000000..044b2f1e2b11
--- /dev/null
+++ b/lib/ui/src/components/layout/desktop.stories.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { Fragment } from 'react';
+import { withKnobs, boolean, number } from '@storybook/addon-knobs';
+import { DecoratorFn } from '@storybook/react';
+
+import { isChromatic } from 'chromatic/isChromatic';
+
+import { Desktop, DesktopProps } from './desktop';
+
+import { store } from './persist';
+import { mockProps, realProps, MockPage } from './app.mockdata';
+
+export default {
+  title: 'UI/Layout/Desktop',
+  component: Desktop,
+  parameters: { passArgsFirst: false },
+  decorators: [
+    withKnobs,
+    ((StoryFn, c) => {
+      const mocked = boolean('mock', true);
+      const height = number('height', 900);
+      const width = number('width', 1200);
+
+      if (isChromatic) {
+        store.local.set(`storybook-layout`, {});
+      }
+
+      const props = {
+        height,
+        width,
+        ...(mocked ? mockProps : realProps),
+      };
+
+      return (
+        <div style={{ minHeight: 900, minWidth: 1200 }}>
+          <StoryFn props={props} {...c} />;
+        </div>
+      );
+    }) as DecoratorFn,
+  ],
+};
+
+export const Default = ({ props }: { props: DesktopProps }) => <Desktop {...props} />;
+export const NoAddons = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} panelCount={0} />
+);
+export const NoSidebar = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} options={{ ...props.options, showNav: false }} />
+);
+export const NoPanel = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} options={{ ...props.options, showPanel: false }} />
+);
+export const BottomPanel = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} options={{ ...props.options, panelPosition: 'bottom' }} />
+);
+export const Fullscreen = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} options={{ ...props.options, isFullscreen: true }} />
+);
+export const NoPanelNoSidebar = ({ props }: { props: DesktopProps }) => (
+  <Desktop {...props} options={{ ...props.options, showPanel: false, showNav: false }} />
+);
+export const Page = ({ props }: { props: DesktopProps }) => (
+  <Desktop
+    {...props}
+    pages={[
+      {
+        key: 'settings',
+        route: ({ children }) => <Fragment>{children}</Fragment>,
+        render: () => <MockPage />,
+      },
+    ]}
+    viewMode="settings"
+  />
+);
diff --git a/lib/ui/src/components/layout/desktop.tsx b/lib/ui/src/components/layout/desktop.tsx
new file mode 100644
index 000000000000..5164c73b24da
--- /dev/null
+++ b/lib/ui/src/components/layout/desktop.tsx
@@ -0,0 +1,89 @@
+import React, { Fragment, ComponentType, FunctionComponent } from 'react';
+
+import { State } from '@storybook/api';
+import * as S from './container';
+
+export interface DesktopProps {
+  width: number;
+  panelCount: number;
+  height: number;
+  Sidebar: ComponentType<any>;
+  Preview: ComponentType<any>;
+  Panel: ComponentType<any>;
+  Notifications: ComponentType<any>;
+  pages: {
+    key: string;
+    route: FunctionComponent;
+    render: ComponentType;
+  }[];
+  options: State['layout'];
+  viewMode: string;
+  docsOnly: boolean;
+}
+
+const Desktop = Object.assign(
+  React.memo<DesktopProps>(
+    ({
+      Panel,
+      Sidebar,
+      Preview,
+      Notifications,
+      pages,
+      options,
+      viewMode = undefined,
+      width = 0,
+      height = 0,
+      panelCount,
+      docsOnly = false,
+    }) => (
+      <Fragment>
+        <Notifications
+          placement={{
+            position: 'fixed',
+            bottom: 20,
+            left: 20,
+          }}
+        />
+        {width && height ? (
+          <S.Layout
+            options={options}
+            bounds={{ width, height, top: 0, left: 0 }}
+            viewMode={viewMode}
+            docsOnly={!!docsOnly}
+            panelCount={panelCount}
+          >
+            {({ navProps, mainProps, panelProps, previewProps }) => (
+              <Fragment>
+                <S.Sidebar {...navProps}>
+                  <Sidebar />
+                </S.Sidebar>
+                <S.Main {...mainProps} isFullscreen={!!mainProps.isFullscreen}>
+                  <S.Preview {...previewProps} hidden={viewMode === 'settings'}>
+                    <Preview id="main" />
+                  </S.Preview>
+
+                  <S.Panel {...panelProps} hidden={viewMode !== 'story' || docsOnly}>
+                    <Panel />
+                  </S.Panel>
+
+                  {pages.map(({ key, route: Route, render: Content }) => (
+                    <Route key={key}>
+                      <Content />
+                    </Route>
+                  ))}
+                </S.Main>
+              </Fragment>
+            )}
+          </S.Layout>
+        ) : (
+          <div title={JSON.stringify({ width, height })} />
+        )}
+      </Fragment>
+    )
+  ),
+  {
+    displayName: 'DesktopLayout',
+  }
+);
+
+export { Desktop };
diff --git a/lib/ui/src/components/layout/draggers.js b/lib/ui/src/components/layout/draggers.js
deleted file mode 100644
index b4e6e8a7be80..000000000000
--- a/lib/ui/src/components/layout/draggers.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Draggable from 'react-draggable';
-import { styled } from '@storybook/theming';
-
-const Handle = styled.div(
-  ({ theme, isDragging }) => ({
-    zIndex: 10,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    color: isDragging ? theme.color.secondary : theme.appBorderColor,
-
-    overflow: 'hidden',
-    transition:
-      'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
-    '&:hover': {
-      color: theme.color.secondary,
-    },
-  }),
-  ({ axis }) => ({
-    cursor: axis === 'x' ? 'col-resize' : 'row-resize',
-  }),
-  ({ theme, axis }) =>
-    axis === 'x'
-      ? {
-          height: '100%',
-          width: theme.layoutMargin,
-          marginLeft: 0,
-        }
-      : {
-          height: theme.layoutMargin,
-          width: '100%',
-          marginTop: 0,
-        },
-  ({ shadow, isDragging }) => {
-    if (shadow === 'top') {
-      const style = {
-        backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
-        backgroundSize: '100% 50px',
-        backgroundPosition: '50% 0',
-        backgroundRepeat: 'no-repeat',
-      };
-      return isDragging
-        ? style
-        : {
-            ...style,
-            backgroundPosition: '50% 10px',
-            '&:hover': style,
-          };
-    }
-    if (shadow === 'left') {
-      const style = {
-        backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
-        backgroundSize: '50px 100%',
-        backgroundPosition: '0 50%',
-        backgroundRepeat: 'no-repeat',
-      };
-      return isDragging
-        ? style
-        : {
-            ...style,
-            backgroundPosition: '10px 50%',
-            '&:hover': style,
-          };
-    }
-    return {};
-  }
-);
-
-export { Draggable, Handle };
diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
new file mode 100644
index 000000000000..bc3b2bb5b0b2
--- /dev/null
+++ b/lib/ui/src/components/layout/draggers.tsx
@@ -0,0 +1,75 @@
+import Draggable, { DraggableEvent, DraggableData } from 'react-draggable';
+import { styled } from '@storybook/theming';
+
+export type Axis = 'x' | 'y';
+
+const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
+  ({ theme, isDragging }) => ({
+    zIndex: 10,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    color: isDragging ? theme.color.secondary : theme.appBorderColor,
+
+    overflow: 'hidden',
+    transition:
+      'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
+    '&:hover': {
+      color: theme.color.secondary,
+    },
+  }),
+  ({ axis }) => ({
+    cursor: axis === 'x' ? 'col-resize' : 'row-resize',
+  }),
+  ({ theme, axis }) =>
+    axis === 'x'
+      ? {
+          height: '100%',
+          width: theme.layoutMargin,
+          marginLeft: 0,
+        }
+      : {
+          height: theme.layoutMargin,
+          width: '100%',
+          marginTop: 0,
+        },
+  ({ axis, isDragging }) => {
+    if (axis === 'y') {
+      const style = {
+        backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
+        backgroundSize: '100% 50px',
+        backgroundPosition: '50% 0',
+        backgroundRepeat: 'no-repeat',
+      };
+      return isDragging
+        ? style
+        : {
+            ...style,
+            backgroundPosition: '50% 10px',
+            '&:hover': style,
+          };
+    }
+    if (axis === 'x') {
+      const style = {
+        backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
+        backgroundSize: '50px 100%',
+        backgroundPosition: '0 50%',
+        backgroundRepeat: 'no-repeat',
+      };
+      return isDragging
+        ? style
+        : {
+            ...style,
+            backgroundPosition: '10px 50%',
+            '&:hover': style,
+          };
+    }
+    return {};
+  }
+);
+
+export { Draggable, Handle, DraggableEvent, DraggableData };
diff --git a/lib/ui/src/components/layout/layout.stories.js b/lib/ui/src/components/layout/layout.stories.js
deleted file mode 100644
index 29301d3d6600..000000000000
--- a/lib/ui/src/components/layout/layout.stories.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import { setInterval } from 'global';
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { storiesOf } from '@storybook/react';
-import { withKnobs, boolean, number } from '@storybook/addon-knobs';
-import { styled } from '@storybook/theming';
-
-import { isChromatic } from 'storybook-chromatic/isChromatic';
-
-import { Desktop } from './desktop';
-import { Mobile } from './mobile';
-
-import Sidebar from '../sidebar/Sidebar';
-import Panel from '../panel/panel';
-import { Preview } from '../preview/preview';
-
-import { panels } from '../panel/panel.stories';
-import { previewProps } from '../preview/preview.stories';
-
-import { mockDataset } from '../sidebar/treeview/treeview.mockdata';
-import { store } from './persist';
-
-const realNavProps = {
-  title: 'Title',
-  url: 'https://example.com',
-  stories: mockDataset.withRoot,
-  menu: [],
-};
-
-const PlaceholderBlock = styled.div(({ color }) => ({
-  background: color || 'hotpink',
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-}));
-
-class PlaceholderClock extends Component {
-  state = {
-    count: 1,
-  };
-
-  componentDidMount() {
-    this.interval = setInterval(() => {
-      const { count } = this.state;
-      this.setState({ count: count + 1 });
-    }, 1000);
-  }
-
-  componentWillUnmount() {
-    const { interval } = this;
-    clearInterval(interval);
-  }
-
-  render() {
-    const { children, color } = this.props;
-    const { count } = this.state;
-
-    return (
-      <PlaceholderBlock color={color}>
-        <h2
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            right: 0,
-            color: 'rgba(0,0,0,0.2)',
-            fontSize: '150px',
-            lineHeight: '150px',
-            margin: '-20px',
-          }}
-        >
-          {count}
-        </h2>
-        {children}
-      </PlaceholderBlock>
-    );
-  }
-}
-PlaceholderClock.propTypes = {
-  children: PropTypes.node.isRequired,
-  color: PropTypes.string.isRequired,
-};
-
-const MockNav = props => (
-  <PlaceholderClock color="hotpink">
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </PlaceholderClock>
-);
-const MockPreview = props => (
-  <PlaceholderClock color="deepskyblue">
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </PlaceholderClock>
-);
-const MockPanel = props => (
-  <PlaceholderClock color="orangered">
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </PlaceholderClock>
-);
-const MockPage = props => (
-  <PlaceholderClock color="cyan">
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </PlaceholderClock>
-);
-
-const mockProps = {
-  Nav: MockNav,
-  Preview: MockPreview,
-  Panel: MockPanel,
-  Notifications: () => null,
-  pages: [],
-  options: { isFullscreen: false, showNav: true, showPanel: true, panelPosition: 'right' },
-  path: '/story/UI-DesktopLayout-noNav',
-  viewMode: 'story',
-  storyId: 'UI-DesktopLayout-noNav',
-  panelCount: 2,
-};
-
-const realProps = {
-  Nav: () => <Sidebar {...realNavProps} />,
-  Preview: () => <Preview {...previewProps} />,
-  Notifications: () => null,
-  Panel: () => (
-    <Panel
-      panels={panels}
-      actions={{ onSelect: () => {}, toggleVisibility: () => {}, togglePosition: () => {} }}
-      selectedPanel="test2"
-    />
-  ),
-  pages: [],
-  options: { isFullscreen: false, showNav: true, showPanel: true, panelPosition: 'right' },
-  path: '/story/UI-DesktopLayout-noNav',
-  viewMode: 'story',
-  storyId: 'UI-DesktopLayout-noNav',
-  panelCount: 2,
-};
-
-storiesOf('UI/Layout/Desktop', module)
-  .addParameters({
-    component: Desktop,
-  })
-  .addDecorator(withKnobs)
-  .addDecorator(storyFn => {
-    const mocked = boolean('mock', true);
-    const height = number('height', 1200);
-    const width = number('width', 1200);
-
-    if (isChromatic) {
-      store.local.set(`storybook-layout`, {});
-    }
-
-    const props = {
-      height,
-      width,
-      ...(mocked ? mockProps : realProps),
-    };
-
-    return <div style={{ minHeight: 1200, minWidth: 1200 }}>{storyFn({ props })}</div>;
-  })
-  .add('default', ({ props }) => <Desktop {...props} />)
-  .add('no addons', ({ props }) => <Desktop {...props} panelCount={0} />)
-  .add('no Nav', ({ props }) => (
-    <Desktop {...props} options={{ ...props.options, showNav: false }} />
-  ))
-  .add('no Panel', ({ props }) => (
-    <Desktop {...props} options={{ ...props.options, showPanel: false }} />
-  ))
-  .add('bottom Panel', ({ props }) => (
-    <Desktop {...props} options={{ ...props.options, panelPosition: 'bottom' }} />
-  ))
-  .add('full', ({ props }) => (
-    <Desktop {...props} options={{ ...props.options, isFullscreen: true }} />
-  ))
-  .add('no Panel, no Nav', ({ props }) => (
-    <Desktop {...props} options={{ ...props.options, showPanel: false, showNav: false }} />
-  ))
-  .add('page', ({ props }) => (
-    <Desktop
-      {...props}
-      pages={[
-        {
-          key: 'settings',
-          // eslint-disable-next-line react/prop-types
-          route: ({ children }) => <Fragment>{children}</Fragment>,
-          render: () => <MockPage />,
-        },
-      ]}
-      viewMode="settings"
-    />
-  ));
-
-storiesOf('UI/Layout/Mobile', module)
-  .addParameters({
-    component: Mobile,
-  })
-  .addDecorator(withKnobs)
-  .addDecorator(storyFn => {
-    const mocked = boolean('mock', true);
-
-    const props = {
-      ...(mocked ? mockProps : realProps),
-    };
-
-    return storyFn({ props });
-  })
-  .add('initial 0', ({ props }) => <Mobile {...props} options={{ initialActive: 0 }} />)
-  .add('initial 1', ({ props }) => <Mobile {...props} options={{ initialActive: 1 }} />)
-  .add('initial 2', ({ props }) => <Mobile {...props} options={{ initialActive: 2 }} />)
-  .add('page', ({ props }) => (
-    <Mobile
-      {...props}
-      options={{ initialActive: 1 }}
-      pages={[
-        {
-          key: 'settings',
-          // eslint-disable-next-line react/prop-types
-          route: ({ children }) => <Fragment>{children}</Fragment>,
-          render: () => <MockPage />,
-        },
-      ]}
-      viewMode="settings"
-    />
-  ));
diff --git a/lib/ui/src/components/layout/mobile.js b/lib/ui/src/components/layout/mobile.js
deleted file mode 100644
index 467cdf30e4fb..000000000000
--- a/lib/ui/src/components/layout/mobile.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, { Component, Children } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-import { TabButton } from '@storybook/components';
-import { Root } from './container';
-
-const Pane = styled.div(
-  {
-    transition: 'transform .2s ease',
-    position: 'absolute',
-    top: 0,
-    height: '100%',
-    overflow: 'auto',
-  },
-  ({ theme }) => ({
-    background: theme.background.content,
-    '&:nth-of-type(1)': {
-      borderRight: `1px solid ${theme.appBorderColor}`,
-    },
-    '&:nth-of-type(3)': {
-      borderLeft: `1px solid ${theme.appBorderColor}`,
-    },
-  }),
-  ({ index }) => {
-    switch (index) {
-      case 0: {
-        return {
-          width: '80vw',
-          transform: 'translateX(-80vw)',
-          left: 0,
-        };
-      }
-      case 1: {
-        return {
-          width: '100%',
-          transform: 'translateX(0) scale(1)',
-          left: 0,
-        };
-      }
-      case 2: {
-        return {
-          width: '80vw',
-          transform: 'translateX(80vw)',
-          right: 0,
-        };
-      }
-      default: {
-        return {};
-      }
-    }
-  },
-  ({ active, index }) => {
-    switch (true) {
-      case index === 0 && active === 0: {
-        return {
-          transform: 'translateX(-0px)',
-        };
-      }
-      case index === 1 && active === 0: {
-        return {
-          transform: 'translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
-        };
-      }
-      case index === 1 && active === 2: {
-        return {
-          transform: 'translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
-        };
-      }
-      case index === 2 && active === 2: {
-        return {
-          transform: 'translateX(0px)',
-        };
-      }
-      default: {
-        return {};
-      }
-    }
-  }
-);
-
-const Panels = React.memo(({ children, active }) => (
-  <Panels.Container>
-    {Children.toArray(children).map((item, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Pane key={index} index={index} active={active}>
-        {item}
-      </Pane>
-    ))}
-  </Panels.Container>
-));
-Panels.displayName = 'Panels';
-Panels.propTypes = {
-  children: PropTypes.node.isRequired,
-  active: PropTypes.number.isRequired,
-};
-
-Panels.Container = styled.div({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100vw',
-  height: 'calc(100% - 40px)',
-});
-
-const Bar = styled.nav(
-  {
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    width: '100vw',
-    height: 40,
-    display: 'flex',
-    boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
-
-    '& > *': {
-      flex: 1,
-    },
-  },
-  ({ theme }) => ({
-    background: theme.barBg,
-  })
-);
-
-class Mobile extends Component {
-  constructor(props) {
-    super();
-
-    const { options } = props;
-    this.state = {
-      active: options.initialActive || 0,
-    };
-  }
-
-  render() {
-    const { Nav, Preview, Panel, Notifications, pages, viewMode, options } = this.props;
-    const { active } = this.state;
-
-    return (
-      <Root>
-        <Notifications
-          placement={{
-            position: 'fixed',
-            bottom: 60,
-            left: 20,
-            right: 20,
-          }}
-        />
-
-        <Panels active={active}>
-          <Nav />
-          <div>
-            <div hidden={!viewMode}>
-              <Preview
-                isToolshown={options.isToolshown}
-                id="main"
-                viewMode={viewMode}
-                debug={options}
-              />
-            </div>
-            {pages.map(({ key, route: Route, render: content }) => (
-              <Route key={key}>{content()}</Route>
-            ))}
-          </div>
-          <Panel hidden={!viewMode} />
-        </Panels>
-        <Bar active={active}>
-          <TabButton onClick={() => this.setState({ active: 0 })} active={active === 0}>
-            Sidebar
-          </TabButton>
-          <TabButton
-            onClick={() => this.setState({ active: 1 })}
-            active={active === 1 || active === false}
-          >
-            {viewMode ? 'Canvas' : null}
-            {pages.map(({ key, route: Route }) => (
-              <Route key={key}>{key}</Route>
-            ))}
-          </TabButton>
-          {viewMode ? (
-            <TabButton onClick={() => this.setState({ active: 2 })} active={active === 2}>
-              Addons
-            </TabButton>
-          ) : null}
-        </Bar>
-      </Root>
-    );
-  }
-}
-
-Mobile.displayName = 'MobileLayout';
-Mobile.propTypes = {
-  Nav: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Preview: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Panel: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  Notifications: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
-  pages: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      route: PropTypes.func.isRequired,
-      render: PropTypes.func.isRequired,
-    })
-  ).isRequired,
-  viewMode: PropTypes.string,
-  options: PropTypes.shape({
-    initialActive: PropTypes.number,
-    isToolshown: PropTypes.bool,
-  }).isRequired,
-};
-Mobile.defaultProps = {
-  viewMode: undefined,
-};
-
-export { Mobile };
diff --git a/lib/ui/src/components/layout/mobile.stories.tsx b/lib/ui/src/components/layout/mobile.stories.tsx
new file mode 100644
index 000000000000..782d18ff7c56
--- /dev/null
+++ b/lib/ui/src/components/layout/mobile.stories.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { Fragment } from 'react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { ActiveTabs } from '@storybook/api';
+import { DecoratorFn } from '@storybook/react';
+
+import { Mobile, MobileProps } from './mobile';
+
+import { mockProps, realProps, MockPage } from './app.mockdata';
+
+export default {
+  title: 'UI/Layout/Mobile',
+  component: Mobile,
+  parameters: { passArgsFirst: false },
+  decorators: [
+    withKnobs,
+    ((StoryFn, c) => {
+      const mocked = boolean('mock', true);
+
+      const props = {
+        ...(mocked ? mockProps : realProps),
+      };
+
+      return <StoryFn props={props} {...c} />;
+    }) as DecoratorFn,
+  ],
+};
+
+export const InitialSidebar = ({ props }: { props: MobileProps }) => (
+  <Mobile {...props} options={{ ...props.options, initialActive: ActiveTabs.SIDEBAR }} />
+);
+export const InitialCanvas = ({ props }: { props: MobileProps }) => (
+  <Mobile {...props} options={{ ...props.options, initialActive: ActiveTabs.CANVAS }} />
+);
+export const InitialAddons = ({ props }: { props: MobileProps }) => (
+  <Mobile {...props} options={{ ...props.options, initialActive: ActiveTabs.ADDONS }} />
+);
+export const Page = ({ props }: { props: MobileProps }) => (
+  <Mobile
+    {...props}
+    options={{ ...props.options, initialActive: ActiveTabs.CANVAS }}
+    pages={[
+      {
+        key: 'settings',
+        route: ({ children }) => <Fragment>{children}</Fragment>,
+        render: () => <MockPage />,
+      },
+    ]}
+    viewMode="settings"
+  />
+);
diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
new file mode 100644
index 000000000000..7b148862513c
--- /dev/null
+++ b/lib/ui/src/components/layout/mobile.tsx
@@ -0,0 +1,210 @@
+import React, { Component, Children, ComponentType, FunctionComponent, ReactNode } from 'react';
+import { State, ActiveTabs } from '@storybook/api';
+import { styled } from '@storybook/theming';
+
+import { TabButton } from '@storybook/components';
+import { Root } from './Root';
+
+export type ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
+
+const { SIDEBAR, CANVAS, ADDONS } = ActiveTabs;
+
+const Pane = styled.div<{ index: number; active: ActiveTabsType }>(
+  {
+    transition: 'transform .2s ease',
+    position: 'absolute',
+    top: 0,
+    height: '100%',
+    overflow: 'auto',
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    '&:nth-of-type(1)': {
+      borderRight: `1px solid ${theme.appBorderColor}`,
+    },
+    '&:nth-of-type(3)': {
+      borderLeft: `1px solid ${theme.appBorderColor}`,
+    },
+  }),
+  ({ index }) => {
+    switch (index) {
+      case 0: {
+        return {
+          width: '80vw',
+          transform: 'translateX(-80vw)',
+          left: 0,
+        };
+      }
+      case 1: {
+        return {
+          width: '100%',
+          transform: 'translateX(0) scale(1)',
+          left: 0,
+        };
+      }
+      case 2: {
+        return {
+          width: '80vw',
+          transform: 'translateX(80vw)',
+          right: 0,
+        };
+      }
+      default: {
+        return {};
+      }
+    }
+  },
+  ({ active, index }) => {
+    switch (true) {
+      case index === 0 && active === SIDEBAR: {
+        return {
+          transform: 'translateX(-0px)',
+        };
+      }
+      case index === 1 && active === SIDEBAR: {
+        return {
+          transform: 'translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
+        };
+      }
+      case index === 1 && active === ADDONS: {
+        return {
+          transform: 'translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
+        };
+      }
+      case index === 2 && active === ADDONS: {
+        return {
+          transform: 'translateX(0px)',
+        };
+      }
+      default: {
+        return {};
+      }
+    }
+  }
+);
+
+const Panels = React.memo((({ children, active }) => (
+  <PanelsContainer>
+    {Children.toArray(children).map((item, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <Pane key={index} index={index} active={active}>
+        {item}
+      </Pane>
+    ))}
+  </PanelsContainer>
+)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode }>);
+Panels.displayName = 'Panels';
+
+const PanelsContainer = styled.div({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: 'calc(100% - 40px)',
+});
+
+const Bar = styled.nav(
+  {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    width: '100vw',
+    height: 40,
+    display: 'flex',
+    boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
+
+    '& > *': {
+      flex: 1,
+    },
+  },
+  ({ theme }) => ({
+    background: theme.barBg,
+  })
+);
+
+export interface Page {
+  key: string;
+  route: FunctionComponent;
+  render: FunctionComponent;
+}
+
+export interface MobileProps {
+  options: {
+    initialActive: ActiveTabsType;
+    isToolshown: boolean;
+  };
+  Sidebar: ComponentType<any>;
+  Preview: ComponentType<any>;
+  Panel: ComponentType<any>;
+  Notifications: ComponentType<any>;
+
+  viewMode: State['viewMode'];
+
+  pages: Page[];
+}
+
+export interface MobileState {
+  active: ActiveTabsType;
+}
+
+class Mobile extends Component<MobileProps, MobileState> {
+  constructor(props: MobileProps) {
+    super(props);
+
+    const { options } = props;
+    this.state = {
+      active: options.initialActive || SIDEBAR,
+    };
+  }
+
+  render() {
+    const { Sidebar, Preview, Panel, Notifications, pages, viewMode, options } = this.props;
+    const { active } = this.state;
+
+    return (
+      <Root>
+        <Notifications
+          placement={{
+            position: 'fixed',
+            bottom: 60,
+            left: 20,
+            right: 20,
+          }}
+        />
+
+        <Panels active={active}>
+          <Sidebar />
+          <div>
+            <div hidden={!viewMode}>
+              <Preview isToolshown={options.isToolshown} id="main" viewMode={viewMode} />
+            </div>
+            {pages.map(({ key, route: Route, render: Content }) => (
+              <Route key={key}>
+                <Content />
+              </Route>
+            ))}
+          </div>
+          <Panel hidden={!viewMode} />
+        </Panels>
+        <Bar>
+          <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
+            Sidebar
+          </TabButton>
+          <TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
+            {viewMode ? 'Canvas' : null}
+            {pages.map(({ key, route: Route }) => (
+              <Route key={key}>{key}</Route>
+            ))}
+          </TabButton>
+          {viewMode ? (
+            <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
+              Addons
+            </TabButton>
+          ) : null}
+        </Bar>
+      </Root>
+    );
+  }
+}
+
+export { Mobile };
diff --git a/lib/ui/src/components/layout/persist.js b/lib/ui/src/components/layout/persist.js
deleted file mode 100644
index 1dea00393f06..000000000000
--- a/lib/ui/src/components/layout/persist.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import store from 'store2';
-import debounce from 'lodash/debounce';
-import memoize from 'memoizerific';
-
-export { store };
-
-export const get = () => {
-  try {
-    const data = store.local.get(`storybook-layout`);
-    return data || false;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
-    return false;
-  }
-};
-
-const write = memoize(1)(changes => {
-  try {
-    store.local.set(`storybook-layout`, changes);
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
-  }
-});
-
-export const set = debounce(write, 500);
diff --git a/lib/ui/src/components/layout/persist.ts b/lib/ui/src/components/layout/persist.ts
new file mode 100644
index 000000000000..1a304438cdfa
--- /dev/null
+++ b/lib/ui/src/components/layout/persist.ts
@@ -0,0 +1,27 @@
+import store from 'store2';
+import debounce from 'lodash/debounce';
+import memoize from 'memoizerific';
+
+export { store };
+
+export const get = () => {
+  try {
+    const data = store.local.get(`storybook-layout`);
+    return data || false;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return false;
+  }
+};
+
+const write = memoize(1)((changes) => {
+  try {
+    store.local.set(`storybook-layout`, changes);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+});
+
+export const set = debounce(write, 500);
diff --git a/lib/ui/src/components/notifications/item.js b/lib/ui/src/components/notifications/item.js
deleted file mode 100644
index e891f389992c..000000000000
--- a/lib/ui/src/components/notifications/item.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled, lighten, darken } from '@storybook/theming';
-import { Link } from '@storybook/router';
-
-const baseStyle = ({ theme }) => ({
-  display: 'block',
-  padding: '16px 20px',
-  borderRadius: 10,
-  fontSize: theme.typography.size.s1,
-  fontWeight: theme.typography.weight.bold,
-  lineHeight: `16px`,
-  boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.05)',
-  color: theme.color.inverseText,
-  backgroundColor:
-    theme.base === 'light' ? darken(theme.background.app) : lighten(theme.background.app),
-  textDecoration: 'none',
-});
-
-const NotificationLink = styled(Link)(baseStyle);
-const Notification = styled.div(baseStyle);
-
-export const NotificationItemSpacer = styled.div({
-  height: 48,
-});
-
-export default function NotificationItem({ notification: { content, link } }) {
-  return link ? (
-    <NotificationLink to={link}>{content}</NotificationLink>
-  ) : (
-    <Notification>{content}</Notification>
-  );
-}
-
-NotificationItem.propTypes = {
-  notification: PropTypes.shape({
-    content: PropTypes.string.isRequired,
-    link: PropTypes.string,
-  }).isRequired,
-};
diff --git a/lib/ui/src/components/notifications/item.stories.js b/lib/ui/src/components/notifications/item.stories.js
index b1a4258f229a..57618886afd1 100644
--- a/lib/ui/src/components/notifications/item.stories.js
+++ b/lib/ui/src/components/notifications/item.stories.js
@@ -5,7 +5,7 @@ import NotificationItem from './item';
 export default {
   component: NotificationItem,
   title: 'UI/Notifications/Item',
-  decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
+  decorators: [(storyFn) => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
   excludeStories: /.*Data$/,
 };
 
diff --git a/lib/ui/src/components/notifications/item.tsx b/lib/ui/src/components/notifications/item.tsx
new file mode 100644
index 000000000000..462f76263aea
--- /dev/null
+++ b/lib/ui/src/components/notifications/item.tsx
@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+import { State } from '@storybook/api';
+import { styled, lighten, darken } from '@storybook/theming';
+import { Link } from '@storybook/router';
+
+const Notification = styled.div(({ theme }) => ({
+  display: 'block',
+  padding: '16px 20px',
+  borderRadius: 10,
+  fontSize: theme.typography.size.s1,
+  fontWeight: theme.typography.weight.bold,
+  lineHeight: `16px`,
+  boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.05)',
+  color: theme.color.inverseText,
+  backgroundColor:
+    theme.base === 'light' ? darken(theme.background.app) : lighten(theme.background.app),
+  textDecoration: 'none',
+}));
+const NotificationLink = Notification.withComponent(Link);
+
+export const NotificationItemSpacer = styled.div({
+  height: 48,
+});
+
+const NotificationItem: FunctionComponent<{
+  notification: State['notifications'][0];
+}> = ({ notification: { content, link } }) => {
+  return link ? (
+    <NotificationLink to={link}>{content}</NotificationLink>
+  ) : (
+    <Notification>{content}</Notification>
+  );
+};
+
+export default NotificationItem;
diff --git a/lib/ui/src/components/notifications/notifications.js b/lib/ui/src/components/notifications/notifications.js
deleted file mode 100644
index 973923beb662..000000000000
--- a/lib/ui/src/components/notifications/notifications.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-import NotificationItem from './item';
-
-const List = styled.div(
-  {
-    zIndex: 10,
-
-    '> * + *': {
-      marginTop: 10,
-    },
-    '&:empty': {
-      display: 'none',
-    },
-  },
-  ({ placement }) =>
-    placement || {
-      bottom: 0,
-      left: 0,
-      right: 0,
-      position: 'fixed',
-    }
-);
-
-export default function NotificationList({ notifications, placement }) {
-  return (
-    <List placement={placement}>
-      {notifications.map(notification => (
-        <NotificationItem key={notification.id} notification={notification} />
-      ))}
-    </List>
-  );
-}
-
-NotificationList.propTypes = {
-  placement: PropTypes.shape({
-    position: PropTypes.string,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number,
-    bottom: PropTypes.number,
-  }),
-  notifications: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      content: PropTypes.string.isRequired,
-      link: PropTypes.string,
-    }).isRequired
-  ).isRequired,
-};
-NotificationList.defaultProps = {
-  placement: undefined,
-};
diff --git a/lib/ui/src/components/notifications/notifications.stories.js b/lib/ui/src/components/notifications/notifications.stories.js
index 14582beaeb34..4256a90e7814 100644
--- a/lib/ui/src/components/notifications/notifications.stories.js
+++ b/lib/ui/src/components/notifications/notifications.stories.js
@@ -6,13 +6,13 @@ 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>],
+  decorators: [(storyFn) => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
   excludeStories: /.*Data$/,
 };
 
 const items = Array.from(Object.entries(itemStories))
-  .filter(entry => itemMeta.excludeStories.exec(entry[0]))
-  .map(entry => entry[1]);
+  .filter((entry) => itemMeta.excludeStories.exec(entry[0]))
+  .map((entry) => entry[1]);
 
 export const singleData = [items[0]];
 export const allData = items;
diff --git a/lib/ui/src/components/notifications/notifications.tsx b/lib/ui/src/components/notifications/notifications.tsx
new file mode 100644
index 000000000000..9ae22064d3d0
--- /dev/null
+++ b/lib/ui/src/components/notifications/notifications.tsx
@@ -0,0 +1,40 @@
+import React, { FunctionComponent } from 'react';
+import { State } from '@storybook/api';
+import { styled, CSSObject } from '@storybook/theming';
+
+import NotificationItem from './item';
+
+const List = styled.div<{ placement?: CSSObject }>(
+  {
+    zIndex: 10,
+
+    '> * + *': {
+      marginTop: 10,
+    },
+    '&:empty': {
+      display: 'none',
+    },
+  },
+  ({ placement }) =>
+    placement || {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: 'fixed',
+    }
+);
+
+const NotificationList: FunctionComponent<{
+  placement: CSSObject;
+  notifications: State['notifications'];
+}> = ({ notifications, placement = undefined }) => {
+  return (
+    <List placement={placement}>
+      {notifications.map((notification) => (
+        <NotificationItem key={notification.id} notification={notification} />
+      ))}
+    </List>
+  );
+};
+
+export default NotificationList;
diff --git a/lib/ui/src/components/panel/panel.js b/lib/ui/src/components/panel/panel.js
deleted file mode 100644
index 819cc5717e4e..000000000000
--- a/lib/ui/src/components/panel/panel.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-import { Tabs, Icons, IconButton } from '@storybook/components';
-
-const DesktopOnlyIconButton = styled(IconButton)({
-  // Hides full screen icon at mobile breakpoint defined in app.js
-  '@media (max-width: 599px)': {
-    display: 'none',
-  },
-});
-
-class SafeTab extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  componentDidCatch(error, info) {
-    this.setState({ hasError: true });
-    // eslint-disable-next-line no-console
-    console.error(error, info);
-  }
-
-  render() {
-    const { hasError } = this.state;
-    const { children, title, id } = this.props;
-    if (hasError) {
-      return <h1>Something went wrong.</h1>;
-    }
-    return (
-      <div id={id} title={title}>
-        {children}
-      </div>
-    );
-  }
-}
-SafeTab.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  title: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-};
-SafeTab.defaultProps = {
-  children: null,
-};
-
-const AddonPanel = React.memo(
-  ({ panels, actions, selectedPanel, panelPosition, absolute = true }) => (
-    <Tabs
-      absolute={absolute}
-      selected={selectedPanel}
-      actions={actions}
-      flex
-      tools={
-        <Fragment>
-          <DesktopOnlyIconButton
-            key="position"
-            onClick={actions.togglePosition}
-            title="Change orientation"
-          >
-            <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
-          </DesktopOnlyIconButton>
-          <DesktopOnlyIconButton
-            key="visibility"
-            onClick={actions.toggleVisibility}
-            title="Hide addons"
-          >
-            <Icons icon="close" />
-          </DesktopOnlyIconButton>
-        </Fragment>
-      }
-      id="storybook-panel-root"
-    >
-      {Object.entries(panels).map(([k, v]) => (
-        <SafeTab key={k} id={k} title={v.title}>
-          {v.render}
-        </SafeTab>
-      ))}
-    </Tabs>
-  )
-);
-AddonPanel.displayName = 'AddonPanel';
-AddonPanel.propTypes = {
-  selectedPanel: PropTypes.string,
-  actions: PropTypes.shape({
-    togglePosition: PropTypes.func,
-    toggleVisibility: PropTypes.func,
-  }).isRequired,
-  panels: PropTypes.shape({}).isRequired,
-  panelPosition: PropTypes.oneOf(['bottom', 'right']),
-  absolute: PropTypes.bool,
-};
-AddonPanel.defaultProps = {
-  selectedPanel: null,
-  panelPosition: 'right',
-  absolute: true,
-};
-
-export default AddonPanel;
diff --git a/lib/ui/src/components/panel/panel.stories.js b/lib/ui/src/components/panel/panel.stories.js
deleted file mode 100644
index f47fd969c83e..000000000000
--- a/lib/ui/src/components/panel/panel.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Panel from './panel';
-
-export const panels = {
-  test1: {
-    title: 'Test 1',
-    // eslint-disable-next-line react/prop-types
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test1" key={key}>
-          TEST 1
-        </div>
-      ) : null,
-  },
-  test2: {
-    title: 'Test 2',
-    // eslint-disable-next-line react/prop-types
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test2" key={key}>
-          TEST 2
-        </div>
-      ) : null,
-  },
-};
-
-const onSelect = action('onSelect');
-const toggleVisibility = action('toggleVisibility');
-const togglePosition = action('togglePosition');
-
-storiesOf('UI/Panel', module)
-  .addParameters({
-    component: Panel,
-  })
-  .add('default', () => (
-    <Panel
-      absolute={false}
-      panels={panels}
-      actions={{ onSelect, toggleVisibility, togglePosition }}
-      selectedPanel="test2"
-    />
-  ))
-  .add('no panels', () => (
-    <Panel panels={{}} actions={{ onSelect, toggleVisibility, togglePosition }} />
-  ));
diff --git a/lib/ui/src/components/panel/panel.stories.tsx b/lib/ui/src/components/panel/panel.stories.tsx
new file mode 100644
index 000000000000..3af25dbe4111
--- /dev/null
+++ b/lib/ui/src/components/panel/panel.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import Panel from './panel';
+import { panels } from '../layout/app.mockdata';
+
+const onSelect = action('onSelect');
+const toggleVisibility = action('toggleVisibility');
+const togglePosition = action('togglePosition');
+
+export default {
+  title: 'UI/Panel',
+  component: Panel,
+};
+
+export const Default = () => (
+  <Panel
+    absolute={false}
+    panels={panels}
+    actions={{ onSelect, toggleVisibility, togglePosition }}
+    selectedPanel="test2"
+  />
+);
+
+export const NoPanels = () => (
+  <Panel panels={{}} actions={{ onSelect, toggleVisibility, togglePosition }} />
+);
diff --git a/lib/ui/src/components/panel/panel.tsx b/lib/ui/src/components/panel/panel.tsx
new file mode 100644
index 000000000000..9626921b3b31
--- /dev/null
+++ b/lib/ui/src/components/panel/panel.tsx
@@ -0,0 +1,83 @@
+import React, { Component, Fragment } from 'react';
+import { styled } from '@storybook/theming';
+import { Tabs, Icons, IconButton } from '@storybook/components';
+
+const DesktopOnlyIconButton = styled(IconButton)({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
+export interface SafeTabProps {
+  title: string;
+  id: string;
+}
+
+class SafeTab extends Component<SafeTabProps, { hasError: boolean }> {
+  constructor(props: SafeTabProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error: Error, info: any) {
+    this.setState({ hasError: true });
+    // eslint-disable-next-line no-console
+    console.error(error, info);
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children, title, id } = this.props;
+    if (hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+    return (
+      <div id={id} title={title}>
+        {children}
+      </div>
+    );
+  }
+}
+
+const AddonPanel = React.memo<{
+  selectedPanel?: string;
+  actions: { onSelect: (id: string) => void } & Record<string, any>;
+  panels: Record<string, any>;
+  panelPosition?: 'bottom' | 'right';
+  absolute?: boolean;
+}>(({ panels, actions, selectedPanel = null, panelPosition = 'right', absolute = true }) => (
+  <Tabs
+    absolute={absolute}
+    selected={selectedPanel}
+    actions={actions}
+    tools={
+      <Fragment>
+        <DesktopOnlyIconButton
+          key="position"
+          onClick={actions.togglePosition}
+          title="Change orientation"
+        >
+          <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
+        </DesktopOnlyIconButton>
+        <DesktopOnlyIconButton
+          key="visibility"
+          onClick={actions.toggleVisibility}
+          title="Hide addons"
+        >
+          <Icons icon="close" />
+        </DesktopOnlyIconButton>
+      </Fragment>
+    }
+    id="storybook-panel-root"
+  >
+    {Object.entries(panels).map(([k, v]) => (
+      <SafeTab key={k} id={k} title={v.title}>
+        {v.render}
+      </SafeTab>
+    ))}
+  </Tabs>
+));
+AddonPanel.displayName = 'AddonPanel';
+
+export default AddonPanel;
diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
new file mode 100644
index 000000000000..d0f1f790ab51
--- /dev/null
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -0,0 +1,86 @@
+import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
+import { Global, CSSObject } from '@storybook/theming';
+import { IFrame } from './iframe';
+import { FramesRendererProps } from './utils/types';
+import { stringifyQueryParams } from './utils/stringifyQueryParams';
+
+const getActive = (refId: FramesRendererProps['refId']) => {
+  if (refId) {
+    return `storybook-ref-${refId}`;
+  }
+
+  return 'storybook-preview-iframe';
+};
+
+export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
+  refs,
+  story,
+  scale,
+  viewMode,
+  refId,
+  queryParams,
+  baseUrl,
+  storyId,
+}) => {
+  const stringifiedQueryParams = stringifyQueryParams(queryParams);
+  const active = getActive(refId);
+
+  const styles = useMemo<CSSObject>(() => {
+    return {
+      '[data-is-storybook="false"]': {
+        visibility: 'hidden',
+      },
+      '[data-is-storybook="true"]': {
+        visibility: 'visible',
+      },
+    };
+  }, []);
+
+  const [frames, setFrames] = useState<Record<string, string>>({
+    'storybook-preview-iframe': `${baseUrl}?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
+  });
+
+  useEffect(() => {
+    const newFrames = Object.values(refs)
+      .filter((r) => {
+        if (r.error) {
+          return false;
+        }
+        if (r.type === 'auto-inject') {
+          return true;
+        }
+        if (story && r.id === story.refId) {
+          return true;
+        }
+
+        return false;
+      })
+      .reduce((acc, r) => {
+        return {
+          ...acc,
+          [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
+        };
+      }, frames);
+
+    setFrames(newFrames);
+  }, [storyId, story, refs]);
+
+  return (
+    <Fragment>
+      <Global styles={styles} />
+      {Object.entries(frames).map(([id, src]) => (
+        <Fragment key={id}>
+          <IFrame
+            active={id === active}
+            key={refs[id] ? refs[id].url : id}
+            id={id}
+            title={id}
+            src={src}
+            allowFullScreen
+            scale={scale}
+          />
+        </Fragment>
+      ))}
+    </Fragment>
+  );
+};
diff --git a/lib/ui/src/components/preview/components.js b/lib/ui/src/components/preview/components.js
deleted file mode 100644
index ef895a628c10..000000000000
--- a/lib/ui/src/components/preview/components.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { styled } from '@storybook/theming';
-import { Link } from '@storybook/router';
-
-export const FrameWrap = styled.div(({ offset }) => ({
-  position: 'absolute',
-  overflow: 'auto',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  top: offset,
-  zIndex: 3,
-  transition: 'all 0.1s linear',
-  height: `calc(100% - ${offset}px)`,
-  background: 'transparent',
-}));
-
-export const UnstyledLink = styled(Link)({
-  color: 'inherit',
-  textDecoration: 'inherit',
-  display: 'inline-block',
-});
diff --git a/lib/ui/src/components/preview/iframe.js b/lib/ui/src/components/preview/iframe.js
deleted file mode 100644
index ed744d96d960..000000000000
--- a/lib/ui/src/components/preview/iframe.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import window from 'global';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { styled } from '@storybook/theming';
-
-const FIREFOX_BROWSER = 'Firefox';
-
-const StyledIframe = styled.iframe({
-  position: 'absolute',
-  display: 'block',
-  boxSizing: 'content-box',
-  height: '100%',
-  width: '100%',
-  border: '0 none',
-  transition: 'all .3s, background-position 0s',
-  backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
-});
-
-export class IFrame extends Component {
-  iframe = null;
-
-  componentDidMount() {
-    const { id } = this.props;
-    this.iframe = window.document.getElementById(id);
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const { scale } = this.props;
-    if (scale !== nextProps.scale) {
-      if (window.navigator.userAgent.indexOf(FIREFOX_BROWSER) !== -1) {
-        this.setIframeBodyStyle({
-          width: `${nextProps.scale * 100}%`,
-          height: `${nextProps.scale * 100}%`,
-          transform: `scale(${1 / nextProps.scale})`,
-          transformOrigin: 'top left',
-        });
-      } else {
-        this.setIframeBodyStyle({
-          zoom: 1 / nextProps.scale,
-        });
-      }
-    }
-
-    // this component renders an iframe, which gets updates via post-messages
-    // never update this component, it will cause the iframe to refresh
-    return false;
-  }
-
-  setIframeBodyStyle(style) {
-    return Object.assign(this.iframe.contentDocument.body.style, style);
-  }
-
-  render() {
-    const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
-    return (
-      <StyledIframe
-        scrolling="yes"
-        id={id}
-        title={title}
-        src={src}
-        allowFullScreen={allowFullScreen}
-        {...rest}
-      />
-    );
-  }
-}
-IFrame.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  allowFullScreen: PropTypes.bool.isRequired,
-  scale: PropTypes.number.isRequired,
-};
diff --git a/lib/ui/src/components/preview/iframe.stories.js b/lib/ui/src/components/preview/iframe.stories.js
deleted file mode 100644
index aecba13e2040..000000000000
--- a/lib/ui/src/components/preview/iframe.stories.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { IFrame } from './iframe';
-
-export default {
-  component: IFrame,
-  title: 'UI/Preview/Iframe',
-};
-
-const style = { width: '100%', height: '500px' };
-
-export const workingStory = () => (
-  <IFrame
-    id="iframe"
-    title="Missing"
-    src="/iframe.html?id=ui-panel--default"
-    allowFullScreen
-    style={style}
-    scale={1.0}
-  />
-);
-
-export const missingStory = () => (
-  <IFrame
-    id="iframe"
-    title="Missing"
-    src="/iframe.html?id=missing"
-    allowFullScreen
-    style={style}
-    scale={1.0}
-  />
-);
-
-export const errorStory = () => (
-  <IFrame
-    id="iframe"
-    title="Missing"
-    src="/iframe.html?id=core-errors--story-throws-exception"
-    allowFullScreen
-    style={style}
-    scale={1.0}
-  />
-);
-// 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.story = {
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
diff --git a/lib/ui/src/components/preview/iframe.stories.tsx b/lib/ui/src/components/preview/iframe.stories.tsx
new file mode 100644
index 000000000000..eff4f8750856
--- /dev/null
+++ b/lib/ui/src/components/preview/iframe.stories.tsx
@@ -0,0 +1,39 @@
+import React, { CSSProperties } from 'react';
+
+import { IFrame } from './iframe';
+
+export default {
+  component: IFrame,
+  title: 'UI/Iframe',
+};
+
+const style: CSSProperties = {
+  width: '500px',
+  height: '500px',
+  border: '2px solid hotpink',
+  position: 'relative',
+};
+
+export const workingStory = () => (
+  <IFrame
+    active
+    id="iframe"
+    title="Missing"
+    src="/iframe.html?id=ui-panel--default"
+    allowFullScreen
+    style={style}
+    scale={1.0}
+  />
+);
+
+export const missingStory = () => (
+  <IFrame
+    active
+    id="iframe"
+    title="Missing"
+    src="/iframe.html?id=missing"
+    allowFullScreen
+    style={style}
+    scale={1.0}
+  />
+);
diff --git a/lib/ui/src/components/preview/iframe.tsx b/lib/ui/src/components/preview/iframe.tsx
new file mode 100644
index 000000000000..5abb6d879b48
--- /dev/null
+++ b/lib/ui/src/components/preview/iframe.tsx
@@ -0,0 +1,95 @@
+import window from 'global';
+import React, { Component, IframeHTMLAttributes } from 'react';
+
+import { styled } from '@storybook/theming';
+
+const FIREFOX_BROWSER = 'Firefox';
+
+const StyledIframe = styled.iframe({
+  position: 'absolute',
+  display: 'block',
+  boxSizing: 'content-box',
+  height: '100%',
+  width: '100%',
+  border: '0 none',
+  transition: 'all .3s, background-position 0s, visibility 0s',
+  backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
+});
+
+export interface IFrameProps {
+  id: string;
+  title: string;
+  src: string;
+  allowFullScreen: boolean;
+  scale: number;
+  active: boolean;
+}
+
+export class IFrame extends Component<IFrameProps & IframeHTMLAttributes<HTMLIFrameElement>> {
+  iframe: HTMLIFrameElement = null;
+
+  componentDidMount() {
+    const { id } = this.props;
+    this.iframe = window.document.getElementById(id);
+  }
+
+  shouldComponentUpdate(nextProps: IFrameProps) {
+    const { scale, active } = this.props;
+
+    if (scale !== nextProps.scale) {
+      this.setIframeInnerZoom(nextProps.scale);
+    }
+
+    if (active !== nextProps.active) {
+      this.iframe.setAttribute('data-is-storybook', nextProps.active ? 'true' : 'false');
+    }
+
+    // this component renders an iframe, which gets updates via post-messages
+    // never update this component, it will cause the iframe to refresh
+    return false;
+  }
+
+  setIframeInnerZoom(scale: number) {
+    try {
+      if (window.navigator.userAgent.indexOf(FIREFOX_BROWSER) !== -1) {
+        Object.assign(this.iframe.contentDocument.body.style, {
+          width: `${scale * 100}%`,
+          height: `${scale * 100}%`,
+          transform: `scale(${1 / scale})`,
+          transformOrigin: 'top left',
+        });
+      } else {
+        Object.assign(this.iframe.contentDocument.body.style, {
+          zoom: 1 / scale,
+        });
+      }
+    } catch (e) {
+      this.setIframeZoom(scale);
+    }
+  }
+
+  setIframeZoom(scale: number) {
+    Object.assign(this.iframe.style, {
+      width: `${scale * 100}%`,
+      height: `${scale * 100}%`,
+      transform: `scale(${1 / scale})`,
+      transformOrigin: 'top left',
+    });
+  }
+
+  render() {
+    const { id, title, src, allowFullScreen, scale, active, ...rest } = this.props;
+    return (
+      <StyledIframe
+        onLoad={() => this.iframe.setAttribute('data-is-loaded', 'true')}
+        data-is-storybook={active ? 'true' : 'false'}
+        scrolling="yes"
+        id={id}
+        title={title}
+        src={src}
+        allowFullScreen={allowFullScreen}
+        {...rest}
+      />
+    );
+  }
+}
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
deleted file mode 100644
index aa1461ad04e4..000000000000
--- a/lib/ui/src/components/preview/preview.js
+++ /dev/null
@@ -1,360 +0,0 @@
-import window from 'global';
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import memoize from 'memoizerific';
-import copy from 'copy-to-clipboard';
-
-import { styled } from '@storybook/theming';
-import { SET_CURRENT_STORY } from '@storybook/core-events';
-import { types } from '@storybook/addons';
-import { Icons, IconButton, TabButton, TabBar, Separator } from '@storybook/components';
-
-import { Helmet } from 'react-helmet-async';
-
-import { Toolbar } from './toolbar';
-
-import * as S from './components';
-
-import { ZoomProvider, ZoomConsumer, Zoom } from './zoom';
-
-import { IFrame } from './iframe';
-
-const DesktopOnly = styled.span({
-  // Hides full screen icon at mobile breakpoint defined in app.js
-  '@media (max-width: 599px)': {
-    display: 'none',
-  },
-});
-const stringifyQueryParams = queryParams =>
-  Object.entries(queryParams).reduce((acc, [k, v]) => {
-    return `${acc}&${k}=${v}`;
-  }, '');
-
-const renderIframe = (storyId, viewMode, id, baseUrl, scale, queryParams) => (
-  <IFrame
-    key="iframe"
-    id="storybook-preview-iframe"
-    title={id || 'preview'}
-    src={`${baseUrl}?id=${storyId}&viewMode=${viewMode}${stringifyQueryParams(queryParams)}`}
-    allowFullScreen
-    scale={scale}
-  />
-);
-
-const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.values(getFn(type))));
-
-const ActualPreview = ({
-  wrappers,
-  viewMode,
-  id,
-  storyId,
-  active,
-  baseUrl,
-  scale,
-  queryParams,
-  customCanvas,
-}) => {
-  const data = [storyId, viewMode, id, baseUrl, scale, queryParams];
-  const base = customCanvas ? customCanvas(...data) : renderIframe(...data);
-  return wrappers.reduceRight(
-    (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
-    base
-  );
-};
-
-const IframeWrapper = styled.div(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  width: '100%',
-  height: '100%',
-  background: theme.background.content,
-}));
-
-const defaultWrappers = [
-  {
-    render: p => (
-      <IframeWrapper id="storybook-preview-wrapper" hidden={!p.active}>
-        {p.children}
-      </IframeWrapper>
-    ),
-  },
-];
-
-const getTools = memoize(10)(
-  (
-    getElements,
-    queryParams,
-    panels,
-    api,
-    options,
-    storyId,
-    viewMode,
-    docsOnly,
-    location,
-    path,
-    baseUrl
-  ) => {
-    const tools = getElementList(getElements, types.TOOL, [
-      panels.filter(p => p.id !== 'canvas').length
-        ? {
-            render: () => (
-              <Fragment>
-                <TabBar key="tabs" scroll={false}>
-                  {panels.map((t, index) => {
-                    const to = t.route({ storyId, viewMode, path, location });
-                    const isActive = path === to;
-                    return (
-                      <S.UnstyledLink key={t.id || `l${index}`} to={to}>
-                        <TabButton active={isActive}>{t.title}</TabButton>
-                      </S.UnstyledLink>
-                    );
-                  })}
-                </TabBar>
-                <Separator />
-              </Fragment>
-            ),
-          }
-        : null,
-      {
-        match: p => p.viewMode === 'story',
-        render: () => (
-          <Fragment>
-            <ZoomConsumer>
-              {({ set, value }) => (
-                <Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
-              )}
-            </ZoomConsumer>
-            <Separator />
-          </Fragment>
-        ),
-      },
-    ]);
-
-    const extraTools = getElementList(getElements, types.TOOLEXTRA, [
-      {
-        match: p => p.viewMode === 'story',
-        render: () => (
-          <DesktopOnly>
-            <IconButton
-              key="full"
-              onClick={api.toggleFullscreen}
-              title={options.isFullscreen ? 'Exit full screen' : 'Go full screen'}
-            >
-              <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
-            </IconButton>
-          </DesktopOnly>
-        ),
-      },
-      {
-        match: p => p.viewMode === 'story',
-        render: () => (
-          <IconButton
-            key="opener"
-            onClick={() =>
-              window.open(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`)
-            }
-            title="Open canvas in new tab"
-          >
-            <Icons icon="share" />
-          </IconButton>
-        ),
-      },
-      {
-        match: p => p.viewMode === 'story',
-        render: () => (
-          <IconButton
-            key="copy"
-            onClick={() =>
-              copy(
-                `${window.location.origin}${
-                  window.location.pathname
-                }${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`
-              )
-            }
-            title="Copy canvas link"
-          >
-            <Icons icon="copy" />
-          </IconButton>
-        ),
-      },
-    ]);
-    // if its a docsOnly page, even the 'story' view mode is considered 'docs'
-    const filter = item =>
-      item &&
-      (!item.match ||
-        item.match({
-          storyId,
-          viewMode: docsOnly && viewMode === 'story' ? 'docs' : viewMode,
-          location,
-          path,
-        }));
-
-    const displayItems = list =>
-      list.reduce(
-        (acc, item, index) =>
-          item ? (
-            <Fragment key={item.id || item.key || `f-${index}`}>
-              {acc}
-              {item.render() || item}
-            </Fragment>
-          ) : (
-            acc
-          ),
-        null
-      );
-
-    const left = displayItems(tools.filter(filter));
-    const right = displayItems(extraTools.filter(filter));
-
-    return { left, right };
-  }
-);
-
-const getDocumentTitle = description => {
-  return description ? `${description} ⋅ Storybook` : 'Storybook';
-};
-
-class Preview extends Component {
-  shouldComponentUpdate({ storyId, viewMode, docsOnly, options, queryParams }) {
-    const { props } = this;
-
-    return (
-      options.isFullscreen !== props.options.isFullscreen ||
-      options.isToolshown !== props.options.isToolshown ||
-      viewMode !== props.viewMode ||
-      docsOnly !== props.docsOnly ||
-      storyId !== props.storyId ||
-      queryParams !== props.queryParams
-    );
-  }
-
-  componentDidUpdate(prevProps) {
-    const { api, storyId, viewMode } = this.props;
-    const { storyId: prevStoryId, viewMode: prevViewMode } = prevProps;
-    if ((storyId && storyId !== prevStoryId) || (viewMode && viewMode !== prevViewMode)) {
-      api.emit(SET_CURRENT_STORY, { storyId, viewMode });
-    }
-  }
-
-  render() {
-    const {
-      id,
-      path,
-      location,
-      viewMode,
-      docsOnly,
-      storyId,
-      queryParams,
-      getElements,
-      api,
-      customCanvas,
-      options,
-      description,
-      baseUrl,
-    } = this.props;
-
-    const toolbarHeight = options.isToolshown ? 40 : 0;
-    const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
-    const panels = getElementList(getElements, types.TAB, [
-      {
-        route: p => `/story/${p.storyId}`,
-        match: p => p.viewMode && p.viewMode.match(/^(story|docs)$/),
-        render: p => (
-          <ZoomConsumer>
-            {({ value }) => {
-              const props = {
-                viewMode,
-                active: p.active,
-                wrappers,
-                id,
-                storyId,
-                baseUrl,
-                queryParams,
-                scale: value,
-                customCanvas,
-              };
-
-              return <ActualPreview {...props} />;
-            }}
-          </ZoomConsumer>
-        ),
-        title: 'Canvas',
-        id: 'canvas',
-      },
-    ]);
-    const { left, right } = getTools(
-      getElements,
-      queryParams,
-      panels,
-      api,
-      options,
-      storyId,
-      viewMode,
-      docsOnly,
-      location,
-      path,
-      baseUrl
-    );
-
-    return (
-      <ZoomProvider>
-        <Fragment>
-          {id === 'main' && (
-            <Helmet key="description">
-              <title>{getDocumentTitle(description)}</title>
-            </Helmet>
-          )}
-          <Toolbar key="toolbar" shown={options.isToolshown} border>
-            <Fragment key="left">{left}</Fragment>
-            <Fragment key="right">{right}</Fragment>
-          </Toolbar>
-          <S.FrameWrap key="frame" offset={toolbarHeight}>
-            {panels.map(p => (
-              <Fragment key={p.id || p.key}>
-                {p.render({ active: p.match({ storyId, viewMode, location, path }) })}
-              </Fragment>
-            ))}
-          </S.FrameWrap>
-        </Fragment>
-      </ZoomProvider>
-    );
-  }
-}
-Preview.propTypes = {
-  id: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  customCanvas: PropTypes.func,
-  api: PropTypes.shape({
-    on: PropTypes.func,
-    off: PropTypes.func,
-    emit: PropTypes.func,
-    toggleFullscreen: PropTypes.func,
-  }).isRequired,
-  storyId: PropTypes.string,
-  path: PropTypes.string,
-  viewMode: PropTypes.string,
-  location: PropTypes.shape({}).isRequired,
-  getElements: PropTypes.func.isRequired,
-  queryParams: PropTypes.shape({}).isRequired,
-  options: PropTypes.shape({
-    isFullscreen: PropTypes.bool,
-    isToolshown: PropTypes.bool,
-  }).isRequired,
-  baseUrl: PropTypes.string,
-  docsOnly: PropTypes.bool,
-};
-
-Preview.defaultProps = {
-  viewMode: undefined,
-  docsOnly: false,
-  storyId: undefined,
-  path: undefined,
-  description: undefined,
-  baseUrl: 'iframe.html',
-  customCanvas: undefined,
-};
-
-export { Preview };
diff --git a/lib/ui/src/components/preview/preview.mockdata.tsx b/lib/ui/src/components/preview/preview.mockdata.tsx
new file mode 100644
index 000000000000..4943d7fc2ddd
--- /dev/null
+++ b/lib/ui/src/components/preview/preview.mockdata.tsx
@@ -0,0 +1,55 @@
+import { types, Addon } from '@storybook/addons';
+import { API, State } from '@storybook/api';
+import { PreviewProps } from './utils/types';
+
+export const previewProps: PreviewProps = {
+  id: 'string',
+  api: ({
+    on: () => {},
+    emit: () => {},
+    off: () => {},
+    getElements: ((type) =>
+      type === types.TAB
+        ? [
+            {
+              id: 'notes',
+              type: types.TAB,
+              title: 'Notes',
+              route: ({ storyId }) => `/info/${storyId}`,
+              match: ({ viewMode }) => viewMode === 'info',
+              render: () => null,
+            } as Addon,
+          ]
+        : []) as API['getElements'],
+  } as any) as API,
+  story: {
+    id: 'storyId',
+    depth: 1,
+    isComponent: false,
+    isLeaf: true,
+    isRoot: false,
+    kind: 'kind',
+    name: 'story name',
+    parent: 'root',
+    children: [],
+    parameters: {
+      fileName: '',
+      options: {},
+      docsOnly: false,
+    },
+    args: {},
+  },
+  path: 'string',
+  viewMode: 'story',
+  location: ({} as any) as State['location'],
+  baseUrl: 'http://example.com',
+  queryParams: {},
+  options: {
+    isFullscreen: false,
+    isToolshown: true,
+  },
+  withLoader: false,
+  docsOnly: false,
+  description: '',
+  refs: {},
+};
diff --git a/lib/ui/src/components/preview/preview.stories.js b/lib/ui/src/components/preview/preview.stories.js
deleted file mode 100644
index dfa20bdbe364..000000000000
--- a/lib/ui/src/components/preview/preview.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { types } from '@storybook/addons';
-
-import { Preview } from './preview';
-
-export const previewProps = {
-  id: 'string',
-  api: {
-    on: () => {},
-    emit: () => {},
-    off: () => {},
-  },
-  storyId: 'string',
-  path: 'string',
-  viewMode: 'story',
-  location: {},
-  baseUrl: 'http://example.com',
-  queryParams: {},
-  getElements: type =>
-    type === types.TAB
-      ? [
-          {
-            id: 'notes',
-            type: types.TAB,
-            title: 'Notes',
-            route: ({ storyId }) => `/info/${storyId}`, // todo add type
-            match: ({ viewMode }) => viewMode === 'info', // todo add type
-            render: () => null,
-          },
-        ]
-      : [],
-  options: {
-    isFullscreen: false,
-    isToolshown: true,
-  },
-  actions: {},
-};
-
-storiesOf('UI/Preview/Preview', module)
-  .addParameters({
-    component: Preview,
-  })
-  .add('no tabs', () => <Preview {...previewProps} getElements={() => []} />)
-  .add('with tabs', () => <Preview {...previewProps} />);
diff --git a/lib/ui/src/components/preview/preview.stories.tsx b/lib/ui/src/components/preview/preview.stories.tsx
new file mode 100644
index 000000000000..d2ad5bfa1cb3
--- /dev/null
+++ b/lib/ui/src/components/preview/preview.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Provider as ManagerProvider, Combo, Consumer } from '@storybook/api';
+import { Location, LocationProvider } from '@storybook/router';
+import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
+
+import { DecoratorFn } from '@storybook/react';
+import { Preview } from './preview';
+
+import { PrettyFakeProvider } from '../../FakeProvider';
+import { previewProps } from './preview.mockdata';
+
+const provider = new PrettyFakeProvider();
+
+export default {
+  title: 'UI/Preview',
+  component: Preview,
+  decorators: [
+    ((StoryFn, c) => (
+      <LocationProvider key="location.provider">
+        <Location key="location.consumer">
+          {(locationData) => (
+            <ManagerProvider key="manager" provider={provider} {...locationData} docsMode={false}>
+              <ThemeProvider key="theme.provider" theme={ensureTheme(themes.light)}>
+                <StoryFn {...c} />
+              </ThemeProvider>
+            </ManagerProvider>
+          )}
+        </Location>
+      </LocationProvider>
+    )) as DecoratorFn,
+  ],
+};
+
+export const noTabs = () => (
+  <Consumer>
+    {({ api }: Combo) => {
+      return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;
+    }}
+  </Consumer>
+);
+
+export const withTabs = () => <Preview {...previewProps} />;
diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
new file mode 100644
index 000000000000..5aad8e808d0f
--- /dev/null
+++ b/lib/ui/src/components/preview/preview.tsx
@@ -0,0 +1,232 @@
+import React, { Fragment, FunctionComponent, useMemo, useEffect } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+import merge from '@storybook/api/dist/lib/merge';
+import { API, Consumer, Combo } from '@storybook/api';
+import { SET_CURRENT_STORY } from '@storybook/core-events';
+import addons, { types, Addon } from '@storybook/addons';
+
+import { Loader } from '@storybook/components';
+import { Location } from '@storybook/router';
+
+import * as S from './utils/components';
+import { ZoomProvider, ZoomConsumer } from './tools/zoom';
+import { defaultWrappers, ApplyWrappers } from './wrappers';
+import { ToolbarComp } from './toolbar';
+import { FramesRenderer } from './FramesRenderer';
+
+import { PreviewProps } from './utils/types';
+
+const getWrappers = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.PREVIEW));
+const getTabs = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TAB));
+
+const canvasMapper = ({ state, api }: Combo) => ({
+  storyId: state.storyId,
+  refId: state.refId,
+  viewMode: state.viewMode,
+  customCanvas: api.renderPreview,
+  queryParams: state.customQueryParams,
+  getElements: api.getElements,
+  story: api.getData(state.storyId, state.refId),
+  storiesConfigured: state.storiesConfigured,
+  storiesFailed: state.storiesFailed,
+  refs: state.refs,
+  active: !!(state.viewMode && state.viewMode.match(/^(story|docs)$/)),
+});
+
+const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): Addon => ({
+  id: 'canvas',
+  title: 'Canvas',
+  route: ({ storyId, refId }) => (refId ? `/story/${refId}_${storyId}` : `/story/${storyId}`),
+  match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+  render: () => {
+    return (
+      <Consumer filter={canvasMapper}>
+        {({
+          story,
+          refs,
+          customCanvas,
+          storyId,
+          refId,
+          viewMode,
+          queryParams,
+          getElements,
+          storiesConfigured,
+          storiesFailed,
+          active,
+        }) => {
+          const wrappers = useMemo(() => [...defaultWrappers, ...getWrappers(getElements)], [
+            getElements,
+            ...defaultWrappers,
+          ]);
+
+          const isLoading = !!(
+            (!story && !(storiesFailed || storiesConfigured)) ||
+            (story && refId && refs[refId] && !refs[refId].ready)
+          );
+
+          return (
+            <ZoomConsumer>
+              {({ value: scale }) => {
+                return (
+                  <>
+                    {withLoader && isLoading && (
+                      <S.LoaderWrapper>
+                        <Loader id="preview-loader" role="progressbar" />
+                      </S.LoaderWrapper>
+                    )}
+                    <ApplyWrappers
+                      id={id}
+                      storyId={storyId}
+                      viewMode={viewMode}
+                      active={active}
+                      wrappers={wrappers}
+                    >
+                      {customCanvas ? (
+                        customCanvas(storyId, viewMode, id, baseUrl, scale, queryParams)
+                      ) : (
+                        <FramesRenderer
+                          baseUrl={baseUrl}
+                          refs={refs}
+                          scale={scale}
+                          story={story}
+                          viewMode={viewMode}
+                          refId={refId}
+                          queryParams={queryParams}
+                          storyId={storyId}
+                        />
+                      )}
+                    </ApplyWrappers>
+                  </>
+                );
+              }}
+            </ZoomConsumer>
+          );
+        }}
+      </Consumer>
+    );
+  },
+});
+
+const useTabs = (
+  id: PreviewProps['id'],
+  baseUrl: PreviewProps['baseUrl'],
+  withLoader: PreviewProps['withLoader'],
+  getElements: API['getElements'],
+  story: PreviewProps['story']
+) => {
+  const canvas = useMemo(() => {
+    return createCanvas(id, baseUrl, withLoader);
+  }, [id, baseUrl, withLoader]);
+
+  const tabsFromConfig = useMemo(() => {
+    return getTabs(getElements);
+  }, [getElements]);
+
+  return useMemo(() => {
+    if (story && story.parameters) {
+      return filterTabs([canvas, ...tabsFromConfig], story.parameters);
+    }
+
+    return [canvas, ...tabsFromConfig];
+  }, [story, canvas, ...tabsFromConfig]);
+};
+
+const Preview: FunctionComponent<PreviewProps> = (props) => {
+  const {
+    api,
+    id: previewId,
+    options,
+    viewMode,
+    story = undefined,
+    description,
+    baseUrl,
+    withLoader = true,
+  } = props;
+  const { isToolshown } = options;
+  const { getElements } = api;
+
+  const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
+
+  useEffect(() => {
+    if (story && viewMode && viewMode.match(/docs|story/)) {
+      const { refId, id } = story;
+      api.emit(SET_CURRENT_STORY, {
+        storyId: id,
+        viewMode,
+        options: {
+          target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe',
+        },
+      });
+    }
+  }, [story, viewMode]);
+
+  return (
+    <Fragment>
+      {previewId === 'main' && (
+        <Helmet key="description">
+          <title>{description}</title>
+        </Helmet>
+      )}
+      <ZoomProvider>
+        <ToolbarComp key="tools" story={story} api={api} isShown={isToolshown} tabs={tabs} />
+        <S.FrameWrap key="frame" offset={isToolshown ? 40 : 0}>
+          {tabs.map(({ render: Render, match, ...t }, i) => {
+            // @ts-ignore
+            const key = t.id || t.key || i;
+            return (
+              <Fragment key={key}>
+                <Location>{(lp) => <Render active={match(lp)} />}</Location>
+              </Fragment>
+            );
+          })}
+        </S.FrameWrap>
+      </ZoomProvider>
+    </Fragment>
+  );
+};
+
+export { Preview };
+
+function filterTabs(panels: Addon[], parameters: Record<string, any>) {
+  const { previewTabs } = addons.getConfig();
+  const parametersTabs = parameters ? parameters.previewTabs : undefined;
+
+  if (previewTabs || parametersTabs) {
+    // deep merge global and local settings
+    const tabs = merge(previewTabs, parametersTabs);
+    const arrTabs = Object.keys(tabs).map((key, index) => ({
+      index,
+      ...(typeof tabs[key] === 'string' ? { title: tabs[key] } : tabs[key]),
+      id: key,
+    }));
+    return panels
+      .filter((panel) => {
+        const t = arrTabs.find((tab) => tab.id === panel.id);
+        return t === undefined || t.id === 'canvas' || !t.hidden;
+      })
+      .map((panel, index) => ({ ...panel, index } as Addon))
+      .sort((p1, p2) => {
+        const tab_1 = arrTabs.find((tab) => tab.id === p1.id);
+        // @ts-ignore
+        const index_1 = tab_1 ? tab_1.index : arrTabs.length + p1.index;
+        const tab_2 = arrTabs.find((tab) => tab.id === p2.id);
+        // @ts-ignore
+        const index_2 = tab_2 ? tab_2.index : arrTabs.length + p2.index;
+        return index_1 - index_2;
+      })
+      .map((panel) => {
+        const t = arrTabs.find((tab) => tab.id === panel.id);
+        if (t) {
+          return {
+            ...panel,
+            title: t.title || panel.title,
+            disabled: t.disabled,
+            hidden: t.hidden,
+          } as Addon;
+        }
+        return panel;
+      });
+  }
+  return panels;
+}
diff --git a/lib/ui/src/components/preview/toolbar.js b/lib/ui/src/components/preview/toolbar.js
deleted file mode 100644
index 4bd0ced96c7d..000000000000
--- a/lib/ui/src/components/preview/toolbar.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-
-import { FlexBar } from '@storybook/components';
-
-export const Toolbar = styled(({ shown, ...props }) => <FlexBar {...props} />)(
-  {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    transition: 'transform .2s linear',
-  },
-  ({ shown }) => ({
-    tranform: shown ? 'translateY(0px)' : 'translateY(-40px)',
-  })
-);
diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
new file mode 100644
index 000000000000..d47098d2d914
--- /dev/null
+++ b/lib/ui/src/components/preview/toolbar.tsx
@@ -0,0 +1,219 @@
+import React, { Fragment, useMemo, FunctionComponent, ReactElement } from 'react';
+
+import { styled } from '@storybook/theming';
+
+import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
+import { Consumer, Combo, API, Story, Group, State } from '@storybook/api';
+import { Addon, types } from '@storybook/addons';
+
+import { Location, RenderData } from '@storybook/router';
+import { zoomTool } from './tools/zoom';
+
+import * as S from './utils/components';
+
+import { PreviewProps } from './utils/types';
+import { copyTool } from './tools/copy';
+import { ejectTool } from './tools/eject';
+
+export const getTools = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TOOL));
+
+export const getToolsExtra = (getFn: API['getElements']) =>
+  Object.values(getFn<Addon>(types.TOOLEXTRA));
+
+const Bar: FunctionComponent<{ shown: boolean } & Record<string, any>> = ({ shown, ...props }) => (
+  <FlexBar {...props} />
+);
+
+export const Toolbar = styled(Bar)(
+  {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    transition: 'transform .2s linear',
+  },
+  ({ shown }) => ({
+    tranform: shown ? 'translateY(0px)' : 'translateY(-40px)',
+  })
+);
+
+const fullScreenMapper = ({ api, state }: Combo) => ({
+  toggle: api.toggleFullscreen,
+  value: state.layout.isFullscreen,
+});
+
+export const fullScreenTool: Addon = {
+  title: 'fullscreen',
+  match: (p) => p.viewMode === 'story',
+  render: () => (
+    <Consumer filter={fullScreenMapper}>
+      {({ toggle, value }) => (
+        <S.DesktopOnly>
+          <IconButton
+            key="full"
+            onClick={toggle as any}
+            title={value ? 'Exit full screen' : 'Go full screen'}
+          >
+            <Icons icon={value ? 'close' : 'expand'} />
+          </IconButton>
+        </S.DesktopOnly>
+      )}
+    </Consumer>
+  ),
+};
+
+const tabsMapper = ({ state }: Combo) => ({
+  viewMode: state.docsOnly,
+  storyId: state.storyId,
+  path: state.path,
+  location: state.location,
+  refId: state.refId,
+});
+
+export const createTabsTool = (tabs: Addon[]): Addon => ({
+  title: 'title',
+  render: () => (
+    <Consumer filter={tabsMapper}>
+      {(rp) => (
+        <Fragment>
+          <TabBar key="tabs">
+            {tabs
+              .filter((p) => !p.hidden)
+              .map((t, index) => {
+                const to = t.route(rp);
+                const isActive = rp.path === to;
+                return (
+                  <S.UnstyledLink key={t.id || `l${index}`} to={to}>
+                    <TabButton disabled={t.disabled} active={isActive}>
+                      {t.title}
+                    </TabButton>
+                  </S.UnstyledLink>
+                );
+              })}
+          </TabBar>
+          <Separator />
+        </Fragment>
+      )}
+    </Consumer>
+  ),
+});
+
+export const defaultTools: Addon[] = [zoomTool];
+export const defaultToolsExtra: Addon[] = [fullScreenTool, ejectTool, copyTool];
+
+const useTools = (
+  getElements: API['getElements'],
+  tabs: Addon[],
+  viewMode: PreviewProps['viewMode'],
+  story: PreviewProps['story'],
+  location: PreviewProps['location'],
+  path: PreviewProps['path']
+) => {
+  const toolsFromConfig = useMemo(() => {
+    return getTools(getElements);
+  }, [getElements]);
+
+  const toolsExtraFromConfig = useMemo(() => {
+    return getToolsExtra(getElements);
+  }, [getElements]);
+
+  const tools = useMemo(() => {
+    return [...defaultTools, ...toolsFromConfig];
+  }, [defaultTools, toolsFromConfig]);
+
+  const toolsExtra = useMemo(() => {
+    return [...defaultToolsExtra, ...toolsExtraFromConfig];
+  }, [defaultToolsExtra, toolsExtraFromConfig]);
+
+  return useMemo(() => {
+    if (story && story.parameters) {
+      return filterTools(tools, toolsExtra, tabs, {
+        viewMode,
+        story,
+        location,
+        path,
+      });
+    }
+    return { left: tools, right: toolsExtra };
+  }, [viewMode, story, location, path, tools, toolsExtra, tabs]);
+};
+
+export interface ToolData {
+  isShown: boolean;
+  tabs: Addon[];
+  api: API;
+  story: Story | Group;
+}
+export const ToolRes: FunctionComponent<ToolData & RenderData> = ({
+  api,
+  story,
+  tabs,
+  isShown,
+  location,
+  path,
+  viewMode,
+}) => {
+  const { left, right } = useTools(api.getElements, tabs, viewMode, story, location, path);
+
+  return left || right ? (
+    <Toolbar key="toolbar" shown={isShown} border>
+      <Tools key="left" list={left} />
+      <Tools key="right" list={right} />
+    </Toolbar>
+  ) : null;
+};
+
+export const ToolbarComp: FunctionComponent<ToolData> = (p) => (
+  <Location>{(l) => <ToolRes {...l} {...p} />}</Location>
+);
+
+export const Tools: FunctionComponent<{
+  list: Addon[];
+}> = ({ list }) =>
+  list.filter(Boolean).reduce((acc, { render: Render, id, ...t }, index) => {
+    // @ts-ignore
+    const key = id || t.key || `f-${index}`;
+    return (
+      <Fragment key={key}>
+        {acc}
+        <Render />
+      </Fragment>
+    );
+  }, null as ReactElement);
+
+export function filterTools(
+  tools: Addon[],
+  toolsExtra: Addon[],
+  tabs: Addon[],
+  {
+    viewMode,
+    story,
+    location,
+    path,
+  }: {
+    viewMode: State['viewMode'];
+    story: PreviewProps['story'];
+    location: State['location'];
+    path: State['path'];
+  }
+) {
+  const tabsTool = createTabsTool(tabs);
+  const toolsLeft = [tabs.filter((p) => !p.hidden).length > 1 ? tabsTool : null, ...tools];
+  const toolsRight = [...toolsExtra];
+
+  const filter = (item: Partial<Addon>) =>
+    item &&
+    (!item.match ||
+      item.match({
+        storyId: story.id,
+        refId: story.refId,
+        viewMode,
+        location,
+        path,
+      }));
+
+  const left = toolsLeft.filter(filter);
+  const right = toolsRight.filter(filter);
+
+  return { left, right };
+}
diff --git a/lib/ui/src/components/preview/tools/copy.tsx b/lib/ui/src/components/preview/tools/copy.tsx
new file mode 100644
index 000000000000..332fcfa957f7
--- /dev/null
+++ b/lib/ui/src/components/preview/tools/copy.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import copy from 'copy-to-clipboard';
+import { IconButton, Icons } from '@storybook/components';
+import { Consumer, Combo } from '@storybook/api';
+import { Addon } from '@storybook/addons';
+import { stringifyQueryParams } from '../utils/stringifyQueryParams';
+
+const copyMapper = ({ state }: Combo) => {
+  const { storyId, refId, refs } = state;
+  const ref = refs[refId];
+
+  return {
+    refId,
+    baseUrl: ref
+      ? `${ref.url}/iframe.html`
+      : `${state.location.origin + state.location.pathname}iframe.html`,
+    storyId,
+    queryParams: state.customQueryParams,
+  };
+};
+
+export const copyTool: Addon = {
+  title: 'copy',
+  match: ({ viewMode }) => viewMode === 'story',
+  render: () => (
+    <Consumer filter={copyMapper}>
+      {({ baseUrl, storyId, queryParams }) =>
+        storyId ? (
+          <IconButton
+            key="copy"
+            onClick={() => copy(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`)}
+            title="Copy canvas link"
+          >
+            <Icons icon="copy" />
+          </IconButton>
+        ) : null
+      }
+    </Consumer>
+  ),
+};
diff --git a/lib/ui/src/components/preview/tools/eject.tsx b/lib/ui/src/components/preview/tools/eject.tsx
new file mode 100644
index 000000000000..107d3968582e
--- /dev/null
+++ b/lib/ui/src/components/preview/tools/eject.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconButton, Icons } from '@storybook/components';
+import { Consumer, Combo } from '@storybook/api';
+import { Addon } from '@storybook/addons';
+import { stringifyQueryParams } from '../utils/stringifyQueryParams';
+
+const ejectMapper = ({ state }: Combo) => {
+  const { storyId, refId, refs } = state;
+  const ref = refs[refId];
+
+  return {
+    refId,
+    baseUrl: ref
+      ? `${ref.url}/iframe.html`
+      : `${state.location.origin + state.location.pathname}iframe.html`,
+    storyId,
+    queryParams: state.customQueryParams,
+  };
+};
+
+export const ejectTool: Addon = {
+  title: 'eject',
+  match: ({ viewMode }) => viewMode === 'story',
+  render: () => (
+    <Consumer filter={ejectMapper}>
+      {({ baseUrl, storyId, queryParams }) =>
+        storyId ? (
+          <IconButton
+            key="opener"
+            href={`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`}
+            target="_blank"
+            title="Open canvas in new tab"
+          >
+            <Icons icon="share" />
+          </IconButton>
+        ) : null
+      }
+    </Consumer>
+  ),
+};
diff --git a/lib/ui/src/components/preview/tools/zoom.tsx b/lib/ui/src/components/preview/tools/zoom.tsx
new file mode 100644
index 000000000000..36519a843a10
--- /dev/null
+++ b/lib/ui/src/components/preview/tools/zoom.tsx
@@ -0,0 +1,68 @@
+import React, { Fragment, Component, FunctionComponent, SyntheticEvent } from 'react';
+
+import { Icons, IconButton, Separator } from '@storybook/components';
+import { Addon } from '@storybook/addons';
+
+const Context = React.createContext({ value: 1, set: (v: number) => {} });
+
+class ZoomProvider extends Component<{}, { value: number }> {
+  state = {
+    value: 1,
+  };
+
+  set = (value: number) => this.setState({ value });
+
+  render() {
+    const { children } = this.props;
+    const { set } = this;
+    const { value } = this.state;
+
+    return <Context.Provider value={{ value, set }}>{children}</Context.Provider>;
+  }
+}
+
+const { Consumer: ZoomConsumer } = Context;
+
+const cancel = (e: SyntheticEvent) => {
+  e.preventDefault();
+  return false;
+};
+
+const Zoom: FunctionComponent<{ set: Function; reset: Function }> = ({ set, reset }) => (
+  <Fragment>
+    <IconButton key="zoomin" onClick={(e: SyntheticEvent) => cancel(e) || set(0.8)} title="Zoom in">
+      <Icons icon="zoom" />
+    </IconButton>
+    <IconButton
+      key="zoomout"
+      onClick={(e: SyntheticEvent) => cancel(e) || set(1.25)}
+      title="Zoom out"
+    >
+      <Icons icon="zoomout" />
+    </IconButton>
+    <IconButton
+      key="zoomreset"
+      onClick={(e: SyntheticEvent) => cancel(e) || reset()}
+      title="Reset zoom"
+    >
+      <Icons icon="zoomreset" />
+    </IconButton>
+  </Fragment>
+);
+
+export { Zoom, ZoomConsumer, ZoomProvider };
+
+export const zoomTool: Addon = {
+  title: 'zoom',
+  match: ({ viewMode }) => viewMode === 'story',
+  render: () => (
+    <Fragment>
+      <ZoomConsumer>
+        {({ set, value }) => (
+          <Zoom key="zoom" set={(v: number) => set(value * v)} reset={() => set(1)} />
+        )}
+      </ZoomConsumer>
+      <Separator />
+    </Fragment>
+  ),
+};
diff --git a/lib/ui/src/components/preview/utils/components.ts b/lib/ui/src/components/preview/utils/components.ts
new file mode 100644
index 000000000000..2d8e80a30226
--- /dev/null
+++ b/lib/ui/src/components/preview/utils/components.ts
@@ -0,0 +1,49 @@
+import { styled } from '@storybook/theming';
+import { Link } from '@storybook/router';
+
+export const FrameWrap = styled.div<{ offset: number }>(({ offset }) => ({
+  position: 'absolute',
+  overflow: 'auto',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: offset,
+  zIndex: 3,
+  transition: 'all 0.1s linear',
+  height: `calc(100% - ${offset}px)`,
+  background: 'transparent',
+}));
+
+export const UnstyledLink = styled(Link)({
+  color: 'inherit',
+  textDecoration: 'inherit',
+  display: 'inline-block',
+});
+
+export const DesktopOnly = styled.span({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
+export const IframeWrapper = styled.div(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  width: '100%',
+  height: '100%',
+  background: theme.background.content,
+}));
+
+export const LoaderWrapper = styled.div(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  background: theme.background.content,
+  zIndex: 1,
+}));
diff --git a/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx b/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx
new file mode 100644
index 000000000000..6bdc9b5c42f9
--- /dev/null
+++ b/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx
@@ -0,0 +1,2 @@
+export const stringifyQueryParams = (queryParams: Record<string, string>) =>
+  Object.entries(queryParams).reduce((acc, [k, v]) => `${acc}&${k}=${v}`, '');
diff --git a/lib/ui/src/components/preview/utils/types.tsx b/lib/ui/src/components/preview/utils/types.tsx
new file mode 100644
index 000000000000..5148c54211f5
--- /dev/null
+++ b/lib/ui/src/components/preview/utils/types.tsx
@@ -0,0 +1,64 @@
+import { State, API, Story, Group } from '@storybook/api';
+import { FunctionComponent, ReactNode } from 'react';
+
+export type ViewMode = State['viewMode'];
+
+export interface PreviewProps {
+  api: API;
+  viewMode: ViewMode;
+  refs: State['refs'];
+  story: Group | Story;
+  docsOnly: boolean;
+  options: {
+    isFullscreen: boolean;
+    isToolshown: boolean;
+  };
+  id: string;
+  path: string;
+  location: State['location'];
+  queryParams: State['customQueryParams'];
+  customCanvas?: CustomCanvasRenderer;
+  description: string;
+  baseUrl: string;
+  withLoader: boolean;
+}
+
+export interface WrapperProps {
+  index: number;
+  children: ReactNode;
+  id: string;
+  storyId: string;
+  active: boolean;
+}
+
+export interface Wrapper {
+  render: FunctionComponent<WrapperProps>;
+}
+
+export interface ApplyWrappersProps {
+  wrappers: Wrapper[];
+  viewMode: State['viewMode'];
+  id: string;
+  storyId: string;
+  active: boolean;
+}
+
+export type CustomCanvasRenderer = (
+  storyId: string,
+  viewMode: State['viewMode'],
+  id: string,
+  baseUrl: string,
+  scale: number,
+  queryParams: Record<string, any>
+) => ReactNode;
+
+export interface FramesRendererProps {
+  story: Story | Group;
+  storyId: string;
+  refId: string;
+  baseUrl: string;
+  scale: number;
+  viewMode: ViewMode;
+  queryParams: State['customQueryParams'];
+  refs: State['refs'];
+}
diff --git a/lib/ui/src/components/preview/wrappers.tsx b/lib/ui/src/components/preview/wrappers.tsx
new file mode 100644
index 000000000000..b0680262341a
--- /dev/null
+++ b/lib/ui/src/components/preview/wrappers.tsx
@@ -0,0 +1,30 @@
+import React, { Fragment, FunctionComponent } from 'react';
+import { ApplyWrappersProps, Wrapper } from './utils/types';
+import { IframeWrapper } from './utils/components';
+
+export const ApplyWrappers: FunctionComponent<ApplyWrappersProps> = ({
+  wrappers,
+  id,
+  storyId,
+  active,
+  children,
+}) => {
+  return (
+    <Fragment>
+      {wrappers.reduceRight(
+        (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
+        children
+      )}
+    </Fragment>
+  );
+};
+
+export const defaultWrappers = [
+  {
+    render: (p) => (
+      <IframeWrapper id="storybook-preview-wrapper" hidden={!p.active}>
+        {p.children}
+      </IframeWrapper>
+    ),
+  } as Wrapper,
+];
diff --git a/lib/ui/src/components/preview/zoom.js b/lib/ui/src/components/preview/zoom.js
deleted file mode 100644
index 86a676822688..000000000000
--- a/lib/ui/src/components/preview/zoom.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Fragment, Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { Icons, IconButton } from '@storybook/components';
-
-const Context = React.createContext();
-
-class Provider extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  state = {
-    value: 1,
-  };
-
-  set = value => this.setState({ value });
-
-  render() {
-    const { children } = this.props;
-    const { set } = this;
-    const { value } = this.state;
-
-    return <Context.Provider value={{ value, set }}>{children}</Context.Provider>;
-  }
-}
-
-const { Consumer } = Context;
-
-const Zoom = ({ set, reset }) => (
-  <Fragment>
-    <IconButton key="zoomin" onClick={e => e.preventDefault() || set(0.8)} title="Zoom in">
-      <Icons icon="zoom" />
-    </IconButton>
-    <IconButton key="zoomout" onClick={e => e.preventDefault() || set(1.25)} title="Zoom out">
-      <Icons icon="zoomout" />
-    </IconButton>
-    <IconButton key="zoomreset" onClick={e => e.preventDefault() || reset()} title="Reset zoom">
-      <Icons icon="zoomreset" />
-    </IconButton>
-  </Fragment>
-);
-Zoom.propTypes = {
-  set: PropTypes.func.isRequired,
-  reset: PropTypes.func.isRequired,
-};
-
-export { Zoom, Consumer as ZoomConsumer, Provider as ZoomProvider };
diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
new file mode 100644
index 000000000000..04005431cd30
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Brand.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { styled, withTheme } from '@storybook/theming';
+
+import { StorybookLogo } from '@storybook/components';
+
+export const StorybookLogoStyled = styled(StorybookLogo)({
+  width: 'auto',
+  height: 22,
+  display: 'block',
+});
+
+export const Img = styled.img({
+  width: 'auto',
+  height: 'auto',
+  display: 'block',
+  maxWidth: '100%',
+});
+
+export const LogoLink = styled.a({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  color: 'inherit',
+  textDecoration: 'none',
+});
+
+export const Brand = withTheme(
+  ({
+    theme: {
+      brand: { title = 'Storybook', url = './', image },
+    },
+  }) => {
+    const targetValue = url === './' ? '' : '_blank';
+    if (image === undefined && url === null) {
+      return <StorybookLogoStyled alt={title} />;
+    }
+    if (image === undefined && url) {
+      return (
+        <LogoLink title={title} href={url} target={targetValue}>
+          <StorybookLogoStyled alt={title} />
+        </LogoLink>
+      );
+    }
+    if (image === null && url === null) {
+      return title;
+    }
+    if (image === null && url) {
+      return (
+        <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />
+      );
+    }
+    if (image && url === null) {
+      return <Img src={image} alt={title} />;
+    }
+    if (image && url) {
+      return (
+        <LogoLink title={title} href={url} target={targetValue}>
+          <Img src={image} alt={title} />
+        </LogoLink>
+      );
+    }
+    return null;
+  }
+);
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
new file mode 100644
index 000000000000..0ea0a3d08391
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { themes, ThemeProvider, ensure } from '@storybook/theming';
+import { action } from '@storybook/addon-actions';
+
+import { Heading } from './Heading';
+
+const { light } = themes;
+const theme = ensure(light);
+
+export default {
+  component: Heading,
+  title: 'UI/Sidebar/Heading',
+  decorators: [
+    (storyFn: any) => (
+      <div
+        style={{
+          maxWidth: '240px',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const menuItems = [
+  { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
+  { title: 'Menu Item 2', onClick: action('onActivateMenuItem'), id: '2' },
+  { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
+];
+
+export const menuHighlighted = () => <Heading menuHighlighted menu={menuItems} />;
+
+export const standardData = { menu: menuItems };
+
+export const standard = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: undefined,
+        url: undefined,
+        image: undefined,
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const standardNoLink = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: undefined,
+        url: null,
+        image: undefined,
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const linkAndText = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My title',
+        url: 'https://example.com',
+        image: null,
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const onlyText = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My title',
+        url: null,
+        image: null,
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const longText = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My title is way to long to actually fit',
+        url: null,
+        image: null,
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const customBrandImage = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My Title',
+        url: 'https://example.com',
+        image: 'https://via.placeholder.com/150x22',
+      },
+    }}
+  >
+    <Heading menu={menuItems} />
+  </ThemeProvider>
+);
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
new file mode 100644
index 000000000000..a7e3cda166b4
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -0,0 +1,50 @@
+import React, { FunctionComponent, ComponentProps } from 'react';
+import { styled } from '@storybook/theming';
+
+import { Brand } from './Brand';
+import { SidebarMenu, MenuList } from './Menu';
+
+export interface HeadingProps {
+  menuHighlighted?: boolean;
+  menu: MenuList;
+}
+
+const BrandArea = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  fontWeight: theme.typography.weight.bold,
+  marginRight: 40,
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  minHeight: 22,
+
+  '& > *': {
+    maxWidth: '100%',
+    height: 'auto',
+    width: 'auto',
+    display: 'block',
+  },
+}));
+
+const HeadingWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  position: 'relative',
+});
+
+export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
+  menuHighlighted = false,
+  menu,
+  ...props
+}) => {
+  return (
+    <HeadingWrapper {...props}>
+      <BrandArea>
+        <Brand />
+      </BrandArea>
+
+      <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
+    </HeadingWrapper>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/ListItemIcon.stories.tsx b/lib/ui/src/components/sidebar/ListItemIcon.stories.tsx
deleted file mode 100644
index 849a0890d19c..000000000000
--- a/lib/ui/src/components/sidebar/ListItemIcon.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { TooltipLinkList } from '@storybook/components';
-import ListItemIcon from './ListItemIcon';
-
-export default {
-  component: ListItemIcon,
-  title: 'UI/Sidebar/ListItemIcon',
-};
-
-export const all = () => (
-  <TooltipLinkList
-    links={[
-      { title: 'has icon', left: <ListItemIcon icon="check" />, id: 'icon' },
-      {
-        title: 'has imgSrc',
-        left: <ListItemIcon imgSrc="https://via.placeholder.com/20" />,
-        id: 'img',
-      },
-      { title: 'has neither', left: <ListItemIcon />, id: 'non' },
-    ]}
-  />
-);
diff --git a/lib/ui/src/components/sidebar/ListItemIcon.tsx b/lib/ui/src/components/sidebar/ListItemIcon.tsx
deleted file mode 100644
index 6c14d2ddf158..000000000000
--- a/lib/ui/src/components/sidebar/ListItemIcon.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { styled, css } from '@storybook/theming';
-import { Icons } from '@storybook/components';
-
-const sharedStyles = css`
-  height: 10px;
-  width: 10px;
-  margin-left: -5px;
-  margin-right: -5px;
-  display: block;
-`;
-
-const Icon = styled(Icons)`
-  ${sharedStyles};
-  color: ${props => props.theme.color.secondary};
-`;
-
-const Img = styled.img`
-  ${sharedStyles};
-`;
-
-const Placeholder = styled.div`
-  ${sharedStyles};
-`;
-
-export interface ListItemIconProps {
-  icon?: ComponentProps<typeof Icons>['icon'];
-  imgSrc?: string;
-}
-
-const ListItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
-  if (icon) {
-    return <Icon icon={icon} />;
-  }
-  if (imgSrc) {
-    return <Img src={imgSrc} alt="image" />;
-  }
-  return <Placeholder />;
-};
-
-export default ListItemIcon;
diff --git a/lib/ui/src/components/sidebar/Loader.tsx b/lib/ui/src/components/sidebar/Loader.tsx
new file mode 100644
index 000000000000..4b2fec13034a
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Loader.tsx
@@ -0,0 +1,55 @@
+import React, { FunctionComponent, Fragment } from 'react';
+import { styled } from '@storybook/theming';
+
+const LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3];
+
+const Loadingitem = styled.div<{
+  depth?: number;
+}>(
+  {
+    cursor: 'progress',
+    fontSize: 13,
+    height: '16px',
+    marginTop: 4,
+    marginBottom: 4,
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  ({ depth = 0 }) => ({
+    marginLeft: depth * 15,
+    maxWidth: 85 - depth * 5,
+  }),
+  ({ theme }) => theme.animation.inlineGlow,
+  ({ theme }) => ({
+    background: theme.appBorderColor,
+  })
+);
+
+export const Contained = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingLeft: 20,
+  paddingRight: 20,
+});
+
+interface LoaderProps {
+  /**
+   * The number of lines to display in the loader.
+   * These are indented according to a pre-defined sequence of depths.
+   */
+  size: number;
+}
+
+export const Loader: FunctionComponent<LoaderProps> = ({ size }) => {
+  const repeats = Math.ceil(size / LOADER_SEQUENCE.length);
+  // Creates an array that repeats LOADER_SEQUENCE depths in order, until the size is reached.
+  const sequence = Array.from(Array(repeats)).fill(LOADER_SEQUENCE).flat().slice(0, size);
+  return (
+    <Fragment>
+      {sequence.map((depth, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Loadingitem depth={depth} key={index} />
+      ))}
+    </Fragment>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Menu.stories.tsx b/lib/ui/src/components/sidebar/Menu.stories.tsx
new file mode 100644
index 000000000000..13c78505e96a
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { TooltipLinkList } from '@storybook/components';
+import { MenuItemIcon } from './Menu';
+
+export default {
+  component: MenuItemIcon,
+  title: 'UI/Sidebar/Menu',
+};
+
+export const all = () => (
+  <TooltipLinkList
+    links={[
+      { title: 'has icon', left: <MenuItemIcon icon="check" />, id: 'icon' },
+      {
+        title: 'has imgSrc',
+        left: <MenuItemIcon imgSrc="https://via.placeholder.com/20" />,
+        id: 'img',
+      },
+      { title: 'has neither', left: <MenuItemIcon />, id: 'non' },
+    ]}
+  />
+);
diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx
new file mode 100644
index 000000000000..558f08b04dff
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Menu.tsx
@@ -0,0 +1,101 @@
+import React, { FunctionComponent, useMemo, ComponentProps } from 'react';
+
+import { styled } from '@storybook/theming';
+import { WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';
+
+export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
+
+export type MenuButtonProps = ComponentProps<typeof Button> &
+  // FIXME: Button should extends from the native <button>
+  ComponentProps<'button'> & {
+    highlighted: boolean;
+  };
+
+const sharedStyles = {
+  height: 10,
+  width: 10,
+  marginLeft: -5,
+  marginRight: -5,
+  display: 'block',
+};
+
+const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
+  color: theme.color.secondary,
+}));
+
+const Img = styled.img(sharedStyles);
+const Placeholder = styled.div(sharedStyles);
+
+export interface ListItemIconProps {
+  icon?: ComponentProps<typeof Icons>['icon'];
+  imgSrc?: string;
+}
+
+export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
+  if (icon) {
+    return <Icon icon={icon} />;
+  }
+  if (imgSrc) {
+    return <Img src={imgSrc} alt="image" />;
+  }
+  return <Placeholder />;
+};
+
+const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => ({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  overflow: 'visible',
+  padding: 7,
+
+  ...(highlighted && {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      width: 8,
+      height: 8,
+      borderRadius: 8,
+      background: theme.color.positive,
+    },
+  }),
+}));
+
+type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
+
+const SidebarMenuList: FunctionComponent<{
+  menu: MenuList;
+  onHide: () => void;
+}> = ({ menu, onHide }) => {
+  const links = useMemo(() => {
+    return menu.map(({ onClick, ...rest }) => ({
+      ...rest,
+      onClick: ((event, item) => {
+        if (onClick) {
+          onClick(event, item);
+        }
+        onHide();
+      }) as ClickHandler,
+    }));
+  }, [menu]);
+  return <TooltipLinkList links={links} />;
+};
+
+export const SidebarMenu: FunctionComponent<{
+  menu: MenuList;
+  isHighlighted: boolean;
+}> = ({ isHighlighted, menu }) => {
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      closeOnClick
+      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
+    >
+      <MenuButton outline small containsIcon highlighted={isHighlighted} title="Shortcuts">
+        <Icons icon="ellipsis" />
+      </MenuButton>
+    </WithTooltip>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/RefBlocks.tsx b/lib/ui/src/components/sidebar/RefBlocks.tsx
new file mode 100644
index 000000000000..22bf7bf9dfe2
--- /dev/null
+++ b/lib/ui/src/components/sidebar/RefBlocks.tsx
@@ -0,0 +1,334 @@
+import { window, document } from 'global';
+import React, {
+  FunctionComponent,
+  useState,
+  useCallback,
+  Fragment,
+  useContext,
+  ComponentProps,
+} from 'react';
+
+import { Icons, WithTooltip, Spaced, Button } from '@storybook/components';
+import { logger } from '@storybook/client-logger';
+import { useStorybookApi } from '@storybook/api';
+import { styled } from '@storybook/theming';
+import { Location } from '@storybook/router';
+
+import { Tree } from './Tree/Tree';
+import { Loader, Contained } from './Loader';
+import { ListItem } from './Tree/ListItem';
+import { ExpanderContext } from './Tree/State';
+
+import { Item, DataSet, BooleanSet } from './RefHelpers';
+
+export type ListitemProps = ComponentProps<typeof ListItem>;
+
+const Section = styled.section();
+
+const RootHeading = styled.div(({ theme }) => ({
+  letterSpacing: '0.35em',
+  textTransform: 'uppercase',
+  fontWeight: theme.typography.weight.black,
+  fontSize: theme.typography.size.s1 - 1,
+  lineHeight: '24px',
+  color: theme.color.mediumdark,
+  margin: '0 20px',
+}));
+
+const Text = styled.p(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  margin: 0,
+}));
+
+const RedIcon = styled(Icons)(({ theme }) => ({
+  color: theme.color.negative,
+}));
+
+const Head: FunctionComponent<ListitemProps> = (props) => {
+  const api = useStorybookApi();
+  const { setExpanded, expandedSet } = useContext(ExpanderContext);
+  const { id, isComponent, childIds, refId } = props;
+
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!expandedSet[id] && isComponent && childIds && childIds.length) {
+        api.selectStory(childIds[0], undefined, { ref: refId });
+      }
+      setExpanded((s) => ({ ...s, [id]: !s[id] }));
+    },
+    [id, expandedSet[id]]
+  );
+  return <ListItem onClick={onClick} {...props} href={`#${id}`} />;
+};
+
+const Leaf: FunctionComponent<ListitemProps> = (props) => {
+  const api = useStorybookApi();
+  const { setExpanded } = useContext(ExpanderContext);
+  const { id, refId } = props;
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      api.selectStory(id, undefined, { ref: refId });
+      setExpanded((s) => ({ ...s, [id]: !s[id] }));
+    },
+    [id]
+  );
+
+  return (
+    <Location>
+      {({ viewMode }) => (
+        <ListItem onClick={onClick} {...props} href={`?path=/${viewMode}/${id}`} />
+      )}
+    </Location>
+  );
+};
+
+const ErrorDisplay = styled.pre(
+  {
+    width: 420,
+    boxSizing: 'border-box',
+    borderRadius: 8,
+    overflow: 'auto',
+    whiteSpace: 'pre',
+  },
+  ({ theme }) => ({
+    color: theme.color.dark,
+  })
+);
+
+const ErrorName = styled.strong(({ theme }) => ({
+  color: theme.color.orange,
+}));
+const ErrorImportant = styled.strong(({ theme }) => ({
+  color: theme.color.ancillary,
+  textDecoration: 'underline',
+}));
+const ErrorDetail = styled.em(({ theme }) => ({
+  color: theme.color.mediumdark,
+}));
+
+const firstLineRegex = /(Error): (.*)\n/;
+const linesRegex = /at (?:(.*) )?\(?(.+)\)?/;
+const ErrorFormatter: FunctionComponent<{ error: Error }> = ({ error }) => {
+  if (!error) {
+    return <Fragment>this error has no stack or message</Fragment>;
+  }
+  if (!error.stack) {
+    return <Fragment>{error.message || 'this error has no stack or message'}</Fragment>;
+  }
+
+  const input = error.stack.toString();
+  const match = input.match(firstLineRegex);
+
+  if (!match) {
+    return <Fragment>{input}</Fragment>;
+  }
+
+  const [, type, name] = match;
+
+  const rawLines = input.split(/\n/).slice(1);
+  const [, ...lines] = rawLines
+    .map((line) => {
+      const r = line.match(linesRegex);
+
+      return r ? { name: r[1], location: r[2].replace(document.location.origin, '') } : null;
+    })
+    .filter(Boolean);
+
+  return (
+    <Fragment>
+      <span>{type}</span>: <ErrorName>{name}</ErrorName>
+      <br />
+      {lines.map((l, i) =>
+        l.name ? (
+          // eslint-disable-next-line react/no-array-index-key
+          <Fragment key={i}>
+            {'  '}at <ErrorImportant>{l.name}</ErrorImportant> (
+            <ErrorDetail>{l.location}</ErrorDetail>)
+            <br />
+          </Fragment>
+        ) : (
+          // eslint-disable-next-line react/no-array-index-key
+          <Fragment key={i}>
+            {'  '}at <ErrorDetail>{l.location}</ErrorDetail>
+            <br />
+          </Fragment>
+        )
+      )}
+    </Fragment>
+  );
+};
+
+export const AuthBlock: FunctionComponent<{ authUrl: string; id: string }> = ({ authUrl, id }) => {
+  const [isAuthAttempted, setAuthAttempted] = useState(false);
+
+  const refresh = useCallback(() => {
+    window.document.location.reload();
+  }, []);
+
+  const open = useCallback((e) => {
+    e.preventDefault();
+    const childWindow = window.open(authUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
+
+    // poll for window to close
+    const timer = setInterval(() => {
+      if (!childWindow) {
+        logger.error('unable to access authUrl window');
+        clearInterval(timer);
+      } else if (childWindow.closed) {
+        clearInterval(timer);
+        setAuthAttempted(true);
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <Contained>
+      <Spaced>
+        {isAuthAttempted ? (
+          <Fragment>
+            <Text>
+              Authentication on <strong>{authUrl}</strong> seems to have concluded, refresh the page
+              to fetch this storybook
+            </Text>
+            <div>
+              <Button small gray onClick={refresh}>
+                <Icons icon="sync" />
+                Refresh the page
+              </Button>
+            </div>
+          </Fragment>
+        ) : (
+          <Fragment>
+            <Text>Browse this secure storybook</Text>
+            <div>
+              <Button small gray onClick={open}>
+                <Icons icon="lock" />
+                Login
+              </Button>
+            </div>
+          </Fragment>
+        )}
+      </Spaced>
+    </Contained>
+  );
+};
+
+export const ErrorBlock: FunctionComponent<{ error: Error }> = ({ error }) => (
+  <Contained>
+    <Spaced>
+      <Text>Ow no! something went wrong loading this storybook</Text>
+      <WithTooltip
+        trigger="click"
+        closeOnClick={false}
+        tooltip={
+          <ErrorDisplay>
+            <ErrorFormatter error={error} />
+          </ErrorDisplay>
+        }
+      >
+        <Button small gray>
+          <Icons icon="doclist" />
+          View error
+        </Button>
+      </WithTooltip>
+    </Spaced>
+  </Contained>
+);
+
+const FlexSpaced = styled(Spaced)({
+  display: 'flex',
+});
+const WideSpaced = styled(Spaced)({
+  flex: 1,
+});
+
+export const EmptyBlock: FunctionComponent<any> = ({ isMain }) => (
+  <Contained>
+    <FlexSpaced col={1}>
+      <WideSpaced>
+        {/*  */}
+        <div>
+          <Text>
+            <strong>Ow now! {isMain ? 'Your storybook' : 'this ref'} is empty!</strong>
+          </Text>
+        </div>
+        {isMain ? (
+          <Fragment>
+            <div>
+              <Text>
+                Perhaps the glob specified in <code>main.js</code> found no files?
+              </Text>
+            </div>
+            <div>
+              <Text>Or your story-files don't define any stories?</Text>
+            </div>
+          </Fragment>
+        ) : (
+          <div>
+            <Text>This ref defined no stories</Text>
+          </div>
+        )}
+      </WideSpaced>
+      <RedIcon icon="info" width={14} height={14} />
+    </FlexSpaced>
+  </Contained>
+);
+
+export const LoaderBlock: FunctionComponent<{ isMain: boolean }> = ({ isMain }) => (
+  <Contained>
+    <Loader size={isMain ? 17 : 5} />
+  </Contained>
+);
+
+const TreeComponents = {
+  Head,
+  Leaf,
+  Branch: Tree,
+  List: styled.div({}),
+};
+export const ContentBlock: FunctionComponent<{
+  others: Item[];
+  dataSet: DataSet;
+  selectedSet: BooleanSet;
+  expandedSet: BooleanSet;
+  roots: Item[];
+}> = ({ others, dataSet, selectedSet, expandedSet, roots }) => (
+  <Fragment>
+    <Spaced row={1.5}>
+      {others.length ? (
+        <Section data-title="categorized" key="categorized">
+          {others.map(({ id }) => (
+            <Tree
+              key={id}
+              depth={0}
+              dataset={dataSet}
+              selected={selectedSet}
+              expanded={expandedSet}
+              root={id}
+              {...TreeComponents}
+            />
+          ))}
+        </Section>
+      ) : null}
+
+      {roots.map(({ id, name, children }) => (
+        <Section data-title={name} key={id}>
+          <RootHeading className="sidebar-subheading">{name}</RootHeading>
+          {children.map((child) => (
+            <Tree
+              key={child}
+              depth={0}
+              dataset={dataSet}
+              selected={selectedSet}
+              expanded={expandedSet}
+              root={child}
+              {...TreeComponents}
+            />
+          ))}
+        </Section>
+      ))}
+    </Spaced>
+  </Fragment>
+);
diff --git a/lib/ui/src/components/sidebar/RefHelpers.tsx b/lib/ui/src/components/sidebar/RefHelpers.tsx
new file mode 100644
index 000000000000..bd026240486a
--- /dev/null
+++ b/lib/ui/src/components/sidebar/RefHelpers.tsx
@@ -0,0 +1,29 @@
+import { StoriesHash, State } from '@storybook/api';
+
+export type Refs = State['refs'];
+export type RefType = Refs[keyof Refs];
+export type BooleanSet = Record<string, boolean>;
+export type Item = StoriesHash[keyof StoriesHash];
+export type DataSet = Record<string, Item>;
+export type FilteredType = 'filtered' | 'unfiltered';
+
+export const getStateType = (
+  isLoading: boolean,
+  isAuthRequired: boolean,
+  isError: boolean,
+  isEmpty: boolean
+) => {
+  if (isAuthRequired) {
+    return 'auth';
+  }
+  if (isError) {
+    return 'error';
+  }
+  if (isLoading) {
+    return 'loading';
+  }
+  if (isEmpty) {
+    return 'empty';
+  }
+  return 'ready';
+};
diff --git a/lib/ui/src/components/sidebar/RefIndicator.tsx b/lib/ui/src/components/sidebar/RefIndicator.tsx
new file mode 100644
index 000000000000..0f36d5b74f6a
--- /dev/null
+++ b/lib/ui/src/components/sidebar/RefIndicator.tsx
@@ -0,0 +1,225 @@
+import React, { FunctionComponent, useMemo, ComponentProps, useCallback, forwardRef } from 'react';
+
+import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { useStorybookApi } from '@storybook/api';
+
+import { getStateType, RefType } from './RefHelpers';
+import { MenuItemIcon } from './Menu';
+
+export type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
+export interface IndicatorIconProps {
+  type: ReturnType<typeof getStateType>;
+}
+export interface CurrentVersionProps {
+  url: string;
+  versions: RefType['versions'];
+}
+
+const IndicatorPlacement = styled.aside(
+  ({ theme }) => ({
+    height: 14,
+    display: 'flex',
+
+    '& > * + *': {
+      marginLeft: theme.layoutMargin,
+    },
+  }),
+  ({ theme }) => ({ color: theme.color.mediumdark })
+);
+
+const IndicatorIcon: FunctionComponent<IndicatorIconProps> = ({ type }) => {
+  let icon: ComponentProps<typeof Icons>['icon'];
+
+  switch (true) {
+    case type === 'error': {
+      icon = 'alert';
+      break;
+    }
+    default: {
+      icon = 'globe';
+    }
+  }
+
+  return <Icons width="14" height="14" icon={icon} />;
+};
+
+const Message = styled.a(({ theme }) => ({
+  textDecoration: 'none',
+  lineHeight: '18px',
+  padding: 10,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  color: theme.color.darker,
+  '&:hover': {
+    background: theme.background.hoverable,
+    color: theme.color.darker,
+  },
+  '&:link': {
+    color: theme.color.darker,
+  },
+  '&:active': {
+    color: theme.color.darker,
+  },
+  '&:focus': {
+    color: theme.color.darker,
+  },
+  '& > *': {
+    flex: 1,
+  },
+  '& > svg': {
+    marginTop: 5,
+    width: 20,
+    marginRight: 10,
+    flex: 'unset',
+  },
+}));
+
+export const MessageWrapper = styled.div({
+  width: 280,
+  boxSizing: 'border-box',
+  borderRadius: 8,
+  overflow: 'hidden',
+});
+
+const BlueIcon = styled(Icons)(({ theme }) => ({
+  color: theme.color.secondary,
+}));
+
+const YellowIcon = styled(Icons)(({ theme }) => ({
+  color: theme.color.gold,
+}));
+
+const Version = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 11,
+
+  '& > * + *': {
+    marginLeft: 4,
+  },
+});
+
+const CurrentVersion: FunctionComponent<CurrentVersionProps> = ({ url, versions }) => {
+  const currentVersionId = useMemo(() => Object.entries(versions).find(([k, v]) => v === url)[0], [
+    url,
+    versions,
+  ]);
+
+  return (
+    <Version>
+      <span>{currentVersionId}</span>
+      <Icons width="12" height="12" icon="chevrondown" />
+    </Version>
+  );
+};
+
+export const RefIndicator = forwardRef<
+  HTMLElement,
+  RefType & {
+    state: ReturnType<typeof getStateType>;
+  }
+>(({ state, ...ref }, forwardedRef) => {
+  const api = useStorybookApi();
+  const list = useMemo(() => Object.values(ref.stories || {}), [ref.stories]);
+  const componentCount = useMemo(() => list.filter((v) => v.isComponent).length, [list]);
+  const leafCount = useMemo(() => list.filter((v) => v.isLeaf).length, [list]);
+
+  const changeVersion = useCallback(
+    ((event, item) => {
+      event.preventDefault();
+      api.changeRefVersion(ref.id, item.href);
+    }) as ClickHandler,
+    []
+  );
+
+  return (
+    <IndicatorPlacement ref={forwardedRef}>
+      <WithTooltip
+        placement="bottom-start"
+        trigger="click"
+        tooltip={
+          <MessageWrapper>
+            <Spaced row={0}>
+              {state === 'loading' && <LoadingMessage url={ref.url} />}
+              {state === 'ready' && (
+                <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
+              )}
+              {ref.type === 'auto-inject' && state !== 'error' && <PerformanceDegradedMessage />}
+              {state === 'error' && <ErrorOccurredMessage />}
+            </Spaced>
+          </MessageWrapper>
+        }
+      >
+        <IndicatorIcon type={state} />
+      </WithTooltip>
+
+      {ref.versions ? (
+        <WithTooltip
+          placement="bottom-start"
+          trigger="click"
+          tooltip={
+            <TooltipLinkList
+              links={Object.entries(ref.versions).map(([id, href]) => ({
+                left: href === ref.url ? <MenuItemIcon icon="check" /> : <span />,
+                id,
+                title: id,
+                href,
+                onClick: changeVersion,
+              }))}
+            />
+          }
+        >
+          <CurrentVersion url={ref.url} versions={ref.versions} />
+        </WithTooltip>
+      ) : null}
+    </IndicatorPlacement>
+  );
+});
+
+const PerformanceDegradedMessage: FunctionComponent = () => (
+  <Message href="https://storybook.js.org" target="_blank">
+    <YellowIcon icon="lightning" />
+    <div>
+      <strong>Reduce lag</strong>
+      <div>Learn how to speed up Storybook Composition performance</div>
+    </div>
+  </Message>
+);
+
+const ErrorOccurredMessage: FunctionComponent = () => (
+  <Message href="https://storybook.js.org" target="_blank">
+    <YellowIcon icon="book" />
+    <div>
+      <strong>A problem occurred</strong>
+      <div>Explore the documentation</div>
+    </div>
+  </Message>
+);
+
+const ReadyMessage: FunctionComponent<{
+  url: string;
+  componentCount: number;
+  leafCount: number;
+}> = ({ url, componentCount, leafCount }) => (
+  <Message href={url} target="_blank">
+    <BlueIcon icon="globe" />
+    <div>
+      <strong>View external storybook</strong>
+      <div>
+        Explore {componentCount} components and {leafCount} stories in a new browser tab
+      </div>
+    </div>
+  </Message>
+);
+
+const LoadingMessage: FunctionComponent<{ url: string }> = ({ url }) => (
+  <Message href={url} target="_blank">
+    <BlueIcon icon="time" />
+    <div>
+      <strong>Please wait</strong>
+      <div>This storybook is being loaded, explore in a new browser tab</div>
+    </div>
+  </Message>
+);
diff --git a/lib/ui/src/components/sidebar/Refs.tsx b/lib/ui/src/components/sidebar/Refs.tsx
new file mode 100644
index 000000000000..ab790800064c
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Refs.tsx
@@ -0,0 +1,111 @@
+import React, { FunctionComponent, MouseEvent, useMemo, useState, useRef } from 'react';
+import { styled } from '@storybook/theming';
+
+import { ExpanderContext, useDataset } from './Tree/State';
+import { Expander } from './Tree/ListItem';
+import { RefIndicator } from './RefIndicator';
+import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock, EmptyBlock } from './RefBlocks';
+import { getStateType, RefType } from './RefHelpers';
+
+export interface RefProps {
+  storyId: string;
+  filter: string;
+  isHidden: boolean;
+}
+
+const RefHead = styled.button({
+  alignItems: 'center',
+  background: 'transparent',
+  border: 'none',
+  boxSizing: 'content-box',
+  cursor: 'pointer',
+  display: 'flex',
+  marginLeft: -20,
+  padding: 0,
+  paddingLeft: 20,
+  position: 'relative',
+  textAlign: 'left',
+  width: '100%',
+});
+
+const RefTitle = styled.header(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s2,
+  color: theme.color.darkest,
+
+  flex: 1,
+  height: 24,
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  paddingRight: theme.layoutMargin,
+  overflow: 'hidden',
+
+  lineHeight: '24px',
+}));
+
+const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
+  position: 'relative',
+  marginLeft: -20,
+  marginRight: -20,
+  marginTop: isMain ? undefined : 4,
+}));
+
+export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const indicatorRef = useRef<HTMLElement>(null);
+
+  const { stories, id: key, title = key, storyId, filter, isHidden = false, authUrl, error } = ref;
+  const { dataSet, expandedSet, length, others, roots, setExpanded, selectedSet } = useDataset(
+    stories,
+    filter,
+    storyId
+  );
+
+  const handleClick = ({ target }: MouseEvent) => {
+    // Don't fire if the click is from the indicator.
+    if (target === indicatorRef.current || indicatorRef.current?.contains(target as Node)) return;
+    setIsExpanded(!isExpanded);
+  };
+
+  const combo = useMemo(() => ({ setExpanded, expandedSet }), [setExpanded, expandedSet]);
+
+  const isMain = key === 'storybook_internal';
+
+  const isLoadingMain = !ref.ready && isMain;
+  const isLoadingInjected = ref.type === 'auto-inject' && !ref.ready;
+
+  const isLoading = isLoadingMain || isLoadingInjected || ref.type === 'unknown';
+  const isError = !!error;
+  const isEmpty = !isLoading && length === 0;
+  const isAuthRequired = !!authUrl;
+
+  const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
+
+  return isHidden ? null : (
+    <ExpanderContext.Provider value={combo}>
+      {isMain ? null : (
+        <RefHead
+          aria-label={`${isExpanded ? 'Hide' : 'Show'} ${title} stories`}
+          aria-expanded={isExpanded}
+          type="button"
+          onClick={handleClick}
+        >
+          <Expander className="sidebar-ref-expander" depth={0} isExpanded={isExpanded} />
+          <RefTitle title={title}>{title}</RefTitle>
+          <RefIndicator {...ref} state={state} ref={indicatorRef} />
+        </RefHead>
+      )}
+      {isExpanded && (
+        <Wrapper data-title={title} isMain={isMain}>
+          {state === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
+          {state === 'error' && <ErrorBlock error={error} />}
+          {state === 'loading' && <LoaderBlock isMain={isMain} />}
+          {state === 'empty' && <EmptyBlock isMain={isMain} />}
+          {state === 'ready' && (
+            <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
+          )}
+        </Wrapper>
+      )}
+    </ExpanderContext.Provider>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Search.stories.tsx b/lib/ui/src/components/sidebar/Search.stories.tsx
new file mode 100644
index 000000000000..6de4aee8fd0d
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Search.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { actions as makeActions } from '@storybook/addon-actions';
+
+import { Search } from './Search';
+
+export default {
+  component: Search,
+  title: 'UI/Sidebar/Search',
+  decorators: [(storyFn: any) => <div style={{ width: '240px' }}>{storyFn()}</div>],
+};
+
+const actions = makeActions('onChange');
+const pureActions = { ...actions, ...makeActions('onSetFocussed') };
+
+export const simple = () => <Search {...actions} />;
+
+export const focussed = () => <Search defaultFocussed {...pureActions} />;
+
+export const filledIn = () => <Search defaultValue="Searchstring" {...pureActions} />;
diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx
new file mode 100644
index 000000000000..915143f72d39
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Search.tsx
@@ -0,0 +1,145 @@
+import React, { ComponentProps, useState, ChangeEvent, FunctionComponent } from 'react';
+import { styled } from '@storybook/theming';
+import { opacify } from 'polished';
+import { Icons } from '@storybook/components';
+
+export type FilterFieldProps = ComponentProps<'input'>;
+
+export type CancelButtonProps = ComponentProps<'button'>;
+export type SearchProps = Omit<FilterFieldProps, 'onChange'> & {
+  onChange: (arg: string) => void;
+  defaultFocussed?: boolean;
+};
+export type FilterFormProps = ComponentProps<'form'> & {
+  focussed: boolean;
+};
+
+const FilterField = styled.input<FilterFieldProps>(({ theme }) => ({
+  // resets
+  appearance: 'none',
+  border: 'none',
+  boxSizing: 'inherit',
+  display: 'block',
+  outline: 'none',
+  width: '100%',
+  background: 'transparent',
+  padding: 0,
+  fontSize: 'inherit',
+
+  '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
+
+  '::placeholder': {
+    color: theme.color.mediumdark,
+  },
+
+  '&:placeholder-shown ~ button': {
+    // hide cancel button using CSS only
+    opacity: 0,
+  },
+}));
+
+const CancelButton = styled.button<CancelButtonProps>(({ theme }) => ({
+  border: 0,
+  margin: 0,
+  padding: 4,
+  textDecoration: 'none',
+
+  background: theme.appBorderColor,
+  borderRadius: '1em',
+  cursor: 'pointer',
+  opacity: 1,
+  transition: 'all 150ms ease-out',
+
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  right: 2,
+
+  '> svg': {
+    display: 'block',
+    height: 8,
+    width: 8,
+    color: theme.input.color,
+    transition: 'all 150ms ease-out',
+  },
+
+  '&:hover': {
+    background: opacify(0.1, theme.appBorderColor),
+  },
+}));
+
+const FilterForm = styled.form<FilterFormProps>(({ theme, focussed }) => ({
+  transition: 'all 150ms ease-out',
+  borderBottom: '1px solid transparent',
+  borderBottomColor: focussed
+    ? opacify(0.3, theme.appBorderColor)
+    : opacify(0.1, theme.appBorderColor),
+  outline: 0,
+  position: 'relative',
+  color: theme.input.color,
+
+  input: {
+    color: theme.input.color,
+    fontSize: theme.typography.size.s2 - 1,
+    lineHeight: '20px',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+
+  '> svg': {
+    transition: 'all 150ms ease-out',
+    position: 'absolute',
+    top: '50%',
+    height: 12,
+    width: 12,
+    transform: 'translateY(-50%)',
+    zIndex: 1,
+
+    background: 'transparent',
+
+    path: {
+      transition: 'all 150ms ease-out',
+      fill: 'currentColor',
+      opacity: focussed ? 1 : 0.3,
+    },
+  },
+}));
+
+export const Search: FunctionComponent<SearchProps> = ({
+  className,
+  onChange,
+  defaultFocussed = false,
+  defaultValue,
+  ...props
+}) => {
+  const [focussed, onSetFocussed] = useState(defaultFocussed);
+  return (
+    <FilterForm
+      autoComplete="off"
+      focussed={focussed}
+      className={className}
+      onReset={() => onChange('')}
+      onSubmit={(e) => e.preventDefault()}
+    >
+      <FilterField
+        type="text"
+        id="storybook-explorer-searchfield"
+        onFocus={() => onSetFocussed(true)}
+        onBlur={() => onSetFocussed(false)}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+        }}
+        defaultValue={defaultValue}
+        {...props}
+        placeholder={focussed ? 'Type to search...' : 'Press "/" to search...'}
+        aria-label="Search stories"
+      />
+      <Icons icon="search" />
+      <CancelButton type="reset" value="reset" title="Clear search">
+        <Icons icon="closeAlt" />
+      </CancelButton>
+    </FilterForm>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Sidebar.stories.mdx b/lib/ui/src/components/sidebar/Sidebar.stories.mdx
deleted file mode 100644
index f9f88a8c80a0..000000000000
--- a/lib/ui/src/components/sidebar/Sidebar.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-
-import Sidebar from './Sidebar';
-import { standardData } from './SidebarHeading.stories';
-import { withRootData } from './SidebarStories.stories';
-
-<Meta component="Sidebar" title="Addons/Docs/Sidebar" />
-
-# Sidebar
-
-Here's some custom documentation for Storybook's `Sidebar` component.
-
-<Preview>
-  <Story name="simple" height="150px">
-    <Sidebar
-      menu={standardData.menu}
-      stories={withRootData.stories}
-      storyId={withRootData.storyId}
-    />
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="loading" height="150px">
-    <Sidebar menu={standardData.menu} stories={{}} loading />
-  </Story>
-</Preview>
diff --git a/lib/ui/src/components/sidebar/Sidebar.stories.tsx b/lib/ui/src/components/sidebar/Sidebar.stories.tsx
index a703d60aecca..c1ecabf00326 100644
--- a/lib/ui/src/components/sidebar/Sidebar.stories.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.stories.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 
+import { ThemeProvider, themes, ensure as ensureTheme } from '@storybook/theming';
 import Sidebar from './Sidebar';
-import { standardData as standardHeaderData } from './SidebarHeading.stories';
-import { withRootData } from './SidebarStories.stories';
+import { standardData as standardHeaderData } from './Heading.stories';
+import { mockDataset } from './mockdata';
+import { RefType } from './RefHelpers';
 
 export default {
   component: Sidebar,
@@ -11,10 +13,118 @@ export default {
 };
 
 const { menu } = standardHeaderData;
-const { stories, storyId } = withRootData;
+const stories = mockDataset.withRoot;
+const storyId = '1-12-121';
 
 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 />;
+const refs: Record<string, RefType> = {
+  optimized: {
+    id: 'optimized',
+    title: 'It is optimized',
+    url: 'https://example.com',
+    ready: false,
+    type: 'lazy',
+    stories,
+  },
+  empty: {
+    id: 'empty',
+    title: 'It is empty',
+    url: 'https://example.com',
+    ready: false,
+    type: 'lazy',
+    stories: {},
+  },
+  startInjected_unknown: {
+    id: 'startInjected_unknown',
+    title: 'It started injected and is ready',
+    url: 'https://example.com',
+    type: 'unknown',
+    ready: false,
+    stories,
+  },
+  startInjected_loading: {
+    id: 'startInjected_loading',
+    title: 'It started injected and is loading',
+    url: 'https://example.com',
+    type: 'auto-inject',
+    ready: false,
+    stories,
+  },
+  startInjected_ready: {
+    id: 'startInjected_ready',
+    title: 'It started injected and is ready',
+    url: 'https://example.com',
+    type: 'auto-inject',
+    ready: true,
+    stories,
+  },
+  versions: {
+    id: 'versions',
+    title: 'It has versions',
+    url: 'https://example.com',
+    type: 'lazy',
+    stories,
+    versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
+  },
+  error: {
+    id: 'error',
+    title: 'This has problems',
+    url: 'https://example.com',
+    type: 'lazy',
+    stories: {},
+    error: (() => {
+      try {
+        throw new Error('There was a severe problem');
+      } catch (e) {
+        return e;
+      }
+    })(),
+  },
+  auth: {
+    id: 'Authentication',
+    title: 'This requires a login',
+    url: 'https://example.com',
+    type: 'lazy',
+    stories: {},
+    authUrl: 'https://example.com',
+  },
+  long: {
+    id: 'long',
+    title: 'This storybook has a very very long name for some reason',
+    url: 'https://example.com',
+    stories,
+    type: 'lazy',
+    versions: {
+      '111.111.888-new': 'https://example.com/new',
+      '111.111.888': 'https://example.com',
+    },
+  },
+};
+
+export const simple = () => (
+  <Sidebar storiesConfigured menu={menu} stories={stories} storyId={storyId} refs={{}} />
+);
+export const isLoading = () => (
+  <Sidebar storiesConfigured={false} menu={menu} stories={{}} isLoading refs={{}} />
+);
+export const isEmpty = () => (
+  <Sidebar storiesConfigured menu={menu} stories={{}} isLoading refs={{}} />
+);
+export const withRefs = () => (
+  <Sidebar storiesConfigured menu={menu} stories={stories} isLoading refs={refs} />
+);
+
+export const darkWithRefs = () => (
+  <ThemeProvider theme={ensureTheme(themes.dark)}>
+    <Sidebar storiesConfigured menu={menu} stories={stories} isLoading refs={refs} />
+  </ThemeProvider>
+);
+
+darkWithRefs.parameters = {
+  backgrounds: {
+    default: 'dark',
+    values: [{ name: 'dark', value: '#222222', default: true }],
+  },
+};
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
index 544661d6a02a..6dd729b1bd4d 100644
--- a/lib/ui/src/components/sidebar/Sidebar.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -1,58 +1,147 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useMemo, useState, useCallback, Fragment } from 'react';
 
 import { styled } from '@storybook/theming';
-import { ScrollArea } from '@storybook/components';
-import { State } from '@storybook/api';
+import { ScrollArea, Placeholder, Spaced } from '@storybook/components';
+import { StoriesHash, State } from '@storybook/api';
 
-import SidebarHeading, { SidebarHeadingProps } from './SidebarHeading';
-import SidebarStories from './SidebarStories';
+import { Heading } from './Heading';
 
-const Heading = styled(SidebarHeading)<SidebarHeadingProps>({
-  padding: '20px 20px 12px',
-});
+import { Search } from './Search';
+import { filteredLength } from './Tree/utils';
 
-const Stories = styled(({ className, ...rest }) => (
-  <SidebarStories className={className} {...rest} />
-))(({ loading }) => (loading ? { marginTop: 8, overflow: 'hidden' } : { overflow: 'hidden' }));
-
-const Container = styled.nav({
-  position: 'absolute',
-  zIndex: 1,
-  left: 0,
-  top: 0,
-  bottom: 0,
-  right: 0,
-  width: '100%',
-  height: '100%',
-});
+import { Ref } from './Refs';
+import { RefType, Refs } from './RefHelpers';
+
+const Container = styled.nav(
+  {
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+  },
+  ({ theme }) => ({
+    color: theme.color.darker,
+  })
+);
 
 const CustomScrollArea = styled(ScrollArea)({
-  '.simplebar-track.simplebar-vertical': {
-    right: 4,
+  '&&&&& .os-scrollbar-handle:before': {
+    left: -12,
+  },
+  '&&&&& .os-scrollbar-vertical': {
+    right: 5,
   },
+  padding: 20,
 });
 
+const Hr = styled.hr(({ theme }) => ({
+  border: '0 none',
+  height: 0,
+  marginBottom: 0,
+  borderTop: `1px solid ${theme.color.mediumlight}`,
+}));
+
 export interface SidebarProps {
-  stories: State['StoriesHash'];
+  stories: StoriesHash;
+  storiesConfigured: boolean;
+  storiesFailed?: Error;
+  refs: State['refs'];
   menu: any[];
   storyId?: string;
   menuHighlighted?: boolean;
-  loading?: boolean;
+  isLoading?: boolean;
 }
 
+const useFilterState = (initial: string) => {
+  const [state, setState] = useState(initial);
+  const changeFilter = useCallback((value: string) => {
+    setState(value);
+  }, []);
+
+  const value = state.length > 1 ? state : '';
+
+  return [value, changeFilter] as [typeof state, typeof changeFilter];
+};
+
+const useSearchResults = (refsList: [string, RefType][], filter: string) => {
+  const refsLengths = useMemo(
+    () => refsList.map(([k, i]) => filteredLength(i.stories || {}, filter), 0),
+    [refsList, filter]
+  );
+  const refsTotal = useMemo(() => refsLengths.reduce((acc, i) => acc + i, 0), [refsList, filter]);
+
+  return { total: refsTotal || 0, list: refsLengths };
+};
+
+const useCombination = (
+  stories: StoriesHash,
+  ready: boolean,
+  error: Error | undefined,
+  refs: Refs
+) => {
+  const merged = useMemo<Refs>(
+    () => ({
+      storybook_internal: {
+        stories,
+        title: null,
+        id: 'storybook_internal',
+        url: 'iframe.html',
+        ready,
+        error,
+      },
+      ...refs,
+    }),
+    [refs, stories]
+  );
+
+  return useMemo(() => Object.entries(merged), [merged]);
+};
+
 const Sidebar: FunctionComponent<SidebarProps> = ({
   storyId,
   stories,
+  storiesConfigured,
+  storiesFailed,
   menu,
   menuHighlighted = false,
-  loading = false,
-}) => (
-  <Container className="container sidebar-container">
-    <CustomScrollArea vertical>
-      <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
-      <Stories stories={stories} storyId={storyId} loading={loading} />
-    </CustomScrollArea>
-  </Container>
-);
+  refs = {},
+}) => {
+  const [filter, setFilter] = useFilterState('');
+  const combined = useCombination(stories, storiesConfigured, storiesFailed, refs);
+  const { total, list } = useSearchResults(combined, filter);
+
+  const resultLess = total === 0 && filter;
+
+  return (
+    <Container className="container sidebar-container">
+      <CustomScrollArea vertical>
+        <Spaced row={2}>
+          <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
+
+          <Search key="filter" onChange={setFilter} />
+
+          {resultLess ? <Placeholder>This filter resulted in 0 results</Placeholder> : null}
+
+          <Fragment>
+            {combined.map(([k, v], index) => {
+              const isHidden = !!(filter && !list[index]);
+
+              return (
+                <Fragment key={k}>
+                  {index === 0 || isHidden ? null : <Hr />}
+                  <Ref {...v} storyId={storyId} filter={filter} isHidden={isHidden} />
+                </Fragment>
+              );
+            })}
+          </Fragment>
+        </Spaced>
+      </CustomScrollArea>
+    </Container>
+  );
+};
 
 export default Sidebar;
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.stories.tsx b/lib/ui/src/components/sidebar/SidebarHeading.stories.tsx
deleted file mode 100644
index f1afc4fade72..000000000000
--- a/lib/ui/src/components/sidebar/SidebarHeading.stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React from 'react';
-import { themes, ThemeProvider, convert } from '@storybook/theming';
-import { action } from '@storybook/addon-actions';
-
-import SidebarHeading from './SidebarHeading';
-
-const { light } = themes;
-const theme = convert(light);
-
-export default {
-  component: SidebarHeading,
-  title: 'UI/Sidebar/SidebarHeading',
-  decorators: [
-    (storyFn: any) => (
-      <div
-        style={{
-          width: '240px',
-          margin: '1rem',
-        }}
-      >
-        {storyFn()}
-      </div>
-    ),
-  ],
-  excludeStories: /.*Data$/,
-};
-
-const menuItems = [
-  { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
-  { title: 'Menu Item 2', onClick: action('onActivateMenuItem'), id: '2' },
-  { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
-];
-
-export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;
-
-export const standardData = { menu: menuItems };
-
-export const standard = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: undefined,
-        url: undefined,
-        image: undefined,
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const standardNoLink = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: undefined,
-        url: null,
-        image: undefined,
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const linkAndText = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: 'My title',
-        url: 'https://example.com',
-        image: null,
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const onlyText = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: 'My title',
-        url: null,
-        image: null,
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const longText = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: 'My title is way to long to actually fit',
-        url: null,
-        image: null,
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const customBrandImage = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: {
-        title: 'My Title',
-        url: 'https://example.com',
-        image: 'https://via.placeholder.com/150x22',
-      },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.tsx b/lib/ui/src/components/sidebar/SidebarHeading.tsx
deleted file mode 100644
index 47fa203795fd..000000000000
--- a/lib/ui/src/components/sidebar/SidebarHeading.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { ComponentProps, MouseEvent } from 'react';
-import { styled, withTheme } from '@storybook/theming';
-import { StorybookLogo, WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';
-
-export type BrandAreaProps = ComponentProps<'div'>;
-
-const BrandArea = styled.div<BrandAreaProps>(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  fontWeight: theme.typography.weight.bold,
-  marginRight: theme.layoutMargin,
-  display: 'flex',
-  width: '100%',
-  alignItems: 'center',
-  paddingTop: 3,
-  paddingBottom: 3,
-  minHeight: 28,
-  '& > *': {
-    maxWidth: '100%',
-    height: 'auto',
-    width: 'auto',
-    display: 'block',
-  },
-}));
-
-const Logo = styled(StorybookLogo)({
-  width: 'auto',
-  height: 22,
-  display: 'block',
-});
-
-const Img = styled.img({
-  width: 'auto',
-  height: 'auto',
-  display: 'block',
-  maxWidth: '100%',
-});
-
-const LogoLink = styled.a({
-  display: 'block',
-  width: '100%',
-  height: '100%',
-  color: 'inherit',
-  textDecoration: 'none',
-});
-
-export type MenuButtonProps = ComponentProps<typeof Button> &
-  // FIXME: Button should extends from the native <button>
-  ComponentProps<'button'> & {
-    highlighted: boolean;
-  };
-
-const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => ({
-  position: 'relative',
-  overflow: 'visible',
-  padding: 7,
-
-  ...(highlighted && {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      width: 8,
-      height: 8,
-      borderRadius: 8,
-      background: theme.color.positive,
-    },
-  }),
-}));
-
-const Head = styled.div({
-  display: 'flex',
-  alignItems: 'flex-start',
-  justifyContent: 'space-between',
-});
-
-const Brand = withTheme(
-  ({
-    theme: {
-      brand: { title = 'Storybook', url = './', image },
-    },
-  }) => {
-    const targetValue = url === './' ? '' : '_blank';
-    if (image === undefined && url === null) {
-      return <Logo alt={title} />;
-    }
-    if (image === undefined && url) {
-      return (
-        <LogoLink title={title} href={url} target={targetValue}>
-          <Logo alt={title} />
-        </LogoLink>
-      );
-    }
-    if (image === null && url === null) {
-      return title;
-    }
-    if (image === null && url) {
-      return (
-        <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />
-      );
-    }
-    if (image && url === null) {
-      return <Img src={image} alt={title} />;
-    }
-    if (image && url) {
-      return (
-        <LogoLink title={title} href={url} target={targetValue}>
-          <Img src={image} alt={title} />
-        </LogoLink>
-      );
-    }
-    return null;
-  }
-);
-
-export interface SidebarHeadingProps {
-  menuHighlighted?: boolean;
-  menu: ComponentProps<typeof TooltipLinkList>['links'];
-  className?: string;
-}
-
-const SidebarHeading = ({ menuHighlighted = false, menu, ...props }: SidebarHeadingProps) => (
-  <Head {...props}>
-    <BrandArea>
-      <Brand />
-    </BrandArea>
-
-    <WithTooltip
-      placement="top"
-      trigger="click"
-      tooltip={({ onHide }) => (
-        <TooltipLinkList
-          // @ts-ignore // FIXME: onCLick/onHide should pass React synthetic event down to avoid surprise
-          links={menu.map(({ onClick, ...rest }) => ({
-            ...rest,
-            onClick: (e: MouseEvent) => {
-              if (onClick) {
-                // @ts-ignore
-                onClick(e);
-              }
-              // @ts-ignore
-              onHide(e);
-            },
-          }))}
-        />
-      )}
-      closeOnClick
-    >
-      <MenuButton outline small containsIcon highlighted={menuHighlighted} title="Shortcuts">
-        <Icons icon="ellipsis" />
-      </MenuButton>
-    </WithTooltip>
-  </Head>
-);
-
-export default SidebarHeading;
diff --git a/lib/ui/src/components/sidebar/SidebarItem.stories.tsx b/lib/ui/src/components/sidebar/SidebarItem.stories.tsx
deleted file mode 100644
index d19aec8fff67..000000000000
--- a/lib/ui/src/components/sidebar/SidebarItem.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import SidebarItem from './SidebarItem';
-
-export default {
-  component: SidebarItem,
-  title: 'UI/Sidebar/SidebarItem',
-  decorators: [
-    (storyFn: any) => (
-      <div style={{ width: '240px', margin: '1rem', border: '1px dotted #ccc' }}>{storyFn()}</div>
-    ),
-  ],
-};
-
-export const group = () => <SidebarItem name="Group" />;
-export const component = () => <SidebarItem name="Component" isComponent />;
-export const componentExpanded = () => <SidebarItem name="Component" isComponent isExpanded />;
-export const story = () => <SidebarItem name="Story" isLeaf />;
-export const storySelected = () => <SidebarItem name="Story" isLeaf isSelected />;
-export const longName = () => (
-  <SidebarItem
-    name="Story with a long and windy name that is descriptive, precise, and readable. "
-    isComponent
-  />
-);
-longName.story = { name: 'with long name' };
-export const nestedDepths = () => (
-  <div>
-    <SidebarItem name="Depth 0 collapsed" depth={0} />
-    <SidebarItem name="Depth 0 expanded" depth={0} isExpanded />
-    <SidebarItem name="Depth 1 expanded" depth={1} isExpanded />
-    <SidebarItem name="Depth 2 expanded" depth={2} isComponent isExpanded />
-    <SidebarItem name="Depth 3" depth={3} isLeaf />
-  </div>
-);
-export const loading = () => <SidebarItem loading />;
diff --git a/lib/ui/src/components/sidebar/SidebarItem.tsx b/lib/ui/src/components/sidebar/SidebarItem.tsx
deleted file mode 100644
index 60e3c15b2382..000000000000
--- a/lib/ui/src/components/sidebar/SidebarItem.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { styled } from '@storybook/theming';
-import { opacify, transparentize } from 'polished';
-import { Icons } from '@storybook/components';
-import { DOCS_MODE } from 'global';
-
-export type ExpanderProps = ComponentProps<'span'> & {
-  isExpanded?: boolean;
-  isExpandable?: boolean;
-};
-
-const Expander = styled.span<ExpanderProps>(
-  ({ theme }) => ({
-    display: 'block',
-    width: 0,
-    height: 0,
-    marginRight: 6,
-    borderTop: '3.5px solid transparent',
-    borderBottom: '3.5px solid transparent',
-    borderLeft: `3.5px solid ${opacify(0.2, theme.appBorderColor)}`,
-    transition: 'transform .1s ease-out',
-  }),
-
-  ({ isExpandable = false }) => (!isExpandable ? { borderLeftColor: 'transparent' } : {}),
-
-  ({ isExpanded = false }) => {
-    return isExpanded
-      ? {
-          transform: 'rotateZ(90deg)',
-        }
-      : {};
-  }
-);
-
-export type IconProps = ComponentProps<typeof Icons> & {
-  className: string; // FIXME: Icons should extended its typing from the native <svg>
-  isSelected?: boolean;
-};
-
-const Icon = styled(Icons)<IconProps>(
-  {
-    flex: 'none',
-    width: 10,
-    height: 10,
-    marginRight: 6,
-  },
-  ({ icon }) => {
-    if (icon === 'folder') {
-      return { color: '#774dd7' };
-    }
-    if (icon === 'component') {
-      return { color: '#1ea7fd' };
-    }
-    if (icon === 'bookmarkhollow' || (DOCS_MODE && icon === 'document')) {
-      return { color: '#37d5d3' };
-    }
-    if (icon === 'document') {
-      return { color: '#ffae00' };
-    }
-
-    return {};
-  },
-  ({ isSelected = false }) => (isSelected ? { color: 'inherit' } : {})
-);
-
-export const Item = styled(({ className, children, id }) => (
-  <div className={className} id={id}>
-    {children}
-  </div>
-))(
-  {
-    fontSize: 13,
-    lineHeight: '16px',
-    paddingTop: 4,
-    paddingBottom: 4,
-    paddingRight: 20,
-    display: 'flex',
-    alignItems: 'center',
-    flex: 1,
-    background: 'transparent',
-  },
-  ({ depth }) => ({
-    paddingLeft: depth * 15 + 9,
-  }),
-  ({ theme, isSelected, loading }) =>
-    !loading &&
-    (isSelected
-      ? {
-          cursor: 'default',
-          background: theme.color.secondary,
-          color: theme.color.lightest,
-          fontWeight: theme.typography.weight.bold,
-        }
-      : {
-          cursor: 'pointer',
-          color:
-            theme.base === 'light'
-              ? theme.color.defaultText
-              : transparentize(0.2, theme.color.defaultText),
-          '&:hover': {
-            color: theme.color.defaultText,
-            background: theme.background.hoverable,
-          },
-        }),
-  ({ theme, loading }) =>
-    loading && {
-      '&& > svg + span': { background: theme.color.medium },
-      '&& > *': theme.animation.inlineGlow,
-      '&& > span': { borderColor: 'transparent' },
-    }
-);
-
-type SidebarItemProps = ComponentProps<typeof Item> & {
-  isComponent?: boolean;
-  isLeaf?: boolean;
-  isExpanded?: boolean;
-  isSelected?: boolean;
-};
-
-const SidebarItem = ({
-  name = 'loading story',
-  isComponent = false,
-  isLeaf = false,
-  isExpanded = false,
-  isSelected = false,
-  ...props
-}: SidebarItemProps) => {
-  let iconName: ComponentProps<typeof Icons>['icon'];
-  if (isLeaf && isComponent) {
-    iconName = 'document';
-  } else if (isLeaf) {
-    iconName = 'bookmarkhollow';
-  } else if (isComponent) {
-    iconName = 'component';
-  } else {
-    iconName = 'folder';
-  }
-
-  return (
-    <Item
-      isSelected={isSelected}
-      {...props}
-      className={isSelected ? 'sidebar-item selected' : 'sidebar-item'}
-    >
-      <Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
-      <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
-      <span>{name}</span>
-    </Item>
-  );
-};
-
-export default SidebarItem;
diff --git a/lib/ui/src/components/sidebar/SidebarSearch.stories.tsx b/lib/ui/src/components/sidebar/SidebarSearch.stories.tsx
deleted file mode 100644
index 994c169460d0..000000000000
--- a/lib/ui/src/components/sidebar/SidebarSearch.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { actions as makeActions } from '@storybook/addon-actions';
-
-import SidebarSearch, { PureSidebarSearch } from './SidebarSearch';
-
-export default {
-  component: SidebarSearch,
-  title: 'UI/Sidebar/SidebarSearch',
-  decorators: [
-    (storyFn: any) => (
-      <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: 'white' }}>
-        {storyFn()}
-      </div>
-    ),
-  ],
-};
-
-const actions = makeActions('onChange');
-const pureActions = { ...actions, ...makeActions('onSetFocussed') };
-
-export const simple = () => <SidebarSearch {...actions} />;
-
-export const focussed = () => <PureSidebarSearch {...pureActions} />;
-
-export const filledIn = () => <PureSidebarSearch defaultValue="Searchstring" {...pureActions} />;
diff --git a/lib/ui/src/components/sidebar/SidebarSearch.tsx b/lib/ui/src/components/sidebar/SidebarSearch.tsx
deleted file mode 100644
index ee83b3b28055..000000000000
--- a/lib/ui/src/components/sidebar/SidebarSearch.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { ComponentProps, useState } from 'react';
-import { styled } from '@storybook/theming';
-import { opacify } from 'polished';
-import { Icons } from '@storybook/components';
-
-export type FilterFieldProps = ComponentProps<'input'>;
-
-const FilterField = styled.input<FilterFieldProps>(({ theme }) => ({
-  // resets
-  appearance: 'none',
-  border: 'none',
-  boxSizing: 'inherit',
-  display: ' block',
-  outline: 'none',
-  width: ' 100%',
-  margin: ' 0',
-  background: 'transparent',
-  padding: 0,
-  fontSize: 'inherit',
-
-  '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
-
-  '::placeholder': {
-    color: theme.color.mediumdark,
-  },
-
-  '&:placeholder-shown ~ button': {
-    // hide cancel button using CSS only
-    opacity: 0,
-  },
-}));
-
-export type CancelButtonProps = ComponentProps<'button'>;
-
-const CancelButton = styled.button<CancelButtonProps>(({ theme }) => ({
-  border: 0,
-  margin: 0,
-  padding: 4,
-  textDecoration: 'none',
-
-  background: theme.appBorderColor,
-  borderRadius: '1em',
-  cursor: 'pointer',
-  opacity: 1,
-  transition: 'all 150ms ease-out',
-
-  position: 'absolute',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  right: 2,
-
-  '> svg': {
-    display: 'block',
-    height: 8,
-    width: 8,
-    color: theme.input.color,
-    transition: 'all 150ms ease-out',
-  },
-
-  '&:hover': {
-    background: opacify(0.1, theme.appBorderColor),
-  },
-}));
-
-export type FilterFormProps = ComponentProps<'form'> & {
-  focussed: boolean;
-};
-
-const FilterForm = styled.form<FilterFormProps>(({ theme, focussed }) => ({
-  transition: 'all 150ms ease-out',
-  borderBottom: '1px solid transparent',
-  borderBottomColor: focussed
-    ? opacify(0.3, theme.appBorderColor)
-    : opacify(0.1, theme.appBorderColor),
-  outline: 0,
-  position: 'relative',
-
-  input: {
-    color: theme.input.color,
-    fontSize: theme.typography.size.s2 - 1,
-    lineHeight: '20px',
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 20,
-  },
-
-  '> svg': {
-    transition: 'all 150ms ease-out',
-    position: 'absolute',
-    top: '50%',
-    height: 12,
-    width: 12,
-    transform: 'translateY(-50%)',
-    zIndex: 1,
-
-    background: 'transparent',
-
-    path: {
-      transition: 'all 150ms ease-out',
-      fill: 'currentColor',
-      opacity: focussed ? 1 : 0.3,
-    },
-  },
-}));
-
-export type PureSidebarSearchProps = FilterFieldProps & {
-  onChange: (arg: string) => void;
-};
-
-export const PureSidebarSearch = ({ className, onChange, ...props }: PureSidebarSearchProps) => {
-  const [focussed, onSetFocussed] = useState(false);
-  return (
-    <FilterForm
-      autoComplete="off"
-      focussed={focussed}
-      className={className}
-      onReset={() => onChange('')}
-      onSubmit={e => e.preventDefault()}
-    >
-      <FilterField
-        type="text"
-        id="storybook-explorer-searchfield"
-        onFocus={() => onSetFocussed(true)}
-        onBlur={() => onSetFocussed(false)}
-        onChange={e => onChange(e.target.value)}
-        {...props}
-        placeholder={focussed ? 'Type to search...' : 'Press "/" to search...'}
-        aria-label="Search stories"
-      />
-      <Icons icon="search" />
-      <CancelButton type="reset" value="reset" title="Clear search">
-        <Icons icon="closeAlt" />
-      </CancelButton>
-    </FilterForm>
-  );
-};
-
-export default PureSidebarSearch;
diff --git a/lib/ui/src/components/sidebar/SidebarStories.stories.tsx b/lib/ui/src/components/sidebar/SidebarStories.stories.tsx
deleted file mode 100644
index 3cd7ce3d5e20..000000000000
--- a/lib/ui/src/components/sidebar/SidebarStories.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Spaced } from '@storybook/components';
-
-import SidebarStories from './SidebarStories';
-import { mockDataset } from './treeview/treeview.mockdata';
-
-export default {
-  component: SidebarStories,
-  title: 'UI/Sidebar/SidebarStories',
-  decorators: [s => <Spaced>{s()}</Spaced>],
-  excludeStories: /.*Data$/,
-};
-
-export const withRootData = {
-  stories: mockDataset.withRoot,
-  storyId: '1-12-121',
-};
-
-export const withRoot = () => (
-  <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" loading={false} />
-);
-
-export const noRootData = {
-  stories: mockDataset.noRoot,
-  storyId: '1-12-121',
-};
-
-export const noRoot = () => (
-  <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" loading={false} />
-);
-
-export const emptyData = {
-  stories: {},
-};
-
-export const empty = () => <SidebarStories stories={{}} loading={false} />;
-
-export const loading = () => <SidebarStories loading stories={{}} />;
diff --git a/lib/ui/src/components/sidebar/SidebarStories.tsx b/lib/ui/src/components/sidebar/SidebarStories.tsx
deleted file mode 100644
index e873a48163ec..000000000000
--- a/lib/ui/src/components/sidebar/SidebarStories.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { Fragment, FunctionComponent, memo } from 'react';
-import PropTypes from 'prop-types';
-
-import { styled } from '@storybook/theming';
-import { Placeholder, Link as StyledLink } from '@storybook/components';
-import { State } from '@storybook/api';
-import { Location, Link as RouterLink } from '@storybook/router';
-import { TreeState } from './treeview/treeview';
-
-import SidebarItem from './SidebarItem';
-import SidebarSearch from './SidebarSearch';
-import SidebarSubheading from './SidebarSubheading';
-
-const Search = styled(SidebarSearch)({
-  margin: '0 20px 1rem',
-});
-
-const Subheading = styled(SidebarSubheading)({
-  margin: '0 20px',
-});
-
-Subheading.propTypes = {
-  className: PropTypes.string,
-};
-
-Subheading.defaultProps = {
-  className: 'sidebar-subheading',
-};
-
-const Section = styled.section({
-  '& + section': {
-    marginTop: 20,
-  },
-  '&:last-of-type': {
-    marginBottom: 40,
-  },
-});
-
-const List = styled.div();
-List.displayName = 'List';
-
-const plain = {
-  color: 'inherit',
-  display: 'block',
-  textDecoration: 'none',
-  userSelect: 'none',
-};
-// @ts-ignore
-const PlainRouterLink = styled(RouterLink)(plain);
-// @ts-ignore
-const PlainLink = styled.a(plain);
-
-const Wrapper = styled.div({});
-
-const refinedViewMode = (viewMode: string | undefined, isDocsOnly: boolean) => {
-  if (isDocsOnly) {
-    return 'docs';
-  }
-  return viewMode === 'settings' || !viewMode ? 'story' : viewMode;
-};
-
-const targetId = (childIds?: string[]) =>
-  childIds && childIds.find((childId: string) => /.*--.*/.exec(childId));
-
-export const Link = ({
-  id,
-  prefix,
-  name,
-  children,
-  isLeaf,
-  isComponent,
-  onClick,
-  onKeyUp,
-  childIds,
-  isExpanded,
-}) => {
-  return isLeaf || (isComponent && !isExpanded) ? (
-    <Location>
-      {({ viewMode }) => (
-        <PlainRouterLink
-          title={name}
-          id={prefix + id}
-          to={`/${refinedViewMode(viewMode, isLeaf && isComponent)}/${targetId(childIds) || id}`}
-          onKeyUp={onKeyUp}
-          onClick={onClick}
-        >
-          {children}
-        </PlainRouterLink>
-      )}
-    </Location>
-  ) : (
-    <PlainLink title={name} id={prefix + id} onKeyUp={onKeyUp} onClick={onClick}>
-      {children}
-    </PlainLink>
-  );
-};
-Link.displayName = 'Link';
-Link.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  isLeaf: PropTypes.bool.isRequired,
-  prefix: PropTypes.string.isRequired,
-  onKeyUp: PropTypes.func.isRequired,
-  onClick: PropTypes.func.isRequired,
-  childIds: PropTypes.arrayOf(PropTypes.string),
-  isExpanded: PropTypes.bool,
-};
-Link.defaultProps = {
-  childIds: null,
-  isExpanded: false,
-};
-
-export interface StoriesProps {
-  loading: boolean;
-  stories: State['StoriesHash'];
-  storyId?: undefined | string;
-  className?: undefined | string;
-}
-
-const SidebarStories: FunctionComponent<StoriesProps> = memo(
-  ({ stories, storyId, loading, className, ...rest }) => {
-    const list = Object.entries(stories);
-
-    if (loading) {
-      return (
-        <Wrapper className={className}>
-          <SidebarItem loading />
-          <SidebarItem loading />
-          <SidebarItem depth={1} loading />
-          <SidebarItem depth={1} loading />
-          <SidebarItem depth={2} loading />
-          <SidebarItem depth={3} loading />
-          <SidebarItem depth={3} loading />
-          <SidebarItem depth={3} loading />
-          <SidebarItem depth={1} loading />
-          <SidebarItem depth={1} loading />
-          <SidebarItem depth={1} loading />
-          <SidebarItem depth={2} loading />
-          <SidebarItem depth={2} loading />
-          <SidebarItem depth={2} loading />
-          <SidebarItem depth={3} loading />
-          <SidebarItem loading />
-          <SidebarItem loading />
-        </Wrapper>
-      );
-    }
-
-    if (list.length < 1) {
-      return (
-        <Wrapper className={className}>
-          <Placeholder key="empty">
-            <Fragment key="title">No stories found</Fragment>
-            <Fragment>
-              Learn how to&nbsp;
-              <StyledLink href="https://storybook.js.org/basics/writing-stories/" target="_blank">
-                write stories
-              </StyledLink>
-            </Fragment>
-          </Placeholder>
-        </Wrapper>
-      );
-    }
-
-    return (
-      <Wrapper className={className}>
-        <TreeState
-          key="treestate"
-          dataset={stories}
-          prefix="explorer"
-          selectedId={storyId}
-          filter=""
-          List={List}
-          Head={SidebarItem}
-          Link={Link}
-          Leaf={SidebarItem}
-          Title={Subheading}
-          Section={Section}
-          Message={Placeholder}
-          // eslint-disable-next-line react/jsx-no-duplicate-props
-          Filter={Search}
-          {...rest}
-        />
-      </Wrapper>
-    );
-  }
-);
-
-export default SidebarStories;
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.stories.tsx b/lib/ui/src/components/sidebar/SidebarSubheading.stories.tsx
deleted file mode 100644
index d50c50bb1c89..000000000000
--- a/lib/ui/src/components/sidebar/SidebarSubheading.stories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import SidebarSubheading from './SidebarSubheading';
-
-export default {
-  component: SidebarSubheading,
-  title: 'UI/Sidebar/SidebarSubheading',
-};
-
-export const simple = () => <SidebarSubheading>Subheading</SidebarSubheading>;
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.tsx b/lib/ui/src/components/sidebar/SidebarSubheading.tsx
deleted file mode 100644
index 2b27dd0967e7..000000000000
--- a/lib/ui/src/components/sidebar/SidebarSubheading.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentProps } from 'react';
-import { transparentize } from 'polished';
-import { styled } from '@storybook/theming';
-
-export type SubheadingProps = ComponentProps<'div'>;
-
-const Subheading = styled.div<SubheadingProps>(({ theme }) => ({
-  letterSpacing: '0.35em',
-  textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
-  fontSize: theme.typography.size.s1 - 1,
-  lineHeight: '24px',
-  color: transparentize(0.5, theme.color.defaultText),
-}));
-
-// issue #6098
-Subheading.defaultProps = {
-  className: 'sidebar-subheading',
-};
-
-export default Subheading;
diff --git a/lib/ui/src/components/sidebar/Tree/ListItem.tsx b/lib/ui/src/components/sidebar/Tree/ListItem.tsx
new file mode 100644
index 000000000000..b67b2aa19d19
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Tree/ListItem.tsx
@@ -0,0 +1,161 @@
+import { DOCS_MODE } from 'global';
+import React, { ComponentProps, FunctionComponent, useMemo } from 'react';
+import { transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { Icons } from '@storybook/components';
+
+export type ExpanderProps = ComponentProps<'span'> & {
+  isExpanded: boolean;
+  depth: number;
+};
+
+export const Expander = styled.span<ExpanderProps>(
+  ({ theme, depth }) => ({
+    position: 'absolute',
+    display: 'block',
+    left: 0,
+    top: 9,
+    width: 0,
+    height: 0,
+    borderTop: '3.5px solid transparent',
+    borderBottom: '3.5px solid transparent',
+    borderLeft: `3.5px solid ${theme.base === 'dark' ? theme.color.lighter : theme.color.medium}`,
+    transition: 'transform .1s ease-out',
+    marginLeft: depth * 15 + 9,
+  }),
+  ({ isExpanded = false }) => {
+    return isExpanded
+      ? {
+          transform: 'rotateZ(90deg)',
+        }
+      : {};
+  }
+);
+
+export type IconProps = ComponentProps<typeof Icons> & {
+  className: string; // FIXME: Icons should extended its typing from the native <svg>
+  isSelected?: boolean;
+};
+
+const Icon = styled(Icons)<IconProps>(
+  {
+    position: 'relative',
+    flex: 'none',
+    width: 10,
+    height: 10,
+    marginRight: 6,
+  },
+  ({ icon }) => {
+    if (icon === 'folder') {
+      return { color: '#774dd7' };
+    }
+    if (icon === 'component') {
+      return { color: '#1ea7fd' };
+    }
+    if (icon === 'bookmarkhollow' || (DOCS_MODE && icon === 'document')) {
+      return { color: '#37d5d3' };
+    }
+    if (icon === 'document') {
+      return { color: '#ffae00' };
+    }
+
+    return {};
+  },
+  ({ isSelected = false, theme }) =>
+    isSelected ? { color: 'inherit', fontWeight: theme.typography.weight.bold } : {}
+);
+
+export const Item = styled.a<{
+  depth?: number;
+  isSelected?: boolean;
+}>(
+  ({ theme }) => ({
+    position: 'relative',
+    textDecoration: 'none',
+    fontSize: theme.typography.size.s2,
+    lineHeight: '16px',
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingRight: theme.layoutMargin * 2,
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    background: 'transparent',
+  }),
+  ({ depth }) => ({
+    paddingLeft: depth * 15 + 19,
+  }),
+  ({ theme, isSelected }) =>
+    isSelected
+      ? {
+          cursor: 'default',
+          background: theme.color.secondary,
+          color: theme.color.lightest,
+          fontWeight: theme.typography.weight.bold,
+        }
+      : {
+          cursor: 'pointer',
+          color:
+            theme.base === 'light'
+              ? theme.color.defaultText
+              : transparentize(0.2, theme.color.defaultText),
+          '&:hover': {
+            color: theme.color.defaultText,
+            background: theme.background.hoverable,
+          },
+        }
+);
+
+export type ListItemProps = ComponentProps<typeof Item> & {
+  childIds?: string[] | null;
+  id: string;
+  isComponent: boolean;
+  isExpanded?: boolean;
+  isLeaf: boolean;
+  isSelected?: boolean;
+  name: string;
+  kind: string;
+  refId?: string;
+  depth: number;
+  parameters: Record<string, any>;
+};
+
+export const ListItem: FunctionComponent<ListItemProps> = ({
+  name,
+  id,
+  kind,
+  refId,
+  isComponent = false,
+  isLeaf = false,
+  isExpanded = false,
+  isSelected = false,
+  className,
+  depth,
+  ...props
+}) => {
+  let iconName: ComponentProps<typeof Icons>['icon'];
+  if (isLeaf && isComponent) {
+    iconName = 'document';
+  } else if (isLeaf) {
+    iconName = 'bookmarkhollow';
+  } else if (isComponent) {
+    iconName = 'component';
+  } else {
+    iconName = 'folder';
+  }
+
+  const classes = useMemo(
+    () => [className, 'sidebar-item', isSelected ? 'selected' : null].filter(Boolean).join(' '),
+    [className, isSelected]
+  );
+
+  return (
+    <Item isSelected={isSelected} depth={depth} {...props} className={classes} id={id}>
+      {!isLeaf ? (
+        <Expander className="sidebar-expander" depth={depth} isExpanded={isExpanded} />
+      ) : null}
+      <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
+      <span>{name}</span>
+    </Item>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Tree/State.tsx b/lib/ui/src/components/sidebar/Tree/State.tsx
new file mode 100644
index 000000000000..d2daeb968b34
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Tree/State.tsx
@@ -0,0 +1,147 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { isRoot } from '@storybook/api';
+import { toFiltered, getMains, getParents } from './utils';
+import { BooleanSet, FilteredType, Item, DataSet } from '../RefHelpers';
+
+export const ExpanderContext = React.createContext<{
+  setExpanded: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  expandedSet: BooleanSet;
+}>({
+  setExpanded: () => {},
+  expandedSet: {},
+});
+
+const useExpanded = (
+  type: FilteredType,
+  parents: Item[],
+  initialFiltered: BooleanSet,
+  initialUnfiltered: BooleanSet
+) => {
+  const expandedSets = {
+    filtered: useState(initialFiltered),
+    unfiltered: useState(initialUnfiltered),
+  };
+  const [state, setState] = expandedSets[type];
+  useEffect(() => {
+    expandedSets.filtered[1](initialFiltered);
+    expandedSets.unfiltered[1](initialUnfiltered);
+  }, [initialFiltered, initialUnfiltered]);
+  const set = useMemo(
+    () => ({
+      ...state,
+      ...parents.reduce((acc, item) => ({ ...acc, [item.id]: true }), {} as BooleanSet),
+    }),
+    [state, parents]
+  );
+  return { expandedSet: set, setExpanded: setState };
+};
+
+const useSelected = (dataset: DataSet, storyId: string) => {
+  return useMemo(() => {
+    return Object.keys(dataset).reduce(
+      (acc, k) => Object.assign(acc, { [k]: k === storyId }),
+      {} as BooleanSet
+    );
+  }, [dataset, storyId]);
+};
+
+const useFiltered = (dataset: DataSet, filter: string, parents: Item[], storyId: string) => {
+  const extra = useMemo(() => {
+    if (dataset[storyId]) {
+      return parents.reduce(
+        (acc, item) => ({ ...acc, [item.id]: item }),
+        dataset[storyId]
+          ? {
+              [storyId]: dataset[storyId],
+            }
+          : {}
+      );
+    }
+    return {};
+  }, [parents]);
+  const filteredSet = useMemo(() => (filter ? toFiltered(dataset, filter) : dataset), [
+    dataset,
+    filter,
+  ]);
+  return useMemo(
+    () =>
+      filteredSet[storyId]
+        ? filteredSet
+        : {
+            ...extra,
+            ...filteredSet,
+          },
+    [extra, filteredSet]
+  );
+};
+
+export const useDataset = (dataset: DataSet = {}, filter: string, storyId: string) => {
+  const emptyInitial = useMemo(
+    () => ({
+      filtered: {},
+      unfiltered: {},
+    }),
+    []
+  );
+  const datasetKeys = Object.keys(dataset);
+  const initial = useMemo(() => {
+    if (datasetKeys.length) {
+      return Object.keys(dataset).reduce(
+        (acc, k) => ({
+          filtered: { ...acc.filtered, [k]: true },
+          unfiltered: { ...acc.unfiltered, [k]: false },
+        }),
+        { filtered: {} as BooleanSet, unfiltered: {} as BooleanSet }
+      );
+    }
+    return emptyInitial;
+  }, [dataset]);
+  const type: FilteredType = filter.length >= 2 ? 'filtered' : 'unfiltered';
+  const parents = useMemo(() => getParents(storyId, dataset), [dataset[storyId]]);
+  const { expandedSet, setExpanded } = useExpanded(
+    type,
+    parents,
+    initial.filtered,
+    initial.unfiltered
+  );
+  const selectedSet = useSelected(dataset, storyId);
+  const filteredSet = useFiltered(dataset, filter, parents, storyId);
+  const length = useMemo(() => Object.keys(filteredSet).length, [filteredSet]);
+  const topLevel = useMemo(
+    () =>
+      Object.values(filteredSet).filter(
+        (i) => (i.depth === 0 && !isRoot(i)) || (!isRoot(i) && isRoot(filteredSet[i.parent]))
+      ),
+    [filteredSet]
+  );
+  useEffect(() => {
+    if (type === 'filtered') {
+      if (topLevel.length < 18) {
+        setExpanded(initial.filtered);
+      } else {
+        setExpanded(initial.unfiltered);
+      }
+    }
+  }, [filter]);
+  const { roots, others } = useMemo(
+    () =>
+      getMains(filteredSet).reduce(
+        (acc, item) => {
+          return isRoot(item)
+            ? { ...acc, roots: [...acc.roots, item] }
+            : { ...acc, others: [...acc.others, item] };
+        },
+        { roots: [] as Item[], others: [] as Item[] }
+      ),
+    [filteredSet]
+  );
+  return {
+    roots,
+    others,
+    length,
+    dataSet: filteredSet,
+    selectedSet,
+    expandedSet,
+    setExpanded,
+  };
+};
diff --git a/lib/ui/src/components/sidebar/Tree/Tree.tsx b/lib/ui/src/components/sidebar/Tree/Tree.tsx
new file mode 100644
index 000000000000..54745cd87732
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Tree/Tree.tsx
@@ -0,0 +1,117 @@
+import React, { ComponentType, FunctionComponent } from 'react';
+
+import { Dataset, ExpandedSet, SelectedSet } from './utils';
+
+import { DefaultList, DefaultLeaf, DefaultHead } from './components';
+
+const branchOrLeaf = (
+  {
+    Branch,
+    Leaf,
+    Head,
+    List,
+  }: {
+    Branch: ComponentType<any>;
+    Leaf: ComponentType<any>;
+    Head: ComponentType<any>;
+    List: ComponentType<any>;
+  },
+  {
+    root,
+    dataset,
+    expanded,
+    selected,
+    depth,
+  }: { root: string; dataset: Dataset; expanded: ExpandedSet; selected: SelectedSet; depth: number }
+) => {
+  const node = dataset[root];
+
+  if (!node) {
+    return null;
+  }
+
+  return node.children ? (
+    <Branch
+      key={node.id}
+      {...{
+        Branch,
+        Leaf,
+        Head,
+        List,
+        dataset,
+        root,
+        depth,
+        expanded,
+        selected,
+      }}
+    />
+  ) : (
+    <Leaf key={node.id} {...node} depth={depth} isSelected={selected[node.id]} />
+  );
+};
+
+const Tree: FunctionComponent<{
+  root: string;
+  depth: number;
+  dataset: Dataset;
+  expanded: ExpandedSet;
+  selected: SelectedSet;
+  Branch: ComponentType<any>;
+  List?: ComponentType<any>;
+  Leaf?: ComponentType<any>;
+  Head?: ComponentType<any>;
+}> = (props) => {
+  const {
+    root,
+    depth,
+    dataset,
+    expanded,
+    selected,
+    Branch = Tree,
+    List = DefaultList,
+    Leaf = DefaultLeaf,
+    Head = DefaultHead,
+  } = props;
+
+  const item = dataset[root];
+
+  if (!item) {
+    return null;
+  }
+
+  const { children, ...node } = item;
+
+  const mapNode = (i: string) =>
+    branchOrLeaf(
+      { Branch, Leaf, Head, List },
+      { dataset, selected, expanded, root: i, depth: depth + 1 }
+    );
+
+  switch (true) {
+    case !!(children && children.length && node.name): {
+      return (
+        <>
+          <Head
+            {...node}
+            depth={depth}
+            isExpanded={expanded[node.id]}
+            isSelected={selected[node.id]}
+            childIds={children}
+          />
+          {children && expanded[node.id] ? <List>{children.map(mapNode)}</List> : null}
+        </>
+      );
+    }
+    case !!(children && children.length): {
+      return <List>{children.map(mapNode)}</List>;
+    }
+    case node.isLeaf: {
+      return <Leaf key={node.id} {...node} depth={depth} isSelected={selected[node.id]} />;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export { Tree };
diff --git a/lib/ui/src/components/sidebar/Tree/components.tsx b/lib/ui/src/components/sidebar/Tree/components.tsx
new file mode 100644
index 000000000000..b2367d329254
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Tree/components.tsx
@@ -0,0 +1,73 @@
+import React, { FunctionComponent, ReactNode, SyntheticEvent } from 'react';
+import { styled } from '@storybook/theming';
+
+export const DefaultSection = styled.div();
+
+export const DefaultList = styled.div();
+
+export const A = styled.a();
+
+export const DefaultFilter = styled((props) => <input placeholder="search..." {...props} />)({
+  width: '100%',
+  background: 'transparent',
+  border: '1px solid black',
+});
+
+export const prevent = (e: SyntheticEvent) => {
+  e.preventDefault();
+  return false;
+};
+
+export const DefaultMessage = styled.div({});
+
+export const LeafStyle = styled.div<{ depth: number; isSelected: boolean }>(
+  {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+  },
+  ({ depth }) => ({
+    paddingLeft: depth * 10,
+  }),
+  ({ isSelected }) => ({
+    background: isSelected ? '#CFD8DC' : 'transparent',
+  })
+);
+
+export const DefaultLeaf: FunctionComponent<
+  { name: ReactNode; depth: number } & Record<string, any>
+> = ({ name, isSelected, depth, ...rest }) => (
+  <LeafStyle isSelected={isSelected} depth={depth} {...rest}>
+    {name}
+  </LeafStyle>
+);
+
+export const DefaultHead: FunctionComponent<{
+  name: ReactNode;
+  depth: number;
+  isExpanded?: boolean;
+  isSelected?: boolean;
+  isComponent?: boolean;
+}> = ({ name, depth, isExpanded = false, isSelected = false, isComponent = false }) => (
+  <LeafStyle isSelected={isSelected} depth={depth}>
+    <span>
+      {isExpanded ? '-' : '+'}
+      {isComponent ? '!' : ''}
+    </span>
+    <span>{name}</span>
+  </LeafStyle>
+);
+
+export const DefaultRootTitle = styled.h4({});
+
+export const DefaultLink: FunctionComponent<{
+  id: string;
+  prefix: string;
+  children: string[];
+  onClick: Function;
+}> = ({ id, prefix, children, ...rest }) => (
+  <A href={`#!${prefix}${id}`} {...rest} onClick={(e) => prevent(e) || rest.onClick(e)}>
+    {children}
+  </A>
+);
diff --git a/lib/ui/src/components/sidebar/treeview/utils.test.js b/lib/ui/src/components/sidebar/Tree/utils.test.js
similarity index 91%
rename from lib/ui/src/components/sidebar/treeview/utils.test.js
rename to lib/ui/src/components/sidebar/Tree/utils.test.js
index 28881523f0f2..6386e1a9c10b 100644
--- a/lib/ui/src/components/sidebar/treeview/utils.test.js
+++ b/lib/ui/src/components/sidebar/Tree/utils.test.js
@@ -1,4 +1,4 @@
-import { mockDataset, mockExpanded, mockSelected } from './treeview.mockdata';
+import { mockDataset, mockExpanded, mockSelected } from '../mockdata';
 
 import * as utils from './utils';
 
@@ -16,7 +16,7 @@ const withRoot = {
 
 describe('sanity', () => {
   test('all exports should be functions', () => {
-    Object.values(utils).forEach(i => {
+    Object.values(utils).forEach((i) => {
       expect(typeof i).toBe('function');
     });
   });
@@ -25,35 +25,35 @@ describe('sanity', () => {
 describe('keyEventToAction', () => {
   test('all known inputs should be transformed', () => {
     const inputs = [18, 32, 38, 40, 37, 39, 100];
-    const output = inputs.map(k => utils.keyEventToAction({ keyCode: k }));
+    const output = inputs.map((k) => utils.keyEventToAction({ keyCode: k }));
 
     expect(output).toEqual(['ENTER', 'SPACE', 'UP', 'DOWN', 'LEFT', 'RIGHT', false]);
   });
 
   test('ctrlKey blocks transform', () => {
     const inputs = [18, 32, 38, 40, 37, 39, 100];
-    const output = inputs.map(k => utils.keyEventToAction({ keyCode: k, ctrlKey: true }));
+    const output = inputs.map((k) => utils.keyEventToAction({ keyCode: k, ctrlKey: true }));
 
     expect(output).toEqual(new Array(7).fill(false));
   });
 
   test('altKey blocks transform', () => {
     const inputs = [18, 32, 38, 40, 37, 39, 100];
-    const output = inputs.map(k => utils.keyEventToAction({ keyCode: k, altKey: true }));
+    const output = inputs.map((k) => utils.keyEventToAction({ keyCode: k, altKey: true }));
 
     expect(output).toEqual(new Array(7).fill(false));
   });
 
   test('shiftKey blocks transform', () => {
     const inputs = [18, 32, 38, 40, 37, 39, 100];
-    const output = inputs.map(k => utils.keyEventToAction({ keyCode: k, shiftKey: true }));
+    const output = inputs.map((k) => utils.keyEventToAction({ keyCode: k, shiftKey: true }));
 
     expect(output).toEqual(new Array(7).fill(false));
   });
 
   test('metaKey blocks transform', () => {
     const inputs = [18, 32, 38, 40, 37, 39, 100];
-    const output = inputs.map(k => utils.keyEventToAction({ keyCode: k, metaKey: true }));
+    const output = inputs.map((k) => utils.keyEventToAction({ keyCode: k, metaKey: true }));
 
     expect(output).toEqual(new Array(7).fill(false));
   });
diff --git a/lib/ui/src/components/sidebar/Tree/utils.ts b/lib/ui/src/components/sidebar/Tree/utils.ts
new file mode 100644
index 000000000000..ec71b5fac895
--- /dev/null
+++ b/lib/ui/src/components/sidebar/Tree/utils.ts
@@ -0,0 +1,247 @@
+import memoize from 'memoizerific';
+import Fuse from 'fuse.js';
+import { DOCS_MODE } from 'global';
+import { SyntheticEvent } from 'react';
+import { StoriesHash, isRoot, isStory } from '@storybook/api';
+
+const FUZZY_SEARCH_THRESHOLD = 0.35;
+
+export const prevent = (e: SyntheticEvent) => {
+  e.preventDefault();
+  return false;
+};
+
+const toList = memoize(1)((dataset: Dataset) => Object.values(dataset));
+
+export type Item = StoriesHash[keyof StoriesHash];
+export type Dataset = Record<string, Item>;
+export type SelectedSet = Record<string, boolean>;
+export type ExpandedSet = Record<string, boolean>;
+
+export const keyEventToAction = ({
+  keyCode,
+  ctrlKey,
+  shiftKey,
+  altKey,
+  metaKey,
+}: KeyboardEvent) => {
+  if (shiftKey || metaKey || ctrlKey || altKey) {
+    return false;
+  }
+  switch (keyCode) {
+    case 18: {
+      return 'ENTER';
+    }
+    case 32: {
+      return 'SPACE';
+    }
+    case 38: {
+      return 'UP';
+    }
+    case 40: {
+      return 'DOWN';
+    }
+    case 37: {
+      return DOCS_MODE ? 'UP' : 'LEFT';
+    }
+    case 39: {
+      return DOCS_MODE ? 'DOWN' : 'RIGHT';
+    }
+    default: {
+      return false;
+    }
+  }
+};
+
+export const createId = (id: string, prefix: string) => `${prefix}_${id}`;
+
+export const get = memoize(1000)((id: string, dataset: Dataset) => dataset[id]);
+export const getParent = memoize(1000)((id: string, dataset: Dataset) => {
+  const item = get(id, dataset);
+  if (item && !isRoot(item)) {
+    return get(item.parent, dataset);
+  }
+  return undefined;
+});
+export const getParents = memoize(1000)((id: string, dataset: Dataset): Item[] => {
+  const parent = getParent(id, dataset);
+
+  if (!parent) {
+    return [];
+  }
+  return [parent, ...getParents(parent.id, dataset)];
+});
+
+export const getMains = memoize(1)((dataset: Dataset) =>
+  toList(dataset).filter((m) => m.depth === 0)
+);
+const getMainsKeys = memoize(1)((dataset: Dataset) => getMains(dataset).map((m) => m.id));
+
+export const getPrevious = ({
+  id,
+  dataset,
+  expanded,
+}: {
+  id: string;
+  dataset: Dataset;
+  expanded: ExpandedSet;
+}): Item | undefined => {
+  // STEP 1
+  // find parent
+  // if no previous sibling, use parent
+  // unless parent is root
+  //
+  // STEP 2
+  // find previous sibling
+  // recurse into that sibling's last children that are expanded
+
+  const current = get(id, dataset);
+  const parent = getParent(id, dataset);
+  const mains = getMainsKeys(dataset);
+
+  const siblings = parent && parent.children ? parent.children : mains;
+  const index = siblings.indexOf(current.id);
+
+  if (index === 0) {
+    if (parent && parent.isRoot) {
+      return getPrevious({ id: parent.id, dataset, expanded });
+    }
+    if (!parent) {
+      return undefined;
+    }
+    return parent;
+  }
+
+  let item = get(siblings[index - 1], dataset);
+
+  while (item.children && expanded[item.id]) {
+    item = get(item.children.slice(-1)[0], dataset);
+  }
+
+  if (item.isRoot) {
+    return getPrevious({ id: item.id, dataset, expanded });
+  }
+
+  return item;
+};
+
+export const getNext = ({
+  id,
+  dataset,
+  expanded,
+}: {
+  id: string;
+  dataset: Dataset;
+  expanded: ExpandedSet;
+}): Item | undefined => {
+  // STEP 1:
+  // find any children if the node is expanded, first child
+  //
+  // STEP 2
+  // iterate over parents, + fake 'root':
+  // - find index of last parent as child in grandparent
+  // - if child has next sibling, return
+  // - if not, continue iterating
+  const current = get(id, dataset);
+
+  if (!current) {
+    return undefined;
+  }
+
+  const { children } = current;
+
+  if (children && children.length && (expanded[current.id] || current.isRoot)) {
+    return get(children[0], dataset);
+  }
+
+  const mains = getMainsKeys(dataset);
+
+  // we add a face super-root, otherwise we won't be able to jump to the next root
+  const superRoot = { children: mains } as Item;
+  const parents = getParents(id, dataset).concat([superRoot]);
+
+  const next = parents.reduce(
+    (acc, item) => {
+      if (acc.result) {
+        return acc;
+      }
+      const parent = item;
+      const siblings = parent && parent.children ? parent.children : mains;
+      const index = siblings.indexOf(acc.child.id);
+
+      if (siblings[index + 1]) {
+        return { result: get(siblings[index + 1], dataset) };
+      }
+      return { child: parent };
+    },
+    { child: current, result: undefined }
+  );
+
+  if (next.result && next.result.isRoot) {
+    return getNext({ id: next.result.id, dataset, expanded });
+  }
+  return next.result;
+};
+
+const fuse = memoize(5)(
+  (dataset) =>
+    new Fuse(toList(dataset), {
+      threshold: FUZZY_SEARCH_THRESHOLD,
+      keys: ['kind', 'name', 'parameters.fileName', 'parameters.notes'],
+    })
+);
+
+const exactMatch = (filter: string) => {
+  const reg = new RegExp(filter, 'i');
+
+  return (i: Item) =>
+    i.isLeaf &&
+    ((isStory(i) && reg.test(i.kind)) ||
+      (i.name && reg.test(i.name)) ||
+      (i.parameters &&
+        typeof i.parameters.fileName === 'string' &&
+        reg.test(i.parameters.fileName.toString())) ||
+      (i.parameters &&
+        typeof i.parameters.notes === 'string' &&
+        reg.test(i.parameters.notes.toString())));
+};
+
+export const toId = (base: string, addition: string) =>
+  base === '' ? `${addition}` : `${base}-${addition}`;
+
+export const filteredLength = (dataset: Dataset, filter: string) => {
+  return Object.keys(toFiltered(dataset, filter)).length;
+};
+
+export const toFiltered = (dataset: Dataset, filter: string) => {
+  let found: Item[];
+  if (filter.length && filter.length > 2) {
+    found = fuse(dataset).search(filter);
+  } else {
+    const matcher = exactMatch(filter);
+    found = toList(dataset).filter(matcher);
+  }
+
+  // get all parents for all results
+  const result = found.reduce((acc, item) => {
+    if (item.isLeaf) {
+      getParents(item.id, dataset).forEach((pitem) => {
+        acc[pitem.id] = pitem;
+      });
+
+      acc[item.id] = item;
+    }
+    return acc;
+  }, {} as Dataset);
+
+  // filter the children of the found items (and their parents) so only found entries are present
+  return Object.entries(result).reduce((acc, [k, v]) => {
+    const r = v.children ? { ...v, children: v.children.filter((c) => !!result[c]) } : v;
+
+    if (r.isLeaf || r.children.length) {
+      acc[k] = r;
+    }
+
+    return acc;
+  }, {} as Dataset);
+};
diff --git a/lib/ui/src/components/sidebar/mockdata.ts b/lib/ui/src/components/sidebar/mockdata.ts
new file mode 100644
index 000000000000..ca072acce803
--- /dev/null
+++ b/lib/ui/src/components/sidebar/mockdata.ts
@@ -0,0 +1,293 @@
+import { StoriesHash } from '@storybook/api';
+
+export type MockDataSet = Record<string, StoriesHash>;
+
+export const mockDataset: MockDataSet = {
+  withRoot: {
+    '1': {
+      isRoot: true,
+      isLeaf: false,
+      isComponent: false,
+      children: ['1-11', '1-12'],
+      depth: 0,
+      id: '1',
+      name: 'Root 1',
+    },
+    '2': {
+      isRoot: false,
+      isLeaf: false,
+      isComponent: false,
+      children: ['2-21', '2-22'],
+      depth: 0,
+      id: '2',
+      name: 'Group 1',
+    },
+    '1-11': {
+      isRoot: false,
+      isLeaf: false,
+      isComponent: true,
+      id: '1-11',
+      parent: '1',
+      depth: 1,
+      name: 'Child A1',
+      children: [],
+    },
+    '1-12-121': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '1-12-121',
+      parent: '1-12',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      kind: '',
+      args: {},
+    },
+    '1-12-122': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '1-12-122',
+      parent: '1-12',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      kind: '',
+      args: {},
+    },
+    '1-12': {
+      isRoot: false,
+      isLeaf: false,
+      isComponent: true,
+      id: '1-12',
+      name: 'Child A2',
+      depth: 1,
+      children: ['1-12-121', '1-12-122'],
+      parent: '1',
+    },
+    '2-21': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '2-21',
+      depth: 1,
+      name: 'Child B1',
+      parent: '2',
+      kind: '',
+      args: {},
+    },
+    '2-22': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '2-22',
+      depth: 1,
+      name: 'Child B2',
+      parent: '2',
+      kind: '',
+      args: {},
+    },
+    '3': {
+      isRoot: true,
+      isLeaf: false,
+      isComponent: false,
+      children: ['3-31', '3-32'],
+      depth: 0,
+      id: '3',
+      name: 'Root 3',
+    },
+    '3-31': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '3-31',
+      depth: 1,
+      name: 'Child A1',
+      parent: '3',
+      kind: '',
+      args: {},
+    },
+    '3-32': {
+      isRoot: false,
+      isLeaf: false,
+      isComponent: true,
+      id: '3-32',
+      name: 'Child A2',
+      depth: 1,
+      children: ['3-32-321', '3-32-322'],
+      parent: '3',
+    },
+    '3-32-321': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '3-32-321',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      parent: '3-32',
+      kind: '',
+      args: {},
+    },
+    '3-32-322': {
+      isRoot: false,
+      isLeaf: true,
+      isComponent: false,
+      id: '3-32-322',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      parent: '3-32',
+      kind: '',
+      args: {},
+    },
+  },
+  noRoot: {
+    '1': {
+      children: ['1-11', '1-12'],
+      isRoot: false,
+      isComponent: false,
+      isLeaf: false,
+      depth: 0,
+      id: '1',
+      name: 'Parent A',
+    },
+    '2': {
+      children: ['2-21', '2-22'],
+      isRoot: false,
+      isComponent: true,
+      isLeaf: false,
+      depth: 0,
+      id: '2',
+      name: 'Parent B',
+    },
+    '1-11': {
+      id: '1-11',
+      depth: 1,
+      name: 'Child A1',
+      isLeaf: true,
+      isComponent: false,
+      isRoot: false,
+      parent: '1',
+      kind: '',
+      args: {},
+    },
+    '1-12-121': {
+      id: '1-12-121',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      isLeaf: true,
+      isComponent: false,
+      isRoot: false,
+      parent: '1-12',
+      kind: '',
+      args: {},
+    },
+    '1-12-122': {
+      id: '1-12-122',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      isLeaf: true,
+      isComponent: false,
+      isRoot: false,
+      parent: '1-12',
+      kind: '',
+      args: {},
+    },
+    '1-12': {
+      id: '1-12',
+      name: 'Child A2',
+      depth: 1,
+      children: ['1-12-121', '1-12-122'],
+      isRoot: false,
+      isComponent: true,
+      isLeaf: false,
+      parent: '1',
+    },
+    '2-21': {
+      id: '2-21',
+      depth: 1,
+      name: 'Child B1',
+      isLeaf: true,
+      isComponent: false,
+      isRoot: false,
+      parent: '2',
+      kind: '',
+      args: {},
+    },
+    '2-22': {
+      id: '2-22',
+      depth: 1,
+      name: 'Child B2',
+      isLeaf: true,
+      isComponent: false,
+      isRoot: false,
+      parent: '2',
+      kind: '',
+      args: {},
+    },
+  },
+};
+
+export const mockSelected = {
+  withRoot: {
+    '1': false,
+    '2': false,
+    '1-11': false,
+    '1-12-121': false,
+    '1-12-122': false,
+    '1-12': false,
+    '2-21': false,
+    '2-22': false,
+    '3': false,
+    '3-31': false,
+    '3-32': false,
+    '3-32-321': false,
+    '3-32-322': false,
+  },
+  noRoot: {
+    '1': false,
+    '2': false,
+    '1-11': false,
+    '1-12-121': false,
+    '1-12-122': false,
+    '1-12': false,
+    '2-21': false,
+    '2-22': false,
+  },
+};
+
+export const mockExpanded = {
+  withRoot: {
+    '1': true,
+    '2': false,
+    '1-11': true,
+    '1-12-121': false,
+    '1-12-122': false,
+    '1-12': false,
+    '2-21': false,
+    '2-22': false,
+    '3': false,
+    '3-31': false,
+    '3-32': false,
+    '3-32-321': false,
+    '3-32-322': false,
+  },
+  noRoot: {
+    '1': true,
+    '2': false,
+    '1-11': true,
+    '1-12-121': false,
+    '1-12-122': false,
+    '1-12': false,
+    '2-21': false,
+    '2-22': false,
+  },
+  noRootSecond: {
+    '1': true,
+    '2': false,
+    '1-11': true,
+    '1-12-121': true,
+    '1-12-122': true,
+    '1-12': true,
+    '2-21': false,
+    '2-22': false,
+  },
+};
diff --git a/lib/ui/src/components/sidebar/treeview/components.js b/lib/ui/src/components/sidebar/treeview/components.js
deleted file mode 100644
index 641f63272c47..000000000000
--- a/lib/ui/src/components/sidebar/treeview/components.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-export const DefaultSection = styled.div({});
-DefaultSection.displayName = 'DefaultSection';
-
-export const DefaultList = styled.div();
-DefaultList.displayName = 'DefaultList';
-
-export const A = styled.a({});
-A.displayName = 'A';
-
-export const DefaultFilter = styled(props => <input placeholder="search..." {...props} />)({
-  width: '100%',
-  background: 'transparent',
-  border: '1px solid black',
-});
-
-export const DefaultMessage = styled.div({});
-
-export const LeafStyle = styled.div(
-  {
-    minHeight: 24,
-    display: 'flex',
-    alignItems: 'center',
-    flex: 1,
-  },
-  ({ depth }) => ({
-    paddingLeft: depth * 10,
-  }),
-  ({ isSelected }) => ({
-    background: isSelected ? '#CFD8DC' : 'transparent',
-  })
-);
-
-export const DefaultLeaf = ({ name, ...rest }) => <LeafStyle {...rest}>{name}</LeafStyle>;
-DefaultLeaf.displayName = 'DefaultLeaf';
-DefaultLeaf.propTypes = {
-  name: PropTypes.node.isRequired,
-  depth: PropTypes.number.isRequired,
-};
-export const DefaultHead = ({ name, depth, isExpanded = true, isSelected, isComponent }) => (
-  <LeafStyle isSelected={isSelected} depth={depth}>
-    <span>
-      {isExpanded ? '-' : '+'}
-      {isComponent ? '!' : ''}
-    </span>
-    <span>{name}</span>
-  </LeafStyle>
-);
-DefaultHead.displayName = 'DefaultHead';
-DefaultHead.propTypes = {
-  name: PropTypes.node.isRequired,
-  depth: PropTypes.number.isRequired,
-  isExpanded: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isComponent: PropTypes.bool,
-};
-DefaultHead.defaultProps = {
-  isExpanded: false,
-  isComponent: false,
-  isSelected: false,
-};
-
-export const DefaultRootTitle = styled.h4({});
-
-export const DefaultLink = ({ id, prefix, children, ...rest }) => (
-  <A href={`#!${prefix}${id}`} {...rest} onClick={e => e.preventDefault() || rest.onClick(e)}>
-    {children}
-  </A>
-);
-DefaultLink.displayName = 'DefaultLink';
-DefaultLink.propTypes = {
-  id: PropTypes.string.isRequired,
-  prefix: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-};
diff --git a/lib/ui/src/components/sidebar/treeview/treeview.js b/lib/ui/src/components/sidebar/treeview/treeview.js
deleted file mode 100644
index a65d761b12de..000000000000
--- a/lib/ui/src/components/sidebar/treeview/treeview.js
+++ /dev/null
@@ -1,446 +0,0 @@
-import { document } from 'global';
-import React, { PureComponent, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import memoize from 'memoizerific';
-import addons from '@storybook/addons';
-import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
-import debounce from 'lodash/debounce';
-
-import {
-  createId,
-  prevent,
-  keyEventToAction,
-  getParent,
-  getParents,
-  getPrevious,
-  getMains,
-  getNext,
-  toFiltered,
-} from './utils';
-
-import {
-  DefaultSection,
-  DefaultList,
-  DefaultLink,
-  DefaultLeaf,
-  DefaultHead,
-  DefaultRootTitle,
-  DefaultFilter,
-  DefaultMessage,
-} from './components';
-
-const createHandler = memoize(10000)((item, cb) => (...args) => cb(...args, item));
-
-const linked = (C, { onClick, onKeyUp, prefix = '', Link: L }) => {
-  const Linked = React.memo(p => (
-    <L
-      prefix={prefix}
-      {...p}
-      onKeyUp={createHandler(p, onKeyUp)}
-      onClick={createHandler(p, onClick)}
-    >
-      <C {...p} />
-    </L>
-  ));
-  Linked.displayName = `Linked${C.displayName}`;
-
-  return Linked;
-};
-
-const getLink = memoize(1)(Link => Link || DefaultLink);
-
-const getHead = memoize(1)((Head, Link, prefix, events) =>
-  linked(Head || DefaultHead, {
-    onClick: events.onClick,
-    onKeyUp: events.onKeyUp,
-    prefix,
-    Link: getLink(Link),
-  })
-);
-
-const getLeaf = memoize(1)((Leaf, Link, prefix, events) =>
-  linked(Leaf || DefaultLeaf, {
-    onClick: events.onClick,
-    onKeyUp: events.onKeyUp,
-    prefix,
-    Link: getLink(Link),
-  })
-);
-
-const getFilter = memoize(1)(Filter => Filter || DefaultFilter);
-const getTitle = memoize(1)(Title => Title || DefaultRootTitle);
-const getContainer = memoize(1)(Section => Section || DefaultSection);
-const getMessage = memoize(1)(Message => Message || DefaultMessage);
-
-const branchOrLeaf = (
-  // eslint-disable-next-line react/prop-types
-  { Branch, Leaf, Head, List },
-  { root, dataset, expanded, selected, depth }
-) => {
-  const node = dataset[root];
-  return node.children ? (
-    <Branch
-      key={node.id}
-      {...{
-        Branch,
-        Leaf,
-        Head,
-        List,
-        dataset,
-        root,
-        depth,
-        expanded,
-        selected,
-      }}
-    />
-  ) : (
-    <Leaf key={node.id} {...node} depth={depth} isSelected={selected[node.id]} />
-  );
-};
-
-const Tree = props => {
-  const {
-    root,
-    depth,
-    dataset,
-    expanded,
-    selected,
-    Branch = Tree,
-    List = DefaultList,
-    Leaf = DefaultLeaf,
-    Head = DefaultHead,
-  } = props;
-  const { children, ...node } = dataset[root] || {};
-
-  const mapNode = i =>
-    branchOrLeaf(
-      { Branch, Leaf, Head, List },
-      { dataset, selected, expanded, root: i, depth: depth + 1 }
-    );
-
-  switch (true) {
-    case !!(children && children.length && node.name): {
-      return (
-        <Fragment>
-          <Head
-            {...node}
-            depth={depth}
-            isExpanded={expanded[node.id]}
-            isSelected={selected[node.id]}
-            childIds={children}
-          />
-          {children && expanded[node.id] ? <List>{children.map(mapNode)}</List> : null}
-        </Fragment>
-      );
-    }
-    case !!(children && children.length): {
-      return <List>{children.map(mapNode)}</List>;
-    }
-    case node.isLeaf: {
-      return <Leaf key={node.id} {...node} depth={depth} isSelected={selected[node.id]} />;
-    }
-    default: {
-      return null;
-    }
-  }
-};
-
-const calculateTreeState = memoize(50)(
-  ({ dataset, selectedId }, { lastSelectedId, unfilteredExpanded }) => {
-    if (selectedId === lastSelectedId) {
-      return null;
-    }
-
-    // If a new selection is made, we need to ensure it is part of the expanded set
-    const selectedAncestorIds = selectedId ? getParents(selectedId, dataset).map(i => i.id) : [];
-    const newExpanded = Object.keys(dataset).reduce((acc, key) => {
-      acc[key] = selectedAncestorIds.includes(key) || unfilteredExpanded[key];
-      return acc;
-    }, {});
-
-    return {
-      lastSelectedId: selectedId,
-      unfilteredExpanded: newExpanded,
-    };
-  }
-);
-
-const getExpanded = ({ unfilteredExpanded, filteredExpanded, filter }) =>
-  filter ? filteredExpanded : unfilteredExpanded;
-
-const getFilteredDataset = memoize(50)(({ dataset, filter }) =>
-  filter ? toFiltered(dataset, filter) : dataset
-);
-
-// Update the set of expansions we are currently working with
-const updateExpanded = fn => ({ unfilteredExpanded, filteredExpanded, filter }) => {
-  if (filter) {
-    return {
-      filteredExpanded: fn(filteredExpanded),
-    };
-  }
-  return { unfilteredExpanded: fn(unfilteredExpanded) };
-};
-
-const getPropsForTree = memoize(50)(({ dataset, selectedId }) => {
-  const selected = Object.keys(dataset).reduce(
-    (acc, k) => Object.assign(acc, { [k]: k === selectedId }),
-    {}
-  );
-
-  const { roots, others } = getMains(dataset).reduce(
-    (acc, item) => {
-      const { isRoot } = item;
-      return isRoot
-        ? { ...acc, roots: [...acc.roots, item] }
-        : { ...acc, others: [...acc.others, item] };
-    },
-    { roots: [], others: [] }
-  );
-
-  return { selected, roots, others };
-});
-
-class TreeState extends PureComponent {
-  state = {
-    // We maintain two sets of expanded nodes, so we remember which were expanded if we clear the filter
-    unfilteredExpanded: {},
-    filteredExpanded: {},
-    filter: null,
-    lastSelectedId: null,
-  };
-
-  static getDerivedStateFromProps(props, state) {
-    return calculateTreeState(props, state);
-  }
-
-  events = {
-    onClick: (e, item) => {
-      this.setState(
-        updateExpanded(expanded => ({
-          ...expanded,
-          [item.id]: !expanded[item.id],
-        }))
-      );
-    },
-    onFilter: debounce(inputFilter => {
-      const { dataset } = this.props;
-      const filter = inputFilter.length >= 2 ? inputFilter : '';
-      const filteredDataset = getFilteredDataset({ dataset, filter });
-
-      // Whenever we change the filter, we reset the "filtered" expanded set back to all matching stories
-      this.setState({
-        filter,
-        filteredExpanded:
-          !!filter &&
-          Object.keys(filteredDataset).reduce((acc, k) => Object.assign(acc, { [k]: true }), {}),
-      });
-    }, 100),
-    onKeyUp: (e, item) => {
-      const { prefix, dataset } = this.props;
-      const { filter } = this.state;
-      const filteredDataset = getFilteredDataset({ dataset, filter });
-      const expanded = getExpanded(this.state);
-
-      const action = keyEventToAction(e);
-      if (action) {
-        prevent(e);
-      }
-
-      if (action === 'RIGHT') {
-        const next = getNext({ id: item.id, dataset: filteredDataset, expanded });
-        if (!filteredDataset[item.id].children || expanded[item.id]) {
-          if (next) {
-            try {
-              document.getElementById(createId(next.id, prefix)).focus();
-            } catch (err) {
-              // debugger;
-            }
-          }
-        }
-
-        this.setState(updateExpanded(currExpanded => ({ ...currExpanded, [item.id]: true })));
-      }
-      if (action === 'LEFT') {
-        const prev = getPrevious({ id: item.id, dataset: filteredDataset, expanded });
-
-        if (!filteredDataset[item.id].children || !expanded[item.id]) {
-          const parent = getParent(item.id, filteredDataset);
-          if (parent && parent.children) {
-            try {
-              document.getElementById(createId(parent.id, prefix)).focus();
-            } catch (err) {
-              // debugger;
-            }
-
-            if (prev) {
-              try {
-                document.getElementById(createId(prev.id, prefix)).focus();
-              } catch (err) {
-                // debugger;
-              }
-            }
-          }
-        }
-
-        this.setState(updateExpanded(currExpanded => ({ ...currExpanded, [item.id]: false })));
-      }
-      if (action === 'DOWN') {
-        const next = getNext({ id: item.id, dataset: filteredDataset, expanded });
-        if (next) {
-          try {
-            document.getElementById(createId(next.id, prefix)).focus();
-          } catch (err) {
-            // debugger;
-          }
-        }
-      }
-      if (action === 'UP') {
-        const prev = getPrevious({ id: item.id, dataset: filteredDataset, expanded });
-
-        if (prev) {
-          try {
-            document.getElementById(createId(prev.id, prefix)).focus();
-          } catch (err) {
-            // debugger;
-          }
-        }
-      }
-    },
-  };
-
-  componentDidMount() {
-    addons.getChannel().on(STORIES_COLLAPSE_ALL, this.onCollapseAll);
-    addons.getChannel().on(STORIES_EXPAND_ALL, this.onExpandAll);
-  }
-
-  componentWillUnmount() {
-    addons.getChannel().off(STORIES_COLLAPSE_ALL, this.onCollapseAll);
-    addons.getChannel().off(STORIES_EXPAND_ALL, this.onExpandAll);
-  }
-
-  updateExpanded = expanded => {
-    const { dataset, selectedId } = this.props;
-    this.setState(({ unfilteredExpanded }) => {
-      const selectedAncestorIds = selectedId ? getParents(selectedId, dataset).map(i => i.id) : [];
-      return {
-        unfilteredExpanded: Object.keys(unfilteredExpanded).reduce(
-          (acc, key) => ({ ...acc, [key]: selectedAncestorIds.includes(key) || expanded }),
-          {}
-        ),
-      };
-    });
-  };
-
-  onCollapseAll = () => this.updateExpanded(undefined);
-
-  onExpandAll = () => this.updateExpanded(true);
-
-  render() {
-    const {
-      events,
-      state: { filter, unfilteredExpanded, filteredExpanded },
-      props,
-    } = this;
-    const { prefix, dataset, selectedId } = props;
-
-    const Filter = getFilter(props.Filter);
-    const List = getFilter(props.List);
-    const Branch = Tree;
-    const Title = getTitle(props.Title);
-    const Link = getLink(props.Link);
-    const Leaf = getLeaf(props.Leaf, Link, prefix, events);
-    const Head = getHead(props.Head, Link, prefix, events);
-    const Section = getContainer(props.Section);
-    const Message = getMessage(props.Message);
-
-    const filteredDataset = getFilteredDataset({ dataset, filter });
-    const expanded = filter ? filteredExpanded : unfilteredExpanded;
-    const { selected, roots, others } = getPropsForTree({ dataset: filteredDataset, selectedId });
-
-    return (
-      <Fragment>
-        {Filter ? <Filter key="filter" onChange={this.events.onFilter} /> : null}
-        {roots.length || others.length ? (
-          <Fragment>
-            {roots.map(({ id, name, children }) => (
-              <Section key={id}>
-                <Title type="section" mods={['uppercase']}>
-                  {name}
-                </Title>
-                {children.map(key => (
-                  <Branch
-                    key={key}
-                    depth={0}
-                    dataset={filteredDataset}
-                    selected={selected}
-                    expanded={expanded}
-                    root={key}
-                    events={events}
-                    Head={Head}
-                    Leaf={Leaf}
-                    Branch={Branch}
-                    List={List}
-                  />
-                ))}
-              </Section>
-            ))}
-            {others.length ? (
-              <Section key="other">
-                {roots.length ? (
-                  <Title type="section" mods={['uppercase']}>
-                    Others
-                  </Title>
-                ) : null}
-                {others.map(({ id }) => (
-                  <Branch
-                    key={id}
-                    depth={0}
-                    dataset={filteredDataset}
-                    selected={selected}
-                    expanded={expanded}
-                    root={id}
-                    events={events}
-                    Link={Link}
-                    Head={Head}
-                    Leaf={Leaf}
-                    Branch={Branch}
-                  />
-                ))}
-              </Section>
-            ) : null}
-          </Fragment>
-        ) : (
-          <Message>This filter resulted in 0 results</Message>
-        )}
-      </Fragment>
-    );
-  }
-}
-
-TreeState.propTypes = {
-  prefix: PropTypes.string.isRequired,
-  dataset: PropTypes.shape({}).isRequired,
-  selectedId: PropTypes.string,
-  Filter: PropTypes.elementType,
-  List: PropTypes.elementType,
-  Title: PropTypes.elementType,
-  Link: PropTypes.elementType,
-  Leaf: PropTypes.elementType,
-  Head: PropTypes.elementType,
-  Section: PropTypes.elementType,
-  Message: PropTypes.elementType,
-};
-TreeState.defaultProps = {
-  selectedId: null,
-  Filter: undefined,
-  List: undefined,
-  Title: undefined,
-  Link: undefined,
-  Leaf: undefined,
-  Head: undefined,
-  Section: undefined,
-  Message: undefined,
-};
-
-export { TreeState, Tree };
diff --git a/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js b/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js
deleted file mode 100644
index e8f50a208658..000000000000
--- a/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js
+++ /dev/null
@@ -1,264 +0,0 @@
-export const mockDataset = {
-  withRoot: {
-    '1': {
-      isRoot: true,
-      isLeaf: false,
-      isComponent: false,
-      children: ['1-11', '1-12'],
-      depth: 0,
-      id: '1',
-      name: 'Root 1',
-    },
-    '2': {
-      isRoot: false,
-      isLeaf: false,
-      isComponent: false,
-      children: ['2-21', '2-22'],
-      depth: 0,
-      id: '2',
-      name: 'Group 1',
-    },
-    '1-11': {
-      isRoot: false,
-      isLeaf: false,
-      isComponent: true,
-      id: '1-11',
-      parent: '1',
-      depth: 1,
-      name: 'Child A1',
-    },
-    '1-12-121': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '1-12-121',
-      parent: '1-12',
-      depth: 2,
-      name: 'GrandChild A1.1',
-    },
-    '1-12-122': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '1-12-122',
-      parent: '1-12',
-      depth: 2,
-      name: 'GrandChild A1.2',
-    },
-    '1-12': {
-      isRoot: false,
-      isLeaf: false,
-      isComponent: true,
-      id: '1-12',
-      name: 'Child A2',
-      depth: 1,
-      children: ['1-12-121', '1-12-122'],
-      parent: '1',
-    },
-    '2-21': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '2-21',
-      depth: 1,
-      name: 'Child B1',
-      parent: '2',
-    },
-    '2-22': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '2-22',
-      depth: 1,
-      name: 'Child B2',
-      parent: '2',
-    },
-    '3': {
-      isRoot: true,
-      isLeaf: false,
-      isComponent: false,
-      children: ['3-31', '3-32'],
-      depth: 0,
-      id: '3',
-      name: 'Root 3',
-    },
-    '3-31': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '3-31',
-      depth: 1,
-      name: 'Child A1',
-      parent: '3',
-    },
-    '3-32': {
-      isRoot: false,
-      isLeaf: false,
-      isComponent: true,
-      id: '3-32',
-      name: 'Child A2',
-      depth: 1,
-      children: ['3-32-321', '3-32-322'],
-      parent: '3',
-    },
-    '3-32-321': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '3-32-321',
-      depth: 2,
-      name: 'GrandChild A1.1',
-      parent: '3-32',
-    },
-    '3-32-322': {
-      isRoot: false,
-      isLeaf: true,
-      isComponent: false,
-      id: '3-32-322',
-      depth: 2,
-      name: 'GrandChild A1.2',
-      parent: '3-32',
-    },
-  },
-  noRoot: {
-    '1': {
-      children: ['1-11', '1-12'],
-      isRoot: false,
-      isComponent: false,
-      isLeaf: false,
-      depth: 0,
-      id: '1',
-      name: 'Parent A',
-    },
-    '2': {
-      children: ['2-21', '2-22'],
-      isRoot: false,
-      isComponent: true,
-      isLeaf: false,
-      depth: 0,
-      id: '2',
-      name: 'Parent B',
-    },
-    '1-11': {
-      id: '1-11',
-      depth: 1,
-      name: 'Child A1',
-      isLeaf: true,
-      isComponent: false,
-      isRoot: false,
-      parent: '1',
-    },
-    '1-12-121': {
-      id: '1-12-121',
-      depth: 2,
-      name: 'GrandChild A1.1',
-      isLeaf: true,
-      isComponent: false,
-      isRoot: false,
-      parent: '1-12',
-    },
-    '1-12-122': {
-      id: '1-12-122',
-      depth: 2,
-      name: 'GrandChild A1.2',
-      isLeaf: true,
-      isComponent: false,
-      isRoot: false,
-      parent: '1-12',
-    },
-    '1-12': {
-      id: '1-12',
-      name: 'Child A2',
-      depth: 1,
-      children: ['1-12-121', '1-12-122'],
-      isRoot: false,
-      isComponent: true,
-      isLeaf: false,
-      parent: '1',
-    },
-    '2-21': {
-      id: '2-21',
-      depth: 1,
-      name: 'Child B1',
-      isLeaf: true,
-      isComponent: false,
-      isRoot: false,
-      parent: '2',
-    },
-    '2-22': {
-      id: '2-22',
-      depth: 1,
-      name: 'Child B2',
-      isLeaf: true,
-      isComponent: false,
-      isRoot: false,
-      parent: '2',
-    },
-  },
-};
-
-export const mockSelected = {
-  withRoot: {
-    '1': false,
-    '2': false,
-    '1-11': false,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-    '3': false,
-    '3-31': false,
-    '3-32': false,
-    '3-32-321': false,
-    '3-32-322': false,
-  },
-  noRoot: {
-    '1': false,
-    '2': false,
-    '1-11': false,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-  },
-};
-
-export const mockExpanded = {
-  withRoot: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-    '3': false,
-    '3-31': false,
-    '3-32': false,
-    '3-32-321': false,
-    '3-32-322': false,
-  },
-  noRoot: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-  },
-  noRootSecond: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': true,
-    '1-12-122': true,
-    '1-12': true,
-    '2-21': false,
-    '2-22': false,
-  },
-};
diff --git a/lib/ui/src/components/sidebar/treeview/utils.js b/lib/ui/src/components/sidebar/treeview/utils.js
deleted file mode 100644
index 79811c808ffc..000000000000
--- a/lib/ui/src/components/sidebar/treeview/utils.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import memoize from 'memoizerific';
-import Fuse from 'fuse.js';
-import { DOCS_MODE } from 'global';
-
-const FUZZY_SEARCH_THRESHOLD = 0.4;
-
-export const prevent = e => e.preventDefault();
-
-const toList = memoize(1)(dataset => Object.values(dataset));
-
-export const keyEventToAction = ({ keyCode, ctrlKey, shiftKey, altKey, metaKey }) => {
-  if (shiftKey || metaKey || ctrlKey || altKey) {
-    return false;
-  }
-  switch (keyCode) {
-    case 18: {
-      return 'ENTER';
-    }
-    case 32: {
-      return 'SPACE';
-    }
-    case 38: {
-      return 'UP';
-    }
-    case 40: {
-      return 'DOWN';
-    }
-    case 37: {
-      return DOCS_MODE ? 'UP' : 'LEFT';
-    }
-    case 39: {
-      return DOCS_MODE ? 'DOWN' : 'RIGHT';
-    }
-    default: {
-      return false;
-    }
-  }
-};
-
-export const createId = (id, prefix) => `${prefix}_${id}`;
-
-export const get = memoize(1000)((id, dataset) => dataset[id]);
-export const getParent = memoize(1000)((id, dataset) => {
-  const item = get(id, dataset);
-  if (!item || item.isRoot) {
-    return undefined;
-  }
-  return get(item.parent, dataset);
-});
-export const getParents = memoize(1000)((id, dataset) => {
-  const parent = getParent(id, dataset);
-
-  if (!parent) {
-    return [];
-  }
-  return [parent, ...getParents(parent.id, dataset)];
-});
-
-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 }) => {
-  // STEP 1
-  // find parent
-  // if no previous sibling, use parent
-  // unless parent is root
-  //
-  // STEP 2
-  // find previous sibling
-  // recurse into that sibling's last children that are expanded
-
-  const current = get(id, dataset);
-  const parent = getParent(id, dataset);
-  const mains = getMainsKeys(dataset);
-
-  const siblings = parent && parent.children ? parent.children : mains;
-  const index = siblings.indexOf(current.id);
-
-  if (index === 0) {
-    if (parent && parent.isRoot) {
-      return getPrevious({ id: parent.id, dataset, expanded });
-    }
-    if (!parent) {
-      return undefined;
-    }
-    return parent;
-  }
-
-  let item = get(siblings[index - 1], dataset);
-
-  while (item.children && expanded[item.id]) {
-    item = get(item.children.slice(-1)[0], dataset);
-  }
-
-  if (item.isRoot) {
-    return getPrevious({ id: item.id, dataset, expanded });
-  }
-
-  return item;
-};
-
-export const getNext = ({ id, dataset, expanded }) => {
-  // STEP 1:
-  // find any children if the node is expanded, first child
-  //
-  // STEP 2
-  // iterate over parents, + fake 'root':
-  // - find index of last parent as child in grandparent
-  // - if child has next sibling, return
-  // - if not, continue iterating
-  const current = get(id, dataset);
-
-  if (!current) {
-    return undefined;
-  }
-
-  const { children } = current;
-
-  if (children && children.length && (expanded[current.id] || current.isRoot)) {
-    return get(children[0], dataset);
-  }
-
-  const mains = getMainsKeys(dataset);
-
-  const parents = getParents(id, dataset).concat([{ children: mains }]);
-
-  const next = parents.reduce(
-    (acc, item) => {
-      if (acc.result) {
-        return acc;
-      }
-      const parent = item;
-      const siblings = parent && parent.children ? parent.children : mains;
-      const index = siblings.indexOf(acc.child.id);
-
-      if (siblings[index + 1]) {
-        return { result: get(siblings[index + 1], dataset) };
-      }
-      return { child: parent };
-    },
-    { child: current, result: undefined }
-  );
-
-  if (next.result && next.result.isRoot) {
-    return getNext({ id: next.result.id, dataset, expanded });
-  }
-  return next.result;
-};
-
-const fuse = memoize(5)(
-  dataset =>
-    new Fuse(toList(dataset), {
-      threshold: FUZZY_SEARCH_THRESHOLD,
-      keys: ['kind', 'name', 'parameters.fileName', 'parameters.notes'],
-    })
-);
-
-const exactMatch = memoize(1)(filter => i =>
-  (i.kind && i.kind.includes(filter)) ||
-  (i.name && i.name.includes(filter)) ||
-  (i.parameters && i.parameters.fileName && i.parameters.fileName.includes(filter)) ||
-  (i.parameters && typeof i.parameters.notes === 'string' && i.parameters.notes.includes(filter))
-);
-
-export const toId = (base, addition) => (base === '' ? `${addition}` : `${base}-${addition}`);
-export const toFiltered = (dataset, filter) => {
-  let found;
-  if (filter.length && filter.length > 2) {
-    found = fuse(dataset).search(filter);
-  } else {
-    found = toList(dataset).filter(exactMatch(filter));
-  }
-
-  // get all parents for all results
-  const result = found.reduce((acc, item) => {
-    getParents(item.id, dataset).forEach(pitem => {
-      acc[pitem.id] = pitem;
-    });
-
-    acc[item.id] = item;
-    return acc;
-  }, {});
-
-  // filter the children of the found items (and their parents) so only found entries are present
-  return Object.entries(result).reduce((acc, [k, v]) => {
-    acc[k] = v.children ? { ...v, children: v.children.filter(c => !!result[c]) } : v;
-    return acc;
-  }, {});
-};
diff --git a/lib/ui/src/containers/menu.tsx b/lib/ui/src/containers/menu.tsx
new file mode 100644
index 000000000000..b4d5dd87c448
--- /dev/null
+++ b/lib/ui/src/containers/menu.tsx
@@ -0,0 +1,189 @@
+import React, { useMemo } from 'react';
+
+import { Badge } from '@storybook/components';
+import { API } from '@storybook/api';
+
+import { shortcutToHumanString } from '../libs/shortcut';
+import { MenuItemIcon } from '../components/sidebar/Menu';
+
+const focusableUIElements = {
+  storySearchField: 'storybook-explorer-searchfield',
+  storyListMenu: 'storybook-explorer-menu',
+  storyPanelRoot: 'storybook-panel-root',
+};
+
+const shortcutToHumanStringIfEnabled = (shortcuts: string[], enableShortcuts: boolean) =>
+  enableShortcuts ? shortcutToHumanString(shortcuts) : null;
+
+export const useMenu = (
+  api: API,
+  isFullscreen: boolean,
+  showPanel: boolean,
+  showNav: boolean,
+  enableShortcuts: boolean
+) => {
+  const shortcutKeys = api.getShortcutKeys();
+
+  const sidebarToggle = useMemo(
+    () => ({
+      id: 'S',
+      title: 'Show sidebar',
+      onClick: () => api.toggleNav(),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.toggleNav, enableShortcuts),
+      left: showNav ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys, showNav]
+  );
+
+  const addonsToggle = useMemo(
+    () => ({
+      id: 'A',
+      title: 'Show addons',
+      onClick: () => api.togglePanel(),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.togglePanel, enableShortcuts),
+      left: showPanel ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys, showPanel]
+  );
+
+  const addonsOrientationToggle = useMemo(
+    () => ({
+      id: 'D',
+      title: 'Change addons orientation',
+      onClick: () => api.togglePanelPosition(),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.panelPosition, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const fullscreenToggle = useMemo(
+    () => ({
+      id: 'F',
+      title: 'Go full screen',
+      onClick: () => api.toggleFullscreen(),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.fullScreen, enableShortcuts),
+      left: isFullscreen ? 'check' : <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys, isFullscreen]
+  );
+
+  const searchToggle = useMemo(
+    () => ({
+      id: '/',
+      title: 'Search',
+      onClick: () => api.focusOnUIElement(focusableUIElements.storySearchField),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.search, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const up = useMemo(
+    () => ({
+      id: 'up',
+      title: 'Previous component',
+      onClick: () => api.jumpToComponent(-1),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.prevComponent, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const down = useMemo(
+    () => ({
+      id: 'down',
+      title: 'Next component',
+      onClick: () => api.jumpToComponent(1),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.nextComponent, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const prev = useMemo(
+    () => ({
+      id: 'prev',
+      title: 'Previous story',
+      onClick: () => api.jumpToStory(-1),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.prevStory, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const next = useMemo(
+    () => ({
+      id: 'next',
+      title: 'Next story',
+      onClick: () => api.jumpToStory(1),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.nextStory, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const about = useMemo(
+    () => ({
+      id: 'about',
+      title: 'About your Storybook',
+      onClick: () => api.navigate('/settings/about'),
+      right: api.versionUpdateAvailable() && <Badge status="positive">Update</Badge>,
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const shortcuts = useMemo(
+    () => ({
+      id: 'shortcuts',
+      title: 'Keyboard shortcuts',
+      onClick: () => api.navigate('/settings/shortcuts'),
+      right: shortcutToHumanStringIfEnabled(shortcutKeys.shortcutsPage, enableShortcuts),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  const collapse = useMemo(
+    () => ({
+      id: 'collapse',
+      title: 'Collapse all',
+      onClick: () => api.collapseAll(),
+      right: shortcutToHumanString(shortcutKeys.collapseAll),
+      left: <MenuItemIcon />,
+    }),
+    [api, shortcutToHumanStringIfEnabled, enableShortcuts, shortcutKeys]
+  );
+
+  return useMemo(
+    () => [
+      sidebarToggle,
+      addonsToggle,
+      addonsOrientationToggle,
+      fullscreenToggle,
+      searchToggle,
+      up,
+      down,
+      prev,
+      next,
+      about,
+      shortcuts,
+      collapse,
+    ],
+    [
+      sidebarToggle,
+      addonsToggle,
+      addonsOrientationToggle,
+      fullscreenToggle,
+      searchToggle,
+      up,
+      down,
+      prev,
+      next,
+      about,
+      shortcuts,
+      collapse,
+    ]
+  );
+};
diff --git a/lib/ui/src/containers/nav.js b/lib/ui/src/containers/nav.js
deleted file mode 100755
index 9bc5dc0533e8..000000000000
--- a/lib/ui/src/containers/nav.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { DOCS_MODE } from 'global';
-import React from 'react';
-import memoize from 'memoizerific';
-
-import { Badge } from '@storybook/components';
-import { Consumer } from '@storybook/api';
-import { logger } from '@storybook/client-logger';
-
-import { shortcutToHumanString } from '../libs/shortcut';
-
-import ListItemIcon from '../components/sidebar/ListItemIcon';
-import Sidebar from '../components/sidebar/Sidebar';
-
-const focusableUIElements = {
-  storySearchField: 'storybook-explorer-searchfield',
-  storyListMenu: 'storybook-explorer-menu',
-  storyPanelRoot: 'storybook-panel-root',
-};
-
-const shortcutToHumanStringIfEnabled = (shortcuts, enableShortcuts) =>
-  enableShortcuts ? shortcutToHumanString(shortcuts) : null;
-
-const createMenu = memoize(1)(
-  (api, shortcutKeys, isFullscreen, showPanel, showNav, enableShortcuts) => [
-    {
-      id: 'S',
-      title: 'Show sidebar',
-      onClick: () => api.toggleNav(),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.toggleNav, enableShortcuts),
-      left: showNav ? <ListItemIcon icon="check" /> : <ListItemIcon />,
-    },
-    {
-      id: 'A',
-      title: 'Show addons',
-      onClick: () => api.togglePanel(),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.togglePanel, enableShortcuts),
-      left: showPanel ? <ListItemIcon icon="check" /> : <ListItemIcon />,
-    },
-    {
-      id: 'D',
-      title: 'Change addons orientation',
-      onClick: () => api.togglePanelPosition(),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.panelPosition, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'F',
-      title: 'Go full screen',
-      onClick: api.toggleFullscreen,
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.fullScreen, enableShortcuts),
-      left: isFullscreen ? 'check' : <ListItemIcon />,
-    },
-    {
-      id: '/',
-      title: 'Search',
-      onClick: () => api.focusOnUIElement(focusableUIElements.storySearchField),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.search, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'up',
-      title: 'Previous component',
-      onClick: () => api.jumpToComponent(-1),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.prevComponent, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'down',
-      title: 'Next component',
-      onClick: () => api.jumpToComponent(1),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.nextComponent, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'prev',
-      title: 'Previous story',
-      onClick: () => api.jumpToStory(-1),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.prevStory, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'next',
-      title: 'Next story',
-      onClick: () => api.jumpToStory(1),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.nextStory, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'about',
-      title: 'About your Storybook',
-      onClick: () => api.navigate('/settings/about'),
-      right: api.versionUpdateAvailable() && <Badge status="positive">Update</Badge>,
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'shortcuts',
-      title: 'Keyboard shortcuts',
-      onClick: () => api.navigate('/settings/shortcuts'),
-      right: shortcutToHumanStringIfEnabled(shortcutKeys.shortcutsPage, enableShortcuts),
-      left: <ListItemIcon />,
-    },
-    {
-      id: 'collapse',
-      title: 'Collapse all',
-      onClick: () => api.collapseAll(),
-      right: shortcutToHumanString(shortcutKeys.collapseAll),
-      left: <ListItemIcon />,
-    },
-  ]
-);
-
-export const collapseAllStories = stories => {
-  // keep track of component IDs that have been rewritten to the ID of their first leaf child
-  const componentIdToLeafId = {};
-
-  // 1) remove all leaves
-  const leavesRemoved = Object.values(stories).filter(item => !item.isLeaf);
-
-  // 2) make all components leaves and rewrite their ID's to the first leaf child
-  const componentsFlattened = leavesRemoved.map(item => {
-    const { id, isComponent, children, ...rest } = item;
-    const nonLeafChildren = [];
-    const leafChildren = [];
-    children.forEach(child => (stories[child].isLeaf ? leafChildren : nonLeafChildren).push(child));
-
-    if (leafChildren.length === 0) {
-      return item; // pass through, we'll handle you later
-    }
-
-    const leafId = leafChildren[0];
-    const component = { ...rest, id: leafId, isLeaf: true, isComponent: true };
-    componentIdToLeafId[id] = leafId;
-
-    if (
-      (isComponent && nonLeafChildren.length > 0) ||
-      (!isComponent && nonLeafChildren.length === 0)
-    ) {
-      throw new Error(
-        `Unexpected '${item.id}': ${JSON.stringify({ isComponent, nonLeafChildren })}`
-      );
-    }
-
-    if (nonLeafChildren.length > 0) {
-      logger.error(
-        `Node ${item.id} contains non-leaf nodes that are getting removed: ${nonLeafChildren}!`
-      );
-    }
-
-    return component;
-  });
-
-  // 3) rewrite all the children as needed
-  const childrenRewritten = componentsFlattened.map(item => {
-    if (item.isLeaf) {
-      return item;
-    }
-
-    const { children, ...rest } = item;
-    const rewritten = children.map(child => componentIdToLeafId[child] || child);
-
-    return { children: rewritten, ...rest };
-  });
-
-  const result = {};
-  childrenRewritten.forEach(item => {
-    result[item.id] = item;
-  });
-  return result;
-};
-
-export const collapseDocsOnlyStories = storiesHash => {
-  // keep track of component IDs that have been rewritten to the ID of their first leaf child
-  const componentIdToLeafId = {};
-  const docsOnlyStoriesRemoved = Object.values(storiesHash).filter(item => {
-    if (item.isLeaf && item.parameters && item.parameters.docsOnly) {
-      componentIdToLeafId[item.parent] = item.id;
-      return false; // filter it out
-    }
-    return true;
-  });
-  const docsOnlyComponentsCollapsed = docsOnlyStoriesRemoved.map(item => {
-    // collapse docs-only components
-    const { isComponent, children, id } = item;
-    if (isComponent && children.length === 1) {
-      const leafId = componentIdToLeafId[id];
-      if (leafId) {
-        const collapsed = {
-          ...item,
-          id: leafId,
-          isLeaf: true,
-          children: undefined,
-        };
-        return collapsed;
-      }
-    }
-
-    // update groups
-    if (children) {
-      const rewritten = children.map(child => componentIdToLeafId[child] || child);
-      return { ...item, children: rewritten };
-    }
-
-    // pass through stories unmodified
-    return item;
-  });
-
-  const result = {};
-  docsOnlyComponentsCollapsed.forEach(item => {
-    result[item.id] = item;
-  });
-  return result;
-};
-
-export const mapper = ({ state, api }) => {
-  const {
-    ui: { name, url, enableShortcuts },
-    viewMode,
-    storyId,
-    layout: { isFullscreen, showPanel, showNav },
-    storiesHash,
-    storiesConfigured,
-  } = state;
-  const stories = DOCS_MODE
-    ? collapseAllStories(storiesHash)
-    : collapseDocsOnlyStories(storiesHash);
-
-  const shortcutKeys = api.getShortcutKeys();
-  return {
-    loading: !storiesConfigured,
-    title: name,
-    url,
-    stories,
-    storyId,
-    viewMode,
-    menu: createMenu(api, shortcutKeys, isFullscreen, showPanel, showNav, enableShortcuts),
-    menuHighlighted: api.versionUpdateAvailable(),
-  };
-};
-
-export default props => (
-  <Consumer filter={mapper}>{fromState => <Sidebar {...props} {...fromState} />}</Consumer>
-);
diff --git a/lib/ui/src/containers/nav.test.js b/lib/ui/src/containers/nav.test.js
deleted file mode 100644
index 91ece2ac1feb..000000000000
--- a/lib/ui/src/containers/nav.test.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { collapseDocsOnlyStories, collapseAllStories } from './nav';
-
-const docsOnly = { parameters: { docsOnly: true } };
-const root = { id: 'root', parent: false, children: ['a', 'b'] };
-const a = { id: 'a', isComponent: true, parent: 'root', children: ['a1'] };
-const a1 = { id: 'a1', isLeaf: true, parent: 'a' };
-const b = { id: 'b', isComponent: true, parent: 'root', children: ['b1', 'b2'] };
-const b1 = { id: 'b1', isLeaf: true, parent: 'b' };
-const b2 = { id: 'b2', isLeaf: true, parent: 'b' };
-const stories = { root, a, a1, b, b1, b2 };
-
-describe('collapse docs-only stories', () => {
-  it('ignores normal stories', () => {
-    const filtered = collapseDocsOnlyStories(stories);
-    expect(filtered).toEqual(stories);
-  });
-
-  it('filters out docs-only stories', () => {
-    const hasDocsOnly = {
-      ...stories,
-      a1: { ...a1, ...docsOnly },
-    };
-    const filtered = collapseDocsOnlyStories(hasDocsOnly);
-    expect(filtered.a1).toEqual({
-      id: 'a1',
-      isComponent: true,
-      isLeaf: true,
-      parent: 'root',
-    });
-  });
-});
-
-describe('collapse all stories', () => {
-  it('collapses normal stories', () => {
-    const collapsed = collapseAllStories(stories);
-    expect(collapsed).toEqual({
-      a1: {
-        id: 'a1',
-        isComponent: true,
-        isLeaf: true,
-        parent: 'root',
-      },
-      b1: {
-        id: 'b1',
-        isComponent: true,
-        isLeaf: true,
-        parent: 'root',
-      },
-      root: {
-        children: ['a1', 'b1'],
-        id: 'root',
-        parent: false,
-      },
-    });
-  });
-  it('collapses docs-only stories', () => {
-    const hasDocsOnly = {
-      ...stories,
-      a1: { ...a1, ...docsOnly },
-    };
-    const filtered = collapseAllStories(hasDocsOnly);
-    expect(filtered.a1).toEqual({
-      id: 'a1',
-      isComponent: true,
-      isLeaf: true,
-      parent: 'root',
-    });
-  });
-});
diff --git a/lib/ui/src/containers/notifications.js b/lib/ui/src/containers/notifications.js
deleted file mode 100644
index afaef819751b..000000000000
--- a/lib/ui/src/containers/notifications.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { Consumer } from '@storybook/api';
-
-import Notifications from '../components/notifications/notifications';
-
-export const mapper = ({ state }) => {
-  const { notifications } = state;
-
-  return {
-    notifications,
-  };
-};
-
-const NotificationConnect = props => (
-  <Consumer filter={mapper}>{fromState => <Notifications {...props} {...fromState} />}</Consumer>
-);
-
-export default NotificationConnect;
diff --git a/lib/ui/src/containers/notifications.tsx b/lib/ui/src/containers/notifications.tsx
new file mode 100644
index 000000000000..23c2c4ba0e36
--- /dev/null
+++ b/lib/ui/src/containers/notifications.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+
+import { Consumer, Combo } from '@storybook/api';
+
+import Notifications from '../components/notifications/notifications';
+
+export const mapper = ({ state }: Combo) => {
+  const { notifications } = state;
+
+  return {
+    notifications,
+  };
+};
+
+const NotificationConnect: FunctionComponent<any> = (props) => (
+  <Consumer filter={mapper}>{(fromState) => <Notifications {...props} {...fromState} />}</Consumer>
+);
+
+export default NotificationConnect;
diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js
deleted file mode 100644
index 88821840822d..000000000000
--- a/lib/ui/src/containers/panel.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import memoize from 'memoizerific';
-import { Consumer } from '@storybook/api';
-
-import AddonPanel from '../components/panel/panel';
-
-const createPanelActions = memoize(1)(api => ({
-  onSelect: panel => api.setSelectedPanel(panel),
-  toggleVisibility: () => api.togglePanel(),
-  togglePosition: () => api.togglePanelPosition(),
-}));
-
-const mapper = ({ state, api }) => ({
-  panels: api.getStoryPanels(),
-  selectedPanel: api.getSelectedPanel(),
-  panelPosition: state.layout.panelPosition,
-  actions: createPanelActions(api),
-});
-
-export default props => (
-  <Consumer filter={mapper}>{customProps => <AddonPanel {...props} {...customProps} />}</Consumer>
-);
diff --git a/lib/ui/src/containers/panel.stories.js b/lib/ui/src/containers/panel.stories.js
deleted file mode 100644
index f301e8553b48..000000000000
--- a/lib/ui/src/containers/panel.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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/panel.stories.tsx b/lib/ui/src/containers/panel.stories.tsx
new file mode 100644
index 000000000000..1669a915a40e
--- /dev/null
+++ b/lib/ui/src/containers/panel.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default {
+  title: 'UI/Addon Panel',
+};
+
+export const AllAddons = () => <div>By default all addon panels are rendered</div>;
+export const FilteredAddons = () => <div>By default all addon panels are rendered</div>;
+
+FilteredAddons.parameters = {
+  a11y: { disabled: true },
+  actions: { disabled: true },
+};
diff --git a/lib/ui/src/containers/panel.tsx b/lib/ui/src/containers/panel.tsx
new file mode 100644
index 000000000000..ff33e1a7c3a1
--- /dev/null
+++ b/lib/ui/src/containers/panel.tsx
@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import memoize from 'memoizerific';
+import { Consumer, Combo } from '@storybook/api';
+
+import AddonPanel from '../components/panel/panel';
+
+const createPanelActions = memoize(1)((api) => ({
+  onSelect: (panel: string) => api.setSelectedPanel(panel),
+  toggleVisibility: () => api.togglePanel(),
+  togglePosition: () => api.togglePanelPosition(),
+}));
+
+const mapper = ({ state, api }: Combo) => ({
+  panels: api.getStoryPanels(),
+  selectedPanel: api.getSelectedPanel(),
+  panelPosition: state.layout.panelPosition,
+  actions: createPanelActions(api),
+});
+
+const Panel: FunctionComponent<any> = (props) => (
+  <Consumer filter={mapper}>{(customProps) => <AddonPanel {...props} {...customProps} />}</Consumer>
+);
+
+export default Panel;
diff --git a/lib/ui/src/containers/preview.js b/lib/ui/src/containers/preview.js
deleted file mode 100644
index 3ecad17872a8..000000000000
--- a/lib/ui/src/containers/preview.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { PREVIEW_URL } from 'global';
-import React from 'react';
-
-import { Consumer } from '@storybook/api';
-
-import { Preview } from '../components/preview/preview';
-
-const nonAlphanumSpace = /[^a-z0-9 ]/gi;
-const doubleSpace = /\s\s/gi;
-const replacer = match => ` ${match} `;
-const addExtraWhiteSpace = input =>
-  input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' ');
-const getDescription = (storiesHash, storyId) => {
-  const storyInfo = storiesHash[storyId];
-  return storyInfo ? addExtraWhiteSpace(`${storyInfo.kind} - ${storyInfo.name}`) : '';
-};
-
-const mapper = ({ api, state: { layout, location, customQueryParams, storiesHash, storyId } }) => {
-  const story = storiesHash[storyId];
-  return {
-    api,
-    getElements: api.getElements,
-    options: layout,
-    description: getDescription(storiesHash, storyId),
-    ...api.getUrlState(),
-    queryParams: customQueryParams,
-    docsOnly: story && story.parameters && story.parameters.docsOnly,
-    location,
-  };
-};
-
-function getBaseUrl() {
-  try {
-    return PREVIEW_URL || 'iframe.html';
-  } catch (e) {
-    return 'iframe.html';
-  }
-}
-
-const PreviewConnected = React.memo(props => (
-  <Consumer filter={mapper}>
-    {fromState => {
-      return (
-        <Preview
-          {...props}
-          baseUrl={getBaseUrl()}
-          {...fromState}
-          customCanvas={fromState.api.renderPreview}
-        />
-      );
-    }}
-  </Consumer>
-));
-PreviewConnected.displayName = 'PreviewConnected';
-
-export default PreviewConnected;
diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
new file mode 100644
index 000000000000..6d692f0758d7
--- /dev/null
+++ b/lib/ui/src/containers/preview.tsx
@@ -0,0 +1,56 @@
+import { PREVIEW_URL } from 'global';
+import React from 'react';
+
+import { Consumer, Combo, StoriesHash, isRoot, isGroup, isStory } from '@storybook/api';
+
+import { Preview } from '../components/preview/preview';
+
+export type Item = StoriesHash[keyof StoriesHash];
+
+const nonAlphanumSpace = /[^a-z0-9 ]/gi;
+const doubleSpace = /\s\s/gi;
+const replacer = (match: string) => ` ${match} `;
+
+const addExtraWhiteSpace = (input: string) =>
+  input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' ');
+
+const getDescription = (item: Item) => {
+  if (isRoot(item)) {
+    return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
+  }
+  if (isGroup(item)) {
+    return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
+  }
+  if (isStory(item)) {
+    const { kind, name } = item;
+    return kind && name ? addExtraWhiteSpace(`${kind} - ${name} ⋅ Storybook`) : 'Storybook';
+  }
+
+  return 'Storybook';
+};
+
+const mapper = ({ api, state }: Combo) => {
+  const { layout, location, customQueryParams, storyId, refs, viewMode, path, refId } = state;
+  const story = api.getData(storyId, refId);
+  const docsOnly = story && story.parameters ? !!story.parameters.docsOnly : false;
+
+  return {
+    api,
+    story,
+    options: layout,
+    description: getDescription(story),
+    viewMode,
+    path,
+    refs,
+    baseUrl: PREVIEW_URL || 'iframe.html',
+    queryParams: customQueryParams,
+    docsOnly,
+    location,
+  };
+};
+
+const PreviewConnected = React.memo<{ id: string; withLoader: boolean }>((props) => (
+  <Consumer filter={mapper}>{(fromState) => <Preview {...props} {...fromState} />}</Consumer>
+));
+
+export default PreviewConnected;
diff --git a/lib/ui/src/containers/sidebar.test.ts b/lib/ui/src/containers/sidebar.test.ts
new file mode 100644
index 000000000000..a4e6734a864d
--- /dev/null
+++ b/lib/ui/src/containers/sidebar.test.ts
@@ -0,0 +1,205 @@
+import { StoriesHash } from '@storybook/api';
+import { collapseDocsOnlyStories, collapseAllStories } from './sidebar';
+
+type Item = StoriesHash[keyof StoriesHash];
+
+const docsOnly = { parameters: { docsOnly: true } };
+const root: Item = {
+  id: 'root',
+  name: 'root',
+  depth: 0,
+  children: ['a', 'b'],
+  isRoot: true,
+  isComponent: false,
+  isLeaf: false,
+};
+const a: Item = {
+  id: 'a',
+  name: 'a',
+  depth: 1,
+  isComponent: true,
+  isRoot: false,
+  isLeaf: false,
+  parent: 'root',
+  children: ['a1'],
+};
+const a1: Item = {
+  id: 'a1',
+  name: 'a1',
+  kind: 'a',
+  depth: 2,
+  isLeaf: true,
+  isComponent: false,
+  isRoot: false,
+  parent: 'a',
+};
+const b: Item = {
+  id: 'b',
+  name: 'b',
+  depth: 1,
+  isRoot: false,
+  isComponent: true,
+  isLeaf: false,
+  parent: 'root',
+  children: ['b1', 'b2'],
+};
+const b1: Item = {
+  id: 'b1',
+  name: 'b1',
+  kind: 'b',
+  depth: 2,
+  isLeaf: true,
+  isRoot: false,
+  isComponent: false,
+  parent: 'b',
+};
+const b2: Item = {
+  id: 'b2',
+  name: 'b2',
+  kind: 'b',
+  depth: 2,
+  isLeaf: true,
+  isRoot: false,
+  isComponent: false,
+  parent: 'b',
+};
+
+const stories: StoriesHash = { root, a, a1, b, b1, b2 };
+
+// this seems to work as intended
+describe('collapse docs-only stories', () => {
+  it('ignores normal stories', () => {
+    const filtered = collapseDocsOnlyStories(stories);
+    expect(filtered).toEqual(stories);
+  });
+
+  it('filters out docs-only stories', () => {
+    const hasDocsOnly: StoriesHash = {
+      ...stories,
+      a1: { ...a1, parameters: { ...a1.parameters, ...docsOnly.parameters } },
+    };
+    const filtered = collapseDocsOnlyStories(hasDocsOnly);
+
+    expect(filtered.root.children).not.toContain(hasDocsOnly.a.id);
+    expect(filtered.root.children).toContain(hasDocsOnly.a1.id);
+    expect(filtered.root.children).toContain(hasDocsOnly.b.id);
+
+    expect(filtered.a).not.toBeDefined();
+  });
+});
+
+describe('collapse all stories', () => {
+  it('collapses normal stories', () => {
+    const collapsed = collapseAllStories(stories);
+
+    const expected: StoriesHash = {
+      a1: {
+        id: 'a1',
+        depth: 1,
+        name: 'a',
+        kind: 'a',
+        parent: 'root',
+        children: [],
+        isRoot: false,
+        isComponent: true,
+        isLeaf: true,
+      },
+      b1: {
+        id: 'b1',
+        depth: 1,
+        name: 'b',
+        kind: 'b',
+        parent: 'root',
+        children: [],
+        isRoot: false,
+        isComponent: true,
+        isLeaf: true,
+      },
+      root: {
+        id: 'root',
+        name: 'root',
+        depth: 0,
+        children: ['a1', 'b1'],
+        isRoot: true,
+        isComponent: false,
+        isLeaf: false,
+      },
+    };
+
+    expect(collapsed).toEqual(expected);
+  });
+
+  it('collapses docs-only stories', () => {
+    const hasDocsOnly: StoriesHash = {
+      ...stories,
+      a1: { ...a1, parameters: { ...a1.parameters, ...docsOnly.parameters } },
+    };
+
+    const collapsed = collapseAllStories(hasDocsOnly);
+
+    expect(collapsed.a1).toEqual({
+      id: 'a1',
+      name: 'a',
+      kind: 'a',
+      depth: 1,
+      isComponent: true,
+      isLeaf: true,
+      isRoot: false,
+      parent: 'root',
+      children: [],
+    });
+  });
+
+  it('collapses mixtures of leaf and non-leaf children', () => {
+    const mixedRoot: Item = {
+      id: 'root',
+      name: 'root',
+      depth: 0,
+      isRoot: true,
+      isComponent: false,
+      isLeaf: false,
+      children: ['a', 'b1'],
+    };
+
+    const mixed: StoriesHash = {
+      root: mixedRoot,
+      a,
+      a1,
+      b1: { ...b1, depth: 1, parent: 'root' },
+    };
+    const collapsed = collapseAllStories(mixed);
+
+    expect(collapsed).toEqual({
+      a1: {
+        id: 'a1',
+        depth: 1,
+        name: 'a',
+        kind: 'a',
+        isRoot: false,
+        isComponent: true,
+        isLeaf: true,
+        parent: 'root',
+        children: [],
+      },
+      b1: {
+        id: 'b1',
+        name: 'b1',
+        kind: 'b',
+        depth: 1,
+        isLeaf: true,
+        isComponent: false,
+        isRoot: false,
+        parent: 'root',
+      },
+      root: {
+        id: 'root',
+        name: 'root',
+        depth: 0,
+        children: ['a1', 'b1'],
+        isRoot: true,
+        isComponent: false,
+        isLeaf: false,
+      },
+    });
+  });
+});
diff --git a/lib/ui/src/containers/sidebar.tsx b/lib/ui/src/containers/sidebar.tsx
new file mode 100755
index 000000000000..817236188cee
--- /dev/null
+++ b/lib/ui/src/containers/sidebar.tsx
@@ -0,0 +1,171 @@
+import { DOCS_MODE } from 'global';
+import React, { FunctionComponent, useMemo } from 'react';
+import rfdc from 'rfdc';
+
+import { Consumer, Combo, StoriesHash, Story } from '@storybook/api';
+
+import SidebarComponent from '../components/sidebar/Sidebar';
+import { useMenu } from './menu';
+
+export type Item = StoriesHash[keyof StoriesHash];
+
+export const collapseAllStories = (stories: StoriesHash) => {
+  // keep track of component IDs that have been rewritten to the ID of their first leaf child
+  const componentIdToLeafId: Record<string, string> = {};
+
+  // 1) remove all leaves
+  const leavesRemoved = Object.values(stories).filter(
+    (item) => !(item.isLeaf && stories[item.parent].isComponent)
+  );
+
+  // 2) make all components leaves and rewrite their ID's to the first leaf child
+  const componentsFlattened = leavesRemoved.map((item) => {
+    const { id, isComponent, isRoot, children, ...rest } = item;
+
+    // this is a folder, so just leave it alone
+    if (!isComponent) {
+      return item;
+    }
+
+    const nonLeafChildren: string[] = [];
+    const leafChildren: string[] = [];
+    children.forEach((child) =>
+      (stories[child].isLeaf ? leafChildren : nonLeafChildren).push(child)
+    );
+
+    if (leafChildren.length === 0) {
+      return item; // pass through, we'll handle you later
+    }
+
+    const leafId = leafChildren[0];
+    const component = {
+      ...rest,
+      id: leafId,
+      kind: (stories[leafId] as Story).kind,
+      isRoot: false,
+      isLeaf: true,
+      isComponent: true,
+      children: [] as string[],
+    };
+    componentIdToLeafId[id] = leafId;
+
+    // this is a component, so it should not have any non-leaf children
+    if (nonLeafChildren.length !== 0) {
+      throw new Error(
+        `Unexpected '${item.id}': ${JSON.stringify({ isComponent, nonLeafChildren })}`
+      );
+    }
+
+    return component;
+  });
+
+  // 3) rewrite all the children as needed
+  const childrenRewritten = componentsFlattened.map((item) => {
+    if (item.isLeaf) {
+      return item;
+    }
+
+    const { children, ...rest } = item;
+    const rewritten = children.map((child) => componentIdToLeafId[child] || child);
+
+    return { children: rewritten, ...rest };
+  });
+
+  const result = {} as StoriesHash;
+  childrenRewritten.forEach((item) => {
+    result[item.id] = item as Item;
+  });
+  return result;
+};
+
+export const collapseDocsOnlyStories = (storiesHash: StoriesHash) => {
+  // keep track of component IDs that have been rewritten to the ID of their first leaf child
+  const componentIdToLeafId: Record<string, string> = {};
+  const docsOnlyStoriesRemoved = Object.values(storiesHash).filter((item) => {
+    if (item.isLeaf && item.parameters && item.parameters.docsOnly) {
+      componentIdToLeafId[item.parent] = item.id;
+      return false; // filter it out
+    }
+    return true;
+  });
+
+  const docsOnlyComponentsCollapsed = docsOnlyStoriesRemoved.map((item) => {
+    // collapse docs-only components
+    const { isComponent, children, id } = item;
+    if (isComponent && children.length === 1) {
+      const leafId = componentIdToLeafId[id];
+      if (leafId) {
+        const collapsed = {
+          ...item,
+          id: leafId,
+          isLeaf: true,
+          children: [] as string[],
+        };
+        return collapsed;
+      }
+    }
+
+    // update groups
+    if (children) {
+      const rewritten = children.map((child) => componentIdToLeafId[child] || child);
+      return { ...item, children: rewritten };
+    }
+
+    // pass through stories unmodified
+    return item;
+  });
+
+  const result = {} as StoriesHash;
+  docsOnlyComponentsCollapsed.forEach((item) => {
+    result[item.id] = item as Item;
+  });
+  return result;
+};
+
+const clone = rfdc({ circles: true });
+
+const Sidebar: FunctionComponent<{}> = React.memo(() => {
+  const mapper = ({ state, api }: Combo) => {
+    const {
+      ui: { name, url, enableShortcuts },
+      viewMode,
+      storyId,
+      layout: { isFullscreen, showPanel, showNav },
+      storiesHash,
+      storiesConfigured,
+      storiesFailed,
+      refs,
+    } = state;
+
+    const stories = useMemo(() => {
+      // protect against mutation
+      const copy = clone(storiesHash);
+
+      return DOCS_MODE ? collapseAllStories(copy) : collapseDocsOnlyStories(copy);
+    }, [DOCS_MODE, storiesHash]);
+
+    const menu = useMenu(api, isFullscreen, showPanel, showNav, enableShortcuts);
+
+    return {
+      title: name,
+      url,
+      stories,
+      storiesFailed,
+      storiesConfigured,
+      refs,
+      storyId,
+      viewMode,
+      menu,
+      menuHighlighted: api.versionUpdateAvailable(),
+    };
+  };
+  return (
+    <Consumer filter={mapper}>
+      {(fromState) => {
+        return <SidebarComponent {...fromState} />;
+      }}
+    </Consumer>
+  );
+});
+
+export default Sidebar;
diff --git a/lib/ui/src/index.js b/lib/ui/src/index.js
deleted file mode 100644
index 245a7e2d9bc9..000000000000
--- a/lib/ui/src/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { DOCS_MODE } from 'global';
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-
-import { Location, LocationProvider } from '@storybook/router';
-import { Provider as ManagerProvider } from '@storybook/api';
-import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import { HelmetProvider } from 'react-helmet-async';
-
-import App from './app';
-
-import Provider from './provider';
-
-ThemeProvider.displayName = 'ThemeProvider';
-HelmetProvider.displayName = 'HelmetProvider';
-
-const getDocsMode = () => {
-  try {
-    return !!DOCS_MODE;
-  } catch (e) {
-    return false;
-  }
-};
-
-const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
-
-export const Root = ({ provider }) => (
-  <Container key="container">
-    <HelmetProvider key="helmet.Provider">
-      <LocationProvider key="location.provider">
-        <Location key="location.consumer">
-          {locationData => (
-            <ManagerProvider
-              key="manager"
-              provider={provider}
-              {...locationData}
-              docsMode={getDocsMode()}
-            >
-              {({ state, api }) => {
-                const panelCount = Object.keys(api.getPanels()).length;
-                const story = state.storiesHash[state.storyId];
-                return (
-                  <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
-                    <App
-                      key="app"
-                      viewMode={state.viewMode}
-                      layout={state.layout}
-                      panelCount={panelCount}
-                      docsOnly={story && story.parameters && story.parameters.docsOnly}
-                    />
-                  </ThemeProvider>
-                );
-              }}
-            </ManagerProvider>
-          )}
-        </Location>
-      </LocationProvider>
-    </HelmetProvider>
-  </Container>
-);
-
-Root.propTypes = {
-  provider: PropTypes.shape({}).isRequired,
-};
-
-function renderStorybookUI(domNode, provider) {
-  if (!(provider instanceof Provider)) {
-    throw new Error('provider is not extended from the base Provider');
-  }
-
-  ReactDOM.render(<Root key="root" provider={provider} />, domNode);
-}
-
-export { Provider };
-export { renderStorybookUI as default };
diff --git a/lib/ui/src/index.tsx b/lib/ui/src/index.tsx
new file mode 100644
index 000000000000..082896e77cf7
--- /dev/null
+++ b/lib/ui/src/index.tsx
@@ -0,0 +1,78 @@
+import { DOCS_MODE } from 'global';
+import React, { FunctionComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+import { Location, LocationProvider } from '@storybook/router';
+import { Provider as ManagerProvider, Combo } from '@storybook/api';
+import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+import { HelmetProvider } from 'react-helmet-async';
+
+import App from './app';
+
+import Provider from './provider';
+
+// @ts-ignore
+ThemeProvider.displayName = 'ThemeProvider';
+// @ts-ignore
+HelmetProvider.displayName = 'HelmetProvider';
+
+const getDocsMode = () => {
+  try {
+    return !!DOCS_MODE;
+  } catch (e) {
+    return false;
+  }
+};
+
+const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
+
+export interface RootProps {
+  provider: Provider;
+}
+
+export const Root: FunctionComponent<RootProps> = ({ provider }) => (
+  <Container key="container">
+    <HelmetProvider key="helmet.Provider">
+      <LocationProvider key="location.provider">
+        <Location key="location.consumer">
+          {(locationData) => (
+            <ManagerProvider
+              key="manager"
+              provider={provider}
+              {...locationData}
+              docsMode={getDocsMode()}
+            >
+              {({ state, api }: Combo) => {
+                const panelCount = Object.keys(api.getPanels()).length;
+                const story = api.getData(state.storyId);
+
+                return (
+                  <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
+                    <App
+                      key="app"
+                      viewMode={state.viewMode}
+                      layout={state.layout}
+                      panelCount={panelCount}
+                      docsOnly={story && story.parameters && story.parameters.docsOnly}
+                    />
+                  </ThemeProvider>
+                );
+              }}
+            </ManagerProvider>
+          )}
+        </Location>
+      </LocationProvider>
+    </HelmetProvider>
+  </Container>
+);
+
+function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
+  if (!(provider instanceof Provider)) {
+    throw new Error('provider is not extended from the base Provider');
+  }
+
+  ReactDOM.render(<Root key="root" provider={provider} />, domNode);
+}
+
+export { Provider };
+export { renderStorybookUI as default };
diff --git a/lib/ui/src/libs/merge.js b/lib/ui/src/libs/merge.js
deleted file mode 100644
index fea3965cd29d..000000000000
--- a/lib/ui/src/libs/merge.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import mergeWith from 'lodash/mergeWith';
-import isEqual from 'lodash/isEqual';
-
-import { logger } from '@storybook/client-logger';
-
-export default (a, b) =>
-  mergeWith({}, a, b, (objValue, srcValue) => {
-    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach(s => {
-        const existing = objValue.find(o => o === s || isEqual(o, s));
-        if (!existing) {
-          objValue.push(s);
-        }
-      });
-
-      return objValue;
-    }
-    if (Array.isArray(objValue)) {
-      logger.log(['the types mismatch, picking', objValue]);
-      return objValue;
-    }
-    return undefined;
-  });
diff --git a/lib/ui/src/libs/merge.ts b/lib/ui/src/libs/merge.ts
new file mode 100644
index 000000000000..500a8f22a84e
--- /dev/null
+++ b/lib/ui/src/libs/merge.ts
@@ -0,0 +1,23 @@
+import mergeWith from 'lodash/mergeWith';
+import isEqual from 'lodash/isEqual';
+
+import { logger } from '@storybook/client-logger';
+
+export default (a: any, b: any) =>
+  mergeWith({}, a, b, (objValue: any, srcValue: any) => {
+    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
+      srcValue.forEach((s) => {
+        const existing = objValue.find((o) => o === s || isEqual(o, s));
+        if (!existing) {
+          objValue.push(s);
+        }
+      });
+
+      return objValue;
+    }
+    if (Array.isArray(objValue)) {
+      logger.debug('Merge types mismatch', { picking: objValue, over: srcValue });
+      return objValue;
+    }
+    return undefined;
+  });
diff --git a/lib/ui/src/libs/shortcut.js b/lib/ui/src/libs/shortcut.js
deleted file mode 100644
index 7cd4e644533a..000000000000
--- a/lib/ui/src/libs/shortcut.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { navigator } from 'global';
-
-// The shortcut is our JSON-ifiable representation of a shortcut combination
-
-export const isMacLike = () =>
-  navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false;
-export const controlOrMetaSymbol = () => (isMacLike() ? '⌘' : 'ctrl');
-export const controlOrMetaKey = () => (isMacLike() ? 'meta' : 'control');
-export const optionOrAltSymbol = () => (isMacLike() ? '⌥' : 'alt');
-
-export const isShortcutTaken = (arr1, arr2) => JSON.stringify(arr1) === JSON.stringify(arr2);
-
-// Map a keyboard event to a keyboard shortcut
-// NOTE: if we change the fields on the event that we need, we'll need to update the serialization in core/preview/start.js
-export const eventToShortcut = e => {
-  // Meta key only doesn't map to a shortcut
-  if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) {
-    return null;
-  }
-
-  const keys = [];
-  if (e.altKey) {
-    keys.push('alt');
-  }
-  if (e.ctrlKey) {
-    keys.push('control');
-  }
-  if (e.metaKey) {
-    keys.push('meta');
-  }
-  if (e.shiftKey) {
-    keys.push('shift');
-  }
-
-  if (e.key && e.key.length === 1 && e.key !== ' ') {
-    keys.push(e.key.toUpperCase());
-  }
-  if (e.key === ' ') {
-    keys.push('space');
-  }
-  if (e.key === 'Escape') {
-    keys.push('escape');
-  }
-  if (e.key === 'ArrowRight') {
-    keys.push('ArrowRight');
-  }
-  if (e.key === 'ArrowDown') {
-    keys.push('ArrowDown');
-  }
-  if (e.key === 'ArrowUp') {
-    keys.push('ArrowUp');
-  }
-  if (e.key === 'ArrowLeft') {
-    keys.push('ArrowLeft');
-  }
-
-  return keys.length > 0 ? keys : null;
-};
-
-export const shortcutMatchesShortcut = (inputShortcut, shortcut) =>
-  inputShortcut &&
-  inputShortcut.length === shortcut.length &&
-  !inputShortcut.find((key, i) => key !== shortcut[i]);
-
-// Should this keyboard event trigger this keyboard shortcut?
-export const eventMatchesShortcut = (e, shortcut) =>
-  shortcutMatchesShortcut(eventToShortcut(e), shortcut);
-
-export const keyToSymbol = key => {
-  if (key === 'alt') {
-    return optionOrAltSymbol();
-  }
-  if (key === 'control') {
-    return '⌃';
-  }
-  if (key === 'meta') {
-    return '⌘';
-  }
-  if (key === 'shift') {
-    return '⇧​';
-  }
-  if (key === 'Enter' || key === 'Backspace' || key === 'Esc') {
-    return '';
-  }
-  if (key === 'escape') {
-    return '';
-  }
-  if (key === ' ') {
-    return 'SPACE';
-  }
-  if (key === 'ArrowUp') {
-    return '↑';
-  }
-  if (key === 'ArrowDown') {
-    return '↓';
-  }
-  if (key === 'ArrowLeft') {
-    return '←';
-  }
-  if (key === 'ArrowRight') {
-    return '→';
-  }
-  return key.toUpperCase();
-};
-
-// Display the shortcut as a human readable string
-export const shortcutToHumanString = shortcut => shortcut.map(keyToSymbol).join(' ');
diff --git a/lib/ui/src/libs/shortcut.ts b/lib/ui/src/libs/shortcut.ts
new file mode 100644
index 000000000000..5ce858f2abb5
--- /dev/null
+++ b/lib/ui/src/libs/shortcut.ts
@@ -0,0 +1,108 @@
+import { navigator } from 'global';
+
+// The shortcut is our JSON-ifiable representation of a shortcut combination
+
+export const isMacLike = () =>
+  navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false;
+export const controlOrMetaSymbol = () => (isMacLike() ? '⌘' : 'ctrl');
+export const controlOrMetaKey = () => (isMacLike() ? 'meta' : 'control');
+export const optionOrAltSymbol = () => (isMacLike() ? '⌥' : 'alt');
+
+export const isShortcutTaken = (arr1: any, arr2: any) =>
+  JSON.stringify(arr1) === JSON.stringify(arr2);
+
+// Map a keyboard event to a keyboard shortcut
+// NOTE: if we change the fields on the event that we need, we'll need to update the serialization in core/preview/start.js
+export const eventToShortcut = (e: KeyboardEvent) => {
+  // Meta key only doesn't map to a shortcut
+  if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) {
+    return null;
+  }
+
+  const keys = [];
+  if (e.altKey) {
+    keys.push('alt');
+  }
+  if (e.ctrlKey) {
+    keys.push('control');
+  }
+  if (e.metaKey) {
+    keys.push('meta');
+  }
+  if (e.shiftKey) {
+    keys.push('shift');
+  }
+
+  if (e.key && e.key.length === 1 && e.key !== ' ') {
+    keys.push(e.key.toUpperCase());
+  }
+  if (e.key === ' ') {
+    keys.push('space');
+  }
+  if (e.key === 'Escape') {
+    keys.push('escape');
+  }
+  if (e.key === 'ArrowRight') {
+    keys.push('ArrowRight');
+  }
+  if (e.key === 'ArrowDown') {
+    keys.push('ArrowDown');
+  }
+  if (e.key === 'ArrowUp') {
+    keys.push('ArrowUp');
+  }
+  if (e.key === 'ArrowLeft') {
+    keys.push('ArrowLeft');
+  }
+
+  return keys.length > 0 ? keys : null;
+};
+
+export const shortcutMatchesShortcut = (inputShortcut: any[], shortcut: any[]) =>
+  inputShortcut &&
+  inputShortcut.length === shortcut.length &&
+  !inputShortcut.find((key, i) => key !== shortcut[i]);
+
+// Should this keyboard event trigger this keyboard shortcut?
+export const eventMatchesShortcut = (e: KeyboardEvent, shortcut: any) =>
+  shortcutMatchesShortcut(eventToShortcut(e), shortcut);
+
+export const keyToSymbol = (key: KeyboardEvent['key']) => {
+  if (key === 'alt') {
+    return optionOrAltSymbol();
+  }
+  if (key === 'control') {
+    return '⌃';
+  }
+  if (key === 'meta') {
+    return '⌘';
+  }
+  if (key === 'shift') {
+    return '⇧​';
+  }
+  if (key === 'Enter' || key === 'Backspace' || key === 'Esc') {
+    return '';
+  }
+  if (key === 'escape') {
+    return '';
+  }
+  if (key === ' ') {
+    return 'SPACE';
+  }
+  if (key === 'ArrowUp') {
+    return '↑';
+  }
+  if (key === 'ArrowDown') {
+    return '↓';
+  }
+  if (key === 'ArrowLeft') {
+    return '←';
+  }
+  if (key === 'ArrowRight') {
+    return '→';
+  }
+  return key.toUpperCase();
+};
+
+// Display the shortcut as a human readable string
+export const shortcutToHumanString = (shortcut: any) => shortcut.map(keyToSymbol).join(' ');
diff --git a/lib/ui/src/libs/withLifecycleDecorator.js b/lib/ui/src/libs/withLifecycleDecorator.js
deleted file mode 100644
index d03473f57f80..000000000000
--- a/lib/ui/src/libs/withLifecycleDecorator.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// A small utility to add before/afterEach to stories.
-class WithLifecyle extends Component {
-  constructor(props, ...rest) {
-    super(props, ...rest);
-
-    props.beforeEach();
-  }
-
-  componentWillUnmount() {
-    const { afterEach } = this.props;
-
-    afterEach();
-  }
-
-  render() {
-    const { storyFn } = this.props;
-
-    return storyFn();
-  }
-}
-
-WithLifecyle.propTypes = {
-  storyFn: PropTypes.func.isRequired,
-  beforeEach: PropTypes.func,
-  afterEach: PropTypes.func,
-};
-WithLifecyle.defaultProps = {
-  beforeEach: () => {},
-  afterEach: () => {},
-};
-
-export default ({ beforeEach, afterEach }) => storyFn => (
-  <WithLifecyle beforeEach={beforeEach} afterEach={afterEach} storyFn={storyFn} />
-);
diff --git a/lib/ui/src/libs/withLifecycleDecorator.tsx b/lib/ui/src/libs/withLifecycleDecorator.tsx
new file mode 100644
index 000000000000..e338c74d99ce
--- /dev/null
+++ b/lib/ui/src/libs/withLifecycleDecorator.tsx
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+export interface WithLifecyleProps {
+  storyFn: Function;
+  beforeEach?: Function;
+  afterEach?: Function;
+}
+
+// A small utility to add before/afterEach to stories.
+class WithLifecyle extends Component<WithLifecyleProps> {
+  constructor(props: WithLifecyleProps) {
+    super(props);
+
+    if (props.beforeEach) {
+      props.beforeEach();
+    }
+  }
+
+  componentWillUnmount() {
+    const { afterEach } = this.props;
+
+    if (afterEach) {
+      afterEach();
+    }
+  }
+
+  render() {
+    const { storyFn } = this.props;
+
+    return storyFn();
+  }
+}
+
+export default ({ beforeEach, afterEach }: { beforeEach: Function; afterEach: Function }) => (
+  storyFn: Function
+) => <WithLifecyle beforeEach={beforeEach} afterEach={afterEach} storyFn={storyFn} />;
diff --git a/lib/ui/src/provider.js b/lib/ui/src/provider.js
deleted file mode 100644
index e9df2c7cc116..000000000000
--- a/lib/ui/src/provider.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class Provider {
-  getElements() {
-    throw new Error('Provider.getElements() is not implemented!');
-  }
-
-  handleAPI() {
-    throw new Error('Provider.handleAPI() is not implemented!');
-  }
-
-  getConfig() {
-    throw new Error('Provider.getConfig() is not implemented!');
-  }
-}
diff --git a/lib/ui/src/provider.ts b/lib/ui/src/provider.ts
new file mode 100644
index 000000000000..deef40364b21
--- /dev/null
+++ b/lib/ui/src/provider.ts
@@ -0,0 +1,15 @@
+export default class Provider {
+  getElements() {
+    throw new Error('Provider.getElements() is not implemented!');
+  }
+
+  handleAPI() {
+    throw new Error('Provider.handleAPI() is not implemented!');
+  }
+
+  getConfig() {
+    console.error('Provider.getConfig() is not implemented!');
+
+    return {};
+  }
+}
diff --git a/lib/ui/src/settings/SettingsFooter.js b/lib/ui/src/settings/SettingsFooter.js
deleted file mode 100644
index c6a8aaff6e24..000000000000
--- a/lib/ui/src/settings/SettingsFooter.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { styled } from '@storybook/theming';
-import { Link } from '@storybook/components';
-
-const Footer = styled.div(({ theme }) => ({
-  display: 'flex',
-  paddingTop: 20,
-  marginTop: 20,
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  fontWeight: theme.typography.weight.bold,
-
-  '& > * + *': {
-    marginLeft: 20,
-  },
-}));
-const SettingsFooter = props => (
-  <Footer {...props}>
-    <Link secondary href="https://storybook.js.org" cancel={false} target="_blank">
-      Docs
-    </Link>
-    <Link secondary href="https://github.com/storybookjs/storybook" cancel={false} target="_blank">
-      GitHub
-    </Link>
-    <Link secondary href="https://storybook.js.org/support" cancel={false} target="_blank">
-      Support
-    </Link>
-  </Footer>
-);
-
-export default SettingsFooter;
diff --git a/lib/ui/src/settings/SettingsFooter.stories.js b/lib/ui/src/settings/SettingsFooter.stories.js
deleted file mode 100644
index 6a29a4d21ad2..000000000000
--- a/lib/ui/src/settings/SettingsFooter.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import SettingsFooter from './SettingsFooter';
-
-export default {
-  component: SettingsFooter,
-  title: 'UI/Settings/SettingsFooter',
-  decorators: [storyFn => <div style={{ width: '600px', margin: '2rem auto' }}>{storyFn()}</div>],
-};
-
-export const basic = () => <SettingsFooter />;
diff --git a/lib/ui/src/settings/SettingsFooter.stories.tsx b/lib/ui/src/settings/SettingsFooter.stories.tsx
new file mode 100644
index 000000000000..8be7f130cd12
--- /dev/null
+++ b/lib/ui/src/settings/SettingsFooter.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { DecoratorFn } from '@storybook/react';
+import SettingsFooter from './SettingsFooter';
+
+export default {
+  component: SettingsFooter,
+  title: 'UI/Settings/SettingsFooter',
+  decorators: [
+    ((StoryFn, c) => (
+      <div style={{ width: '600px', margin: '2rem auto' }}>
+        <StoryFn {...c} />
+      </div>
+    )) as DecoratorFn,
+  ],
+};
+
+export const basic = () => <SettingsFooter />;
diff --git a/lib/ui/src/settings/SettingsFooter.tsx b/lib/ui/src/settings/SettingsFooter.tsx
new file mode 100644
index 000000000000..b09ea94d4c15
--- /dev/null
+++ b/lib/ui/src/settings/SettingsFooter.tsx
@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+
+import { styled } from '@storybook/theming';
+import { Link } from '@storybook/components';
+
+const Footer = styled.div(({ theme }) => ({
+  display: 'flex',
+  paddingTop: 20,
+  marginTop: 20,
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  fontWeight: theme.typography.weight.bold,
+
+  '& > * + *': {
+    marginLeft: 20,
+  },
+}));
+const SettingsFooter: FunctionComponent<any> = (props) => (
+  <Footer {...props}>
+    <Link secondary href="https://storybook.js.org" cancel={false} target="_blank">
+      Docs
+    </Link>
+    <Link secondary href="https://github.com/storybookjs/storybook" cancel={false} target="_blank">
+      GitHub
+    </Link>
+    <Link secondary href="https://storybook.js.org/support" cancel={false} target="_blank">
+      Support
+    </Link>
+  </Footer>
+);
+
+export default SettingsFooter;
diff --git a/lib/ui/src/settings/about.js b/lib/ui/src/settings/about.js
deleted file mode 100644
index b8a638d31863..000000000000
--- a/lib/ui/src/settings/about.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { Fragment } from 'react';
-import semver from 'semver';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-import { GlobalHotKeys } from 'react-hotkeys';
-import Markdown from 'markdown-to-jsx';
-
-import {
-  StorybookIcon,
-  SyntaxHighlighter,
-  IconButton,
-  Icons,
-  Tabs,
-  Link,
-  DocumentWrapper,
-} from '@storybook/components';
-
-import SettingsFooter from './SettingsFooter';
-
-const keyMap = {
-  CLOSE: 'escape',
-};
-
-const Header = styled.header(({ theme }) => ({
-  marginBottom: 20,
-  fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
-  alignItems: 'center',
-  display: 'flex',
-
-  '> svg': {
-    height: 32,
-    width: 'auto',
-    marginRight: 8,
-  },
-}));
-
-const Subheading = styled.span(({ theme }) => ({
-  letterSpacing: '0.35em',
-  textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '24px',
-  color: theme.color.mediumdark,
-}));
-
-const SubheadingLink = styled(Link)(({ theme }) => ({
-  fontSize: theme.typography.size.s1,
-}));
-
-const Subheader = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: '.75rem',
-});
-
-const UpdateMessage = styled.div(
-  ({ status, theme }) => {
-    if (status === 'positive') {
-      return { background: theme.background.positive, color: theme.color.positive };
-    }
-    if (status === 'negative') {
-      return { background: theme.background.negative, color: theme.color.negative };
-    }
-    return { background: '#EAF3FC', color: theme.color.darkest };
-  },
-
-  ({ theme }) => ({
-    fontWeight: theme.typography.weight.bold,
-    fontSize: theme.typography.size.s2,
-    padding: '10px 20px',
-    marginBottom: 24,
-    borderRadius: theme.appBorderRadius,
-    border: `1px solid ${theme.appBorderColor}`,
-    textAlign: 'center',
-  })
-);
-
-const ErrorMessage = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  textAlign: 'center',
-}));
-
-const Upgrade = styled.div(({ theme }) => ({
-  marginTop: 20,
-  borderTop: `1px solid ${theme.appBorderColor}`,
-}));
-
-const Container = styled.div({
-  padding: `3rem 20px`,
-  maxWidth: 600,
-  margin: '0 auto',
-});
-
-const AboutScreen = ({ latest, current, onClose }) => {
-  const canUpdate = latest && semver.gt(latest.version, current.version);
-
-  let updateMessage;
-  if (latest) {
-    if (canUpdate) {
-      updateMessage = (
-        <UpdateMessage status="positive">
-          Storybook {latest.version} is available. Upgrade from {current.version} now.
-        </UpdateMessage>
-      );
-    } else {
-      updateMessage = (
-        <UpdateMessage status="neutral">Looking good! You're up to date.</UpdateMessage>
-      );
-    }
-  } else {
-    updateMessage = (
-      <UpdateMessage status="negative">
-        Oops! The latest version of Storybook couldn't be fetched.
-      </UpdateMessage>
-    );
-  }
-
-  return (
-    <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
-      <Tabs
-        absolute
-        selected="about"
-        actions={{ onSelect: () => {} }}
-        tools={
-          <Fragment>
-            <IconButton
-              onClick={e => {
-                e.preventDefault();
-                return onClose();
-              }}
-              title="close"
-            >
-              <Icons icon="close" />
-            </IconButton>
-          </Fragment>
-        }
-      >
-        <div id="about" title="About">
-          <Container>
-            <Header>
-              <StorybookIcon />
-              Storybook {current.version}
-            </Header>
-
-            {updateMessage}
-
-            {latest ? (
-              <Fragment>
-                <Subheader>
-                  <Subheading>{latest.version} Changelog</Subheading>
-                  <SubheadingLink
-                    secondary
-                    href="https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md"
-                    withArrow
-                    cancel={false}
-                    target="_blank"
-                  >
-                    Read full changelog
-                  </SubheadingLink>
-                </Subheader>
-                <DocumentWrapper>
-                  <Markdown>{latest.info.plain}</Markdown>
-                </DocumentWrapper>
-              </Fragment>
-            ) : (
-              <ErrorMessage>
-                <Link
-                  href="https://github.com/storybookjs/storybook/releases"
-                  target="_blank"
-                  withArrow
-                  secondary
-                  cancel={false}
-                >
-                  Check Storybook's release history
-                </Link>
-              </ErrorMessage>
-            )}
-
-            {canUpdate && (
-              <Upgrade>
-                <DocumentWrapper>
-                  <p>
-                    <b>Upgrade all Storybook packages to latest:</b>
-                  </p>
-                  <SyntaxHighlighter language="bash" copyable padded bordered>
-                    npx npm-check-updates '/storybook/' -u && npm install
-                  </SyntaxHighlighter>
-                  <p>
-                    Alternatively, if you're using yarn run the following command, and check all
-                    Storybook related packages:
-                  </p>
-                  <SyntaxHighlighter language="bash" copyable padded bordered>
-                    yarn upgrade-interactive --latest
-                  </SyntaxHighlighter>
-                </DocumentWrapper>
-              </Upgrade>
-            )}
-
-            <SettingsFooter />
-          </Container>
-        </div>
-      </Tabs>
-    </GlobalHotKeys>
-  );
-};
-
-AboutScreen.propTypes = {
-  current: PropTypes.shape({
-    version: PropTypes.string.isRequired,
-  }).isRequired,
-  latest: PropTypes.shape({
-    version: PropTypes.string.isRequired,
-    info: PropTypes.shape({
-      plain: PropTypes.string.isRequired,
-    }).isRequired,
-  }),
-  onClose: PropTypes.func.isRequired,
-};
-
-AboutScreen.defaultProps = {
-  latest: null,
-};
-
-export { AboutScreen as default };
diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js
index a06fe0b704e7..ac3ab02266cc 100644
--- a/lib/ui/src/settings/about.stories.js
+++ b/lib/ui/src/settings/about.stories.js
@@ -13,7 +13,7 @@ storiesOf('UI/Settings/AboutScreen', module)
   .addParameters({
     component: AboutScreen,
   })
-  .addDecorator(s => (
+  .addDecorator((s) => (
     <div
       style={{
         position: 'relative',
diff --git a/lib/ui/src/settings/about.tsx b/lib/ui/src/settings/about.tsx
new file mode 100644
index 000000000000..ac3e7962958f
--- /dev/null
+++ b/lib/ui/src/settings/about.tsx
@@ -0,0 +1,213 @@
+import React, { Fragment, FunctionComponent, SyntheticEvent } from 'react';
+import semver from '@storybook/semver';
+import { styled } from '@storybook/theming';
+import { State } from '@storybook/api';
+import { GlobalHotKeys } from 'react-hotkeys';
+import Markdown from 'markdown-to-jsx';
+
+import {
+  StorybookIcon,
+  SyntaxHighlighter,
+  IconButton,
+  Icons,
+  Tabs,
+  Link,
+  DocumentWrapper,
+} from '@storybook/components';
+
+import SettingsFooter from './SettingsFooter';
+
+const keyMap = {
+  CLOSE: 'escape',
+};
+
+const Header = styled.header(({ theme }) => ({
+  marginBottom: 20,
+  fontSize: theme.typography.size.m3,
+  fontWeight: theme.typography.weight.black,
+  alignItems: 'center',
+  display: 'flex',
+
+  '> svg': {
+    height: 32,
+    width: 'auto',
+    marginRight: 8,
+  },
+}));
+
+const Subheading = styled.span(({ theme }) => ({
+  letterSpacing: '0.35em',
+  textTransform: 'uppercase',
+  fontWeight: theme.typography.weight.black,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '24px',
+  color: theme.color.mediumdark,
+}));
+
+const SubheadingLink = styled(Link)(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+}));
+
+const Subheader = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '.75rem',
+});
+
+const UpdateMessage = styled.div<{ status: 'positive' | 'negative' | string }>(
+  ({ status, theme }) => {
+    if (status === 'positive') {
+      return { background: theme.background.positive, color: theme.color.positive };
+    }
+    if (status === 'negative') {
+      return { background: theme.background.negative, color: theme.color.negative };
+    }
+    return { background: '#EAF3FC', color: theme.color.darkest };
+  },
+
+  ({ theme }) => ({
+    fontWeight: theme.typography.weight.bold,
+    fontSize: theme.typography.size.s2,
+    padding: '10px 20px',
+    marginBottom: 24,
+    borderRadius: theme.appBorderRadius,
+    border: `1px solid ${theme.appBorderColor}`,
+    textAlign: 'center',
+  })
+);
+
+const ErrorMessage = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+  textAlign: 'center',
+}));
+
+const Upgrade = styled.div(({ theme }) => ({
+  marginTop: 20,
+  borderTop: `1px solid ${theme.appBorderColor}`,
+}));
+
+const Container = styled.div({
+  padding: `3rem 20px`,
+  maxWidth: 600,
+  margin: '0 auto',
+});
+
+const AboutScreen: FunctionComponent<{
+  latest: State['versions']['latest'];
+  current: State['versions']['current'];
+  onClose: (e?: KeyboardEvent) => void;
+}> = ({ latest = null, current, onClose }) => {
+  const canUpdate = latest && semver.gt(latest.version, current.version);
+
+  let updateMessage;
+  if (latest) {
+    if (canUpdate) {
+      updateMessage = (
+        <UpdateMessage status="positive">
+          Storybook {latest.version} is available. Upgrade from {current.version} now.
+        </UpdateMessage>
+      );
+    } else {
+      updateMessage = (
+        <UpdateMessage status="neutral">Looking good! You're up to date.</UpdateMessage>
+      );
+    }
+  } else {
+    updateMessage = (
+      <UpdateMessage status="negative">
+        Oops! The latest version of Storybook couldn't be fetched.
+      </UpdateMessage>
+    );
+  }
+
+  return (
+    <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
+      <Tabs
+        absolute
+        selected="about"
+        actions={{ onSelect: () => {} }}
+        tools={
+          <Fragment>
+            <IconButton
+              onClick={(e: SyntheticEvent) => {
+                e.preventDefault();
+                return onClose();
+              }}
+              title="close"
+            >
+              <Icons icon="close" />
+            </IconButton>
+          </Fragment>
+        }
+      >
+        <div id="about" title="About">
+          <Container>
+            <Header>
+              <StorybookIcon />
+              Storybook {current.version}
+            </Header>
+
+            {updateMessage}
+
+            {latest ? (
+              <Fragment>
+                <Subheader>
+                  <Subheading>{latest.version} Changelog</Subheading>
+                  <SubheadingLink
+                    secondary
+                    href="https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md"
+                    withArrow
+                    cancel={false}
+                    target="_blank"
+                  >
+                    Read full changelog
+                  </SubheadingLink>
+                </Subheader>
+                <DocumentWrapper>
+                  <Markdown>{latest.info.plain}</Markdown>
+                </DocumentWrapper>
+              </Fragment>
+            ) : (
+              <ErrorMessage>
+                <Link
+                  href="https://github.com/storybookjs/storybook/releases"
+                  target="_blank"
+                  withArrow
+                  secondary
+                  cancel={false}
+                >
+                  Check Storybook's release history
+                </Link>
+              </ErrorMessage>
+            )}
+
+            {canUpdate && (
+              <Upgrade>
+                <DocumentWrapper>
+                  <p>
+                    <b>Upgrade all Storybook packages to latest:</b>
+                  </p>
+                  <SyntaxHighlighter language="bash" copyable padded bordered>
+                    npx npm-check-updates '/storybook/' -u && npm install
+                  </SyntaxHighlighter>
+                  <p>
+                    Alternatively, if you're using yarn run the following command, and check all
+                    Storybook related packages:
+                  </p>
+                  <SyntaxHighlighter language="bash" copyable padded bordered>
+                    yarn upgrade-interactive --latest
+                  </SyntaxHighlighter>
+                </DocumentWrapper>
+              </Upgrade>
+            )}
+
+            <SettingsFooter />
+          </Container>
+        </div>
+      </Tabs>
+    </GlobalHotKeys>
+  );
+};
+
+export { AboutScreen as default };
diff --git a/lib/ui/src/settings/about_page.js b/lib/ui/src/settings/about_page.js
deleted file mode 100644
index 3478df85e886..000000000000
--- a/lib/ui/src/settings/about_page.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { history } from 'global';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { Route } from '@storybook/router';
-import { Consumer } from '@storybook/api';
-
-import AboutScreen from './about';
-
-// Clear a notification on mount. This could be exported by core/notifications.js perhaps?
-class NotificationClearer extends Component {
-  componentDidMount() {
-    const { api, notificationId } = this.props;
-    api.clearNotification(notificationId);
-  }
-
-  render() {
-    const { children } = this.props;
-    return children;
-  }
-}
-
-NotificationClearer.propTypes = {
-  api: PropTypes.shape({
-    clearNotification: PropTypes.func.isRequired,
-  }).isRequired,
-  notificationId: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-export default () => (
-  <Route path="about">
-    <Consumer>
-      {({ api }) => (
-        <NotificationClearer api={api} notificationId="update">
-          <AboutScreen
-            current={api.getCurrentVersion()}
-            latest={api.getLatestVersion()}
-            onClose={() => history.back()}
-          />
-        </NotificationClearer>
-      )}
-    </Consumer>
-  </Route>
-);
diff --git a/lib/ui/src/settings/about_page.tsx b/lib/ui/src/settings/about_page.tsx
new file mode 100644
index 000000000000..584567ce9655
--- /dev/null
+++ b/lib/ui/src/settings/about_page.tsx
@@ -0,0 +1,36 @@
+import { history } from 'global';
+import React, { Component } from 'react';
+
+import { Route } from '@storybook/router';
+import { Consumer, API, Combo } from '@storybook/api';
+
+import AboutScreen from './about';
+
+// Clear a notification on mount. This could be exported by core/notifications.js perhaps?
+class NotificationClearer extends Component<{ api: API; notificationId: string }> {
+  componentDidMount() {
+    const { api, notificationId } = this.props;
+    api.clearNotification(notificationId);
+  }
+
+  render() {
+    const { children } = this.props;
+    return children;
+  }
+}
+
+export default () => (
+  <Route path="about">
+    <Consumer>
+      {({ api }: Combo) => (
+        <NotificationClearer api={api} notificationId="update">
+          <AboutScreen
+            current={api.getCurrentVersion()}
+            latest={api.getLatestVersion()}
+            onClose={() => history.back()}
+          />
+        </NotificationClearer>
+      )}
+    </Consumer>
+  </Route>
+);
diff --git a/lib/ui/src/settings/index.js b/lib/ui/src/settings/index.js
deleted file mode 100644
index c9f64fdaa7f1..000000000000
--- a/lib/ui/src/settings/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import AboutPage from './about_page';
-import ShortcutsPage from './shortcuts_page';
-
-const SettingsPages = () => [<AboutPage key="about" />, <ShortcutsPage key="shortcuts" />];
-
-export { SettingsPages as default };
diff --git a/lib/ui/src/settings/index.tsx b/lib/ui/src/settings/index.tsx
new file mode 100644
index 000000000000..8a91b8114ca1
--- /dev/null
+++ b/lib/ui/src/settings/index.tsx
@@ -0,0 +1,12 @@
+import React, { FunctionComponent, Fragment } from 'react';
+import AboutPage from './about_page';
+import ShortcutsPage from './shortcuts_page';
+
+const SettingsPages: FunctionComponent = () => (
+  <Fragment>
+    <AboutPage key="about" />
+    <ShortcutsPage key="shortcuts" />
+  </Fragment>
+);
+
+export { SettingsPages as default };
diff --git a/lib/ui/src/settings/shortcuts.js b/lib/ui/src/settings/shortcuts.js
deleted file mode 100644
index 7abf235f0b83..000000000000
--- a/lib/ui/src/settings/shortcuts.js
+++ /dev/null
@@ -1,329 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { styled, keyframes } from '@storybook/theming';
-import { GlobalHotKeys } from 'react-hotkeys';
-
-import { Form, IconButton, Icons, Tabs } from '@storybook/components';
-import SettingsFooter from './SettingsFooter';
-
-import { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut } from '../libs/shortcut';
-
-const { Button, Input } = Form;
-
-const Header = styled.header(({ theme }) => ({
-  marginBottom: 20,
-  fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
-  alignItems: 'center',
-  display: 'flex',
-}));
-
-// Grid
-export const HeaderItem = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-}));
-
-export const GridHeaderRow = styled.div({
-  alignSelf: 'flex-end',
-  display: 'grid',
-  margin: '10px 0',
-  gridTemplateColumns: '1fr 1fr 12px',
-  '& > *:last-of-type': {
-    gridColumn: '2 / 2',
-    justifySelf: 'flex-end',
-    gridRow: '1',
-  },
-});
-
-export const Row = styled.div(({ theme }) => ({
-  padding: '6px 0',
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  display: 'grid',
-  gridTemplateColumns: '1fr 1fr 0px',
-}));
-
-export const GridWrapper = styled.div({
-  display: 'grid',
-  gridTemplateColumns: '1fr',
-  gridAutoRows: 'minmax(auto, auto)',
-  marginBottom: 20,
-});
-
-// Form
-export const Description = styled.div({
-  alignSelf: 'center',
-});
-
-export const TextInput = styled(Input)(
-  ({ valid, theme }) =>
-    valid === 'error'
-      ? {
-          animation: `${theme.animation.jiggle} 700ms ease-out`,
-        }
-      : {},
-  {
-    display: 'flex',
-    width: 80,
-    flexDirection: 'column',
-    justifySelf: 'flex-end',
-    paddingLeft: 4,
-    paddingRight: 4,
-    textAlign: 'center',
-  }
-);
-
-export const Fade = keyframes`
-0%,100% { opacity: 0; }
-  50% { opacity: 1; }
-`;
-
-export const SuccessIcon = styled(Icons)(
-  ({ valid, theme }) =>
-    valid === 'valid'
-      ? {
-          color: theme.color.positive,
-          animation: `${Fade} 2s ease forwards`,
-        }
-      : {
-          opacity: 0,
-        },
-  {
-    alignSelf: 'center',
-    display: 'flex',
-    marginLeft: 10,
-    height: 14,
-    width: 14,
-  }
-);
-
-const Container = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  padding: `3rem 20px`,
-  maxWidth: 600,
-  margin: '0 auto',
-}));
-
-const shortcutLabels = {
-  fullScreen: 'Go full screen',
-  togglePanel: 'Toggle addons',
-  panelPosition: 'Toggle addons orientation',
-  toggleNav: 'Toggle sidebar',
-  toolbar: 'Toggle canvas toolbar',
-  search: 'Focus search',
-  focusNav: 'Focus sidebar',
-  focusIframe: 'Focus canvas',
-  focusPanel: 'Focus addons',
-  prevComponent: 'Previous component',
-  nextComponent: 'Next component',
-  prevStory: 'Previous story',
-  nextStory: 'Next story',
-  shortcutsPage: 'Go to shortcuts page',
-  aboutPage: 'Go to about page',
-  collapseAll: 'Collapse all items on sidebar',
-  expandAll: 'Expand all items on sidebar',
-};
-
-// Shortcuts that cannot be configured
-const fixedShortcuts = ['escape'];
-
-function toShortcutState(shortcutKeys) {
-  return Object.entries(shortcutKeys).reduce(
-    (acc, [feature, shortcut]) =>
-      fixedShortcuts.includes(feature) ? acc : { ...acc, [feature]: { shortcut, error: false } },
-    {}
-  );
-}
-
-const keyMap = {
-  CLOSE: 'escape',
-};
-
-class ShortcutsScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeFeature: '',
-      successField: '',
-      // The initial shortcutKeys that come from props are the defaults/what was saved
-      // As the user interacts with the page, the state stores the temporary, unsaved shortcuts
-      // This object also includes the error attached to each shortcut
-      shortcutKeys: toShortcutState(props.shortcutKeys),
-    };
-  }
-
-  onKeyDown = e => {
-    const { activeFeature, shortcutKeys } = this.state;
-
-    if (e.key === 'Backspace') {
-      return this.restoreDefault();
-    }
-
-    const shortcut = eventToShortcut(e);
-
-    // Keypress is not a potential shortcut
-    if (!shortcut) {
-      return false;
-    }
-
-    // Check we don't match any other shortucts
-    const error = !!Object.entries(shortcutKeys).find(
-      ([feature, { shortcut: existingShortcut }]) =>
-        feature !== activeFeature &&
-        existingShortcut &&
-        shortcutMatchesShortcut(shortcut, existingShortcut)
-    );
-
-    return this.setState({
-      shortcutKeys: { ...shortcutKeys, [activeFeature]: { shortcut, error } },
-    });
-  };
-
-  onFocus = focusedInput => () => {
-    const { shortcutKeys } = this.state;
-
-    this.setState({
-      activeFeature: focusedInput,
-      shortcutKeys: { ...shortcutKeys, [focusedInput]: { shortcut: null, error: false } },
-    });
-  };
-
-  onBlur = async () => {
-    const { shortcutKeys, activeFeature } = this.state;
-
-    if (shortcutKeys[activeFeature]) {
-      const { shortcut, error } = shortcutKeys[activeFeature];
-      if (!shortcut || error) {
-        return this.restoreDefault();
-      }
-      return this.saveShortcut();
-    }
-    return false;
-  };
-
-  saveShortcut = async () => {
-    const { activeFeature, shortcutKeys } = this.state;
-
-    const { setShortcut } = this.props;
-    await setShortcut(activeFeature, shortcutKeys[activeFeature].shortcut);
-    this.setState({ successField: activeFeature });
-  };
-
-  restoreDefaults = async () => {
-    const { restoreAllDefaultShortcuts } = this.props;
-
-    const defaultShortcuts = await restoreAllDefaultShortcuts();
-    return this.setState({ shortcutKeys: toShortcutState(defaultShortcuts) });
-  };
-
-  restoreDefault = async () => {
-    const { activeFeature, shortcutKeys } = this.state;
-
-    const { restoreDefaultShortcut } = this.props;
-
-    const defaultShortcut = await restoreDefaultShortcut(activeFeature);
-    return this.setState({
-      shortcutKeys: {
-        ...shortcutKeys,
-        ...toShortcutState({ [activeFeature]: defaultShortcut }),
-      },
-    });
-  };
-
-  displaySuccessMessage = activeElement => {
-    const { successField, shortcutKeys } = this.state;
-    return activeElement === successField && shortcutKeys[activeElement].error === false
-      ? 'valid'
-      : '';
-  };
-
-  displayError = activeElement => {
-    const { activeFeature, shortcutKeys } = this.state;
-    return activeElement === activeFeature && shortcutKeys[activeElement].error === true
-      ? 'error'
-      : '';
-  };
-
-  renderKeyInput = () => {
-    const { shortcutKeys } = this.state;
-    const arr = Object.entries(shortcutKeys).map(([feature, { shortcut }]) => (
-      <Row key={feature}>
-        <Description>{shortcutLabels[feature]}</Description>
-
-        <TextInput
-          spellCheck="false"
-          valid={this.displayError(feature)}
-          className="modalInput"
-          onBlur={this.onBlur}
-          onFocus={this.onFocus(feature)}
-          onKeyDown={this.onKeyDown}
-          value={shortcut ? shortcutToHumanString(shortcut) : ''}
-          placeholder="Type keys"
-          readOnly
-        />
-
-        <SuccessIcon valid={this.displaySuccessMessage(feature)} icon="check" />
-      </Row>
-    ));
-
-    return arr;
-  };
-
-  renderKeyForm = () => (
-    <GridWrapper>
-      <GridHeaderRow>
-        <HeaderItem>Commands</HeaderItem>
-        <HeaderItem>Shortcut</HeaderItem>
-      </GridHeaderRow>
-      {this.renderKeyInput()}
-    </GridWrapper>
-  );
-
-  render() {
-    const { onClose } = this.props;
-    const layout = this.renderKeyForm();
-    return (
-      <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
-        <Tabs
-          absolute
-          selected="shortcuts"
-          actions={{ onSelect: () => {} }}
-          tools={
-            <Fragment>
-              <IconButton
-                onClick={e => {
-                  e.preventDefault();
-                  return onClose();
-                }}
-              >
-                <Icons icon="close" />
-              </IconButton>
-            </Fragment>
-          }
-        >
-          <div id="shortcuts" title="Keyboard Shortcuts">
-            <Container>
-              <Header>Keyboard shortcuts</Header>
-
-              {layout}
-              <Button tertiary small id="restoreDefaultsHotkeys" onClick={this.restoreDefaults}>
-                Restore defaults
-              </Button>
-
-              <SettingsFooter />
-            </Container>
-          </div>
-        </Tabs>
-      </GlobalHotKeys>
-    );
-  }
-}
-
-ShortcutsScreen.propTypes = {
-  shortcutKeys: PropTypes.shape({}).isRequired, // Need TS for this
-  setShortcut: PropTypes.func.isRequired,
-  restoreDefaultShortcut: PropTypes.func.isRequired,
-  restoreAllDefaultShortcuts: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default ShortcutsScreen;
diff --git a/lib/ui/src/settings/shortcuts.stories.js b/lib/ui/src/settings/shortcuts.stories.js
deleted file mode 100644
index bfb9761be23b..000000000000
--- a/lib/ui/src/settings/shortcuts.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { actions as makeActions } from '@storybook/addon-actions';
-
-import ShortcutsScreen from './shortcuts';
-
-const defaultShortcuts = {
-  fullScreen: ['F'],
-  togglePanel: ['A'],
-  panelPosition: ['D'],
-  toggleNav: ['S'],
-  toolbar: ['T'],
-  search: ['/'],
-  focusNav: ['1'],
-  focusIframe: ['2'],
-  focusPanel: ['3'],
-  prevComponent: ['alt', 'ArrowUp'],
-  nextComponent: ['alt', 'ArrowDown'],
-  prevStory: ['alt', 'ArrowLeft'],
-  nextStory: ['alt', 'ArrowRight'],
-  shortcutsPage: ['ctrl', 'shift', ','],
-  aboutPage: [','],
-  escape: ['escape'], // This one is not customizable
-  collapseAll: ['ctrl', 'shift', 'ArrowUp'],
-  expandAll: ['ctrl', 'shift', 'ArrowDown'],
-};
-
-const actions = makeActions(
-  'setShortcut',
-  'restoreDefaultShortcut',
-  'restoreAllDefaultShortcuts',
-  'onClose'
-);
-
-export default {
-  component: ShortcutsScreen,
-  title: 'UI/Settings/ShortcutsScreen',
-  decorators: [
-    s => (
-      <div
-        style={{
-          position: 'relative',
-          height: 'calc(100vh)',
-          width: 'calc(100vw)',
-        }}
-      >
-        {s()}
-      </div>
-    ),
-  ],
-};
-
-export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
-defaults.story = { name: 'default shortcuts' };
diff --git a/lib/ui/src/settings/shortcuts.stories.tsx b/lib/ui/src/settings/shortcuts.stories.tsx
new file mode 100644
index 000000000000..2682fec3a43e
--- /dev/null
+++ b/lib/ui/src/settings/shortcuts.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { actions as makeActions } from '@storybook/addon-actions';
+
+import { DecoratorFn } from '@storybook/react';
+import ShortcutsScreen from './shortcuts';
+
+const defaultShortcuts = {
+  fullScreen: ['F'],
+  togglePanel: ['A'],
+  panelPosition: ['D'],
+  toggleNav: ['S'],
+  toolbar: ['T'],
+  search: ['/'],
+  focusNav: ['1'],
+  focusIframe: ['2'],
+  focusPanel: ['3'],
+  prevComponent: ['alt', 'ArrowUp'],
+  nextComponent: ['alt', 'ArrowDown'],
+  prevStory: ['alt', 'ArrowLeft'],
+  nextStory: ['alt', 'ArrowRight'],
+  shortcutsPage: ['ctrl', 'shift', ','],
+  aboutPage: [','],
+  escape: ['escape'], // This one is not customizable
+  collapseAll: ['ctrl', 'shift', 'ArrowUp'],
+  expandAll: ['ctrl', 'shift', 'ArrowDown'],
+};
+
+const actions = makeActions(
+  'setShortcut',
+  'restoreDefaultShortcut',
+  'restoreAllDefaultShortcuts',
+  'onClose'
+);
+
+export default {
+  component: ShortcutsScreen,
+  title: 'UI/Settings/ShortcutsScreen',
+  decorators: [
+    ((StoryFn, c) => (
+      <div
+        style={{
+          position: 'relative',
+          height: 'calc(100vh)',
+          width: 'calc(100vw)',
+        }}
+      >
+        <StoryFn {...c} />
+      </div>
+    )) as DecoratorFn,
+  ],
+};
+
+export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
+defaults.storyName = 'default shortcuts';
diff --git a/lib/ui/src/settings/shortcuts.test.js b/lib/ui/src/settings/shortcuts.test.js
index e12b41e1bb91..f8fd348b7ce4 100644
--- a/lib/ui/src/settings/shortcuts.test.js
+++ b/lib/ui/src/settings/shortcuts.test.js
@@ -18,7 +18,7 @@ const shortcutKeys = {
 
 const makeActions = () => ({
   setShortcut: jest.fn(),
-  restoreDefaultShortcut: jest.fn().mockImplementation(action => shortcutKeys[action]),
+  restoreDefaultShortcut: jest.fn().mockImplementation((action) => shortcutKeys[action]),
   restoreAllDefaultShortcuts: jest.fn().mockReturnValue(shortcutKeys),
   onClose: jest.fn(),
 });
diff --git a/lib/ui/src/settings/shortcuts.tsx b/lib/ui/src/settings/shortcuts.tsx
new file mode 100644
index 000000000000..52dc7fb4905d
--- /dev/null
+++ b/lib/ui/src/settings/shortcuts.tsx
@@ -0,0 +1,339 @@
+import React, { Component, Fragment, SyntheticEvent } from 'react';
+import { styled, keyframes } from '@storybook/theming';
+import { GlobalHotKeys } from 'react-hotkeys';
+
+import { Form, IconButton, Icons, Tabs } from '@storybook/components';
+import SettingsFooter from './SettingsFooter';
+
+import { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut } from '../libs/shortcut';
+
+const { Button, Input } = Form;
+
+const Header = styled.header(({ theme }) => ({
+  marginBottom: 20,
+  fontSize: theme.typography.size.m3,
+  fontWeight: theme.typography.weight.black,
+  alignItems: 'center',
+  display: 'flex',
+}));
+
+// Grid
+export const HeaderItem = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+}));
+
+export const GridHeaderRow = styled.div({
+  alignSelf: 'flex-end',
+  display: 'grid',
+  margin: '10px 0',
+  gridTemplateColumns: '1fr 1fr 12px',
+  '& > *:last-of-type': {
+    gridColumn: '2 / 2',
+    justifySelf: 'flex-end',
+    gridRow: '1',
+  },
+});
+
+export const Row = styled.div(({ theme }) => ({
+  padding: '6px 0',
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 0px',
+}));
+
+export const GridWrapper = styled.div({
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  gridAutoRows: 'minmax(auto, auto)',
+  marginBottom: 20,
+});
+
+// Form
+export const Description = styled.div({
+  alignSelf: 'center',
+});
+
+export type ValidationStates = 'valid' | 'error' | 'warn';
+
+export const TextInput = styled(Input)<{ valid: ValidationStates }>(
+  ({ valid, theme }) =>
+    valid === 'error'
+      ? {
+          animation: `${theme.animation.jiggle} 700ms ease-out`,
+        }
+      : {},
+  {
+    display: 'flex',
+    width: 80,
+    flexDirection: 'column',
+    justifySelf: 'flex-end',
+    paddingLeft: 4,
+    paddingRight: 4,
+    textAlign: 'center',
+  }
+);
+
+export const Fade = keyframes`
+0%,100% { opacity: 0; }
+  50% { opacity: 1; }
+`;
+
+export const SuccessIcon = styled(Icons)<{ valid: string }>(
+  ({ valid, theme }) =>
+    valid === 'valid'
+      ? {
+          color: theme.color.positive,
+          animation: `${Fade} 2s ease forwards`,
+        }
+      : {
+          opacity: 0,
+        },
+  {
+    alignSelf: 'center',
+    display: 'flex',
+    marginLeft: 10,
+    height: 14,
+    width: 14,
+  }
+);
+
+const Container = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  padding: `3rem 20px`,
+  maxWidth: 600,
+  margin: '0 auto',
+}));
+
+const shortcutLabels = {
+  fullScreen: 'Go full screen',
+  togglePanel: 'Toggle addons',
+  panelPosition: 'Toggle addons orientation',
+  toggleNav: 'Toggle sidebar',
+  toolbar: 'Toggle canvas toolbar',
+  search: 'Focus search',
+  focusNav: 'Focus sidebar',
+  focusIframe: 'Focus canvas',
+  focusPanel: 'Focus addons',
+  prevComponent: 'Previous component',
+  nextComponent: 'Next component',
+  prevStory: 'Previous story',
+  nextStory: 'Next story',
+  shortcutsPage: 'Go to shortcuts page',
+  aboutPage: 'Go to about page',
+  collapseAll: 'Collapse all items on sidebar',
+  expandAll: 'Expand all items on sidebar',
+};
+
+export type Feature = keyof typeof shortcutLabels;
+
+// Shortcuts that cannot be configured
+const fixedShortcuts = ['escape'];
+
+function toShortcutState(shortcutKeys: ShortcutsScreenProps['shortcutKeys']) {
+  return Object.entries(shortcutKeys).reduce(
+    (acc, [feature, shortcut]: [Feature, string]) =>
+      fixedShortcuts.includes(feature) ? acc : { ...acc, [feature]: { shortcut, error: false } },
+    {} as Record<Feature, any>
+  );
+}
+
+const keyMap = {
+  CLOSE: 'escape',
+};
+
+export interface ShortcutsScreenState {
+  activeFeature: Feature;
+  successField: Feature;
+  shortcutKeys: Record<Feature, any>;
+}
+
+export interface ShortcutsScreenProps {
+  shortcutKeys: Record<Feature, any>;
+  setShortcut: Function;
+  restoreDefaultShortcut: Function;
+  restoreAllDefaultShortcuts: Function;
+  onClose: (e?: KeyboardEvent) => void;
+}
+
+class ShortcutsScreen extends Component<ShortcutsScreenProps, ShortcutsScreenState> {
+  constructor(props: ShortcutsScreenProps) {
+    super(props);
+    this.state = {
+      activeFeature: undefined,
+      successField: undefined,
+      // The initial shortcutKeys that come from props are the defaults/what was saved
+      // As the user interacts with the page, the state stores the temporary, unsaved shortcuts
+      // This object also includes the error attached to each shortcut
+      shortcutKeys: toShortcutState(props.shortcutKeys),
+    };
+  }
+
+  onKeyDown = (e: KeyboardEvent) => {
+    const { activeFeature, shortcutKeys } = this.state;
+
+    if (e.key === 'Backspace') {
+      return this.restoreDefault();
+    }
+
+    const shortcut = eventToShortcut(e);
+
+    // Keypress is not a potential shortcut
+    if (!shortcut) {
+      return false;
+    }
+
+    // Check we don't match any other shortucts
+    const error = !!Object.entries(shortcutKeys).find(
+      ([feature, { shortcut: existingShortcut }]) =>
+        feature !== activeFeature &&
+        existingShortcut &&
+        shortcutMatchesShortcut(shortcut, existingShortcut)
+    );
+
+    return this.setState({
+      shortcutKeys: { ...shortcutKeys, [activeFeature]: { shortcut, error } },
+    });
+  };
+
+  onFocus = (focusedInput: Feature) => () => {
+    const { shortcutKeys } = this.state;
+
+    this.setState({
+      activeFeature: focusedInput,
+      shortcutKeys: { ...shortcutKeys, [focusedInput]: { shortcut: null, error: false } },
+    });
+  };
+
+  onBlur = async () => {
+    const { shortcutKeys, activeFeature } = this.state;
+
+    if (shortcutKeys[activeFeature]) {
+      const { shortcut, error } = shortcutKeys[activeFeature];
+      if (!shortcut || error) {
+        return this.restoreDefault();
+      }
+      return this.saveShortcut();
+    }
+    return false;
+  };
+
+  saveShortcut = async () => {
+    const { activeFeature, shortcutKeys } = this.state;
+
+    const { setShortcut } = this.props;
+    await setShortcut(activeFeature, shortcutKeys[activeFeature].shortcut);
+    this.setState({ successField: activeFeature });
+  };
+
+  restoreDefaults = async () => {
+    const { restoreAllDefaultShortcuts } = this.props;
+
+    const defaultShortcuts = await restoreAllDefaultShortcuts();
+    return this.setState({ shortcutKeys: toShortcutState(defaultShortcuts) });
+  };
+
+  restoreDefault = async () => {
+    const { activeFeature, shortcutKeys } = this.state;
+
+    const { restoreDefaultShortcut } = this.props;
+
+    const defaultShortcut = await restoreDefaultShortcut(activeFeature);
+    return this.setState({
+      shortcutKeys: {
+        ...shortcutKeys,
+        ...toShortcutState({ [activeFeature]: defaultShortcut } as Record<Feature, any>),
+      },
+    });
+  };
+
+  displaySuccessMessage = (activeElement: Feature) => {
+    const { successField, shortcutKeys } = this.state;
+    return activeElement === successField && shortcutKeys[activeElement].error === false
+      ? 'valid'
+      : undefined;
+  };
+
+  displayError = (activeElement: Feature): ValidationStates => {
+    const { activeFeature, shortcutKeys } = this.state;
+    return activeElement === activeFeature && shortcutKeys[activeElement].error === true
+      ? 'error'
+      : undefined;
+  };
+
+  renderKeyInput = () => {
+    const { shortcutKeys } = this.state;
+    const arr = Object.entries(shortcutKeys).map(([feature, { shortcut }]: [Feature, any]) => (
+      <Row key={feature}>
+        <Description>{shortcutLabels[feature]}</Description>
+
+        <TextInput
+          spellCheck="false"
+          valid={this.displayError(feature)}
+          className="modalInput"
+          onBlur={this.onBlur}
+          onFocus={this.onFocus(feature)}
+          // @ts-ignore
+          onKeyDown={this.onKeyDown}
+          value={shortcut ? shortcutToHumanString(shortcut) : ''}
+          placeholder="Type keys"
+          readOnly
+        />
+
+        <SuccessIcon valid={this.displaySuccessMessage(feature)} icon="check" />
+      </Row>
+    ));
+
+    return arr;
+  };
+
+  renderKeyForm = () => (
+    <GridWrapper>
+      <GridHeaderRow>
+        <HeaderItem>Commands</HeaderItem>
+        <HeaderItem>Shortcut</HeaderItem>
+      </GridHeaderRow>
+      {this.renderKeyInput()}
+    </GridWrapper>
+  );
+
+  render() {
+    const { onClose } = this.props;
+    const layout = this.renderKeyForm();
+    return (
+      <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
+        <Tabs
+          absolute
+          selected="shortcuts"
+          actions={{ onSelect: () => {} }}
+          tools={
+            <Fragment>
+              <IconButton
+                onClick={(e: SyntheticEvent) => {
+                  e.preventDefault();
+                  return onClose();
+                }}
+              >
+                <Icons icon="close" />
+              </IconButton>
+            </Fragment>
+          }
+        >
+          <div id="shortcuts" title="Keyboard Shortcuts">
+            <Container>
+              <Header>Keyboard shortcuts</Header>
+
+              {layout}
+              <Button tertiary small id="restoreDefaultsHotkeys" onClick={this.restoreDefaults}>
+                Restore defaults
+              </Button>
+
+              <SettingsFooter />
+            </Container>
+          </div>
+        </Tabs>
+      </GlobalHotKeys>
+    );
+  }
+}
+
+export default ShortcutsScreen;
diff --git a/lib/ui/src/settings/shortcuts_page.js b/lib/ui/src/settings/shortcuts_page.js
deleted file mode 100644
index ac5a5019e958..000000000000
--- a/lib/ui/src/settings/shortcuts_page.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { history } from 'global';
-import React from 'react';
-
-import { Route } from '@storybook/router';
-import { Consumer } from '@storybook/api';
-
-import ShortcutsScreen from './shortcuts';
-
-const mapper = ({ api }) => api;
-
-export default () => (
-  <Route path="shortcuts">
-    <Consumer filter={mapper}>
-      {({ getShortcutKeys, setShortcut, restoreDefaultShortcut, restoreAllDefaultShortcuts }) => (
-        <Route path="shortcuts">
-          <ShortcutsScreen
-            shortcutKeys={getShortcutKeys()}
-            {...{ setShortcut, restoreDefaultShortcut, restoreAllDefaultShortcuts }}
-            onClose={() => history.back()}
-          />
-        </Route>
-      )}
-    </Consumer>
-  </Route>
-);
diff --git a/lib/ui/src/settings/shortcuts_page.tsx b/lib/ui/src/settings/shortcuts_page.tsx
new file mode 100644
index 000000000000..7c3abd75fe51
--- /dev/null
+++ b/lib/ui/src/settings/shortcuts_page.tsx
@@ -0,0 +1,25 @@
+import { history } from 'global';
+import React from 'react';
+
+import { Route } from '@storybook/router';
+import { Consumer } from '@storybook/api';
+
+import ShortcutsScreen from './shortcuts';
+
+export default () => (
+  <Route path="shortcuts">
+    <Consumer>
+      {({
+        api: { getShortcutKeys, setShortcut, restoreDefaultShortcut, restoreAllDefaultShortcuts },
+      }) => (
+        <Route path="shortcuts">
+          <ShortcutsScreen
+            shortcutKeys={getShortcutKeys()}
+            {...{ setShortcut, restoreDefaultShortcut, restoreAllDefaultShortcuts }}
+            onClose={() => history.back()}
+          />
+        </Route>
+      )}
+    </Consumer>
+  </Route>
+);
diff --git a/lib/ui/src/typings.ts b/lib/ui/src/typings.ts
new file mode 100644
index 000000000000..07c732cbb184
--- /dev/null
+++ b/lib/ui/src/typings.ts
@@ -0,0 +1,3 @@
+declare module 'global';
+declare module 'chromatic/isChromatic';
+declare module '@storybook/semver';
diff --git a/lib/ui/tsconfig.json b/lib/ui/tsconfig.json
index 68234d0b5fad..a0fd3a090935 100644
--- a/lib/ui/tsconfig.json
+++ b/lib/ui/tsconfig.json
@@ -2,9 +2,10 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "noImplicitAny": false,
-    "strictNullChecks": true
+    "types": ["webpack-env"],
+    "resolveJsonModule": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
   },
   "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
 }
diff --git a/netlify.toml b/netlify.toml
index 1ad6614aa922..193ec9ee1c31 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,7 +1,13 @@
 [build]
-  publish = "docs/public"
-  command = "cd docs && yarn && yarn build && cd .."
+  publish = "built-storybooks"
+  command = "yarn bootstrap --core && yarn build-storybooks"
 [build.environment]
   NODE_VERSION = "10"
   YARN_VERSION = "1.19.1"
   YARN_FLAGS = "--version"
+  DOTENV_DISPLAY_WARNING = "none"
+  STORYBOOK_EXAMPLE_APP ="true"
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
diff --git a/now.json b/now.json
deleted file mode 100644
index 26ca24c59d4e..000000000000
--- a/now.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "version": 2,
-  "name": "monorepo",
-  "public": true,
-  "builds": [
-    {
-      "src": "package.json",
-      "use": "@now/static-build",
-      "config": { 
-        "distDir": "built-storybooks"
-       }
-    }
-  ],
-  "build": {
-    "env": {
-      "DOTENV_DISPLAY_WARNING": "none",
-      "STORYBOOK_EXAMPLE_APP":"true"
-    }
-  },
-  "routes": [
-    { "src": "/(.*)", "dest": "/built-storybooks/$1" }
-  ]
-}
diff --git a/package.json b/package.json
index 8ed701e24bfd..ed7b2200b9f9 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,16 @@
   "keywords": [
     "angular",
     "angularjs",
+    "au2",
+    "aurelia",
+    "aurelia2",
     "babel",
     "components",
     "documentation",
     "frontend",
     "jamstack",
     "markup",
+    "rax",
     "react",
     "reactjs",
     "reuseable",
@@ -43,18 +47,17 @@
     "await-serve-storybooks": "wait-on http://localhost:8001",
     "bootstrap": "node ./scripts/bootstrap.js",
     "bootstrap:docs": "yarn install --cwd docs",
+    "build": "node ./scripts/build-package.js",
     "build-packs": "lerna exec --scope '@storybook/*' -- \\$LERNA_ROOT_PATH/scripts/build-pack.sh \\$LERNA_ROOT_PATH/packs",
-    "build-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node ./scripts/build-storybooks.js",
+    "build-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ./scripts/build-storybooks.js",
     "changelog": "pr-log --sloppy --cherry-pick",
     "changelog:next": "pr-log --sloppy --since-prerelease",
     "coverage": "codecov",
     "danger": "danger",
     "dev": "concurrently --kill-others \"yarn dev:tsc\" \"yarn dev:babel\"",
-    "dev:babel": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-babel.js",
+    "dev:babel": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/utils/watch-babel.js",
     "dev:check-types": "tsc --noEmit",
-    "dev:js": "echo 'DEPRECATED: Please use yarn dev:babel' && yarn dev:babel",
-    "dev:ts": "echo 'DEPRECATED: Please use yarn dev:tsc' && yarn dev:tsc",
-    "dev:tsc": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/watch-tsc.js",
+    "dev:tsc": "lerna exec --scope @storybook/* --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/utils/watch-tsc.js",
     "docs:build": "npm --prefix docs run build",
     "docs:dev": "npm --prefix docs run dev",
     "github-release": "github-release-from-changelog",
@@ -62,17 +65,19 @@
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:md": "remark -q",
     "lint:package": "sort-package-json",
-    "now-build": "yarn bootstrap --core && yarn build-storybooks",
-    "publish:crna": "yarn --cwd examples-native/crna-kitchen-sink expo publish",
+    "local-registry": "ts-node --project=./scripts/tsconfig.json ./scripts/run-registry.ts ",
     "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",
-    "repo-dirty-check": "node ./scripts/repo-dirty-check",
+    "repo-dirty-check": "node -r esm ./scripts/run-repo-dirty-check",
+    "run-chromatics": "node -r esm ./scripts/run-chromatics.js",
     "serve-storybooks": "http-server ./built-storybooks -p 8001",
     "start": "yarn --cwd examples/official-storybook storybook",
     "test": "node ./scripts/test.js",
     "test-latest-cra": "yarn --prefix --cwd lib/cli run test-latest-cra",
     "test:cli": "npm --prefix lib/cli run test",
+    "test:e2e": "cypress run",
+    "test:e2e-framework": "ts-node --project=./scripts/tsconfig.json ./scripts/run-e2e.ts",
     "test:e2e-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\""
   },
   "husky": {
@@ -82,153 +87,171 @@
   },
   "lint-staged": {
     "*.html": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.js": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.json": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.jsx": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.mjs": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.ts": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "*.tsx": [
-      "yarn lint:js --fix",
-      "git add"
+      "yarn lint:js --fix"
     ],
     "package.json": [
-      "yarn lint:package",
-      "git add"
+      "yarn lint:package"
     ]
   },
   "browserslist": "defaults",
+  "resolutions": {
+    "serialize-javascript": "^3.0.0"
+  },
   "devDependencies": {
-    "@angular/common": "^8.2.8",
-    "@angular/compiler": "^8.2.8",
-    "@angular/core": "^8.2.8",
-    "@angular/forms": "^8.2.8",
-    "@angular/platform-browser": "^8.2.8",
-    "@angular/platform-browser-dynamic": "^8.2.8",
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@angular/common": "^9.1.0",
+    "@angular/compiler": "^9.1.0",
+    "@angular/core": "^9.1.0",
+    "@angular/forms": "^9.1.0",
+    "@angular/platform-browser": "^9.1.0",
+    "@angular/platform-browser-dynamic": "^9.1.0",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.3.3",
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-private-methods": "^7.3.3",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.2.0",
-    "@babel/preset-env": "^7.4.1",
+    "@babel/plugin-transform-react-constant-elements": "^7.6.3",
+    "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@babel/runtime": "^7.7.2",
+    "@babel/runtime": "^7.9.6",
     "@emotion/snapshot-serializer": "^0.8.2",
-    "@storybook/eslint-config-storybook": "^2.0.0",
-    "@storybook/linter-config": "^2.0.0",
-    "@testing-library/react": "^9.2.0",
+    "@storybook/eslint-config-storybook": "^2.4.0",
+    "@storybook/linter-config": "^2.5.0",
+    "@storybook/semver": "^7.3.2",
+    "@testing-library/react": "^10.0.3",
+    "@types/detect-port": "^1.3.0",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.3",
     "@types/escodegen": "^0.0.6",
-    "@types/jest": "^24.0.11",
-    "@types/lodash": "^4.14.149",
-    "@types/node": "^12.12.11",
-    "@types/react": "^16.8.14",
-    "@types/semver": "^6.0.0",
-    "@types/webpack": "^4.41.0",
-    "@types/webpack-env": "^1.14.0",
+    "@types/express": "^4.17.6",
+    "@types/jest": "^25.1.1",
+    "@types/js-yaml": "^3.12.4",
+    "@types/lodash": "^4.14.150",
+    "@types/node": "^14.0.10",
+    "@types/node-cleanup": "^2.1.1",
+    "@types/react": "^16.9.27",
+    "@types/semver": "^7.1.0",
+    "@types/serve-static": "^1.13.3",
+    "@types/shelljs": "^0.8.7",
+    "@types/webpack": "^4.41.12",
+    "@types/webpack-env": "^1.15.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.7.1",
+    "babel-jest": "^26.0.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-emotion": "^10.0.20",
     "babel-plugin-macros": "^2.7.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-vue": "^2.0.2",
-    "chalk": "^3.0.0",
+    "chalk": "^4.0.0",
+    "chromatic": "^4.0.2",
     "codecov": "^3.5.0",
     "codelyzer": "^5.0.0",
-    "commander": "^4.0.1",
-    "concurrently": "^5.0.0",
+    "commander": "^5.1.0",
+    "concurrently": "^5.2.0",
     "core-js": "^3.0.1",
-    "corejs-upgrade-webpack-plugin": "^2.2.0",
-    "cross-env": "^6.0.3",
-    "danger": "^9.2.1",
+    "cross-env": "^7.0.0",
+    "danger": "^10.1.1",
     "del": "^5.1.0",
     "detect-port": "^1.3.0",
+    "downlevel-dts": "^0.4.0",
+    "enquirer": "^2.3.5",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
-    "eslint": "^6.5.1",
-    "eslint-plugin-cypress": "^2.7.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-cypress": "^2.10.1",
     "eslint-plugin-react": "^7.15.1",
+    "eslint-teamcity": "^3.0.0",
     "esm": "^3.2.25",
+    "express": "^4.17.1",
+    "fs-extra": "^9.0.0",
     "github-release-from-changelog": "^2.1.0",
     "glob": "^7.1.3",
-    "http-server": "^0.11.1",
-    "husky": "^3.1.0",
+    "http-server": "^0.12.3",
+    "husky": "^4.0.10",
     "inquirer": "^7.0.0",
-    "jest": "^24.8.0",
-    "jest-cli": "^24.8.0",
-    "jest-config": "^24.8.0",
-    "jest-diff": "^24.8.0",
+    "jest": "^26.0.0",
+    "jest-cli": "^26.0.0",
+    "jest-config": "^26.0.0",
+    "jest-diff": "^26.0.0",
     "jest-emotion": "^10.0.17",
-    "jest-environment-jsdom": "^24.8.0",
+    "jest-environment-jsdom": "^26.0.0",
     "jest-environment-jsdom-thirteen": "^1.0.1",
     "jest-enzyme": "^7.0.2",
-    "jest-image-snapshot": "^2.8.2",
-    "jest-jasmine2": "^24.8.0",
-    "jest-matcher-utils": "^24.8.0",
-    "jest-preset-angular": "^6.0.1",
+    "jest-image-snapshot": "^3.1.0",
+    "jest-jasmine2": "^26.0.0",
+    "jest-matcher-utils": "^26.0.0",
+    "jest-preset-angular": "^8.2.0",
     "jest-raw-loader": "^1.0.1",
+    "jest-serializer-html": "^7.0.0",
+    "jest-teamcity": "^1.7.0",
     "jest-vue-preprocessor": "^1.5.0",
-    "jest-watch-typeahead": "^0.4.0",
+    "jest-watch-typeahead": "^0.5.0",
+    "js-yaml": "^3.13.1",
     "lerna": "^3.19.0",
-    "lint-staged": "^9.4.1",
+    "lint-staged": "^10.2.1",
     "lodash": "^4.17.15",
+    "mocha-list-tests": "^1.0.2",
     "node-cleanup": "^2.1.2",
     "node-fetch": "^2.6.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.0",
     "npmlog": "^4.1.2",
-    "prettier": "^1.16.4",
+    "p-limit": "^2.3.0",
+    "prettier": "^2.0.5",
     "raf": "^3.4.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-test-renderer": "^16.8.3",
     "recursive-copy": "^2.0.10",
     "regenerator-runtime": "^0.13.3",
-    "remark-cli": "^7.0.0",
-    "remark-lint": "^6.0.4",
-    "remark-preset-lint-recommended": "^3.0.2",
+    "remark-cli": "^8.0.0",
+    "remark-lint": "^7.0.0",
+    "remark-preset-lint-recommended": "^4.0.0",
     "riot-jest-transformer": "^2.0.0",
-    "shelljs": "^0.8.3",
+    "serve-static": "^1.14.1",
+    "shelljs": "^0.8.4",
     "shx": "^0.3.2",
-    "sort-package-json": "^1.21.0",
-    "storybook-chromatic": "^3.0.0",
-    "svelte": "^3.15.0",
+    "sort-package-json": "^1.42.1",
+    "svelte": "^3.18.1",
     "svelte-jest": "^0.3.0",
+    "teamcity-service-messages": "^0.1.11",
     "trash": "^6.1.1",
-    "ts-dedent": "^1.1.0",
-    "ts-jest": "^24.0.2",
+    "ts-dedent": "^1.1.1",
+    "ts-jest": "^26.1.0",
+    "ts-node": "^8.9.1",
     "typescript": "^3.4.0",
-    "wait-on": "^3.3.0"
+    "wait-on": "^4.0.0",
+    "window-size": "^1.1.1"
   },
   "optionalDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.0",
-    "cypress": "^3.4.1"
+    "@cypress/webpack-preprocessor": "^5.1.2",
+    "cypress": "4.7.0",
+    "puppeteer": "^2.0.0",
+    "verdaccio": "^4.5.1",
+    "verdaccio-auth-memory": "^9.4.0"
   },
   "engines": {
     "node": ">=8.10.0",
@@ -238,6 +261,9 @@
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
+  "eslint-teamcity": {
+    "reporter": "inspections"
+  },
   "pr-log": {
     "skipLabels": [
       "cleanup",
diff --git a/prettier.config.js b/prettier.config.js
index 4fe9ebce132c..c2fbdcbf6eda 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -2,6 +2,7 @@ const base = require('@storybook/linter-config/prettier.config');
 
 module.exports = {
   ...base,
+  arrowParens: 'always',
   overrides: [
     {
       files: '*.html',
diff --git a/scripts/babel-jest.js b/scripts/babel-jest.js
deleted file mode 100644
index 630e2f8033a0..000000000000
--- a/scripts/babel-jest.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const path = require('path');
-const babelJest = require('babel-jest');
-
-module.exports = babelJest.createTransformer({
-  configFile: path.resolve(__dirname, '../.babelrc'),
-});
diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js
index bf5b15a4aab8..af24ca7268e8 100755
--- a/scripts/bootstrap.js
+++ b/scripts/bootstrap.js
@@ -1,32 +1,9 @@
 #!/usr/bin/env node
 
-/* eslint-disable global-require, no-octal-escape */
-const childProcess = require('child_process');
+/* eslint-disable global-require */
 const { lstatSync, readdirSync } = require('fs');
 const { join } = require('path');
-
-const logger = console;
-
-let cooldown = 0;
-
-try {
-  require('inquirer');
-  require('commander');
-  require('chalk');
-  require('npmlog');
-} catch (e) {
-  logger.log('🕘 running bootstrap on a clean repo, we have to install dependencies');
-  childProcess.spawnSync('yarn', ['install', '--ignore-optional'], {
-    stdio: ['inherit', 'inherit', 'inherit'],
-  });
-  process.stdout.write('\x07');
-  process.stdout.write('\033c');
-
-  // give the filesystem some time
-  cooldown = 1000;
-} finally {
-  setTimeout(run, cooldown);
-}
+const { checkDependenciesAndRun, spawn } = require('./utils/cli-utils');
 
 function run() {
   const inquirer = require('inquirer');
@@ -34,29 +11,16 @@ function run() {
   const chalk = require('chalk');
   const log = require('npmlog');
 
-  const isTgz = source => lstatSync(source).isFile() && source.match(/.tgz$/);
-  const getDirectories = source =>
+  const isTgz = (source) => lstatSync(source).isFile() && source.match(/.tgz$/);
+  const getDirectories = (source) =>
     readdirSync(source)
-      .map(name => join(source, name))
+      .map((name) => join(source, name))
       .filter(isTgz);
 
   log.heading = 'storybook';
   const prefix = 'bootstrap';
   log.addLevel('aborted', 3001, { fg: 'red', bold: true });
 
-  const spawn = (command, options = {}) => {
-    const out = childProcess.spawnSync(`${command}`, {
-      shell: true,
-      stdio: 'inherit',
-      ...options,
-    });
-
-    if (out.status !== 0) {
-      process.exit(out.status);
-    }
-    return out;
-  };
-
   const main = program
     .version('5.0.0')
     .option('--all', `Bootstrap everything ${chalk.gray('(all)')}`);
@@ -79,8 +43,8 @@ function run() {
     command: () => {
       // run all pre tasks
       pre
-        .map(key => tasks[key])
-        .forEach(task => {
+        .map((key) => tasks[key])
+        .forEach((task) => {
           if (task.check()) {
             task.command();
           }
@@ -117,7 +81,10 @@ function run() {
       defaultValue: false,
       option: '--install',
       command: () => {
-        spawn('yarn install --ignore-optional --network-concurrency 8');
+        const command = process.env.CI
+          ? 'yarn install --network-concurrency 8'
+          : 'yarn install --ignore-optional --network-concurrency 8';
+        spawn(command);
       },
       order: 1,
     }),
@@ -137,7 +104,9 @@ function run() {
       option: '--dll',
       command: () => {
         log.info(prefix, 'dll');
-        spawn('lerna run createDlls --scope "@storybook/ui"');
+        setTimeout(() => {
+          spawn('lerna run createDlls --scope "@storybook/ui" --scope "@storybook/addon-docs"');
+        }, 5000);
       },
       order: 3,
     }),
@@ -165,7 +134,7 @@ function run() {
       defaultValue: false,
       option: '--reg',
       command: () => {
-        spawn('./scripts/run-registry.js');
+        spawn('yarn local-registry --publish --open');
       },
       order: 11,
     }),
@@ -190,15 +159,15 @@ function run() {
     .reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
     .parse(process.argv);
 
-  Object.keys(tasks).forEach(key => {
+  Object.keys(tasks).forEach((key) => {
     tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
   });
 
-  const createSeperator = input => `- ${input}${' ---------'.substr(0, 12)}`;
+  const createSeperator = (input) => `- ${input}${' ---------'.substr(0, 12)}`;
 
   const choices = Object.values(groups)
-    .map(l =>
-      l.map(key => ({
+    .map((l) =>
+      l.map((key) => ({
         name: tasks[key].name,
         checked: tasks[key].defaultValue,
       }))
@@ -212,7 +181,7 @@ function run() {
   let selection;
   if (
     !Object.keys(tasks)
-      .map(key => tasks[key].value)
+      .map((key) => tasks[key].value)
       .filter(Boolean).length
   ) {
     selection = inquirer
@@ -226,10 +195,10 @@ function run() {
         },
       ])
       .then(({ todo }) =>
-        todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)])
+        todo.map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)])
       )
-      .then(list => {
-        if (list.find(i => i === tasks.reset)) {
+      .then((list) => {
+        if (list.find((i) => i === tasks.reset)) {
           return inquirer
             .prompt([
               {
@@ -254,27 +223,29 @@ function run() {
   } else {
     selection = Promise.resolve(
       Object.keys(tasks)
-        .map(key => tasks[key])
-        .filter(item => item.value === true)
+        .map((key) => tasks[key])
+        .filter((item) => item.value === true)
     );
   }
 
   selection
-    .then(list => {
+    .then((list) => {
       if (list.length === 0) {
         log.warn(prefix, 'Nothing to bootstrap');
       } else {
         list
           .sort((a, b) => a.order - b.order)
-          .forEach(key => {
+          .forEach((key) => {
             key.command();
           });
         process.stdout.write('\x07');
       }
     })
-    .catch(e => {
+    .catch((e) => {
       log.aborted(prefix, chalk.red(e.message));
       log.silly(prefix, e);
       process.exit(1);
     });
 }
+
+checkDependenciesAndRun(run);
diff --git a/scripts/build-frontpage.js b/scripts/build-frontpage.js
index 45a084457e03..f3417dbce36c 100755
--- a/scripts/build-frontpage.js
+++ b/scripts/build-frontpage.js
@@ -2,18 +2,21 @@
 /* eslint-disable no-console */
 
 const fetch = require('node-fetch');
+const { execSync } = require('child_process');
 
-const { CIRCLE_BRANCH, FRONTPAGE_WEBHOOK } = process.env;
+const { FRONTPAGE_WEBHOOK } = process.env;
+
+const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
 
 console.log('build-frontpage');
-if (CIRCLE_BRANCH === 'master') {
+if (branch === 'master') {
   if (FRONTPAGE_WEBHOOK) {
     console.log('triggering frontpage build');
     const url = `https://api.netlify.com/build_hooks/${FRONTPAGE_WEBHOOK}`;
-    fetch(url, { method: 'post' }).then(res => console.log('result', res.status));
+    fetch(url, { method: 'post' }).then((res) => console.log('result', res.status));
   } else {
     console.log('no webhook defined');
   }
 } else {
-  console.log('skipping branch', CIRCLE_BRANCH);
+  console.log('skipping branch', branch);
 }
diff --git a/scripts/build-package.js b/scripts/build-package.js
new file mode 100644
index 000000000000..b6963ad1ab11
--- /dev/null
+++ b/scripts/build-package.js
@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+
+/* eslint-disable global-require */
+const { resolve } = require('path');
+const terminalSize = require('window-size');
+const { checkDependenciesAndRun, spawn } = require('./utils/cli-utils');
+
+const getStorybookPackages = () => {
+  const listCommand = spawn(`lerna list`, {
+    stdio: 'pipe',
+  });
+
+  const packages = listCommand.output
+    .toString()
+    .match(/@storybook\/(.)*/g)
+    .sort();
+
+  return packages;
+};
+
+function run() {
+  const inquirer = require('inquirer');
+  const program = require('commander');
+  const chalk = require('chalk');
+  const log = require('npmlog');
+
+  log.heading = 'storybook';
+  const prefix = 'build';
+  log.addLevel('aborted', 3001, { fg: 'red', bold: true });
+
+  const packages = getStorybookPackages();
+  const packageTasks = packages
+    .map((package) => {
+      return {
+        name: package,
+        suffix: package.replace('@storybook/', ''),
+        defaultValue: false,
+        helpText: `build only the ${package} package`,
+      };
+    })
+    .reduce((acc, next) => {
+      acc[next.name] = next;
+      return acc;
+    }, {});
+
+  const tasks = {
+    watch: {
+      name: `watch`,
+      defaultValue: false,
+      suffix: '--watch',
+      helpText: 'build on watch mode',
+    },
+    ...packageTasks,
+  };
+
+  const groups = {
+    'mode (leave unselected if you just want to build)': ['watch'],
+    packages,
+  };
+
+  const main = program.version('5.0.0').option('--all', `build everything ${chalk.gray('(all)')}`);
+
+  Object.keys(tasks)
+    .reduce((acc, key) => acc.option(tasks[key].suffix, tasks[key].helpText), main)
+    .parse(process.argv);
+
+  Object.keys(tasks).forEach((key) => {
+    // checks if a flag is passed e.g. yarn build --@storybook/addon-docs --watch
+    const containsFlag = program.rawArgs.includes(tasks[key].suffix);
+    tasks[key].value = containsFlag || program.all;
+  });
+
+  const createSeparator = (input) => `- ${input}${' ---------'.substr(0, 12)}`;
+
+  const choices = Object.values(groups)
+    .map((l) =>
+      l.map((key) => ({
+        name: (tasks[key] && tasks[key].name) || key,
+        checked: (tasks[key] && tasks[key].defaultValue) || false,
+      }))
+    )
+    .reduce(
+      (acc, i, k) =>
+        acc.concat(new inquirer.Separator(createSeparator(Object.keys(groups)[k]))).concat(i),
+      []
+    );
+
+  let selection;
+  let watchMode = false;
+  if (
+    !Object.keys(tasks)
+      .map((key) => tasks[key].value)
+      .filter(Boolean).length
+  ) {
+    const ui = new inquirer.ui.BottomBar();
+    ui.log.write(
+      chalk.yellow(
+        'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!'
+      )
+    );
+
+    selection = inquirer
+      .prompt([
+        {
+          type: 'checkbox',
+          message: 'Select the packages to build',
+          name: 'todo',
+          pageSize: terminalSize.height - 3, // 3 lines for extra info
+          choices,
+        },
+      ])
+      .then(({ todo }) => {
+        watchMode = todo.includes('watch');
+        return todo
+          .filter((name) => name !== 'watch') // remove watch option as it served its purpose
+          .map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)]);
+      });
+  } else {
+    // hits here when running yarn build --packagename
+    watchMode = process.argv.includes('--watch');
+    selection = Promise.resolve(
+      Object.keys(tasks)
+        .map((key) => tasks[key])
+        .filter((item) => item.value === true)
+    );
+  }
+
+  selection
+    .then((list) => {
+      if (list.length === 0) {
+        log.warn(prefix, 'Nothing to build!');
+      } else {
+        const packageNames = list
+          // filters out watch command if --watch is used
+          .filter((key) => key.name !== 'watch')
+          .map((key) => key.suffix)
+          .filter(Boolean);
+
+        let glob =
+          packageNames.length > 1
+            ? `@storybook/{${packageNames.join(',')}}`
+            : `@storybook/${packageNames[0]}`;
+
+        const isAllPackages = process.argv.includes('--all');
+        if (isAllPackages) {
+          glob = '@storybook/*';
+
+          log.warn(
+            'You are building a lot of packages on watch mode. This is an expensive action and might slow your computer down.\nIf this is an issue, run yarn build to filter packages and speed things up!'
+          );
+        }
+
+        if (watchMode) {
+          const runWatchMode = () => {
+            const baseWatchCommand = `lerna exec --scope '${glob}' --parallel -- cross-env-shell node ${resolve(
+              __dirname
+            )}`;
+            const watchTsc = `${baseWatchCommand}/utils/watch-tsc.js`;
+            const watchBabel = `${baseWatchCommand}/utils/watch-babel.js`;
+            const command = `concurrently --kill-others "${watchTsc}" "${watchBabel}"`;
+            spawn(command);
+          };
+
+          runWatchMode();
+        } else {
+          spawn(`lerna run prepare --scope "${glob}"`);
+        }
+        process.stdout.write('\x07');
+      }
+    })
+    .catch((e) => {
+      log.aborted(prefix, chalk.red(e.message));
+      log.silly(prefix, e);
+      process.exit(1);
+    });
+}
+
+checkDependenciesAndRun(run);
diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js
index a2fe741672a6..4be6f9787a06 100755
--- a/scripts/build-storybooks.js
+++ b/scripts/build-storybooks.js
@@ -1,20 +1,14 @@
-#!/usr/bin/env node
-
-const { spawn } = require('child_process');
-const { promisify } = require('util');
-const {
-  readdir: readdirRaw,
-  readFile: readFileRaw,
-  writeFile: writeFileRaw,
-  statSync,
-} = require('fs');
-const { join } = require('path');
+import { spawn } from 'child_process';
+import { promisify } from 'util';
+import { readdir as readdirRaw, writeFile as writeFileRaw, readFileSync } from 'fs';
+import { join } from 'path';
+
+import { getDeployables } from './utils/list-examples';
 
 const readdir = promisify(readdirRaw);
-const readFile = promisify(readFileRaw);
 const writeFile = promisify(writeFileRaw);
 
-const p = l => join(__dirname, '..', ...l);
+const p = (l) => join(__dirname, '..', ...l);
 const logger = console;
 
 const exec = async (command, args = [], options = {}) =>
@@ -22,27 +16,27 @@ const exec = async (command, args = [], options = {}) =>
     const child = spawn(command, args, { ...options, stdio: 'inherit', shell: true });
 
     child
-      .on('close', code => {
+      .on('close', (code) => {
         if (code) {
           reject();
         } else {
           resolve();
         }
       })
-      .on('error', e => {
+      .on('error', (e) => {
         logger.error(e);
         reject();
       });
   });
 
-const hasBuildScript = async l => {
-  const text = await readFile(l, 'utf8');
+const hasBuildScript = (l) => {
+  const text = readFileSync(l, 'utf8');
   const json = JSON.parse(text);
 
   return !!json.scripts['build-storybook'];
 };
 
-const createContent = deployables => {
+const createContent = (deployables) => {
   return `
     <style>
       body {
@@ -109,70 +103,71 @@ const createContent = deployables => {
     <button id="open" onclick="handleClick()">open</button>
 
     <select id="select" onchange="handleSelect()">
-      ${deployables.map(i => `<option value="/${i}/">${i}</option>`).join('\n')}
+      ${deployables.map((i) => `<option value="/${i}/">${i}</option>`).join('\n')}
     </select>
 
     <iframe id="frame" src="/${deployables[0]}/" />
   `;
 };
 
-const handleExamples = async files => {
-  const deployables = files.filter(f => {
-    const packageJsonLocation = p(['examples', f, 'package.json']);
-    const stats = statSync(packageJsonLocation);
-
-    return stats.isFile() && hasBuildScript(packageJsonLocation);
-  });
-
+const handleExamples = async (deployables) => {
   await deployables.reduce(async (acc, d) => {
     await acc;
 
     logger.log('');
-    logger.log(
-      `-----------------${Array(d.length)
-        .fill('-')
-        .join('')}`
-    );
+    logger.log(`-----------------${Array(d.length).fill('-').join('')}`);
     logger.log(`▶️  building: ${d}`);
-    logger.log(
-      `-----------------${Array(d.length)
-        .fill('-')
-        .join('')}`
-    );
+    logger.log(`-----------------${Array(d.length).fill('-').join('')}`);
     const out = p(['built-storybooks', d]);
     const cwd = p(['examples', d]);
 
     await exec(`yarn`, [`build-storybook`, `--output-dir=${out}`, '--quiet'], { cwd });
+    await exec(`npx`, [`sb`, 'extract', out, `${out}/stories.json`], { cwd });
 
     logger.log('-------');
-    logger.log('✅ done');
+    logger.log(`✅ ${d} built`);
     logger.log('-------');
   }, Promise.resolve());
-
-  logger.log('');
-  logger.log(`📑 creating index`);
-
-  const indexLocation = p(['built-storybooks', 'index.html']);
-  const indexContent = createContent(deployables);
-
-  await writeFile(indexLocation, indexContent);
-
-  logger.log('-------');
-  logger.log('✅ done');
-  logger.log('-------');
 };
 
 const run = async () => {
-  const examples = await readdir(p(['examples']));
+  const list = getDeployables(await readdir(p(['examples'])), hasBuildScript);
 
-  const { length } = examples;
+  const { length } = list;
   const [a, b] = [process.env.CIRCLE_NODE_INDEX || 0, process.env.CIRCLE_NODE_TOTAL || 1];
   const step = Math.ceil(length / b);
   const offset = step * a;
 
-  const list = examples.slice().splice(offset, step);
+  const deployables = list.slice().splice(offset, step);
+
+  if (deployables.length) {
+    logger.log(
+      `will build: ${deployables.join(', ')} (${
+        deployables.length
+      } total - offset: ${offset} | step: ${step} | length: ${length} | node_index: ${a} | total: ${b} |)`
+    );
+    await handleExamples(deployables);
+  }
+
+  if (
+    deployables.length &&
+    (process.env.CIRCLE_NODE_INDEX === undefined ||
+      process.env.CIRCLE_NODE_INDEX === '0' ||
+      process.env.CIRCLE_NODE_INDEX === 0)
+  ) {
+    const indexLocation = p(['built-storybooks', 'index.html']);
+    logger.log('');
+    logger.log(`📑 creating index at: ${indexLocation}`);
+    logger.log('');
+    await writeFile(indexLocation, createContent(deployables));
 
-  await handleExamples(list);
+    logger.log('-------');
+    logger.log('✅ done');
+    logger.log('-------');
+  }
 };
 
-run();
+run().catch((e) => {
+  logger.error(e);
+  process.exit(1);
+});
diff --git a/scripts/crna-publish.js b/scripts/crna-publish.js
deleted file mode 100755
index 134971805ccf..000000000000
--- a/scripts/crna-publish.js
+++ /dev/null
@@ -1,49 +0,0 @@
-#!/usr/bin/env node
-const childProcess = require('child_process');
-const log = require('npmlog');
-
-const getCurrentBranch = () =>
-  childProcess
-    .execSync('git rev-parse --abbrev-ref HEAD')
-    .toString()
-    .trim();
-
-const sanitizeBranchName = branch => branch.replace(/[^a-zA-Z0-9-_]/g, '-');
-
-const expoLogin = (username, password) => {
-  log.info('Logging in to expo');
-  childProcess.execSync(`yarn expo login -u '${username}' -p '${password}'`);
-};
-
-const expoLogout = () => {
-  log.verbose('Logging out from expo');
-  childProcess.execSync('yarn expo logout');
-};
-
-const expoPublish = channel => {
-  log.info(`Publishing to channel ${channel}`);
-  childProcess.execSync(`yarn publish:crna --release-channel=${channel}`);
-  log.info(
-    `crna-kitchen-sink app available at https://exp.host/@storybook/crna-kitchen-sink?release-channel=${channel}`
-  );
-};
-
-const username = 'storybook';
-const password = process.env.EXPO_PASSWORD;
-
-if (!username) {
-  log.error('EXPO_USERNAME environment variable not set');
-  // 0 exit code because builds from forks will not have this variable set
-  process.exit(0);
-}
-
-if (!password) {
-  log.error('EXPO_PASSWORD environment variable not set');
-  // 0 exit code because builds from forks will not have this variable set
-  process.exit(0);
-}
-
-expoLogout();
-expoLogin(username, password);
-expoPublish(sanitizeBranchName(getCurrentBranch()));
-expoLogout();
diff --git a/scripts/jest-ts-babel.js b/scripts/jest-ts-babel.js
deleted file mode 100644
index dbe8c10fb9a5..000000000000
--- a/scripts/jest-ts-babel.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const tsTransformer = require('jest-preset-angular/preprocessor');
-const babelTransformer = require('./babel-jest');
-
-module.exports.process = function transform(src, path, config, transformOptions) {
-  const tsResult = tsTransformer.process(src, path, config, transformOptions);
-  const jsPath = path.replace('.ts', '.js');
-  const source = typeof tsResult === 'string' ? tsResult : tsResult.code;
-
-  return babelTransformer.process(source, jsPath, config, transformOptions);
-};
diff --git a/scripts/jest.init.js b/scripts/jest.init.js
index 9d4d516ecaf0..f8b2a6565c4d 100644
--- a/scripts/jest.init.js
+++ b/scripts/jest.init.js
@@ -9,7 +9,7 @@ import registerRequireContextHook from 'babel-plugin-require-context-hook/regist
 
 registerRequireContextHook();
 
-jest.mock('util-deprecate', () => fn => fn);
+jest.mock('util-deprecate', () => (fn) => fn);
 
 // mock console.info calls for cleaner test execution
 global.console.info = jest.fn().mockImplementation(() => {});
@@ -32,10 +32,10 @@ configure({ adapter: new Adapter() });
  */
 
 const ignoreList = [
-  error => error.message.includes('":nth-child" is potentially unsafe'),
-  error => error.message.includes('":first-child" is potentially unsafe'),
-  error => error.message.includes('Failed prop type') && error.stack.includes('storyshots'),
-  error =>
+  (error) => error.message.includes('":nth-child" is potentially unsafe'),
+  (error) => error.message.includes('":first-child" is potentially unsafe'),
+  (error) => error.message.includes('Failed prop type') && error.stack.includes('storyshots'),
+  (error) =>
     error.message.includes('react-async-component-lifecycle-hooks') &&
     error.stack.includes('addons/knobs/src/components/__tests__/Options.js'),
 ];
@@ -46,14 +46,14 @@ const throwMessage = (type, message) => {
     throw error;
   }
 };
-const throwWarning = message => throwMessage('warn: ', message);
-const throwError = message => throwMessage('error: ', message);
+const throwWarning = (message) => throwMessage('warn: ', message);
+const throwError = (message) => throwMessage('error: ', message);
 
 global.console.error = throwError;
 global.console.warn = throwWarning;
 
 // Mock for matchMedia since it's not yet implemented in JSDOM (https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom)
-global.window.matchMedia = jest.fn().mockImplementation(query => {
+global.window.matchMedia = jest.fn().mockImplementation((query) => {
   return {
     matches: false,
     media: query,
diff --git a/scripts/prepare.js b/scripts/prepare.js
index 2ea3db4246bd..19e50ee6bccf 100644
--- a/scripts/prepare.js
+++ b/scripts/prepare.js
@@ -1,12 +1,11 @@
 /* eslint-disable no-console */
-/* tslint:disable:no-console */
 const path = require('path');
 const shell = require('shelljs');
 const chalk = require('chalk');
 const fs = require('fs');
 const log = require('npmlog');
-const { babelify } = require('./compile-babel');
-const { tscfy } = require('./compile-tsc');
+const { babelify } = require('./utils/compile-babel');
+const { tscfy } = require('./utils/compile-tsc');
 
 function getPackageJson() {
   const modulePath = path.resolve('./');
@@ -19,21 +18,33 @@ function removeDist() {
   shell.rm('-rf', 'dist');
 }
 
-const ignore = ['__mocks__', '__snapshots__', '__tests__', '/tests/', /.+\.test\..+/];
+const ignore = [
+  '__mocks__',
+  '__snapshots__',
+  '__testfixtures__',
+  '__tests__',
+  '/tests/',
+  /.+\.test\..+/,
+];
 
 function cleanup() {
   // remove files after babel --copy-files output
   // --copy-files option doesn't work with --ignore
   // https://github.com/babel/babel/issues/6226
   if (fs.existsSync(path.join(process.cwd(), 'dist'))) {
-    const files = shell.find('dist').filter(filePath => {
+    const files = shell.find('dist').filter((filePath) => {
+      // Do not remove folder
+      // And do not clean anything for @storybook/cli/dist/generators/**/template* because these are the template files
+      // that will be copied to init SB on users' projects
+      if (fs.lstatSync(filePath).isDirectory() || /generators\/.+\/template.*/.test(filePath)) {
+        return false;
+      }
+
       // Remove all copied TS files (but not the .d.ts)
       if (/\.tsx?$/.test(filePath) && !/\.d\.ts$/.test(filePath)) {
         return true;
       }
-      if (fs.lstatSync(filePath).isDirectory()) {
-        return false;
-      }
+
       return ignore.reduce((acc, pattern) => {
         return acc || !!filePath.match(pattern);
       }, false);
@@ -55,8 +66,8 @@ const packageJson = getPackageJson();
 
 removeDist();
 
-babelify({ errorCallback: errorLogs => logError('js', packageJson, errorLogs) });
-tscfy({ errorCallback: errorLogs => logError('ts', packageJson, errorLogs) });
+babelify({ errorCallback: (errorLogs) => logError('js', packageJson, errorLogs) });
+tscfy({ errorCallback: (errorLogs) => logError('ts', packageJson, errorLogs) });
 
 cleanup();
 
diff --git a/scripts/repo-dirty-check.js b/scripts/repo-dirty-check.js
deleted file mode 100644
index c20889132d84..000000000000
--- a/scripts/repo-dirty-check.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable no-console */
-const shell = require('shelljs');
-
-// exit with code 1 if there are some changed files
-if (shell.exec('git status --porcelain').stdout.trim() !== '') {
-  console.error(
-    'Git repo is dirty, please consider updating lockfiles by running `yarn bootstrap --reset --core`'
-  );
-  process.exit(1);
-}
diff --git a/scripts/reset.js b/scripts/reset.js
index 6a645c6e5d86..6212cfe790ac 100644
--- a/scripts/reset.js
+++ b/scripts/reset.js
@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { spawn, exec } from 'child_process';
+import { spawn } from 'child_process';
 import trash from 'trash';
 import del from 'del';
 
@@ -16,18 +16,19 @@ const cleaningProcess = spawn('git', [
   '--exclude=".idea"',
 ]);
 
-cleaningProcess.stdout.on('data', data => {
+cleaningProcess.stdout.on('data', (data) => {
   if (data && data.toString()) {
     const l = data
       .toString()
       .split(/\n/)
-      .forEach(i => {
+      .forEach((i) => {
         const [, uri] = i.match(/Would remove (.*)$/) || [];
 
         if (uri) {
           if (
             uri.match(/node_modules/) ||
             uri.match(/dist/) ||
+            uri.match(/ts3\.5/) ||
             uri.match(/\.cache/) ||
             uri.match(/dll/)
           ) {
@@ -39,7 +40,7 @@ cleaningProcess.stdout.on('data', data => {
               .then(() => {
                 logger.log(`trashed ${uri}`);
               })
-              .catch(e => {
+              .catch((e) => {
                 logger.log('failed to trash, will try permanent delete');
                 trash(uri);
               });
@@ -47,13 +48,13 @@ cleaningProcess.stdout.on('data', data => {
         }
       });
   }
-  fs.appendFile('reset.log', data, err => {
+  fs.appendFile('reset.log', data, (err) => {
     if (err) {
       throw err;
     }
   });
 });
-cleaningProcess.on('exit', code => {
+cleaningProcess.on('exit', (code) => {
   if (code === 0) {
     logger.log('all went well, files are being trashed now');
   } else {
diff --git a/scripts/run-chromatics.js b/scripts/run-chromatics.js
new file mode 100755
index 000000000000..3c9d2b1690cb
--- /dev/null
+++ b/scripts/run-chromatics.js
@@ -0,0 +1,110 @@
+import { spawn } from 'child_process';
+import { promisify } from 'util';
+
+import { readdir as readdirRaw, readFileSync } from 'fs';
+import { join } from 'path';
+
+import { getDeployables } from './utils/list-examples';
+
+const readdir = promisify(readdirRaw);
+
+const p = (l) => join(__dirname, '..', ...l);
+const logger = console;
+
+const exec = async (command, args = [], options = {}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(command, args, { ...options, stdio: 'inherit', shell: true });
+
+    child
+      .on('close', (code) => {
+        if (code) {
+          reject();
+        } else {
+          resolve();
+        }
+      })
+      .on('error', (e) => {
+        logger.error(e);
+        reject();
+      });
+  });
+
+const hasChromaticAppCode = (l) => {
+  const text = readFileSync(l, 'utf8');
+  const json = JSON.parse(text);
+
+  return !!(
+    json &&
+    json.storybook &&
+    json.storybook.chromatic &&
+    json.storybook.chromatic.projectToken
+  );
+};
+
+const handleExamples = async (deployables) => {
+  await deployables.reduce(async (acc, d) => {
+    await acc;
+
+    const out = p(['built-storybooks', d]);
+    const cwd = p([]);
+    const {
+      storybook: {
+        chromatic: { projectToken },
+      },
+    } = JSON.parse(readFileSync(p(['examples', d, 'package.json'])));
+
+    if (projectToken) {
+      await exec(
+        `yarn`,
+        [
+          'chromatic',
+          `--storybook-build-dir="${out}"`,
+          '--exit-zero-on-changes',
+          `--project-token="${projectToken}"`,
+        ],
+        { cwd }
+      );
+
+      logger.log('-------');
+      logger.log(`✅ ${d} ran`);
+      logger.log('-------');
+    } else {
+      logger.log('-------');
+      logger.log(`❌ ${d} skipped`);
+      logger.log('-------');
+    }
+  }, Promise.resolve());
+};
+
+const run = async () => {
+  const examples = await readdir(p(['examples']));
+
+  const { length } = examples;
+  const [a, b] = [process.env.CIRCLE_NODE_INDEX || 0, process.env.CIRCLE_NODE_TOTAL || 1];
+  const step = Math.ceil(length / b);
+  const offset = step * a;
+
+  const list = examples.slice().splice(offset, step);
+  const deployables = getDeployables(list, hasChromaticAppCode);
+
+  if (deployables.length) {
+    logger.log(`will build: ${deployables.join(', ')}`);
+    await handleExamples(deployables);
+  }
+
+  if (
+    deployables.length &&
+    (process.env.CIRCLE_NODE_INDEX === undefined ||
+      process.env.CIRCLE_NODE_INDEX === '0' ||
+      process.env.CIRCLE_NODE_INDEX === 0)
+  ) {
+    logger.log('-------');
+    logger.log('✅ done');
+    logger.log('-------');
+  }
+};
+
+run().catch((e) => {
+  logger.error(e);
+  process.exit(1);
+});
diff --git a/scripts/run-e2e-config.ts b/scripts/run-e2e-config.ts
new file mode 100644
index 000000000000..7f3003022a2a
--- /dev/null
+++ b/scripts/run-e2e-config.ts
@@ -0,0 +1,168 @@
+import { Parameters } from './run-e2e';
+
+const fromDeps = (...args: string[]): string =>
+  [
+    'cd {{name}}-v{{version}}',
+    'yarn init --yes',
+    args.length && `yarn add ${args.join(' ')} --silent`,
+  ]
+    .filter(Boolean)
+    .join(' && ');
+
+export const angular: Parameters = {
+  name: 'angular',
+  version: 'latest',
+  generator: [
+    `yarn add @angular/cli@{{version}} --no-lockfile --non-interactive --silent --no-progress`,
+    `npx ng new {{name}}-v{{version}} --routing=true --minimal=true --style=scss --skipInstall=true`,
+  ].join(' && '),
+  additionalDeps: ['react', 'react-dom'],
+};
+
+// TODO: not working yet, help needed
+// export const ember: Parameters = {
+//   name: 'ember',
+//   version: 'latest',
+//   generator:
+//     'npx ember-cli@{{version}} new {{name}}-v{{version}} --skip-git --skip-npm --yarn --skip-bower',
+//   preBuildCommand: 'ember build',
+// };
+
+export const html: Parameters = {
+  name: 'html',
+  version: 'latest',
+  generator: fromDeps(),
+  autoDetect: false,
+  additionalDeps: ['react', 'react-dom'],
+};
+
+// TODO: broken
+// export const marionette: Parameters = {
+//   name: 'marionette',
+//   version: 'latest',
+//   generator: fromDeps('backbone.marionette@{{version}}'),
+// };
+
+// TODO: not working on start-storybook
+//  - Marko CLI is failing with Node 12 and looks to work with Node 10
+//  - Demo components of @storybook/marko must be updated
+//  - Marko Story templates of @storybook/cli must be updated
+// export const marko: Parameters = {
+//   name: 'marko',
+//   version: 'latest',
+//   generator: 'npx marko-cli@{{version}} create {{name}}-v{{version}}',
+//   ensureDir: false,
+// };
+
+// TODO: need to install meteor first
+// export const meteor: Parameters = {
+//   name: 'meteor',
+//   version: 'latest',
+//   generator: 'meteor create {{name}}-v{{version}} --minimal --react',
+// };
+
+export const mithril: Parameters = {
+  name: 'mithril',
+  version: 'latest',
+  generator: fromDeps('mithril@{{version}}'),
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const preact: Parameters = {
+  name: 'preact',
+  version: 'latest',
+  generator:
+    'npx preact-cli@{{version}} create preactjs-templates/default {{name}}-v{{version}} --yarn --install=false --git=false',
+  ensureDir: false,
+};
+
+export const rax: Parameters = {
+  name: 'rax',
+  version: 'latest',
+  // Rax versions are inconsistent 1.1.0-1 for some
+  generator: fromDeps('rax', 'rax-image', 'rax-link', 'rax-text', 'rax-view'),
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const react: Parameters = {
+  name: 'react',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom'),
+};
+
+// export const reactNative: Parameters = {
+//   name: 'reactNative',
+//   version: 'latest',
+//   generator: 'npx expo-cli init {{name}}-v{{version}} --template=bare-minimum --yarn',
+// };
+
+// TODO: issue in @storybook/cli init
+export const cra: Parameters = {
+  name: 'cra',
+  version: 'latest',
+  generator: 'npx create-react-app@{{version}} {{name}}-v{{version}}',
+};
+
+// TODO: there is a compatibility issue with riot@4
+export const riot: Parameters = {
+  name: 'riot',
+  version: '3',
+  generator: fromDeps('riot@3', 'riot-compiler@3', 'riot-tmpl@3'),
+};
+
+export const sfcVue: Parameters = {
+  name: 'sfcVue',
+  version: 'latest',
+  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler'),
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const svelte: Parameters = {
+  name: 'svelte',
+  version: 'latest',
+  generator: 'npx degit sveltejs/template {{name}}-v{{version}}',
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const vue: Parameters = {
+  name: 'vue',
+  version: 'latest',
+  generator: `npx @vue/cli@{{version}} create {{name}}-v{{version}} --default --packageManager=yarn --no-git --force`,
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const web_components: Parameters = {
+  name: 'web_components',
+  version: 'latest',
+  generator: fromDeps('lit-html', 'lit-element'),
+  additionalDeps: ['react', 'react-dom'],
+};
+
+export const webpackReact: Parameters = {
+  name: 'webpackReact',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom', 'webpack'),
+};
+
+export const yarn2Cra: Parameters = {
+  name: 'yarn-2-cra',
+  version: 'latest',
+  generator: [
+    `yarn set version 2`,
+    // ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1
+    `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }'`,
+    // Some required magic to be able to fetch deps from local registry
+    `yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
+    `yarn dlx create-react-app@{{version}} {{name}}-v{{version}}`,
+  ].join(' && '),
+};
+
+export const reactInYarnWorkspace: Parameters = {
+  name: 'reactInYarnWorkspace',
+  version: 'latest',
+  generator: [
+    'cd {{name}}-v{{version}}',
+    'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json',
+    `yarn add react react-dom --silent -W`,
+  ].join(' && '),
+};
diff --git a/scripts/run-e2e.sh b/scripts/run-e2e.sh
deleted file mode 100755
index c48e83023367..000000000000
--- a/scripts/run-e2e.sh
+++ /dev/null
@@ -1,125 +0,0 @@
-#!/bin/bash
-# Copyright (c) 2015-present, Facebook, Inc.
-#
-# This source code is licensed under the MIT license found in the
-# LICENSE file in the root directory of this source tree.
-
-# ******************************************************************************
-# This is an end-to-end test intended to run on CI.
-# You can also run it locally but it's slow.
-# ******************************************************************************
-
-# Start in scripts/ even if run from root directory
-cd "$(dirname "$0")"
-
-# CLI and app temporary locations
-# http://unix.stackexchange.com/a/84980
-temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'`
-custom_registry_url=http://localhost:4873
-original_npm_registry_url=`npm get registry`
-original_yarn_registry_url=`yarn config get registry`
-
-function cleanup {
-  echo 'Cleaning up.'
-  cd "$root_path"
-  rm -rf "$temp_app_path"
-  npm set registry "$original_npm_registry_url"
-  yarn config set registry "$original_yarn_registry_url"
-}
-
-# Error messages are redirected to stderr
-function handle_error {
-  echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2;
-  cleanup
-  echo 'Exiting with error.' 1>&2;
-  exit 1
-}
-
-function handle_exit {
-  cleanup
-  echo 'Exiting without error.' 1>&2;
-  exit
-}
-
-# Check for the existence of one or more files.
-function exists {
-  for f in $*; do
-    test -e "$f"
-  done
-}
-
-# Check for accidental dependencies in package.json
-function checkDependencies {
-  if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
-  grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then
-   echo "Dependencies are correct"
-  else
-   echo "There are extraneous dependencies in package.json"
-   exit 1
-  fi
-}
-
-# Exit the script with a helpful error message when any error is encountered
-trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR
-
-# Cleanup before exit on any termination signal
-trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP
-
-# Echo every command being executed
-set -x
-
-# Go to root
-cd ..
-root_path=$PWD
-
-if hash npm 2>/dev/null
-then
-  npm i -g npm@latest
-fi
-
-# Bootstrap monorepo
-yarn bootstrap --core
-
-# ******************************************************************************
-# First, publish the monorepo.
-# ******************************************************************************
-
-# Start local registry
-tmp_registry_log=`mktemp`
-nohup npx verdaccio@3.2.0 -c scripts/verdaccio.yaml &>$tmp_registry_log &
-# Wait for `verdaccio` to boot
-grep -q 'http address' <(tail -f $tmp_registry_log)
-
-# Set registry to local registry
-npm set registry "$custom_registry_url"
-yarn config set registry "$custom_registry_url"
-
-# Login so we can publish packages
-(cd && npx npm-auth-to-token@1.0.0 -u user -p password -e user@example.com -r "$custom_registry_url")
-
-PACKAGE_VERSION=$(cat package.json \
-  | grep version \
-  | head -1 \
-  | awk -F: '{ print $2 }' \
-  | sed 's/[",]//g' \
-  | tr -d '[[:space:]]')
-
-# Publish the monorepo
-git clean -df
-./scripts/publish.sh --yes --force-publish=* --skip-git --repo-version $PACKAGE_VERSION --exact --npm-tag=latest --registry "$custom_registry_url"
-
-
-# ******************************************************************************
-# Start testing
-# ******************************************************************************
-
-echo "TESTS would run now"
-
-cd ./lib/cli/test
-./run_tests.sh
-
-# ******************************************************************************
-# Cleanup
-# ******************************************************************************
-
-cleanup
diff --git a/scripts/run-e2e.ts b/scripts/run-e2e.ts
new file mode 100644
index 000000000000..6c484e258ea7
--- /dev/null
+++ b/scripts/run-e2e.ts
@@ -0,0 +1,295 @@
+/* eslint-disable no-irregular-whitespace */
+import path from 'path';
+import { remove, ensureDir, pathExists, writeFile, readJSON, writeJSON } from 'fs-extra';
+import { prompt } from 'enquirer';
+import pLimit from 'p-limit';
+
+import shell from 'shelljs';
+import { serve } from './utils/serve';
+import { exec } from './utils/command';
+// @ts-ignore
+import { listOfPackages } from './utils/list-packages';
+
+import * as configs from './run-e2e-config';
+
+const logger = console;
+
+export interface Parameters {
+  name: string;
+  version: string;
+  generator: string;
+  autoDetect?: boolean;
+  preBuildCommand?: string;
+  /** When cli complains when folder already exists */
+  ensureDir?: boolean;
+  /** Dependencies to add before building Storybook */
+  additionalDeps?: string[];
+}
+
+export interface Options extends Parameters {
+  cwd?: string;
+}
+
+const rootDir = path.join(__dirname, '..');
+const siblingDir = path.join(__dirname, '..', '..', 'storybook-e2e-testing');
+
+const prepareDirectory = async ({
+  cwd,
+  ensureDir: ensureDirOption = true,
+}: Options): Promise<boolean> => {
+  const siblingExists = await pathExists(siblingDir);
+
+  if (!siblingExists) {
+    await ensureDir(siblingDir);
+    await exec('git init', { cwd: siblingDir });
+    await exec('npm init -y', { cwd: siblingDir });
+    await writeFile(path.join(siblingDir, '.gitignore'), 'node_modules\n');
+  }
+
+  const cwdExists = await pathExists(cwd);
+
+  if (cwdExists) {
+    return true;
+  }
+
+  if (ensureDirOption) {
+    await ensureDir(cwd);
+  }
+
+  return false;
+};
+
+const cleanDirectory = async ({ cwd }: Options): Promise<void> => {
+  await remove(cwd);
+  await remove(path.join(siblingDir, 'node_modules'));
+
+  // TODO: Move this somewhere else
+  //   Remove Yarn 2 specific stuffs generated
+  await shell.rm('-rf', [path.join(siblingDir, '.yarn'), path.join(siblingDir, '.yarnrc.yml')]);
+};
+
+const generate = async ({ cwd, name, version, generator }: Options) => {
+  const command = generator.replace(/{{name}}/g, name).replace(/{{version}}/g, version);
+  logger.info(`🏗  Bootstrapping ${name} project`);
+  logger.debug(command);
+
+  try {
+    await exec(command, { cwd });
+  } catch (e) {
+    logger.error(`🚨 Bootstrapping ${name} failed`);
+    throw e;
+  }
+};
+
+const initStorybook = async ({ cwd, autoDetect = true, name }: Options) => {
+  logger.info(`🎨 Initializing Storybook with @storybook/cli`);
+  try {
+    const type = autoDetect ? '' : `--type ${name}`;
+    await exec(`npx -p @storybook/cli sb init --yes ${type}`, { cwd });
+  } catch (e) {
+    logger.error(`🚨 Storybook initialization failed`);
+    throw e;
+  }
+};
+
+// Verdaccio doesn't resolve *
+// So we set resolutions manually in package.json
+const setResolutions = async ({ cwd }: Options) => {
+  logger.info(`🔒 Setting yarn resolutions`);
+
+  const packages = await listOfPackages();
+
+  const packageJsonPath = path.resolve(cwd, 'package.json');
+  const packageJson = await readJSON(packageJsonPath, { encoding: 'utf8' });
+
+  packageJson.resolutions = {
+    ...packageJson.resolutions,
+    ...packages.reduce(
+      (acc, { name, version }) => ({
+        ...acc,
+        [name]: version,
+      }),
+      {}
+    ),
+  };
+
+  await writeJSON(packageJsonPath, packageJson, { encoding: 'utf8', spaces: 2 });
+};
+
+const addRequiredDeps = async ({ cwd, additionalDeps }: Options) => {
+  logger.info(`🌍 Adding needed deps & installing all deps`);
+  try {
+    if (additionalDeps && additionalDeps.length > 0) {
+      await exec(`yarn add -D ${additionalDeps.join(' ')} --silent`, {
+        cwd,
+      });
+    } else {
+      await exec(`yarn install --silent`, {
+        cwd,
+      });
+    }
+  } catch (e) {
+    logger.error(`🚨 Dependencies installation failed`);
+    throw e;
+  }
+};
+
+const buildStorybook = async ({ cwd, preBuildCommand }: Options) => {
+  logger.info(`👷 Building Storybook`);
+  try {
+    if (preBuildCommand) {
+      await exec(preBuildCommand, { cwd });
+    }
+    await exec(`yarn build-storybook --quiet`, { cwd });
+  } catch (e) {
+    logger.error(`🚨 Storybook build failed`);
+    throw e;
+  }
+};
+
+const serveStorybook = async ({ cwd }: Options, port: string) => {
+  const staticDirectory = path.join(cwd, 'storybook-static');
+  logger.info(`🌍 Serving ${staticDirectory} on http://localhost:${port}`);
+
+  return serve(staticDirectory, port);
+};
+
+const runCypress = async ({ name, version }: Options, location: string, open: boolean) => {
+  const cypressCommand = open ? 'open' : 'run';
+  logger.info(`🤖 Running Cypress tests`);
+  try {
+    await exec(
+      `yarn cypress ${cypressCommand} --config integrationFolder="cypress/generated" --env location="${location}"`,
+      { cwd: rootDir }
+    );
+    logger.info(`✅ E2E tests success`);
+    logger.info(`🎉 Storybook is working great with ${name} ${version}!`);
+  } catch (e) {
+    logger.error(`🚨 E2E tests fails`);
+    throw e;
+  }
+};
+
+const runTests = async ({ name, version, ...rest }: Parameters) => {
+  const options = {
+    name,
+    version,
+    ...rest,
+    cwd: path.join(siblingDir, `${name}-v${version}`),
+  };
+
+  logger.info(`🏃‍♀️ Starting for ${name} ${version}`);
+  logger.log();
+  logger.debug(options);
+  logger.log();
+
+  if (!(await prepareDirectory(options))) {
+    await generate({ ...options, cwd: siblingDir });
+    logger.log();
+
+    await setResolutions(options);
+    logger.log();
+
+    await initStorybook(options);
+    logger.log();
+
+    await addRequiredDeps(options);
+    logger.log();
+
+    await buildStorybook(options);
+    logger.log();
+  }
+
+  const server = await serveStorybook(options, '4000');
+  logger.log();
+
+  let open = false;
+  if (!process.env.CI) {
+    ({ open } = await prompt({
+      type: 'confirm',
+      name: 'open',
+      message: 'Should open cypress?',
+    }));
+  }
+
+  try {
+    await runCypress(options, 'http://localhost:4000', open);
+    logger.log();
+  } finally {
+    server.close();
+  }
+};
+
+// Run tests!
+const runE2E = (parameters: Parameters) =>
+  runTests(parameters)
+    .then(async () => {
+      if (!process.env.CI) {
+        const { name, version } = parameters;
+        const cwd = path.join(siblingDir, `${name}-v${version}`);
+
+        const { cleanup } = await prompt({
+          type: 'confirm',
+          name: 'cleanup',
+          message: 'Should perform cleanup?',
+        });
+
+        if (cleanup) {
+          logger.log();
+          logger.info(`🗑  Cleaning ${cwd}`);
+          await cleanDirectory({ ...parameters, cwd });
+        } else {
+          logger.log();
+          logger.info(`🚯 No cleanup happened: ${cwd}`);
+        }
+      }
+    })
+    .catch((e) => {
+      logger.error(`🛑 an error occurred:\n${e}`);
+      logger.log();
+      logger.error(e);
+      logger.log();
+      process.exitCode = 1;
+    });
+
+const frameworkArgs = process.argv.slice(2);
+const typedConfigs: { [key: string]: Parameters } = configs;
+let e2eConfigs: { [key: string]: Parameters } = {};
+
+if (frameworkArgs.length > 0) {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [framework, version = 'latest'] of frameworkArgs.map((arg) => arg.split('@'))) {
+    e2eConfigs[framework] = {
+      ...typedConfigs[framework],
+      version,
+    };
+  }
+} else {
+  e2eConfigs = typedConfigs;
+  // FIXME: For now Yarn 2 E2E tests must be run by explicitly call `yarn test:e2e-framework yarn2Cra@latest`
+  //   Because it is telling Yarn to use version 2
+  delete e2eConfigs.yarn2Cra;
+}
+
+const perform = () => {
+  const limit = pLimit(1);
+  const narrowedConfigs = Object.values(e2eConfigs);
+  const nodeIndex = +process.env.CIRCLE_NODE_INDEX || 0;
+  const numberOfNodes = +process.env.CIRCLE_NODE_TOTAL || 1;
+
+  const list = narrowedConfigs.filter((_, index) => {
+    return index % numberOfNodes === nodeIndex;
+  });
+
+  logger.info(
+    `📑 Assigning jobs ${list
+      .map((c) => c.name)
+      .join(', ')} to node ${nodeIndex} (on ${numberOfNodes})`
+  );
+
+  return Promise.all(list.map((config) => limit(() => runE2E(config))));
+};
+
+perform().then(() => {
+  process.exit(process.exitCode || 0);
+});
diff --git a/scripts/run-registry.js b/scripts/run-registry.js
deleted file mode 100755
index d5a5c6f03aba..000000000000
--- a/scripts/run-registry.js
+++ /dev/null
@@ -1,279 +0,0 @@
-#!/usr/bin/env node -r esm
-import { spawn, exec } from 'child_process';
-import inquirer from 'inquirer';
-import chalk from 'chalk';
-import detectFreePort from 'detect-port';
-import dedent from 'ts-dedent';
-import fs from 'fs';
-
-import nodeCleanup from 'node-cleanup';
-
-const logger = console;
-
-const freePort = port => detectFreePort(port);
-
-let verdaccioProcess;
-
-const startVerdaccio = port => {
-  let resolved = false;
-  return Promise.race([
-    new Promise(res => {
-      verdaccioProcess = spawn('npx', [
-        'verdaccio@4.0.1',
-        '-c',
-        'scripts/verdaccio.yaml',
-        '-l',
-        port,
-      ]);
-      verdaccioProcess.stdout.on('data', data => {
-        if (!resolved && data && data.toString().match(/http address/)) {
-          const [url] = data.toString().match(/(http:.*\d\/)/);
-          res(url);
-          resolved = true;
-        }
-        fs.appendFile('verdaccio.log', data, err => {
-          if (err) {
-            throw err;
-          }
-        });
-      });
-    }),
-    new Promise((res, rej) => {
-      setTimeout(() => {
-        if (!resolved) {
-          rej(new Error(`TIMEOUT - verdaccio didn't start within 60s`));
-
-          resolved = true;
-
-          verdaccioProcess.kill();
-        }
-      }, 60000);
-    }),
-  ]);
-};
-const registryUrl = (command, url) =>
-  new Promise((res, rej) => {
-    const args = url ? ['config', 'set', 'registry', url] : ['config', 'get', 'registry'];
-    exec(`${command} ${args.join(' ')}`, (e, stdout) => {
-      if (e) {
-        rej(e);
-      } else {
-        res(url || stdout.toString().trim());
-      }
-    });
-  });
-
-const registriesUrl = (yarnUrl, npmUrl) =>
-  Promise.all([registryUrl('yarn', yarnUrl), registryUrl('npm', npmUrl || yarnUrl)]);
-
-nodeCleanup(() => {
-  try {
-    verdaccioProcess.kill();
-  } catch (e) {
-    //
-  }
-});
-
-const applyRegistriesUrl = (yarnUrl, npmUrl, originalYarnUrl, originalNpmUrl) => {
-  logger.log(`↪️  changing system config`);
-  nodeCleanup(() => {
-    registriesUrl(originalYarnUrl, originalNpmUrl);
-
-    logger.log(dedent`
-      Your registry config has been restored from:
-      npm: ${npmUrl} to ${originalNpmUrl} 
-      yarn: ${yarnUrl} to ${originalYarnUrl} 
-    `);
-  });
-
-  return registriesUrl(yarnUrl, npmUrl);
-};
-
-const addUser = url =>
-  new Promise((res, rej) => {
-    logger.log(`👤 add temp user to verdaccio`);
-
-    exec(`npx npm-cli-adduser -r "${url}" -a -u user -p password -e user@example.com`, e => {
-      if (e) {
-        rej(e);
-      } else {
-        res();
-      }
-    });
-  });
-
-const currentVersion = async () => {
-  const { version } = (await import('../lerna.json')).default;
-  return version;
-};
-
-const publish = (packages, url) =>
-  packages.reduce((acc, { name, location }) => {
-    return acc.then(() => {
-      return new Promise((res, rej) => {
-        logger.log(`🛫 publishing ${name} (${location})`);
-        const command = `cd ${location} && npm publish --registry ${url} --force --access restricted`;
-        exec(command, e => {
-          if (e) {
-            rej(e);
-          } else {
-            logger.log(`🛬 successful publish of ${name}!`);
-            res();
-          }
-        });
-      });
-    });
-  }, Promise.resolve());
-
-const listOfPackages = () =>
-  new Promise((res, rej) => {
-    const command = `./node_modules/.bin/lerna list --json`;
-    exec(command, (e, result) => {
-      if (e) {
-        rej(e);
-      } else {
-        const data = JSON.parse(result.toString().trim());
-        res(data);
-      }
-    });
-  });
-
-const askForPermission = () =>
-  inquirer
-    .prompt([
-      {
-        type: 'confirm',
-        message: `${chalk.red('BE WARNED')} do you want to change your ${chalk.underline(
-          'system'
-        )} default registry to the temp verdacio registry?`,
-        name: 'sure',
-      },
-    ])
-    .then(({ sure }) => sure);
-
-const askForReset = () =>
-  inquirer
-    .prompt([
-      {
-        type: 'confirm',
-        message: `${chalk.red(
-          'THIS IS BAD'
-        )} looks like something bad happened, OR you're already using a local registry, shall we reset to the default registry https://registry.npmjs.org/ ?`,
-        name: 'sure',
-      },
-    ])
-    .then(({ sure }) => {
-      if (sure) {
-        logger.log(`↩️ changing system config`);
-        return registriesUrl('https://registry.npmjs.org/');
-      }
-      return process.exit(1);
-    });
-
-const askForPublish = (packages, url, version) =>
-  inquirer
-    .prompt([
-      {
-        type: 'confirm',
-        message: `${chalk.green('READY TO PUBLISH')} shall we kick off a publish?`,
-        name: 'sure',
-      },
-    ])
-    .then(({ sure }) => {
-      if (sure) {
-        logger.log(`🚀 publishing version ${version}`);
-        return publish(packages, url).then(() => askForPublish(packages, url, version));
-      }
-      return false;
-    });
-
-const askForSubset = packages =>
-  inquirer
-    .prompt([
-      {
-        type: 'checkbox',
-        message: 'which packages?',
-        name: 'subset',
-        pageSize: packages.length,
-        choices: packages.map(p => ({ name: p.name, checked: true })),
-      },
-    ])
-    .then(({ subset }) => packages.filter(p => subset.includes(p.name)));
-
-const run = async () => {
-  const port = await freePort(4873);
-  logger.log(`🌏 found a open port: ${port}`);
-
-  logger.log(`🔖 reading current registry settings`);
-  let [originalYarnRegistryUrl, originalNpmRegistryUrl] = await registriesUrl();
-  if (
-    originalYarnRegistryUrl.includes('localhost') ||
-    originalNpmRegistryUrl.includes('localhost')
-  ) {
-    await askForReset();
-    originalYarnRegistryUrl = 'https://registry.npmjs.org/';
-    originalNpmRegistryUrl = 'https://registry.npmjs.org/';
-  }
-
-  logger.log(`📐 reading version of storybook`);
-  logger.log(`🚛 listing storybook packages`);
-  logger.log(`🎬 starting verdaccio (this takes ±20 seconds, so be patient)`);
-
-  const [shouldOverwrite, verdaccioUrl, packages, version] = await Promise.all([
-    askForPermission(),
-    startVerdaccio(port),
-    listOfPackages(),
-    currentVersion(),
-  ]);
-
-  logger.log(`🌿 verdaccio running on ${verdaccioUrl}`);
-
-  if (shouldOverwrite) {
-    logger.log(dedent`
-      You have chosen to change your system's default registry url. If this process fails for some reason and doesn't exit correctly, you may be stuck with a npm/yarn config that's broken.
-      To fix this you can revert back to the registry urls you had before by running:
-
-      > npm config set registry ${originalNpmRegistryUrl}
-      > yarn config set registry ${originalYarnRegistryUrl}
-
-      You can now use regular install procedure anywhere on your machine and the storybook packages will be installed from this local registry
-
-      The registry url is: ${verdaccioUrl}
-    `);
-  } else {
-    logger.log(dedent`
-      You have chosen to NOT change your system's default registry url. 
-
-      The registry is running locally, but you'll need to add a npm/yarn config file in your project in that points to the registry.
-      Here's a documentation for npm: https://docs.npmjs.com/files/npmrc
-      Yarn is able to read this file as well
-
-      The registry url is: ${verdaccioUrl}
-    `);
-  }
-
-  if (shouldOverwrite) {
-    await applyRegistriesUrl(
-      verdaccioUrl,
-      verdaccioUrl,
-      originalYarnRegistryUrl,
-      originalNpmRegistryUrl
-    );
-  }
-
-  await addUser(verdaccioUrl);
-
-  logger.log(`📦 found ${packages.length} storybook packages at version ${chalk.blue(version)}`);
-
-  const subset = await askForSubset(packages);
-
-  await askForPublish(subset, verdaccioUrl, version);
-
-  logger.log(dedent`
-    The verdaccio registry will now be terminated (this can take ±15 seconds, please be patient)
-  `);
-
-  verdaccioProcess.kill();
-};
-
-run();
diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts
new file mode 100755
index 000000000000..cb7b07c316b0
--- /dev/null
+++ b/scripts/run-registry.ts
@@ -0,0 +1,183 @@
+import { exec } from 'child_process';
+import chalk from 'chalk';
+import path from 'path';
+import program from 'commander';
+import detectFreePort from 'detect-port';
+import dedent from 'ts-dedent';
+import fs from 'fs';
+import yaml from 'js-yaml';
+import nodeCleanup from 'node-cleanup';
+
+import startVerdaccioServer from 'verdaccio';
+import pLimit from 'p-limit';
+import { listOfPackages, Package } from './utils/list-packages';
+
+program
+  .option('-O, --open', 'keep process open')
+  .option('-P, --publish', 'should publish packages')
+  .option('-p, --port <port>', 'port to run https server on');
+
+program.parse(process.argv);
+
+const logger = console;
+
+const freePort = (port?: number) => port || detectFreePort(port);
+
+const startVerdaccio = (port: number) => {
+  let resolved = false;
+  return Promise.race([
+    new Promise((resolve) => {
+      const cache = path.join(__dirname, '..', '.verdaccio-cache');
+      const config = {
+        ...yaml.safeLoad(fs.readFileSync(path.join(__dirname, 'verdaccio.yaml'), 'utf8')),
+        self_path: cache,
+      };
+
+      const onReady = (webServer: any) => {
+        webServer.listen(port, () => {
+          resolved = true;
+          resolve(webServer);
+        });
+      };
+
+      startVerdaccioServer(config, 6000, cache, '1.0.0', 'verdaccio', onReady);
+    }),
+    new Promise((_, rej) => {
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          rej(new Error(`TIMEOUT - verdaccio didn't start within 60s`));
+        }
+      }, 60000);
+    }),
+  ]);
+};
+const registryUrl = (command: string, url?: string) =>
+  new Promise<string>((res, rej) => {
+    const args = url ? ['config', 'set', 'registry', url] : ['config', 'get', 'registry'];
+    exec(`${command} ${args.join(' ')}`, (e, stdout) => {
+      if (e) {
+        rej(e);
+      } else {
+        res(url || stdout.toString().trim());
+      }
+    });
+  });
+
+const registriesUrl = (yarnUrl?: string, npmUrl?: string) =>
+  Promise.all([registryUrl('yarn', yarnUrl), registryUrl('npm', npmUrl || yarnUrl)]);
+
+const applyRegistriesUrl = (
+  yarnUrl: string,
+  npmUrl: string,
+  originalYarnUrl: string,
+  originalNpmUrl: string
+) => {
+  logger.log(`↪️  changing system config`);
+  nodeCleanup(() => {
+    registriesUrl(originalYarnUrl, originalNpmUrl);
+
+    logger.log(dedent`
+      Your registry config has been restored from:
+      npm: ${npmUrl} to ${originalNpmUrl} 
+      yarn: ${yarnUrl} to ${originalYarnUrl} 
+    `);
+  });
+
+  return registriesUrl(yarnUrl, npmUrl);
+};
+
+const addUser = (url: string) =>
+  new Promise((res, rej) => {
+    logger.log(`👤 add temp user to verdaccio`);
+
+    exec(`npx npm-cli-adduser -r "${url}" -a -u user -p password -e user@example.com`, (e) => {
+      if (e) {
+        rej(e);
+      } else {
+        res();
+      }
+    });
+  });
+
+const currentVersion = async () => {
+  const { version } = (await import('../lerna.json')).default;
+  return version;
+};
+
+const publish = (packages: { name: string; location: string }[], url: string) => {
+  const limit = pLimit(3);
+
+  return Promise.all(
+    packages.map(({ name, location }) =>
+      limit(
+        () =>
+          new Promise((res, rej) => {
+            logger.log(`🛫 publishing ${name} (${location})`);
+            const command = `cd ${location} && npm publish --registry ${url} --force --access restricted`;
+            exec(command, (e) => {
+              if (e) {
+                rej(e);
+              } else {
+                logger.log(`🛬 successful publish of ${name}!`);
+                res();
+              }
+            });
+          })
+      )
+    )
+  );
+};
+
+const run = async () => {
+  const port = await freePort(program.port);
+  logger.log(`🌏 found a open port: ${port}`);
+
+  const verdaccioUrl = `http://localhost:${port}`;
+
+  logger.log(`🔖 reading current registry settings`);
+  let [originalYarnRegistryUrl, originalNpmRegistryUrl] = await registriesUrl();
+  if (
+    originalYarnRegistryUrl.includes('localhost') ||
+    originalNpmRegistryUrl.includes('localhost')
+  ) {
+    originalYarnRegistryUrl = 'https://registry.npmjs.org/';
+    originalNpmRegistryUrl = 'https://registry.npmjs.org/';
+  }
+
+  logger.log(`📐 reading version of storybook`);
+  logger.log(`🚛 listing storybook packages`);
+  logger.log(`🎬 starting verdaccio (this takes ±5 seconds, so be patient)`);
+
+  const [verdaccioServer, packages, version] = await Promise.all<any, Package[], string>([
+    startVerdaccio(port),
+    listOfPackages(),
+    currentVersion(),
+  ]);
+
+  logger.log(`🌿 verdaccio running on ${verdaccioUrl}`);
+
+  await applyRegistriesUrl(
+    verdaccioUrl,
+    verdaccioUrl,
+    originalYarnRegistryUrl,
+    originalNpmRegistryUrl
+  );
+
+  // await addUser(verdaccioUrl);
+
+  logger.log(`📦 found ${packages.length} storybook packages at version ${chalk.blue(version)}`);
+
+  if (program.publish) {
+    await publish(packages, verdaccioUrl);
+  }
+
+  if (!program.open) {
+    verdaccioServer.close();
+  }
+};
+
+run().catch((e) => {
+  logger.error(e);
+  process.exit(1);
+});
diff --git a/scripts/run-repo-dirty-check.js b/scripts/run-repo-dirty-check.js
new file mode 100644
index 000000000000..0d7e81c196f8
--- /dev/null
+++ b/scripts/run-repo-dirty-check.js
@@ -0,0 +1,13 @@
+import shell from 'shelljs';
+import dedent from 'ts-dedent';
+
+const logger = console;
+
+// exit with code 1 if there are some changed files
+if (shell.exec('git status --porcelain').stdout.trim() !== '') {
+  logger.error(dedent`
+    Git repo is dirty,
+    please consider updating lockfiles by running "yarn bootstrap --reset --core"
+  `);
+  process.exit(1);
+}
diff --git a/scripts/test.js b/scripts/test.js
index dc936233bfa9..3b4f42c13686 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -10,7 +10,7 @@ log.heading = 'storybook';
 const prefix = 'test';
 log.addLevel('aborted', 3001, { fg: 'red', bold: true });
 
-const spawn = command => {
+const spawn = (command) => {
   const out = childProcess.spawnSync(`${command}`, {
     shell: true,
     stdio: 'inherit',
@@ -101,17 +101,17 @@ const tasks = {
   }),
 };
 
-const getProjects = list => list.filter(key => key.projectLocation);
+const getProjects = (list) => list.filter((key) => key.projectLocation);
 
-const getScripts = list => list.filter(key => key.script);
+const getScripts = (list) => list.filter((key) => key.script);
 
-const getExtraParams = list => list.filter(key => key.extraParam).map(key => key.extraParam);
+const getExtraParams = (list) => list.filter((key) => key.extraParam).map((key) => key.extraParam);
 
 Object.keys(tasks)
   .reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
   .parse(process.argv);
 
-Object.keys(tasks).forEach(key => {
+Object.keys(tasks).forEach((key) => {
   tasks[key].value =
     program[tasks[key].option.replace('--', '')] || (program.all && tasks[key].projectLocation);
 });
@@ -119,7 +119,7 @@ Object.keys(tasks).forEach(key => {
 let selection;
 if (
   !Object.keys(tasks)
-    .map(key => tasks[key].value)
+    .map((key) => tasks[key].value)
     .filter(Boolean).length
 ) {
   selection = inquirer
@@ -130,17 +130,17 @@ if (
         name: 'todo',
         pageSize: 18,
         choices: Object.values(tasks)
-          .filter(key => !key.extraParam)
-          .map(key => ({
+          .filter((key) => !key.extraParam)
+          .map((key) => ({
             name: key.name,
             checked: key.defaultValue,
           }))
           .concat(new inquirer.Separator())
           .concat(
             Object.keys(tasks)
-              .map(key => tasks[key])
-              .filter(key => key.extraParam)
-              .map(key => ({
+              .map((key) => tasks[key])
+              .filter((key) => key.extraParam)
+              .map((key) => ({
                 name: key.name,
                 checked: key.defaultValue,
               }))
@@ -148,48 +148,48 @@ if (
       },
     ])
     .then(({ todo }) =>
-      todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)])
+      todo.map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)])
     );
 } else {
   selection = Promise.resolve(
     Object.keys(tasks)
-      .map(key => tasks[key])
-      .filter(item => item.value === true)
+      .map((key) => tasks[key])
+      .filter((item) => item.value === true)
   );
 }
 
 selection
-  .then(list => {
+  .then((list) => {
     if (list.length === 0) {
       log.warn(prefix, 'Nothing to test');
     } else {
       const projects = getProjects(list);
-      const jestProjects = projects.filter(key => key.isJest).map(key => key.projectLocation);
-      const nonJestProjects = projects.filter(key => !key.isJest);
+      const jestProjects = projects.filter((key) => key.isJest).map((key) => key.projectLocation);
+      const nonJestProjects = projects.filter((key) => !key.isJest);
       const extraParams = getExtraParams(list).join(' ');
       const jest = path.join(__dirname, '..', 'node_modules', '.bin', 'jest');
 
       if (jestProjects.length > 0) {
-        const projectsParam = jestProjects.some(project => project === '<all>')
+        const projectsParam = jestProjects.some((project) => project === '<all>')
           ? ''
           : `--projects ${jestProjects.join(' ')}`;
 
-        const cmd = `node --max_old_space_size=4096 ${jest} ${projectsParam} ${extraParams}`;
+        const cmd = `cross-env NODE_OPTIONS=--max_old_space_size=4096 ${jest} ${projectsParam} ${extraParams}`;
 
         spawn(cmd);
       }
 
-      nonJestProjects.forEach(key =>
+      nonJestProjects.forEach((key) =>
         spawn(`npm --prefix ${key.projectLocation} test -- ${extraParams}`)
       );
 
       const scripts = getScripts(list);
-      scripts.forEach(key => spawn(`${key.script} -- ${extraParams}`));
+      scripts.forEach((key) => spawn(`${key.script} -- ${extraParams}`));
 
       process.stdout.write('\x07');
     }
   })
-  .catch(e => {
+  .catch((e) => {
     log.aborted(prefix, chalk.red(e.message));
     log.silly(prefix, e);
     process.exit(1);
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
new file mode 100644
index 000000000000..e45267e1dc3a
--- /dev/null
+++ b/scripts/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["node"],
+    "strict": false,
+    "strictNullChecks": false,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "paths": {
+      "verdaccio": ["./typings.d.ts"]
+    }
+  },
+  "include": ["./**/*"]
+}
diff --git a/scripts/typings.d.ts b/scripts/typings.d.ts
new file mode 100644
index 000000000000..cda20baf6415
--- /dev/null
+++ b/scripts/typings.d.ts
@@ -0,0 +1 @@
+declare module 'verdaccio';
diff --git a/scripts/utils/cli-utils.js b/scripts/utils/cli-utils.js
new file mode 100644
index 000000000000..bff40943b54e
--- /dev/null
+++ b/scripts/utils/cli-utils.js
@@ -0,0 +1,45 @@
+/* eslint-disable global-require, no-octal-escape */
+const childProcess = require('child_process');
+
+const logger = console;
+
+const checkDependenciesAndRun = (run) => {
+  let cooldown = 0;
+  try {
+    require('inquirer');
+    require('commander');
+    require('chalk');
+    require('npmlog');
+  } catch (e) {
+    logger.log('🕘 running build on a clean repo, we have to install dependencies');
+    childProcess.spawnSync('yarn', ['install', '--ignore-optional'], {
+      stdio: ['inherit', 'inherit', 'inherit'],
+    });
+    process.stdout.write('\x07');
+    process.stdout.write('\033c');
+
+    // give the filesystem some time
+    cooldown = 1000;
+  } finally {
+    setTimeout(run, cooldown);
+  }
+};
+
+const spawn = (command, options = {}) => {
+  const out = childProcess.spawnSync(`${command}`, {
+    shell: true,
+    stdio: 'inherit',
+    ...options,
+  });
+
+  if (out.status !== 0) {
+    process.exit(out.status);
+  }
+
+  return out;
+};
+
+module.exports = {
+  checkDependenciesAndRun,
+  spawn,
+};
diff --git a/scripts/utils/command.ts b/scripts/utils/command.ts
new file mode 100644
index 000000000000..61a053461dd3
--- /dev/null
+++ b/scripts/utils/command.ts
@@ -0,0 +1,12 @@
+import shell, { ExecOptions } from 'shelljs';
+
+export const exec = async (command: string, options: ExecOptions = {}) =>
+  new Promise((resolve, reject) => {
+    shell.exec(command, options, (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`command exited with code: ${code}`));
+      }
+    });
+  });
diff --git a/scripts/compile-babel.js b/scripts/utils/compile-babel.js
similarity index 90%
rename from scripts/compile-babel.js
rename to scripts/utils/compile-babel.js
index 6caaa413f22e..f544c5b39aa7 100644
--- a/scripts/compile-babel.js
+++ b/scripts/utils/compile-babel.js
@@ -9,12 +9,12 @@ function getCommand(watch) {
     return '';
   }
 
-  const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel');
+  const babel = path.join(__dirname, '..', '..', 'node_modules', '.bin', 'babel');
 
   const args = [
     './src',
     '--out-dir ./dist',
-    `--config-file ${path.resolve(__dirname, '../.babelrc.js')}`,
+    `--config-file ${path.resolve(__dirname, '../../.babelrc.js')}`,
     `--copy-files`,
   ];
 
diff --git a/scripts/compile-tsc.js b/scripts/utils/compile-tsc.js
similarity index 87%
rename from scripts/compile-tsc.js
rename to scripts/utils/compile-tsc.js
index 121abf167ff5..a932cd08fda7 100644
--- a/scripts/compile-tsc.js
+++ b/scripts/utils/compile-tsc.js
@@ -4,7 +4,8 @@ const path = require('path');
 const shell = require('shelljs');
 
 function getCommand(watch) {
-  const tsc = path.join(__dirname, '..', 'node_modules', '.bin', 'tsc');
+  const tsc = path.join(__dirname, '..', '..', 'node_modules', '.bin', 'tsc');
+  const downlevelDts = path.join(__dirname, '..', '..', 'node_modules', '.bin', 'downlevel-dts');
 
   const args = ['--outDir ./dist', '--listEmittedFiles true'];
 
@@ -27,7 +28,7 @@ function getCommand(watch) {
     args.push('-w');
   }
 
-  return `${tsc} ${args.join(' ')}`;
+  return `${tsc} ${args.join(' ')} && ${downlevelDts} dist ts3.5/dist`;
 }
 
 function handleExit(code, stderr, errorCallback) {
diff --git a/scripts/utils/jest-transform-js.js b/scripts/utils/jest-transform-js.js
new file mode 100644
index 000000000000..55310dcac248
--- /dev/null
+++ b/scripts/utils/jest-transform-js.js
@@ -0,0 +1,6 @@
+const path = require('path');
+const babelJest = require('babel-jest');
+
+module.exports = babelJest.createTransformer({
+  configFile: path.resolve(__dirname, '../../.babelrc'),
+});
diff --git a/svelte-transform.js b/scripts/utils/jest-transform-svelte.js
similarity index 100%
rename from svelte-transform.js
rename to scripts/utils/jest-transform-svelte.js
diff --git a/scripts/utils/jest-transform-ts.js b/scripts/utils/jest-transform-ts.js
new file mode 100644
index 000000000000..9fbd7c766509
--- /dev/null
+++ b/scripts/utils/jest-transform-ts.js
@@ -0,0 +1,10 @@
+const tsTransformer = require('jest-preset-angular/preprocessor');
+const babelTransformer = require('./jest-transform-js');
+
+module.exports.process = function transform(src, path, config, transformOptions) {
+  const tsResult = tsTransformer.process(src, path, config, transformOptions);
+  const jsPath = path.replace('.ts', '.js');
+  const source = typeof tsResult === 'string' ? tsResult : tsResult.code;
+
+  return babelTransformer.process(source, jsPath, config, transformOptions);
+};
diff --git a/scripts/utils/list-examples.js b/scripts/utils/list-examples.js
new file mode 100644
index 000000000000..f120aa521727
--- /dev/null
+++ b/scripts/utils/list-examples.js
@@ -0,0 +1,18 @@
+import { statSync } from 'fs';
+import { join } from 'path';
+
+const p = (l) => join(__dirname, '..', '..', ...l);
+
+export const getDeployables = (files, extraFilter) => {
+  return files.filter((f) => {
+    const packageJsonLocation = p(['examples', f, 'package.json']);
+    let stats = null;
+    try {
+      stats = statSync(packageJsonLocation);
+    } catch (e) {
+      // the folder had no package.json, we'll ignore
+    }
+
+    return stats && stats.isFile() && extraFilter(packageJsonLocation);
+  });
+};
diff --git a/scripts/utils/list-packages.ts b/scripts/utils/list-packages.ts
new file mode 100644
index 000000000000..afeef0bd1f28
--- /dev/null
+++ b/scripts/utils/list-packages.ts
@@ -0,0 +1,21 @@
+import { exec } from 'child_process';
+
+export interface Package {
+  name: string;
+  version: string;
+  private: boolean;
+  location: string;
+}
+
+export const listOfPackages = (): Promise<Package[]> =>
+  new Promise((res, rej) => {
+    const command = `npx lerna list --json`;
+    exec(command, (e, result) => {
+      if (e) {
+        rej(e);
+      } else {
+        const data = JSON.parse(result.toString().trim());
+        res(data);
+      }
+    });
+  });
diff --git a/scripts/logo.js b/scripts/utils/logo.js
similarity index 100%
rename from scripts/logo.js
rename to scripts/utils/logo.js
diff --git a/scripts/utils/serve.ts b/scripts/utils/serve.ts
new file mode 100644
index 000000000000..0925f24ba9fe
--- /dev/null
+++ b/scripts/utils/serve.ts
@@ -0,0 +1,18 @@
+import express from 'express';
+import serveStatic from 'serve-static';
+import { Server } from 'http';
+
+export const serve = async (location: string, port: string): Promise<Server> => {
+  return new Promise((resolve, reject) => {
+    const app = express();
+
+    app.use(serveStatic(location));
+    const server = app.listen(port, (error) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(server);
+      }
+    });
+  });
+};
diff --git a/scripts/watch-babel.js b/scripts/utils/watch-babel.js
similarity index 100%
rename from scripts/watch-babel.js
rename to scripts/utils/watch-babel.js
diff --git a/scripts/watch-tsc.js b/scripts/utils/watch-tsc.js
similarity index 100%
rename from scripts/watch-tsc.js
rename to scripts/utils/watch-tsc.js
diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml
index e00f8c8dbf45..f4797fd3f043 100644
--- a/scripts/verdaccio.yaml
+++ b/scripts/verdaccio.yaml
@@ -1,8 +1,14 @@
-storage: ./storage
+storage: .verdaccio-cache
 
 auth:
-  htpasswd:
-    file: ./htpasswd
+  auth-memory:
+    users:
+      foo:
+        name: foo
+        password: s3cret
+      bar:
+        name: bar
+        password: s3cret
 
 uplinks:
   npmjs:
@@ -20,6 +26,20 @@ packages:
     publish: $all
     proxy: npmjs
 
+  # storybook's packages not hosted in this monorepo
+  '@storybook/csf':
+    access: $all
+    publish: $all
+    proxy: npmjs
+  '@storybook/semver':
+    access: $all
+    publish: $all
+    proxy: npmjs
+  '@storybook/preset-*':
+    access: $all
+    publish: $all
+    proxy: npmjs
+
   # storybook packages are NOT proxied to global registry
   # allowing us to republish any version during tests
   '@storybook/*':
@@ -45,4 +65,4 @@ packages:
     proxy: npmjs
 
 logs:
-  - {type: stdout, format: pretty, level: http}
+  - { type: stdout, format: pretty, level: warn }
diff --git a/scripts/workaround-puppeteer-issue-290.sh b/scripts/workaround-puppeteer-issue-290.sh
deleted file mode 100755
index d4557776336c..000000000000
--- a/scripts/workaround-puppeteer-issue-290.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/sh
-# Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
-
-sudo apt-get update
-sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
-  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
-  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
-  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
-  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
diff --git a/yarn.lock b/yarn.lock
index eff412bb9945..fddafe2ae8ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,203 +2,382 @@
 # yarn lockfile v1
 
 
-"@angular-devkit/architect@0.803.19":
-  version "0.803.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.803.19.tgz#03c13c94cd9c71f6a6c74b80b7323b973325a1fc"
-  integrity sha512-ttWVQyks//9+EOeRbZbRll1hA3RVGzW2SYWy5swEBI4vKYaKDED5mehVZUP5NUtvJaMm5yLOiK4pg0l4l4VA6Q==
-  dependencies:
-    "@angular-devkit/core" "8.3.19"
-    rxjs "6.4.0"
-
-"@angular-devkit/build-angular@~0.803.6":
-  version "0.803.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-0.803.19.tgz#feacc447edeffdb227c47cbf1c370c64dc4a4110"
-  integrity sha512-GCnwOe3PVYVcTwaj8cU7XvmjeTdoX7NgPBm9Pp3UuPi2lDQG27mdz57F1aMXGPZRU2P03EdCaiXoS/4h4+4gmg==
-  dependencies:
-    "@angular-devkit/architect" "0.803.19"
-    "@angular-devkit/build-optimizer" "0.803.19"
-    "@angular-devkit/build-webpack" "0.803.19"
-    "@angular-devkit/core" "8.3.19"
-    "@babel/core" "7.5.5"
-    "@babel/preset-env" "7.5.5"
-    "@ngtools/webpack" "8.3.19"
-    ajv "6.10.2"
-    autoprefixer "9.6.1"
-    browserslist "4.6.6"
-    cacache "12.0.2"
-    caniuse-lite "1.0.30000989"
+"@alib/build-scripts@^0.1.8":
+  version "0.1.23"
+  resolved "https://registry.yarnpkg.com/@alib/build-scripts/-/build-scripts-0.1.23.tgz#85a3034d7030f05f8bb744f8fa26869b1d0b72b4"
+  integrity sha512-9X4sIMES3Ci3X3Q7tZEZmq7kny5m5QsLxivyG2VPvTidWk8I6z4E010APz8hXQcOyB1rJY5EJrODkhgDOLKoiA==
+  dependencies:
+    address "^1.1.0"
+    camelcase "^5.3.1"
+    chalk "^2.4.1"
+    chokidar "^3.3.1"
+    commander "^2.19.0"
+    deepmerge "^4.0.0"
+    detect-port "^1.3.0"
+    fs-extra "^8.1.0"
+    jest "^24.9.0"
+    json5 "^2.1.3"
+    lodash "^4.17.15"
+    npmlog "^4.1.2"
+    react-dev-utils "^9.0.4"
+    webpack "^4.27.1"
+    webpack-dev-server "^3.7.2"
+    yargs-parser "^14.0.0"
+
+"@angular-devkit/architect@0.901.7":
+  version "0.901.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.901.7.tgz#6a09cb076ca92b3202053fca757a456d1f8e4395"
+  integrity sha512-yW/PUEqle55QihOFbmeNXaVTodhfeXkteoFDUpz+YpX3xiQDXDtNbIJSzKOQTojtBKdSMKMvZkQLr+RAa7/1EA==
+  dependencies:
+    "@angular-devkit/core" "9.1.7"
+    rxjs "6.5.4"
+
+"@angular-devkit/build-angular@~0.901.0":
+  version "0.901.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-0.901.7.tgz#10d55e3c73213971ba7d733f15d66494dfe9918a"
+  integrity sha512-NiBwapx/XJqYGzSmENff78i6Yif9PjYDJ9BB+59t2eDofkCZUcPFrhQmRgliO7rt6RATvT81lDP89+LBXCTQPw==
+  dependencies:
+    "@angular-devkit/architect" "0.901.7"
+    "@angular-devkit/build-optimizer" "0.901.7"
+    "@angular-devkit/build-webpack" "0.901.7"
+    "@angular-devkit/core" "9.1.7"
+    "@babel/core" "7.9.0"
+    "@babel/generator" "7.9.3"
+    "@babel/preset-env" "7.9.0"
+    "@babel/template" "7.8.6"
+    "@jsdevtools/coverage-istanbul-loader" "3.0.3"
+    "@ngtools/webpack" "9.1.7"
+    ajv "6.12.0"
+    autoprefixer "9.7.4"
+    babel-loader "8.0.6"
+    browserslist "^4.9.1"
+    cacache "15.0.0"
+    caniuse-lite "^1.0.30001032"
     circular-dependency-plugin "5.2.0"
-    clean-css "4.2.1"
-    copy-webpack-plugin "5.0.4"
-    core-js "3.2.1"
-    file-loader "4.2.0"
-    find-cache-dir "3.0.0"
-    glob "7.1.4"
-    istanbul-instrumenter-loader "3.0.1"
-    jest-worker "24.9.0"
+    copy-webpack-plugin "5.1.1"
+    core-js "3.6.4"
+    css-loader "3.5.1"
+    cssnano "4.1.10"
+    file-loader "6.0.0"
+    find-cache-dir "3.3.1"
+    glob "7.1.6"
+    jest-worker "25.1.0"
     karma-source-map-support "1.4.0"
-    less "3.9.0"
+    less "3.11.1"
     less-loader "5.0.0"
-    license-webpack-plugin "2.1.2"
-    loader-utils "1.2.3"
-    mini-css-extract-plugin "0.8.0"
+    license-webpack-plugin "2.1.4"
+    loader-utils "2.0.0"
+    mini-css-extract-plugin "0.9.0"
     minimatch "3.0.4"
-    open "6.4.0"
+    open "7.0.3"
     parse5 "4.0.0"
-    postcss "7.0.17"
+    postcss "7.0.27"
     postcss-import "12.0.1"
     postcss-loader "3.0.0"
-    raw-loader "3.1.0"
-    regenerator-runtime "0.13.3"
-    rxjs "6.4.0"
-    sass "1.22.9"
-    sass-loader "7.2.0"
-    semver "6.3.0"
+    raw-loader "4.0.0"
+    regenerator-runtime "0.13.5"
+    rimraf "3.0.2"
+    rollup "2.1.0"
+    rxjs "6.5.4"
+    sass "1.26.3"
+    sass-loader "8.0.2"
+    semver "7.1.3"
     source-map "0.7.3"
     source-map-loader "0.2.4"
-    source-map-support "0.5.13"
     speed-measure-webpack-plugin "1.3.1"
-    style-loader "1.0.0"
-    stylus "0.54.5"
+    style-loader "1.1.3"
+    stylus "0.54.7"
     stylus-loader "3.0.2"
-    terser "4.3.9"
-    terser-webpack-plugin "1.4.1"
-    tree-kill "1.2.1"
-    webpack "4.39.2"
+    terser "4.6.10"
+    terser-webpack-plugin "2.3.5"
+    tree-kill "1.2.2"
+    webpack "4.42.0"
     webpack-dev-middleware "3.7.2"
-    webpack-dev-server "3.9.0"
-    webpack-merge "4.2.1"
+    webpack-dev-server "3.11.0"
+    webpack-merge "4.2.2"
     webpack-sources "1.4.3"
-    webpack-subresource-integrity "1.1.0-rc.6"
-    worker-plugin "3.2.0"
+    webpack-subresource-integrity "1.4.0"
+    worker-plugin "4.0.3"
 
-"@angular-devkit/build-optimizer@0.803.19":
-  version "0.803.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.803.19.tgz#49396144416c1bce8e6cb1f0546135f3ff7b41c9"
-  integrity sha512-7chgsnEYZWMLpdYvsw64o5b+F0XRZr7zJd5LtbTF7mFYafcD+bUyaMOjWLup1G/VWv8xGXEsdm8Z1sWhis8LZw==
+"@angular-devkit/build-optimizer@0.901.7":
+  version "0.901.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.901.7.tgz#e72fc3031207a78aee175a76d3317cdf226984e9"
+  integrity sha512-Xuce3StdxhcgLYb0BAaFGr3Bzj5EM2OsAqIT15PkikWY1k5cK50vPxoC/BkX4QDL9eXSHtqAfMBfA6h5N422vw==
   dependencies:
-    loader-utils "1.2.3"
+    loader-utils "2.0.0"
     source-map "0.7.3"
-    tslib "1.10.0"
-    typescript "3.5.3"
+    tslib "1.11.1"
+    typescript "3.6.5"
     webpack-sources "1.4.3"
 
-"@angular-devkit/build-webpack@0.803.19":
-  version "0.803.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.803.19.tgz#afd294cff1b88a0c791f8b10a04cfc44e6cf6038"
-  integrity sha512-FdNxR47QCUts00z4jLVFot37m08QwGlUnjcYHFg6xPLvJzR2MuLpl0MrpWCdI82NCgCqCkNoQ8yrSDKuOY7Iug==
+"@angular-devkit/build-webpack@0.901.7":
+  version "0.901.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.901.7.tgz#6d93c38756540a02e67d2c3ccfac4220c62962de"
+  integrity sha512-pTLW5Eqy9cHgv78LKiH0e30lxqKzUPjh1djvNtFsEemOHsfKQdAfjLjikoaQvqMoBKVaUU7r2vmyyS17cH+1yw==
   dependencies:
-    "@angular-devkit/architect" "0.803.19"
-    "@angular-devkit/core" "8.3.19"
-    rxjs "6.4.0"
+    "@angular-devkit/architect" "0.901.7"
+    "@angular-devkit/core" "9.1.7"
+    rxjs "6.5.4"
 
-"@angular-devkit/core@8.3.19":
-  version "8.3.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-8.3.19.tgz#c3310bfdbd456c6301ed33713c7b58fea7822f5b"
-  integrity sha512-NTNxSpRB6zMlqsuWLHs2F6QuypIb/XUitMkJy2P7Ee3kZfCYvvH9cCkiQqkwEhKw6J01qKeXwOElmxnqmF291w==
+"@angular-devkit/core@9.1.7":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-9.1.7.tgz#f193ccbae4c80b34188bc9cc401c16b3ced50339"
+  integrity sha512-guvolu9Cl+qYMTtedLZD9wCqustJjdqzJ2psD2C1Sr1LrX9T0mprmDldR/YnhsitThveJEb6sM/0EvqWxoSvKw==
   dependencies:
-    ajv "6.10.2"
-    fast-json-stable-stringify "2.0.0"
-    magic-string "0.25.3"
-    rxjs "6.4.0"
+    ajv "6.12.0"
+    fast-json-stable-stringify "2.1.0"
+    magic-string "0.25.7"
+    rxjs "6.5.4"
     source-map "0.7.3"
 
-"@angular-devkit/schematics@8.3.19":
-  version "8.3.19"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-8.3.19.tgz#a3b78a90486028b86b139eff8b5e9c5f0fab6497"
-  integrity sha512-sHZMRypW5ZMvla8uMOTsAYHwPiBpShz31tJzd7F07gs9hpj3J05FZ3nL+ZVdt25YzdCUPaFPQKyVx2YfjGyJAw==
-  dependencies:
-    "@angular-devkit/core" "8.3.19"
-    rxjs "6.4.0"
-
-"@angular/cli@^8.3.6":
-  version "8.3.19"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-8.3.19.tgz#c8ffb91a9a3662ad8eeb9151982fd59a39ee800a"
-  integrity sha512-XzKlc2+M3flrT8UVd+oYgIohQMuXU/ZkP+RWj0qd99C/FTh5UoYflXXD1BwG15fqNIPA4K9uUYNEuDlb8TGWiA==
-  dependencies:
-    "@angular-devkit/architect" "0.803.19"
-    "@angular-devkit/core" "8.3.19"
-    "@angular-devkit/schematics" "8.3.19"
-    "@schematics/angular" "8.3.19"
-    "@schematics/update" "0.803.19"
+"@angular-devkit/schematics@9.1.7":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-9.1.7.tgz#45394a1c928db449b412dacf205c3ec78fb5ef0c"
+  integrity sha512-oeHPJePBcPp/bd94jHQeFUnft93PGF5iJiKV9szxqS8WWC5OMZ5eK7icRY0PwvLyfenspAZxdZcNaqJqPMul5A==
+  dependencies:
+    "@angular-devkit/core" "9.1.7"
+    ora "4.0.3"
+    rxjs "6.5.4"
+
+"@angular/cli@^9.1.0":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-9.1.7.tgz#0532b9c55d267cd6ee3edb79fec8b19c4e64e607"
+  integrity sha512-NhsIa725S/U/n7nDxp6ForusdYHEXF4aSIvsFRdoK6vbQ889c5e1Rdj+T5EWXLmpQZxeprSKhLI2alNX0nVhhQ==
+  dependencies:
+    "@angular-devkit/architect" "0.901.7"
+    "@angular-devkit/core" "9.1.7"
+    "@angular-devkit/schematics" "9.1.7"
+    "@schematics/angular" "9.1.7"
+    "@schematics/update" "0.901.7"
     "@yarnpkg/lockfile" "1.1.0"
     ansi-colors "4.1.1"
-    debug "^4.1.1"
+    debug "4.1.1"
     ini "1.3.5"
-    inquirer "6.5.1"
-    npm-package-arg "6.1.0"
-    npm-pick-manifest "3.0.2"
-    open "6.4.0"
-    pacote "9.5.5"
+    inquirer "7.1.0"
+    npm-package-arg "8.0.1"
+    npm-pick-manifest "6.0.0"
+    open "7.0.3"
+    pacote "9.5.12"
     read-package-tree "5.3.1"
-    rimraf "3.0.0"
-    semver "6.3.0"
+    rimraf "3.0.2"
+    semver "7.1.3"
     symbol-observable "1.2.0"
-    universal-analytics "^0.4.20"
-    uuid "^3.3.2"
+    universal-analytics "0.4.20"
+    uuid "7.0.2"
 
-"@angular/common@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-8.2.14.tgz#027e52b2951c14082d6e3af1a4ffa1356220e439"
-  integrity sha512-Qmt+aX2quUW54kaNT7QH7WGXnFxr/cC2C6sf5SW5SdkZfDQSiz8IaItvieZfXVQUbBOQKFRJ7TlSkt0jI/yjvw==
-  dependencies:
-    tslib "^1.9.0"
+"@angular/common@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-9.1.9.tgz#16e77b2db675b80e32f1788a20c538150fd09294"
+  integrity sha512-y/tJtkuOJhV2kcaXZyrLZH84i4uQ1r+vaaEHvXj+JZYfYfcMMd/TDqMiPcIkUb3RxqghtZ+q0ZNW5D1Nlru3Pw==
 
-"@angular/compiler-cli@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-8.2.14.tgz#1997bec04a6b9d022954e5747505fe8906994594"
-  integrity sha512-XDrTyrlIZM+0NquVT+Kbg5bn48AaWFT+B3bAT288PENrTdkuxuF9AhjFRZj8jnMdmaE4O2rioEkXBtl6z3zptA==
+"@angular/compiler-cli@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-9.1.9.tgz#e3c234d888074002fa5f6b7eab4f63f4ddbdb7bd"
+  integrity sha512-aLr2eaDlREN8XybgTbelvjtSZ8eAkxBPilnkddc700BgiC6ImyUSKaItOwa8bnjQwq4Wlz5eVG0ibsrX+5MXwg==
   dependencies:
     canonical-path "1.0.0"
-    chokidar "^2.1.1"
+    chokidar "^3.0.0"
     convert-source-map "^1.5.1"
     dependency-graph "^0.7.2"
+    fs-extra "4.0.2"
     magic-string "^0.25.0"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
+    semver "^6.3.0"
     source-map "^0.6.1"
-    tslib "^1.9.0"
-    yargs "13.1.0"
-
-"@angular/compiler@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-8.2.14.tgz#46db7a9d1c17f236126518ff26480c160d5a6183"
-  integrity sha512-ABZO4E7eeFA1QyJ2trDezxeQM5ZFa1dXw1Mpl/+1vuXDKNjJgNyWYwKp/NwRkLmrsuV0yv4UDCDe4kJOGbPKnw==
-  dependencies:
-    tslib "^1.9.0"
-
-"@angular/core@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-8.2.14.tgz#35566f5b19480369229477e7e0e0fde740bd5204"
-  integrity sha512-zeePkigi+hPh3rN7yoNENG/YUBUsIvUXdxx+AZq+QPaFeKEA2FBSrKn36ojHFrdJUjKzl0lPMEiGC2b6a6bo6g==
-  dependencies:
-    tslib "^1.9.0"
-
-"@angular/forms@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-8.2.14.tgz#7d357c346a3884881beb044c50ec4a09d3d7ee8e"
-  integrity sha512-zhyKL3CFIqcyHJ/TQF/h1OZztK611a6rxuPHCrt/5Sn1SuBTJJQ1pPTkOYIDy6IrCrtyANc8qB6P17Mao71DNQ==
-  dependencies:
-    tslib "^1.9.0"
-
-"@angular/platform-browser-dynamic@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.2.14.tgz#4439a79fe10ec45170e6940a28835e9ff0918950"
-  integrity sha512-mO2JPR5kLU/A3AQngy9+R/Q5gaF9csMStBQjwsCRI0wNtlItOIGL6+wTYpiTuh/ux+WVN1F2sLcEYU4Zf1ud9A==
-  dependencies:
-    tslib "^1.9.0"
-
-"@angular/platform-browser@^8.2.8":
-  version "8.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-8.2.14.tgz#31f082e8ba977f9b89964d721c38cbc32ce0e433"
-  integrity sha512-MtJptptyKzsE37JZ2VB/tI4cvMrdAH+cT9pMBYZd66YSZfKjIj5s+AZo7z8ncoskQSB1o3HMfDjSK7QXGx1mLQ==
-  dependencies:
-    tslib "^1.9.0"
+    sourcemap-codec "^1.4.8"
+    yargs "15.3.0"
+
+"@angular/compiler@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-9.1.9.tgz#cbf678ee28a0811a8ef3ee7be565d4911ff28ec7"
+  integrity sha512-kjFgaTB2ckr9lgmkS1dOGRT7kmzpQueydxsxXSHWgICNVE6F/u1PHyeSOyJRpxW0GnrkLq3QM2EUFnQGGga5bg==
+
+"@angular/core@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-9.1.9.tgz#db4241f867d6e14b81ed6e7c50334813c6ebfc10"
+  integrity sha512-q/DERgVU6vK2LtTcdVCGGBcoO424WsEfImh3Vcuy+P/ZVmthlDUC/+q+tSKt8MMf4hLpxFDQJE8vUSkktj7QEw==
+
+"@angular/forms@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-9.1.9.tgz#20c9a79d1dcb2cace45df9e2f304b658e02c1687"
+  integrity sha512-r675yImnb/0pY7K5W3V2ITa7YETu1I2AS+bRfII6UQ6gthyeFFOHb5noa7YneC2yqQiM6E4DQmF5ig3daPuFNg==
+
+"@angular/platform-browser-dynamic@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.9.tgz#12f8b05d3c9ef0844df88f3833e29ea1e49ec5e0"
+  integrity sha512-b9MG5MWne+IuL3uLm8jwPhlJzqYaGBGk/qibOqb17T24j1iyrlO7T5bZ8zO6pUy5iT/TahVfHPnPJC1qTK5OmA==
+
+"@angular/platform-browser@^9.1.0":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-9.1.9.tgz#c2fcc50aebfdc268521b407e32dc0d967cb40411"
+  integrity sha512-V861X3MxJp1AlMTnkUPldpBLIJbApXF3ka0A5Dq2nVJCyOFeteGkaRWSBgqe2jxmq+LVpJbzcNvtDFXw6mQ0jA==
+
+"@aurelia/debug@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/debug/-/debug-0.8.0-dev.202005200307.tgz#820d843bc68c8f086d9b5076e3a2d81b796a3e2f"
+  integrity sha512-6zpGu1c3tlaapJeQ9oKvv5d6iSNeKfQNeifQAfwyBso/WoioxnZmdB3jacwlof1P2hemxB8RI0e/+P5WdTcVWw==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/fetch-client@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/fetch-client/-/fetch-client-0.8.0-dev.202005200307.tgz#085da01ab1c11753b971b647520f1ad7310b7624"
+  integrity sha512-EwnqLm6VnjBQkY2ExShh6X5aAb/GaqjuPrqaFHXJuCkAIUzX3iD9B4LmMUk5LzDawdhUsG5cEunioe0Ww0jQfA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/jit-html-browser@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/jit-html-browser/-/jit-html-browser-0.8.0-dev.202005200307.tgz#56243740833c82a26b341a7c0486606e86995e90"
+  integrity sha512-gSdZ4cPrin85eGLf3XMgFjbXf0hYzE1tB081m0WtnEXOtMTxP1bqYd2ZMzekA+NFMpZZQBDUkQ4HcBOsDzWF9A==
+  dependencies:
+    "@aurelia/jit" "^0.8.0-dev.202005200307"
+    "@aurelia/jit-html" "^0.8.0-dev.202005200307"
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html-browser" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler-dom" "^0.8.0-dev.202005200307"
+
+"@aurelia/jit-html@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/jit-html/-/jit-html-0.8.0-dev.202005200307.tgz#6060ff20b104a6dbf0f0880c17408a7710d07c4d"
+  integrity sha512-OjMR1AxynsBMaIcSVsEHOWUa5VZeYJQteC+uWy2lShBQG4wMGozNLcp4OePY8rYuNgvNefRxJSTDQF9bJUmKpQ==
+  dependencies:
+    "@aurelia/jit" "^0.8.0-dev.202005200307"
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/jit@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/jit/-/jit-0.8.0-dev.202005200307.tgz#f6df793cc6911b8b547d3ea17dfab39a97b1ca22"
+  integrity sha512-/LeYypR37kIZ2DZVLOTsaP8nMc4arlpXEYYSvGOgp80ZkV5GKCe815lCWD07dzuJK6ltCR5OQHyG+DjtcdhLbA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/kernel@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/kernel/-/kernel-0.8.0-dev.202005200307.tgz#e70afd984a15141c4f52c90e47f77f36c9d680e6"
+  integrity sha512-aonZjKeCAOQjF+Ml5YCoByMApo39SXa4obTMxPNJrmSsC5UWQYcWTTmFVKrfDfWl+iA6QFe4Z6SIzbG0ym2XCQ==
+  dependencies:
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+
+"@aurelia/metadata@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/metadata/-/metadata-0.8.0-dev.202005200307.tgz#296276e6978012e8830ce237d9d2b740b9c1efcf"
+  integrity sha512-qsazQG0Z4klyTBFNJsD50C74p088YI6N3Q3et2eS4zhFTPk+F49f+arAsKZNyB8aA//gKuWJt/QNmr9D1aoSMQ==
+
+"@aurelia/plugin-conventions@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/plugin-conventions/-/plugin-conventions-0.8.0-dev.202005200307.tgz#a52d29dacc0f17b6eb46519d0ed82857d1d80db5"
+  integrity sha512-s+76+WSBqHQxs5Vq6wpQiNjdSPBbztx4P5bbKrYdb8HSr/l3Hm4BRrmF022bK9mL15Z93pFgWgVMeRNeTzRV8g==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+    modify-code "^1.2.0"
+    parse5 "^5.1.1"
+    typescript "^3.8.3"
+
+"@aurelia/route-recognizer@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/route-recognizer/-/route-recognizer-0.8.0-dev.202005200307.tgz#ef4bcb2d799fbbb504a8bf707bf28891c66092aa"
+  integrity sha512-B73cskP6dDQJQ0WU725hCSRCLFZCCAAW9k5n+K5WP/8cxOO1vy3GdxEUEZQeefNRZUGEBeXCBLbLLfY0G/zx1A==
+
+"@aurelia/router@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/router/-/router-0.8.0-dev.202005200307.tgz#30a6937728c0a8ca4349eed5a76c08a7c37b0440"
+  integrity sha512-dNflKScsSclwBpW6NnfArbqUQGL6QMXO1xWLo+Cv4xz5k9XXZGoZMIKVk2SNbPrtSMSORyBcH9o2dYiuWgb7OA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/route-recognizer" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/runtime-html-browser@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/runtime-html-browser/-/runtime-html-browser-0.8.0-dev.202005200307.tgz#4294af53075d5d63e8c03201d1b89c6608cdc6d6"
+  integrity sha512-+eywZ5kaKVIZ5uE+wz2V7TVon61DQOWC6buOHjAONSUI2Ohhs/+ts6CkjMSJ/sJOb315w2jZdwvm0J2XY/8fYw==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler-dom" "^0.8.0-dev.202005200307"
+
+"@aurelia/runtime-html@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/runtime-html/-/runtime-html-0.8.0-dev.202005200307.tgz#57f198475d1a0ee959e45f528f6bd394065f3e6f"
+  integrity sha512-8VrNAg6b3LghldKTX5WGz7hwoiBYbbkR3CXWj14gEqKig1VYjemDt6AVx54rOPIA0uE14hyRo4djCboo/JU7VA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/runtime@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/runtime/-/runtime-0.8.0-dev.202005200307.tgz#83fcf0857f3c333234949b7eaf9544ea6884ecb7"
+  integrity sha512-EPzk8SWaPwaxklPDWIWx7nXZ+wWSypbpyLomael8ReaVtLIsjFtcGClxzlY50G9D/G5/bSrFlLWGbEHjl7SblA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/scheduler-dom@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/scheduler-dom/-/scheduler-dom-0.8.0-dev.202005200307.tgz#c1d85d2c8200bde48fae4d2fea441cba49784112"
+  integrity sha512-OCHF8Dgm5nzZe7eOHr4SLGnUH8/ebEDi+GpUPnEQcy/Z31nEjegPBg2Y8ohMdC719CTi7YUzi5uuJNjvJ+IMow==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+
+"@aurelia/scheduler@^0.8.0-dev.202005200307":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/scheduler/-/scheduler-0.8.0-dev.202005200307.tgz#ba215dcf94c388c50c9360d46917e5a8d2784a02"
+  integrity sha512-0zUDUd2YicBxrlv6iAy7zWFYpA9l6X9kOklq6ouboomkH7zlaxrdKvvAp0F4/WkJ0YWHUlf6ufA9wo10/aM2rA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+
+"@aurelia/webpack-loader@dev":
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/@aurelia/webpack-loader/-/webpack-loader-0.8.0-dev.202005200307.tgz#147b918d362468254f8806b95b24dbae772beeb8"
+  integrity sha512-dffvCzo8J51oBq0F4ltskxz/SxQnBnnFqiLtGo+wxeWiC1BOIzqJaO22lYwLbu8NgiL2SucQ78099VZyuzEuZA==
+  dependencies:
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/plugin-conventions" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+    loader-utils "^1.2.3"
+    webpack "^4.41.4"
 
-"@babel/cli@^7.2.3":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.7.4.tgz#38804334c8db40209f88c69a5c90998e60cca18b"
-  integrity sha512-O7mmzaWdm+VabWQmxuM8hqNrWGGihN83KfhPUzp2lAW4kzIMwBxujXkZbD4fMwKMYY9FXTbDvXsJqU+5XHXi4A==
+"@babel/cli@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.8.4.tgz#505fb053721a98777b2b175323ea4f090b7d3c1c"
+  integrity sha512-XXLgAm6LBbaNxaGhMAznXXaxtCWfuv6PIDJ9Alsy9JYTOh+j2jJz+L/162kkfU1j/pTSxK1xGmlwI4pdIMkoag==
   dependencies:
     commander "^4.0.1"
     convert-source-map "^1.1.0"
@@ -211,13 +390,49 @@
   optionalDependencies:
     chokidar "^2.1.8"
 
-"@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.44", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
   integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
+"@babel/compat-data@^7.9.0", "@babel/compat-data@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.6.tgz#3f604c40e420131affe6f2c8052e9a275ae2049b"
+  integrity sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==
+  dependencies:
+    browserslist "^4.11.1"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
+"@babel/core@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.2.0.tgz#a4dd3814901998e93340f0086e9867fefa163ada"
+  integrity sha512-7pvAdC4B+iKjFFp9Ztj0QgBndJ++qaMeonT185wAqUnhipw8idm9Rv1UMyBuKtYjfl6ORNkgEgcsYLfHX/GpLw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.2.0"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.2.0"
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.6"
+    "@babel/types" "^7.2.0"
+    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"
@@ -238,334 +453,312 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30"
-  integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.5.5"
-    "@babel/helpers" "^7.5.5"
-    "@babel/parser" "^7.5.5"
-    "@babel/template" "^7.4.4"
-    "@babel/traverse" "^7.5.5"
-    "@babel/types" "^7.5.5"
-    convert-source-map "^1.1.0"
-    debug "^4.1.0"
-    json5 "^2.1.0"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
-  integrity sha512-FuRhDRtsd6IptKpHXAa+4WPZYY2ZzgowkbLBecEDDSje1X/apG7jQM33or3NdOmjXBKWGOg4JmSiRfUfuTtHXw==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.0"
-    "@babel/helpers" "^7.6.0"
-    "@babel/parser" "^7.6.0"
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.0"
-    "@babel/types" "^7.6.0"
-    convert-source-map "^1.1.0"
+"@babel/core@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
+  integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.0"
+    "@babel/parser" "^7.9.0"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    convert-source-map "^1.7.0"
     debug "^4.1.0"
-    json5 "^2.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
     lodash "^4.17.13"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.2.tgz#069a776e8d5e9eefff76236bc8845566bd31dd91"
-  integrity sha512-l8zto/fuoZIbncm+01p8zPSDZu/VuuJhAfA7d/AbzM09WR7iVhavvfNDYCNpo1VvLk6E6xgAoP9P+/EMJHuRkQ==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.2"
-    "@babel/helpers" "^7.6.2"
-    "@babel/parser" "^7.6.2"
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.2"
-    "@babel/types" "^7.6.0"
-    convert-source-map "^1.1.0"
+"@babel/core@7.9.6", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.3.4", "@babel/core@^7.4.4", "@babel/core@^7.4.5", "@babel/core@^7.5.5", "@babel/core@^7.7.5", "@babel/core@^7.8.3", "@babel/core@^7.8.4", "@babel/core@^7.9.0", "@babel/core@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.6.tgz#d9aa1f580abf3b2286ef40b6904d390904c63376"
+  integrity sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.6"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.6"
+    "@babel/parser" "^7.9.6"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
+    convert-source-map "^1.7.0"
     debug "^4.1.0"
-    json5 "^2.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
     lodash "^4.17.13"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.1", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.3.3", "@babel/core@^7.3.4", "@babel/core@^7.4.4", "@babel/core@^7.4.5", "@babel/core@^7.6.2", "@babel/core@^7.7.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab"
-  integrity sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ==
+"@babel/generator@7.9.3":
+  version "7.9.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.3.tgz#7c8b2956c6f68b3ab732bd16305916fbba521d94"
+  integrity sha512-RpxM252EYsz9qLUIq6F7YJyK1sv0wWDBFuztfDGWaQKzHjqDHysxSiRUpA/X9jmfqo+WzkAVKFaUily5h+gDCQ==
   dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.4"
-    "@babel/helpers" "^7.7.4"
-    "@babel/parser" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    json5 "^2.1.0"
+    "@babel/types" "^7.9.0"
+    jsesc "^2.5.1"
     lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4", "@babel/generator@^7.5.5", "@babel/generator@^7.6.0", "@babel/generator@^7.6.2", "@babel/generator@^7.6.4", "@babel/generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
-  integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
+"@babel/generator@^7.2.0", "@babel/generator@^7.3.4", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4", "@babel/generator@^7.6.4", "@babel/generator@^7.9.0", "@babel/generator@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.6.tgz#5408c82ac5de98cda0d77d8124e99fa1f2170a43"
+  integrity sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.9.6"
     jsesc "^2.5.1"
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
-  integrity sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==
-  dependencies:
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz#5f73f2b28580e224b5b9bd03146a4015d6217f5f"
-  integrity sha512-Biq/d/WtvfftWZ9Uf39hbPBYDUo986m5Bb4zhkeYDGUllF43D+nUe5M6Vuo6/8JDK/0YX/uBdeoQpyaNhNugZQ==
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
+  integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-builder-react-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66"
-  integrity sha512-kvbfHJNN9dg4rkEM4xn1s8d1/h6TYNvajy9L1wx4qLn9HFg0IkTsQi4rfBe92nxrPUFcMsHoMV+8rU7MJb3fCA==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
+  integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
   dependencies:
-    "@babel/types" "^7.7.4"
-    esutils "^2.0.0"
+    "@babel/helper-explode-assignable-expression" "^7.8.3"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-call-delegate@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.7.4.tgz#621b83e596722b50c0066f9dc37d3232e461b801"
-  integrity sha512-8JH9/B7J7tCYJ2PpWVpw9JhPuEVHztagNVuQAFBVFYluRMlpG7F1CgKEgGeL6KFqcsIa92ZYVj6DSc0XwmN1ZA==
+"@babel/helper-builder-react-jsx-experimental@^7.9.0":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.5.tgz#0b4b3e04e6123f03b404ca4dfd6528fe6bb92fe3"
+  integrity sha512-HAagjAC93tk748jcXpZ7oYRZH485RCq/+yEv9SIWezHRPv9moZArTnkUNciUNzvwHUABmiWKlcxJvMcu59UwTg==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/types" "^7.9.5"
 
-"@babel/helper-create-class-features-plugin@^7.2.0", "@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0", "@babel/helper-create-class-features-plugin@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz#fce60939fd50618610942320a8d951b3b639da2d"
-  integrity sha512-l+OnKACG4uiDHQ/aJT8dwpR+LhCJALxL0mJ6nzjB25e5IPwqV1VOsY7ah6UB1DG+VOXAIMtuC54rFJGiHkxjgA==
+"@babel/helper-builder-react-jsx@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32"
+  integrity sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==
   dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-member-expression-to-functions" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/types" "^7.9.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz#6d5762359fd34f4da1500e4cff9955b5299aaf59"
-  integrity sha512-Mt+jBKaxL0zfOIWrfQpnfYCN7/rS6GKx6CCCfuoqVVd+17R8zNDlzVYmIi9qyb2wOk002NsmSTDymkIygDUH7A==
+"@babel/helper-compilation-targets@^7.8.7", "@babel/helper-compilation-targets@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz#1e05b7ccc9d38d2f8b40b458b380a04dcfadd38a"
+  integrity sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==
   dependencies:
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
+    "@babel/compat-data" "^7.9.6"
+    browserslist "^4.11.1"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
 
-"@babel/helper-define-map@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz#2841bf92eb8bd9c906851546fe6b9d45e162f176"
-  integrity sha512-v5LorqOa0nVQUvAUTUF3KPastvUt/HzByXNamKQ6RdJRTV7j8rLL+WB5C/MzzWAwOomxDhYFb1wLLxHqox86lg==
-  dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/types" "^7.7.4"
+"@babel/helper-create-class-features-plugin@^7.2.0", "@babel/helper-create-class-features-plugin@^7.8.3", "@babel/helper-create-class-features-plugin@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz#965c8b0a9f051801fd9d3b372ca0ccf200a90897"
+  integrity sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==
+  dependencies:
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.9.6"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+
+"@babel/helper-create-regexp-features-plugin@^7.8.3", "@babel/helper-create-regexp-features-plugin@^7.8.8":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
+  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
+    regexpu-core "^4.7.0"
+
+"@babel/helper-define-map@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
+  integrity sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/types" "^7.8.3"
     lodash "^4.17.13"
 
-"@babel/helper-explode-assignable-expression@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84"
-  integrity sha512-2/SicuFrNSXsZNBxe5UGdLr+HZg+raWBLE9vC98bdYOKX/U6PY0mdGlYUJdtTDPSU0Lw0PNbKKDpwYHJLn2jLg==
+"@babel/helper-explode-assignable-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
+  integrity sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==
   dependencies:
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-function-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
-  integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==
+"@babel/helper-function-name@^7.8.3", "@babel/helper-function-name@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c"
+  integrity sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.9.5"
 
-"@babel/helper-get-function-arity@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
-  integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-hoist-variables@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
-  integrity sha512-wQC4xyvc1Jo/FnLirL6CEgPgPCa8M74tOdjWpRhQYapz5JC7u3NYU1zCVoVAGCE3EaIP9T1A3iW0WLJ+reZlpQ==
+"@babel/helper-hoist-variables@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
+  integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-member-expression-to-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74"
-  integrity sha512-9KcA1X2E3OjXl/ykfMMInBK+uVdfIVakVe7W7Lg3wfXUNyS3Q1HWLFRwZIjhqiCGbslummPDnmb7vIekS0C1vw==
+"@babel/helper-member-expression-to-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
+  integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
-  integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
+  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-module-transforms@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.4.tgz#8d7cdb1e1f8ea3d8c38b067345924ac4f8e0879a"
-  integrity sha512-ehGBu4mXrhs0FxAqN8tWkzF8GSIGAiEumu4ONZ/hD9M88uHcD+Yu2ttKfOCgwzoesJOJrtQh7trI5YPbRtMmnA==
+"@babel/helper-module-transforms@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
+  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-simple-access" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/template" "^7.8.6"
+    "@babel/types" "^7.9.0"
     lodash "^4.17.13"
 
-"@babel/helper-module-transforms@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz#d044da7ffd91ec967db25cd6748f704b6b244835"
-  integrity sha512-A7pSxyJf1gN5qXVcidwLWydjftUN878VkalhXX5iQDuGyiGK3sOrrKKHF4/A4fwHtnsotv/NipwAeLzY4KQPvw==
+"@babel/helper-optimise-call-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
+  integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-simple-access" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    lodash "^4.17.13"
+    "@babel/types" "^7.8.3"
 
-"@babel/helper-optimise-call-expression@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
-  integrity sha512-VB7gWZ2fDkSuqW6b1AKXkJWO5NyNI3bFL/kK79/30moK57blr6NbH8xcl2XcKCwOmJosftWunZqfO84IGq3ZZg==
-  dependencies:
-    "@babel/types" "^7.7.4"
+"@babel/helper-plugin-utils@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
-"@babel/helper-plugin-utils@7.0.0", "@babel/helper-plugin-utils@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
-  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.1", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
+  integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
 
-"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
-  integrity sha512-CkCYQLkfkiugbRDO8eZn6lRuR8kzZoGXCg3149iTk5se7g6qykSpy3+hELSwquhu+TgHn8nkLiBwHvNX8Hofcw==
+"@babel/helper-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
+  integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
   dependencies:
     lodash "^4.17.13"
 
-"@babel/helper-remap-async-to-generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz#c68c2407350d9af0e061ed6726afb4fff16d0234"
-  integrity sha512-Sk4xmtVdM9sA/jCI80f+KS+Md+ZHIpjuqmYPk1M7F/upHou5e4ReYmExAiu6PVe65BhJPZA2CY9x9k4BqE5klw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-wrap-function" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz#3c881a6a6a7571275a72d82e6107126ec9e2cdd2"
-  integrity sha512-pP0tfgg9hsZWo5ZboYGuBn/bbYT/hdLPVSS4NMmiRJdwWhP0IznPwN9AE1JwyGsjSPLC364I0Qh5p+EPkGPNpg==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-simple-access@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz#a169a0adb1b5f418cfc19f22586b2ebf58a9a294"
-  integrity sha512-zK7THeEXfan7UlWsG2A6CI/L9jVnI5+xxKZOdej39Y0YtDYKx9raHk5F2EtK9K8DHRTihYwg20ADt9S36GR78A==
-  dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-split-export-declaration@^7.0.0", "@babel/helper-split-export-declaration@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
-  integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==
-  dependencies:
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-wrap-function@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
-  integrity sha512-VsfzZt6wmsocOaVU0OokwrIytHND55yvyT4BPB9AIIgwr8+x7617hetdJTsuGwygN5RC6mxA9EJztTjuwm2ofg==
-  dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/helpers@^7.4.3", "@babel/helpers@^7.5.5", "@babel/helpers@^7.6.0", "@babel/helpers@^7.6.2", "@babel/helpers@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
-  integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==
-  dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/highlight@^7.0.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
-  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
-  dependencies:
+"@babel/helper-remap-async-to-generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
+  integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-wrap-function" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.8.3", "@babel/helper-replace-supers@^7.8.6", "@babel/helper-replace-supers@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz#03149d7e6a5586ab6764996cd31d6981a17e1444"
+  integrity sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
+
+"@babel/helper-simple-access@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
+  integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-split-export-declaration@^7.0.0", "@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-validator-identifier@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz#5770b0c1a826c4f53f5ede5e153163e0318e94b5"
+  integrity sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==
+
+"@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
+  integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==
+
+"@babel/helper-wrap-function@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
+  integrity sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helpers@^7.2.0", "@babel/helpers@^7.4.3", "@babel/helpers@^7.9.0", "@babel/helpers@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.6.tgz#092c774743471d0bb6c7de3ad465ab3d3486d580"
+  integrity sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
+
+"@babel/highlight@^7.0.0", "@babel/highlight@^7.8.3":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.9.0.tgz#4e9b45ccb82b79607271b2979ad82c7b68163079"
+  integrity sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.0"
     chalk "^2.0.0"
-    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.2.3", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.5.5", "@babel/parser@^7.6.0", "@babel/parser@^7.6.2", "@babel/parser@^7.6.4", "@babel/parser@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
-  integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
-
-"@babel/parser@^7.4.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
-  integrity sha512-KNlOe9+/nk4i29g0VXgl8PEXIRms5xKLJeuZ6UptN0fHv+jDiriG+y94X6qAgWTR0h3KaoM1wK5G5h7MHFRSig==
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.2.0", "@babel/parser@^7.3.4", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5", "@babel/parser@^7.6.0", "@babel/parser@^7.6.4", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
+  integrity sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==
 
-"@babel/plugin-external-helpers@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.7.4.tgz#8aa7aa402f0e2ecb924611cbf30942a497dfd17e"
-  integrity sha512-RVGNajLaFlknbZLutaP/uv7Q+xmVs2LMlEWFXbcjLnwtBdPqAVpV3nzYIAJqri/VjJCUrhG5nALijtg0aND+XA==
+"@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
+  integrity sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
-  integrity sha512-1ypyZvGRXriY/QP668+s8sFr2mqinhkRDMPSQLNghCQE+GAkFtp+wkHVvg2+Hdki8gwP+NFzJBJ/N1BfzCCDEw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.4"
-    "@babel/plugin-syntax-async-generators" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-remap-async-to-generator" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
 
 "@babel/plugin-proposal-class-properties@7.2.0":
   version "7.2.0"
@@ -575,21 +768,13 @@
     "@babel/helper-create-class-features-plugin" "^7.2.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-class-properties@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
-  integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.5.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.7.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.7.4.tgz#2f964f0cb18b948450362742e33e15211e77c2ba"
-  integrity sha512-EcuXeV4Hv1X3+Q1TsuOmyyxeTRiSqurGJ26+I/FW1WbymmRRapVORm6x1Zl3iDIHyRxEs+VXWp6qnlcfcJSbbw==
+"@babel/plugin-proposal-class-properties@7.8.3", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.5.5", "@babel/plugin-proposal-class-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
+  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
 "@babel/plugin-proposal-decorators@7.2.0":
   version "7.2.0"
@@ -601,31 +786,22 @@
     "@babel/helper-split-export-declaration" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.2.0"
 
-"@babel/plugin-proposal-decorators@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
-  integrity sha512-ZSyYw9trQI50sES6YxREXKu+4b7MAg6Qx2cvyDDYjP2Hpzd3FleOUwC9cqn1+za8d0A2ZU8SHujxFao956efUg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.6.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-decorators" "^7.2.0"
-
-"@babel/plugin-proposal-decorators@^7.1.0", "@babel/plugin-proposal-decorators@^7.3.0", "@babel/plugin-proposal-decorators@^7.7.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.7.4.tgz#58c1e21d21ea12f9f5f0a757e46e687b94a7ab2b"
-  integrity sha512-GftcVDcLCwVdzKmwOBDjATd548+IE+mBo7ttgatqNDR7VG7GqIuZPtRWlMLHbhTXhcnFZiGER8iIYl1n/imtsg==
+"@babel/plugin-proposal-decorators@7.8.3", "@babel/plugin-proposal-decorators@^7.3.0", "@babel/plugin-proposal-decorators@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz#2156860ab65c5abf068c3f67042184041066543e"
+  integrity sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-decorators" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-decorators" "^7.8.3"
 
-"@babel/plugin-proposal-dynamic-import@^7.5.0", "@babel/plugin-proposal-dynamic-import@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz#dde64a7f127691758cbfed6cf70de0fa5879d52d"
-  integrity sha512-StH+nGAdO6qDB1l8sZ5UBV8AC3F2VW2I8Vfld73TMKyptMU9DY5YsJAS8U81+vEtxcH3Y/La0wG0btDrhpnhjQ==
+"@babel/plugin-proposal-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
+  integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
 "@babel/plugin-proposal-export-default-from@7.2.0":
   version "7.2.0"
@@ -635,575 +811,594 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-export-default-from" "^7.2.0"
 
-"@babel/plugin-proposal-export-default-from@^7.0.0", "@babel/plugin-proposal-export-default-from@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.7.4.tgz#890de3c0c475374638292df31f6582160b54d639"
-  integrity sha512-1t6dh7BHYUz4zD1m4pozYYEZy/3m8dgOr9owx3r0mPPI3iGKRUKUbIxfYmcJ4hwljs/dhd0qOTr1ZDUp43ix+w==
+"@babel/plugin-proposal-export-default-from@^7.2.0", "@babel/plugin-proposal-export-default-from@^7.5.2", "@babel/plugin-proposal-export-default-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.8.3.tgz#4cb7c2fdeaed490b60d9bfd3dc8a20f81f9c2e7c"
+  integrity sha512-PYtv2S2OdCdp7GSPDg5ndGZFm9DmWFvuLoS5nBxZCgOBggluLnhTScspJxng96alHQzPyrrHxvC9/w4bFuspeA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-export-default-from" "^7.8.3"
 
 "@babel/plugin-proposal-export-namespace-from@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.7.4.tgz#9b32a9e3538ba4b0e2fa08942f0a8e5f60899dea"
-  integrity sha512-3whN5U7iZjKdbwRSFwBOjGBgH7apXCzwielljxVH8D/iYcGRqPPw63vlIbG0GqQoT9bO0QYPcIUVkhQG5hcHtg==
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.8.3.tgz#63ad57265d0e3912afd666eb44ce26fa8cd2c774"
+  integrity sha512-WKK+9jz6TWUTX1uej9/EUVOmM1sK7aHv6bZyxbUV3NJjbiIZRqJITeXGMo7D631J72PEnIORh5VOlFCSlrLicg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
 "@babel/plugin-proposal-function-bind@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.7.4.tgz#a7a98439722f921ae0000f88750058b45011adbb"
-  integrity sha512-0qJlxfYKHs/JUg+JFISl29YObUCKAOQ0ENHMYoxErBFp58XTXwQEsrVPhs2TGL3cxI21XPs2fpommO6zmCd3/A==
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.8.3.tgz#e34a1e984771b84b6e5322745edeadca7e500ced"
+  integrity sha512-6q7VAHJQa9x4P6Lm6h6KHoJUEhx2r1buFKseHICe0ogb1LWxducO4tsQp3hd/7BVBo485YBsn6tJnpuwWm/9cA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-function-bind" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-function-bind" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.2.0", "@babel/plugin-proposal-json-strings@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.7.4.tgz#7700a6bfda771d8dc81973249eac416c6b4c697d"
-  integrity sha512-wQvt3akcBTfLU/wYoqm/ws7YOAQKu8EVJEvHip/mzkNtjaclQoCCIqKXFP5/eyfnfbQCDV3OLRIK3mIVyXuZlw==
+"@babel/plugin-proposal-json-strings@^7.2.0", "@babel/plugin-proposal-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
+  integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-json-strings" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.7.4.tgz#7db302c83bc30caa89e38fee935635ef6bd11c28"
-  integrity sha512-TbYHmr1Gl1UC7Vo2HVuj/Naci5BEGNZ0AJhzqD2Vpr6QPFWpUmBRLrIDjedzx7/CShq0bRDS2gI4FIs77VHLVQ==
+"@babel/plugin-proposal-nullish-coalescing-operator@7.8.3", "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
+  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/plugin-proposal-object-rest-spread@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
-  integrity sha512-F2DxJJSQ7f64FyTVl5cw/9MWn6naXGdk3Q3UhDbFEEHv+EilCPoeRD3Zh/Utx1CJz4uyKlQ4uH+bJPbEhMV7Zw==
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz#02dca21673842ff2fe763ac253777f235e9bbf78"
+  integrity sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/plugin-proposal-object-rest-spread@7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz#8ffccc8f3a6545e9f78988b6bf4fe881b88e8096"
-  integrity sha512-LDBXlmADCsMZV1Y9OQwMc0MyGZ8Ta/zlD9N67BfQT8uYwkRswiu2hU6nJKrjrt/58aH/vqfQlR/9yId/7A2gWw==
+"@babel/plugin-proposal-numeric-separator@7.8.3", "@babel/plugin-proposal-numeric-separator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
+  integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
 
-"@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.5.5", "@babel/plugin-proposal-object-rest-spread@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz#9f27075004ab99be08c5c1bd653a2985813cb370"
-  integrity sha512-3qp9I8lelgzNedI3hrhkvhaEYree6+WHnyA/q4Dza9z7iEIs1eyhWyJnetk3jJ69RT0AT4G0UhEGwyGFJ7GUuQ==
+"@babel/plugin-proposal-object-rest-spread@7.9.6", "@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.9.0", "@babel/plugin-proposal-object-rest-spread@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz#7a093586fcb18b08266eb1a7177da671ac575b63"
+  integrity sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.9.5"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.0.0", "@babel/plugin-proposal-optional-catch-binding@^7.2.0", "@babel/plugin-proposal-optional-catch-binding@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz#ec21e8aeb09ec6711bc0a39ca49520abee1de379"
-  integrity sha512-DyM7U2bnsQerCQ+sejcTNZh8KQEUuC3ufzdnVnSiUv/qoGJp2Z3hanKL18KDhsBT5Wj6a7CMT5mdyCNJsEaA9w==
+"@babel/plugin-proposal-optional-catch-binding@^7.2.0", "@babel/plugin-proposal-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
+  integrity sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
-"@babel/plugin-proposal-optional-chaining@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.4.tgz#3f04c2de1a942cbd3008324df8144b9cbc0ca0ba"
-  integrity sha512-JmgaS+ygAWDR/STPe3/7y0lNlHgS+19qZ9aC06nYLwQ/XB7c0q5Xs+ksFU3EDnp9EiEsO0dnRAOKeyLHTZuW3A==
+"@babel/plugin-proposal-optional-chaining@7.9.0", "@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
+  integrity sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.2.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz#433fa9dac64f953c12578b29633f456b68831c4e"
-  integrity sha512-80PbkKyORBUVm1fbTLrHpYdJxMThzM1UqFGh0ALEhO9TYbG86Ah9zQYAB/84axz2vcxefDLdZwWwZNlYARlu9w==
+"@babel/plugin-proposal-optional-chaining@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz#15f5d6d22708629451a91be28f8facc55b0e818c"
+  integrity sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
-"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.7.4.tgz#331aaf310a10c80c44a66b238b6e49132bd3c889"
-  integrity sha512-Li4+EjSpBgxcsmeEF8IFcfV/+yJGxHXDirDkEoyFjumuwbmfCVHUt0HuowD/iGM7OhIRyXJH9YXxqiH6N815+g==
+"@babel/plugin-proposal-private-methods@^7.3.3", "@babel/plugin-proposal-private-methods@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.8.3.tgz#01248c6c8dc292116b3b4ebd746150f4f0728bab"
+  integrity sha512-ysLAper960yy1TVXa2lMYdCQIGqtUXo8sVb+zYE7UTiZSLs6/wbZ0PrrXEKESJcK3SgFWrF8WpsaDzdslhuoZA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-class-properties@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.7.4.tgz#6048c129ea908a432a1ff85f1dc794dc62ddaa5e"
-  integrity sha512-JH3v5ZOeKT0qqdJ9BeBcZTFQiJOMax8RopSr1bH6ASkZKo2qWsvBML7W1mp89sszBRDBBRO8snqcByGdrMTdMg==
+"@babel/plugin-proposal-unicode-property-regex@^7.2.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.8.3":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz#ee3a95e90cdc04fe8cd92ec3279fa017d68a0d1d"
+  integrity sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.8.8"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-decorators@^7.2.0", "@babel/plugin-syntax-decorators@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz#3c91cfee2a111663ff3ac21b851140f5a52a4e0b"
-  integrity sha512-0oNLWNH4k5ZbBVfAwiTU53rKFWIeTh6ZlaWOXWJc4ywxs0tjz5fc3uZ6jKAnZSxN98eXVgg7bJIuzjX+3SXY+A==
+"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-dynamic-import@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
-  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.0.0", "@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec"
-  integrity sha512-jHQW0vbRGvwQNgyVxwDh4yuXu4bH1f5/EICJLAhl1SblLs2CDhrsmCk+v5XLdE9wxtAFRyxx+P//Iw+a5L/tTg==
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.8.3.tgz#6cb933a8872c8d359bfde69bbeaae5162fd1e8f7"
+  integrity sha512-UcAyQWg2bAN647Q+O811tG9MrJ38Z10jjhQdKNAL8fsyPzE3cCN/uT+f55cFVY4aGO4jqJAvmqsuY3GQDwAoXg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-export-default-from@^7.0.0", "@babel/plugin-syntax-export-default-from@^7.2.0", "@babel/plugin-syntax-export-default-from@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.7.4.tgz#897f05808298060b52873fa804ff853540790ea1"
-  integrity sha512-j888jpjATLEzOWhKawq46UrpXnCRDbdhBd5io4jgwjJ3+CHHGCRb6PNAVEgs+BXIb+dNRAmnkv36zfB992PRVw==
+"@babel/plugin-syntax-decorators@^7.2.0", "@babel/plugin-syntax-decorators@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz#8d2c15a9f1af624b0025f961682a9d53d3001bda"
+  integrity sha512-8Hg4dNNT9/LcA1zQlfwuKR8BUc/if7Q7NkTam9sGTcJphLwpf2g4S42uhspQrIrR+dpzE0dtTqBVFoHl8GtnnQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-export-namespace-from@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.7.4.tgz#116c3e5db0d3e41018665528a468bc0f336044c3"
-  integrity sha512-YTc2djwMzJjiTTUJxJunRAnK0xW6OrmCSrgBc7QbWtpUo44FCkhZQtNcwZUqVf3sc4JFxhreiJ/P7YkmCTw4rg==
+"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.2.0", "@babel/plugin-syntax-flow@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.4.tgz#6d91b59e1a0e4c17f36af2e10dd64ef220919d7b"
-  integrity sha512-2AMAWl5PsmM5KPkB22cvOkUyWk6MjUaqhHNU5nSPUl/ns3j5qLfw2SuYP5RbVZ0tfLvePr4zUScbICtDP2CUNw==
+"@babel/plugin-syntax-export-default-from@^7.2.0", "@babel/plugin-syntax-export-default-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.8.3.tgz#f1e55ce850091442af4ba9c2550106035b29d678"
+  integrity sha512-a1qnnsr73KLNIQcQlcQ4ZHxqqfBKM6iNQZW2OMTyxNbA2WC7SHWHtGVpFzWtQAuS2pspkWVzdEBXXx8Ik0Za4w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-function-bind@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-function-bind/-/plugin-syntax-function-bind-7.7.4.tgz#625ad69fe4dcb56147fa5b0a68fbaff96fd25864"
-  integrity sha512-dF3QkkaFA3Z7eiD2Cv7Y5x4w2sAKQVHUV2hLqi9iPKexw+/oqpL4crnnalg/Lq31XN33cH3G41kONSCqu06i/Q==
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-meta@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.7.4.tgz#3e9e4630780df5885b801f53c5f68d75e99e5261"
-  integrity sha512-hl6aKgm2IbVB+X9Z2xcKvGObOOS//vbohHPpNvd8iaKA3XQi3Sz/3oOyb3GLes6hY871mkbZQYK7lxriVECRAQ==
+"@babel/plugin-syntax-flow@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.1.tgz#cd4bbca62fb402babacb174f64f8734310d742f0"
+  integrity sha512-b3pWVncLBYoPP60UOTc7NMlbtsHQ6ITim78KQejNHK6WJ2mzV5kCcg4mIWpasAfJEgwVTibwo2e+FU7UEIKQUg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.1"
 
-"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.7.4.tgz#86e63f7d2e22f9e27129ac4e83ea989a382e86cc"
-  integrity sha512-QpGupahTQW1mHRXddMG5srgpHWqRLwJnJZKXTigB9RPFCCGbDGCgBeM/iC82ICXp414WeYx/tD54w7M2qRqTMg==
+"@babel/plugin-syntax-flow@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz#f2c883bd61a6316f2c89380ae5122f923ba4527f"
+  integrity sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-jsx@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
-  integrity sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==
+"@babel/plugin-syntax-function-bind@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-function-bind/-/plugin-syntax-function-bind-7.8.3.tgz#17d722cd8efc9bb9cf8bc59327f2b26295b352f7"
+  integrity sha512-gEYag4Q3CfqlQcJQQw/KSWdV2husGOnIsOsRlyzkoaNqj2V/V/CSdSJDCGSl67oJ1bdIYP6TjORWPH561dSJpA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec"
-  integrity sha512-wuy6fiMe9y7HeZBWXYCGt2RGxZOj0BImZ9EyXJVnVGBKO/Br592rbR3rtIQn0eQhAk9vqaKP5n8tVqEFBQMfLg==
+"@babel/plugin-syntax-import-meta@^7.2.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.8.3.tgz#230afff79d3ccc215b5944b438e4e266daf3d84d"
+  integrity sha512-vYiGd4wQ9gx0Lngb7+bPCwQXGK/PR6FeTIJ+TIOlq+OfOKG/kCAOO2+IBac3oMM9qV7/fU76hfcqxUaLKZf1hQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.7.4.tgz#e53b751d0c3061b1ba3089242524b65a7a9da12b"
-  integrity sha512-XKh/yIRPiQTOeBg0QJjEus5qiSKucKAiApNtO1psqG7D17xmE+X2i5ZqBEuSvo0HRuyPaKaSN/Gy+Ha9KFQolw==
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-object-rest-spread@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
-  integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
+"@babel/plugin-syntax-jsx@7.8.3", "@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
+  integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz#47cf220d19d6d0d7b154304701f468fc1cc6ff46"
-  integrity sha512-mObR+r+KZq0XhRVS2BrBKBpr5jqrqzlPvS9C9vuOf5ilSwzloAl7RPWLrgKdWS6IreaVrjHxTjtyqFiOisaCwg==
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.8.3.tgz#3995d7d7ffff432f6ddc742b47e730c054599897"
+  integrity sha512-Zpg2Sgc++37kuFl6ppq2Q7Awc6E6AIW671x5PY8E/f7MCIyPPGK/EoeZXvvY3P42exZ3Q4/t3YOzP/HiN79jDg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.7.4.tgz#a3e38f59f4b6233867b4a92dcb0ee05b2c334aa6"
-  integrity sha512-4ZSuzWgFxqHRE31Glu+fEr/MirNZOMYmD/0BhBWyLyOOQz/gTAl7QmWm2hX1QxEIXsr2vkdlwxIzTyiYRC4xcQ==
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz#c91fdde6de85d2eb8906daea7b21944c3610c901"
-  integrity sha512-2MqYD5WjZSbJdUagnJvIdSfkb/ucOC9/1fRJxm7GAxY6YQLWlUvkfxoNbUPcPLHJyetKUDQ4+yyuUyAoc0HriA==
+"@babel/plugin-syntax-numeric-separator@^7.8.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz#0e3fb63e09bea1b11e96467271c8308007e7c41f"
+  integrity sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-top-level-await@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"
-  integrity sha512-wdsOw0MvkL1UIgiQ/IFr3ETcfv1xb8RMM0H9wbiDyLaJFyiDg5oZvDLCXosIXmFeIlweML5iOBXAkqddkYNizg==
+"@babel/plugin-syntax-object-rest-spread@7.8.3", "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-typescript@^7.2.0", "@babel/plugin-syntax-typescript@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.7.4.tgz#5d037ffa10f3b25a16f32570ebbe7a8c2efa304b"
-  integrity sha512-77blgY18Hud4NM1ggTA8xVT/dBENQf17OpiToSa2jSmEY3fWXD2jwrdVlO4kq5yzUTeF15WSQ6b4fByNvJcjpQ==
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.2.0", "@babel/plugin-transform-arrow-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.7.4.tgz#76309bd578addd8aee3b379d809c802305a98a12"
-  integrity sha512-zUXy3e8jBNPiffmqkHRNDdZM2r8DWhCB7HhcoyZjiK1TxYEluLHAvQuYnTT+ARqRpabWqy/NHkO6e3MsYB5YfA==
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.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.5.0", "@babel/plugin-transform-async-to-generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz#694cbeae6d613a34ef0292713fa42fb45c4470ba"
-  integrity sha512-zpUTZphp5nHokuy8yLlyafxCJ0rSlFoSHypTUWgpdwoDXWQcseaect7cJ8Ppk6nunOM6+5rPMkod4OYKPR5MUg==
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
+  integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-block-scoped-functions@^7.0.0", "@babel/plugin-transform-block-scoped-functions@^7.2.0", "@babel/plugin-transform-block-scoped-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.7.4.tgz#d0d9d5c269c78eaea76227ace214b8d01e4d837b"
-  integrity sha512-kqtQzwtKcpPclHYjLK//3lH8OFsCDuDJBaFhVwf8kqdnF6MN4l618UDlcA7TfRs3FayrHj+svYnSX8MC9zmUyQ==
+"@babel/plugin-syntax-typescript@^7.2.0", "@babel/plugin-syntax-typescript@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz#c1f659dda97711a569cef75275f7e15dcaa6cabc"
+  integrity sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-block-scoping@^7.0.0", "@babel/plugin-transform-block-scoping@^7.2.0", "@babel/plugin-transform-block-scoping@^7.5.5", "@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.6.2", "@babel/plugin-transform-block-scoping@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.7.4.tgz#200aad0dcd6bb80372f94d9e628ea062c58bf224"
-  integrity sha512-2VBe9u0G+fDt9B5OV5DQH4KBf5DoiNkwFKOz0TCvBWvdAN2rOykCTkrL+jTLxfCAm76l9Qo5OqL7HBOx2dWggg==
+"@babel/plugin-transform-arrow-functions@^7.2.0", "@babel/plugin-transform-arrow-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
+  integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    lodash "^4.17.13"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.2.0", "@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.4.tgz#c92c14be0a1399e15df72667067a8f510c9400ec"
-  integrity sha512-sK1mjWat7K+buWRuImEzjNf68qrKcrddtpQo3swi9j7dUcG6y6R6+Di039QN2bD1dykeswlagupEmpOatFHHUg==
+"@babel/plugin-transform-async-to-generator@^7.2.0", "@babel/plugin-transform-async-to-generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz#4308fad0d9409d71eafb9b1a6ee35f9d64b64086"
+  integrity sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-define-map" "^7.7.4"
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    globals "^11.1.0"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-remap-async-to-generator" "^7.8.3"
 
-"@babel/plugin-transform-computed-properties@^7.0.0", "@babel/plugin-transform-computed-properties@^7.2.0", "@babel/plugin-transform-computed-properties@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.7.4.tgz#e856c1628d3238ffe12d668eb42559f79a81910d"
-  integrity sha512-bSNsOsZnlpLLyQew35rl4Fma3yKWqK3ImWMSC/Nc+6nGjC9s5NFWAer1YQ899/6s9HxO2zQC1WoFNfkOqRkqRQ==
+"@babel/plugin-transform-block-scoped-functions@^7.2.0", "@babel/plugin-transform-block-scoped-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz#437eec5b799b5852072084b3ae5ef66e8349e8a3"
+  integrity sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-destructuring@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
-  integrity sha512-2bGIS5P1v4+sWTCnKNDZDxbGvEqi0ijeqM/YqHtVGrvG2y0ySgnEEhXErvE9dA0bnIzY9bIzdFK0jFA46ASIIQ==
+"@babel/plugin-transform-block-scoping@^7.2.0", "@babel/plugin-transform-block-scoping@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz#97d35dab66857a437c166358b91d09050c868f3a"
+  integrity sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    lodash "^4.17.13"
 
-"@babel/plugin-transform-destructuring@^7.0.0", "@babel/plugin-transform-destructuring@^7.2.0", "@babel/plugin-transform-destructuring@^7.5.0", "@babel/plugin-transform-destructuring@^7.6.0", "@babel/plugin-transform-destructuring@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.7.4.tgz#2b713729e5054a1135097b6a67da1b6fe8789267"
-  integrity sha512-4jFMXI1Cu2aXbcXXl8Lr6YubCn6Oc7k9lLsu8v61TZh+1jny2BWmdtvY9zSUlLdGUvcy9DMAWyZEOqjsbeg/wA==
+"@babel/plugin-transform-classes@^7.2.0", "@babel/plugin-transform-classes@^7.9.0", "@babel/plugin-transform-classes@^7.9.2", "@babel/plugin-transform-classes@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz#800597ddb8aefc2c293ed27459c1fcc935a26c2c"
+  integrity sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-define-map" "^7.8.3"
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.2.0", "@babel/plugin-transform-computed-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
+  integrity sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-dotall-regex@^7.2.0", "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.7.tgz#3e9713f1b69f339e87fa796b097d73ded16b937b"
-  integrity sha512-b4in+YlTeE/QmTgrllnb3bHA0HntYvjz8O3Mcbx75UBPJA2xhb5A8nle498VhxSXJHQefjtQxpnLPehDJ4TRlg==
+"@babel/plugin-transform-destructuring@^7.2.0", "@babel/plugin-transform-destructuring@^7.8.3", "@babel/plugin-transform-destructuring@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz#72c97cf5f38604aea3abf3b935b0e17b1db76a50"
+  integrity sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-duplicate-keys@^7.2.0", "@babel/plugin-transform-duplicate-keys@^7.5.0", "@babel/plugin-transform-duplicate-keys@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.7.4.tgz#3d21731a42e3f598a73835299dd0169c3b90ac91"
-  integrity sha512-g1y4/G6xGWMD85Tlft5XedGaZBCIVN+/P0bs6eabmcPP9egFleMAo65OOjlhcz1njpwagyY3t0nsQC9oTFegJA==
+"@babel/plugin-transform-dotall-regex@^7.2.0", "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
+  integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-exponentiation-operator@^7.0.0", "@babel/plugin-transform-exponentiation-operator@^7.2.0", "@babel/plugin-transform-exponentiation-operator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.7.4.tgz#dd30c0191e3a1ba19bcc7e389bdfddc0729d5db9"
-  integrity sha512-MCqiLfCKm6KEA1dglf6Uqq1ElDIZwFuzz1WH5mTf8k2uQSxEJMbOIEh7IZv7uichr7PMfi5YVSrr1vz+ipp7AQ==
+"@babel/plugin-transform-duplicate-keys@^7.2.0", "@babel/plugin-transform-duplicate-keys@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz#8d12df309aa537f272899c565ea1768e286e21f1"
+  integrity sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-flow-strip-types@7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
-  integrity sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q==
+"@babel/plugin-transform-exponentiation-operator@^7.2.0", "@babel/plugin-transform-exponentiation-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz#581a6d7f56970e06bf51560cd64f5e947b70d7b7"
+  integrity sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.4.4", "@babel/plugin-transform-flow-strip-types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.7.4.tgz#cc73f85944782df1d77d80977bc097920a8bf31a"
-  integrity sha512-w9dRNlHY5ElNimyMYy0oQowvQpwt/PRHI0QS98ZJCTZU2bvSnKXo5zEiD5u76FBPigTm8TkqzmnUTg16T7qbkA==
+"@babel/plugin-transform-flow-strip-types@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz#8a3538aa40434e000b8f44a3c5c9ac7229bd2392"
+  integrity sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-flow" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.0.0", "@babel/plugin-transform-for-of@^7.2.0", "@babel/plugin-transform-for-of@^7.4.4", "@babel/plugin-transform-for-of@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.7.4.tgz#248800e3a5e507b1f103d8b4ca998e77c63932bc"
-  integrity sha512-zZ1fD1B8keYtEcKF+M1TROfeHTKnijcVQm0yO/Yu1f7qoDoxEIc/+GX6Go430Bg84eM/xwPFp0+h4EbZg7epAA==
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.10.1", "@babel/plugin-transform-flow-strip-types@^7.4.4":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.10.1.tgz#59eafbff9ae85ec8932d4c16c068654be814ec5e"
+  integrity sha512-i4o0YwiJBIsIx7/liVCZ3Q2WkWr1/Yu39PksBOnh/khW2SwIFsGa5Ze+MSon5KbDfrEHP9NeyefAgvUSXzaEkw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-flow" "^7.10.1"
 
-"@babel/plugin-transform-function-name@^7.0.0", "@babel/plugin-transform-function-name@^7.2.0", "@babel/plugin-transform-function-name@^7.4.4", "@babel/plugin-transform-function-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.4.tgz#75a6d3303d50db638ff8b5385d12451c865025b1"
-  integrity sha512-E/x09TvjHNhsULs2IusN+aJNRV5zKwxu1cpirZyRPw+FyyIKEHPXTsadj48bVpc1R5Qq1B5ZkzumuFLytnbT6g==
+"@babel/plugin-transform-for-of@^7.2.0", "@babel/plugin-transform-for-of@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz#0f260e27d3e29cd1bb3128da5e76c761aa6c108e"
+  integrity sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==
   dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-literals@^7.0.0", "@babel/plugin-transform-literals@^7.2.0", "@babel/plugin-transform-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.7.4.tgz#27fe87d2b5017a2a5a34d1c41a6b9f6a6262643e"
-  integrity sha512-X2MSV7LfJFm4aZfxd0yLVFrEXAgPqYoDG53Br/tCKiKYfX0MjVjQeWPIhPHHsCqzwQANq+FLN786fF5rgLS+gw==
+"@babel/plugin-transform-function-name@^7.2.0", "@babel/plugin-transform-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
+  integrity sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-member-expression-literals@^7.0.0", "@babel/plugin-transform-member-expression-literals@^7.2.0", "@babel/plugin-transform-member-expression-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.7.4.tgz#aee127f2f3339fc34ce5e3055d7ffbf7aa26f19a"
-  integrity sha512-9VMwMO7i69LHTesL0RdGy93JU6a+qOPuvB4F4d0kR0zyVjJRVJRaoaGjhtki6SzQUu8yen/vxPKN6CWnCUw6bA==
+"@babel/plugin-transform-literals@^7.2.0", "@babel/plugin-transform-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz#aef239823d91994ec7b68e55193525d76dbd5dc1"
+  integrity sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-modules-amd@^7.2.0", "@babel/plugin-transform-modules-amd@^7.5.0", "@babel/plugin-transform-modules-amd@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.7.5.tgz#39e0fb717224b59475b306402bb8eedab01e729c"
-  integrity sha512-CT57FG4A2ZUNU1v+HdvDSDrjNWBrtCmSH6YbbgN3Lrf0Di/q/lWRxZrE72p3+HCCz9UjfZOEBdphgC0nzOS6DQ==
+"@babel/plugin-transform-member-expression-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz#963fed4b620ac7cbf6029c755424029fa3a40410"
+  integrity sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.2.0", "@babel/plugin-transform-modules-commonjs@^7.4.4", "@babel/plugin-transform-modules-commonjs@^7.5.0", "@babel/plugin-transform-modules-commonjs@^7.6.0", "@babel/plugin-transform-modules-commonjs@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.5.tgz#1d27f5eb0bcf7543e774950e5b2fa782e637b345"
-  integrity sha512-9Cq4zTFExwFhQI6MT1aFxgqhIsMWQWDVwOgLzl7PTWJHsNaqFvklAU+Oz6AQLAS0dJKTwZSOCo20INwktxpi3Q==
+"@babel/plugin-transform-modules-amd@^7.2.0", "@babel/plugin-transform-modules-amd@^7.7.5", "@babel/plugin-transform-modules-amd@^7.9.0", "@babel/plugin-transform-modules-amd@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.6.tgz#8539ec42c153d12ea3836e0e3ac30d5aae7b258e"
+  integrity sha512-zoT0kgC3EixAyIAU+9vfaUVKTv9IxBDSabgHoUCBP6FqEJ+iNiN7ip7NBKcYqbfUDfuC2mFCbM7vbu4qJgOnDw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-simple-access" "^7.7.4"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.2.0", "@babel/plugin-transform-modules-systemjs@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz#cd98152339d3e763dfe838b7d4273edaf520bb30"
-  integrity sha512-y2c96hmcsUi6LrMqvmNDPBBiGCiQu0aYqpHatVVu6kD4mFEXKjyNxd/drc18XXAf9dv7UXjrZwBVmTTGaGP8iw==
+"@babel/plugin-transform-modules-commonjs@^7.2.0", "@babel/plugin-transform-modules-commonjs@^7.4.4", "@babel/plugin-transform-modules-commonjs@^7.9.0", "@babel/plugin-transform-modules-commonjs@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.6.tgz#64b7474a4279ee588cacd1906695ca721687c277"
+  integrity sha512-7H25fSlLcn+iYimmsNe3uK1at79IE6SKW9q0/QeEHTMC9MdOZ+4bA+T1VFB5fgOqBWoqlifXRzYD0JPdmIrgSQ==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.2.0", "@babel/plugin-transform-modules-umd@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.4.tgz#1027c355a118de0aae9fee00ad7813c584d9061f"
-  integrity sha512-u2B8TIi0qZI4j8q4C51ktfO7E3cQ0qnaXFI1/OXITordD40tt17g/sXqgNNCcMTcBFKrUPcGDx+TBJuZxLx7tw==
+"@babel/plugin-transform-modules-systemjs@^7.2.0", "@babel/plugin-transform-modules-systemjs@^7.9.0", "@babel/plugin-transform-modules-systemjs@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz#207f1461c78a231d5337a92140e52422510d81a4"
+  integrity sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.4.5", "@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
-  integrity sha512-jBUkiqLKvUWpv9GLSuHUFYdmHg0ujC1JEYoZUfeOOfNydZXp1sXObgyPatpcwjWgsdBGsagWW0cdJpX/DO2jMw==
+"@babel/plugin-transform-modules-umd@^7.2.0", "@babel/plugin-transform-modules-umd@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz#e909acae276fec280f9b821a5f38e1f08b480697"
+  integrity sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-new-target@^7.0.0", "@babel/plugin-transform-new-target@^7.4.4", "@babel/plugin-transform-new-target@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.7.4.tgz#4a0753d2d60639437be07b592a9e58ee00720167"
-  integrity sha512-CnPRiNtOG1vRodnsyGX37bHQleHE14B9dnnlgSeEs3ek3fHN1A1SScglTCg1sfbe7sRQ2BUcpgpTpWSfMKz3gg==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
+  integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
 
-"@babel/plugin-transform-object-assign@^7.0.0", "@babel/plugin-transform-object-assign@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.7.4.tgz#a31b70c434a00a078b2d4d10dbd59992fa70afca"
-  integrity sha512-0TpeUlnhQDwKxPLTIckdaWt46L2s61c/5w5snw1OUod5ehOJywZD98Ha3dFHVjeqkfOFtOTH7cqxddjxUuvcmg==
+"@babel/plugin-transform-new-target@^7.0.0", "@babel/plugin-transform-new-target@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz#60cc2ae66d85c95ab540eb34babb6434d4c70c43"
+  integrity sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.2.0", "@babel/plugin-transform-object-super@^7.5.5", "@babel/plugin-transform-object-super@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.7.4.tgz#48488937a2d586c0148451bf51af9d7dda567262"
-  integrity sha512-ho+dAEhC2aRnff2JCA0SAK7V2R62zJd/7dmtoe7MHcso4C2mS+vZjn1Pb1pCVZvJs1mgsvv5+7sT+m3Bysb6eg==
+"@babel/plugin-transform-object-assign@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.8.3.tgz#dc3b8dd50ef03837868a37b7df791f64f288538e"
+  integrity sha512-i3LuN8tPDqUCRFu3dkzF2r1Nx0jp4scxtm7JxtIqI9he9Vk20YD+/zshdzR9JLsoBMlJlNR82a62vQExNEVx/Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.2.0", "@babel/plugin-transform-parameters@^7.4.4", "@babel/plugin-transform-parameters@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.7.tgz#7a884b2460164dc5f194f668332736584c760007"
-  integrity sha512-OhGSrf9ZBrr1fw84oFXj5hgi8Nmg+E2w5L7NhnG0lPvpDtqd7dbyilM2/vR8CKbJ907RyxPh2kj6sBCSSfI9Ew==
+"@babel/plugin-transform-object-super@^7.2.0", "@babel/plugin-transform-object-super@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
+  integrity sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==
   dependencies:
-    "@babel/helper-call-delegate" "^7.7.4"
-    "@babel/helper-get-function-arity" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.3"
 
-"@babel/plugin-transform-property-literals@^7.0.0", "@babel/plugin-transform-property-literals@^7.2.0", "@babel/plugin-transform-property-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.7.4.tgz#2388d6505ef89b266103f450f9167e6bd73f98c2"
-  integrity sha512-MatJhlC4iHsIskWYyawl53KuHrt+kALSADLQQ/HkhTjX954fkxIEh4q5slL4oRAnsm/eDoZ4q0CIZpcqBuxhJQ==
+"@babel/plugin-transform-parameters@^7.2.0", "@babel/plugin-transform-parameters@^7.8.7", "@babel/plugin-transform-parameters@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz#173b265746f5e15b2afe527eeda65b73623a0795"
+  integrity sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.7.4.tgz#499cf732a21ffd62cc4b0016e27c3906097f8982"
-  integrity sha512-U6XkHZ8RnmeEb8jBUOpeo6oFka5RhLgxAVvK4/fBbwoYlsHQYLb8I37ymTPDVsrWjqb94+hueuWQA/1OAA4rAQ==
+"@babel/plugin-transform-property-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
+  integrity sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-display-name@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
-  integrity sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A==
+"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.6.3", "@babel/plugin-transform-react-constant-elements@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz#a75abc936a3819edec42d3386d9f1c93f28d9d9e"
+  integrity sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.7.4.tgz#9f2b80b14ebc97eef4a9b29b612c58ed9c0d10dd"
-  integrity sha512-sBbIvqYkthai0X0vkD2xsAwluBp+LtNHH+/V4a5ydifmTtb8KOVOlrMIk/MYmIc4uTYDnjZUHQildYNo36SRJw==
+"@babel/plugin-transform-react-display-name@7.8.3", "@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
+  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.7.4.tgz#81b8fbfd14b2215e8f1c2c3adfba266127b0231c"
-  integrity sha512-PWYjSfqrO273mc1pKCRTIJXyqfc9vWYBax88yIhQb+bpw3XChVC7VWS4VwRVs63wFHKxizvGSd00XEr+YB9Q2A==
+"@babel/plugin-transform-react-jsx-development@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
+  integrity sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.2.0", "@babel/plugin-transform-react-jsx-source@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.7.4.tgz#8994b1bf6014b133f5a46d3b7d1ee5f5e3e72c10"
-  integrity sha512-5ZU9FnPhqtHsOXxutRtXZAzoEJwDaP32QcobbMP1/qt7NYcsCNK8XgzJcJfoEr/ZnzVvUNInNjIW22Z6I8p9mg==
+"@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
+  integrity sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.3.0", "@babel/plugin-transform-react-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da"
-  integrity sha512-LixU4BS95ZTEAZdPaIuyg/k8FiiqN9laQ0dMHB4MlpydHY53uQdWCUrwjLr5o6ilS6fAgZey4Q14XBjl5tL6xw==
+"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
+  integrity sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==
   dependencies:
-    "@babel/helper-builder-react-jsx" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.5.tgz#3a8757ee1a2780f390e89f246065ecf59c26fce9"
-  integrity sha512-/8I8tPvX2FkuEyWbjRCt4qTAgZK0DVy8QRguhA524UH48RfGJy94On2ri+dCuwOpcerPRl9O4ebQkRcVzIaGBw==
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.3.0", "@babel/plugin-transform-react-jsx@^7.9.1", "@babel/plugin-transform-react-jsx@^7.9.4":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
+  integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
   dependencies:
-    regenerator-transform "^0.14.0"
+    "@babel/helper-builder-react-jsx" "^7.9.0"
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/plugin-transform-reserved-words@^7.2.0", "@babel/plugin-transform-reserved-words@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.7.4.tgz#6a7cf123ad175bb5c69aec8f6f0770387ed3f1eb"
-  integrity sha512-OrPiUB5s5XvkCO1lS7D8ZtHcswIC57j62acAnJZKqGGnHP+TIc/ljQSrgdX/QyOTdEK5COAhuc820Hi1q2UgLQ==
+"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz#5e46a0dca2bee1ad8285eb0527e6abc9c37672f8"
+  integrity sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    regenerator-transform "^0.14.2"
 
-"@babel/plugin-transform-runtime@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.0.tgz#85a3cce402b28586138e368fce20ab3019b9713e"
-  integrity sha512-Da8tMf7uClzwUm/pnJ1S93m/aRXmoYNDD7TkHua8xBDdaAs54uZpTWvEt6NGwmoVMb9mZbntfTqmG2oSzN/7Vg==
+"@babel/plugin-transform-reserved-words@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
+  integrity sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-transform-runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.0.tgz#45468c0ae74cc13204e1d3b1f4ce6ee83258af0b"
+  integrity sha512-pUu9VSf3kI1OqbWINQ7MaugnitRss1z533436waNXp+0N3ur3zfut37sXiQMxkuCF4VUjwZucen/quskCh7NHw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.2.0", "@babel/plugin-transform-runtime@^7.6.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.4.tgz#51fe458c1c1fa98a8b07934f4ed38b6cd62177a6"
-  integrity sha512-O8kSkS5fP74Ad/8pfsCMGa8sBRdLxYoSReaARRNSz3FbFQj3z/QUvoUmJ28gn9BO93YfnXc3j+Xyaqe8cKDNBQ==
+"@babel/plugin-transform-runtime@^7.2.0", "@babel/plugin-transform-runtime@^7.9.0", "@babel/plugin-transform-runtime@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.6.tgz#3ba804438ad0d880a17bca5eaa0cdf1edeedb2fd"
+  integrity sha512-qcmiECD0mYOjOIt8YHNsAP1SxPooC/rDmfmiSK9BNY72EitdSc7l44WTEklaWuFtbOEBjNhWWyph/kOImbNJ4w==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
-  integrity sha512-q+suddWRfIcnyG5YiDP58sT65AJDZSUhXQDZE3r04AuqD6d/XLaQPPXSBzP2zGerkgBivqtQm9XKGLuHqBID6Q==
+"@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
+  integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-spread@^7.0.0", "@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.7.4.tgz#aa673b356fe6b7e70d69b6e33a17fef641008578"
-  integrity sha512-8OSs0FLe5/80cndziPlg4R0K6HcWSM0zyNhHhLsmw/Nc5MaA49cAsnoJ/t/YZf8qkG7fD+UjTRaApVDB526d7Q==
+"@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz#9c8ffe8170fdfb88b114ecb920b82fb6e95fe5e8"
+  integrity sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0", "@babel/plugin-transform-sticky-regex@^7.2.0", "@babel/plugin-transform-sticky-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.7.4.tgz#ffb68c05090c30732076b1285dc1401b404a123c"
-  integrity sha512-Ls2NASyL6qtVe1H1hXts9yuEeONV2TJZmplLONkMPUG158CtmnrzW5Q5teibM5UVOFjG0D3IC5mzXR6pPpUY7A==
+"@babel/plugin-transform-sticky-regex@^7.2.0", "@babel/plugin-transform-sticky-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz#be7a1290f81dae767475452199e1f76d6175b100"
+  integrity sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
 
-"@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.2.0", "@babel/plugin-transform-template-literals@^7.4.4", "@babel/plugin-transform-template-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz#1eb6411736dd3fe87dbd20cc6668e5121c17d604"
-  integrity sha512-sA+KxLwF3QwGj5abMHkHgshp9+rRz+oY9uoRil4CyLtgEuE/88dpkeWgNk5qKVsJE9iSfly3nvHapdRiIS2wnQ==
+"@babel/plugin-transform-template-literals@^7.2.0", "@babel/plugin-transform-template-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz#7bfa4732b455ea6a43130adc0ba767ec0e402a80"
+  integrity sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-typeof-symbol@^7.2.0", "@babel/plugin-transform-typeof-symbol@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.7.4.tgz#3174626214f2d6de322882e498a38e8371b2140e"
-  integrity sha512-KQPUQ/7mqe2m0B8VecdyaW5XcQYaePyl9R7IsKd+irzj6jvbhoGnRE+M0aNkyAzI07VfUQ9266L5xMARitV3wg==
+"@babel/plugin-transform-typeof-symbol@^7.2.0", "@babel/plugin-transform-typeof-symbol@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz#ede4062315ce0aaf8a657a920858f1a2f35fc412"
+  integrity sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-typescript@^7.0.0", "@babel/plugin-transform-typescript@^7.6.0", "@babel/plugin-transform-typescript@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.4.tgz#2974fd05f4e85c695acaf497f432342de9fc0636"
-  integrity sha512-X8e3tcPEKnwwPVG+vP/vSqEShkwODOEeyQGod82qrIuidwIrfnsGn11qPM1jBLF4MqguTXXYzm58d0dY+/wdpg==
+"@babel/plugin-transform-typescript@^7.7.4", "@babel/plugin-transform-typescript@^7.9.0":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.6.tgz#2248971416a506fc78278fc0c0ea3179224af1e9"
+  integrity sha512-8OvsRdvpt3Iesf2qsAn+YdlwAJD7zJ+vhFZmDCa4b8dTp7MmHtKk5FF2mCsGxjZwuwsy/yIIay/nLmxST1ctVQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-typescript" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.9.6"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-typescript" "^7.8.3"
 
 "@babel/plugin-transform-typescript@~7.4.0":
   version "7.4.5"
@@ -1213,21 +1408,21 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.2.0"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0", "@babel/plugin-transform-unicode-regex@^7.2.0", "@babel/plugin-transform-unicode-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
-  integrity sha512-N77UUIV+WCvE+5yHw+oks3m18/umd7y392Zv7mYTpFqHtkpcc+QUz+gLJNTWVlWROIWeLqY0f3OjZxV5TcXnRw==
+"@babel/plugin-transform-unicode-regex@^7.2.0", "@babel/plugin-transform-unicode-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
+  integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/polyfill@^7.0.0", "@babel/polyfill@^7.2.5", "@babel/polyfill@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3"
-  integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ==
+"@babel/polyfill@^7.2.5", "@babel/polyfill@^7.8.3", "@babel/polyfill@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.8.7.tgz#151ec24c7135481336168c3bd8b8bf0cf91c032f"
+  integrity sha512-LeSfP9bNZH2UOZgcGcZ0PIHUt1ZuHub1L3CVmEyqLxCeDLm4C5Gi8jRH8ZX2PNpDhQCo0z6y/+DIs2JlliXW8w==
   dependencies:
     core-js "^2.6.5"
-    regenerator-runtime "^0.13.2"
+    regenerator-runtime "^0.13.4"
 
 "@babel/preset-env@7.2.0":
   version "7.2.0"
@@ -1276,190 +1471,164 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
-"@babel/preset-env@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
-  integrity sha512-GMZQka/+INwsMz1A5UEql8tG015h5j/qjptpKY2gJ7giy8ohzU710YciJB5rcKsWGWHiW3RUnHib0E5/m3Tp3A==
-  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-dynamic-import" "^7.5.0"
-    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-    "@babel/plugin-syntax-dynamic-import" "^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.5.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.5.5"
-    "@babel/plugin-transform-classes" "^7.5.5"
-    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.5.0"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.4.4"
-    "@babel/plugin-transform-function-name" "^7.4.4"
-    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
-    "@babel/plugin-transform-modules-umd" "^7.2.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
-    "@babel/plugin-transform-new-target" "^7.4.4"
-    "@babel/plugin-transform-object-super" "^7.5.5"
-    "@babel/plugin-transform-parameters" "^7.4.4"
-    "@babel/plugin-transform-property-literals" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.4.5"
-    "@babel/plugin-transform-reserved-words" "^7.2.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.4.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.4.4"
-    "@babel/types" "^7.5.5"
-    browserslist "^4.6.0"
-    core-js-compat "^3.1.1"
+"@babel/preset-env@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8"
+  integrity sha512-712DeRXT6dyKAM/FMbQTV/FvRCms2hPCx+3weRjZ8iQVQWZejWWk1wwG6ViWMyqb/ouBbGOl5b6aCk0+j1NmsQ==
+  dependencies:
+    "@babel/compat-data" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.9.0"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.8.3"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.9.0"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
+    "@babel/plugin-transform-modules-umd" "^7.9.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.8.7"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.7"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.9.0"
+    browserslist "^4.9.1"
+    core-js-compat "^3.6.2"
     invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.4", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.5.5", "@babel/preset-env@^7.9.0", "@babel/preset-env@^7.9.5", "@babel/preset-env@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.6.tgz#df063b276c6455ec6fcfc6e53aacc38da9b0aea6"
+  integrity sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==
+  dependencies:
+    "@babel/compat-data" "^7.9.6"
+    "@babel/helper-compilation-targets" "^7.9.6"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.6"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.9.5"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.9.5"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.9.0"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.6"
+    "@babel/plugin-transform-modules-umd" "^7.9.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.9.5"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.7"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.9.6"
+    browserslist "^4.11.1"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/preset-env@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
-  integrity sha512-1efzxFv/TcPsNXlRhMzRnkBFMeIqBBgzwmZwlFDw5Ubj0AGLeufxugirwZmkkX/ayi3owsSqoQ4fw8LkfK9SYg==
-  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-dynamic-import" "^7.5.0"
-    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-    "@babel/plugin-syntax-dynamic-import" "^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.5.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.6.0"
-    "@babel/plugin-transform-classes" "^7.5.5"
-    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.6.0"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.4.4"
-    "@babel/plugin-transform-function-name" "^7.4.4"
-    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
-    "@babel/plugin-transform-modules-umd" "^7.2.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.0"
-    "@babel/plugin-transform-new-target" "^7.4.4"
-    "@babel/plugin-transform-object-super" "^7.5.5"
-    "@babel/plugin-transform-parameters" "^7.4.4"
-    "@babel/plugin-transform-property-literals" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.4.5"
-    "@babel/plugin-transform-reserved-words" "^7.2.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.4.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.4.4"
-    "@babel/types" "^7.6.0"
-    browserslist "^4.6.0"
-    core-js-compat "^3.1.1"
-    invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
-    semver "^5.5.0"
-
-"@babel/preset-env@^7.0.0", "@babel/preset-env@^7.1.6", "@babel/preset-env@^7.3.1", "@babel/preset-env@^7.4.1", "@babel/preset-env@^7.4.4", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.7.0":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
-  integrity sha512-pCu0hrSSDVI7kCVUOdcMNQEbOPJ52E+LrQ14sN8uL2ALfSqePZQlKrOy+tM4uhEdYlCHi4imr8Zz2cZe9oSdIg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.7.4"
-    "@babel/plugin-proposal-dynamic-import" "^7.7.4"
-    "@babel/plugin-proposal-json-strings" "^7.7.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.7.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.7.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.7.7"
-    "@babel/plugin-syntax-async-generators" "^7.7.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.7.4"
-    "@babel/plugin-syntax-json-strings" "^7.7.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
-    "@babel/plugin-syntax-top-level-await" "^7.7.4"
-    "@babel/plugin-transform-arrow-functions" "^7.7.4"
-    "@babel/plugin-transform-async-to-generator" "^7.7.4"
-    "@babel/plugin-transform-block-scoped-functions" "^7.7.4"
-    "@babel/plugin-transform-block-scoping" "^7.7.4"
-    "@babel/plugin-transform-classes" "^7.7.4"
-    "@babel/plugin-transform-computed-properties" "^7.7.4"
-    "@babel/plugin-transform-destructuring" "^7.7.4"
-    "@babel/plugin-transform-dotall-regex" "^7.7.7"
-    "@babel/plugin-transform-duplicate-keys" "^7.7.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.7.4"
-    "@babel/plugin-transform-for-of" "^7.7.4"
-    "@babel/plugin-transform-function-name" "^7.7.4"
-    "@babel/plugin-transform-literals" "^7.7.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.7.4"
-    "@babel/plugin-transform-modules-amd" "^7.7.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.7.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.7.4"
-    "@babel/plugin-transform-modules-umd" "^7.7.4"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.7.4"
-    "@babel/plugin-transform-new-target" "^7.7.4"
-    "@babel/plugin-transform-object-super" "^7.7.4"
-    "@babel/plugin-transform-parameters" "^7.7.7"
-    "@babel/plugin-transform-property-literals" "^7.7.4"
-    "@babel/plugin-transform-regenerator" "^7.7.5"
-    "@babel/plugin-transform-reserved-words" "^7.7.4"
-    "@babel/plugin-transform-shorthand-properties" "^7.7.4"
-    "@babel/plugin-transform-spread" "^7.7.4"
-    "@babel/plugin-transform-sticky-regex" "^7.7.4"
-    "@babel/plugin-transform-template-literals" "^7.7.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.7.4"
-    "@babel/plugin-transform-unicode-regex" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    browserslist "^4.6.0"
-    core-js-compat "^3.6.0"
-    invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
-    semver "^5.5.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"
-  integrity sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==
+"@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"
+  integrity sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-flow-strip-types" "^7.0.0"
 
 "@babel/preset-flow@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.7.4.tgz#99c1349b6fd7132783196de181e6b32d0949427e"
-  integrity sha512-6LbUqcHD8BcRtXMOp5bc5nJeU8RlKh6q5U8TgZeCrf9ebBdW8Wyy5ujAUnbJfmzQ56Kkq5XtwErC/5+5RHyFYA==
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.10.1.tgz#29498ec23baf9aa6dae50c568ceba09d71692b82"
+  integrity sha512-FuQsibb5PaX07fF1XUO5gjjxdEZbcJv8+ugPDaeFEsBIvUTib8hCtEJow/c2F0jq9ZUjpHCQ8IQKNHRvKE1kJQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-transform-flow-strip-types" "^7.10.1"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
+  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.7.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
 
 "@babel/preset-react@7.0.0":
   version "7.0.0"
@@ -1472,37 +1641,42 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/preset-react@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
-  integrity sha512-j+vZtg0/8pQr1H8wKoaJyGL2IEk3rG/GIvua7Sec7meXVIvGycihlGMx5xcU00kqCJbwzHs18xTu3YfREOqQ+g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.7.4"
-    "@babel/plugin-transform-react-jsx" "^7.7.4"
-    "@babel/plugin-transform-react-jsx-self" "^7.7.4"
-    "@babel/plugin-transform-react-jsx-source" "^7.7.4"
-
-"@babel/preset-typescript@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
-  integrity sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.6.0"
-
-"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3", "@babel/preset-typescript@^7.6.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.7.4.tgz#780059a78e6fa7f7a4c87f027292a86b31ce080a"
-  integrity sha512-rqrjxfdiHPsnuPur0jKrIIGQCIgoTWMTjlbWE69G4QJ6TIOVnnRnIJhUxNTL/VwDmEAVX08Tq3B1nirer5341w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.7.4"
-
-"@babel/register@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.7.4.tgz#45a4956471a9df3b012b747f5781cc084ee8f128"
-  integrity sha512-/fmONZqL6ZMl9KJUYajetCrID6m0xmL4odX7v+Xvoxcv0DdbP/oO0TWIeLUCHqczQ6L6njDMqmqHFy2cp3FFsA==
+"@babel/preset-react@7.9.1":
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.1.tgz#b346403c36d58c3bb544148272a0cefd9c28677a"
+  integrity sha512-aJBYF23MPj0RNdp/4bHnAP0NVqqZRr9kl0NAOP4nJCex6OYVio59+dnQzsAWFuogdLyeaKA1hmfUIVZkY5J+TQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.9.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
+
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.7.0", "@babel/preset-react@^7.7.4", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
+  integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.9.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
+
+"@babel/preset-typescript@7.9.0", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3", "@babel/preset-typescript@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz#87705a72b1f0d59df21c179f7c3d2ef4b16ce192"
+  integrity sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-typescript" "^7.9.0"
+
+"@babel/register@^7.0.0", "@babel/register@^7.8.3":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.9.0.tgz#02464ede57548bddbb5e9f705d263b7c3f43d48b"
+  integrity sha512-Tv8Zyi2J2VRR8g7pC5gTeIN8Ihultbmk0ocyNz8H2nEZbmhp1N6q0A1UGsQbDvGP/sNinQKUHf3SqXwqjtFv4Q==
   dependencies:
     find-cache-dir "^2.0.0"
     lodash "^4.17.13"
@@ -1510,67 +1684,79 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
-  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
+"@babel/runtime-corejs3@^7.7.4", "@babel/runtime-corejs3@^7.8.3":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.6.tgz#67aded13fffbbc2cb93247388cf84d77a4be9a71"
+  integrity sha512-6toWAfaALQjt3KMZQc6fABqZwUDDuWzz+cAfPhqyEnzxvdWOAkjwPNxgF8xlmo7OWLsSjaKjsskpKHRLaMArOA==
   dependencies:
-    regenerator-runtime "^0.13.2"
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.0", "@babel/runtime@^7.7.2":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b"
-  integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw==
+"@babel/runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.0.tgz#337eda67401f5b066a6f205a3113d4ac18ba495b"
+  integrity sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==
   dependencies:
-    regenerator-runtime "^0.13.2"
+    regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0", "@babel/template@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
-  integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.0", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    regenerator-runtime "^0.13.4"
 
-"@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.5.5", "@babel/traverse@^7.6.0", "@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3", "@babel/traverse@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
-  integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==
+"@babel/template@7.8.6", "@babel/template@^7.1.2", "@babel/template@^7.3.3", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.7.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
+  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
   dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.4"
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.3.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.6.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.9.0", "@babel/traverse@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
+  integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.6"
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.9.6"
+    "@babel/types" "^7.9.6"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3", "@babel/types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
-  integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.3.4", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3", "@babel/types@^7.7.0", "@babel/types@^7.7.2", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5", "@babel/types@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
+  integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
   dependencies:
-    esutils "^2.0.2"
+    "@babel/helper-validator-identifier" "^7.9.5"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.6.1":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.2.tgz#30283be31cad0dbf6fb00bd40641ca0ea675172d"
+  integrity sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.1"
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@base2/pretty-print-object@^1.0.0":
+"@base2/pretty-print-object@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
   integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==
 
-"@chromaui/localtunnel@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@chromaui/localtunnel/-/localtunnel-1.10.1.tgz#34da7dab7055a16b1b9034a9eb7e3054ebec4b98"
-  integrity sha512-LXhAogVc9SOQ45+mtk2mhcQxW4bE8aadfx9WbDzuDlBXcDgDMFBaxOmd5VYsPxQYA+cLFkKeuKOpROzsZSEySA==
-  dependencies:
-    axios "0.19.0"
-    debug "^3.0.1"
-    openurl "1.1.1"
-    yargs "6.6.0"
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
 "@chromaui/localtunnel@2.0.1":
   version "2.0.1"
@@ -1583,9 +1769,9 @@
     yargs "^13.3.0"
 
 "@cnakazawa/watch@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
-  integrity sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
   dependencies:
     exec-sh "^0.3.2"
     minimist "^1.2.0"
@@ -1651,6 +1837,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@csstools/normalize.css@^10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
+  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
+
 "@csstools/normalize.css@^9.0.1":
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
@@ -1666,17 +1857,40 @@
     date-fns "^1.27.2"
     figures "^1.7.0"
 
-"@cypress/webpack-preprocessor@^4.1.0":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@cypress/webpack-preprocessor/-/webpack-preprocessor-4.1.1.tgz#3c0b5b8de6eaac605dac3b1f1c3f5916c1c6eaea"
-  integrity sha512-SfzDqOvWBSlfGRm8ak/XHUXAnndwHU2qJIRr1LIC7j2UqWcZoJ+286CuNloJbkwfyEAO6tQggLd4E/WHUAcKZQ==
+"@cypress/request@2.88.5":
+  version "2.88.5"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
+  integrity sha512-TzEC1XMi1hJkywWpRfD2clreTa/Z+lOrXDCxxBTBPEcY5azdPi56A6Xw+O4tWJnaJH3iIE7G5aDXZC6JgRZLcA==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+"@cypress/webpack-preprocessor@^5.1.2":
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/@cypress/webpack-preprocessor/-/webpack-preprocessor-5.4.1.tgz#eb58f6cd02932a95653c1a674cfd769da2409806"
+  integrity sha512-1E2BdVVXQ4wDQ7f3mXCvS9xmfTVwEoT3oqKhjAr1iNlTJpBq10Z0VNBZd3VZ3nmCTFwTuUvs735QGnRE1gQ1BA==
   dependencies:
     bluebird "3.7.1"
     debug "4.1.1"
-  optionalDependencies:
-    "@babel/core" "^7.0.1"
-    "@babel/preset-env" "^7.0.0"
-    babel-loader "^8.0.2"
+    lodash "4.17.15"
 
 "@cypress/xvfb@1.2.4":
   version "1.2.4"
@@ -1699,12 +1913,30 @@
   resolved "https://registry.yarnpkg.com/@egoist/vue-to-react/-/vue-to-react-1.1.0.tgz#83c884b8608e8ee62e76c03e91ce9c26063a91ad"
   integrity sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==
 
-"@ember/edition-utils@^1.1.1":
+"@ember-data/rfc395-data@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@ember-data/rfc395-data/-/rfc395-data-0.0.4.tgz#ecb86efdf5d7733a76ff14ea651a1b0ed1f8a843"
+  integrity sha512-tGRdvgC9/QMQSuSuJV45xoyhI0Pzjm7A9o/MVVA3HakXIImJbbzx/k/6dO9CUEQXIyS2y0fW6C1XaYOG7rY0FQ==
+
+"@ember/edition-utils@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ember/edition-utils/-/edition-utils-1.2.0.tgz#a039f542dc14c8e8299c81cd5abba95e2459cfa6"
   integrity sha512-VmVq/8saCaPdesQmftPqbFtxJWrzxNGSQ+e8x8LLe3Hjm36pJ04Q8LeORGZkAeOhldoUX9seLGmSaHeXkIqoog==
 
-"@ember/test-helpers@^1.5.0":
+"@ember/optional-features@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ember/optional-features/-/optional-features-1.3.0.tgz#d7da860417b85a56cec88419f30da5ee1dde2756"
+  integrity sha512-Lrfojy4xKwTX+J4EAylmxZY2TO6bQtP4Lg5C8/z2priVqiT0X5fVB1+4WQCJbRBetctO1lMDnqjmhWCVKB8bmQ==
+  dependencies:
+    chalk "^3.0.0"
+    ember-cli-version-checker "^3.1.3"
+    glob "^7.1.6"
+    inquirer "^7.0.1"
+    mkdirp "^0.5.1"
+    silent-error "^1.1.1"
+    util.promisify "^1.0.0"
+
+"@ember/test-helpers@^1.7.0":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-1.7.1.tgz#cc22a954b3b46856518f034bd492a74e0482389f"
   integrity sha512-+ioumnanSRJzZ0ZH30FIkB0r41UhVyuWQ9R9Yp1phDWJQDLumxg+25WDr40relwcH6z0Cn6LIEzeTVujO/0Rww==
@@ -1716,83 +1948,83 @@
     ember-cli-htmlbars-inline-precompile "^2.1.0"
     ember-test-waiters "^1.1.1"
 
-"@emotion/cache@^10.0.17", "@emotion/cache@^10.0.9":
-  version "10.0.19"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
-  integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
+"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
   dependencies:
-    "@emotion/sheet" "0.9.3"
-    "@emotion/stylis" "0.8.4"
-    "@emotion/utils" "0.11.2"
-    "@emotion/weak-memoize" "0.2.4"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
 
 "@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
-  version "10.0.22"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
-  integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==
+  version "10.0.28"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
+  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.17"
-    "@emotion/css" "^10.0.22"
-    "@emotion/serialize" "^0.11.12"
-    "@emotion/sheet" "0.9.3"
-    "@emotion/utils" "0.11.2"
-
-"@emotion/css@^10.0.22", "@emotion/css@^10.0.9":
-  version "10.0.22"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793"
-  integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==
-  dependencies:
-    "@emotion/serialize" "^0.11.12"
-    "@emotion/utils" "0.11.2"
-    babel-plugin-emotion "^10.0.22"
-
-"@emotion/hash@0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
-  integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
-  integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
   dependencies:
-    "@emotion/memoize" "0.7.3"
+    "@emotion/memoize" "0.7.4"
 
-"@emotion/memoize@0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
-  integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
 "@emotion/native@^10.0.14":
-  version "10.0.22"
-  resolved "https://registry.yarnpkg.com/@emotion/native/-/native-10.0.22.tgz#db1495b4bb46263734d9a737e5a4c8017211eb14"
-  integrity sha512-4Hlb2KSVGTqwQjHIgojdYUPlf660MpVS8kh77EcrOe/MUmKtqNvZVFp/MAdejfX/c0RyzmiZq19WdPQLaWm/LQ==
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/native/-/native-10.0.27.tgz#67c2c0ceeeed873c849c611d9a6497a006d43a8f"
+  integrity sha512-3qxR2XFizGfABKKbX9kAYc0PHhKuCEuyxshoq3TaMEbi9asWHdQVChg32ULpblm4XAf9oxaitAU7J9SfdwFxtw==
   dependencies:
-    "@emotion/primitives-core" "10.0.22"
+    "@emotion/primitives-core" "10.0.27"
 
-"@emotion/primitives-core@10.0.22":
-  version "10.0.22"
-  resolved "https://registry.yarnpkg.com/@emotion/primitives-core/-/primitives-core-10.0.22.tgz#a2b2e49cd4762337251ade33e3056ff53216ee6f"
-  integrity sha512-T2zPYmOabfm2DzG6LMcNRfBSFyBGwa5yHaM5pGhFpwufd7PiSirI7LuyUpFNQyHRn3XvgfSPIWynRRWOKduM6g==
+"@emotion/primitives-core@10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/primitives-core/-/primitives-core-10.0.27.tgz#7a5fae07fe06a046ced597f5c0048f22d5c45842"
+  integrity sha512-fRBEDNPSFFOrBJ0OcheuElayrNTNdLF9DzMxtL0sFgsCFvvadlzwJHhJMSwEJuxwARm9GhVLr1p8G8JGkK98lQ==
   dependencies:
     css-to-react-native "^2.2.1"
 
-"@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14":
-  version "0.11.14"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
-  integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
   dependencies:
-    "@emotion/hash" "0.7.3"
-    "@emotion/memoize" "0.7.3"
-    "@emotion/unitless" "0.7.4"
-    "@emotion/utils" "0.11.2"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
-"@emotion/sheet@0.9.3":
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
-  integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
 "@emotion/snapshot-serializer@^0.8.2":
   version "0.8.2"
@@ -1802,43 +2034,43 @@
     chalk "^2.4.1"
     css "^2.2.1"
 
-"@emotion/styled-base@^10.0.23":
-  version "10.0.24"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
-  integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==
+"@emotion/styled-base@^10.0.27":
+  version "10.0.31"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@emotion/is-prop-valid" "0.8.5"
-    "@emotion/serialize" "^0.11.14"
-    "@emotion/utils" "0.11.2"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
 
 "@emotion/styled@^10.0.17":
-  version "10.0.23"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
-  integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
   dependencies:
-    "@emotion/styled-base" "^10.0.23"
-    babel-plugin-emotion "^10.0.23"
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
 
-"@emotion/stylis@0.8.4":
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
-  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
-  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/utils@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
-  integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
-  integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
 "@evocateur/libnpmaccess@^3.1.2":
   version "3.1.2"
@@ -1914,425 +2146,39 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
-"@expo/build-tools@0.1.0-alpha.7":
-  version "0.1.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@expo/build-tools/-/build-tools-0.1.0-alpha.7.tgz#eca466de72a116bb32ab64e3c51bda37d36f212c"
-  integrity sha512-cS4ZxDMDi4HDau0ugXjGEUyKFD5D8WDdLAhs+R0MNG/cJcnDEAdefsMg67PNaJ9Z7OnSelmJOdEurYMcRedafw==
-  dependencies:
-    "@expo/spawn-async" "^1.5.0"
-    "@hapi/boom" "^7.4.3"
-    "@hapi/joi" "^16.1.2"
-    "@types/bunyan" "^1.8.6"
-    "@types/hapi__joi" "^15.0.4"
-    bunyan "^1.8.12"
-    envsub "^3.0.9"
-    fs-extra "^8.1.0"
-    got "^9.6.0"
-    lodash "^4.17.15"
-    node-forge "^0.9.1"
-    plist "^3.0.1"
-    uuid "^3.3.3"
-
-"@expo/bunyan@3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@expo/bunyan/-/bunyan-3.0.2.tgz#775680bd479a8b79ada4a5676936a58eef1579c9"
-  integrity sha512-fQRc4+RG+rEw1IdjFx/5t2AvOlJT8ktv2dfObD3aW838ohZxCx1QvFUY/Gdx5JA1JY/KrHRGuEqQLH9ayiexyg==
-  dependencies:
-    exeunt "1.1.0"
-    uuid "^3.2.1"
-  optionalDependencies:
-    moment "^2.10.6"
-    mv "~2"
-    safe-json-stringify "~1"
-
-"@expo/config@^2.5.1":
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.5.1.tgz#467733b18d9c26601785a4d3c261edd5e1fba6c0"
-  integrity sha512-MyIGtj917uPHiJJL0mP7A6vDxqgH/z7MqOa18UAz4NfGfCrMKetf/yAk6bQ/rcGBJeNyDSOOXwAOErFSQtBGfg==
-  dependencies:
-    "@expo/json-file" "^8.2.1"
-    "@types/invariant" "^2.2.30"
-    find-yarn-workspace-root "^1.2.1"
-    fs-extra "^7.0.1"
-    invariant "^2.2.4"
-    resolve-from "^5.0.0"
-    slugify "^1.3.4"
-
-"@expo/dev-tools@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.8.0.tgz#0d20520c9d7ade8c2cfc04cd2fbd816b670b4a88"
-  integrity sha512-TYvQX9G5iIeBWXhQ1OcsQ6oRXbwcryDeI/cFT8nV47KpRp2mh67ABaim2mmlDoedZLAHob4XvdINqez2ZPq9yg==
-  dependencies:
-    "@expo/config" "^2.5.1"
-    base64url "3.0.1"
-    express "4.16.4"
-    freeport-async "2.0.0"
-    graphql "0.13.2"
-    graphql-tools "3.0.0"
-    iterall "1.2.2"
-    lodash "^4.17.15"
-    subscriptions-transport-ws "0.9.8"
-
-"@expo/image-utils@^0.2.7", "@expo/image-utils@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.2.8.tgz#26c452e70f6d796c2ac589efba9f05c3aaead795"
-  integrity sha512-TH7n7IE42YbzJXOOS3KTnHTNtlrofNcg0Rn5Og0q0na6KxAXTZL4F3/y2VIHzlEdI27UUtAxoLpdgFrfMh3yow==
-  dependencies:
-    "@expo/spawn-async" "1.5.0"
-    semver "6.1.1"
-  optionalDependencies:
-    sharp-cli "1.10.0"
-
-"@expo/json-file@^8.2.1":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.1.tgz#481e038ec0b01bf0d48bc223acaaa25214ccb4c6"
-  integrity sha512-8X7rBhjNJEXTXlVLAhOoRl19WhlRhfuEp8cbfoE1fEV0ExXyZwfN8rRYbm2Q5BcFjSsRnfuTckpQiU86qahIDA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0-beta.44"
-    fs-extra "^8.0.1"
-    json5 "^1.0.1"
-    lodash "^4.17.15"
-    util.promisify "^1.0.0"
-    write-file-atomic "^2.3.0"
-
-"@expo/ngrok-bin-darwin-ia32@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-darwin-ia32/-/ngrok-bin-darwin-ia32-2.2.8.tgz#46ed6d485a87396acf4af317beeaab7a1f607315"
-  integrity sha512-Mgept4WvXobcNQbxV0f8Nqrukl4HsAM4ExfFOC5BJ1PinlZisb1lQYp+PGu/3DuOYAinAspbL/3m77JkhT5Oow==
-
-"@expo/ngrok-bin-darwin-x64@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-darwin-x64/-/ngrok-bin-darwin-x64-2.2.8.tgz#bf32ece32c3a1c6dcbe518ee88e6c2af3ad8764a"
-  integrity sha512-hEVxBAKTT9G+jCy+2NOjgFrPrrzmdxljLhz3cQIb4izjooQXGCbTFvnEntB0odgsf6Dpa2jWNNt18H6t2nneOQ==
-
-"@expo/ngrok-bin-freebsd-ia32@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-freebsd-ia32/-/ngrok-bin-freebsd-ia32-2.2.8.tgz#7b198757f6bb6602a4c2bc5384b4ddb4d272eca5"
-  integrity sha512-yGdq06wUxreCPxXnhqlL3GzvLtArJ6eDOQinv4SiDK+ftQPY4TloEMQr/rwohvtx63O+bT9jAtgJW44jlfIQ2Q==
-
-"@expo/ngrok-bin-freebsd-x64@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-freebsd-x64/-/ngrok-bin-freebsd-x64-2.2.8.tgz#3d510c3196087e17747d5e34b765cca1e3279f36"
-  integrity sha512-1uSZRastddaUIrK/2B5MANhV7LDKJ8/4cSQxn+E2+U296VKkU6n1ZfZ207a7hA1ctQeBcvwkRx9biFxDa99How==
-
-"@expo/ngrok-bin-linux-arm64@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-linux-arm64/-/ngrok-bin-linux-arm64-2.2.8.tgz#3829665093c7921c8b73e26c7c262493a93d53b4"
-  integrity sha512-9iXr88LlzBCp7+NwfPDsSg2sIy5GfWFXrhU8+vGLnFvZ5MO6ZoRmXbw2VRPFm7ekMa0Losddny4aiLDJkr9hXw==
-
-"@expo/ngrok-bin-linux-arm@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-linux-arm/-/ngrok-bin-linux-arm-2.2.8.tgz#1e64ca1a0856daea5fd752b56d394f083079f195"
-  integrity sha512-qruRsoEuFvaVsSSlhNtHR8uWgF7aA6jdRtCuVKO4pMW32lTZfGS+U/y6hB0YBxXv4xhEn8o1x/15oLU7cNUxEA==
-
-"@expo/ngrok-bin-linux-ia32@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-linux-ia32/-/ngrok-bin-linux-ia32-2.2.8.tgz#dcd8be0a894ba8969548e113a3cd16e7e6fe912b"
-  integrity sha512-Cm3BH4nv55A6KF+XjrK8oLe1Ktn4WrUabd6TcErQRM6/2454A+vh1r6CEKWOVWy4bg7ceTbjgHhCdj9WMv8WTg==
-
-"@expo/ngrok-bin-linux-x64@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-linux-x64/-/ngrok-bin-linux-x64-2.2.8.tgz#517119cb9aa0b74e678d953878910500b6f7f6ec"
-  integrity sha512-jNhnnfMR/yAgUV1LnAheq/WWB/Tkdgm5sxZhN0fjN00CeiYTVyNuCsii2tdjXJCGrxdpb6RzvOxjLGstIT0mUQ==
-
-"@expo/ngrok-bin-sunos-x64@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-sunos-x64/-/ngrok-bin-sunos-x64-2.2.8.tgz#66ebd87786b94836ba5636b22e386b81d4e7da32"
-  integrity sha512-Ogcn/6jNN2PMMaZ1PJu7JBiZz92Yowa119cclI2E2RKyIqQaOYol2g72oHzm8SQ49KfzEJMGDmQA4Xh29cKmrQ==
-
-"@expo/ngrok-bin-win32-ia32@2.2.8-beta.1":
-  version "2.2.8-beta.1"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-win32-ia32/-/ngrok-bin-win32-ia32-2.2.8-beta.1.tgz#c68e530b3c1c96a548d0926fb93e45e2980acd59"
-  integrity sha512-Pva9ZNjUieD2/RVav7LYGAXZ1O6MVXlvOnJmHSmjP4rhreek7/Ez7b5HsCEN3YLjZIcPHH8SV8Duix1NO2zB5A==
-
-"@expo/ngrok-bin-win32-x64@2.2.8-beta.1":
-  version "2.2.8-beta.1"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-win32-x64/-/ngrok-bin-win32-x64-2.2.8-beta.1.tgz#598d74968ef6d0c15f00df1a41d0df2a40562f23"
-  integrity sha512-tVn0jkRC7cbDL502FU7iVI4jbaEKcbTER7pYo2xdUZgM02n4u0AS+FFuzUN+irDiRYZQIFdmDIhxDGl+SHkzbA==
-
-"@expo/ngrok-bin@2.2.8-beta.3":
-  version "2.2.8-beta.3"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok-bin/-/ngrok-bin-2.2.8-beta.3.tgz#22b5fadf0a0de91adbcc62a9a3c86402fe74e672"
-  integrity sha512-VzL67ybSvSYhFJxwBm19VMEHAcgg6bDhE9p8HKDOXL2tdHIzqYtqAYxOyhv2mS263WYqdomtoAChSOb449of+g==
-  optionalDependencies:
-    "@expo/ngrok-bin-darwin-ia32" "2.2.8"
-    "@expo/ngrok-bin-darwin-x64" "2.2.8"
-    "@expo/ngrok-bin-freebsd-ia32" "2.2.8"
-    "@expo/ngrok-bin-freebsd-x64" "2.2.8"
-    "@expo/ngrok-bin-linux-arm" "2.2.8"
-    "@expo/ngrok-bin-linux-arm64" "2.2.8"
-    "@expo/ngrok-bin-linux-ia32" "2.2.8"
-    "@expo/ngrok-bin-linux-x64" "2.2.8"
-    "@expo/ngrok-bin-sunos-x64" "2.2.8"
-    "@expo/ngrok-bin-win32-ia32" "2.2.8-beta.1"
-    "@expo/ngrok-bin-win32-x64" "2.2.8-beta.1"
-
-"@expo/ngrok@2.4.3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@expo/ngrok/-/ngrok-2.4.3.tgz#77e1a7a3e76542358647cd0117c246ea1afe4bc1"
-  integrity sha512-JOct+0BMTOTkTb2RreQc6uzhwCjX8Z/EYRo3EcbHMr5/3Zk+0YuujaM4Z84GeZcWz2sBMhnJj0LeJnhEkmd95Q==
-  dependencies:
-    "@expo/ngrok-bin" "2.2.8-beta.3"
-    async "^0.9.0"
-    lock "^0.1.2"
-    logfmt "^1.2.0"
-    request "^2.81.0"
-    uuid "^3.0.0"
-
-"@expo/osascript@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.6.tgz#232be46a56bc4c3a1934de21971d7e29810e2bb1"
-  integrity sha512-V4qsnRodRZT5OKMQ69gzyMr4vjFbA5YP4MEZ2khdomEFlxxJyobaLv8aWB1303i2yPdEY3vYi4pF6LxL4tXPUg==
-  dependencies:
-    "@expo/spawn-async" "^1.5.0"
-    exec-async "^2.2.0"
-
-"@expo/schemer@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@expo/schemer/-/schemer-1.3.0.tgz#bcd62e540365793368d3412e2987af0f2aff1150"
-  integrity sha512-KtJPtm9K/5tcOoNIj8gFDMlO3aHgBensnqsBik5jjKq+LJWLIeGxFCyR3X/Y2DJRmaLuZpj1hMG93VBwoOi+Vg==
-  dependencies:
-    ajv "^5.2.2"
-    es6-error "^4.0.2"
-    json-schema-traverse "0.3.1"
-    lodash "^4.17.15"
-    probe-image-size "^3.1.0"
-    read-chunk "^3.2.0"
-
-"@expo/simple-spinner@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@expo/simple-spinner/-/simple-spinner-1.0.2.tgz#b31447de60e5102837a4edf702839fcc8f7f31f3"
-  integrity sha1-sxRH3mDlECg3pO33AoOfzI9/MfM=
-
-"@expo/spawn-async@1.5.0", "@expo/spawn-async@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@expo/spawn-async/-/spawn-async-1.5.0.tgz#799827edd8c10ef07eb1a2ff9dcfe081d596a395"
-  integrity sha512-LB7jWkqrHo+5fJHNrLAFdimuSXQ2MQ4lA7SQW5bf/HbsXuV2VrT/jN/M8f/KoWt0uJMGN4k/j7Opx4AvOOxSew==
-  dependencies:
-    cross-spawn "^6.0.5"
-
-"@expo/traveling-fastlane-darwin@1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-darwin/-/traveling-fastlane-darwin-1.11.0.tgz#88f09e2332f2103fafac4759bbbc86832633768a"
-  integrity sha512-owQdOQ0Ag4XE9LtXQ0p1fWwWqa0uhJvEKEmvb5ugPbdkT8BSs92TNfULHPMkGohcHlB0/Q+VXTUbSnP4zczKbQ==
-
-"@expo/traveling-fastlane-linux@1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-linux/-/traveling-fastlane-linux-1.11.0.tgz#a714d87633b030b7190bc0c2b02540eb714bea2b"
-  integrity sha512-ia187s91eO3jxilI/rqqy3SSAUdXsq/5k2nPck2Fs9jWiGldks8Dop+6bAl2brUwzY9VrTDPB2u2z4V08XDZFA==
-
-"@expo/vector-icons@^10.0.1":
-  version "10.0.6"
-  resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-10.0.6.tgz#5718953ff0b97827d11dae5787976fa8ce5caaed"
-  integrity sha512-qNlKPNdf073LpeEpyClxAh0D3mmIK4TGAQzeKR0HVwf14RIEe17+mLW5Z6Ka5Ho/lUtKMRPDHumSllFyKvpeGg==
-  dependencies:
-    lodash "^4.17.4"
-
-"@expo/webpack-config@^0.10.2":
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.10.2.tgz#74c07a4e5d93288be32ce8a177c689b8cf7f8798"
-  integrity sha512-KgeWwMd3R2oV/RkqKjLVgKeKToYK4Tp+9zlSz7Ly2K5z21GKirxMspB5W7LKmiZHnBMlDEBFbflNd5GiotiuRA==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/runtime" "^7.3.4"
-    "@expo/config" "^2.5.1"
-    "@expo/webpack-pwa-manifest-plugin" "^1.2.11"
-    "@types/yup" "^0.26.24"
-    babel-loader "8.0.6"
-    babel-preset-expo "^7.0.0"
-    brotli-webpack-plugin "^1.1.0"
-    chalk "^2.4.2"
-    clean-webpack-plugin "^1.0.1"
-    compression-webpack-plugin "^2.0.0"
-    copy-webpack-plugin "5.0.0"
-    css-loader "^2.1.1"
-    deep-diff "^1.0.2"
-    file-loader "4.2.0"
-    find-yarn-workspace-root "^1.2.1"
-    getenv "^0.7.0"
-    html-loader "^0.5.5"
-    html-webpack-plugin "4.0.0-alpha.2"
-    is-wsl "^2.0.0"
-    mini-css-extract-plugin "^0.5.0"
-    optimize-css-assets-webpack-plugin "^5.0.1"
-    pnp-webpack-plugin "^1.2.1"
-    postcss-safe-parser "^4.0.1"
-    prettier "^1.16.4"
-    progress-bar-webpack-plugin "^1.12.1"
-    react-dev-utils "9.0.3"
-    style-loader "^0.23.1"
-    terser-webpack-plugin "^1.2.3"
-    url-loader "^1.1.2"
-    webpack "4.41.2"
-    webpack-bundle-analyzer "^3.0.4"
-    webpack-deep-scope-plugin "1.6.0"
-    webpack-manifest-plugin "^2.0.4"
-    webpack-merge "^4.2.1"
-    workbox-webpack-plugin "^3.6.3"
-    yup "^0.27.0"
-
-"@expo/webpack-pwa-manifest-plugin@^1.2.11":
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.11.tgz#e003dc729a4864099cc74890803d1181d155adb9"
-  integrity sha512-/AURoxSPVAeBoA4MpcTezYsncL7GiIogx2D9VkS1y5k5hgrI3n+p0QKTKjeLs/zfTOmAjKGQDRr+q3LE+AHZvw==
-  dependencies:
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.8"
-    is-color "^1.0.2"
-    mime "^2.4.0"
-    node-fetch "^2.6.0"
-    tempy "^0.3.0"
-
-"@expo/websql@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@expo/websql/-/websql-1.0.1.tgz#fff0cf9c1baa1f70f9e1d658b7c39a420d9b10a9"
-  integrity sha1-//DPnBuqH3D54dZYt8OaQg2bEKk=
-  dependencies:
-    argsarray "^0.0.1"
-    immediate "^3.2.2"
-    noop-fn "^1.0.0"
-    pouchdb-collections "^1.0.1"
-    tiny-queue "^0.2.1"
-
-"@expo/xdl@57.0.0":
-  version "57.0.0"
-  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-57.0.0.tgz#cc29b9dc695fc94b409507a87e055c062f7ed486"
-  integrity sha512-Vh8H2nF3cBQe+3RAuH15OWR9ZAOtLgGNoRQikCTMROhvXelMM/rL5yUOpu7mwBMZuDvLlOjHV63V4DjJoGVNeQ==
-  dependencies:
-    "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.8"
-    "@expo/json-file" "^8.2.1"
-    "@expo/ngrok" "2.4.3"
-    "@expo/osascript" "^2.0.6"
-    "@expo/schemer" "^1.3.0"
-    "@expo/spawn-async" "1.5.0"
-    "@expo/webpack-config" "^0.10.2"
-    analytics-node "3.3.0"
-    axios "0.19.0"
-    boxen "4.1.0"
-    chalk "2.4.1"
-    concat-stream "1.6.2"
-    decache "4.4.0"
-    delay-async "1.2.0"
-    es6-error "4.1.1"
-    express "4.16.4"
-    form-data "2.3.2"
-    freeport-async "2.0.0"
-    fs-extra "6.0.1"
-    getenv "0.7.0"
-    glob "7.1.2"
-    glob-promise "3.4.0"
-    globby "6.1.0"
-    hasbin "1.2.3"
-    hashids "1.1.4"
-    idx "2.4.0"
-    indent-string "3.2.0"
-    inquirer "5.2.0"
-    internal-ip "4.3.0"
-    invariant "2.2.4"
-    joi "14.0.4"
-    latest-version "5.1.0"
-    lodash "4.17.15"
-    md5hex "1.0.0"
-    minimatch "3.0.4"
-    minipass "2.3.5"
-    mv "2.1.1"
-    ncp "2.0.0"
-    node-forge "0.7.6"
-    p-map "3.0.0"
-    p-retry "4.1.0"
-    p-timeout "3.1.0"
-    package-json "6.4.0"
-    pacote "9.3.0"
-    pascal-case "2.0.1"
-    plist "2.1.0"
-    pretty-bytes "5.2.0"
-    probe-image-size "4.0.0"
-    querystring "0.2.0"
-    raven "2.6.3"
-    read-chunk "2.1.0"
-    read-last-lines "1.6.0"
-    replace-string "1.1.0"
-    request "2.88.0"
-    request-promise-native "1.0.5"
-    resolve-from "5.0.0"
-    semver "5.5.0"
-    slugid "1.1.0"
-    slugify "1.3.1"
-    source-map-support "0.4.18"
-    split "1.0.1"
-    tar "4.4.6"
-    tempy "0.3.0"
-    tree-kill "1.2.0"
-    url "0.11.0"
-    url-join "4.0.0"
-    util.promisify "1.0.0"
-    uuid "3.3.2"
-    validator "11.0.0"
-    webpack "4.39.0"
-    webpack-dev-server "^3.7.2"
-    xmldom "0.1.27"
-
-"@fimbul/bifrost@^0.21.0":
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/@fimbul/bifrost/-/bifrost-0.21.0.tgz#d0fafa25938fda475657a6a1e407a21bbe02c74e"
-  integrity sha512-ou8VU+nTmOW1jeg+FT+sn+an/M0Xb9G16RucrfhjXGWv1Q97kCoM5CG9Qj7GYOSdu7km72k7nY83Eyr53Bkakg==
-  dependencies:
-    "@fimbul/ymir" "^0.21.0"
-    get-caller-file "^2.0.0"
-    tslib "^1.8.1"
-    tsutils "^3.5.0"
-
-"@fimbul/ymir@^0.21.0":
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/@fimbul/ymir/-/ymir-0.21.0.tgz#8525726787aceeafd4e199472c0d795160b5d4a1"
-  integrity sha512-T/y7WqPsm4n3zhT08EpB5sfdm2Kvw3gurAxr2Lr5dQeLi8ZsMlNT/Jby+ZmuuAAd1PnXYzKp+2SXgIkQIIMCUg==
-  dependencies:
-    inversify "^5.0.0"
-    reflect-metadata "^0.1.12"
-    tslib "^1.8.1"
-
-"@glimmer/di@^0.2.0":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@glimmer/di/-/di-0.2.1.tgz#5286b6b32040232b751138f6d006130c728d4b3d"
-  integrity sha512-0D53YVuEgGdHfTl9LGWDZqVzGhn4cT0CXqyAuOYkKFLvqboJXz6SnkRhQNPhhA2hLVrPnvUz3+choQmPhHLGGQ==
-
-"@glimmer/resolver@^0.4.1":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@glimmer/resolver/-/resolver-0.4.3.tgz#b1baae5c3291b4621002ccf8d7870466097e841d"
-  integrity sha512-UhX6vlZbWRMq6pCquSC3wfWLM9kO0PhQPD1dZ3XnyZkmsvEE94Cq+EncA9JalUuevKoJrfUFRvrZ0xaz+yar3g==
-  dependencies:
-    "@glimmer/di" "^0.2.0"
-
-"@hapi/address@2.x.x", "@hapi/address@^2.1.2":
+"@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
   integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
 
-"@hapi/boom@^7.4.3":
-  version "7.4.11"
-  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-7.4.11.tgz#37af8417eb9416aef3367aa60fa04a1a9f1fc262"
-  integrity sha512-VSU/Cnj1DXouukYxxkes4nNJonCnlogHvIff1v1RVoN4xzkKhMXX+GRmb3NyH1iar10I9WFPDv2JPwfH3GaV0A==
+"@hapi/address@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-4.0.1.tgz#267301ddf7bc453718377a6fb3832a2f04a721dd"
+  integrity sha512-0oEP5UiyV4f3d6cBL8F3Z5S7iWSX39Knnl0lY8i+6gfmmIBj44JCBNtcMgwyS+5v7j3VYavNay0NFHDS+UGQcw==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "^9.0.0"
 
 "@hapi/bourne@1.x.x":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
   integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
 
-"@hapi/formula@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-1.2.0.tgz#994649c7fea1a90b91a0a1e6d983523f680e10cd"
-  integrity sha512-UFbtbGPjstz0eWHb+ga/GM3Z9EzqKXFWIbSOFURU0A/Gku0Bky4bCk9/h//K2Xr3IrCfjFNhMm4jyZ5dbCewGA==
+"@hapi/formula@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-2.0.0.tgz#edade0619ed58c8e4f164f233cda70211e787128"
+  integrity sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==
+
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
+  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
 
-"@hapi/hoek@8.x.x", "@hapi/hoek@^8.2.4", "@hapi/hoek@^8.3.0":
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
-  integrity sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==
+"@hapi/hoek@^9.0.0":
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.0.4.tgz#e80ad4e8e8d2adc6c77d985f698447e8628b6010"
+  integrity sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==
 
-"@hapi/joi@^15.0.0", "@hapi/joi@^15.0.3":
+"@hapi/joi@^15.0.0", "@hapi/joi@^15.0.1":
   version "15.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
   integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
@@ -2342,36 +2188,35 @@
     "@hapi/hoek" "8.x.x"
     "@hapi/topo" "3.x.x"
 
-"@hapi/joi@^16.1.2":
-  version "16.1.8"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-16.1.8.tgz#84c1f126269489871ad4e2decc786e0adef06839"
-  integrity sha512-wAsVvTPe+FwSrsAurNt5vkg3zo+TblvC5Bb1zMVK6SJzZqw9UrJnexxR+76cpePmtUZKHAPxcQ2Bf7oVHyahhg==
+"@hapi/joi@^17.1.1":
+  version "17.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-17.1.1.tgz#9cc8d7e2c2213d1e46708c6260184b447c661350"
+  integrity sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==
   dependencies:
-    "@hapi/address" "^2.1.2"
-    "@hapi/formula" "^1.2.0"
-    "@hapi/hoek" "^8.2.4"
-    "@hapi/pinpoint" "^1.0.2"
-    "@hapi/topo" "^3.1.3"
+    "@hapi/address" "^4.0.1"
+    "@hapi/formula" "^2.0.0"
+    "@hapi/hoek" "^9.0.0"
+    "@hapi/pinpoint" "^2.0.0"
+    "@hapi/topo" "^5.0.0"
 
-"@hapi/pinpoint@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-1.0.2.tgz#025b7a36dbbf4d35bf1acd071c26b20ef41e0d13"
-  integrity sha512-dtXC/WkZBfC5vxscazuiJ6iq4j9oNx1SHknmIr8hofarpKUZKmlUVYVIhNVzIEgK5Wrc4GMHL5lZtt1uS2flmQ==
+"@hapi/pinpoint@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-2.0.0.tgz#805b40d4dbec04fc116a73089494e00f073de8df"
+  integrity sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==
 
-"@hapi/topo@3.x.x", "@hapi/topo@^3.1.3":
+"@hapi/topo@3.x.x":
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
   integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@hypnosphi/jest-puppeteer-axe@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@hypnosphi/jest-puppeteer-axe/-/jest-puppeteer-axe-1.4.0.tgz#aa7a348934178fcb41defb688ebd493970e3d660"
-  integrity sha512-sQ1BpqNE9C2d0afEtm3LLQWfQjITuxHXaLF79sGDUGa7/DPnfn2qgzcQOtL9uPu7KnZOz95dmsUgoHXkyQbrmQ==
+"@hapi/topo@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.0.0.tgz#c19af8577fa393a06e9c77b60995af959be721e7"
+  integrity sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    axe-puppeteer "^1.0.0"
+    "@hapi/hoek" "^9.0.0"
 
 "@hypnosphi/jscodeshift@^0.6.4":
   version "0.6.4"
@@ -2397,16 +2242,50 @@
     temp "^0.8.1"
     write-file-atomic "^2.3.0"
 
+"@iarna/cli@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@iarna/cli/-/cli-1.2.0.tgz#0f7af5e851afe895104583c4ca07377a8094d641"
+  integrity sha512-ukITQAqVs2n9HGmn3car/Ir7d3ta650iXhrG7pjr3EWdFmJuuOVWgYsu7ftsSe5VifEFFhjxVuX9+8F7L8hwcA==
+  dependencies:
+    signal-exit "^3.0.2"
+    update-notifier "^2.2.0"
+    yargs "^8.0.2"
+
 "@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==
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
+  integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@intervolga/optimize-cssnano-plugin@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"
+  integrity sha512-zN69TnSr0viRSU6cEDIcuPcP67QcpQ6uHACg58FiN9PDrU6SLyGW3MR4tiISbYxy1kDWAVPwD+XwQTWE5cigAA==
+  dependencies:
+    cssnano "^4.0.0"
+    cssnano-preset-default "^4.0.0"
+    postcss "^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
+  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -2416,6 +2295,28 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
+"@jest/console@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.5.0.tgz#770800799d510f37329c508a9edd0b7b447d9abb"
+  integrity sha512-T48kZa6MK1Y6k4b89sexwmSF4YLeZS/Udqg3Jj3jG/cHH+N/sLFCEoXEDMOKugJQ9FxPN1osxIknvKkxt6MKyw==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    jest-message-util "^25.5.0"
+    jest-util "^25.5.0"
+    slash "^3.0.0"
+
+"@jest/console@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.0.1.tgz#62b3b2fa8990f3cbffbef695c42ae9ddbc8f4b39"
+  integrity sha512-9t1KUe/93coV1rBSxMmBAOIK3/HVpwxArCA1CxskKyRiv6o8J70V8C/V3OJminVCTa2M0hQI9AWRd5wxu2dAHw==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    jest-message-util "^26.0.1"
+    jest-util "^26.0.1"
+    slash "^3.0.0"
+
 "@jest/core@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
@@ -2450,18 +2351,103 @@
     slash "^2.0.0"
     strip-ansi "^5.0.0"
 
-"@jest/environment@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
-  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+"@jest/core@^25.5.4":
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.5.4.tgz#3ef7412f7339210f003cdf36646bbca786efe7b4"
+  integrity sha512-3uSo7laYxF00Dg/DMgbn4xMJKmDdWvZnf89n8Xj/5/AeQ2dOQmn6b6Hkj/MleyzZWXpwv+WSdYWl4cLsy2JsoA==
   dependencies:
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-
-"@jest/fake-timers@^24.9.0":
-  version "24.9.0"
+    "@jest/console" "^25.5.0"
+    "@jest/reporters" "^25.5.1"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^25.5.0"
+    jest-config "^25.5.4"
+    jest-haste-map "^25.5.1"
+    jest-message-util "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-resolve-dependencies "^25.5.4"
+    jest-runner "^25.5.4"
+    jest-runtime "^25.5.4"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    jest-watcher "^25.5.0"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    realpath-native "^2.0.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/core@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.0.1.tgz#aa538d52497dfab56735efb00e506be83d841fae"
+  integrity sha512-Xq3eqYnxsG9SjDC+WLeIgf7/8KU6rddBxH+SCt18gEpOhAGYC/Mq+YbtlNcIdwjnnT+wDseXSbU0e5X84Y4jTQ==
+  dependencies:
+    "@jest/console" "^26.0.1"
+    "@jest/reporters" "^26.0.1"
+    "@jest/test-result" "^26.0.1"
+    "@jest/transform" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.0.1"
+    jest-config "^26.0.1"
+    jest-haste-map "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.0.1"
+    jest-resolve-dependencies "^26.0.1"
+    jest-runner "^26.0.1"
+    jest-runtime "^26.0.1"
+    jest-snapshot "^26.0.1"
+    jest-util "^26.0.1"
+    jest-validate "^26.0.1"
+    jest-watcher "^26.0.1"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^24.3.0", "@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/environment@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.5.0.tgz#aa33b0c21a716c65686638e7ef816c0e3a0c7b37"
+  integrity sha512-U2VXPEqL07E/V7pSZMSQCvV5Ea4lqOlT+0ZFijl/i316cRMHvZ4qC+jBdryd+lmRetjQo0YIQr6cVPNxxK87mA==
+  dependencies:
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
+
+"@jest/environment@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.0.1.tgz#82f519bba71959be9b483675ee89de8c8f72a5c8"
+  integrity sha512-xBDxPe8/nx251u0VJ2dFAFz2H23Y98qdIaNwnMK6dFQr05jc+Ne/2np73lOAx+5mSBO/yuQldRrQOf6hP1h92g==
+  dependencies:
+    "@jest/fake-timers" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    jest-mock "^26.0.1"
+
+"@jest/fake-timers@^24.3.0", "@jest/fake-timers@^24.9.0":
+  version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
   integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
   dependencies:
@@ -2469,6 +2455,46 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
+"@jest/fake-timers@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.5.0.tgz#46352e00533c024c90c2bc2ad9f2959f7f114185"
+  integrity sha512-9y2+uGnESw/oyOI3eww9yaxdZyHq7XvprfP/eeoCsjqKYts2yRlsHS/SgjPDV8FyMfn2nbMy8YzUk6nyvdLOpQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    lolex "^5.0.0"
+
+"@jest/fake-timers@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.0.1.tgz#f7aeff13b9f387e9d0cac9a8de3bba538d19d796"
+  integrity sha512-Oj/kCBnTKhm7CR+OJSjZty6N1bRDr9pgiYQr4wY221azLz5PHi08x/U+9+QpceAYOWheauLP8MhtSVFrqXQfhg==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    "@sinonjs/fake-timers" "^6.0.1"
+    jest-message-util "^26.0.1"
+    jest-mock "^26.0.1"
+    jest-util "^26.0.1"
+
+"@jest/globals@^25.5.2":
+  version "25.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-25.5.2.tgz#5e45e9de8d228716af3257eeb3991cc2e162ca88"
+  integrity sha512-AgAS/Ny7Q2RCIj5kZ+0MuKM1wbF0WMLxbCVl/GOMoCNbODRdJ541IxJ98xnZdVSZXivKpJlNPIWa3QmY0l4CXA==
+  dependencies:
+    "@jest/environment" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    expect "^25.5.0"
+
+"@jest/globals@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.0.1.tgz#3f67b508a7ce62b6e6efc536f3d18ec9deb19a9c"
+  integrity sha512-iuucxOYB7BRCvT+TYBzUqUNuxFX1hqaR6G6IcGgEqkJ5x4htNKo1r7jk1ji9Zj8ZMiMw0oB5NaA7k5Tx6MVssA==
+  dependencies:
+    "@jest/environment" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    expect "^26.0.1"
+
 "@jest/reporters@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
@@ -2496,6 +2522,70 @@
     source-map "^0.6.0"
     string-length "^2.0.0"
 
+"@jest/reporters@^25.5.1":
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.5.1.tgz#cb686bcc680f664c2dbaf7ed873e93aa6811538b"
+  integrity sha512-3jbd8pPDTuhYJ7vqiHXbSwTJQNavczPs+f1kRprRDxETeE3u6srJ+f0NPuwvOmk+lmunZzPkYWIFZDLHQPkviw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^25.5.1"
+    jest-resolve "^25.5.1"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^3.1.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.1.3"
+  optionalDependencies:
+    node-notifier "^6.0.0"
+
+"@jest/reporters@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.0.1.tgz#14ae00e7a93e498cec35b0c00ab21c375d9b078f"
+  integrity sha512-NWWy9KwRtE1iyG/m7huiFVF9YsYv/e+mbflKRV84WDoJfBqUrNRyDbL/vFxQcYLl8IRqI4P3MgPn386x76Gf2g==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.0.1"
+    "@jest/test-result" "^26.0.1"
+    "@jest/transform" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.0.1"
+    jest-resolve "^26.0.1"
+    jest-util "^26.0.1"
+    jest-worker "^26.0.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.1.3"
+  optionalDependencies:
+    node-notifier "^7.0.0"
+
 "@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
@@ -2505,6 +2595,24 @@
     graceful-fs "^4.1.15"
     source-map "^0.6.0"
 
+"@jest/source-map@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.5.0.tgz#df5c20d6050aa292c2c6d3f0d2c7606af315bd1b"
+  integrity sha512-eIGx0xN12yVpMcPaVpjXPnn3N30QGJCJQSkEDUt9x1fI1Gdvb07Ml6K5iN2hG7NmMP6FDmtPEssE3z6doOYUwQ==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
+"@jest/source-map@^26.0.0":
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.0.0.tgz#fd7706484a7d3faf7792ae29783933bbf48a4749"
+  integrity sha512-S2Z+Aj/7KOSU2TfW0dyzBze7xr95bkm5YXNUqqCek+HE0VbNNSNzrRwfIi5lf7wvzDTSS0/ib8XQ1krFNyYgbQ==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -2514,6 +2622,26 @@
     "@jest/types" "^24.9.0"
     "@types/istanbul-lib-coverage" "^2.0.0"
 
+"@jest/test-result@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.5.0.tgz#139a043230cdeffe9ba2d8341b27f2efc77ce87c"
+  integrity sha512-oV+hPJgXN7IQf/fHWkcS99y0smKLU2czLBJ9WA0jHITLst58HpQMtzSYxzaBvYc6U5U6jfoMthqsUlUlbRXs0A==
+  dependencies:
+    "@jest/console" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.0.1.tgz#1ffdc1ba4bc289919e54b9414b74c9c2f7b2b718"
+  integrity sha512-oKwHvOI73ICSYRPe8WwyYPTtiuOAkLSbY8/MfWF3qDEd/sa8EDyZzin3BaXTqufir/O/Gzea4E8Zl14XU4Mlyg==
+  dependencies:
+    "@jest/console" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
@@ -2524,6 +2652,28 @@
     jest-runner "^24.9.0"
     jest-runtime "^24.9.0"
 
+"@jest/test-sequencer@^25.5.4":
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.5.4.tgz#9b4e685b36954c38d0f052e596d28161bdc8b737"
+  integrity sha512-pTJGEkSeg1EkCO2YWq6hbFvKNXk8ejqlxiOg1jBNLnWrgXOkdY6UmqZpwGFXNnRt9B8nO1uWMzLLZ4eCmhkPNA==
+  dependencies:
+    "@jest/test-result" "^25.5.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^25.5.1"
+    jest-runner "^25.5.4"
+    jest-runtime "^25.5.4"
+
+"@jest/test-sequencer@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.0.1.tgz#b0563424728f3fe9e75d1442b9ae4c11da73f090"
+  integrity sha512-ssga8XlwfP8YjbDcmVhwNlrmblddMfgUeAkWIXts1V22equp2GMIHxm7cyeD5Q/B0ZgKPK/tngt45sH99yLLGg==
+  dependencies:
+    "@jest/test-result" "^26.0.1"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.0.1"
+    jest-runner "^26.0.1"
+    jest-runtime "^26.0.1"
+
 "@jest/transform@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
@@ -2546,7 +2696,50 @@
     source-map "^0.6.1"
     write-file-atomic "2.4.1"
 
-"@jest/types@^24.7.0", "@jest/types@^24.9.0":
+"@jest/transform@^25.5.1":
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.5.1.tgz#0469ddc17699dd2bf985db55fa0fb9309f5c2db3"
+  integrity sha512-Y8CEoVwXb4QwA6Y/9uDkn0Xfz0finGkieuV0xkdF9UtZGJeLukD5nLkaVrVsODB1ojRWlaoD0AJZpVHCSnJEvg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^25.5.0"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^3.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^25.5.1"
+    jest-regex-util "^25.2.6"
+    jest-util "^25.5.0"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/transform@^26.0.0", "@jest/transform@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.0.1.tgz#0e3ecbb34a11cd4b2080ed0a9c4856cf0ceb0639"
+  integrity sha512-pPRkVkAQ91drKGbzCfDOoHN838+FSbYaEAvBXvKuWeeRRUD8FjwXkqfUNUZL6Ke48aA/1cqq/Ni7kVMCoqagWA==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^26.0.1"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.0.1"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.0.1"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^24.3.0", "@jest/types@^24.7.0", "@jest/types@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
   integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
@@ -2555,6 +2748,37 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
+"@jest/types@^26.0.1":
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.0.1.tgz#b78333fbd113fa7aec8d39de24f88de8686dac67"
+  integrity sha512-IbtjvqI9+eS1qFnOIEL7ggWmT+iK/U+Vde9cGWtYb/b6XgKb3X44ZAe/z9YZzoAAZ/E92m0DqrilF934IGNnQA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
+"@jsdevtools/coverage-istanbul-loader@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@jsdevtools/coverage-istanbul-loader/-/coverage-istanbul-loader-3.0.3.tgz#102e414b02ae2f0b3c7fd45a705601e1fd4867c5"
+  integrity sha512-TAdNkeGB5Fe4Og+ZkAr1Kvn9by2sfL44IAHFtxlh1BA1XJ5cLpO9iSNki5opWESv3l3vSHsZ9BNKuqFKbEbFaA==
+  dependencies:
+    convert-source-map "^1.7.0"
+    istanbul-lib-instrument "^4.0.1"
+    loader-utils "^1.4.0"
+    merge-source-map "^1.1.0"
+    schema-utils "^2.6.4"
+
 "@lasso/marko-taglib@^1.0.13":
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/@lasso/marko-taglib/-/marko-taglib-1.0.15.tgz#c0076ce265d9cbb2c2f84adb5c8101fcac6118a8"
@@ -2566,15 +2790,15 @@
     raptor-logging "^1.1.3"
     raptor-util "^1.1.2"
 
-"@lerna/add@3.19.0":
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.19.0.tgz#33b6251c669895f842c14f05961432d464166249"
-  integrity sha512-qzhxPyoczvvT1W0wwCK9I0iJ4B9WR+HzYsusmRuzM3mEhWjowhbuvKEl5BjGYuXc9AvEErM/S0Fm5K0RcuS39Q==
+"@lerna/add@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b"
+  integrity sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==
   dependencies:
     "@evocateur/pacote" "^9.6.3"
-    "@lerna/bootstrap" "3.18.5"
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/bootstrap" "3.21.0"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
     "@lerna/npm-conf" "3.16.0"
     "@lerna/validation-error" "3.13.0"
     dedent "^0.7.0"
@@ -2582,13 +2806,13 @@
     p-map "^2.1.0"
     semver "^6.2.0"
 
-"@lerna/bootstrap@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-3.18.5.tgz#cc22a750d6b0402e136926e8b214148dfc2e1390"
-  integrity sha512-9vD/BfCz8YSF2Dx7sHaMVo6Cy33WjLEmoN1yrHgNkHjm7ykWbLHG5wru0f4Y4pvwa0s5Hf76rvT8aJWzGHk9IQ==
+"@lerna/bootstrap@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-3.21.0.tgz#bcd1b651be5b0970b20d8fae04c864548123aed6"
+  integrity sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==
   dependencies:
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
     "@lerna/has-npm-version" "3.16.5"
     "@lerna/npm-install" "3.16.5"
     "@lerna/package-graph" "3.18.5"
@@ -2611,13 +2835,13 @@
     read-package-tree "^5.1.6"
     semver "^6.2.0"
 
-"@lerna/changed@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/changed/-/changed-3.18.5.tgz#ef2c460f5497b8b4cfac7e5165fe46d7181fcdf5"
-  integrity sha512-IXS7VZ5VDQUfCsgK56WYxd42luMBxL456cNUf1yBgQ1cy1U2FPVMitIdLN4AcP7bJizdPWeG8yDptf47jN/xVw==
+"@lerna/changed@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/changed/-/changed-3.21.0.tgz#108e15f679bfe077af500f58248c634f1044ea0b"
+  integrity sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==
   dependencies:
-    "@lerna/collect-updates" "3.18.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/collect-updates" "3.20.0"
+    "@lerna/command" "3.21.0"
     "@lerna/listable" "3.18.5"
     "@lerna/output" "3.13.0"
 
@@ -2639,13 +2863,13 @@
     execa "^1.0.0"
     strong-log-transformer "^2.0.0"
 
-"@lerna/clean@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/clean/-/clean-3.18.5.tgz#44b4a6db68ae369778f2921c85ec6961bdd86072"
-  integrity sha512-tHxOj9frTIhB/H2gtgMU3xpIc4IJEhXcUlReko6RJt8TTiDZGPDudCcgjg6i7n15v9jXMOc1y4F+y5/1089bfA==
+"@lerna/clean@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/clean/-/clean-3.21.0.tgz#c0b46b5300cc3dae2cda3bec14b803082da3856d"
+  integrity sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==
   dependencies:
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
     "@lerna/prompt" "3.18.5"
     "@lerna/pulse-till-done" "3.13.0"
     "@lerna/rimraf-dir" "3.16.5"
@@ -2673,10 +2897,10 @@
     figgy-pudding "^3.5.1"
     npmlog "^4.1.2"
 
-"@lerna/collect-updates@3.18.0":
-  version "3.18.0"
-  resolved "https://registry.yarnpkg.com/@lerna/collect-updates/-/collect-updates-3.18.0.tgz#6086c64df3244993cc0a7f8fc0ddd6a0103008a6"
-  integrity sha512-LJMKgWsE/var1RSvpKDIxS8eJ7POADEc0HM3FQiTpEczhP6aZfv9x3wlDjaHpZm9MxJyQilqxZcasRANmRcNgw==
+"@lerna/collect-updates@3.20.0":
+  version "3.20.0"
+  resolved "https://registry.yarnpkg.com/@lerna/collect-updates/-/collect-updates-3.20.0.tgz#62f9d76ba21a25b7d9fbf31c02de88744a564bd1"
+  integrity sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==
   dependencies:
     "@lerna/child-process" "3.16.5"
     "@lerna/describe-ref" "3.16.5"
@@ -2684,14 +2908,14 @@
     npmlog "^4.1.2"
     slash "^2.0.0"
 
-"@lerna/command@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/command/-/command-3.18.5.tgz#14c6d2454adbfd365f8027201523e6c289cd3cd9"
-  integrity sha512-36EnqR59yaTU4HrR1C9XDFti2jRx0BgpIUBeWn129LZZB8kAB3ov1/dJNa1KcNRKp91DncoKHLY99FZ6zTNpMQ==
+"@lerna/command@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/command/-/command-3.21.0.tgz#9a2383759dc7b700dacfa8a22b2f3a6e190121f7"
+  integrity sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==
   dependencies:
     "@lerna/child-process" "3.16.5"
     "@lerna/package-graph" "3.18.5"
-    "@lerna/project" "3.18.0"
+    "@lerna/project" "3.21.0"
     "@lerna/validation-error" "3.13.0"
     "@lerna/write-log-file" "3.13.0"
     clone-deep "^4.0.1"
@@ -2700,10 +2924,10 @@
     is-ci "^2.0.0"
     npmlog "^4.1.2"
 
-"@lerna/conventional-commits@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/conventional-commits/-/conventional-commits-3.18.5.tgz#08efd2e5b45acfaf3f151a53a3ec7ecade58a7bc"
-  integrity sha512-qcvXIEJ3qSgalxXnQ7Yxp5H9Ta5TVyai6vEor6AAEHc20WiO7UIdbLDCxBtiiHMdGdpH85dTYlsoYUwsCJu3HQ==
+"@lerna/conventional-commits@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz#2798f4881ee2ef457bdae027ab7d0bf0af6f1e09"
+  integrity sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==
   dependencies:
     "@lerna/validation-error" "3.13.0"
     conventional-changelog-angular "^5.0.3"
@@ -2726,14 +2950,14 @@
     fs-extra "^8.1.0"
     npmlog "^4.1.2"
 
-"@lerna/create@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.18.5.tgz#11ac539f069248eaf7bc4c42e237784330f4fc47"
-  integrity sha512-cHpjocbpKmLopCuZFI7cKEM3E/QY8y+yC7VtZ4FQRSaLU8D8i2xXtXmYaP1GOlVNavji0iwoXjuNpnRMInIr2g==
+"@lerna/create@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.22.0.tgz#d6bbd037c3dc5b425fe5f6d1b817057c278f7619"
+  integrity sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==
   dependencies:
     "@evocateur/pacote" "^9.6.3"
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/npm-conf" "3.16.0"
     "@lerna/validation-error" "3.13.0"
     camelcase "^5.0.0"
@@ -2758,34 +2982,35 @@
     "@lerna/child-process" "3.16.5"
     npmlog "^4.1.2"
 
-"@lerna/diff@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/diff/-/diff-3.18.5.tgz#e9e2cb882f84d5b84f0487c612137305f07accbc"
-  integrity sha512-u90lGs+B8DRA9Z/2xX4YaS3h9X6GbypmGV6ITzx9+1Ga12UWGTVlKaCXBgONMBjzJDzAQOK8qPTwLA57SeBLgA==
+"@lerna/diff@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/diff/-/diff-3.21.0.tgz#e6df0d8b9916167ff5a49fcb02ac06424280a68d"
+  integrity sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/validation-error" "3.13.0"
     npmlog "^4.1.2"
 
-"@lerna/exec@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/exec/-/exec-3.18.5.tgz#50f1bd6b8f88f2ec02c0768b8b1d9024feb1a96a"
-  integrity sha512-Q1nz95MeAxctS9bF+aG8FkjixzqEjRpg6ujtnDW84J42GgxedkPtNcJ2o/MBqLd/mxAlr+fW3UZ6CPC/zgoyCg==
+"@lerna/exec@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/exec/-/exec-3.21.0.tgz#17f07533893cb918a17b41bcc566dc437016db26"
+  integrity sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
+    "@lerna/profiler" "3.20.0"
     "@lerna/run-topologically" "3.18.5"
     "@lerna/validation-error" "3.13.0"
     p-map "^2.1.0"
 
-"@lerna/filter-options@3.18.4":
-  version "3.18.4"
-  resolved "https://registry.yarnpkg.com/@lerna/filter-options/-/filter-options-3.18.4.tgz#f5476a7ee2169abed27ad433222e92103f56f9f1"
-  integrity sha512-4giVQD6tauRwweO/322LP2gfVDOVrt/xN4khkXyfkJDfcsZziFXq+668otD9KSLL8Ps+To4Fah3XbK0MoNuEvA==
+"@lerna/filter-options@3.20.0":
+  version "3.20.0"
+  resolved "https://registry.yarnpkg.com/@lerna/filter-options/-/filter-options-3.20.0.tgz#0f0f5d5a4783856eece4204708cc902cbc8af59b"
+  integrity sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==
   dependencies:
-    "@lerna/collect-updates" "3.18.0"
+    "@lerna/collect-updates" "3.20.0"
     "@lerna/filter-packages" "3.18.0"
     dedent "^0.7.0"
     figgy-pudding "^3.5.1"
@@ -2816,13 +3041,13 @@
     ssri "^6.0.1"
     tar "^4.4.8"
 
-"@lerna/github-client@3.16.5":
-  version "3.16.5"
-  resolved "https://registry.yarnpkg.com/@lerna/github-client/-/github-client-3.16.5.tgz#2eb0235c3bf7a7e5d92d73e09b3761ab21f35c2e"
-  integrity sha512-rHQdn8Dv/CJrO3VouOP66zAcJzrHsm+wFuZ4uGAai2At2NkgKH+tpNhQy2H1PSC0Ezj9LxvdaHYrUzULqVK5Hw==
+"@lerna/github-client@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/github-client/-/github-client-3.22.0.tgz#5d816aa4f76747ed736ae64ff962b8f15c354d95"
+  integrity sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@octokit/plugin-enterprise-rest" "^3.6.1"
+    "@octokit/plugin-enterprise-rest" "^6.0.1"
     "@octokit/rest" "^16.28.4"
     git-url-parse "^11.1.2"
     npmlog "^4.1.2"
@@ -2849,13 +3074,13 @@
     "@lerna/child-process" "3.16.5"
     semver "^6.2.0"
 
-"@lerna/import@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.18.5.tgz#a9c7d8601870729851293c10abd18b3707f7ba5e"
-  integrity sha512-PH0WVLEgp+ORyNKbGGwUcrueW89K3Iuk/DDCz8mFyG2IG09l/jOF0vzckEyGyz6PO5CMcz4TI1al/qnp3FrahQ==
+"@lerna/import@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.22.0.tgz#1a5f0394f38e23c4f642a123e5e1517e70d068d2"
+  integrity sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/prompt" "3.18.5"
     "@lerna/pulse-till-done" "3.13.0"
     "@lerna/validation-error" "3.13.0"
@@ -2863,35 +3088,44 @@
     fs-extra "^8.1.0"
     p-map-series "^1.0.0"
 
-"@lerna/init@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/init/-/init-3.18.5.tgz#86dd0b2b3290755a96975069b5cb007f775df9f5"
-  integrity sha512-oCwipWrha98EcJAHm8AGd2YFFLNI7AW9AWi0/LbClj1+XY9ah+uifXIgYGfTk63LbgophDd8936ZEpHMxBsbAg==
+"@lerna/info@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/info/-/info-3.21.0.tgz#76696b676fdb0f35d48c83c63c1e32bb5e37814f"
+  integrity sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==
+  dependencies:
+    "@lerna/command" "3.21.0"
+    "@lerna/output" "3.13.0"
+    envinfo "^7.3.1"
+
+"@lerna/init@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/init/-/init-3.21.0.tgz#1e810934dc8bf4e5386c031041881d3b4096aa5c"
+  integrity sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     fs-extra "^8.1.0"
     p-map "^2.1.0"
     write-json-file "^3.2.0"
 
-"@lerna/link@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/link/-/link-3.18.5.tgz#f24347e4f0b71d54575bd37cfa1794bc8ee91b18"
-  integrity sha512-xTN3vktJpkT7Nqc3QkZRtHO4bT5NvuLMtKNIBDkks0HpGxC9PRyyqwOoCoh1yOGbrWIuDezhfMg3Qow+6I69IQ==
+"@lerna/link@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/link/-/link-3.21.0.tgz#8be68ff0ccee104b174b5bbd606302c2f06e9d9b"
+  integrity sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/package-graph" "3.18.5"
     "@lerna/symlink-dependencies" "3.17.0"
     p-map "^2.1.0"
     slash "^2.0.0"
 
-"@lerna/list@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/list/-/list-3.18.5.tgz#58863f17c81e24e2c38018eb8619fc99d7cc5c82"
-  integrity sha512-qIeomm28C2OCM8TMjEe/chTnQf6XLN54wPVQ6kZy+axMYxANFNt/uhs6GZEmhem7GEVawzkyHSz5ZJPsfH3IFg==
+"@lerna/list@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/list/-/list-3.21.0.tgz#42f76fafa56dea13b691ec8cab13832691d61da2"
+  integrity sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==
   dependencies:
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
     "@lerna/listable" "3.18.5"
     "@lerna/output" "3.13.0"
 
@@ -3026,10 +3260,20 @@
   dependencies:
     semver "^6.2.0"
 
-"@lerna/project@3.18.0":
-  version "3.18.0"
-  resolved "https://registry.yarnpkg.com/@lerna/project/-/project-3.18.0.tgz#56feee01daeb42c03cbdf0ed8a2a10cbce32f670"
-  integrity sha512-+LDwvdAp0BurOAWmeHE3uuticsq9hNxBI0+FMHiIai8jrygpJGahaQrBYWpwbshbQyVLeQgx3+YJdW2TbEdFWA==
+"@lerna/profiler@3.20.0":
+  version "3.20.0"
+  resolved "https://registry.yarnpkg.com/@lerna/profiler/-/profiler-3.20.0.tgz#0f6dc236f4ea8f9ea5f358c6703305a4f32ad051"
+  integrity sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==
+  dependencies:
+    figgy-pudding "^3.5.1"
+    fs-extra "^8.1.0"
+    npmlog "^4.1.2"
+    upath "^1.2.0"
+
+"@lerna/project@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/project/-/project-3.21.0.tgz#5d784d2d10c561a00f20320bcdb040997c10502d"
+  integrity sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==
   dependencies:
     "@lerna/package" "3.16.0"
     "@lerna/validation-error" "3.13.0"
@@ -3052,18 +3296,18 @@
     inquirer "^6.2.0"
     npmlog "^4.1.2"
 
-"@lerna/publish@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.18.5.tgz#8cc708d83a4cb7ab1c4cc020a02e7ebc4b6b0b0e"
-  integrity sha512-ifYqLX6mvw95T8vYRlhT68UC7Al0flQvnf5uF9lDgdrgR5Bs+BTwzk3D+0ctdqMtfooekrV6pqfW0R3gtwRffQ==
+"@lerna/publish@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.22.0.tgz#7a3fb61026d3b7425f3b9a1849421f67d795c55d"
+  integrity sha512-8LBeTLBN8NIrCrLGykRu+PKrfrCC16sGCVY0/bzq9TDioR7g6+cY0ZAw653Qt/0Kr7rg3J7XxVNdzj3fvevlwA==
   dependencies:
     "@evocateur/libnpmaccess" "^3.1.2"
     "@evocateur/npm-registry-fetch" "^4.0.0"
     "@evocateur/pacote" "^9.6.3"
     "@lerna/check-working-tree" "3.16.5"
     "@lerna/child-process" "3.16.5"
-    "@lerna/collect-updates" "3.18.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/collect-updates" "3.20.0"
+    "@lerna/command" "3.21.0"
     "@lerna/describe-ref" "3.16.5"
     "@lerna/log-packed" "3.16.0"
     "@lerna/npm-conf" "3.16.0"
@@ -3078,7 +3322,7 @@
     "@lerna/run-lifecycle" "3.16.2"
     "@lerna/run-topologically" "3.18.5"
     "@lerna/validation-error" "3.13.0"
-    "@lerna/version" "3.18.5"
+    "@lerna/version" "3.22.0"
     figgy-pudding "^3.5.1"
     fs-extra "^8.1.0"
     npm-package-arg "^6.1.0"
@@ -3141,15 +3385,16 @@
     figgy-pudding "^3.5.1"
     p-queue "^4.0.0"
 
-"@lerna/run@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/run/-/run-3.18.5.tgz#09ae809b16445d3621249c24596cf4ae8e250d5d"
-  integrity sha512-1S0dZccNJO8+gT5ztYE4rHTEnbXVwThHOfDnlVt2KDxl9cbnBALk3xprGLW7lSzJsxegS849hxrAPUh0UorMgw==
+"@lerna/run@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/run/-/run-3.21.0.tgz#2a35ec84979e4d6e42474fe148d32e5de1cac891"
+  integrity sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==
   dependencies:
-    "@lerna/command" "3.18.5"
-    "@lerna/filter-options" "3.18.4"
+    "@lerna/command" "3.21.0"
+    "@lerna/filter-options" "3.20.0"
     "@lerna/npm-run-script" "3.16.5"
     "@lerna/output" "3.13.0"
+    "@lerna/profiler" "3.20.0"
     "@lerna/run-topologically" "3.18.5"
     "@lerna/timer" "3.13.0"
     "@lerna/validation-error" "3.13.0"
@@ -3190,17 +3435,17 @@
   dependencies:
     npmlog "^4.1.2"
 
-"@lerna/version@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.18.5.tgz#0c4f0c2f8d23e9c95c2aa77ad9ce5c7ef025fac0"
-  integrity sha512-eSMxLIDuVxZIq0JZKNih50x1IZuMmViwF59uwOGMx0hHB84N3waE8HXOF9CJXDSjeP6sHB8tS+Y+X5fFpBop2Q==
+"@lerna/version@3.22.0":
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.22.0.tgz#67e1340c1904e9b339becd66429f32dd8ad65a55"
+  integrity sha512-6uhL6RL7/FeW6u1INEgyKjd5dwO8+IsbLfkfC682QuoVLS7VG6OOB+JmTpCvnuyYWI6fqGh1bRk9ww8kPsj+EA==
   dependencies:
     "@lerna/check-working-tree" "3.16.5"
     "@lerna/child-process" "3.16.5"
-    "@lerna/collect-updates" "3.18.0"
-    "@lerna/command" "3.18.5"
-    "@lerna/conventional-commits" "3.18.5"
-    "@lerna/github-client" "3.16.5"
+    "@lerna/collect-updates" "3.20.0"
+    "@lerna/command" "3.21.0"
+    "@lerna/conventional-commits" "3.22.0"
+    "@lerna/github-client" "3.22.0"
     "@lerna/gitlab-client" "3.15.0"
     "@lerna/output" "3.13.0"
     "@lerna/prerelease-id-from-version" "3.16.0"
@@ -3230,59 +3475,61 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@marko/webpack@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@marko/webpack/-/webpack-2.0.0.tgz#4dfc905c10eeb64c05194d10d9ac5a08b244e4fc"
-  integrity sha512-89VfWHONSIV5Y/I6/aRNe12bQzpcMnLC7tcptTdABBCmYvMimsLK+vPxh9KmljyHCngjTc8Cu64gTVjq71i1bg==
+"@marko/webpack@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@marko/webpack/-/webpack-2.1.0.tgz#2042556c142201b3d05cdee8703b1b44afee089b"
+  integrity sha512-FYaQyZpdCFW07PRy4Yize7WJsxLxGZU+C611SAlanSisTaCGy1bof7V9YuvbddUf5XalmP4T2Qns0XyL2zkdhw==
   dependencies:
     base-x "^3.0.5"
     lasso-modules-client "^2.0.5"
     loader-utils "^1.2.3"
     sort-keys "^2.0.0"
+    tslib "^1.10.0"
     webpack-virtual-modules "^0.1.10"
 
 "@mdx-js/loader@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.5.1.tgz#d66a00b757345540c1530f750459de39b0fb7b96"
-  integrity sha512-g7BGfMdJY5ZnDjUEdGz4cfMs9Je0hGZAItGZ1rCBHtJt6SCKMy5N8qml6FJYo3pxNxWkbOCQbX85F6qsetwlAA==
-  dependencies:
-    "@mdx-js/mdx" "^1.5.1"
-    "@mdx-js/react" "^1.5.1"
-    loader-utils "1.2.3"
-
-"@mdx-js/mdx@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.5.1.tgz#470ce07e01cef4f7b1d5051640e5235d5e75aebb"
-  integrity sha512-VNc2U8G6RlAYGmZfFj9dRTXcyWIo7rfxuAJtjupTqdddMx5HeLOmsWBLkZt5K76Nmn/bOg6d7zwR1+5FuvjAtg==
-  dependencies:
-    "@babel/core" "7.6.2"
-    "@babel/plugin-syntax-jsx" "7.2.0"
-    "@babel/plugin-syntax-object-rest-spread" "7.2.0"
-    "@mdx-js/util" "^1.5.1"
-    babel-plugin-apply-mdx-type-prop "^1.5.1"
-    babel-plugin-extract-import-names "^1.5.1"
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.4.tgz#5fc75ba57c1dae99cd53d64ed22c5493f604416f"
+  integrity sha512-Br+apzC1Dbj5d8adILHgOxiFIuFvYs+1/FAIiMK77FbmgX02xixHd86IPmWvcWX54nFqhJOX7jICF63/UXmMww==
+  dependencies:
+    "@mdx-js/mdx" "^1.6.4"
+    "@mdx-js/react" "^1.6.4"
+    loader-utils "2.0.0"
+
+"@mdx-js/mdx@^1.5.1", "@mdx-js/mdx@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.4.tgz#9c7be8430b15b18dad7bd48323eded92a01089f3"
+  integrity sha512-TuKjwVrp0bhuv++SnqHp3k7agawS4d29sSL9p1B6Wv6IxJTfkJPMD1rI+Ahek45qTNY0Sxh4Q6kox9a7cq1tag==
+  dependencies:
+    "@babel/core" "7.9.6"
+    "@babel/plugin-syntax-jsx" "7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "7.8.3"
+    "@mdx-js/util" "^1.6.4"
+    babel-plugin-apply-mdx-type-prop "^1.6.4"
+    babel-plugin-extract-import-names "^1.6.4"
     camelcase-css "2.0.1"
-    detab "2.0.2"
-    hast-util-raw "5.0.1"
+    detab "2.0.3"
+    hast-util-raw "5.0.2"
     lodash.uniq "4.5.0"
-    mdast-util-to-hast "6.0.2"
-    remark-mdx "^1.5.1"
-    remark-parse "7.0.1"
-    remark-squeeze-paragraphs "3.0.4"
-    style-to-object "0.2.3"
-    unified "8.3.2"
-    unist-builder "1.0.4"
-    unist-util-visit "2.0.0"
-
-"@mdx-js/react@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.5.1.tgz#e0a9dbdc03826198abd82b29dcee91d661faf8a5"
-  integrity sha512-eF05YysHqtyXerLId0kPKtxmJ3PE60GJJvx1gOguEQndbs94fUeYTVSfBlnXPPAAzvOmVKrZmktIYsBQlVjpOw==
-
-"@mdx-js/util@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.5.1.tgz#f5f29bde5b09f8da3f4a4b43fa0a34bcf8ffc7cb"
-  integrity sha512-8F8E5FPWKP/cHjjI+O6Sh4KLUktk0KKS1xrxqVoBQd14/PBDH+kUgSJVE99p9jSRGh+OjCBmqx0tXN+m32w1tA==
+    mdast-util-to-hast "9.1.0"
+    remark-footnotes "1.0.0"
+    remark-mdx "^1.6.4"
+    remark-parse "8.0.2"
+    remark-squeeze-paragraphs "4.0.0"
+    style-to-object "0.3.0"
+    unified "9.0.0"
+    unist-builder "2.0.3"
+    unist-util-visit "2.0.2"
+
+"@mdx-js/react@^1.5.1", "@mdx-js/react@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.4.tgz#5e867921a1f0cfcf4ee756630115f1565845b628"
+  integrity sha512-3SwDgbr2Fc3i5LrOQnahRUTvx0x/wRf+i8+fJM1caGTeq1XwVb6OHztJzaYt3DSizJVzRsBZznReY+l39up5Pg==
+
+"@mdx-js/util@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.4.tgz#ae31e83f2ccb30f122457ee436a015d654ac3c12"
+  integrity sha512-cVGZ68yZwyJnOMhARAdgD1IhZ0bsbsKCvsj6I/XnJcT9hNV/8WXErSV98zFfZwH3LmSRPde58l9hln+zXdK/mQ==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -3292,20 +3539,19 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@ngrx/store@^8.2.0":
-  version "8.5.2"
-  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-8.5.2.tgz#18e4a39f3e7ac2ec8307653837ec3c4153bde04f"
-  integrity sha512-JPlc23Aw3rlEKt6LCkg3a0zlo0tEgkohH3CDHVbUIYSgg3DWOnmNfwztbz4pa2u2wua5PfFCovC7HKTNmapx/w==
+"@ngrx/store@^9.0.0":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-9.1.2.tgz#cc443d08d53440cafd669048a974b05456e95070"
+  integrity sha512-FQXFonF8hSGJDqgLaoWHy2mkeJwVdoa3jLoT1YpkJWxsFMG4U0T6JYG4VrtuymDgo9XwWBBJqIiNpdTgHhofSQ==
 
-"@ngtools/webpack@8.3.19":
-  version "8.3.19"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-8.3.19.tgz#9ed3123a9c3d79c49f73fd9a30cbe283ddde9d47"
-  integrity sha512-2PPnIsLmPSmtaurj+8SaWBWWheL8i3DOWY6fCbxgZRmCTcShHWBxPldzLMqGrTYhqjHdqnOO+uu1EEG5yyLBMw==
+"@ngtools/webpack@9.1.7":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-9.1.7.tgz#4322757b029e1175a3361183c06b31d0576538d8"
+  integrity sha512-A7VB2I42Kn+7jl0tDKzGNLAoZLWSqkKo9Hg1bmKpvAAIz+DSbq3uV+JWgGgTprM3tn0lfkVgmqk4H17HKwAOcg==
   dependencies:
-    "@angular-devkit/core" "8.3.19"
-    enhanced-resolve "4.1.0"
-    rxjs "6.4.0"
-    tree-kill "1.2.1"
+    "@angular-devkit/core" "9.1.7"
+    enhanced-resolve "4.1.1"
+    rxjs "6.5.4"
     webpack-sources "1.4.3"
 
 "@nodelib/fs.scandir@2.1.3":
@@ -3334,60 +3580,124 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@octokit/endpoint@^5.5.0":
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.5.1.tgz#2eea81e110ca754ff2de11c79154ccab4ae16b3f"
-  integrity sha512-nBFhRUb5YzVTCX/iAK1MgQ4uWo89Gu0TH00qQHoYRCsE12dWcG1OiLd7v2EIo2+tpUKPMOQ62QFy9hy9Vg2ULg==
+"@octokit/auth-token@^2.4.0":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.1.tgz#375d79eebd03750e6a9b0299e80b8167c7c85655"
+  integrity sha512-NB81O5h39KfHYGtgfWr2booRxp2bWOJoqbWwbyUg2hw6h35ArWYlAST5B3XwAkbdcx13yt84hFXyFP5X0QToWA==
   dependencies:
-    "@octokit/types" "^2.0.0"
+    "@octokit/types" "^4.0.1"
+
+"@octokit/core@^2.4.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-2.5.3.tgz#dd754e6f5ad9b15631e9b276ae4f00ac2ea2cf9b"
+  integrity sha512-23AHK9xBW0v79Ck8h5U+5iA4MW7aosqv+Yr6uZXolVGNzzHwryNH5wM386/6+etiKUTwLFZTqyMU9oQpIBZcFA==
+  dependencies:
+    "@octokit/auth-token" "^2.4.0"
+    "@octokit/graphql" "^4.3.1"
+    "@octokit/request" "^5.4.0"
+    "@octokit/types" "^4.0.1"
+    before-after-hook "^2.1.0"
+    universal-user-agent "^5.0.0"
+
+"@octokit/endpoint@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.1.tgz#16d5c0e7a83e3a644d1ddbe8cded6c3d038d31d7"
+  integrity sha512-pOPHaSz57SFT/m3R5P8MUu4wLPszokn5pXcB/pzavLTQf2jbU+6iayTvzaY6/BiotuRS0qyEUkx3QglT4U958A==
+  dependencies:
+    "@octokit/types" "^2.11.1"
     is-plain-object "^3.0.0"
-    universal-user-agent "^4.0.0"
+    universal-user-agent "^5.0.0"
 
-"@octokit/plugin-enterprise-rest@^3.6.1":
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-3.6.2.tgz#74de25bef21e0182b4fa03a8678cd00a4e67e561"
-  integrity sha512-3wF5eueS5OHQYuAEudkpN+xVeUsg8vYEMMenEzLphUZ7PRZ8OJtDcsreL3ad9zxXmBbaFWzLmFcdob5CLyZftA==
+"@octokit/graphql@^4.3.1":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.5.0.tgz#e111f841bc15722b1e9887f447fccab700cacdad"
+  integrity sha512-StJWfn0M1QfhL3NKBz31e1TdDNZrHLLS57J2hin92SIfzlOVBuUaRkp31AGkGOAFOAVtyEX6ZiZcsjcJDjeb5g==
+  dependencies:
+    "@octokit/request" "^5.3.0"
+    "@octokit/types" "^4.0.1"
+    universal-user-agent "^5.0.0"
 
-"@octokit/request-error@^1.0.1", "@octokit/request-error@^1.0.2":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.2.0.tgz#a64d2a9d7a13555570cd79722de4a4d76371baaa"
-  integrity sha512-DNBhROBYjjV/I9n7A8kVkmQNkqFAMem90dSxqvPq57e2hBr7mNTX98y3R2zDpqMQHVRpBDjsvsfIGgBzy+4PAg==
+"@octokit/plugin-enterprise-rest@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz#e07896739618dab8da7d4077c658003775f95437"
+  integrity sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==
+
+"@octokit/plugin-paginate-rest@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz#004170acf8c2be535aba26727867d692f7b488fc"
+  integrity sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==
+  dependencies:
+    "@octokit/types" "^2.0.1"
+
+"@octokit/plugin-paginate-rest@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.2.1.tgz#b95ec46c841d51e5e625f383c579d132ab216d05"
+  integrity sha512-/tHpIF2XpN40AyhIq295YRjb4g7Q5eKob0qM3thYJ0Z+CgmNsWKM/fWse/SUR8+LdprP1O4ZzSKQE+71TCwK+w==
+  dependencies:
+    "@octokit/types" "^4.0.1"
+
+"@octokit/plugin-request-log@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.0.tgz#eef87a431300f6148c39a7f75f8cfeb218b2547e"
+  integrity sha512-ywoxP68aOT3zHCLgWZgwUJatiENeHE7xJzYjfz8WI0goynp96wETBF+d95b8g/uL4QmS6owPVlaxiz3wyMAzcw==
+
+"@octokit/plugin-rest-endpoint-methods@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz#3288ecf5481f68c494dd0602fc15407a59faf61e"
+  integrity sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==
+  dependencies:
+    "@octokit/types" "^2.0.1"
+    deprecation "^2.3.1"
+
+"@octokit/plugin-rest-endpoint-methods@^3.12.2":
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.12.2.tgz#3da0422531db806204e20ec9a014dea89bec1f29"
+  integrity sha512-QUfJ6nriHpwTxf8As99kEyDQV4AGQvypsM8Xyx5rsWi6JY7rzjOkZrleRrFq0aiNcQo7acM4bwaXq462OKTJ9w==
+  dependencies:
+    "@octokit/types" "^4.0.0"
+    deprecation "^2.3.1"
+
+"@octokit/request-error@^1.0.2":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.2.1.tgz#ede0714c773f32347576c25649dc013ae6b31801"
+  integrity sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==
   dependencies:
     "@octokit/types" "^2.0.0"
     deprecation "^2.0.0"
     once "^1.4.0"
 
-"@octokit/request@^5.2.0":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.3.1.tgz#3a1ace45e6f88b1be4749c5da963b3a3b4a2f120"
-  integrity sha512-5/X0AL1ZgoU32fAepTfEoggFinO3rxsMLtzhlUX+RctLrusn/CApJuGFCd0v7GMFhF+8UiCsTTfsu7Fh1HnEJg==
+"@octokit/request-error@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.0.1.tgz#49bd71e811daffd5bdd06ef514ca47b5039682d1"
+  integrity sha512-5lqBDJ9/TOehK82VvomQ6zFiZjPeSom8fLkFVLuYL3sKiIb5RB8iN/lenLkY7oBmyQcGP7FBMGiIZTO8jufaRQ==
   dependencies:
-    "@octokit/endpoint" "^5.5.0"
-    "@octokit/request-error" "^1.0.1"
-    "@octokit/types" "^2.0.0"
+    "@octokit/types" "^4.0.1"
     deprecation "^2.0.0"
-    is-plain-object "^3.0.0"
-    node-fetch "^2.3.0"
     once "^1.4.0"
-    universal-user-agent "^4.0.0"
 
-"@octokit/rest@^14.0.7":
-  version "14.0.9"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-14.0.9.tgz#d5e0a00dcb78901dd7b2ef852acfc0aea7c479ef"
-  integrity sha512-irP9phKfTXEZIcW2R+VNCtGHZJrXMWmSYp6RRfFn4BtAqtDRXF5z9JxCEQlAhNBf6X1koNi5k49tIAAAEJNlVQ==
+"@octokit/request@^5.2.0", "@octokit/request@^5.3.0", "@octokit/request@^5.4.0":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.4.tgz#dc57e85e86284fa016d0c1a2701a70a10cec4ff2"
+  integrity sha512-vqv1lz41c6VTxUvF9nM+a6U+vvP3vGk7drDpr0DVQg4zyqlOiKVrY17DLD6de5okj+YLHKcoqaUZTBtlNZ1BtQ==
   dependencies:
-    before-after-hook "^1.1.0"
-    debug "^3.1.0"
-    is-array-buffer "^1.0.0"
-    is-stream "^1.1.0"
-    lodash "^4.17.4"
-    url-template "^2.0.8"
+    "@octokit/endpoint" "^6.0.1"
+    "@octokit/request-error" "^2.0.0"
+    "@octokit/types" "^4.0.1"
+    deprecation "^2.0.0"
+    is-plain-object "^3.0.0"
+    node-fetch "^2.3.0"
+    once "^1.4.0"
+    universal-user-agent "^5.0.0"
 
-"@octokit/rest@^16.14.1", "@octokit/rest@^16.28.4":
-  version "16.35.0"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.35.0.tgz#7ccc1f802f407d5b8eb21768c6deca44e7b4c0d8"
-  integrity sha512-9ShFqYWo0CLoGYhA1FdtdykJuMzS/9H6vSbbQWDX4pWr4p9v+15MsH/wpd/3fIU+tSxylaNO48+PIHqOkBRx3w==
+"@octokit/rest@^16.28.4", "@octokit/rest@^16.43.1":
+  version "16.43.1"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.43.1.tgz#3b11e7d1b1ac2bbeeb23b08a17df0b20947eda6b"
+  integrity sha512-gfFKwRT/wFxq5qlNjnW2dh+qh74XgTQ2B179UX5K1HYCluioWj8Ndbgqw2PVqa1NnVJkGHp2ovMpVn/DImlmkw==
   dependencies:
+    "@octokit/auth-token" "^2.4.0"
+    "@octokit/plugin-paginate-rest" "^1.1.1"
+    "@octokit/plugin-request-log" "^1.0.0"
+    "@octokit/plugin-rest-endpoint-methods" "2.4.0"
     "@octokit/request" "^5.2.0"
     "@octokit/request-error" "^1.0.2"
     atob-lite "^2.0.0"
@@ -3401,10 +3711,27 @@
     once "^1.4.0"
     universal-user-agent "^4.0.0"
 
-"@octokit/types@^2.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.0.2.tgz#0888497f5a664e28b0449731d5e88e19b2a74f90"
-  integrity sha512-StASIL2lgT3TRjxv17z9pAqbnI7HGu9DrJlg3sEBFfCLaMEqp+O3IQPUF6EZtQ4xkAu2ml6kMBBCtGxjvmtmuQ==
+"@octokit/rest@^17.1.1":
+  version "17.9.2"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-17.9.2.tgz#725476630c7bc7d59488b8337a0936255d24b7ff"
+  integrity sha512-UXxiE0HhGQAPB3WDHTEu7lYMHH2uRcs/9f26XyHpGGiiXht8hgHWEk6fA7WglwwEvnj8V7mkJOgIntnij132UA==
+  dependencies:
+    "@octokit/core" "^2.4.3"
+    "@octokit/plugin-paginate-rest" "^2.2.0"
+    "@octokit/plugin-request-log" "^1.0.0"
+    "@octokit/plugin-rest-endpoint-methods" "^3.12.2"
+
+"@octokit/types@^2.0.0", "@octokit/types@^2.0.1", "@octokit/types@^2.11.1":
+  version "2.16.2"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.16.2.tgz#4c5f8da3c6fecf3da1811aef678fda03edac35d2"
+  integrity sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==
+  dependencies:
+    "@types/node" ">= 8"
+
+"@octokit/types@^4.0.0", "@octokit/types@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-4.0.2.tgz#4e5be1ed1d39532f6b1bc5ad7ce52086a83cf379"
+  integrity sha512-+4X6qfhT/fk/5FD66395NrFLxCzD6FsGlpPwfwvnukdyfYbhiZB/FJltiT1XM5Q63rGGBSf9FPaNV3WpNHm54A==
   dependencies:
     "@types/node" ">= 8"
 
@@ -3460,66 +3787,15 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
-"@polymer/polymer@^2.6.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-2.8.0.tgz#dad7ecbf8ae5933df8f4e1af1bbfe57c88a2c7b3"
-  integrity sha512-R3LXHDmHG8f3wxIFKyCVRutlWggJBrjHVytOr+6ZTnLedKFke7i9SQRBtunl/w+NgnkN45a2S9jG+wtHV2pY+Q==
-
-"@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==
+"@reach/router@^1.2.1", "@reach/router@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
+  integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw==
   dependencies:
-    create-react-context "^0.2.1"
+    create-react-context "0.3.0"
     invariant "^2.2.3"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
-    warning "^3.0.0"
-
-"@react-native-community/cli@^1.2.1":
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-1.12.0.tgz#f4cbc2204af63a87d5736d2fa6a018c1fd5efd44"
-  integrity sha512-GAs4JgVP8QkEYeZks/T7cCrBuwFJKxd9ksBLRdQ058uvLGkOEeS4g3y4GsVM/9C1zat5h6Z6QwU0h/hj7G3tzg==
-  dependencies:
-    chalk "^1.1.1"
-    commander "^2.19.0"
-    compression "^1.7.1"
-    connect "^3.6.5"
-    denodeify "^1.2.1"
-    envinfo "^5.7.0"
-    errorhandler "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    execa "^1.0.0"
-    fs-extra "^7.0.1"
-    glob "^7.1.1"
-    graceful-fs "^4.1.3"
-    inquirer "^3.0.6"
-    lodash "^4.17.5"
-    metro "^0.51.0"
-    metro-config "^0.51.0"
-    metro-core "^0.51.0"
-    metro-memory-fs "^0.51.0"
-    metro-react-native-babel-transformer "^0.51.0"
-    mime "^1.3.4"
-    minimist "^1.2.0"
-    mkdirp "^0.5.1"
-    morgan "^1.9.0"
-    node-fetch "^2.2.0"
-    node-notifier "^5.2.1"
-    opn "^3.0.2"
-    plist "^3.0.0"
-    semver "^5.0.3"
-    serve-static "^1.13.1"
-    shell-quote "1.6.1"
-    slash "^2.0.0"
-    ws "^1.1.0"
-    xcode "^2.0.0"
-    xmldoc "^0.4.0"
-
-"@react-native-community/netinfo@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-2.0.10.tgz#d28a446352e75754b78509557988359133cdbcca"
-  integrity sha512-NrIzyLe0eSbhgMnHl2QdSEhaA7yXh6p9jzMomfUa//hoTXE+xbObGDdiWWSQm2bnXnZJg8XCU3AB9qzvqcuLnA==
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
@@ -3528,41 +3804,29 @@
   dependencies:
     any-observable "^0.3.0"
 
-"@schematics/angular@8.3.19":
-  version "8.3.19"
-  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-8.3.19.tgz#0584ecb2e59bb5b1cdade9bf788bb7b483c066bc"
-  integrity sha512-fwhvK+IzNxfznh5yQAbkkmyrdydoOQFoBvMWNsi4pneZRu0kKrnQim5FLjx2mJQArfxvJUgCMiZZ1Ze0TzVK+g==
+"@schematics/angular@9.1.7":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-9.1.7.tgz#b7801a5e20f844da560db81d2971590e8ac090ff"
+  integrity sha512-ld3WcoMWvup04V3OWioQ+AFGQBzz7IDM4Fxc5+Qc3wILWkDJnNkrc4EmJAow96Ab4/T1+Wl1vof3tV4At0BTzA==
   dependencies:
-    "@angular-devkit/core" "8.3.19"
-    "@angular-devkit/schematics" "8.3.19"
+    "@angular-devkit/core" "9.1.7"
+    "@angular-devkit/schematics" "9.1.7"
 
-"@schematics/update@0.803.19":
-  version "0.803.19"
-  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.803.19.tgz#7cb7c37f7a7a66e8555b5a1e83192969c8bf2b19"
-  integrity sha512-DAzPeHImvj2Yw2U3/Aj3obqTPe3U8yzxkDM7KQeRioDof2lOksvkffj1Od7EVuMKsdsf2/eohhsJpad2LFdNNg==
+"@schematics/update@0.901.7":
+  version "0.901.7"
+  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.901.7.tgz#164bff4e97383a0a7d266fe5eb2e1bf41f14dfe9"
+  integrity sha512-6IpQVFvbu47CrXfqqHAzv2vi7AOdfi1S+SiayXU6FWTeA2wV47H8R60VjxurL8JkDGoVhFgC4+lK6KG++g3dQw==
   dependencies:
-    "@angular-devkit/core" "8.3.19"
-    "@angular-devkit/schematics" "8.3.19"
+    "@angular-devkit/core" "9.1.7"
+    "@angular-devkit/schematics" "9.1.7"
     "@yarnpkg/lockfile" "1.1.0"
     ini "1.3.5"
-    pacote "9.5.5"
-    rxjs "6.4.0"
-    semver "6.3.0"
+    npm-package-arg "^8.0.0"
+    pacote "9.5.12"
+    rxjs "6.5.4"
+    semver "7.1.3"
     semver-intersect "1.4.0"
 
-"@segment/loosely-validate-event@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"
-  integrity sha512-ZMCSfztDBqwotkl848ODgVcAmN4OItEWDCkshcKz0/W6gGSQayuuCtWV/MlodFivAZD793d6UgANd6wCXUfrIw==
-  dependencies:
-    component-type "^1.2.1"
-    join-component "^1.1.0"
-
-"@sheerun/mutationobserver-shim@^0.3.2":
-  version "0.3.2"
-  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"
@@ -3585,117 +3849,356 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
-"@storybook/csf@0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
-  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
+"@sinonjs/commons@^1.7.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
+  integrity sha512-wEj54PfsZ5jGSwMX68G8ZXFawcSglQSXqCftWX3ec8MDUzQdHgcKvw97awHbY0efQEL5iKUOAmmVtoYgmrSG4Q==
   dependencies:
-    lodash "^4.17.15"
+    type-detect "4.0.8"
 
-"@storybook/ember-cli-storybook@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@storybook/ember-cli-storybook/-/ember-cli-storybook-0.2.0.tgz#c9b0a2512266e9c1a9cb443048c8defa2f00c035"
-  integrity sha512-367fsOCf9bw7tQHDVU1RBL7qc+f5d3dfj8l0hkAbelFSzcRkH3D2aFXXdBmNHd3NBb2b++mCK5EcWIqvYLOq0w==
+"@sinonjs/fake-timers@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
   dependencies:
-    broccoli-funnel "^2.0.2"
-    cheerio "^1.0.0-rc.2"
-    ember-cli-addon-docs-yuidoc "^0.2.3"
-    ember-cli-babel "^7.1.2"
+    "@sinonjs/commons" "^1.7.0"
 
-"@storybook/eslint-config-storybook@^2.0.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@storybook/eslint-config-storybook/-/eslint-config-storybook-2.1.0.tgz#db785ebad0d0e6194e3497e1600ff5be936f943f"
-  integrity sha512-EFuItxSbxySgtqOpsA4NtwJLBVo9WFzunQ9mOU8X0cd1CkvYAA29Jxm6HAZ9oWyXqbxbypjV7U4XBKa63f46OQ==
+"@soda/friendly-errors-webpack-plugin@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz#706f64bcb4a8b9642b48ae3ace444c70334d615d"
+  integrity sha512-cWKrGaFX+rfbMrAxVv56DzhPNqOJPZuNIS2HGMELtgGzb+vsMzyig9mml5gZ/hr2BGtSLV+dP2LUEuAL8aG2mQ==
   dependencies:
-    "@storybook/linter-config" "2.1.0"
+    chalk "^1.1.3"
+    error-stack-parser "^2.0.0"
+    string-width "^2.0.0"
 
-"@storybook/linter-config@2.1.0", "@storybook/linter-config@^2.0.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@storybook/linter-config/-/linter-config-2.1.0.tgz#2a1ba6270de44387ad8b31bbf8435fca832d5233"
-  integrity sha512-Z/j5bnxATtkTBZSIsJ5+p+Y0xSJyewYoqy72h96T52ZvcSyeCWfllaa3zXrnw0+OOzo02BHr9EByguLuULUbSA==
-  dependencies:
-    "@typescript-eslint/eslint-plugin" "^2.7.0"
-    "@typescript-eslint/parser" "^2.7.0"
-    eslint-config-airbnb "^18.0.1"
-    eslint-config-prettier "^6.5.0"
-    eslint-plugin-html "^6.0.0"
-    eslint-plugin-import "^2.16.0"
-    eslint-plugin-jest "^23.0.4"
-    eslint-plugin-json "^2.0.1"
-    eslint-plugin-json-files "^0.8.0"
-    eslint-plugin-jsx-a11y "^6.2.1"
-    eslint-plugin-prettier "^3.0.1"
-    eslint-plugin-react "^7.16.0"
-    remark-cli "^7.0.1"
-    remark-lint "^6.0.4"
-    remark-preset-lint-recommended "^3.0.2"
+"@soda/get-current-script@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.0.tgz#623aa40623550e3b94767cffeb096a6fb597ed09"
+  integrity sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==
+
+"@storybook/addons@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.0-alpha.0.tgz#f4416a8c9c081961e5950a7962d7a5102138717e"
+  integrity sha512-CrPvlo7pW44t7f/YWoEXMRgafvBKAcDYw9/sbBlltu88nKMHU28qjLf95HiTXtiE6P9AqdkRdVkQtyVWhnqKQA==
+  dependencies:
+    "@storybook/api" "6.0.0-alpha.0"
+    "@storybook/channels" "6.0.0-alpha.0"
+    "@storybook/client-logger" "6.0.0-alpha.0"
+    "@storybook/core-events" "6.0.0-alpha.0"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
 
-"@storybook/node-logger@^5.2.8":
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.2.8.tgz#4a3df21d731014d54b9ca53d5b9a72dd350bb075"
-  integrity sha512-3TK5mx6VWbfJO+WUrqwPhTbTQ4qESTnwJY/02xPzOhvuC6tIG1QOxzi+Rq6rFlwxTpUuWh6iyDYnGIqFFQywkA==
-  dependencies:
-    chalk "^2.4.2"
+"@storybook/api@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.0.0-alpha.0.tgz#9b612f8c41fb8b1f9bbd3c990b5a1b3beb0eb82a"
+  integrity sha512-aKYxx39jfakMfYB0FJkFqlqig8Ph/y3K4QaUgmYbL9CSuouvvfBDGh1onhp2mwZpqohrAKl9UAeNZp9HDM0dug==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/channels" "6.0.0-alpha.0"
+    "@storybook/client-logger" "6.0.0-alpha.0"
+    "@storybook/core-events" "6.0.0-alpha.0"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.0.0-alpha.0"
+    "@storybook/theming" "6.0.0-alpha.0"
+    "@types/reach__router" "^1.2.3"
     core-js "^3.0.1"
-    npmlog "^4.1.2"
-    pretty-hrtime "^1.0.3"
-    regenerator-runtime "^0.12.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    prop-types "^15.6.2"
+    react "^16.8.3"
+    semver "^6.0.0"
+    shallow-equal "^1.1.0"
+    store2 "^2.7.1"
+    telejson "^3.2.0"
+    util-deprecate "^1.0.2"
 
-"@storybook/preset-create-react-app@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@storybook/preset-create-react-app/-/preset-create-react-app-1.5.0.tgz#214c023790545a36bb6b551d317a8dacbb7bc1a1"
-  integrity sha512-HkVmduGBPiCdtpq+rNZDzjJXEt7+KxszePDkCvnXfQMKKe+OusvmiuHwNB1A7apB7fGXPysbAgST/1G96sn61Q==
+"@storybook/channel-postmessage@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.0.0-alpha.0.tgz#dec7245e9be7b1303c8bd60e664134a56639ae54"
+  integrity sha512-OX3Ho/MbQ1+wVPh/9gAATf4LxoFN6k62GtmB5qcpkpJkSUhs5AQQPVG70kHpb7eCaRmV6a90b67tiLDRWNyzow==
   dependencies:
-    "@storybook/node-logger" "^5.2.8"
-    "@types/webpack" "^4.41.0"
-    react-docgen-typescript-loader "^3.6.0"
-    semver "7.0.0"
+    "@storybook/channels" "6.0.0-alpha.0"
+    "@storybook/client-logger" "6.0.0-alpha.0"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    telejson "^3.2.0"
 
-"@stroncium/procfs@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@stroncium/procfs/-/procfs-1.0.0.tgz#b7989b3783070e1bc2f25cba7d4eab17e607f770"
-  integrity sha512-EuCojbgxRWqhdCWdYZ0/LhcXfTGXBjqfDhYhHHWQqPG/VihFvRT3P0hIzNZzS2joIGxanVo3AYDGBdVTaw+IJw==
+"@storybook/channel-websocket@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.0.0-alpha.0.tgz#81d10287250b76b0ab5856cb96c4827714f31875"
+  integrity sha512-bbTeYoRTXPjh/eybeOtBrnFGKE2YUmu7S2sCLzvyDbbQCLYuE/qlhFBX23d/xJSzZZz4pCkj687E15MOIXQ3eA==
+  dependencies:
+    "@storybook/channels" "6.0.0-alpha.0"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    json-fn "^1.1.1"
 
-"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
-  integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
+"@storybook/channels@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.0.0-alpha.0.tgz#c86e3bdff2e98444a0e9938a1a4abec503221af4"
+  integrity sha512-0Va1Cajk2X9tQVJKizdDFLKgBJmYakd3ykV1rIYdlPHi+5DndQQ3EqxKrLGE6nQLcKVoxM84Sq8nCLyC891+mw==
+  dependencies:
+    core-js "^3.0.1"
 
-"@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
-  version "4.2.0"
+"@storybook/client-api@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.0.0-alpha.0.tgz#9a6766a9878ee1f41b35debd93d480fef50506c2"
+  integrity sha512-G24H5mFxxptS0G2UwNNxPlV8RM+h6vUxQTmXUtqQoangJPQ/IUm+Ts9QgqDiyHEks9pwYEpSGMAdycZf0IUhJA==
+  dependencies:
+    "@storybook/addons" "6.0.0-alpha.0"
+    "@storybook/channel-postmessage" "6.0.0-alpha.0"
+    "@storybook/channels" "6.0.0-alpha.0"
+    "@storybook/client-logger" "6.0.0-alpha.0"
+    "@storybook/core-events" "6.0.0-alpha.0"
+    "@storybook/csf" "0.0.1"
+    "@types/webpack-env" "^1.15.0"
+    core-js "^3.0.1"
+    eventemitter3 "^4.0.0"
+    global "^4.3.2"
+    is-plain-object "^3.0.0"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    stable "^0.1.8"
+    ts-dedent "^1.1.0"
+    util-deprecate "^1.0.2"
+
+"@storybook/client-logger@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.0.0-alpha.0.tgz#c8dd075d5a4a78158f6acb8ace14cf0492f2af16"
+  integrity sha512-qiML4TiQCFosvxlVGqDbqSy2MA7DuBPclbocliaXEnYAlHzHy5LaQ7OK2SZzigMuim7LOr/eNmqaLAIDVfAjTg==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/core-events@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.0.0-alpha.0.tgz#a35d2f96f6d38aba080d7f5f1ec67799325728de"
+  integrity sha512-BvJvokog7ezWg0rMIYYUA1d1Bi14hy8iZeQyD0s/Q17EMjqZb1ATQ1cPr9lVJ0CpyYOYRJp8IPbvGDnMFkm8YA==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/csf@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
+  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
+  dependencies:
+    lodash "^4.17.15"
+
+"@storybook/ember-cli-storybook@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@storybook/ember-cli-storybook/-/ember-cli-storybook-0.2.1.tgz#12fa8a122fc75a5faabf9e3842eb6575febc4fd3"
+  integrity sha512-V5zqMqMHNrvwI0Ut0X0gnTAf+psbhKGV9HMN810gYZ+4ke3LQGdW4Zvq2CRk/wO6+FPNswImSf7fKEd/nOdaUA==
+  dependencies:
+    broccoli-funnel "^2.0.2"
+    cheerio "^1.0.0-rc.2"
+    ember-cli-addon-docs-yuidoc "^0.2.3"
+    ember-cli-babel "^7.1.2"
+
+"@storybook/eslint-config-storybook@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@storybook/eslint-config-storybook/-/eslint-config-storybook-2.4.0.tgz#b3520544b1d093fc654b29ee2d18dbd56740ce32"
+  integrity sha512-28kL2+Lnu2ujdecfd5MKSU4yEVi3/93k1TGPfR665CdgaJ1KFhVztghnIbeL/3M6sg6TY8muK5ubucIrUrXliw==
+  dependencies:
+    "@storybook/linter-config" "^2.5.0"
+
+"@storybook/linter-config@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@storybook/linter-config/-/linter-config-2.5.0.tgz#15b0e6956773b1994f99676521d9d845ee8882b1"
+  integrity sha512-rsgl4lRIIsFEa1lglhfe4KXq9oCkWa2kPXwkyy5A5lxf39F7nFEhHPfb9lHcY1GtfgZ+Wvepl3dgAzTBTfcMew==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^2.30.0"
+    "@typescript-eslint/parser" "^2.30.0"
+    eslint-config-airbnb "^18.1.0"
+    eslint-config-prettier "^6.11.0"
+    eslint-plugin-html "^6.0.2"
+    eslint-plugin-import "^2.20.2"
+    eslint-plugin-jest "^23.8.2"
+    eslint-plugin-json "^2.1.1"
+    eslint-plugin-json-files "^0.8.1"
+    eslint-plugin-jsx-a11y "^6.2.1"
+    eslint-plugin-prettier "^3.1.3"
+    eslint-plugin-react "^7.19.0"
+    remark-cli "^8.0.0"
+    remark-lint "^7.0.0"
+    remark-preset-lint-recommended "^4.0.0"
+
+"@storybook/node-logger@*", "@storybook/node-logger@^5.2.8":
+  version "5.3.19"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.3.19.tgz#c414e4d3781aeb06298715220012f552a36dff29"
+  integrity sha512-hKshig/u5Nj9fWy0OsyU04yqCxr0A9pydOHIassr4fpLAaePIN2YvqCqE2V+TxQHjZUnowSSIhbXrGt0DI5q2A==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^3.0.0"
+    core-js "^3.0.1"
+    npmlog "^4.1.2"
+    pretty-hrtime "^1.0.3"
+    regenerator-runtime "^0.13.3"
+
+"@storybook/preset-create-react-app@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@storybook/preset-create-react-app/-/preset-create-react-app-3.0.0.tgz#3c75c63f796ffe79293fe7f971a240307ecefb89"
+  integrity sha512-l0yA+HvmjdmTW4c+/dm0n7/CfVaNQKmwRnVuUVF0UAKXEX51wZ/0oX3zALOSUYW9CctOEnJwPETllbepBUEdOg==
+  dependencies:
+    "@storybook/node-logger" "*"
+    "@types/babel__core" "^7.1.7"
+    "@types/webpack" "^4.41.13"
+    babel-plugin-react-docgen "^4.1.0"
+    pnp-webpack-plugin "^1.6.4"
+    react-docgen-typescript-loader "^3.7.2"
+    semver "^7.3.2"
+
+"@storybook/preset-scss@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@storybook/preset-scss/-/preset-scss-1.0.2.tgz#6c993b972c6f599237082b55e12c875f0f66ab06"
+  integrity sha512-Kq+Y3H7qRBxocLW57V9HtQhrw9ZzmTodFCjf+OelMh1k6SZ7/FvJHb7mtWofafHcqq1tSQlNIgYMtHRDJ64WVg==
+
+"@storybook/react-native@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/react-native/-/react-native-6.0.0-alpha.0.tgz#e05090a351d41da756fb0cf9a637a05be15babb4"
+  integrity sha512-36lg/YqDTB2AZquRj4xVORVzNPE+A9E0WysJUn6If2yP3LCQ9y0mMucArKxJinYnW6A6UZptw18gZqOmkYatFg==
+  dependencies:
+    "@emotion/core" "^10.0.20"
+    "@emotion/native" "^10.0.14"
+    "@storybook/addons" "6.0.0-alpha.0"
+    "@storybook/channel-websocket" "6.0.0-alpha.0"
+    "@storybook/channels" "6.0.0-alpha.0"
+    "@storybook/client-api" "6.0.0-alpha.0"
+    "@storybook/core-events" "6.0.0-alpha.0"
+    core-js "^3.0.1"
+    emotion-theming "^10.0.19"
+    react-native-swipe-gestures "^1.0.4"
+
+"@storybook/router@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.0.0-alpha.0.tgz#c2b9da6c7eba0dccf32228a72e23ecf8875aacac"
+  integrity sha512-jpFaJu8SFiHqTqG5bSab7qOMRcAZb5htFjD6zSTb/1a3km9yLJQqYA0Jk0rFBrc89lwd/ngYVBOuOrn/XJRwoA==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/csf" "0.0.1"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    util-deprecate "^1.0.2"
+
+"@storybook/semver@^7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
+  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
+  dependencies:
+    core-js "^3.6.5"
+    find-up "^4.1.0"
+
+"@storybook/theming@6.0.0-alpha.0":
+  version "6.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.0.0-alpha.0.tgz#0a9580cecb1c9609e070c8db7737bd121faf56c3"
+  integrity sha512-XFFpbX2ls1AvbesF64y1q53kMMZYTd/U5EluFmqDsAvoqXVXXKbh8wcguxnMlEHYvgXoDKmzCww+IpmVbAyYcA==
+  dependencies:
+    "@emotion/core" "^10.0.20"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.17"
+    "@storybook/client-logger" "6.0.0-alpha.0"
+    core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.19"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    resolve-from "^5.0.0"
+    ts-dedent "^1.1.0"
+
+"@stroncium/procfs@^1.0.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@stroncium/procfs/-/procfs-1.2.1.tgz#6b9be6fd20fb0a4c20e99a8695e083c699bb2b45"
+  integrity sha512-X1Iui3FUNZP18EUvysTHxt+Avu2nlVzyf90YM8OYgP6SGzTzzX/0JgObfO1AQQDzuZtNNz29bVh8h5R97JrjxA==
+
+"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
+  integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
+
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
+  version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
   integrity sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==
 
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
 "@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
   integrity sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==
 
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
   integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
 
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
 "@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
   integrity sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==
 
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
 "@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
   integrity sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==
 
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
 "@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
   integrity sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==
 
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
 "@svgr/babel-plugin-transform-svg-component@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
   integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
 
+"@svgr/babel-plugin-transform-svg-component@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.4.0.tgz#a2212b4d018e6075a058bb7e220a66959ef7a03c"
+  integrity sha512-zLl4Fl3NvKxxjWNkqEcpdSOpQ3LGVH2BNFQ6vjaK6sFo2IrSznrhURIPI0HAphKiiIwNYjAfE0TNoQDSZv0U9A==
+
 "@svgr/babel-preset@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
@@ -3710,7 +4213,21 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
     "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
 
-"@svgr/core@^4.1.0", "@svgr/core@^4.3.2", "@svgr/core@^4.3.3":
+"@svgr/babel-preset@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.4.0.tgz#da21854643e1c4ad2279239baa7d5a8b128c1f15"
+  integrity sha512-Gyx7cCxua04DBtyILTYdQxeO/pwfTBev6+eXTbVbxe4HTGhOUW6yo7PSbG2p6eJMl44j6XSequ0ZDP7bl0nu9A==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.4.0"
+
+"@svgr/core@^4.1.0", "@svgr/core@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
   integrity sha512-qNuGF1QON1626UCaZamWt5yedpgOytvLj5BQZe2j1k1B8DUG4OyugZyfEwBeXozCUwhLEpsrgPrE+eCu4fY17w==
@@ -3719,6 +4236,15 @@
     camelcase "^5.3.1"
     cosmiconfig "^5.2.1"
 
+"@svgr/core@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.4.0.tgz#655378ee43679eb94fee3d4e1976e38252dff8e7"
+  integrity sha512-hWGm1DCCvd4IEn7VgDUHYiC597lUYhFau2lwJBYpQWDirYLkX4OsXu9IslPgJ9UpP7wsw3n2Ffv9sW7SXJVfqQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.4.0"
+    camelcase "^6.0.0"
+    cosmiconfig "^6.0.0"
+
 "@svgr/hast-util-to-babel-ast@^4.3.2":
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
@@ -3726,7 +4252,14 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
-"@svgr/plugin-jsx@^4.1.0", "@svgr/plugin-jsx@^4.3.2", "@svgr/plugin-jsx@^4.3.3":
+"@svgr/hast-util-to-babel-ast@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.4.0.tgz#bb5d002e428f510aa5b53ec0a02377a95b367715"
+  integrity sha512-+U0TZZpPsP2V1WvVhqAOSTk+N+CjYHdZx+x9UBa1eeeZDXwH8pt0CrQf2+SvRl/h2CAPRFkm+Ey96+jKP8Bsgg==
+  dependencies:
+    "@babel/types" "^7.9.5"
+
+"@svgr/plugin-jsx@^4.1.0", "@svgr/plugin-jsx@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
   integrity sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==
@@ -3736,6 +4269,16 @@
     "@svgr/hast-util-to-babel-ast" "^4.3.2"
     svg-parser "^2.0.0"
 
+"@svgr/plugin-jsx@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.4.0.tgz#ab47504c55615833c6db70fca2d7e489f509787c"
+  integrity sha512-SGzO4JZQ2HvGRKDzRga9YFSqOqaNrgLlQVaGvpZ2Iht2gwRp/tq+18Pvv9kS9ZqOMYgyix2LLxZMY1LOe9NPqw==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@svgr/babel-preset" "^5.4.0"
+    "@svgr/hast-util-to-babel-ast" "^5.4.0"
+    svg-parser "^2.0.2"
+
 "@svgr/plugin-svgo@^4.0.3", "@svgr/plugin-svgo@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
@@ -3745,6 +4288,15 @@
     merge-deep "^3.0.2"
     svgo "^1.2.2"
 
+"@svgr/plugin-svgo@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.4.0.tgz#45d9800b7099a6f7b4d85ebac89ab9abe8592f64"
+  integrity sha512-3Cgv3aYi1l6SHyzArV9C36yo4kgwVdF3zPQUC6/aCDUeXAofDYwE5kk3e3oT5ZO2a0N3lB+lLGvipBG6lnG8EA==
+  dependencies:
+    cosmiconfig "^6.0.0"
+    merge-deep "^3.0.2"
+    svgo "^1.2.2"
+
 "@svgr/webpack@4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.1.0.tgz#20c88f32f731c7b1d4711045b2b993887d731c28"
@@ -3759,21 +4311,7 @@
     "@svgr/plugin-svgo" "^4.0.3"
     loader-utils "^1.1.0"
 
-"@svgr/webpack@4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.2.tgz#319d4471c8f3d5c3af35059274834d9b5b8fb956"
-  integrity sha512-F3VE5OvyOWBEd2bF7BdtFRyI6E9it3mN7teDw0JQTlVtc4HZEYiiLSl+Uf9Uub6IYHVGc+qIrxxDyeedkQru2w==
-  dependencies:
-    "@babel/core" "^7.4.5"
-    "@babel/plugin-transform-react-constant-elements" "^7.0.0"
-    "@babel/preset-env" "^7.4.5"
-    "@babel/preset-react" "^7.0.0"
-    "@svgr/core" "^4.3.2"
-    "@svgr/plugin-jsx" "^4.3.2"
-    "@svgr/plugin-svgo" "^4.3.1"
-    loader-utils "^1.2.3"
-
-"@svgr/webpack@^4.0.3":
+"@svgr/webpack@4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.3.tgz#13cc2423bf3dff2d494f16b17eb7eacb86895017"
   integrity sha512-bjnWolZ6KVsHhgyCoYRFmbd26p8XVbulCzSG53BDQqAr+JOAderYK7CuYrB3bDjHJuF6LJ7Wrr42+goLRV9qIg==
@@ -3787,6 +4325,20 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@svgr/webpack@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.4.0.tgz#b68bc86e29cf007292b96ced65f80971175632e0"
+  integrity sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@babel/plugin-transform-react-constant-elements" "^7.9.0"
+    "@babel/preset-env" "^7.9.5"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.4.0"
+    "@svgr/plugin-jsx" "^5.4.0"
+    "@svgr/plugin-svgo" "^5.4.0"
+    loader-utils "^2.0.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -3794,26 +4346,29 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^6.3.0":
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.10.1.tgz#da5bf5065d3f9e484aef4cc495f4e1a5bea6df2e"
-  integrity sha512-5BPKxaO+zSJDUbVZBRNf9KrmDkm/EcjjaHSg3F9+031VZyPACKXlwLBjVzZxheunT9m72DoIq7WvyE457/Xweg==
+"@testing-library/dom@^7.2.2":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.5.8.tgz#35eb20f1cfd90629a09728954fd916ea142e5de5"
+  integrity sha512-aEK4GDeIk3sHuuF8NNvZrmZg5xfF7llvdlVfjely/fPg/GE4yLa0cVZEBWpS6oVUBk2tEXjwTDPFnMOe/M0GTQ==
   dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@sheerun/mutationobserver-shim" "^0.3.2"
-    "@types/testing-library__dom" "^6.0.0"
-    aria-query "3.0.0"
-    pretty-format "^24.9.0"
-    wait-for-expect "^3.0.0"
+    "@babel/runtime" "^7.9.6"
+    aria-query "^4.0.2"
+    dom-accessibility-api "^0.4.4"
+    pretty-format "^25.5.0"
 
-"@testing-library/react@^9.2.0":
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.3.2.tgz#418000daa980dafd2d9420cc733d661daece9aa0"
-  integrity sha512-J6ftWtm218tOLS175MF9eWCxGp+X+cUXCpkPIin8KAXWtyZbr9CbqJ8M8QNd6spZxJDAGlw+leLG4MJWLlqVgg==
+"@testing-library/react@^10.0.3", "@testing-library/react@^10.0.4":
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d"
+  integrity sha512-2e1B5debfuiIGbvUuiSXybskuh7ZTVJDDvG/IxlzLOY9Co/mKFj9hIklAe2nGZYcOUxFaiqWrRZ9vCVGzJfRlQ==
   dependencies:
-    "@babel/runtime" "^7.6.0"
-    "@testing-library/dom" "^6.3.0"
-    "@types/testing-library__react" "^9.1.0"
+    "@babel/runtime" "^7.9.6"
+    "@testing-library/dom" "^7.2.2"
+    "@types/testing-library__react" "^10.0.1"
+
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
 "@types/acorn@^4.0.3":
   version "4.0.5"
@@ -3828,9 +4383,9 @@
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
 "@types/autoprefixer@^9.4.0":
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/@types/autoprefixer/-/autoprefixer-9.6.1.tgz#8bfaf43d18f5cd59a269b7a2364e690cadcdf210"
-  integrity sha512-9aofAxm/OWxzu/Fq7lU/m2rX03f9Sr1OXF/3kEp6FNFYRFLgFcIUjxhNGgWqc5KMpXbkqxlJmc7wfab7jFj2dw==
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@types/autoprefixer/-/autoprefixer-9.7.2.tgz#64b3251c9675feef5a631b7dd34cfea50a8fdbcc"
+  integrity sha512-QX7U7YW3zX3ex6MECtWO9folTGsXeP4b8bSjTq3I1ODM+H+sFHwGKuof+T+qBcDClGlCGtDb3SVfiTVfmcxw4g==
   dependencies:
     "@types/browserslist" "*"
     postcss "7.x.x"
@@ -3840,10 +4395,10 @@
   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.3"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
-  integrity sha512-8fBo0UR2CcwWxeX7WIIgJ7lXjasFxoYgRnFHUj+hRvKkpiBJbxhdAPTCY6/ZKM0uxANFVzt4yObSLuTiTnazDA==
+"@types/babel__core@^7.1.0", "@types/babel__core@^7.1.7":
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
+  integrity sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -3852,9 +4407,9 @@
     "@types/babel__traverse" "*"
 
 "@types/babel__generator@*":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.0.tgz#f1ec1c104d1bb463556ecb724018ab788d0c172a"
-  integrity sha512-c1mZUu4up5cp9KROs/QAw0gTeHrw/x7m52LcnvMxxOZ03DmLwPV0MlGmlgzV3cnSdjhJOZsj7E7FHeioai+egw==
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.1.tgz#4901767b397e8711aeb99df8d396d7ba7b7f0e04"
+  integrity sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==
   dependencies:
     "@babel/types" "^7.0.0"
 
@@ -3867,9 +4422,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.8.tgz#479a4ee3e291a403a1096106013ec22cf9b64012"
-  integrity sha512-yGeB2dHEdvxjP0y4UbRtQaSkXJ9649fYCmIdRoul5kfAoGCwxuCbMhag0k3RPfnuh9kPGm8x89btcfDEXdVWGw==
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.11.tgz#1ae3010e8bf8851d324878b42acec71986486d18"
+  integrity sha512-ddHK5icION5U6q11+tV2f9Mo6CZVuT8GJKld2q9LqHSZbvLbH34Kcu2yFGckZut453+eQU6btIA3RihmnRgI+Q==
   dependencies:
     "@babel/types" "^7.3.0"
 
@@ -3880,54 +4435,81 @@
   dependencies:
     "@types/babel-types" "*"
 
+"@types/body-parser@*":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f"
+  integrity sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/braces@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/braces/-/braces-3.0.0.tgz#7da1c0d44ff1c7eb660a36ec078ea61ba7eb42cb"
+  integrity sha512-TbH79tcyi9FHwbyboOKeRachRq63mSuWYXOflsNO9ZyE5ClQ/JaozNKl+aWUq87qPNsXasXxi2AbgfwIJ+8GQw==
+
 "@types/browserslist@*":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@types/browserslist/-/browserslist-4.4.0.tgz#e2a5f7f8c7e97afb39f50812a77e5230d3ca2353"
-  integrity sha512-hrIjWSu7Hh96/rKlpChe58qHEwIZ0+F5Zf4QNdvSVP5LUXbaJM04g9tBjo702VTNqPZr5znEJeqNR3nAV3vJPg==
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@types/browserslist/-/browserslist-4.8.0.tgz#60489aefdf0fcb56c2d8eb65267ff08dad7a526d"
+  integrity sha512-4PyO9OM08APvxxo1NmQyQKlJdowPCOQIy5D/NLO3aO0vGC57wsMptvGp3b8IbYnupFZr92l1dlVief1JvS6STQ==
 
-"@types/bunyan@^1.8.6":
-  version "1.8.6"
-  resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
-  integrity sha512-YiozPOOsS6bIuz31ilYqR5SlLif4TBWsousN2aCWLi5233nZSX19tFbcQUPdR7xJ8ypPyxkCGNxg0CIV5n9qxQ==
+"@types/chai-as-promised@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@types/chai-as-promised/-/chai-as-promised-7.1.2.tgz#2f564420e81eaf8650169e5a3a6b93e096e5068b"
+  integrity sha512-PO2gcfR3Oxa+u0QvECLe1xKXOqYTzCmWf0FhLhjREoW3fPAVamjihL7v1MOVLJLsnAMdLcjkfrs01yvDMwVK4Q==
   dependencies:
-    "@types/node" "*"
+    "@types/chai" "*"
+
+"@types/chai@*", "@types/chai@^4.2.9":
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.11.tgz#d3614d6c5f500142358e6ed24e1bf16657536c50"
+  integrity sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==
 
 "@types/cheerio@*":
-  version "0.22.14"
-  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.14.tgz#d150889891e7db892c6a0b16bd5583cc70b3fc44"
-  integrity sha512-SVtcP2fvPYrebTwpyqxjxb7K5v3ZOAdH409yAEWFPpZThCSGa1K2IFfx6Rg6ttvThCBQXP4fU9WF94sqLoiQGg==
+  version "0.22.18"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.18.tgz#19018dceae691509901e339d63edf1e935978fe6"
+  integrity sha512-Fq7R3fINAPSdUEhOyjG4iVxgHrOnqDJbY0/BUuiN0pvD/rfmZWekVZnv+vcs8TtpA2XF50uv50LaE4EnpEL/Hw==
   dependencies:
     "@types/node" "*"
 
-"@types/cli-table@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@types/cli-table/-/cli-table-0.3.0.tgz#f1857156bf5fd115c6a2db260ba0be1f8fc5671c"
-  integrity sha512-QnZUISJJXyhyD6L1e5QwXDV/A5i2W1/gl6D6YMc8u0ncPepbv/B4w3S+izVvtAg60m6h+JP09+Y/0zF2mojlFQ==
-
-"@types/clone@^0.1.29":
-  version "0.1.30"
-  resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
-  integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
-
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/connect@*":
+  version "3.4.33"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.33.tgz#31610c901eca573b8713c3330abc6e6b9f588546"
+  integrity sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/core-js@^2.5.0":
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.2.tgz#d4c25420044d4a5b65e00a82fc04b7824b62691f"
-  integrity sha512-+NPqjXgyA02xTHKJDeDca9u8Zr42ts6jhdND4C3PrPeQ35RJa0dmfAedXW7a9K4N1QcBbuWI1nSfGK4r1eVFCQ==
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.3.tgz#d2f307f708f897f875d312501e3b4a2fd4481d41"
+  integrity sha512-F9RHpjuPSit4dCCRXgi7XcqA01DAjy9QY+v9yICoxXsjXD9cgQpyZyL2eSZnTkBGXGaQnea8waZOZTogLDB+rA==
+
+"@types/cross-spawn@^6.0.1":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.2.tgz#168309de311cd30a2b8ae720de6475c2fbf33ac7"
+  integrity sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/detect-port@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/detect-port/-/detect-port-1.3.0.tgz#3e9cbd049ec29e84a2ff7852dbc629c81245774c"
+  integrity sha512-NnDUDk1Ry5cHljTFetg0BNT79FaJSddTh9RsGOS2v/97DwOUJ+hBkgxtQHF6T8IarZD4i+bFEL787Nz+xpodfA==
 
 "@types/doctrine@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.3.tgz#e892d293c92c9c1d3f9af72c15a554fbc7e0895a"
   integrity sha1-6JLSk8ksnB0/mvcsFaVU+8fgiVo=
 
-"@types/enzyme@^3.10.3", "@types/enzyme@^3.9.0":
-  version "3.10.3"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.3.tgz#02b6c5ac7d0472005944a652e79045e2f6c66804"
-  integrity sha512-f/Kcb84sZOSZiBPCkr4He9/cpuSLcKRyQaEE20Q30Prx0Dn6wcyMAWI0yofL6yvd9Ht9G7EVkQeRqK0n5w8ILw==
+"@types/enzyme@^3.10.3", "@types/enzyme@^3.10.5", "@types/enzyme@^3.9.0":
+  version "3.10.5"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
+  integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
@@ -3947,7 +4529,12 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
-"@types/estree@*", "@types/estree@0.0.39":
+"@types/estree@*", "@types/estree@^0.0.44":
+  version "0.0.44"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.44.tgz#980cc5a29a3ef3bea6ff1f7d021047d7ea575e21"
+  integrity sha512-iaIVzr+w2ZJ5HkidlZ3EJM8VTZb2MJLCjw3V+505yVts0gRC4UMvjw0d1HPtGqI/HQC/KdsYtayfzl+AXY2R8g==
+
+"@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
@@ -3957,10 +4544,36 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
-"@types/fbemitter@^2.0.32":
-  version "2.0.32"
-  resolved "https://registry.yarnpkg.com/@types/fbemitter/-/fbemitter-2.0.32.tgz#8ed204da0f54e9c8eaec31b1eec91e25132d082c"
-  integrity sha1-jtIE2g9U6cjq7DGx7skeJRMtCCw=
+"@types/express-serve-static-core@*":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.7.tgz#dfe61f870eb549dc6d7e12050901847c7d7e915b"
+  integrity sha512-EMgTj/DF9qpgLXyc+Btimg+XoH7A2liE8uKul8qSmMTHCeNYzydDKFdsJskDvw42UsesCnhO63dO0Grbj8J4Dw==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+
+"@types/express@^4.17.2", "@types/express@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.6.tgz#6bce49e49570507b86ea1b07b806f04697fac45e"
+  integrity sha512-n/mr9tZI83kd4azlPG5y997C/M4DNABK9yErhFM6hKdym4kkmd9j0vtsJyjFIwfRBxtrxZtAfGZCNRIBMFLK5w==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "*"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/fs-extra@^5.0.5":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-5.1.0.tgz#2a325ef97901504a3828718c390d34b8426a10a1"
+  integrity sha512-AInn5+UBFIK9FK5xc9yP5e3TQSPNNgjHByqYcj9g5elVBnDQcQL7PlO1CIRy2gWlbwK7UPYqi7vRvFA44dCmYQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/glob-base@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@types/glob-base/-/glob-base-0.3.0.tgz#a581d688347e10e50dd7c17d6f2880a10354319d"
+  integrity sha1-pYHWiDR+EOUN18F9byiAoQNUMZ0=
 
 "@types/glob@*", "@types/glob@^7.1.1":
   version "7.1.1"
@@ -3971,72 +4584,60 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hapi__joi@*":
-  version "16.0.3"
-  resolved "https://registry.yarnpkg.com/@types/hapi__joi/-/hapi__joi-16.0.3.tgz#8ed6a0bd3a3fc40c0b5ff41b399004c5f9bb0b0b"
-  integrity sha512-gPxCfPcdZx9220GP4MFlhyBonQuyy8c/NZkGJkdtGipaExFzNLGYzkH2eG+yo0eEoVWdSC/JxhokSR/IHfap8Q==
-
-"@types/hapi__joi@^15.0.4":
-  version "15.0.4"
-  resolved "https://registry.yarnpkg.com/@types/hapi__joi/-/hapi__joi-15.0.4.tgz#49e2e1e6da15ade0fdd6db4daf94aecb07bb391b"
-  integrity sha512-VSS6zc7AIOdHVXmqKaGNPYl8eGrMvWi0R5pt3evJL3UdxO8XS28/XAkBXNyLQoymHxhMd4bF3o1U9mZkWDeN8w==
+"@types/graceful-fs@^4.1.2":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.3.tgz#039af35fe26bec35003e8d86d2ee9c586354348f"
+  integrity sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==
   dependencies:
-    "@types/hapi__joi" "*"
+    "@types/node" "*"
 
 "@types/history@*":
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
-  integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.6.tgz#ed8fc802c45b8e8f54419c2d054e55c9ea344356"
+  integrity sha512-GRTZLeLJ8ia00ZH8mxMO8t0aC9M1N9bN461Z2eaRurJo6Fpa+utgCwLzI4jQHcrdzuzp5WPN9jRwpsCQ1VhJ5w==
 
-"@types/hoist-non-react-statics@^3.3.0":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
+"@types/html-minifier-terser@^5.0.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
+  integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
-"@types/invariant@^2.2.29", "@types/invariant@^2.2.30":
-  version "2.2.30"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
-  integrity sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==
+"@types/inquirer@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-6.5.0.tgz#b83b0bf30b88b8be7246d40e51d32fe9d10e09be"
+  integrity sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==
+  dependencies:
+    "@types/through" "*"
+    rxjs "^6.4.0"
 
 "@types/is-function@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
   integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
-  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz#79d7a78bad4219f4c03d6557a1c72d9ca6ba62d5"
+  integrity sha512-rsZg7eL+Xcxsxk2XlBt9KcG8nOp9iYdKCOikY9x2RFJCyOdNj4MKPQty0e8oZr29vVAzKXr1BmR+kZauti3o1w==
 
 "@types/istanbul-lib-report@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
-  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
+  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest-diff@*":
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-24.3.0.tgz#29e237a3d954babfe6e23cc59b57ecd8ca8d858d"
-  integrity sha512-vx1CRDeDUwQ0Pc7v+hS61O1ETA81kD04IMEC0hS1kPyVtHDdZrokAvpF7MT9VI/fVSzicelUZNCepDvhRV1PeA==
-  dependencies:
-    jest-diff "*"
-
 "@types/jest-image-snapshot@^2.8.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@types/jest-image-snapshot/-/jest-image-snapshot-2.11.0.tgz#cd5d0188e2733df7903fa0f5fbc408b0fcf3998f"
-  integrity sha512-/k58otqJ/X/RZeTyaPYmnSzA/0Ni0WouIVT87pWuCuzWseToJ1uAIo5RrsNn79zOg6Jqo08r2pD5tjTkW7JSbQ==
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/@types/jest-image-snapshot/-/jest-image-snapshot-2.12.1.tgz#75d16c392f16055e90884ed6a7538a6a9a540cfe"
+  integrity sha512-zOipq8+oJr4z/EqN9r0qu5xoHTjqEK47BDs3MTf0z8fsEr0vzLMeoqLOLpCjr9Depi4umGR5C1V9T3gjNUY+FQ==
   dependencies:
     "@types/jest" "*"
 
@@ -4047,115 +4648,140 @@
   dependencies:
     "@types/jest" "*"
 
-"@types/jest@*", "@types/jest@24.0.23", "@types/jest@^24.0.11", "@types/jest@^24.0.16":
-  version "24.0.23"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.23.tgz#046f8e2ade026fe831623e361a36b6fb9a4463e4"
-  integrity sha512-L7MBvwfNpe7yVPTXLn32df/EK+AMBFAFvZrRuArGs7npEWnlziUXK+5GMIUTI4NIuwok3XibsjXCs5HxviYXjg==
+"@types/jest@*", "@types/jest@^25.1.1":
+  version "25.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf"
+  integrity sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==
   dependencies:
-    jest-diff "^24.3.0"
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
 
-"@types/jest@24.0.22":
-  version "24.0.22"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.22.tgz#08a50be08e78aba850a1185626e71d31e2336145"
-  integrity sha512-t2OvhNZnrNjlzi2i0/cxbLVM59WN15I2r1Qtb7wDv28PnV9IzrPtagFRey/S9ezdLD0zyh1XGMQIEQND2YEfrw==
+"@types/jest@25.2.1":
+  version "25.2.1"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.1.tgz#9544cd438607955381c1bdbdb97767a249297db5"
+  integrity sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==
   dependencies:
-    "@types/jest-diff" "*"
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
 
-"@types/jest@^23.0.2", "@types/jest@^23.3.1":
+"@types/jest@^23.0.2":
   version "23.3.14"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.14.tgz#37daaf78069e7948520474c87b80092ea912520a"
   integrity sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug==
 
+"@types/js-yaml@^3.12.4":
+  version "3.12.4"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.4.tgz#7d3b534ec35a0585128e2d332db1403ebe057e25"
+  integrity sha512-fYMgzN+9e28R81weVN49inn/u798ruU91En1ZnGvSZzCRc5jXx9B2EDhlRaWmcO1RIxFHL8AajRXzxDuJu93+A==
+
 "@types/json-schema@^7.0.3":
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
-  integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
+  integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/lodash.zipobject@^4.1.4":
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.zipobject/-/lodash.zipobject-4.1.6.tgz#75e140f44ac7d7682a18d3aae8ee4594fad094d7"
-  integrity sha512-30khEHqHWaLgMZR35wtkg07OmHiNiDQyor0SK7oj8Sy05tg6jDjPmJybeZ64WKeFZUEgs1tdJwdT0xUl+2qUgQ==
+"@types/lodash@^4.14.150":
+  version "4.14.152"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.152.tgz#7e7679250adce14e749304cdb570969f77ec997c"
+  integrity sha512-Vwf9YF2x1GE3WNeUMjT5bTHa2DqgUo87ocdgTScupY2JclZ5Nn7W2RLM/N0+oreexUk8uaVugR81NnTY/jNNXg==
+
+"@types/markdown-to-jsx@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.0.tgz#a19e458a9415763859f2c92c4c5b07a80bea8c14"
+  integrity sha512-OFFHQ3LK+g8lSfwdqjXBbrGFdgH/MYXhzIYSOJ5xapT++eEhRx7wOfY3xxtktVtQyQtsB7Wljs7IDGgKfurm2A==
   dependencies:
-    "@types/lodash" "*"
+    "@types/react" "*"
 
-"@types/lodash@*", "@types/lodash@^4.14.149":
-  version "4.14.149"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
-  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+"@types/mdast@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
+  integrity sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==
+  dependencies:
+    "@types/unist" "*"
 
-"@types/mini-css-extract-plugin@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#6a5d3459d40cb51f14059e9aa410c9e970656103"
-  integrity sha512-L7OKmXudo048RMw/NeLjJMNRAbyXG76b3uGZ49OKe03imYEplx0JzcM0goVNc7X1IeESf2Bk9RP+tS1U3OSmVg==
+"@types/micromatch@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/micromatch/-/micromatch-4.0.1.tgz#9381449dd659fc3823fd2a4190ceacc985083bc7"
+  integrity sha512-my6fLBvpY70KattTNzYOK6KU1oR1+UCz9ug/JbcF5UrEmeCt9P7DV2t7L8+t18mMPINqGQCE4O8PLOPbI84gxw==
   dependencies:
-    "@types/webpack" "*"
+    "@types/braces" "*"
+
+"@types/mime-types@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.0.tgz#9ca52cda363f699c69466c2a6ccdaad913ea7a73"
+  integrity sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=
+
+"@types/mime@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.2.tgz#857a118d8634c84bba7ae14088e4508490cd5da5"
+  integrity sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q==
 
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-"@types/mithril@^1.1.16":
-  version "1.1.17"
-  resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-1.1.17.tgz#1a5dde2a653ef6011cd36ef70eefe6bac0cb92e4"
-  integrity sha512-U/wwKZT8hjstY2Q470bLMGVh/fjT2+SgBMzIILn0Z4nmgzzG6j+n18UOAxQ63aI8vXIOkQsbkAdbESt8+jIQdQ==
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
 "@types/mithril@^2.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-2.0.2.tgz#29a6e32103769b29840ae25f5bf75bb382801a15"
-  integrity sha512-q0W5GGjWNxwmKPcfkkQJqSUIVr7yvMz1zH2enWDab8yDqvZuEgkR4+mcf1O70Wnreawg8OH4axfACDVdg2zskQ==
-
-"@types/node@*", "@types/node@>= 8", "@types/node@^12.12.11":
-  version "12.12.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.12.tgz#529bc3e73dbb35dd9e90b0a1c83606a9d3264bdb"
-  integrity sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ==
-
-"@types/node@12.12.11":
-  version "12.12.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.11.tgz#bec2961975888d964196bf0016a2f984d793d3ce"
-  integrity sha512-O+x6uIpa6oMNTkPuHDa9MhMMehlxLAd5QcOvKRjAFsBVpeFWTOPnXbDvILvFgFFZfQ1xh1EZi1FbXxUix+zpsQ==
-
-"@types/node@12.12.6":
-  version "12.12.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.6.tgz#a47240c10d86a9a57bb0c633f0b2e0aea9ce9253"
-  integrity sha512-FjsYUPzEJdGXjwKqSpE0/9QEh6kzhTAeObA54rn6j3rR4C/mzpI9L0KNfoeASSPMMdxIsoJuCLDWcM/rVjIsSA==
-
-"@types/node@^6.0.0":
-  version "6.14.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.14.9.tgz#733583e21ef0eab85a9737dfafbaa66345a92ef0"
-  integrity sha512-leP/gxHunuazPdZaCvsCefPQxinqUDsCxCR5xaDUrY2MkYxQRFZZwU5e7GojyYsGB7QVtCi7iVEl/hoFXQYc+w==
-
-"@types/node@^9.4.6":
-  version "9.6.55"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.55.tgz#7cc1358c9c18e71f6c020e410962971863232cf5"
-  integrity sha512-e/5tg8Ok0gSrN6pvHphnwTK0/CD9VPZrtZqpvvpEFAtfs+ZntusgGaWkf2lSEq1OFe2EDPeUMiMVpy4nZpJ4AQ==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-2.0.3.tgz#f24a764515d9b17095845838b12f2444757d93fa"
+  integrity sha512-cZHOdO2IiXYeyjeDYdbOisSdfaJRzfmRo3zVzgu33IWTMA0KEQObp9fdvqcuYdPz93iJ1yCl19GcEjo/9yv+yA==
+
+"@types/node-cleanup@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/node-cleanup/-/node-cleanup-2.1.1.tgz#c8f78a648897d2a40ed10632268ce15d343cc191"
+  integrity sha512-Q1s5Sszz6YfhaGr1pbaZihr9IYaiQT0aOK/3c2qb9lOUbEBhcAb9ZEU7RBTtopnHSIJF80adLRcOGTay2W5QVQ==
+
+"@types/node-fetch@^2.5.4":
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.7.tgz#20a2afffa882ab04d44ca786449a276f9f6bbf3c"
+  integrity sha512-o2WVNf5UhWRkxlf6eq+jMZDu7kjgpgJfl4xVNlvryc95O/6F2ld8ztKX+qu+Rjyet93WAWm5LjeX9H5FGkODvw==
+  dependencies:
+    "@types/node" "*"
+    form-data "^3.0.0"
+
+"@types/node@*", "@types/node@14.0.10", "@types/node@>= 8", "@types/node@^14.0.10":
+  version "14.0.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.10.tgz#dbfaa170bd9eafccccb6d7060743a761b0844afd"
+  integrity sha512-Bz23oN/5bi0rniKT24ExLf4cK0JdvN3dH/3k0whYkdN4eI4vS2ZW/2ENNn2uxHCzWcbdHIa/GRuWQytfzCjRYw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
-"@types/npmlog@^4.1.1":
+"@types/npmlog@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
   integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
 
+"@types/overlayscrollbars@^1.9.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz#98456caceca8ad73bd5bb572632a585074e70764"
+  integrity sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/parse5@^2.2.32":
-  version "2.2.34"
-  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-2.2.34.tgz#e3870a10e82735a720f62d71dcd183ba78ef3a9d"
-  integrity sha1-44cKEOgnNacg9i1x3NGDunjvOp0=
-  dependencies:
-    "@types/node" "*"
+"@types/prettier@^1.19.0":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
+  integrity sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==
+
+"@types/prettier@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.1.tgz#b6e98083f13faa1e5231bfa3bdb1b0feff536b6d"
+  integrity sha512-boy4xPNEtiw6N3abRhBi/e7hNvy3Tt8E9ZRAQrwAGzoCGZS/1wjo9KY7JHhnfnEsG5wSjDbymCozUM9a3ea7OQ==
 
 "@types/pretty-hrtime@^1.0.0":
   version "1.0.0"
@@ -4167,10 +4793,24 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/puppeteer@^2.0.0":
+"@types/puppeteer-core@^2.0.0":
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-2.0.0.tgz#82c04f93367e2d3396e371a71be1167332148838"
-  integrity sha512-QPHXIcaPcijMbvizoM7PRL97Rm+aM8J2DmgTz2tt79b15PqbyeaCppYonvPLHQ/Q5ea92BUHDpv4bsqtiTy8kQ==
+  resolved "https://registry.yarnpkg.com/@types/puppeteer-core/-/puppeteer-core-2.0.0.tgz#3b7fbbac53d56b566f5ef096116e1d60d504aa45"
+  integrity sha512-JvoEb7KgEkUet009ZDrtpUER3hheXoHgQByuYpJZ5WWT7LWwMH+0NTqGQXGgoOKzs+G5NA1T4DZwXK79Bhnejw==
+  dependencies:
+    "@types/puppeteer" "*"
+
+"@types/puppeteer@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-3.0.0.tgz#24cdcc131e319477608d893f0017e08befd70423"
+  integrity sha512-59+fkfHHXHzX5rgoXIMnZyzum7ZLx/Wc3fhsOduFThpTpKbzzdBHMZsrkKGLunimB4Ds/tI5lXTRLALK8Mmnhg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/puppeteer@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-2.1.1.tgz#dfbec9de3db4328ec9b66ab2cbb1875033bc22f6"
+  integrity sha512-FqPZvUtnpTGrqbHvPUn76pvVcBPEVEqZftrdOjr6YRkaaxkjKQ8dQLNaQBjER7Lvd1Q6+0R0XR+N3tYGWBSzNw==
   dependencies:
     "@types/node" "*"
 
@@ -4180,122 +4820,147 @@
   integrity sha1-vShOV8hPEyXacCur/IKlMoGQwMU=
 
 "@types/q@^1.5.1":
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
-  integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
+  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/qs@^6.5.1":
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.0.tgz#2a5fa918786d07d3725726f7f650527e1cfeaffd"
-  integrity sha512-c4zji5CjWv1tJxIZkz1oUtGcdOlsH3aza28Nqmm+uNDWBRHoMsjooBEN4czZp1V3iXPihE/VRUOBqg+4Xq0W4g==
+"@types/qs@*", "@types/qs@^6.9.0":
+  version "6.9.3"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.3.tgz#b755a0934564a200d3efdf88546ec93c369abd03"
+  integrity sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==
 
-"@types/reach__router@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.6.tgz#b14cf1adbd1a365d204bbf6605cd9dd7b8816c87"
-  integrity sha512-Oh5DAVr/L2svBvubw6QEFpXGu295Y406BPs4i9t1n2pp7M+q3pmCmhzb9oZV5wncR41KCD3NHl1Yhi7uKnTPsA==
+"@types/range-parser@*":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
+  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
+
+"@types/reach__router@^1.2.3", "@types/reach__router@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.5.tgz#14e1e981cccd3a5e50dc9e969a72de0b9d472f6d"
+  integrity sha512-h0NbqXN/tJuBY/xggZSej1SKQEstbHO7J/omt1tYoFGmj3YXOodZKbbqD4mNDh7zvEGYd7YFrac1LTtAr3xsYQ==
   dependencies:
     "@types/history" "*"
     "@types/react" "*"
 
 "@types/react-color@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
-  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.2.tgz#41bc40f564eb058fb0822c1742438bcd0b823249"
+  integrity sha512-FhrRy0xEYEpysl1iKL11ynJc79H6ztyYc4xD1pliZyygEChleTlHGohb/bClTYPN8XeSw6yaz45l3YW5SGYftQ==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@16.9.4":
-  version "16.9.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
-  integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
+"@types/react-dom@*", "@types/react-dom@^16.9.8":
+  version "16.9.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
+  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-lifecycles-compat@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.1.tgz#a0b1fe18cfb9435bd52737829a69cbe93faf32e2"
-  integrity sha512-4KiU5s1Go4xRbf7t6VxUUpBeN5PGjpjpBv9VvET4uiPHC500VNYBclU13f8ehHkHoZL39b2cfwHu6RzbV3b44A==
+"@types/react-dom@16.9.7":
+  version "16.9.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2"
+  integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@^0.57.57":
-  version "0.57.65"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.65.tgz#9da4773aaa95924bce42a54a5c19cfd8ffd5022b"
-  integrity sha512-7P5ulTb+/cnwbABWaAjzKmSYkRWeK7UCTfUwHhDpnwxdiL2X/KbdN1sPgo0B2E4zxfYE3MEoHv7FhB8Acfvf8A==
+"@types/react-is@^16.7.1":
+  version "16.7.1"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.7.1.tgz#d3f1c68c358c00ce116b55ef5410cf486dd08539"
+  integrity sha512-dMLFD2cCsxtDgMkTydQCM0PxDq8vwc6uN5M/jRktDfYvH3nQj6pjC9OrCXS2lKlYoYTNJorI/dI8x9dpLshexQ==
   dependencies:
-    "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react-redux@^7.0.6":
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.5.tgz#c7a528d538969250347aa53c52241051cf886bd3"
-  integrity sha512-ZoNGQMDxh5ENY7PzU7MVonxDzS1l/EWiy8nUhDqxFqUZn4ovboCyvk4Djf68x6COb7vhGTKjyjxHxtFdAA5sUA==
+"@types/react-lifecycles-compat@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.1.tgz#a0b1fe18cfb9435bd52737829a69cbe93faf32e2"
+  integrity sha512-4KiU5s1Go4xRbf7t6VxUUpBeN5PGjpjpBv9VvET4uiPHC500VNYBclU13f8ehHkHoZL39b2cfwHu6RzbV3b44A==
   dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
 
-"@types/react-select@^3.0.4":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.8.tgz#b824a12d438dd493c30ffff49a805f797602a837"
-  integrity sha512-0763TXYZc8bTiHM+DUnWoy9Rg5mk6PxYWBrEe6Fkjgc0Kv0r1RqjZk9/BrK4wdM0RNjYjixlFPnUhOJb76sMGg==
+"@types/react-select@^3.0.12":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.13.tgz#b1a05eae0f65fb4f899b4db1f89b8420cb9f3656"
+  integrity sha512-JxmSArGgzAOtb37+Jz2+3av8rVmp/3s3DGwlcP+g59/a3owkiuuU4/Jajd+qA32beDPHy4gJR2kkxagPY3j9kg==
   dependencies:
     "@types/react" "*"
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
-"@types/react-syntax-highlighter@11.0.2":
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#a2e3ff657d7c47813f80ca930f3d959c31ec51e3"
-  integrity sha512-iMNcixH8330f2dq0RY+VOXCP8JFehgmOhLOtnO85Ty+qu0fHXJNEqWx5VuFv8v0aEq0U/N9d/k1yvA+c6PEmPw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-textarea-autosize@^4.3.3":
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
-  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
+"@types/react-syntax-highlighter@11.0.4", "@types/react-syntax-highlighter@^11.0.4":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
+  integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
   dependencies:
     "@types/react" "*"
 
 "@types/react-transition-group@*":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470"
-  integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.14":
-  version "16.9.13"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.13.tgz#b3ea5dd443f4a680599e2abba8cc66f5e1ce0059"
-  integrity sha512-LikzRslbiufJYHyzbHSW0GrAiff8QYLMBFeZmSxzCYGXKxi8m/1PHX+rsVOwhr7mJNq+VIu2Dhf7U6mjFERK6w==
+"@types/react@*", "@types/react@^16.0.0", "@types/react@^16.9.27", "@types/react@^16.9.35":
+  version "16.9.35"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
+  integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/react@16.9.11":
-  version "16.9.11"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
-  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
+"@types/react@16.9.34":
+  version "16.9.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
+  integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/retry@^0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
-  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+"@types/rfdc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/rfdc/-/rfdc-1.1.0.tgz#1fc5ffdc679575e2ca31399d4ee75f353afdd37b"
+  integrity sha512-Ez0Pc0H6m8C2L3Wif9SR5YlJTB/UnZIq0N9G/dPB2fmGo42oLo95o73hHHtoGvUucMD4OdlquscflSuKCZE8qA==
+
+"@types/rimraf@^2.0.2":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-2.0.4.tgz#403887b0b53c6100a6c35d2ab24f6ccc042fec46"
+  integrity sha512-8gBudvllD2A/c0CcEX/BivIDorHFt5UI5m46TsNj8DjWCCTTZT74kEe4g+QsY7P/B9WdO98d82zZgXO/RQzu2Q==
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
 
 "@types/selenium-webdriver@^3.0.0":
-  version "3.0.16"
-  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.16.tgz#50a4755f8e33edacd9c406729e9b930d2451902a"
-  integrity sha512-lMC2G0ItF2xv4UCiwbJGbnJlIuUixHrioOhNGHSCsYCJ8l4t9hMCUimCytvFv7qy6AfSzRxhRHoGa+UqaqwyeA==
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.17.tgz#50bea0c3c2acc31c959c5b1e747798b3b3d06d4b"
+  integrity sha512-tGomyEuzSC1H28y2zlW6XPCaDaXFaD6soTdb4GNdmte2qfHtrKqhy0ZFs4r/1hpazCfEZqeTSRLvSasmEx89uw==
 
-"@types/semver@^6.0.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.0.tgz#d688d574400d96c5b0114968705366f431831e1a"
-  integrity sha512-1OzrNb4RuAzIT7wHSsgZRlMBlNsJl+do6UblR7JMW4oB7bbR+uBEYtUh7gEc/jM84GGilh68lSOokyM/zNUlBA==
+"@types/semver@^7.1.0", "@types/semver@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.2.0.tgz#0d72066965e910531e1db4621c15d0ca36b8d83b"
+  integrity sha512-TbB0A8ACUWZt3Y6bQPstW9QNbhNeebdgLX4T/ZfkrswAfUzRiXrgd9seol+X379Wa589Pu4UEx9Uok0D4RjRCQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/serve-static@*", "@types/serve-static@^1.13.3":
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.4.tgz#6662a93583e5a6cabca1b23592eb91e12fa80e7c"
+  integrity sha512-jTDt0o/YbpNwZbQmE/+2e+lfjJEJJR0I3OFaKQKPWkASkCoW3i6fsUnqudSMcNAfbtmADGu8f4MV4q+GqULmug==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
+"@types/shelljs@^0.8.7":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.8.tgz#e439c69929b88a2c8123c1a55e09eb708315addf"
+  integrity sha512-lD3LWdg6j8r0VRBFahJVaxoW0SIcswxKaFUrmKl33RJVeeoNYQAz4uqCJ5Z6v4oIBOsC5GozX+I5SorIKiTcQA==
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
+"@types/sinonjs__fake-timers@6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"
+  integrity sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA==
 
 "@types/sizzle@2.3.2":
   version "2.3.2"
@@ -4317,83 +4982,84 @@
   resolved "https://registry.yarnpkg.com/@types/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz#4151a81b4052c80bc2becbae09f3a9ec010a9c7a"
   integrity sha512-Lja2xYuuf2B3knEsga8ShbOdsfNOtzT73GyJmZyY7eGl2+ajOqrs8yM5ze0fsSoYwvA6bw7/Qr7OZ7PEEmYwWg==
 
-"@types/tapable@*":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
-  integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
-
-"@types/tapable@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd"
-  integrity sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==
+"@types/tapable@*", "@types/tapable@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
+  integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
 
-"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"
-  integrity sha512-mL/GMlyQxiZplbUuFNwA0vAI3k3uJNSf6slr5AVve9TXmfLfyefNT0uHHnxwdYuPMxYD5gI/+dgAvc/5opW9JQ==
+"@types/testing-library__dom@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.2.tgz#2906f8a0dce58b0746c6ab606f786bd06fe6940e"
+  integrity sha512-8yu1gSwUEAwzg2OlPNbGq+ixhmSviGurBu1+ivxRKq1eRcwdjkmlwtPvr9VhuxTq2fNHBWN2po6Iem3Xt5A6rg==
   dependencies:
-    pretty-format "^24.3.0"
+    pretty-format "^25.1.0"
 
-"@types/testing-library__react@^9.1.0":
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
-  integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==
+"@types/testing-library__react@^10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-10.0.1.tgz#92bb4a02394bf44428e35f1da2970ed77f803593"
+  integrity sha512-RbDwmActAckbujLZeVO/daSfdL1pnjVqas25UueOkAY5r7vriavWf0Zqg7ghXMHa8ycD/kLkv8QOj31LmSYwww==
   dependencies:
     "@types/react-dom" "*"
     "@types/testing-library__dom" "*"
+    pretty-format "^25.1.0"
+
+"@types/through@*":
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895"
+  integrity sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/tmp@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.1.0.tgz#19cf73a7bcf641965485119726397a096f0049bd"
+  integrity sha512-6IwZ9HzWbCq6XoQWhxLpDjuADodH/MKXRUIDFudvgjcVdjFknvmR+DNsoUeer4XPrEnrZs04Jj+kfV9pFsrhmA==
 
 "@types/uglify-js@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
-  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.2.tgz#01992579debba674e1e359cd6bcb1a1d0ab2e02b"
+  integrity sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==
   dependencies:
     source-map "^0.6.1"
 
-"@types/unist@^2.0.0", "@types/unist@^2.0.2":
+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
-"@types/untildify@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/untildify/-/untildify-3.0.0.tgz#cd3e6624e46ccf292d3823fb48fa90dda0deaec0"
-  integrity sha512-FTktI3Y1h+gP9GTjTvXBP5v8xpH4RU6uS9POoBcGy4XkS2Np6LNtnP1eiNNth4S7P+qw2c/rugkwBasSHFzJEg==
+"@types/update-notifier@^0.0.30":
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/@types/update-notifier/-/update-notifier-0.0.30.tgz#5148ffc81189832870ee3f19cf2bb1a35250b05e"
+  integrity sha1-UUj/yBGJgyhw7j8Zzyuxo1JQsF4=
 
 "@types/util-deprecate@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/util-deprecate/-/util-deprecate-1.0.0.tgz#341d0815fe5a661b94e3ea738d182b4c359e3958"
   integrity sha512-I2vixiQ+mrmKxfdLNvaa766nulrMVDoUQiSQoNeTjFUNAt8klnMgDh3yy/bH/r275357q30ACOEUaxFOR8YVrA==
 
-"@types/uuid-js@^0.7.1":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@types/uuid-js/-/uuid-js-0.7.2.tgz#5b5552fcbaaf4acf026fb6dc66f7e5bd6b4be92f"
-  integrity sha512-9R+mA6mMXkFVQnXEeX5fMQDR2SYND7cafJTqbeMpLhgsL7qr7MF4ZBxWpLexml3lZsBsyAmqVWbOiB0N10m15w==
-
-"@types/uuid@^3.4.4":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.6.tgz#d2c4c48eb85a757bf2927f75f939942d521e3016"
-  integrity sha512-cCdlC/1kGEZdEglzOieLDYBxHsvEOIg7kp/2FYyVR9Pxakq+Qf/inL3RKQ+PA8gOlI/NnL+fXmQH12nwcGzsHw==
-  dependencies:
-    "@types/node" "*"
+"@types/uuid@^7.0.3":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-7.0.4.tgz#00a5749810b4ad80bff73a61f9cc9d0d521feb3c"
+  integrity sha512-WGZCqBZZ0mXN2RxvLHL6/7RCu+OWs28jgQMP04LWfpyJlQUMTR6YU9CNJAKDgbw+EV/u687INXuLUc7FuML/4g==
 
-"@types/webpack-env@^1.13.7", "@types/webpack-env@^1.13.9", "@types/webpack-env@^1.14.0":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
-  integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
+"@types/webpack-env@^1.15.0", "@types/webpack-env@^1.15.1", "@types/webpack-env@^1.15.2":
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a"
+  integrity sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==
 
 "@types/webpack-sources@*", "@types/webpack-sources@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
-  integrity sha512-zfvjpp7jiafSmrzJ2/i3LqOyTYTuJ7u1KOXlKgDlvsj9Rr0x7ZiYu5lZbXwobL7lmsRNtPXlBfmaUD8eU2Hu8w==
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.7.tgz#0a330a9456113410c74a5d64180af0cbca007141"
+  integrity sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==
   dependencies:
     "@types/node" "*"
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@*", "@types/webpack@^4.41.0":
-  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.0.tgz#b813a044d8b0dec7dfcd7622fdbe327bde06eb9a"
-  integrity sha512-tWkdf9nO0zFgAY/EumUKwrDUhraHKDqCPhwfFR/R8l0qnPdgb9le0Gzhvb7uzVpouuDGBgiE//ZdY+5jcZy2TA==
+"@types/webpack@^4.41.12", "@types/webpack@^4.41.13", "@types/webpack@^4.41.8", "@types/webpack@^4.41.9":
+  version "4.41.13"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.13.tgz#988d114c8913d039b8a0e0502a7fe4f1f84f3d5e"
+  integrity sha512-RYmIHOWSxnTTa765N6jJBVE45pd2SYNblEYshVDduLw6RhocazNmRzE5/ytvBD8IkDMH6DI+bcrqxh8NILimBA==
   dependencies:
     "@types/anymatch" "*"
     "@types/node" "*"
@@ -4402,27 +5068,24 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
-"@types/websql@^0.0.27":
-  version "0.0.27"
-  resolved "https://registry.yarnpkg.com/@types/websql/-/websql-0.0.27.tgz#621a666a7f02018e7cbb4abab956a25736c27d71"
-  integrity sha1-Yhpman8CAY58u0q6uVaiVzbCfXE=
-
 "@types/yargs-parser@*":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
-  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
+  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
 "@types/yargs@^13.0.0":
-  version "13.0.3"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
-  integrity sha512-K8/LfZq2duW33XW/tFwEAfnZlqIfVsoyRB3kfXdPXYhl0nfM8mmh7GS0jg7WrX2Dgq/0Ha/pR1PaR+BvmWwjiQ==
+  version "13.0.9"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.9.tgz#44028e974343c7afcf3960f1a2b1099c39a7b5e1"
+  integrity sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/yup@^0.26.24":
-  version "0.26.24"
-  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.24.tgz#c24170b3a5c867b4fabd49fcc42fe45f780cb153"
-  integrity sha512-x0bhHnYjH5mZit4HivUYbTMO4LouOTGwp/LLxSL1mbJYVwNJtHYESH0ed2bwM1lkI2yDmsoCDYJnWEgHeJDACg==
+"@types/yargs@^15.0.0":
+  version "15.0.5"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79"
+  integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==
+  dependencies:
+    "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@1.6.0":
   version "1.6.0"
@@ -4434,25 +5097,25 @@
     requireindex "^1.2.0"
     tsutils "^3.7.0"
 
-"@typescript-eslint/eslint-plugin@^2.2.0", "@typescript-eslint/eslint-plugin@^2.7.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.8.0.tgz#eca584d46094ebebc3cb3e9fb625bfbc904a534d"
-  integrity sha512-ohqul5s6XEB0AzPWZCuJF5Fd6qC0b4+l5BGEnrlpmvXxvyymb8yw8Bs4YMF8usNAeuCJK87eFIHy8g8GFvOtGA==
+"@typescript-eslint/eslint-plugin@^2.10.0", "@typescript-eslint/eslint-plugin@^2.30.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
+  integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.8.0"
-    eslint-utils "^1.4.3"
+    "@typescript-eslint/experimental-utils" "2.34.0"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.8.0", "@typescript-eslint/experimental-utils@^2.5.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.8.0.tgz#208b4164d175587e9b03ce6fea97d55f19c30ca9"
-  integrity sha512-jZ05E4SxCbbXseQGXOKf3ESKcsGxT8Ucpkp1jiVp55MGhOvZB2twmWKf894PAuVQTCgbPbJz9ZbRDqtUWzP8xA==
+"@typescript-eslint/experimental-utils@2.34.0", "@typescript-eslint/experimental-utils@^2.5.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
+  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.8.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
     eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
 
 "@typescript-eslint/parser@1.6.0":
   version "1.6.0"
@@ -4463,14 +5126,14 @@
     eslint-scope "^4.0.0"
     eslint-visitor-keys "^1.0.0"
 
-"@typescript-eslint/parser@^2.2.0", "@typescript-eslint/parser@^2.7.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.8.0.tgz#e10f7c40c8cf2fb19920c879311e6c46ad17bacb"
-  integrity sha512-NseXWzhkucq+JM2HgqAAoKEzGQMb5LuTRjFPLQzGIdLthXMNUfuiskbl7QSykvWW6mvzCtYbw1fYWGa2EIaekw==
+"@typescript-eslint/parser@^2.10.0", "@typescript-eslint/parser@^2.30.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8"
+  integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.8.0"
-    "@typescript-eslint/typescript-estree" "2.8.0"
+    "@typescript-eslint/experimental-utils" "2.34.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
     eslint-visitor-keys "^1.1.0"
 
 "@typescript-eslint/typescript-estree@1.6.0":
@@ -4481,49 +5144,303 @@
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
-"@typescript-eslint/typescript-estree@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.8.0.tgz#fcc3fe6532840085d29b75432c8a59895876aeca"
-  integrity sha512-ksvjBDTdbAQ04cR5JyFSDX113k66FxH1tAXmi+dj6hufsl/G0eMc/f1GgLjEVPkYClDbRKv+rnBFuE5EusomUw==
+"@typescript-eslint/typescript-estree@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
+  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
   dependencies:
     debug "^4.1.1"
     eslint-visitor-keys "^1.1.0"
     glob "^7.1.6"
     is-glob "^4.0.1"
-    lodash.unescape "4.0.1"
-    semver "^6.3.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@unimodules/core@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@unimodules/core/-/core-2.0.1.tgz#e5d760aa1a01885871d2d5c3f1fd3404552e5fcb"
-  integrity sha512-evbJUEAf8TvIfzR2/T9npWuqyYE8042qvmE7uWF+uDAt8KclMS9g7clbNTEG1ck5ov9AYWMMgohFaPfDCkJicw==
+"@verdaccio/commons-api@9.4.0", "@verdaccio/commons-api@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/commons-api/-/commons-api-9.4.0.tgz#74bb922d5d173a1c19cd2719db9f028e8909dac7"
+  integrity sha512-h5DvalAx+fKbCPp9azybvZsvQARBtCeUoMc8jAstUIcOJwbJ0hzMxpM9yY+1cwJvVC7lqTxCZEduWbamfLOQdQ==
   dependencies:
-    compare-versions "^3.4.0"
+    http-errors "1.7.3"
+    http-status-codes "1.4.0"
 
-"@unimodules/react-native-adapter@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@unimodules/react-native-adapter/-/react-native-adapter-2.0.1.tgz#021f1f7e2247d296986b0d8f1949a4d8e748ce9c"
-  integrity sha512-D9CSGLIWX0iWLv4Voq0i+xo0YZcraTN1uCdJ+EepwmBplRHDrDCoh2M9Upm4aIso5812pXOBHmGf31AhIKKhYA==
+"@verdaccio/file-locking@^9.4.0":
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/file-locking/-/file-locking-9.5.0.tgz#c8ea8d9d5c5902ee82f08fe1fdcb3d09d8d65946"
+  integrity sha512-Q27WlxeMMFlKxI3x0nNAstiUkn9NfWv7BOFh/Zfvifr4aviNQcDyHincn9d6Pvuy6EBquUoUW0ty3Kv9rt5u5Q==
   dependencies:
-    invariant "^2.2.4"
-    lodash "^4.5.0"
-    prop-types "^15.6.1"
+    lockfile "1.0.4"
 
-"@vue/component-compiler-utils@^3.0.0":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.0.2.tgz#7daf8aaf0d5faa66e7c8a1f6fea315630e45fbc9"
-  integrity sha512-BSnY2PmW4QwU1AOcGSNYAmEPLjdQ9itl1YpLCWtpwMA5Jy/aqWNuzZ9+ZZ8h6yZJ53W95tVkEP6yrXJ/zUHdEA==
+"@verdaccio/local-storage@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/local-storage/-/local-storage-9.4.0.tgz#56c6ba6cb0f36b459208a7aecf59c79e8bad10d7"
+  integrity sha512-rhaMJN5vEzQ03BGoAYUcJTdkA6H4y5v3K2anNPJN5dN5GBV1AsYAkOn9RMXKa3WUdeWkWgNkPPeEqsc2gBR+qA==
+  dependencies:
+    "@verdaccio/commons-api" "^9.4.0"
+    "@verdaccio/file-locking" "^9.4.0"
+    "@verdaccio/streams" "^9.4.0"
+    async "3.2.0"
+    level "5.0.1"
+    lodash "4.17.15"
+    mkdirp "1.0.3"
+
+"@verdaccio/readme@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/readme/-/readme-9.4.0.tgz#7c099bf8f016a88ec76c1412e855e69ce3ce1a44"
+  integrity sha512-d0AIdph9B4S2ULzMM/rBpSWEWnIYH4ENoNlUyc9JVCCQVUc/+dRG4Pk4C3e5Dfoh2lwL0af4WhlOPHis6kCD6g==
+  dependencies:
+    dompurify "2.0.8"
+    jsdom "16.2.1"
+    marked "0.7.0"
+
+"@verdaccio/streams@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/streams/-/streams-9.4.0.tgz#8f19b48437a5e320e1f2dd0b3d5c5d756a36ddeb"
+  integrity sha512-Oc02dKPE3/PyDgCU2UPYZx5lfLeYqkQQUY2QDj2s8mLjb4jmKOfLMmnZ564vUVmmswNxjaRs3DTAZAgZQYyGIg==
+
+"@verdaccio/streams@^9.4.0":
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/@verdaccio/streams/-/streams-9.5.0.tgz#01c1e1a654b2085b0711a3e23df5c7b7376d0282"
+  integrity sha512-Z+04XRPbOJCsaY6GyrVJH6/IWqeh81U3kr9E5XBHkCK+NtybF0D0nnZgVTh/q2GOxhvvOgGv9r3Uvg4GkbnXsQ==
+
+"@verdaccio/ui-theme@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@verdaccio/ui-theme/-/ui-theme-1.7.1.tgz#d524ff9b8bd9deefa98b264d8eb3ce915d0d0a60"
+  integrity sha512-a3coH/CdbfKNr/wRoZIdv9HwjmsEtyT9SzlXuuQKLvyspdoIafruRk9JSn2zWRD254oewsnSSDT6FPweDWU6+Q==
+
+"@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
+  integrity sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw==
+
+"@vue/babel-plugin-transform-vue-jsx@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz#c0a3e6efc022e75e4247b448a8fc6b86f03e91c0"
+  integrity sha512-YfdaoSMvD1nj7+DsrwfTvTnhDXI7bsuh+Y5qWwvQXlD24uLgnsoww3qbiZvWf/EoviZMrvqkqN4CBw0W3BWUTQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    html-tags "^2.0.0"
+    lodash.kebabcase "^4.1.1"
+    svg-tags "^1.0.0"
+
+"@vue/babel-preset-app@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.3.1.tgz#bb67aae562983067c5b242c27fb7de17f40cf109"
+  integrity sha512-iNkySkbRWXGUA+Cvzj+/gEP0Y0uVAwwzfn21S7hkggSeIg9LJyZ+QzdxgKO0wgi01yTdb2mYWgeLQAfHZ65aew==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/plugin-proposal-class-properties" "^7.8.3"
+    "@babel/plugin-proposal-decorators" "^7.8.3"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+    "@babel/plugin-transform-runtime" "^7.9.0"
+    "@babel/preset-env" "^7.9.0"
+    "@babel/runtime" "^7.9.2"
+    "@vue/babel-preset-jsx" "^1.1.2"
+    babel-plugin-dynamic-import-node "^2.3.0"
+    core-js "^3.6.4"
+    core-js-compat "^3.6.4"
+
+"@vue/babel-preset-jsx@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz#2e169eb4c204ea37ca66c2ea85a880bfc99d4f20"
+  integrity sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==
+  dependencies:
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
+    "@vue/babel-sugar-functional-vue" "^1.1.2"
+    "@vue/babel-sugar-inject-h" "^1.1.2"
+    "@vue/babel-sugar-v-model" "^1.1.2"
+    "@vue/babel-sugar-v-on" "^1.1.2"
+
+"@vue/babel-sugar-functional-vue@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.1.2.tgz#f7e24fba09e6f1ee70104560a8808057555f1a9a"
+  integrity sha512-YhmdJQSVEFF5ETJXzrMpj0nkCXEa39TvVxJTuVjzvP2rgKhdMmQzlJuMv/HpadhZaRVMCCF3AEjjJcK5q/cYzQ==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@vue/babel-sugar-inject-h@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.1.2.tgz#8a5276b6d8e2ed16ffc8078aad94236274e6edf0"
+  integrity sha512-VRSENdTvD5htpnVp7i7DNuChR5rVMcORdXjvv5HVvpdKHzDZAYiLSD+GhnhxLm3/dMuk8pSzV+k28ECkiN5m8w==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+
+"@vue/babel-sugar-v-model@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.1.2.tgz#1ff6fd1b800223fc9cb1e84dceb5e52d737a8192"
+  integrity sha512-vLXPvNq8vDtt0u9LqFdpGM9W9IWDmCmCyJXuozlq4F4UYVleXJ2Fa+3JsnTZNJcG+pLjjfnEGHci2339Kj5sGg==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
+    camelcase "^5.0.0"
+    html-tags "^2.0.0"
+    svg-tags "^1.0.0"
+
+"@vue/babel-sugar-v-on@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.1.2.tgz#b2ef99b8f2fab09fbead25aad70ef42e1cf5b13b"
+  integrity sha512-T8ZCwC8Jp2uRtcZ88YwZtZXe7eQrJcfRq0uTFy6ShbwYJyz5qWskRFoVsdTi9o0WEhmQXxhQUewodOSCUPVmsQ==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
+    camelcase "^5.0.0"
+
+"@vue/cli-overlay@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.3.1.tgz#434529c188b628a54773670201667a0b4a361e07"
+  integrity sha512-UA399aWHhre2VHrQFQSJhFLrFMqOYQ8ly+Ni6T+cpCjOwssjiaqaqrG5YiZBAqDwQvjrtYori4lU66qrY5DVhA==
+
+"@vue/cli-plugin-babel@~4.3.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.3.1.tgz#6e3a6aa18595b98ad5c52898a2850d452404712b"
+  integrity sha512-tBqu0v1l4LfWX8xuJmofpp+8xQzKddFNxdLmeVDOX/omDBQX0qaVDeMUtRxxSTazI06SKr605SnUQoa35qwbvw==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@vue/babel-preset-app" "^4.3.1"
+    "@vue/cli-shared-utils" "^4.3.1"
+    babel-loader "^8.1.0"
+    cache-loader "^4.1.0"
+    thread-loader "^2.1.3"
+    webpack "^4.0.0"
+
+"@vue/cli-plugin-router@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.3.1.tgz#0ba589f4e9a1f3e64a8ff6ccd92f7ce2845586bf"
+  integrity sha512-m0ntr5R6q62oNMODgoyHAVAd/sDtsH15GdBrScZsPNeyHxmzmNBDlsNM38yYGGY064zDRRWif15d1yaTREybrA==
+  dependencies:
+    "@vue/cli-shared-utils" "^4.3.1"
+
+"@vue/cli-plugin-typescript@~4.3.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.3.1.tgz#dd403b78680376b8682f90de3db851ae5ecc71e8"
+  integrity sha512-Uos7MTqG0btNMMhZdgLTPx24fqiiHhqz0Bow2rTeNa0piDeSjiQdyq0vgVKqJOLUu8zkvmG2jKUr15QQ0+yobQ==
+  dependencies:
+    "@types/webpack-env" "^1.15.1"
+    "@vue/cli-shared-utils" "^4.3.1"
+    cache-loader "^4.1.0"
+    fork-ts-checker-webpack-plugin "^3.1.1"
+    globby "^9.2.0"
+    thread-loader "^2.1.3"
+    ts-loader "^6.2.2"
+    tslint "^5.20.1"
+    webpack "^4.0.0"
+    yorkie "^2.0.0"
+
+"@vue/cli-plugin-vuex@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.3.1.tgz#2b73aff56f9e1be31018873d5ed2d59f155e7476"
+  integrity sha512-mukwOlhZGBJhkqO2b3wHFFHjK5aP00b1WUHdrOfLR7M18euhaTyb4kA5nwZwEOmU3EzZx6kHzSFCRy/XaMkLug==
+
+"@vue/cli-service@~4.3.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.3.1.tgz#94b2121d08e343a55f7ecef260af5257a9ffe7e5"
+  integrity sha512-CsNGfHe+9oKZdRwJmweQ0KsMYM27ssg1eNQqRKL/t+IgDLO3Tu86uaOOCLn4ZAaU5oxxpq4aSFvz+A0YxQRSWw==
+  dependencies:
+    "@intervolga/optimize-cssnano-plugin" "^1.0.5"
+    "@soda/friendly-errors-webpack-plugin" "^1.7.1"
+    "@soda/get-current-script" "^1.0.0"
+    "@vue/cli-overlay" "^4.3.1"
+    "@vue/cli-plugin-router" "^4.3.1"
+    "@vue/cli-plugin-vuex" "^4.3.1"
+    "@vue/cli-shared-utils" "^4.3.1"
+    "@vue/component-compiler-utils" "^3.0.2"
+    "@vue/preload-webpack-plugin" "^1.1.0"
+    "@vue/web-component-wrapper" "^1.2.0"
+    acorn "^7.1.0"
+    acorn-walk "^7.1.1"
+    address "^1.1.2"
+    autoprefixer "^9.7.5"
+    browserslist "^4.11.1"
+    cache-loader "^4.1.0"
+    case-sensitive-paths-webpack-plugin "^2.3.0"
+    cli-highlight "^2.1.4"
+    clipboardy "^2.3.0"
+    cliui "^6.0.0"
+    copy-webpack-plugin "^5.1.1"
+    css-loader "^3.4.2"
+    cssnano "^4.1.10"
+    debug "^4.1.1"
+    default-gateway "^5.0.5"
+    dotenv "^8.2.0"
+    dotenv-expand "^5.1.0"
+    file-loader "^4.2.0"
+    fs-extra "^7.0.1"
+    globby "^9.2.0"
+    hash-sum "^2.0.0"
+    html-webpack-plugin "^3.2.0"
+    launch-editor-middleware "^2.2.1"
+    lodash.defaultsdeep "^4.6.1"
+    lodash.mapvalues "^4.6.0"
+    lodash.transform "^4.6.0"
+    mini-css-extract-plugin "^0.9.0"
+    minimist "^1.2.5"
+    pnp-webpack-plugin "^1.6.4"
+    portfinder "^1.0.25"
+    postcss-loader "^3.0.0"
+    ssri "^7.1.0"
+    terser-webpack-plugin "^2.3.5"
+    thread-loader "^2.1.3"
+    url-loader "^2.2.0"
+    vue-loader "^15.9.1"
+    vue-style-loader "^4.1.2"
+    webpack "^4.0.0"
+    webpack-bundle-analyzer "^3.6.1"
+    webpack-chain "^6.4.0"
+    webpack-dev-server "^3.10.3"
+    webpack-merge "^4.2.2"
+
+"@vue/cli-shared-utils@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz#a74bf4d53825d4a4b05a84b03e023974871bc38a"
+  integrity sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==
+  dependencies:
+    "@hapi/joi" "^15.0.1"
+    chalk "^2.4.2"
+    execa "^1.0.0"
+    launch-editor "^2.2.1"
+    lru-cache "^5.1.1"
+    node-ipc "^9.1.1"
+    open "^6.3.0"
+    ora "^3.4.0"
+    read-pkg "^5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    semver "^6.1.0"
+    strip-ansi "^6.0.0"
+
+"@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz#8213a5ff3202f9f2137fe55370f9e8b9656081c3"
+  integrity sha512-QLq9z8m79mCinpaEeSURhnNCN6djxpHw0lpP/bodMlt5kALfONpryMthvnrQOlTcIKoF+VoPi+lPHUYeDFPXug==
   dependencies:
     consolidate "^0.15.1"
     hash-sum "^1.0.2"
     lru-cache "^4.1.2"
     merge-source-map "^1.1.0"
     postcss "^7.0.14"
-    postcss-selector-parser "^5.0.0"
-    prettier "^1.18.2"
+    postcss-selector-parser "^6.0.2"
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
+  optionalDependencies:
+    prettier "^1.18.2"
+
+"@vue/preload-webpack-plugin@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.1.tgz#18723530d304f443021da2292d6ec9502826104a"
+  integrity sha512-8VCoJeeH8tCkzhkpfOkt+abALQkS11OIHhte5MBzYaKMTqK0A3ZAKEUVAffsOklhEv7t0yrQt696Opnu9oAx+w==
+
+"@vue/web-component-wrapper@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
+  integrity sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
@@ -4534,21 +5451,45 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
     "@webassemblyjs/wast-parser" "1.8.5"
 
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+
 "@webassemblyjs/floating-point-hex-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
   integrity sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==
 
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
 "@webassemblyjs/helper-api-error@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
   integrity sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==
 
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
 "@webassemblyjs/helper-buffer@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
   integrity sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==
 
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
 "@webassemblyjs/helper-code-frame@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
@@ -4556,11 +5497,23 @@
   dependencies:
     "@webassemblyjs/wast-printer" "1.8.5"
 
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.9.0"
+
 "@webassemblyjs/helper-fsm@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
   integrity sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==
 
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
 "@webassemblyjs/helper-module-context@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
@@ -4569,11 +5522,23 @@
     "@webassemblyjs/ast" "1.8.5"
     mamacro "^0.0.3"
 
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+
 "@webassemblyjs/helper-wasm-bytecode@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
   integrity sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==
 
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
 "@webassemblyjs/helper-wasm-section@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
@@ -4584,6 +5549,16 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
     "@webassemblyjs/wasm-gen" "1.8.5"
 
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
 "@webassemblyjs/ieee754@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
@@ -4591,6 +5566,13 @@
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
 "@webassemblyjs/leb128@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
@@ -4598,11 +5580,23 @@
   dependencies:
     "@xtuc/long" "4.2.2"
 
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
 "@webassemblyjs/utf8@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
   integrity sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==
 
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
 "@webassemblyjs/wasm-edit@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
@@ -4617,6 +5611,20 @@
     "@webassemblyjs/wasm-parser" "1.8.5"
     "@webassemblyjs/wast-printer" "1.8.5"
 
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
+
 "@webassemblyjs/wasm-gen@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
@@ -4628,6 +5636,17 @@
     "@webassemblyjs/leb128" "1.8.5"
     "@webassemblyjs/utf8" "1.8.5"
 
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
 "@webassemblyjs/wasm-opt@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
@@ -4638,6 +5657,16 @@
     "@webassemblyjs/wasm-gen" "1.8.5"
     "@webassemblyjs/wasm-parser" "1.8.5"
 
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+
 "@webassemblyjs/wasm-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
@@ -4650,6 +5679,18 @@
     "@webassemblyjs/leb128" "1.8.5"
     "@webassemblyjs/utf8" "1.8.5"
 
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
 "@webassemblyjs/wast-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
@@ -4662,6 +5703,18 @@
     "@webassemblyjs/helper-fsm" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
 "@webassemblyjs/wast-printer@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
@@ -4671,10 +5724,14 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@webcomponents/webcomponentsjs@^1.2.0":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.3.3.tgz#5bb82a0d3210c836bd4623e13a4a93145cb9dc27"
-  integrity sha512-eLH04VBMpuZGzBIhOnUjECcQPEPcmfhWEijW9u1B5I+2PPYdWf3vWUExdDxu4Y3GljRSTCOlWnGtS9tpzmXMyQ==
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+    "@xtuc/long" "4.2.2"
 
 "@webpack-contrib/schema-utils@^1.0.0-beta.0":
   version "1.0.0-beta.0"
@@ -4688,12 +5745,13 @@
     text-table "^0.2.0"
     webpack-log "^1.1.2"
 
-"@wry/equality@^0.1.2":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.1.9.tgz#b13e18b7a8053c6858aa6c85b54911fb31e3a909"
-  integrity sha512-mB6ceGjpMGz1ZTza8HYnrPGos2mC6So4NhS1PtZ8s4Qt0K7fBiIGhpSxUbQmhwcSWE3no+bYxmI2OL6KuXYmoQ==
+"@wordpress/jest-puppeteer-axe@^1.5.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/jest-puppeteer-axe/-/jest-puppeteer-axe-1.8.0.tgz#6ddcc36d46c253b06029b894e93da43756aa5853"
+  integrity sha512-k+2+zfpG1ydbjjeXEVCQbLobqpZASssfa1tHVFoHbkhHU6y/0HDuNAKnxIBqD7MswhQ6/NfwV7jSLlwtkSAXLA==
   dependencies:
-    tslib "^1.9.3"
+    "@babel/runtime" "^7.9.2"
+    axe-puppeteer "^1.1.0"
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -4705,7 +5763,7 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@yarnpkg/lockfile@1.1.0":
+"@yarnpkg/lockfile@1.1.0", "@yarnpkg/lockfile@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
@@ -4719,7 +5777,7 @@
     mkdirp-promise "^5.0.1"
     mz "^2.5.0"
 
-JSONStream@^1.0.3, JSONStream@^1.0.4, JSONStream@^1.3.4:
+JSONStream@1.3.5, JSONStream@^1.0.3, JSONStream@^1.0.4, JSONStream@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
   integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
@@ -4727,7 +5785,7 @@ JSONStream@^1.0.3, JSONStream@^1.0.4, JSONStream@^1.3.4:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
 
-abab@^2.0.0:
+abab@^2.0.0, abab@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
@@ -4744,10 +5802,35 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
-absolute-path@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
-  integrity sha1-p4di+9rftSl76ZsV01p4Wy8JW/c=
+abstract-leveldown@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.3.0.tgz#d25221d1e6612f820c35963ba4bd739928f6026a"
+  integrity sha512-TU5nlYgta8YrBMNpc9FwQzRbiXsj49gsALsXadbGHt9CROPzX5fB0rWDR5mtdpOOKa5XqRFpbj1QroPAoPzVjQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
+abstract-leveldown@~6.0.1:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.0.3.tgz#b4b6159343c74b0c5197b2817854782d8f748c4a"
+  integrity sha512-jzewKKpZbaYUa6HTThnrl+GrJhzjEAeuc7hTVpZdzg7kupXZFoqQDFwyOwLNbmJKJlmzw8yiipMPkDiuKkT06Q==
+  dependencies:
+    level-concat-iterator "~2.0.0"
+    xtend "~4.0.0"
+
+abstract-leveldown@~6.2.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz#036543d87e3710f2528e47040bc3261b77a9a8eb"
+  integrity sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
 
 accepts@^1.3.7, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
@@ -4784,17 +5867,18 @@ acorn-globals@^4.1.0, acorn-globals@^4.3.0, acorn-globals@^4.3.2:
     acorn "^6.0.1"
     acorn-walk "^6.0.1"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
   dependencies:
-    acorn "^3.0.4"
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
 
-acorn-jsx@^5.0.0, acorn-jsx@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
-  integrity sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==
+acorn-jsx@^5.0.0, acorn-jsx@^5.1.0, acorn-jsx@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
+  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
 acorn-node@^1.2.0, acorn-node@^1.3.0, acorn-node@^1.5.2, acorn-node@^1.6.1:
   version "1.8.2"
@@ -4805,17 +5889,17 @@ acorn-node@^1.2.0, acorn-node@^1.3.0, acorn-node@^1.5.2, acorn-node@^1.6.1:
     acorn-walk "^7.0.0"
     xtend "^4.0.2"
 
-acorn-walk@^6.0.1, acorn-walk@^6.1.1:
+acorn-walk@^6.0.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
-acorn-walk@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.0.0.tgz#c8ba6f0f1aac4b0a9e32d1f0af12be769528f36b"
-  integrity sha512-7Bv1We7ZGuU79zZbb6rRqcpxo3OY+zrdtloZWoyD8fmGX+FeXRjE+iuGkZjSXLVovLzrsvMGMy0EkwA0E0umxg==
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
+  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
 
-acorn@^3.0.4, acorn@^3.1.0:
+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=
@@ -4825,27 +5909,22 @@ acorn@^4.0.4, acorn@~4.0.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
   integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
 
-acorn@^5.0.0, acorn@^5.5.0, acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
-
-acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7, acorn@^6.2.1:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
-  integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
+acorn@^5.0.0, acorn@^5.5.3:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
-acorn@^7.0.0, acorn@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
-  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
+acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7, acorn@^6.2.1, acorn@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
+  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-address@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.0.tgz#ef8e047847fcd2c5b6f50c16965f924fd99fe709"
-  integrity sha512-4diPfzWbLEIElVG4AnqP+00SULlPzNuyJFNnmMrLgyaxG6tZXJ1sn7mjBu4fHrJE+Yp/jgylOweJn2xsLMFggQ==
+acorn@^7.0.0, acorn@^7.1.0, acorn@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
+  integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
 
-address@1.1.2, address@^1.0.1, address@^1.1.0:
+address@1.1.2, address@^1.0.1, address@^1.1.0, address@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
   integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
@@ -4862,9 +5941,9 @@ adjust-sourcemap-loader@2.0.0:
     regex-parser "2.2.10"
 
 adm-zip@^0.4.9:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.13.tgz#597e2f8cc3672151e1307d3e95cddbc75672314a"
-  integrity sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.14.tgz#2cf312bcc9f8875df835b0f6040bd89be0a727a9"
+  integrity sha512-/9aQCnQHF+0IiCl0qhXoK7qs//SwYE7zX8lsr/DNk1BRAHYxeLZPL4pguwK29gUEqasYQjqPtEpDRSWEkdHn9g==
 
 after@0.8.2:
   version "0.8.2"
@@ -4878,6 +5957,18 @@ agent-base@4, agent-base@^4.3.0:
   dependencies:
     es6-promisify "^5.0.0"
 
+agent-base@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
+  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
+
+agent-base@6:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.0.tgz#5d0101f19bbfaed39980b22ae866de153b93f09a"
+  integrity sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==
+  dependencies:
+    debug "4"
+
 agent-base@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -4949,17 +6040,17 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@6.10.2, ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5, ajv@^6.9.1:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
-  integrity sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==
+ajv@6.12.0:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
+  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
   dependencies:
-    fast-deep-equal "^2.0.1"
+    fast-deep-equal "^3.1.1"
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^5.0.0, ajv@^5.2.2:
+ajv@^5.1.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
@@ -4969,6 +6060,16 @@ ajv@^5.0.0, ajv@^5.2.2:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.5.5, ajv@^6.9.1:
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    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"
@@ -5003,20 +6104,12 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
-analytics-node@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/analytics-node/-/analytics-node-3.3.0.tgz#7fb4be288c253d00857e840bf9ef642b64313ac0"
-  integrity sha512-wxrsmibvZVysy5CfkLItYrYMGbNVXDBccWurz+hgLUg98pbijiS2/QQdRc0SjHWVEqByxReEJ2T2MGhgb4jk3A==
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  integrity sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=
   dependencies:
-    "@segment/loosely-validate-event" "^2.0.0"
-    axios "^0.17.1"
-    axios-retry "^3.0.2"
-    commander "^2.9.0"
-    lodash.isstring "^4.0.1"
-    md5 "^2.2.1"
-    ms "^2.0.0"
-    remove-trailing-slash "^0.1.0"
-    uuid "^3.2.1"
+    string-width "^2.0.0"
 
 ansi-align@^3.0.0:
   version "3.0.0"
@@ -5042,29 +6135,17 @@ ansi-colors@^3.0.0, ansi-colors@^3.2.1:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-cyan@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
-  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-escapes@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
-  integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
-
 ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
-ansi-escapes@^4.2.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.0.tgz#a4ce2b33d6b214b7950d8595c212f12ac9cc569d"
-  integrity sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
+  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
   dependencies:
-    type-fest "^0.8.1"
+    type-fest "^0.11.0"
 
 ansi-gray@^0.1.1:
   version "0.1.1"
@@ -5078,13 +6159,6 @@ ansi-html@0.0.7, ansi-html@^0.0.7:
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
   integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
-ansi-red@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
-  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
-  dependencies:
-    ansi-wrap "0.1.0"
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -5117,18 +6191,18 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.0.tgz#5681f0dcf7ae5880a7841d8831c4724ed9cc0172"
-  integrity sha512-7kFQgnEaMdRtwf6uSfUnVr9gSGC7faurn+J/Mv90/W+iTtN0405/nLdopfMWwchyxhbGYl6TC4Sccn9TUkGAgg==
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
   dependencies:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
 ansi-to-html@^0.6.11, ansi-to-html@^0.6.4, ansi-to-html@^0.6.6:
-  version "0.6.13"
-  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.13.tgz#c72eae8b63e5ca0643aab11bfc6e6f2217425833"
-  integrity sha512-Ys2/umuaTlQvP9DLkaa7UzRKF2FLrfod/hNHXS9QhXCrw7seObG6ksOGmNz3UoK+adwM8L9vQfG7mvaxfJ3Jvw==
+  version "0.6.14"
+  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.14.tgz#65fe6d08bba5dd9db33f44a20aec331e0010dad8"
+  integrity sha512-7ZslfB1+EnFSDO5Ju+ue5Y6It19DRnZXWv8jrGHgIlPna5Mh4jz7BV5jCbQneXNFurQcKoolaaAjHtgSBfOIuA==
   dependencies:
     entities "^1.1.2"
 
@@ -5137,11 +6211,6 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
   integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
 
-ansi@^0.3.0, ansi@~0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/ansi/-/ansi-0.3.1.tgz#0c42d4fb17160d5a9af1e484bace1c66922c1b21"
-  integrity sha1-DELU+xcWDVqa8eSEus4cZpIsGyE=
-
 ansicolors@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
@@ -5152,7 +6221,7 @@ any-observable@^0.3.0:
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
-any-promise@^1.0.0, any-promise@^1.1.0, any-promise@^1.3.0:
+any-promise@^1.0.0, any-promise@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
@@ -5173,7 +6242,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
+anymatch@^3.0.3, anymatch@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
   integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
@@ -5182,35 +6251,21 @@ anymatch@~3.1.1:
     picomatch "^2.0.4"
 
 apache-crypt@^1.1.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/apache-crypt/-/apache-crypt-1.2.1.tgz#d6fc72aa6d27d99c95a94fd188d731eefffa663c"
-  integrity sha1-1vxyqm0n2ZyVqU/RiNcx7v/6Zjw=
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/apache-crypt/-/apache-crypt-1.2.4.tgz#fc0aacb7877d64d26420cadf923bcd53e79fb34e"
+  integrity sha512-Icze5ny5W5uv3xgMgl8U+iGmRCC0iIDrb2PVPuRBtL3Zy1Y5TMewXP1Vtc4r5X9eNNBEk7KYPu0Qby9m/PmcHg==
   dependencies:
-    unix-crypt-td-js "^1.0.0"
+    unix-crypt-td-js "^1.1.4"
 
-apache-md5@^1.0.6:
+apache-md5@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/apache-md5/-/apache-md5-1.1.2.tgz#ee49736b639b4f108b6e9e626c6da99306b41692"
   integrity sha1-7klza2ObTxCLbp5ibG2pkwa0FpI=
 
-apollo-link@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
-  integrity sha512-6Ghf+j3cQLCIvjXd2dJrLw+16HZbWbwmB1qlTc41BviB2hv+rK1nJr17Y9dWK0UD4p3i9Hfddx3tthpMKrueHg==
-  dependencies:
-    "@types/node" "^9.4.6"
-    apollo-utilities "^1.0.0"
-    zen-observable-ts "^0.8.6"
-
-apollo-utilities@^1.0.0, apollo-utilities@^1.0.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.3.2.tgz#8cbdcf8b012f664cd6cb5767f6130f5aed9115c9"
-  integrity sha512-JWNHj8XChz7S4OZghV6yc9FNnzEXj285QYp/nLNh943iObycI5GTDO3NGR9Dth12LRrSFMeDOConPfPln+WGfg==
-  dependencies:
-    "@wry/equality" "^0.1.2"
-    fast-json-stable-stringify "^2.0.0"
-    ts-invariant "^0.4.0"
-    tslib "^1.9.3"
+apache-md5@^1.0.6:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/apache-md5/-/apache-md5-1.1.5.tgz#5d6365ece2ccc32b612f886b2b292e1c96ff3ffb"
+  integrity sha512-sbLEIMQrkV7RkIruqTPXxeCMkAAycv4yzTkBzRgOR1BrR5UB7qZtupqxkersTJSf0HZ3sbaNRrNV80TnnM7cUw==
 
 app-module-path@^2.2.0:
   version "2.2.0"
@@ -5242,6 +6297,11 @@ arch@2.1.1:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
   integrity sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==
 
+arch@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf"
+  integrity sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==
+
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -5251,9 +6311,9 @@ are-we-there-yet@~1.1.2:
     readable-stream "^2.0.6"
 
 arg@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.1.tgz#485f8e7c390ce4c5f78257dbea80d4be11feda4c"
-  integrity sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
 argly@^1.0.0:
   version "1.2.0"
@@ -5267,17 +6327,12 @@ argparse@^1.0.7, argparse@~1.0.2:
   dependencies:
     sprintf-js "~1.0.2"
 
-argsarray@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb"
-  integrity sha1-bnIHtOzbObCviDA/pa4ivajfYcs=
-
-argv@^0.0.2:
+argv@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
   integrity sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=
 
-aria-query@3.0.0, aria-query@^3.0.0:
+aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
   integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
@@ -5285,19 +6340,19 @@ aria-query@3.0.0, aria-query@^3.0.0:
     ast-types-flow "0.0.7"
     commander "^2.11.0"
 
+aria-query@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145"
+  integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w==
+  dependencies:
+    "@babel/runtime" "^7.7.4"
+    "@babel/runtime-corejs3" "^7.7.4"
+
 arity-n@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
   integrity sha1-2edrEXM+CFacCEeuezmyhgswt0U=
 
-arr-diff@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
-  integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo=
-  dependencies:
-    arr-flatten "^1.0.1"
-    array-slice "^0.2.3"
-
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -5315,11 +6370,6 @@ arr-flatten@^1.0.1, arr-flatten@^1.1.0:
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
   integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
-arr-union@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
-  integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=
-
 arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
@@ -5345,11 +6395,6 @@ array-filter@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
   integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-  integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
-
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -5375,28 +6420,14 @@ array-ify@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
   integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
 
-array-includes@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
-  integrity sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=
+array-includes@^3.0.3, array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
-
-array-map@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
-  integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=
-
-array-reduce@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
-  integrity sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=
-
-array-slice@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
-  integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    is-string "^1.0.5"
 
 array-to-error@^1.0.0:
   version "1.1.1"
@@ -5438,31 +6469,40 @@ array-unique@^0.3.2:
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
 array.prototype.find@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
-  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.1.tgz#3baca26108ca7affb08db06bf0be6cb3115a969c"
+  integrity sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.13.0"
+    es-abstract "^1.17.4"
 
-array.prototype.flat@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz#8f3c71d245ba349b6b64b4078f76f5576f1fd723"
-  integrity sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==
+array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.0-next.1"
 
 array.prototype.flatmap@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.2.tgz#28d621d351c19a62b84331b01669395ef6cef4c4"
-  integrity sha512-ZZtPLE74KNE+0XcPv/vQmcivxN+8FhwOLvt2udHauO0aDEpsXDQrmd5HuJGpgPVyaV8HvkDPWnJ2iaem0oCKtA==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
 
+array.prototype.map@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
+  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    es-array-method-boxes-properly "^1.0.0"
+    is-string "^1.0.4"
+
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -5473,10 +6513,10 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-art@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
-  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
 asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
@@ -5504,6 +6544,11 @@ asn1@~0.2.3:
   dependencies:
     safer-buffer "~2.1.0"
 
+assert-never@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/assert-never/-/assert-never-1.2.1.tgz#11f0e363bf146205fb08193b5c7b90f4d1cf44fe"
+  integrity sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
+
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
@@ -5563,20 +6608,15 @@ 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.2, 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==
 
-ast-types@0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
-  integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
-
-ast-types@0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
-  integrity sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=
+ast-types@0.13.3, ast-types@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.3.tgz#50da3f28d17bdbc7969a3a2d83a0e4a72ae755a7"
+  integrity sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==
 
 ast-types@^0.7.0:
   version "0.7.8"
@@ -5588,6 +6628,11 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-disk-cache@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/async-disk-cache/-/async-disk-cache-1.3.5.tgz#cc6206ed79bb6982b878fc52e0505e4f52b62a02"
@@ -5611,7 +6656,7 @@ async-foreach@^0.1.3:
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
   integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
-async-limiter@^1.0.0, async-limiter@~1.0.0:
+async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
@@ -5624,13 +6669,20 @@ async-promise-queue@^1.0.3, async-promise-queue@^1.0.5:
     async "^2.4.1"
     debug "^2.6.8"
 
-async-retry@1.2.3, async-retry@^1.1.4:
+async-retry@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.2.3.tgz#a6521f338358d322b1a0012b79030c6f411d1ce0"
   integrity sha512-tfDb02Th6CE6pJUF2gjW5ZVjsgwlucVXOEQMvEX9JgSJMs9gAX+Nz3xRuJBKuUYjTSYORqvDBORdAQ3LU59g7Q==
   dependencies:
     retry "0.12.0"
 
+async-retry@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.3.1.tgz#139f31f8ddce50c0870b0ba558a6079684aaed55"
+  integrity sha512-aiieFW/7h3hY0Bq5d+ktDBejxuwR78vRu9hDUdR8rNhSaQ29VzPL4AoIRG7D/c7tdenwOcKvgPM6tIxB3cB6HA==
+  dependencies:
+    retry "0.12.0"
+
 async-writer@^1.1.0:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/async-writer/-/async-writer-1.4.5.tgz#8a5527b9493e59f7f31a4a47184e0ea12ebf283f"
@@ -5638,6 +6690,11 @@ async-writer@^1.1.0:
   dependencies:
     events "^1.0.2"
 
+async@0.9.x, async@^0.9.0, async@^0.9.2, async@~0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+  integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
+
 async@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
@@ -5645,12 +6702,12 @@ async@2.6.1:
   dependencies:
     lodash "^4.17.10"
 
-async@^0.9.0, async@^0.9.2, async@~0.9.0:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
-  integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
+async@3.2.0, async@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
-async@^2.1.4, async@^2.4.0, async@^2.4.1, async@^2.5.0, async@^2.6.0, async@^2.6.2, async@~2.6.0:
+async@^2.4.1, async@^2.5.0, async@^2.6.0, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -5662,51 +6719,76 @@ async@~0.2.9:
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
   integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
 
-async@~1.5:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 atob-lite@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696"
   integrity sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=
 
-atob@^2.1.1:
+atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@9.6.1:
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
-  integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==
-  dependencies:
-    browserslist "^4.6.3"
-    caniuse-lite "^1.0.30000980"
+atomic-sleep@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
+  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
+
+aurelia@dev:
+  version "0.8.0-dev.202005200307"
+  resolved "https://registry.yarnpkg.com/aurelia/-/aurelia-0.8.0-dev.202005200307.tgz#0afaaff3cb5e2ac43c8f14a5856da3a0d81b27e0"
+  integrity sha512-y8TKxHz7slfWsIUQXd+tqdwDnilzgGtkB+VSvCtUFvdqfQxVZL2r3mlfINKrRdUB8p1/7s4SMDhViWgxiCUVoQ==
+  dependencies:
+    "@aurelia/debug" "^0.8.0-dev.202005200307"
+    "@aurelia/fetch-client" "^0.8.0-dev.202005200307"
+    "@aurelia/jit" "^0.8.0-dev.202005200307"
+    "@aurelia/jit-html" "^0.8.0-dev.202005200307"
+    "@aurelia/jit-html-browser" "^0.8.0-dev.202005200307"
+    "@aurelia/kernel" "^0.8.0-dev.202005200307"
+    "@aurelia/metadata" "^0.8.0-dev.202005200307"
+    "@aurelia/route-recognizer" "^0.8.0-dev.202005200307"
+    "@aurelia/router" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html" "^0.8.0-dev.202005200307"
+    "@aurelia/runtime-html-browser" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler" "^0.8.0-dev.202005200307"
+    "@aurelia/scheduler-dom" "^0.8.0-dev.202005200307"
+
+autoprefixer@9.7.4:
+  version "9.7.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.4.tgz#f8bf3e06707d047f0641d87aee8cfb174b2a5378"
+  integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==
+  dependencies:
+    browserslist "^4.8.3"
+    caniuse-lite "^1.0.30001020"
     chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.17"
-    postcss-value-parser "^4.0.0"
+    postcss "^7.0.26"
+    postcss-value-parser "^4.0.2"
 
-autoprefixer@^9.4.9, autoprefixer@^9.6.1, autoprefixer@^9.7.2:
-  version "9.7.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.2.tgz#26cf729fbb709323b40171a874304884dcceffed"
-  integrity sha512-LCAfcdej1182uVvPOZnytbq61AhnOZ/4JelDaJGDeNwewyU1AMaNthcHsyz1NRjTmd2FkurMckLWfkHg3Z//KA==
+autoprefixer@^9.4.3, autoprefixer@^9.4.9, autoprefixer@^9.6.1, autoprefixer@^9.7.2, autoprefixer@^9.7.5, autoprefixer@^9.7.6:
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511"
+  integrity sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==
   dependencies:
-    browserslist "^4.7.3"
-    caniuse-lite "^1.0.30001010"
+    browserslist "^4.12.0"
+    caniuse-lite "^1.0.30001061"
     chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.23"
-    postcss-value-parser "^4.0.2"
+    postcss "^7.0.30"
+    postcss-value-parser "^4.1.0"
 
 aws-sign2@~0.5.0:
   version "0.5.0"
@@ -5718,29 +6800,22 @@ aws-sign2@~0.7.0:
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
-
-axe-core@^3.1.2, axe-core@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.4.0.tgz#a57ee620c182d5389aff229586aaae06bc541abe"
-  integrity sha512-5C0OdgxPv/DrQguO6Taj5F1dY5OlkWg4SVmZIVABFYKWlnAc5WTLPzG+xJSgIwf2fmY+NiNGiZXhXx2qT0u/9Q==
+aws4@^1.6.0, aws4@^1.8.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
+  integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==
 
-axe-puppeteer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.0.0.tgz#cebbeec2c65a2e0cb7d5fd1e7aef26c5f71895a4"
-  integrity sha512-hTF3u4mtatgTN7fsLVyVgbRdNc15ngjDcTEuqhn9A7ugqLhLCryJWp9fzqZkNlrW8awPcxugyTwLPR7mRdPZmA==
-  dependencies:
-    axe-core "^3.1.2"
+axe-core@^3.5.2, axe-core@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.3.tgz#5b7c0ee7c5197d546bd3a07c3ef701896f5773e9"
+  integrity sha512-HZpLE7xu05+8AbpqXITGdxp1Xwk8ysAXrg7MiKRY27py3DAyEJpoJQo1727pWF3F+O79V3r+cTWhOzfB49P89w==
 
-axios-retry@^3.0.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.2.tgz#4f4dcbefb0b434e22b72bd5e28a027d77b8a3458"
-  integrity sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==
+axe-puppeteer@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.1.0.tgz#efcf0666a7d8fefec6930b4b6ec3476c403d1b91"
+  integrity sha512-VS17Y1rDQe6A0PdeTPxwOSBfmOdj6efgxyre9cN1du1snnVilczSDtQsgifBKBlzoL/3DKfGpgIi+N+zrzODOg==
   dependencies:
-    is-retry-allowed "^1.1.0"
+    axe-core "^3.5.3"
 
 axios@0.19.0:
   version "0.19.0"
@@ -5750,21 +6825,18 @@ axios@0.19.0:
     follow-redirects "1.5.10"
     is-buffer "^2.0.2"
 
-axios@^0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d"
-  integrity sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=
-  dependencies:
-    follow-redirects "^1.2.5"
-    is-buffer "^1.1.5"
-
-axobject-query@^2.0.2:
+axobject-query@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
   integrity sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==
   dependencies:
     ast-types-flow "0.0.7"
 
+axobject-query@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
+  integrity sha512-ICt34ZmrVt8UQnvPl6TVyDTkmhXmAyAT4Jh5ugfGUX4MOrZ+U/ZY6/sdylRw3qGNr9Ub5AJsaHeDMzNLehRdOQ==
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -5799,7 +6871,7 @@ babel-core@6, babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.7"
 
-babel-core@7.0.0-bridge.0, babel-core@^7.0.0-bridge.0:
+babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
@@ -5816,15 +6888,15 @@ babel-eslint@10.0.1:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-eslint@10.0.3, babel-eslint@^10.0.1, babel-eslint@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
-  integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==
+babel-eslint@10.1.0, babel-eslint@^10.0.1, babel-eslint@^10.0.3:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
@@ -5835,7 +6907,7 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-generator@^6.18.0, babel-generator@^6.26.0:
+babel-generator@^6.26.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
   integrity sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==
@@ -6004,11 +7076,6 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-helper-vue-jsx-merge-props@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
-  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
-
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -6017,15 +7084,7 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-jest@^23.6.0:
-  version "23.6.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.6.0.tgz#a644232366557a2240a0c083da6b25786185a2f1"
-  integrity sha512-lqKGG6LYXYu+DQh/slrQ8nxXQkEkhugdXsU6St7GmhVS7Ilc/22ArwqXNJrf0QaOBjZB0360qZMwXqDYQHXaew==
-  dependencies:
-    babel-plugin-istanbul "^4.1.6"
-    babel-preset-jest "^23.2.0"
-
-babel-jest@^24.7.1, babel-jest@^24.8.0, babel-jest@^24.9.0:
+babel-jest@^24.8.0, babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
   integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
@@ -6038,6 +7097,44 @@ babel-jest@^24.7.1, babel-jest@^24.8.0, babel-jest@^24.9.0:
     chalk "^2.4.2"
     slash "^2.0.0"
 
+babel-jest@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.5.1.tgz#bc2e6101f849d6f6aec09720ffc7bc5332e62853"
+  integrity sha512-9dA9+GmMjIzgPnYtkhBg73gOo/RHqPmLruP3BaGL4KEX3Dwz6pI8auSN8G8+iuEG90+GSswyKvslN+JYSaacaQ==
+  dependencies:
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
+babel-jest@^26.0.0, babel-jest@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.0.1.tgz#450139ce4b6c17174b136425bda91885c397bc46"
+  integrity sha512-Z4GGmSNQ8pX3WS1O+6v3fo41YItJJZsVxG5gIQ+HuB/iuAQBJxMTHTwz292vuYws1LnHfwSRgoqI+nxdy/pcvw==
+  dependencies:
+    "@jest/transform" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
+babel-loader@8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.4.tgz#7bbf20cbe4560629e2e41534147692d3fecbdce6"
+  integrity sha512-fhBhNkUToJcW9nV46v8w87AJOwAJDz84c1CL57n3Stj73FANM/b9TbCUK4YhdOwEyZ+OxhYpdeZDNzSI29Firw==
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    util.promisify "^1.0.0"
+
 babel-loader@8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
@@ -6048,7 +7145,7 @@ babel-loader@8.0.5:
     mkdirp "^0.5.1"
     util.promisify "^1.0.0"
 
-babel-loader@8.0.6, babel-loader@^8, babel-loader@^8.0.2, babel-loader@^8.0.4, babel-loader@^8.0.5, babel-loader@^8.0.6:
+babel-loader@8.0.6:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
   integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
@@ -6058,6 +7155,17 @@ babel-loader@8.0.6, babel-loader@^8, babel-loader@^8.0.2, babel-loader@^8.0.4, b
     mkdirp "^0.5.1"
     pify "^4.0.1"
 
+babel-loader@8.1.0, babel-loader@^8, babel-loader@^8.0.4, babel-loader@^8.0.5, babel-loader@^8.0.6, babel-loader@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
 babel-macros@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
@@ -6085,21 +7193,21 @@ babel-plugin-add-react-displayname@^0.0.5:
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
   integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
 
-babel-plugin-apply-mdx-type-prop@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.5.1.tgz#d6c10f756a428a3724047662503257c74878c721"
-  integrity sha512-IFw+JDoWizgor39KsCB+Hqm/77tRSkHMRmKukDA4ul3sygZh33QtoirIpsdWWMPP9XBeOQdxuJUQdVQYrd6iOQ==
+babel-plugin-apply-mdx-type-prop@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.4.tgz#3336529fb1f5b97811449d995b82d13230878eb5"
+  integrity sha512-rVtztbgf3zmT1Is6vSNugfbdI2AG3mk/PUS8H71ss5V2XRNyYgeuFgTMX3h0bTDEJnbFG3ilRH566kVhZAkGWg==
   dependencies:
-    "@babel/helper-plugin-utils" "7.0.0"
-    "@mdx-js/util" "^1.5.1"
+    "@babel/helper-plugin-utils" "7.8.3"
+    "@mdx-js/util" "^1.6.4"
 
 babel-plugin-bundled-import-meta@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-bundled-import-meta/-/babel-plugin-bundled-import-meta-0.3.1.tgz#878e28830c8d20a3ebc639b503ea73ebebd927d0"
-  integrity sha512-tmg3/GQ+broWbE2v9DI8GZRVtPQqJCRrgZPj49xC5Z05M409QdjuJS0Vzj4IqOzmObnpoEsISlH4x/XQ3orewg==
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-bundled-import-meta/-/babel-plugin-bundled-import-meta-0.3.2.tgz#b99ebc651888030a668fb6660bb1c933020625e0"
+  integrity sha512-RMXzsnWoFHDSUc1X/QiejEwQBtQ0Y68HQZ542JQ4voFa5Sgl5f/D4T7+EOocUeSbiT4XIDbrhfxbH5OmcV8Ibw==
   dependencies:
     "@babel/plugin-syntax-import-meta" "^7.2.0"
-    "@babel/template" "^7.4.4"
+    "@babel/template" "^7.7.0"
 
 babel-plugin-check-es2015-constants@^6.22.0:
   version "6.22.0"
@@ -6108,12 +7216,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-debug-macros@^0.1.10:
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.1.11.tgz#6c562bf561fccd406ce14ab04f42c218cf956605"
-  integrity sha512-hZw5qNNGAR02Y+yBUrtsnJHh8OXavkayPRqKGAXnIm4t5rWVpj3ArwsC7TWdpZsBguQvHAeyTxZ7s23yY60HHg==
-  dependencies:
-    semver "^5.3.0"
+babel-plugin-danger-remove-unused-import@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-danger-remove-unused-import/-/babel-plugin-danger-remove-unused-import-2.0.0.tgz#6e28bff3fb78440f1f025af43e3a7b95d64a9e75"
+  integrity sha512-0K+VTyBdN6Ag+HN6kxySFQyTKiG6gZyD/+EOMifd2pDunlTLr86K87Cv/7bDEIFDWYM634ookoVv9HMLsY4uuA==
 
 babel-plugin-debug-macros@^0.2.0-beta.6:
   version "0.2.0"
@@ -6129,29 +7235,36 @@ babel-plugin-debug-macros@^0.3.0, babel-plugin-debug-macros@^0.3.3:
   dependencies:
     semver "^5.3.0"
 
-babel-plugin-dynamic-import-node@2.3.0, babel-plugin-dynamic-import-node@^2.2.0, babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
-  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+babel-plugin-dynamic-import-node@^2.3.0, babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-ember-modules-api-polyfill@^2.12.0, babel-plugin-ember-modules-api-polyfill@^2.6.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.12.0.tgz#a5e703205ba4e625a7fab9bb1aea64ef3222cf75"
-  integrity sha512-ZQU4quX0TJ1yYyosPy5PFigKdCFEVHJ6H0b3hwjxekIP9CDwzk0OhQuKhCOPti+d52VWjjCjxu2BrXEih29mFw==
+babel-plugin-ember-data-packages-polyfill@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-ember-data-packages-polyfill/-/babel-plugin-ember-data-packages-polyfill-0.1.2.tgz#21154c095ddc703722b1fb8bb06c126c0b6d77dc"
+  integrity sha512-kTHnOwoOXfPXi00Z8yAgyD64+jdSXk3pknnS7NlqnCKAU6YDkXZ4Y7irl66kaZjZn0FBBt0P4YOZFZk85jYOww==
+  dependencies:
+    "@ember-data/rfc395-data" "^0.0.4"
+
+babel-plugin-ember-modules-api-polyfill@^2.13.0, babel-plugin-ember-modules-api-polyfill@^2.6.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.13.0.tgz#f9d3928d4c40192a44a5b52b67bbdedc4a748ea2"
+  integrity sha512-Q2i7uZMNSuJFYUV8stEsLQIRfMhQJew62sOnR+ESNjb4vlI7Rj1JlSgymTGwmCTVh+poTBpMidiWCoITDtbiIA==
   dependencies:
-    ember-rfc176-data "^0.3.12"
+    ember-rfc176-data "^0.3.13"
 
-babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23:
-  version "10.0.23"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
-  integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
+babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27:
+  version "10.0.33"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.7.3"
-    "@emotion/memoize" "0.7.3"
-    "@emotion/serialize" "^0.11.14"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
     babel-plugin-macros "^2.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     convert-source-map "^1.5.0"
@@ -6159,35 +7272,30 @@ babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.22, babel-plugin-emoti
     find-root "^1.1.0"
     source-map "^0.5.7"
 
-babel-plugin-extract-import-names@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.5.1.tgz#79fb8550e3e0a9e8654f9461ccade56c9a669a74"
-  integrity sha512-08+FQtoth4uUB7jzqEgedg/ZjrFEgwFe3WVPGp7XGP5XAmmAd/SEU/z/ZhSJTeH40IVQLRfh9VJU6hGwUePINA==
+babel-plugin-extract-import-names@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.4.tgz#c38e50a2027df72cd9a960227243f528c4051956"
+  integrity sha512-oShDRQX9CGDkg61DnNJG7T/ROjIpgzyLTi3mGr3fwbNDP3kiJ6TousEPu6d090qNUm/XiUasQ1ESOnLAb7plqQ==
   dependencies:
-    "@babel/helper-plugin-utils" "7.0.0"
+    "@babel/helper-plugin-utils" "7.8.3"
 
-babel-plugin-filter-imports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-filter-imports/-/babel-plugin-filter-imports-3.0.0.tgz#a849683837ad29960da17492fb32789ab6b09a11"
-  integrity sha512-p/chjzVTgCxUqyLM0q/pfWVZS7IJTwGQMwNg0LOvuQpKiTftQgZDtkGB8XvETnUw19rRcL7bJCTopSwibTN2tA==
+babel-plugin-filter-imports@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-filter-imports/-/babel-plugin-filter-imports-4.0.0.tgz#068f8da15236a96a9602c36dc6f4a6eeca70a4f4"
+  integrity sha512-jDLlxI8QnfKd7PtieH6pl4tZJzymzfCDCPGdTq/grgbiYAikwDPp/oL0IlFJn0HQjLpcLkyYhPKkUVneRESw5w==
   dependencies:
-    "@babel/types" "^7.4.0"
-    lodash "^4.17.11"
+    "@babel/types" "^7.7.2"
+    lodash "^4.17.15"
 
 babel-plugin-htmlbars-inline-precompile@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-1.0.0.tgz#a9d2f6eaad8a3f3d361602de593a8cbef8179c22"
   integrity sha512-4jvKEHR1bAX03hBDZ94IXsYCj3bwk9vYsn6ux6JZNL2U5pvzCWjqyrGahfsGNrhERyxw8IqcirOi9Q6WCo3dkQ==
 
-babel-plugin-istanbul@^4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
-  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-    find-up "^2.1.0"
-    istanbul-lib-instrument "^1.10.1"
-    test-exclude "^4.2.1"
+babel-plugin-htmlbars-inline-precompile@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-3.1.0.tgz#85085b50385277f2b331ebd54e22fa91aadc24e8"
+  integrity sha512-ar6c4YVX6OV7Dzpq7xRyllQrHwVEzJf41qysYULnD6tu6TS+y1FxT2VcEvMC6b9Rq9xoHMzvB79HO3av89JCGg==
 
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
@@ -6199,10 +7307,16 @@ babel-plugin-istanbul@^5.1.0:
     istanbul-lib-instrument "^3.3.0"
     test-exclude "^5.2.3"
 
-babel-plugin-jest-hoist@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
-  integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
 
 babel-plugin-jest-hoist@^24.9.0:
   version "24.9.0"
@@ -6211,33 +7325,28 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-jsx-event-modifiers@^2.0.2:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jsx-event-modifiers/-/babel-plugin-jsx-event-modifiers-2.0.5.tgz#93e6ebb5d7553bb08f9fedbf7a0bee3af09a0472"
-  integrity sha512-tWGnCk0whZ+nZcj9tYLw4+y08tPJXqaEjIxRJZS6DkUUae72Kz4BsoGpxt/Kow7mmgQJpvFCw8IPLSNh5rkZCg==
-
-babel-plugin-jsx-v-model@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jsx-v-model/-/babel-plugin-jsx-v-model-2.0.3.tgz#c396416b99cb1af782087315ae1d3e62e070f47d"
-  integrity sha512-SIx3Y3XxwGEz56Q1atwr5GaZsxJ2IRYmn5dl38LFkaTAvjnbNQxsZHO+ylJPsd+Hmv+ixJBYYFEekPBTHwiGfQ==
+babel-plugin-jest-hoist@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.5.0.tgz#129c80ba5c7fc75baf3a45b93e2e372d57ca2677"
+  integrity sha512-u+/W+WAjMlvoocYGTwthAiQSxDcJAyHpQ6oWlHdFZaaN+Rlk8Q7iiwDPg2lN/FyJtAYnKjFxbn7xus4HCFkg5g==
   dependencies:
-    babel-plugin-syntax-jsx "^6.18.0"
-    html-tags "^2.0.0"
-    svg-tags "^1.0.0"
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
-  integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==
+babel-plugin-jest-hoist@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.0.0.tgz#fd1d35f95cf8849fc65cb01b5e58aedd710b34a8"
+  integrity sha512-+AuoehOrjt9irZL7DOt2+4ZaTM6dlu1s5TTS46JBa0/qem4dy7VNW3tMb96qeEqcIh20LD73TVNtmVEeymTG7w==
   dependencies:
-    "@babel/runtime" "^7.4.2"
-    cosmiconfig "^5.2.0"
-    resolve "^1.10.0"
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.7.1.tgz#ee294383c1a38f9d6535be3d89734824cb3ed415"
-  integrity sha512-HNM284amlKSQ6FddI4jLXD+XTqF0cTYOe5uemOIZxHJHnamC+OhFQ57rMF9sgnYhkJQptVl9U1SKVZsV9/GLQQ==
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0, babel-plugin-macros@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
   dependencies:
     "@babel/runtime" "^7.7.2"
     cosmiconfig "^6.0.0"
@@ -6329,7 +7438,7 @@ babel-plugin-minify-type-constructors@^0.4.3:
   dependencies:
     babel-helper-is-void-0 "^0.4.3"
 
-babel-plugin-module-resolver@^3.1.1, babel-plugin-module-resolver@^3.2.0:
+babel-plugin-module-resolver@^3.1.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz#ddfa5e301e3b9aa12d852a9979f18b37881ff5a7"
   integrity sha512-tjR0GvSndzPew/Iayf4uICWZqjBwnlMWjSx6brryfQ81F9rxBVqwDJtFCV8oOs0+vJeefK9TmdZtkIFdFe1UnA==
@@ -6340,30 +7449,46 @@ babel-plugin-module-resolver@^3.1.1, babel-plugin-module-resolver@^3.2.0:
     reselect "^3.0.1"
     resolve "^1.4.0"
 
-babel-plugin-named-asset-import@^0.3.1, babel-plugin-named-asset-import@^0.3.2, babel-plugin-named-asset-import@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
-  integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw==
+babel-plugin-module-resolver@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.0.0.tgz#8f3a3d9d48287dc1d3b0d5595113adabd36a847f"
+  integrity sha512-3pdEq3PXALilSJ6dnC4wMWr0AZixHRM4utpdpBR9g5QG7B7JwWyukQv7a9hVxkbGFl+nQbrHDqqQOIBtTXTP/Q==
+  dependencies:
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
+
+babel-plugin-named-asset-import@^0.3.1, babel-plugin-named-asset-import@^0.3.2, babel-plugin-named-asset-import@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz#c9750a1b38d85112c9e166bf3ef7c5dbc605f4be"
+  integrity sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==
 
-babel-plugin-react-docgen@^4.0.0-beta.1:
-  version "4.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.0.0-beta.1.tgz#ff09340e060064ec653564e10ac5b5c8dd53dfba"
-  integrity sha512-sBSGAgz5O/RneuRoUS7QCDJq+K3m5r7qPFOGa8++GxacY9LzhP10tV6iY1UPWWj2SYoU19pj4Q3/rNUo/GHp9A==
+babel-plugin-react-docgen@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26"
+  integrity sha512-vzpnBlfGv8XOhJM2zbPyyqw2OLEbelgZZsaaRRTpVwNKuYuc+pUg4+dy7i9gCRms0uOQn4osX571HRcCJMJCmA==
   dependencies:
     lodash "^4.17.15"
-    react-docgen "^5.0.0-beta.1"
+    react-docgen "^5.0.0"
     recast "^0.14.7"
 
-babel-plugin-react-native-web@^0.11.2:
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.11.7.tgz#15b578c0731bd7d65d334f9c759d95e8e4a602e2"
-  integrity sha512-CxE7uhhqkzAFkwV2X7+Mc/UVPujQQDtja/EGxCXRJvdYRi72QTmaJYKbK1lV9qgTZuB+TDguU89coaA9Z1BNbg==
-
 babel-plugin-require-context-hook@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz#3f0e7cce87c338f53639b948632fd4e73834632d"
   integrity sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
+  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -6379,7 +7504,7 @@ babel-plugin-syntax-jsx@^6.18.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
 
-babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
@@ -6389,11 +7514,6 @@ babel-plugin-syntax-trailing-function-commas@^6.22.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
   integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
 
-babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
-  integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
-
 babel-plugin-transform-async-to-generator@^6.22.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
@@ -6403,6 +7523,14 @@ babel-plugin-transform-async-to-generator@^6.22.0:
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-define@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-define/-/babel-plugin-transform-define-1.3.2.tgz#4bdbfe35a839fc206e0f60a7a9ae3b82d5e11808"
+  integrity sha512-fieU/nFuZjTxIttXoucN1fOIrej8I989IXqATMvKVcgTnfi53BjEwLzkw2KA6Q4gRRl4Cf3iiRVpwiB4PHFuWA==
+  dependencies:
+    lodash "^4.17.11"
+    traverse "0.6.6"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -6608,9 +7736,9 @@ babel-plugin-transform-inline-consecutive-adds@^0.4.3:
   integrity sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE=
 
 babel-plugin-transform-jsx-class@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-class/-/babel-plugin-transform-jsx-class-0.1.2.tgz#a4930d087c41f8f8c50eb74a27f7fdffe623c98b"
-  integrity sha512-+8ze9AQ/RNXc9maqGQ8KwTb8PUUj9wnMmCQPG9YUDAi1efH7zZtaPBWYWmJrJHXslkFR6CTXPK8wZpfbtCBuUw==
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-class/-/babel-plugin-transform-jsx-class-0.1.3.tgz#b59e501896280078a68fb8298b2968b060b86a6f"
+  integrity sha512-Udi3d5qzwEyteqchxKoV/JfgktZZ8O3SLlADO936Os8LXolkuhl3joq71KiU0yMip8wz7+3zBKU+7otK1iZCLw==
 
 babel-plugin-transform-jsx-condition@^0.1.0:
   version "0.1.2"
@@ -6618,14 +7746,14 @@ babel-plugin-transform-jsx-condition@^0.1.0:
   integrity sha512-2JEcwfz8cqIaq42f5d2Ye8QKCesNCUVPx5SZHELiEcIMMNUOchh1jHNDbn61p8wouGGIPXdlFKSIPq16ADgDaw==
 
 babel-plugin-transform-jsx-fragment@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-fragment/-/babel-plugin-transform-jsx-fragment-0.1.1.tgz#aa3e0bdc3f419809eaf0c6e5c41de4e658931251"
-  integrity sha512-KFBveYpPAyaCB2wqaDSz6KoLFIS1KVIKmat2T7H/fRHRvNFITfITRFIDlAf/BMF43kzMc2ohICowY2TpkqQ1Yw==
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-fragment/-/babel-plugin-transform-jsx-fragment-0.1.3.tgz#857456eb5e2b55de9327ba1dbf2a7745adcc43d8"
+  integrity sha512-sRMtRn/oKEUll9PsQegtnwXl0PzFmtln3ywEtvZ2zmL9Bg27CAan3rANfDq9Z09QZEROVTujfjcOwTgHVu1A3g==
 
 babel-plugin-transform-jsx-list@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-list/-/babel-plugin-transform-jsx-list-0.1.0.tgz#0674ccf32f48e90a374c53daff644dcc20a6fa0b"
-  integrity sha512-N12Pd1CQw+xlXiBQfF61TD2M+PETzOxNDI3w2YLqhlG760/tgKUZ7hUMhaeTUdqspwnP0w7kf2DcOkZC9U+qxA==
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-list/-/babel-plugin-transform-jsx-list-0.1.2.tgz#24722c76b0a5c760996ae058edd25ff9173df5cd"
+  integrity sha512-6ajrUOorIkdKwHWAeN8ZUp67yaFl0PYyHKUGY31Pw/ZtF0EIygfD8oxjcbFp0rZpTcVEYTMmh+s1xc6cnKy79g==
 
 babel-plugin-transform-jsx-memo@^0.1.2:
   version "0.1.3"
@@ -6633,19 +7761,27 @@ babel-plugin-transform-jsx-memo@^0.1.2:
   integrity sha512-gX65BNTZUJw1OyhCIqyQ+RvCTi+ASMhJQO/Jd+89Oxx5JaVUlX7IYAYKu3qPTYKdD2PBCtftOhiYjbXSGLk+yQ==
 
 babel-plugin-transform-jsx-slot@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-slot/-/babel-plugin-transform-jsx-slot-0.1.1.tgz#b36486ac5d47607ba433ba37233629f819f2d4b2"
-  integrity sha512-WelCwHG9st0hE1V7GPkieyYAElVwu/CpJqKjTNQz39Z3dPXWagTMkPeMjRtRSbfnASZQJpifk/uOYHIPj/MGmg==
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-slot/-/babel-plugin-transform-jsx-slot-0.1.2.tgz#9b3fc69d16747d7013a02018e233c1ae5f2fd092"
+  integrity sha512-ske7KaYo4w4p2w1q7C3653pNje765P24vLF59qmXlgvlPYuFVCTaGS+PYEyb5xIDRDhgiSO2KtDdYK6f6ONxkQ==
   dependencies:
     "@babel/types" "^7.5.0"
 
 babel-plugin-transform-jsx-stylesheet@^0.6.8:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-stylesheet/-/babel-plugin-transform-jsx-stylesheet-0.6.8.tgz#deee9d6938ff27283816bb72aa26fc491814831e"
-  integrity sha512-tsA+J7z5h3DpsOm+zC0ErZkp1/2134jcJbvln6tZOiv/skrieK+VfXIvIa0iODH6gXDVD9TtlvYn9im1cDzO/g==
+  version "0.6.11"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-stylesheet/-/babel-plugin-transform-jsx-stylesheet-0.6.11.tgz#361c186b7d3f58d9b73dbdb58daec010a50e4f68"
+  integrity sha512-84uKOb49zXTdajni+dsDqDyxDxOi3DCyaExFi4qR9Nju3lmHuReQP9CTFmyJgGsbsuT4JiQ5J0N3pBhXql9FdA==
   dependencies:
     camelcase "^3.0.0"
 
+babel-plugin-transform-jsx-to-html@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-to-html/-/babel-plugin-transform-jsx-to-html-0.1.0.tgz#384fbb9a2b7104720a1ec36cb8b5eaabf2869905"
+  integrity sha512-dsN137oVzmwn/Z10uTSBgonelg+LiUadKEiPNbIjAXHFqUf6x0mGtgZPAzHgphqn7DNwiKs5WYUtJIsrnodcvA==
+  dependencies:
+    "@babel/types" "^7.5.5"
+    esutils "^2.0.3"
+
 babel-plugin-transform-member-expression-literals@^6.9.4:
   version "6.9.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"
@@ -6735,13 +7871,6 @@ babel-plugin-transform-undefined-to-void@^6.9.4:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
   integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=
 
-babel-plugin-transform-vue-jsx@^3.5.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960"
-  integrity sha512-W39X07/n3oJMQd8tALBO+440NraGSF//Lo1ydd/9Nme3+QiRGFBb1Q39T9iixh0jZPPbfv3so18tNoIgLatymw==
-  dependencies:
-    esutils "^2.0.2"
-
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -6751,6 +7880,22 @@ babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
+babel-preset-current-node-syntax@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.2.tgz#fb4a4c51fe38ca60fede1dc74ab35eb843cb41d6"
+  integrity sha512-u/8cS+dEiK1SFILbOC8/rUI3ml9lboKuuMvZ/4aQnQmhecQAgPw5ew066C1ObnEAUmlx7dv/s2z52psWEtLNiw==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 babel-preset-env@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
@@ -6787,73 +7932,6 @@ babel-preset-env@^1.7.0:
     invariant "^2.2.2"
     semver "^5.3.0"
 
-babel-preset-expo@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-expo/-/babel-preset-expo-5.2.0.tgz#37f466e65c29ab518d91d04c299d84cef07590d2"
-  integrity sha512-yNHYwSFk7fvVCVJM3m3Vi/BVBNAeox1Iw1tHhCJGbLnpYkR94wst/I8IF9y+K01FhJ98epIK1S0Go3EmHJbbzA==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@babel/plugin-proposal-decorators" "^7.1.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.4.4"
-    "@babel/preset-env" "^7.3.1"
-    babel-plugin-module-resolver "^3.1.1"
-    babel-plugin-react-native-web "^0.11.2"
-    metro-react-native-babel-preset "^0.51.1"
-
-babel-preset-expo@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-expo/-/babel-preset-expo-7.1.0.tgz#d53ee28fa88c207ba12575f5c3f7753bcb01994e"
-  integrity sha512-bdhU3qlivFB3/4SEdVuaKrwUZnLyCD+iFm0M8rRkgOC0EqhJJ/ayFz0Hg/LlS1BiCmdjM1g9rVzBd1KOUv1xJw==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@babel/plugin-proposal-decorators" "^7.1.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.4.4"
-    "@babel/preset-env" "^7.3.1"
-    babel-plugin-module-resolver "^3.1.1"
-    babel-plugin-react-native-web "^0.11.2"
-    metro-react-native-babel-preset "^0.54.1"
-
-babel-preset-fbjs@^3.0.1, babel-preset-fbjs@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.3.0.tgz#a6024764ea86c8e06a22d794ca8b69534d263541"
-  integrity sha512-7QTLTCd2gwB2qGoi5epSULMHugSVgpcVt5YAeiFO9ABLrutDQzKfGwzxgZHLpugq8qMdg/DhRZDZ5CLKxBkEbw==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-syntax-class-properties" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-object-super" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-property-literals" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
-
-babel-preset-jest@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
-  integrity sha1-jsegOhOPABoaj7HoETZSvxpV2kY=
-  dependencies:
-    babel-plugin-jest-hoist "^23.2.0"
-    babel-plugin-syntax-object-rest-spread "^6.13.0"
-
 babel-preset-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
@@ -6862,6 +7940,22 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
+babel-preset-jest@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.5.0.tgz#c1d7f191829487a907764c65307faa0e66590b49"
+  integrity sha512-8ZczygctQkBU+63DtSOKGh7tFL0CeCuz+1ieud9lJ1WPQ9O6A1a/r+LGn6Y705PA6whHQ3T1XuB/PmpfNYf8Fw==
+  dependencies:
+    babel-plugin-jest-hoist "^25.5.0"
+    babel-preset-current-node-syntax "^0.1.2"
+
+babel-preset-jest@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.0.0.tgz#1eac82f513ad36c4db2e9263d7c485c825b1faa6"
+  integrity sha512-9ce+DatAa31DpR4Uir8g4Ahxs5K4W4L8refzt+qHWQANb6LhGcAEfIFgLUwk67oya2cCUd6t4eUMtO/z64ocNw==
+  dependencies:
+    babel-plugin-jest-hoist "^26.0.0"
+    babel-preset-current-node-syntax "^0.1.2"
+
 "babel-preset-minify@^0.5.0 || 0.6.0-alpha.5":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.1.tgz#25f5d0bce36ec818be80338d0e594106e21eaa9f"
@@ -6902,39 +7996,27 @@ 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@^9.0.0, babel-preset-react-app@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.0.2.tgz#247d37e883d6d6f4b4691e5f23711bb2dd80567d"
-  integrity sha512-aXD+CTH8Chn8sNJr4tO/trWKqe5sSE4hdO76j9fhVezJSzmpWYWUSc5JoPmdSxADwef5kQFNGKXd433vvkd2VQ==
-  dependencies:
-    "@babel/core" "7.6.0"
-    "@babel/plugin-proposal-class-properties" "7.5.5"
-    "@babel/plugin-proposal-decorators" "7.6.0"
-    "@babel/plugin-proposal-object-rest-spread" "7.5.5"
-    "@babel/plugin-syntax-dynamic-import" "7.2.0"
-    "@babel/plugin-transform-destructuring" "7.6.0"
-    "@babel/plugin-transform-flow-strip-types" "7.4.4"
-    "@babel/plugin-transform-react-display-name" "7.2.0"
-    "@babel/plugin-transform-runtime" "7.6.0"
-    "@babel/preset-env" "7.6.0"
-    "@babel/preset-react" "7.0.0"
-    "@babel/preset-typescript" "7.6.0"
-    "@babel/runtime" "7.6.0"
-    babel-plugin-dynamic-import-node "2.3.0"
-    babel-plugin-macros "2.6.1"
+babel-preset-react-app@^9.0.0, babel-preset-react-app@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.1.2.tgz#54775d976588a8a6d1a99201a702befecaf48030"
+  integrity sha512-k58RtQOKH21NyKtzptoAvtAODuAJJs3ZhqBMl456/GnXEQ/0La92pNmwgWoMn5pBTrsvk3YYXdY7zpY4e3UIxA==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/plugin-proposal-class-properties" "7.8.3"
+    "@babel/plugin-proposal-decorators" "7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "7.9.0"
+    "@babel/plugin-transform-flow-strip-types" "7.9.0"
+    "@babel/plugin-transform-react-display-name" "7.8.3"
+    "@babel/plugin-transform-runtime" "7.9.0"
+    "@babel/preset-env" "7.9.0"
+    "@babel/preset-react" "7.9.1"
+    "@babel/preset-typescript" "7.9.0"
+    "@babel/runtime" "7.9.0"
+    babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-preset-vue@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-vue/-/babel-preset-vue-2.0.2.tgz#cfadf1bd736125397481b5f8525ced0049a0c71f"
-  integrity sha1-z63xvXNhJTl0gbX4UlztAEmgxx8=
-  dependencies:
-    babel-helper-vue-jsx-merge-props "^2.0.2"
-    babel-plugin-jsx-event-modifiers "^2.0.2"
-    babel-plugin-jsx-v-model "^2.0.1"
-    babel-plugin-syntax-jsx "^6.18.0"
-    babel-plugin-transform-vue-jsx "^3.5.0"
-
 babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
@@ -6949,11 +8031,11 @@ babel-register@^6.26.0:
     source-map-support "^0.4.15"
 
 babel-runtime-jsx-plus@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/babel-runtime-jsx-plus/-/babel-runtime-jsx-plus-0.1.4.tgz#74661fa9a4b8c5a3e9e2ece51d4faa3093fdf436"
-  integrity sha512-D6zx98XxHEawvE5EeqJdz+N/Jdu+7I8NVem292lUHhvddND4ccYFg//jkroVvYsqwsQzWmhrOUosdgIzKwydnw==
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/babel-runtime-jsx-plus/-/babel-runtime-jsx-plus-0.1.5.tgz#57fc7ed49f09417584b8b61df2c43f463c738f32"
+  integrity sha512-5qjZDfUzZGxHgX8o0tkS9o0HbyBvnUuaAtqHC9IN5CgjWFGJBg6a0Xp31wiG7btiHV0dP5t1t8cthlTCYwtnig==
 
-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.26.0:
+babel-runtime@6, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.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=
@@ -6961,12 +8043,7 @@ babel-runtime@6, babel-runtime@6.26.0, babel-runtime@^6.11.6, babel-runtime@^6.1
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-standalone@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886"
-  integrity sha1-Ffs9NfLEVmlYFevx7Zb+fwFbaIY=
-
-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
@@ -6977,7 +8054,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
@@ -6992,7 +8069,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-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:
+babel-types@^6.15.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=
@@ -7002,6 +8079,13 @@ babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babel-walk@3.0.0-canary-5:
+  version "3.0.0-canary-5"
+  resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
+  integrity sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==
+  dependencies:
+    "@babel/types" "^7.9.6"
+
 babylon-walk@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/babylon-walk/-/babylon-walk-1.0.2.tgz#3b15a5ddbb482a78b4ce9c01c8ba181702d9d6ce"
@@ -7016,6 +8100,18 @@ babylon@^6.18.0:
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
+backbone.marionette@*:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/backbone.marionette/-/backbone.marionette-4.1.2.tgz#55de74363219f6d5c343dab5bff6aeb20fc44419"
+  integrity sha512-T8wWxZZnuYjylONTnWZsGsgXtdx2ZrE38pZWJI9LmPqzYK5j0T8uduapFO7OEpsW5rtdbBgwof30xhzAkbb5eQ==
+  dependencies:
+    backbone.radio "^2.0.0"
+
+backbone.radio@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/backbone.radio/-/backbone.radio-2.0.0.tgz#bbe8672b373e313f99f36d2fbcf583fe77d04f42"
+  integrity sha1-u+hnKzc+MT+Z820vvPWD/nfQT0I=
+
 backbone@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/backbone/-/backbone-1.4.0.tgz#54db4de9df7c3811c3f032f34749a4cd27f3bd12"
@@ -7023,15 +8119,15 @@ backbone@^1.1.2:
   dependencies:
     underscore ">=1.8.3"
 
-backo2@1.0.2, backo2@^1.0.2:
+backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
   integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
 
 bail@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.4.tgz#7181b66d508aa3055d3f6c13f0a0c720641dde9b"
-  integrity sha512-S8vuDB4w6YpRhICUDET3guPlQpaJl7od94tpZ0Fvnyp+MKW/HyDTcRDck+29C9g+d/qQHnddRH3+94kZdrW0Ww==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
 balanced-match@^1.0.0:
   version "1.0.0"
@@ -7039,17 +8135,12 @@ balanced-match@^1.0.0:
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
 base-x@^3.0.5:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.7.tgz#1c5a7fafe8f66b4114063e8da102799d4e7c408f"
-  integrity sha512-zAKJGuQPihXW22fkrfOclUUZXM2g92z5GzlSMHxhO6r6Qj+Nm0ccaGNBzDZojzwOMkpjAv4J0fOv1U4go+a4iw==
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.8.tgz#1e1106c2537f0162e8b52474a557ebb09000018d"
+  integrity sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA==
   dependencies:
     safe-buffer "^5.0.1"
 
-base32.js@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/base32.js/-/base32.js-0.1.0.tgz#b582dec693c2f11e893cf064ee6ac5b6131a2202"
-  integrity sha1-tYLexpPC8R6JPPBk7mrFthMaIgI=
-
 base64-arraybuffer@0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
@@ -7060,17 +8151,7 @@ base64-js@0.0.8:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978"
   integrity sha1-EQHpVE9KdrG8OybUUsqW16NeeXg=
 
-base64-js@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.1.2.tgz#d6400cac1c4c660976d90d07a04351d89395f5e8"
-  integrity sha1-1kAMrBxMZgl22Q0HoENR2JOV9eg=
-
-base64-js@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
-  integrity sha1-o5mS1yNYSBGYK+XikLtqU9hnAPE=
-
-base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.0:
+base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
@@ -7080,11 +8161,6 @@ base64id@2.0.0:
   resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
   integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==
 
-base64url@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
-  integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
-
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -7103,14 +8179,19 @@ basic-auth-parser@0.0.2:
   resolved "https://registry.yarnpkg.com/basic-auth-parser/-/basic-auth-parser-0.0.2.tgz#ce9e71a77f23c1279eecd2659b2a46244c156e41"
   integrity sha1-zp5xp38jwSee7NJlmypGJEwVbkE=
 
-basic-auth@~2.0.0:
+basic-auth@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.1.0.tgz#45221ee429f7ee1e5035be3f51533f1cdfd29884"
+  integrity sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=
+
+basic-auth@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
   integrity sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==
   dependencies:
     safe-buffer "5.1.2"
 
-batch-processor@^1.0.0:
+batch-processor@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
   integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
@@ -7127,17 +8208,12 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-bcryptjs@^2.3.0:
+bcryptjs@2.4.3, bcryptjs@^2.3.0:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
   integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
 
-before-after-hook@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-1.4.0.tgz#2b6bf23dca4f32e628fd2747c10a37c74a4b484d"
-  integrity sha512-l5r9ir56nda3qu14nAXIlyq1MmUSs0meCIaFAh8HwkFwP1F8eToOuS3ah2VAHHcY04jaYD7FpJC5JTXHYRbkzg==
-
-before-after-hook@^2.0.0:
+before-after-hook@^2.0.0, before-after-hook@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
@@ -7149,6 +8225,13 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+better-opn@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/better-opn/-/better-opn-2.0.0.tgz#c70d198e51164bdc220306a28a885d9ac7a14c44"
+  integrity sha512-PPbGRgO/K0LowMHbH/JNvaV3qY3Vt+A2nH28fzJxy16h/DfR5OsVti6ldGl6S9SMsyUqT13sltikiAVtI6tKLA==
+  dependencies:
+    open "^7.0.3"
+
 bfj@^6.1.1:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
@@ -7159,11 +8242,6 @@ bfj@^6.1.1:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big-integer@^1.6.44, big-integer@^1.6.7:
-  version "1.6.48"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"
-  integrity sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==
-
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -7175,14 +8253,15 @@ big.js@^5.2.2:
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 bin-links@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/bin-links/-/bin-links-1.1.3.tgz#702fd59552703727313bc624bdbc4c0d3431c2ca"
-  integrity sha512-TEwmH4PHU/D009stP+fkkazMJgkBNCv60z01lQ/Mn8E6+ThHoD03svMnBVuCowwXo2nP2qKyKZxKxp58OHRzxw==
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/bin-links/-/bin-links-1.1.8.tgz#bd39aadab5dc4bdac222a07df5baf1af745b2228"
+  integrity sha512-KgmVfx+QqggqP9dA3iIc5pA4T1qEEEL+hOhOhNPaUm77OTrJoOXE/C05SJLNJe6m/2wUK7F1tDSou7n5TfCDzQ==
   dependencies:
     bluebird "^3.5.3"
     cmd-shim "^3.0.0"
-    gentle-fs "^2.0.1"
+    gentle-fs "^2.3.0"
     graceful-fs "^4.1.15"
+    npm-normalize-package-bin "^1.0.0"
     write-file-atomic "^2.3.0"
 
 binary-extensions@^1.0.0:
@@ -7196,9 +8275,9 @@ binary-extensions@^2.0.0:
   integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
 
 "binaryextensions@1 || 2":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.2.0.tgz#e7c6ba82d4f5f5758c26078fe8eea28881233311"
-  integrity sha512-bHhs98rj/7i/RZpCSJ3uk55pLXOItjIrh2sRQZSM6OoktScX+LxJzvlU+FELp9j3TdcddTmmYArLSGptCTwjuw==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
+  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
 
 bindings@^1.5.0:
   version "1.5.0"
@@ -7215,13 +8294,6 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
-bl@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-3.0.0.tgz#3611ec00579fd18561754360b21e9f784500ff88"
-  integrity sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==
-  dependencies:
-    readable-stream "^3.0.1"
-
 blank-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/blank-object/-/blank-object-1.0.2.tgz#f990793fbe9a8c8dd013fb3219420bec81d5f4b9"
@@ -7246,41 +8318,25 @@ blocking-proxy@^1.0.0:
   dependencies:
     minimist "^1.2.0"
 
-bluebird@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
-  integrity sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=
-
-bluebird@3.7.1, bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
+bluebird@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
   integrity sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==
 
-blueimp-md5@^2.10.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.12.0.tgz#be7367938a889dec3ffbb71138617c117e9c130a"
-  integrity sha512-zo+HIdIhzojv6F1siQPqPFROyVy7C50KzHv/k/Iz+BtvtVzSHXiMXOpq2wCfNkeBqdCv+V8XOV96tsEt2W/3rQ==
+bluebird@3.7.2, bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
 
-body-parser@1.18.3:
-  version "1.18.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
-  integrity sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=
-  dependencies:
-    bytes "3.0.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "~1.6.3"
-    iconv-lite "0.4.23"
-    on-finished "~2.3.0"
-    qs "6.5.2"
-    raw-body "2.3.3"
-    type-is "~1.6.16"
+bn.js@^5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.2.tgz#c9686902d3c9a27729f43ab10f9d79c2004da7b0"
+  integrity sha512-40rZaf3bUNKTVYu9sIeeEGOg7g14Yvnj9kH7b50EiwX0Q7A6umbvfI5tvHaOERH0XigqKkfLkFQxzb4e6CIXnA==
 
 body-parser@1.19.0:
   version "1.19.0"
@@ -7332,35 +8388,40 @@ boom@0.4.x:
   dependencies:
     hoek "0.9.x"
 
-bower-config@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/bower-config/-/bower-config-1.4.1.tgz#85fd9df367c2b8dbbd0caa4c5f2bad40cd84c2cc"
-  integrity sha1-hf2d82fCuNu9DKpMXyutQM2Ewsw=
+bootstrap@^4.3.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
+  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
+
+bower-config@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/bower-config/-/bower-config-1.4.3.tgz#3454fecdc5f08e7aa9cc6d556e492be0669689ae"
+  integrity sha512-MVyyUk3d1S7d2cl6YISViwJBc2VXCkxF5AUFykvN0PQj5FsUiMNSgAYTso18oRFfyZ6XEtjrgg9MAaufHbOwNw==
   dependencies:
     graceful-fs "^4.1.3"
+    minimist "^0.2.1"
     mout "^1.0.0"
-    optimist "^0.6.1"
     osenv "^0.1.3"
     untildify "^2.1.0"
+    wordwrap "^0.0.3"
 
 bower-endpoint-parser@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/bower-endpoint-parser/-/bower-endpoint-parser-0.2.2.tgz#00b565adbfab6f2d35addde977e97962acbcb3f6"
   integrity sha1-ALVlrb+rby01rd3pd+l5Yqy8s/Y=
 
-boxen@4.1.0, boxen@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.1.0.tgz#256f6b2eb09ba22ea558e5acc0a5ff637bf8ed03"
-  integrity sha512-Iwq1qOkmEsl0EVABa864Bbj3HCL4186DRZgFW/NrFs5y5GMM3ljsxzMLgOHdWISDRvcM8beh8q4tTNzXz+mSKg==
+boxen@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
+  integrity sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==
   dependencies:
-    ansi-align "^3.0.0"
-    camelcase "^5.3.1"
-    chalk "^2.4.2"
-    cli-boxes "^2.2.0"
-    string-width "^4.1.0"
-    term-size "^2.1.0"
-    type-fest "^0.5.2"
-    widest-line "^3.1.0"
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^2.0.0"
 
 boxen@^3.0.0:
   version "3.2.0"
@@ -7376,33 +8437,19 @@ boxen@^3.0.0:
     type-fest "^0.3.0"
     widest-line "^2.0.0"
 
-bplist-creator@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.7.tgz#37df1536092824b87c42f957b01344117372ae45"
-  integrity sha1-N98VNgkoJLh8QvlXsBNEEXNyrkU=
-  dependencies:
-    stream-buffers "~2.2.0"
-
-bplist-creator@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.8.tgz#56b2a6e79e9aec3fc33bf831d09347d73794e79c"
-  integrity sha512-Za9JKzD6fjLC16oX2wsXfc+qBEhJBJB1YPInoAQpMLhDuj5aVOv1baGeIQSq1Fr3OCqzvsoQcSBSwGId/Ja2PA==
-  dependencies:
-    stream-buffers "~2.2.0"
-
-bplist-parser@0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.1.1.tgz#d60d5dcc20cba6dc7e1f299b35d3e1f95dafbae6"
-  integrity sha1-1g1dzCDLptx+HymbNdPh+V2vuuY=
-  dependencies:
-    big-integer "^1.6.7"
-
-bplist-parser@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
-  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+boxen@^4.1.0, boxen@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
+  integrity sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==
   dependencies:
-    big-integer "^1.6.44"
+    ansi-align "^3.0.0"
+    camelcase "^5.3.1"
+    chalk "^3.0.0"
+    cli-boxes "^2.2.0"
+    string-width "^4.1.0"
+    term-size "^2.1.0"
+    type-fest "^0.8.1"
+    widest-line "^3.1.0"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -7444,7 +8491,7 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-brfs@^1.2.0, brfs@^1.3.0, brfs@^1.4.0:
+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==
@@ -7454,7 +8501,7 @@ brfs@^1.2.0, brfs@^1.3.0, brfs@^1.4.0:
     static-module "^2.2.0"
     through2 "^2.0.0"
 
-brfs@^2.0.2:
+brfs@^2.0.0, brfs@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/brfs/-/brfs-2.0.2.tgz#44237878fa82aa479ce4f5fe2c1796ec69f07845"
   integrity sha512-IrFjVtwu4eTJZyu8w/V2gxU7iLTtcHih67sgEdzrhjLBMHp2uYefUBfdM4k2UvcuWMgV7PQDZHSLeNWnLFKWVQ==
@@ -7507,13 +8554,13 @@ broccoli-babel-transpiler@^6.5.0:
     rsvp "^4.8.2"
     workerpool "^2.3.0"
 
-broccoli-babel-transpiler@^7.3.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/broccoli-babel-transpiler/-/broccoli-babel-transpiler-7.3.0.tgz#a0ad3a37dbf74469664bbca403d652070c2c1317"
-  integrity sha512-tsXNvDf3gp6g8rGkz234AhbaIRUsCdd6CM3ikfkJVB0EpC8ZAczGsFKTjENLy1etx4s7FkruW/QjI7Wfdhx6Ng==
+broccoli-babel-transpiler@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/broccoli-babel-transpiler/-/broccoli-babel-transpiler-7.4.0.tgz#f3069f0f77e8017aa17e1e757dfb4a30de044182"
+  integrity sha512-DzPXQr1C+zOgzXG40wqPjtjSSa6wRKb+Ls45Qtq7Pn+GxL3/jIvQOBZi0/irZ5dlYVbRMEZiUnaIBIOha2ygIw==
   dependencies:
-    "@babel/core" "^7.3.3"
-    "@babel/polyfill" "^7.0.0"
+    "@babel/core" "^7.8.3"
+    "@babel/polyfill" "^7.8.3"
     broccoli-funnel "^2.0.2"
     broccoli-merge-trees "^3.0.2"
     broccoli-persistent-filter "^2.2.1"
@@ -7697,7 +8744,7 @@ broccoli-merge-trees@^3.0.0, broccoli-merge-trees@^3.0.1, broccoli-merge-trees@^
     broccoli-plugin "^1.3.0"
     merge-trees "^2.0.0"
 
-broccoli-middleware@^2.1.0:
+broccoli-middleware@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/broccoli-middleware/-/broccoli-middleware-2.1.1.tgz#183635bbef4dc1241533ee001a162f013d776cb9"
   integrity sha512-BK8aPhQpOLsHWiftrqXQr84XsvzUqeaN4PlCQOYg5yM0M+WKAHtX2WFXmicSQZOVgKDyh5aeoNTFkHjBAEBzwQ==
@@ -7707,26 +8754,7 @@ broccoli-middleware@^2.1.0:
     has-ansi "^3.0.0"
     mime-types "^2.1.18"
 
-broccoli-module-normalizer@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/broccoli-module-normalizer/-/broccoli-module-normalizer-1.3.0.tgz#f9982d9cbb776b4ed754161cc6547784d3eb19de"
-  integrity sha512-0idZCOtdVG6xXoQ36Psc1ApMCr3lW5DB+WEAOEwHcUoESIBHzwcRPQTxheGIjZ5o0hxpsRYAUH5x0ErtNezbrQ==
-  dependencies:
-    broccoli-plugin "^1.3.0"
-    merge-trees "^1.0.1"
-    rimraf "^2.6.2"
-    symlink-or-copy "^1.1.8"
-
-broccoli-module-unification-reexporter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/broccoli-module-unification-reexporter/-/broccoli-module-unification-reexporter-1.0.0.tgz#031909c5d3f159ec11d5f9e2346f2861db8acb3e"
-  integrity sha512-HTi9ua520M20aBZomaiBopsSt3yjL7J/paR3XPjieygK7+ShATBiZdn0B+ZPiniBi4I8JuMn1q0fNFUevtP//A==
-  dependencies:
-    broccoli-plugin "^1.3.0"
-    mkdirp "^0.5.1"
-    walk-sync "^0.3.2"
-
-broccoli-node-api@^1.6.0:
+broccoli-node-api@^1.6.0, broccoli-node-api@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/broccoli-node-api/-/broccoli-node-api-1.7.0.tgz#391aa6edecd2a42c63c111b4162956b2fa288cb6"
   integrity sha512-QIqLSVJWJUVOhclmkmypJJH9u9s/aWH4+FH6Q6Ju5l+Io4dtwqdPUNmDfw40o6sxhbZHhqGujDJuHTML1wG8Yw==
@@ -7741,6 +8769,13 @@ broccoli-node-info@^2.1.0:
   resolved "https://registry.yarnpkg.com/broccoli-node-info/-/broccoli-node-info-2.1.0.tgz#ca84560e8570ff78565bea1699866ddbf58ad644"
   integrity sha512-l6qDuboJThHfRVVWQVaTs++bFdrFTP0gJXgsWenczc1PavRVUmL1Eyb2swTAXXMpDOnr2zhNOBLx4w9AxkqbPQ==
 
+broccoli-output-wrapper@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/broccoli-output-wrapper/-/broccoli-output-wrapper-2.0.0.tgz#f1e0b9b2f259a67fd41a380141c3c20b096828e6"
+  integrity sha512-V/ozejo+snzNf75i/a6iTmp71k+rlvqjE3+jYfimuMwR1tjNNRdtfno+NGNQB2An9bIAeqZnKhMDurAznHAdtA==
+  dependencies:
+    heimdalljs-logger "^0.1.10"
+
 broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
@@ -7810,10 +8845,23 @@ broccoli-plugin@^2.1.0:
     rimraf "^2.3.4"
     symlink-or-copy "^1.1.8"
 
+broccoli-plugin@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-3.1.0.tgz#54ba6dd90a42ec3db5624063292610e326b1e542"
+  integrity sha512-7w7FP8WJYjLvb0eaw27LO678TGGaom++49O1VYIuzjhXjK5kn2+AMlDm7CaUFw4F7CLGoVQeZ84d8gICMJa4lA==
+  dependencies:
+    broccoli-node-api "^1.6.0"
+    broccoli-output-wrapper "^2.0.0"
+    fs-merger "^3.0.1"
+    promise-map-series "^0.2.1"
+    quick-temp "^0.1.3"
+    rimraf "^2.3.4"
+    symlink-or-copy "^1.1.8"
+
 broccoli-slow-trees@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/broccoli-slow-trees/-/broccoli-slow-trees-3.0.1.tgz#9bf2a9e2f8eb3ed3a3f2abdde988da437ccdc9b4"
-  integrity sha1-m/Kp4vjrPtOj8qvd6YjaQ3zNybQ=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/broccoli-slow-trees/-/broccoli-slow-trees-3.1.0.tgz#8e48903f59e061bf1213963733b9e61dec2ee5d7"
+  integrity sha512-FRI7mRTk2wjIDrdNJd6znS7Kmmne4VkAkl8Ix1R/VoePFMD0g0tEl671xswzFqaRjpT9Qu+CC4hdXDLDJBuzMw==
   dependencies:
     heimdalljs "^0.2.1"
 
@@ -7877,51 +8925,42 @@ broccoli-uglify-sourcemap@^3.1.0:
     walk-sync "^1.1.3"
     workerpool "^5.0.1"
 
-broccoli@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/broccoli/-/broccoli-3.2.0.tgz#6b5a89b8d6d0c733d39aa23ac5b43d85f56fafab"
-  integrity sha512-n58yqAbV2Zbg+HXmBGBOUoDOgbCM0hMJtqvnPDF89Jwk3ZBVhD5/UKW0diY6l3DbB5+j92NCDQVd9HqO+WYFYA==
+broccoli@^3.3.3:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/broccoli/-/broccoli-3.4.2.tgz#a0c2605bea285c50cac304f482b86670630f4701"
+  integrity sha512-OZ0QEyL2i08xJWwhg9Fe0x5IScjBur986QRWrj5mAyHRZqF1nShEz01BPFoLt6L2tqJT0gyZsf8nfUvm8CcJgA==
   dependencies:
+    "@types/chai" "^4.2.9"
+    "@types/chai-as-promised" "^7.1.2"
+    "@types/express" "^4.17.2"
     ansi-html "^0.0.7"
     broccoli-node-info "^2.1.0"
     broccoli-slow-trees "^3.0.1"
-    broccoli-source "^1.1.0"
-    commander "^2.15.1"
+    broccoli-source "^3.0.0"
+    commander "^4.1.1"
     connect "^3.6.6"
     console-ui "^3.0.4"
     esm "^3.2.4"
-    findup-sync "^2.0.0"
-    handlebars "^4.0.11"
+    findup-sync "^4.0.0"
+    handlebars "^4.7.3"
     heimdalljs "^0.2.6"
     heimdalljs-logger "^0.1.9"
     https "^1.0.0"
-    mime-types "^2.1.19"
-    promise.prototype.finally "^3.1.0"
+    mime-types "^2.1.26"
     resolve-path "^1.4.0"
-    rimraf "^2.6.2"
+    rimraf "^3.0.2"
     sane "^4.0.0"
-    tmp "0.0.33"
-    tree-sync "^1.2.2"
+    tmp "^0.0.33"
+    tree-sync "^2.0.0"
     underscore.string "^3.2.2"
-    watch-detector "^0.1.0"
+    watch-detector "^1.0.0"
 
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-brotli-webpack-plugin@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brotli-webpack-plugin/-/brotli-webpack-plugin-1.1.0.tgz#57168f1f109c07d45b412f52b287fc9dab50103c"
-  integrity sha512-byxKhV7L/OsN9urBgcD8Gkgq0OW61KYdSBwN249vT77VRl+9iz6TlWDXhg45rwYynZYetr+WRVuUvQ5WzwcYDQ==
-  dependencies:
-    async "~2.6.0"
-    webpack-sources "^1.0.2"
-  optionalDependencies:
-    brotli "^1.3.1"
-    iltorb "^2.0.1"
-
-brotli@^1.2.0, brotli@^1.3.1:
+brotli@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/brotli/-/brotli-1.3.2.tgz#525a9cad4fcba96475d7d388f6aecb13eed52f46"
   integrity sha1-UlqcrU/LqWR119OI9q7LE+7VL0Y=
@@ -7940,10 +8979,10 @@ browser-pack@^6.0.1:
     through2 "^2.0.0"
     umd "^3.0.0"
 
-browser-process-hrtime@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
-  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
 browser-refresh-client@^1.0.0, browser-refresh-client@^1.1.4:
   version "1.1.4"
@@ -8019,7 +9058,7 @@ browserify-des@^1.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-browserify-optional@^1.0.0:
+browserify-optional@^1.0.0, browserify-optional@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/browserify-optional/-/browserify-optional-1.0.1.tgz#1e13722cfde0d85f121676c2a72ced533a018869"
   integrity sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=
@@ -8028,7 +9067,7 @@ browserify-optional@^1.0.0:
     ast-types "^0.7.0"
     browser-resolve "^1.8.1"
 
-browserify-rsa@^4.0.0:
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
   integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
@@ -8037,17 +9076,19 @@ browserify-rsa@^4.0.0:
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.0.tgz#545d0b1b07e6b2c99211082bf1b12cce7a0b0e11"
+  integrity sha512-hEZC1KEeYuoHRqhGhTy6gWrpJA3ZDjFWv0DE61643ZnOXAKJb3u7yWcrU0mMc9SwAqK1n7myPGndkp0dFG7NFA==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.2"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 browserify-zlib@^0.2.0, browserify-zlib@~0.2.0:
   version "0.2.0"
@@ -8057,16 +9098,16 @@ browserify-zlib@^0.2.0, browserify-zlib@~0.2.0:
     pako "~1.0.5"
 
 browserify@^16.2.2:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/browserify/-/browserify-16.5.0.tgz#a1c2bc0431bec11fd29151941582e3f645ede881"
-  integrity sha512-6bfI3cl76YLAnCZ75AGu/XPOsqUhRyc0F/olGIJeCxtfxF2HvPKEcmjU9M8oAPxl4uBY1U7Nry33Q6koV3f2iw==
+  version "16.5.1"
+  resolved "https://registry.yarnpkg.com/browserify/-/browserify-16.5.1.tgz#3c13c97436802930d5c3ae28658ddc33bfd37dc2"
+  integrity sha512-EQX0h59Pp+0GtSRb5rL6OTfrttlzv+uyaUVlK6GX3w11SQ0jKPKyjC/54RhPR2ib2KmfcELM06e8FxcI5XNU2A==
   dependencies:
     JSONStream "^1.0.3"
     assert "^1.4.0"
     browser-pack "^6.0.1"
     browser-resolve "^1.11.0"
     browserify-zlib "~0.2.0"
-    buffer "^5.0.2"
+    buffer "~5.2.1"
     cached-path-relative "^1.0.0"
     concat-stream "^1.6.0"
     console-browserify "^1.1.0"
@@ -8084,7 +9125,7 @@ browserify@^16.2.2:
     inherits "~2.0.1"
     insert-module-globals "^7.0.0"
     labeled-stream-splicer "^2.0.0"
-    mkdirp "^0.5.0"
+    mkdirp-classic "^0.5.2"
     module-deps "^6.0.0"
     os-browserify "~0.3.0"
     parents "^1.0.1"
@@ -8110,14 +9151,15 @@ browserify@^16.2.2:
     vm-browserify "^1.0.0"
     xtend "^4.0.0"
 
-browserslist@4.6.6:
-  version "4.6.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.6.tgz#6e4bf467cde520bc9dbdf3747dafa03531cec453"
-  integrity sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==
+browserslist@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.10.0.tgz#f179737913eaf0d2b98e4926ac1ca6a15cbcc6a9"
+  integrity sha512-TpfK0TDgv71dzuTsEAlQiHeWQ/tiPqgNZVdv046fvNtBZrjbv2O3TsWCDU0AWGJJKCF/KsjNdLzR9hXOsh/CfA==
   dependencies:
-    caniuse-lite "^1.0.30000984"
-    electron-to-chromium "^1.3.191"
-    node-releases "^1.1.25"
+    caniuse-lite "^1.0.30001035"
+    electron-to-chromium "^1.3.378"
+    node-releases "^1.1.52"
+    pkg-up "^3.1.0"
 
 browserslist@4.7.0:
   version "4.7.0"
@@ -8136,19 +9178,20 @@ browserslist@^3.2.6:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
-browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1, browserslist@^4.3.4, browserslist@^4.4.2, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.7.3, browserslist@^4.8.2:
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
-  integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
+browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.3.4, browserslist@^4.4.2, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5, browserslist@^4.9.1:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
   dependencies:
-    caniuse-lite "^1.0.30001015"
-    electron-to-chromium "^1.3.322"
-    node-releases "^1.1.42"
+    caniuse-lite "^1.0.30001043"
+    electron-to-chromium "^1.3.413"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
 
 browserstack@^1.5.1:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.3.tgz#93ab48799a12ef99dbd074dd595410ddb196a7ac"
-  integrity sha512-AO+mECXsW4QcqC9bxwM29O7qWa7bJT94uBFzeb5brylIQwawuEziwq20dPYbins95GlWzOawgyDNdjYAo32EKg==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.6.0.tgz#5a56ab90987605d9c138d7a8b88128370297f9bf"
+  integrity sha512-HJDJ0TSlmkwnt9RZ+v5gFpa1XZTBYTj0ywvLwJ3241J7vMw2jAsGNVhKHtmCOyg+VxeLZyaibO9UL71AsUeDIw==
   dependencies:
     https-proxy-agent "^2.2.1"
 
@@ -8159,7 +9202,7 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "2.x"
 
-bser@^2.0.0:
+bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
   integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
@@ -8171,20 +9214,12 @@ btoa-lite@^1.0.0:
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
   integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
 
-bubble-stream-error@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/bubble-stream-error/-/bubble-stream-error-1.0.0.tgz#7dad97f17128da396169bf37ada4acb195361e30"
-  integrity sha1-fa2X8XEo2jlhab83raSssZU2HjA=
-  dependencies:
-    once "^1.3.3"
-    sliced "^1.0.1"
-
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
   integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
 
-buffer-alloc@^1.1.0, buffer-alloc@^1.2.0:
+buffer-alloc@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
   integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
@@ -8192,7 +9227,7 @@ buffer-alloc@^1.1.0, buffer-alloc@^1.2.0:
     buffer-alloc-unsafe "^1.1.0"
     buffer-fill "^1.0.0"
 
-buffer-crc32@^0.2.13, buffer-crc32@~0.2.3:
+buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
@@ -8222,6 +9257,11 @@ buffer-indexof@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
   integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
 
+buffer-json@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23"
+  integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==
+
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -8236,14 +9276,63 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.2, buffer@^5.1.0:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.4.3.tgz#3fbc9c69eb713d323e3fc1a895eee0710c072115"
-  integrity sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==
+buffer@^5.1.0, buffer@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
+  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
+buffer@~5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
+  integrity sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
 
+build-plugin-rax-app@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/build-plugin-rax-app/-/build-plugin-rax-app-0.2.0.tgz#f47819a2d44f08423ec866d2b2340a552bb43bb0"
+  integrity sha512-9BkjpDFMaO3qQOq2JzZ+QI+wbbKU4D9dog73MSwpxeY2/8zSrTWQacePmBIyCr8xdwJTIQurRM/VCHRY/0dZlw==
+  dependencies:
+    "@babel/core" "7.2.0"
+    address "^1.0.1"
+    autoprefixer "^9.4.3"
+    babel-loader "8.0.4"
+    case-sensitive-paths-webpack-plugin "^2.1.2"
+    chalk "^2.4.2"
+    console-clear "^1.1.1"
+    copy-webpack-plugin "^5.0.4"
+    css-loader "^2.1.1"
+    deepmerge "^4.0.0"
+    fs-extra "^8.1.0"
+    image-source-loader "^0.6.5"
+    jsx2mp-cli "^0.2.0"
+    klaw-sync "^6.0.0"
+    less "^3.9.0"
+    less-loader "^5.0.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.15"
+    mini-css-extract-plugin "^0.5.0"
+    optimize-css-assets-webpack-plugin "^5.0.1"
+    postcss "^7.0.17"
+    postcss-loader "^3.0.0"
+    postcss-plugin-rpx2vw "^0.0.1"
+    postcss-preset-env "^6.6.0"
+    qrcode-terminal "^0.12.0"
+    rax-compile-config "^0.2.0"
+    rax-server-renderer "^1.0.0"
+    stylesheet-loader "^0.6.5"
+    terser-webpack-plugin "^2.1.3"
+    ts-loader "^5.3.3"
+    typescript "^3.2.4"
+    webpack "^4.27.1"
+    webpack-bundle-analyzer "^3.4.1"
+    webpack-chain "^6.0.0"
+    webpack-sources "^1.3.0"
+
 builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -8259,7 +9348,7 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-bunyan@^1.8.12:
+bunyan@1.8.12:
   version "1.8.12"
   resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
   integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=
@@ -8299,28 +9388,30 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
-cacache@12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.2.tgz#8db03205e36089a3df6954c66ce92541441ac46c"
-  integrity sha512-ifKgxH2CKhJEg6tNdAwziu6Q33EvuG26tYcda6PT3WKisZcYDXsnEdnRv67Po3yCzFfaSoMjGZzJyD2c3DT1dg==
+cacache@15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.0.tgz#133b59edbd2a37ea8ef2d54964c6f247e47e5059"
+  integrity sha512-L0JpXHhplbJSiDGzyJJnJCTL7er7NzbBgxzVqLswEb4bO91Zbv17OUMuUeu/q0ZwKn3V+1HM4wb9tO4eVE/K8g==
   dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
+    chownr "^1.1.2"
+    fs-minipass "^2.0.0"
     glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
+    infer-owner "^1.0.4"
     lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
     move-concurrently "^1.0.1"
+    p-map "^3.0.0"
     promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
+    rimraf "^2.7.1"
+    ssri "^8.0.0"
+    tar "^6.0.1"
     unique-filename "^1.1.1"
-    y18n "^4.0.0"
 
-cacache@^11.0.2, cacache@^11.2.0, cacache@^11.3.1, cacache@^11.3.2, cacache@^11.3.3:
+cacache@^11.0.2, cacache@^11.3.3:
   version "11.3.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.3.tgz#8bd29df8c6a718a6ebd2d010da4d7972ae3bbadc"
   integrity sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==
@@ -8341,9 +9432,9 @@ cacache@^11.0.2, cacache@^11.2.0, cacache@^11.3.1, cacache@^11.3.2, cacache@^11.
     y18n "^4.0.0"
 
 cacache@^12.0.0, cacache@^12.0.2, cacache@^12.0.3:
-  version "12.0.3"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
-  integrity sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
   dependencies:
     bluebird "^3.5.5"
     chownr "^1.1.1"
@@ -8385,6 +9476,29 @@ cacache@^13.0.1:
     ssri "^7.0.0"
     unique-filename "^1.1.1"
 
+cacache@^15.0.3:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.3.tgz#2225c2d1dd8e872339950d6a39c051e0e9334392"
+  integrity sha512-bc3jKYjqv7k4pWh7I/ixIjfcjPul4V4jme/WbjvwGS5LzoPL/GzXr4C5EgPNLO/QEZl9Oi61iGitYEdwcrwLCQ==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
+    move-file "^2.0.0"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.0"
+    tar "^6.0.2"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -8400,6 +9514,18 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cache-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e"
+  integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==
+  dependencies:
+    buffer-json "^2.0.0"
+    find-cache-dir "^3.0.0"
+    loader-utils "^1.2.3"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    schema-utils "^2.0.0"
+
 cacheable-request@^2.1.1:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
@@ -8431,12 +9557,10 @@ cached-path-relative@^1.0.0, cached-path-relative@^1.0.2:
   resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.2.tgz#a13df4196d26776220cc3356eb147a52dba2c6db"
   integrity sha512-5r2GqsoEb4qMTTN9J+WzXfjov+hjxT+j3u5K+kIVNIwAd99DLCJE9pBIMP1qVeybV6JiijL385Oz0DcYxfbOIg==
 
-cachedir@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-1.3.0.tgz#5e01928bf2d95b5edd94b0942188246740e0dbc4"
-  integrity sha512-O1ji32oyON9laVPJL1IZ5bmwd2cB46VfpxkDequezH+15FDzzVddEyrGEeX4WusDSqKxdyFdDQDEG1yo1GoWkg==
-  dependencies:
-    os-homedir "^1.0.1"
+cachedir@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
+  integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 calculate-cache-key-for-tree@^2.0.0:
   version "2.0.0"
@@ -8484,7 +9608,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@3.0.x, camel-case@^3.0.0:
+camel-case@3.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
   integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
@@ -8492,6 +9616,14 @@ camel-case@3.0.x, camel-case@^3.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
+camel-case@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
+  integrity sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==
+  dependencies:
+    pascal-case "^3.1.1"
+    tslib "^1.10.0"
+
 camelcase-css@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
@@ -8514,11 +9646,25 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
   integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
 
+camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 camelcase@^1.0.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
@@ -8534,15 +9680,15 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
   integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
-camelcase@^4.1.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+camelcase@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
 camelize@^1.0.0:
   version "1.0.0"
@@ -8556,11 +9702,6 @@ can-symlink@^1.0.0:
   dependencies:
     tmp "0.0.28"
 
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -8571,33 +9712,16 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@1.0.30000989:
-  version "1.0.30000989"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
-  integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000984, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001010:
-  version "1.0.30001012"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz#653ec635e815b9e0fb801890923b0c2079eb34ec"
-  integrity sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==
-
-caniuse-lite@^1.0.30001015:
-  version "1.0.30001016"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
-  integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001032, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
+  version "1.0.30001066"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz#0a8a58a10108f2b9bf38e7b65c237b12fd9c5f04"
+  integrity sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==
 
 canonical-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-1.0.0.tgz#fcb470c23958def85081856be7a86e904f180d1d"
   integrity sha512-feylzsbDxi1gPZ1IjystzIQZagYYLvfKrSuygUCgf7z6x790VEzze5QEkdSV1U58RA7Hi0+v6fv4K54atOzATg==
 
-capture-exit@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
-  integrity sha1-HF/MSJ/QqwDU8ax64QcuMXP7q28=
-  dependencies:
-    rsvp "^3.3.3"
-
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -8618,20 +9742,25 @@ cardinal@^1.0.0:
     ansicolors "~0.2.1"
     redeyed "~1.0.0"
 
-case-sensitive-paths-webpack-plugin@2.2.0, case-sensitive-paths-webpack-plugin@^2.2.0:
+case-sensitive-paths-webpack-plugin@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
   integrity sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==
 
+case-sensitive-paths-webpack-plugin@2.3.0, case-sensitive-paths-webpack-plugin@^2.1.2, case-sensitive-paths-webpack-plugin@^2.2.0, case-sensitive-paths-webpack-plugin@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
+  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
 ccount@^1.0.0, ccount@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.4.tgz#9cf2de494ca84060a2a8d2854edd6dfb0445f386"
-  integrity sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
+  integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
 
 center-align@^0.1.1:
   version "0.1.3"
@@ -8650,15 +9779,6 @@ chai@^3.5.0:
     deep-eql "^0.1.3"
     type-detect "^1.0.0"
 
-chalk@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -8687,32 +9807,40 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-change-emitter@^0.1.2:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
-  integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
 
 char-props@^0.1.5, char-props@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/char-props/-/char-props-0.1.5.tgz#5b952f9e20ea21cd08ca7fe135a10f6fe91c109e"
   integrity sha1-W5UvniDqIc0Iyn/hNaEPb+kcEJ4=
 
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
 character-entities-html4@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.3.tgz#5ce6e01618e47048ac22f34f7f39db5c6fd679ef"
-  integrity sha512-SwnyZ7jQBCRHELk9zf2CN5AnGEc2nA+uKMZLHvcqhpPprjkYhiLn0DywMHgN5ttFZuITMATbh68M6VIVKwJbcg==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
+  integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
 
 character-entities-legacy@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4"
-  integrity sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
 
 character-entities@^1.0.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.3.tgz#bbed4a52fe7ef98cc713c6d80d9faa26916d54e6"
-  integrity sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
-character-parser@^2.1.1:
+character-parser@^2.1.1, character-parser@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
   integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
@@ -8720,14 +9848,9 @@ character-parser@^2.1.1:
     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"
-  integrity sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==
-
-chardet@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
-  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
 chardet@^0.7.0:
   version "0.7.0"
@@ -8773,10 +9896,10 @@ cheerio@^1.0.0-rc.2, cheerio@^1.0.0-rc.3:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
-"chokidar@>=2.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.1.1, chokidar@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.0.tgz#12c0714668c55800f659e262d4962a97faf554a6"
-  integrity sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==
+"chokidar@>=2.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.1.1, chokidar@^3.2.2, chokidar@^3.3.0, chokidar@^3.3.1, chokidar@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -8784,9 +9907,9 @@ cheerio@^1.0.0-rc.2, cheerio@^1.0.0-rc.3:
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.2.0"
+    readdirp "~3.4.0"
   optionalDependencies:
-    fsevents "~2.1.1"
+    fsevents "~2.1.2"
 
 chokidar@^1.4.3:
   version "1.7.0"
@@ -8804,7 +9927,7 @@ chokidar@^1.4.3:
   optionalDependencies:
     fsevents "^1.0.0"
 
-chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.0.4, chokidar@^2.1.1, chokidar@^2.1.5, chokidar@^2.1.8:
+chokidar@^2.0.0, chokidar@^2.0.3, chokidar@^2.0.4, chokidar@^2.1.5, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
   integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
@@ -8823,10 +9946,60 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.0.4, chokidar@^2.
   optionalDependencies:
     fsevents "^1.2.7"
 
-chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
-  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
+chownr@^1.1.1, chownr@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
+chromatic@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-4.0.3.tgz#3788bdb78b6323190dae2e9714dc0e5934926a45"
+  integrity sha512-TmtYAblzPxbEhH8vpQvL3aqQ/K2AkxraMliaIdORmOyVHmV4qM1aQHP2zPj4yTSdZ5/Tap5zOPW1xODrkQcI4Q==
+  dependencies:
+    "@babel/preset-react" "^7.9.4"
+    "@babel/runtime" "^7.9.2"
+    "@chromaui/localtunnel" "2.0.1"
+    async-retry "^1.3.1"
+    babel-plugin-require-context-hook "^1.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.1.1"
+    denodeify "^1.2.1"
+    dotenv "^8.2.0"
+    enhanced-resolve "^4.1.1"
+    env-ci "^5.0.2"
+    esm "^3.2.25"
+    execa "^4.0.0"
+    fake-tag "^2.0.0"
+    fs-extra "^9.0.0"
+    is-url "^1.2.4"
+    jest "^25.2.7"
+    jsdom "16.2.2"
+    jsonfile "^6.0.1"
+    meow "^6.1.0"
+    minimatch "^3.0.4"
+    node-ask "^1.0.1"
+    node-fetch "^2.6.0"
+    node-loggly-bulk "^2.2.4"
+    npmlog "^4.1.2"
+    pino "5.17.0"
+    pkg-up "^3.1.0"
+    progress "^2.0.3"
+    progress-stream "^2.0.0"
+    rotating-file-stream "^2.0.2"
+    semver "^7.1.3"
+    slash "^3.0.0"
+    strip-color "^0.1.0"
+    tmp "^0.1.0"
+    tree-kill "^1.2.2"
+    ts-dedent "^1.1.1"
+    util-deprecate "^1.0.2"
+    uuid "^7.0.3"
+    yarn-or-npm "^3.0.1"
 
 chrome-trace-event@^1.0.0, chrome-trace-event@^1.0.2:
   version "1.0.2"
@@ -8892,10 +10065,10 @@ clean-css-promise@^0.1.0:
     clean-css "^3.4.5"
     pinkie-promise "^2.0.0"
 
-clean-css@4.2.1, clean-css@4.2.x, clean-css@^4.1.11, clean-css@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
-  integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
+clean-css@4.2.x, clean-css@^4.1.11, clean-css@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
   dependencies:
     source-map "~0.6.0"
 
@@ -8917,12 +10090,10 @@ clean-up-path@^1.0.0:
   resolved "https://registry.yarnpkg.com/clean-up-path/-/clean-up-path-1.0.0.tgz#de9e8196519912e749c9eaf67c13d64fac72a3e5"
   integrity sha512-PHGlEF0Z6976qQyN6gM7kKH6EH0RdfZcc8V+QhFe36eRxV0SMH5OUBZG7Bxa9YcreNzyNbK63cGiZxdSZgosRw==
 
-clean-webpack-plugin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-1.0.1.tgz#b16ee2f1386aea403010236e632447c7d3505f5a"
-  integrity sha512-gvwfMsqu3HBgTVvaBa1H3AZKO03CHpr5uP92SPIktP3827EovAitwW+1xoqXyTxCuXnLYpMHG5ytS4AoukHDWA==
-  dependencies:
-    rimraf "^2.6.1"
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha1-T6kXw+WclKAEzWH47lCdplFocUM=
 
 cli-boxes@^2.2.0:
   version "2.2.0"
@@ -8950,20 +10121,27 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-spinners@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
-  integrity sha1-u3ZNiOGF+54eaiofGXcjGPYF4xw=
+cli-highlight@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.4.tgz#098cb642cf17f42adc1c1145e07f960ec4d7522b"
+  integrity sha512-s7Zofobm20qriqDoU9sXptQx0t2R9PEgac92mENNm7xaEe1hn71IIMsXMK+6encA6WRCWWxIGQbipr3q998tlQ==
+  dependencies:
+    chalk "^3.0.0"
+    highlight.js "^9.6.0"
+    mz "^2.4.0"
+    parse5 "^5.1.1"
+    parse5-htmlparser2-tree-adapter "^5.1.1"
+    yargs "^15.0.0"
 
 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==
 
-cli-spinners@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
-  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
+cli-spinners@^2.0.0, cli-spinners@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.3.0.tgz#0632239a4b5aa4c958610142c34bb7a651fc8df5"
+  integrity sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==
 
 cli-table3@0.5.1:
   version "0.5.1"
@@ -8975,13 +10153,31 @@ cli-table3@0.5.1:
   optionalDependencies:
     colors "^1.1.2"
 
-cli-table@0.3.1, cli-table@^0.3.1:
+cli-table3@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
+  integrity sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==
+  dependencies:
+    object-assign "^4.1.0"
+    string-width "^4.2.0"
+  optionalDependencies:
+    colors "^1.1.2"
+
+cli-table@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
   integrity sha1-9TsFJmqLGguTSz0IIebi3FkUriM=
   dependencies:
     colors "1.0.3"
 
+cli-truncate@2.1.0, cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
 cli-truncate@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
@@ -8991,19 +10187,36 @@ cli-truncate@^0.2.1:
     string-width "^1.0.1"
 
 cli-width@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cli@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cli/-/cli-1.0.1.tgz#22817534f24bfa4950c34d532d48ecbc621b8c14"
+  integrity sha1-IoF1NPJL+klQw01TLUjsvGIbjBQ=
+  dependencies:
+    exit "0.1.2"
+    glob "^7.1.1"
 
 clipboard@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
-  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+clipboardy@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
+  integrity sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==
+  dependencies:
+    arch "^2.1.1"
+    execa "^1.0.0"
+    is-wsl "^2.1.1"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -9040,6 +10253,15 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 clone-deep@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
@@ -9077,22 +10299,17 @@ clone-response@1.0.2, clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clone@^1.0.1, clone@^1.0.2:
+clone@^1.0.2, clone@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clone@^2.0.0, clone@^2.1.0, clone@^2.1.1, clone@^2.1.2:
+clone@^2.0.0, clone@^2.1.1, clone@^2.1.2, clone@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
-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"
-  integrity sha1-l1+HwTLymdJKA3W59jyj+4j3Kzo=
-
-cmd-shim@^3.0.0:
+cmd-shim@^3.0.0, cmd-shim@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-3.0.3.tgz#2c35238d3df37d98ecdd7d5f6b8dc6b21cadc7cb"
   integrity sha512-DtGg+0xiFhQIntSBRzL2fRQBnmtAVwXIDo4Qq46HPpObYquxMaZS4sb82U9nH91qJrlosC1wa9gwr0QyL/HypA==
@@ -9130,24 +10347,24 @@ code-point-at@^1.0.0:
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
 codecov@^3.5.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.6.1.tgz#f39fc49413445555f81f8e3ca5730992843b4517"
-  integrity sha512-IUJB6WG47nWK7o50etF8jBadxdMw7DmoQg05yIljstXFBGB6clOZsIj6iD4P82T2YaIU3qq+FFu8K9pxgkCJDQ==
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.7.0.tgz#4a09939cde24447a43f36d068e8b4e0188dc3f27"
+  integrity sha512-uIixKofG099NbUDyzRk1HdGtaG8O+PBUAg3wfmjwXw2+ek+PZp+puRvbTohqrVfuudaezivJHFgTtSC3M8MXww==
   dependencies:
-    argv "^0.0.2"
-    ignore-walk "^3.0.1"
-    js-yaml "^3.13.1"
-    teeny-request "^3.11.3"
-    urlgrey "^0.4.4"
+    argv "0.0.2"
+    ignore-walk "3.0.3"
+    js-yaml "3.13.1"
+    teeny-request "6.0.1"
+    urlgrey "0.4.4"
 
 codelyzer@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-5.2.0.tgz#b0ee573a12779c996090e596c5c1755479d83758"
-  integrity sha512-izfUfhEOOgAizszPlEDxo71DK/C4wprZw0vkY6UWcOSTQvN1JyfXf9DXwaV7WX+/JC+hH0ShXfdtGLA9Rca7LA==
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-5.2.2.tgz#d0530a455784e6bea0b6d7e97166c73c30a5347f"
+  integrity sha512-jB4FZ1Sx7kZhvZVdf+N2BaKTdrrNZOL0Bj10RRfrhHrb3zEvXjJvvq298JPMJAiyiCS/v4zs1QlGU0ip7xGqeA==
   dependencies:
     app-root-path "^2.2.1"
     aria-query "^3.0.0"
-    axobject-query "^2.0.2"
+    axobject-query "2.0.2"
     css-selector-tokenizer "^0.7.1"
     cssauron "^1.4.0"
     damerau-levenshtein "^1.0.4"
@@ -9155,23 +10372,28 @@ codelyzer@^5.0.0:
     source-map "^0.5.7"
     sprintf-js "^1.1.2"
 
-codemirror-graphql@^0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-0.11.2.tgz#d9960a7bb9956485911172af3245fa245219f544"
-  integrity sha512-T5nvjBex1qS6wi87mbOa0x+ZHGoDvzbztlLICpLmgXzARI3kfWZ+UfTbc0rKzFVZN6LrfFD1bQxSc0bA29uL/g==
+codemirror-graphql@^0.11.6:
+  version "0.11.6"
+  resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-0.11.6.tgz#885e34afb5b7aacf0e328d4d5949e73ad21d5a4e"
+  integrity sha512-/zVKgOVS2/hfjAY0yoBkLz9ESHnWKBWpBNXQSoFF4Hl5q5AS2DmM22coonWKJcCvNry6TLak2F+QkzPeKVv3Eg==
   dependencies:
-    graphql-language-service-interface "^2.3.0"
-    graphql-language-service-parser "^1.5.0"
+    graphql-language-service-interface "^2.3.3"
+    graphql-language-service-parser "^1.5.2"
 
 codemirror@^5.47.0:
-  version "5.49.2"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.49.2.tgz#c84fdaf11b19803f828b0c67060c7bc6d154ccad"
-  integrity sha512-dwJ2HRPHm8w51WB5YTF9J7m6Z5dtkqbU9ntMZ1dqXyFB9IpjoUFDj80ahRVEoVanfIp6pfASJbOlbWdEf8FOzQ==
+  version "5.54.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.54.0.tgz#82b6adf662b29eeb7b867fe7839d49e25e4a0b38"
+  integrity sha512-Pgf3surv4zvw+KaW3doUU7pGjF0BPU8/sj7eglWJjzni46U/DDW8pu3nZY0QgQKUcICDXRkq8jZmq0y6KhxM3Q==
 
 collapse-white-space@^1.0.0, collapse-white-space@^1.0.2, collapse-white-space@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.5.tgz#c2495b699ab1ed380d29a1091e01063e75dbbe3a"
-  integrity sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
 collection-visit@^1.0.0:
   version "1.0.0"
@@ -9200,7 +10422,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -9218,7 +10440,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^3.0.0, color@^3.1.1:
+color@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -9231,21 +10453,21 @@ colors@1.0.3:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
   integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
 
-colors@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
+colors@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.2.tgz#2df8ff573dfbf255af562f8ce7181d6b971a359b"
+  integrity sha512-rhP0JSBGYvpcNQj4s5AdShMeE5ahMop96cTeDl/v9qQQm2fYClE2QXZRi8wLzc+GmXSxdIqqbOIAhyObEXDbfQ==
+
+colors@1.4.0, colors@^1.1.2, colors@^1.3.3, colors@^1.4.0, colors@latest:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
 colors@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
   integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=
 
-colors@^1.1.2, colors@^1.4.0, colors@latest:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
 columnify@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
@@ -9264,14 +10486,7 @@ combine-source-map@^0.8.0, combine-source-map@~0.8.0:
     lodash.memoize "~3.0.3"
     source-map "~0.5.3"
 
-combined-stream@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
-  integrity sha1-cj599ugBrFYTETp+RFqbactjKBg=
-  dependencies:
-    delayed-stream "~1.0.0"
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.5, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -9286,19 +10501,14 @@ combined-stream@~0.0.4:
     delayed-stream "0.0.5"
 
 comma-separated-tokens@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
-  integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
 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.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.9.tgz#c50725af3808c8ab0260fd60b01fbfa25b954f69"
+  integrity sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==
 
 commander@2.17.1, commander@2.17.x:
   version "2.17.1"
@@ -9312,32 +10522,37 @@ commander@2.8.x:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.11.0, commander@^2.12.1, commander@^2.15.1, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.6.0, commander@^2.9.0, commander@~2.20.3:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commander@^3.0.1, commander@^3.0.2:
+commander@3.0.2, commander@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
-commander@^4.0.0, commander@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
-  integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==
+commander@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==
 
-commander@~2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
-  integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
+commander@^2.11.0, commander@^2.12.1, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.6.0, commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@^4.0.1, commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commander@^5.0.0, commander@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-common-tags@1.8.0, common-tags@^1.4.0, common-tags@^1.8.0:
+common-tags@1.8.0, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
   integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
@@ -9348,17 +10563,17 @@ commondir@^1.0.1:
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
 compare-func@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
-  integrity sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.4.tgz#6b07c4c5e8341119baf44578085bda0f4a823516"
+  integrity sha512-sq2sWtrqKPkEXAC8tEJA1+BqAH9GbFkGBtUOqrUX57VSfwp8xyktctk+uLoRy5eccTdxzDcVIztlYDpKs3Jv1Q==
   dependencies:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
 
-compare-versions@^3.4.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.5.1.tgz#26e1f5cf0d48a77eced5046b9f67b6b61075a393"
-  integrity sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg==
+compare-versions@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
+  integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
 
 complain@^1.0.0, complain@^1.2.0, complain@^1.6.0:
   version "1.6.0"
@@ -9377,7 +10592,7 @@ component-emitter@1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
   integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
 
-component-emitter@^1.2.1:
+component-emitter@^1.2.1, component-emitter@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
@@ -9387,11 +10602,6 @@ component-inherit@0.0.3:
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
   integrity sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=
 
-component-type@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/component-type/-/component-type-1.2.1.tgz#8a47901700238e4fc32269771230226f24b415a9"
-  integrity sha1-ikeQFwAjjk/DIml3EjAibyS0Fak=
-
 compose-function@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
@@ -9400,25 +10610,13 @@ compose-function@3.0.3:
     arity-n "^1.0.4"
 
 compressible@~2.0.16:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
-  integrity sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==
-  dependencies:
-    mime-db ">= 1.40.0 < 2"
-
-compression-webpack-plugin@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-2.0.0.tgz#46476350c1eb27f783dccc79ac2f709baa2cffbc"
-  integrity sha512-bDgd7oTUZC8EkRx8j0sjyCfeiO+e5sFcfgaFcjVhfQf5lLya7oY2BczxcJ7IUuVjz5m6fy8IECFmVFew3xLk8Q==
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
   dependencies:
-    cacache "^11.2.0"
-    find-cache-dir "^2.0.0"
-    neo-async "^2.5.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^1.4.0"
-    webpack-sources "^1.0.1"
+    mime-db ">= 1.43.0 < 2"
 
-compression@^1.5.2, compression@^1.7.1, compression@^1.7.4:
+compression@1.7.4, compression@^1.5.2, compression@^1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
   integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
@@ -9436,7 +10634,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@1.6.2, concat-stream@^1.5.0, concat-stream@^1.6.0, concat-stream@^1.6.1, concat-stream@~1.6.0:
+concat-stream@^1.5.0, concat-stream@^1.6.0, concat-stream@^1.6.1, concat-stream@^1.6.2, concat-stream@~1.6.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -9456,10 +10654,10 @@ concat-stream@^2.0.0:
     readable-stream "^3.0.2"
     typedarray "^0.0.6"
 
-concurrently@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.0.0.tgz#99c7567d009411fbdc98299d553c4b99a978612c"
-  integrity sha512-1yDvK8mduTIdxIxV9C60KoiOySUl/lfekpdbI+U5GXaPrgdffEavFa9QZB3vh68oWOpbCC+TuvxXV9YRPMvUrA==
+concurrently@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.2.0.tgz#ead55121d08a0fc817085584c123cedec2e08975"
+  integrity sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==
   dependencies:
     chalk "^2.4.2"
     date-fns "^2.0.1"
@@ -9467,9 +10665,9 @@ concurrently@^5.0.0:
     read-pkg "^4.0.1"
     rxjs "^6.5.2"
     spawn-command "^0.0.2-1"
-    supports-color "^4.5.0"
-    tree-kill "^1.2.1"
-    yargs "^12.0.5"
+    supports-color "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
 
 config-chain@^1.1.11:
   version "1.1.12"
@@ -9479,6 +10677,18 @@ config-chain@^1.1.11:
     ini "^1.3.4"
     proto-list "~1.2.1"
 
+configstore@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
+  integrity sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
+
 configstore@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7"
@@ -9491,12 +10701,12 @@ configstore@^4.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
-configstore@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.0.tgz#37de662c7a49b5fe8dbcf8f6f5818d2d81ed852b"
-  integrity sha512-eE/hvMs7qw7DlcB5JPRnthmrITuHMmACUJAp89v6PT6iOqzoLS7HRWhBtuHMlhNHo2AhUSA/3Dh1bKNJHcublQ==
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
   dependencies:
-    dot-prop "^5.1.0"
+    dot-prop "^5.2.0"
     graceful-fs "^4.1.2"
     make-dir "^3.0.0"
     unique-string "^2.0.0"
@@ -9513,7 +10723,7 @@ connect-history-api-fallback@^1.3.0, connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-connect@^3.6.5, connect@^3.6.6:
+connect@^3.6.6:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
   integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
@@ -9523,6 +10733,13 @@ connect@^3.6.5, connect@^3.6.6:
     parseurl "~1.3.3"
     utils-merge "1.0.1"
 
+console-browserify@1.1.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
+  dependencies:
+    date-now "^0.1.4"
+
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -9566,6 +10783,14 @@ constantinople@^3.0.1, constantinople@^3.1.2:
     babel-types "^6.26.0"
     babylon "^6.18.0"
 
+constantinople@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
+  integrity sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==
+  dependencies:
+    "@babel/parser" "^7.6.0"
+    "@babel/types" "^7.6.1"
+
 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"
@@ -9576,11 +10801,6 @@ contains-path@^0.1.0:
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
   integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
 
-content-disposition@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
-  integrity sha1-DPaLud318r55YcOoUXjLhdunjLQ=
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -9599,9 +10819,9 @@ continuable-cache@^0.3.1:
   integrity sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=
 
 conventional-changelog-angular@^5.0.3:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.6.tgz#269540c624553aded809c29a3508fdc2b544c059"
-  integrity sha512-QDEmLa+7qdhVIv8sFZfVxU1VSyVvnXPsxq8Vam49mKUcO1Z8VTLEJk9uI21uiJUsnmm0I4Hrsdc9TgkOQo9WSA==
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.10.tgz#5cf7b00dd315b6a6a558223c80d5ef24ddb34205"
+  integrity sha512-k7RPPRs0vp8+BtPsM9uDxRl6KcgqtCJmzRD1wRtgqmhQ96g8ifBGo9O/TZBG23jqlXS/rg8BKRDELxfnQQGiaA==
   dependencies:
     compare-func "^1.3.1"
     q "^1.5.1"
@@ -9626,43 +10846,43 @@ conventional-changelog-core@^3.1.6:
     through2 "^3.0.0"
 
 conventional-changelog-preset-loader@^2.1.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.0.tgz#580fa8ab02cef22c24294d25e52d7ccd247a9a6a"
-  integrity sha512-/rHb32J2EJnEXeK4NpDgMaAVTFZS3o1ExmjKMtYVgIC4MQn0vkNSbYpdGRotkfGGRWiqk3Ri3FBkiZGbAfIfOQ==
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
+  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
 
 conventional-changelog-writer@^4.0.6:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.11.tgz#9f56d2122d20c96eb48baae0bf1deffaed1edba4"
-  integrity sha512-g81GQOR392I+57Cw3IyP1f+f42ME6aEkbR+L7v1FBBWolB0xkjKTeCWVguzRrp6UiT1O6gBpJbEy2eq7AnV1rw==
+  version "4.0.16"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.16.tgz#ca10f2691a8ea6d3c2eb74bd35bcf40aa052dda5"
+  integrity sha512-jmU1sDJDZpm/dkuFxBeRXvyNcJQeKhGtVcFFkwTphUAzyYWcwz2j36Wcv+Mv2hU3tpvLMkysOPXJTLO55AUrYQ==
   dependencies:
     compare-func "^1.3.1"
-    conventional-commits-filter "^2.0.2"
+    conventional-commits-filter "^2.0.6"
     dateformat "^3.0.0"
-    handlebars "^4.4.0"
+    handlebars "^4.7.6"
     json-stringify-safe "^5.0.1"
     lodash "^4.17.15"
-    meow "^5.0.0"
+    meow "^7.0.0"
     semver "^6.0.0"
     split "^1.0.0"
     through2 "^3.0.0"
 
-conventional-commits-filter@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.2.tgz#f122f89fbcd5bb81e2af2fcac0254d062d1039c1"
-  integrity sha512-WpGKsMeXfs21m1zIw4s9H5sys2+9JccTzpN6toXtxhpw2VNF2JUXwIakthKBy+LN4DvJm+TzWhxOMWOs1OFCFQ==
+conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.6.tgz#0935e1240c5ca7698329affee1b6a46d33324c4c"
+  integrity sha512-4g+sw8+KA50/Qwzfr0hL5k5NWxqtrOVw4DDk3/h6L85a9Gz0/Eqp3oP+CWCNfesBvZZZEFHF7OTEbRe+yYSyKw==
   dependencies:
     lodash.ismatch "^4.4.0"
     modify-values "^1.0.0"
 
 conventional-commits-parser@^3.0.3:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.0.8.tgz#23310a9bda6c93c874224375e72b09fb275fe710"
-  integrity sha512-YcBSGkZbYp7d+Cr3NWUeXbPDFUN6g3SaSIzOybi8bjHL5IJ5225OSCxJJ4LgziyEJ7AaJtE9L2/EU6H7Nt/DDQ==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.1.0.tgz#10140673d5e7ef5572633791456c5d03b69e8be4"
+  integrity sha512-RSo5S0WIwXZiRxUGTPuYFbqvrR4vpJ1BDdTlthFgvHt5kEdnd1+pdvwWphWn57/oIl4V72NMmOocFqqJ8mFFhA==
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.1"
     lodash "^4.17.15"
-    meow "^5.0.0"
+    meow "^7.0.0"
     split2 "^2.0.0"
     through2 "^3.0.0"
     trim-off-newlines "^1.0.0"
@@ -9681,10 +10901,10 @@ conventional-recommended-bump@^5.0.0:
     meow "^4.0.0"
     q "^1.5.1"
 
-convert-source-map@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
-  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
   dependencies:
     safe-buffer "~5.1.1"
 
@@ -9693,13 +10913,6 @@ convert-source-map@^0.3.3:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
 convert-source-map@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
@@ -9720,6 +10933,14 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
+cookies@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
+  integrity sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==
+  dependencies:
+    depd "~2.0.0"
+    keygrip "~1.1.0"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -9743,50 +10964,16 @@ copy-descriptor@^0.1.0:
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
 copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
-  integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
   dependencies:
     toggle-selection "^1.0.6"
 
-copy-webpack-plugin@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.0.tgz#db3269ab83e8a2c3316c1bc9cba54019bbcf5c17"
-  integrity sha512-iiDj+8nnZeW/i8vYJ3+ABSZkOefJnDYIGLojiZKKFDvf1wcEInABXH1+hN7axQMn04qvJxKjgVOee0e14XPtCg==
-  dependencies:
-    cacache "^11.3.1"
-    find-cache-dir "^2.0.0"
-    globby "^7.1.1"
-    is-glob "^4.0.0"
-    loader-utils "^1.1.0"
-    minimatch "^3.0.4"
-    normalize-path "^3.0.0"
-    p-limit "^2.1.0"
-    serialize-javascript "^1.4.0"
-    webpack-log "^2.0.0"
-
-copy-webpack-plugin@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.4.tgz#c78126f604e24f194c6ec2f43a64e232b5d43655"
-  integrity sha512-YBuYGpSzoCHSSDGyHy6VJ7SHojKp6WHT4D7ItcQFNAYx2hrwkMe56e97xfVR0/ovDuMTrMffXUiltvQljtAGeg==
-  dependencies:
-    cacache "^11.3.3"
-    find-cache-dir "^2.1.0"
-    glob-parent "^3.1.0"
-    globby "^7.1.1"
-    is-glob "^4.0.1"
-    loader-utils "^1.2.3"
-    minimatch "^3.0.4"
-    normalize-path "^3.0.0"
-    p-limit "^2.2.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^1.7.0"
-    webpack-log "^2.0.0"
-
-copy-webpack-plugin@^5.0.0:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.5.tgz#731df6a837a2ef0f8f8e2345bdfe9b7c62a2da68"
-  integrity sha512-7N68eIoQTyudAuxkfPT7HzGoQ+TsmArN/I3HFwG+lVE3FNzqvZKIiaxtYh4o3BIznioxUvx9j26+Rtsc9htQUQ==
+copy-webpack-plugin@5.1.1, copy-webpack-plugin@^5.0.4, copy-webpack-plugin@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"
+  integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==
   dependencies:
     cacache "^12.0.3"
     find-cache-dir "^2.1.0"
@@ -9798,41 +10985,41 @@ copy-webpack-plugin@^5.0.0:
     normalize-path "^3.0.0"
     p-limit "^2.2.1"
     schema-utils "^1.0.0"
-    serialize-javascript "^2.1.0"
+    serialize-javascript "^2.1.2"
     webpack-log "^2.0.0"
 
-core-js-compat@^3.1.1, core-js-compat@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.0.tgz#4eb6cb69d03d99159ed7c860cd5fcf7d23a62ea9"
-  integrity sha512-Z3eCNjGgoYluH89Jt4wVkfYsc/VdLrA2/woX5lm0isO/pCT+P+Y+o65bOuEnjDJLthdwTBxbCVzptTXtc18fJg==
+core-js-compat@^3.6.2, core-js-compat@^3.6.4:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
+  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
   dependencies:
-    browserslist "^4.8.2"
+    browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js-pure@^3.0.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.4.2.tgz#ffd4ea4dc1f8517f75d4a929986a214629477417"
-  integrity sha512-6+iSif/3zO0bSkhjVY9o4MTdv36X+rO6rqs/UxQ+uxBevmC4fsfwyQwFVdZXXONmLlKVLiXCG8PDvQ2Gn/iteA==
+core-js-pure@^3.0.0, core-js-pure@^3.0.1:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
+  integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
 
-core-js@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
-  integrity sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==
+core-js@3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.6.5:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
-  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.0.1, core-js@^3.0.4:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.2.tgz#ee2b1a60b50388d8ddcda8cdb44a92c7a9ea76df"
-  integrity sha512-bUTfqFWtNKWp73oNIfRkqwYZJeNT3lstzZcAkhhiuvDraRSgOH1/+F9ZklbpR4zpdKuo4cpXN8tKP7s61yjX+g==
+core-js@^3.0.1, core-js@^3.0.4, core-js@^3.5.0, core-js@^3.6.4, core-js@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
 core-object@^3.1.5:
   version "3.1.5"
@@ -9846,15 +11033,7 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-corejs-upgrade-webpack-plugin@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/corejs-upgrade-webpack-plugin/-/corejs-upgrade-webpack-plugin-2.2.0.tgz#503293bf1fdcb104918eb40d0294e4776ad6923a"
-  integrity sha512-J0QMp9GNoiw91Kj/dkIQFZeiCXgXoja/Wlht1SPybxerBWh4NCmb0pOgCv61lrlQZETwvVVfAFAA3IqoEO9aqQ==
-  dependencies:
-    resolve-from "^5.0.0"
-    webpack "^4.38.0"
-
-cors@^2.8.5, cors@latest:
+cors@2.8.5, cors@^2.8.5, cors@latest:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
@@ -9862,7 +11041,7 @@ cors@^2.8.5, cors@latest:
     object-assign "^4"
     vary "^1"
 
-corser@~2.0.0:
+corser@^2.0.1, corser@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
   integrity sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=
@@ -9877,7 +11056,7 @@ cosmiconfig@3.1.0:
     parse-json "^3.0.0"
     require-from-string "^2.0.1"
 
-cosmiconfig@^5.0.0, cosmiconfig@^5.0.5, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
+cosmiconfig@^5.0.0, cosmiconfig@^5.1.0, cosmiconfig@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
   integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
@@ -9924,7 +11103,7 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.2:
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
   integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
@@ -9935,7 +11114,7 @@ create-hash@^1.1.0, create-hash@^1.1.2:
     ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
   integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
@@ -9947,7 +11126,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.0, create-react-class@^15.6.3:
+create-react-class@^15.6.0:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -9956,15 +11135,7 @@ create-react-class@^15.6.0, create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-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"
-
-create-react-context@^0.3.0:
+create-react-context@0.3.0, create-react-context@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
   integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
@@ -9972,12 +11143,12 @@ create-react-context@^0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
-cross-env@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
-  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+cross-env@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
   dependencies:
-    cross-spawn "^7.0.0"
+    cross-spawn "^7.0.1"
 
 cross-fetch@2.2.2:
   version "2.2.2"
@@ -10006,6 +11177,15 @@ cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.4, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -10014,7 +11194,7 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^5.0.1, cross-spawn@^5.1.0:
+cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
@@ -10023,10 +11203,10 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
-  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -10062,9 +11242,9 @@ crypto-browserify@^3.0.0, crypto-browserify@^3.11.0:
     randomfill "^1.0.3"
 
 crypto-js@^3.1.9-1:
-  version "3.1.9-1"
-  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.1.9-1.tgz#fda19e761fc077e01ffbfdc6e9fdfc59e8806cd8"
-  integrity sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg=
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b"
+  integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==
 
 crypto-random-string@^1.0.0:
   version "1.0.0"
@@ -10126,23 +11306,61 @@ css-loader@2.1.1, css-loader@^2.1.1:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
-css-loader@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.0.tgz#bb570d89c194f763627fcf1f80059c6832d009b2"
-  integrity sha512-QTF3Ud5H7DaZotgdcJjGMvyDj5F3Pn1j/sC6VBEOVp94cbwqyIBdcs/quzj4MC1BKQSrTpQznegH/5giYbhnCQ==
+css-loader@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
+  integrity sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==
   dependencies:
     camelcase "^5.3.1"
     cssesc "^3.0.0"
     icss-utils "^4.1.1"
     loader-utils "^1.2.3"
     normalize-path "^3.0.0"
-    postcss "^7.0.17"
+    postcss "^7.0.23"
     postcss-modules-extract-imports "^2.0.0"
     postcss-modules-local-by-default "^3.0.2"
-    postcss-modules-scope "^2.1.0"
+    postcss-modules-scope "^2.1.1"
     postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.0.0"
-    schema-utils "^2.0.0"
+    postcss-value-parser "^4.0.2"
+    schema-utils "^2.6.0"
+
+css-loader@3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.5.1.tgz#db2b2336f4169edb68e6a829ad4fd36552647b77"
+  integrity sha512-0G4CbcZzQ9D1Q6ndOfjFuMDo8uLYMu5vc9Abs5ztyHcKvmil6GJrMiNjzzi3tQvUF+mVRuDg7bE6Oc0Prolgig==
+  dependencies:
+    camelcase "^5.3.1"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.27"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-scope "^2.2.0"
+    postcss-modules-values "^3.0.0"
+    postcss-value-parser "^4.0.3"
+    schema-utils "^2.6.5"
+    semver "^6.3.0"
+
+css-loader@^3.0.0, css-loader@^3.4.2, css-loader@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.5.3.tgz#95ac16468e1adcd95c844729e0bb167639eb0bcf"
+  integrity sha512-UEr9NH5Lmi7+dguAm+/JSPovNjYbm2k3TK58EiwQHzOHH5Jfq1Y+XoP2bQO6TMn7PptMd0opxxedAWcaSTRKHw==
+  dependencies:
+    camelcase "^5.3.1"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.27"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-scope "^2.2.0"
+    postcss-modules-values "^3.0.0"
+    postcss-value-parser "^4.0.3"
+    schema-utils "^2.6.6"
+    semver "^6.3.0"
 
 css-modules-loader-core@^1.1.0:
   version "1.1.0"
@@ -10156,10 +11374,12 @@ css-modules-loader-core@^1.1.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"
-  integrity sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=
+css-parse@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
+  integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=
+  dependencies:
+    css "^2.0.0"
 
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
@@ -10194,13 +11414,13 @@ css-select@^2.0.0:
     nth-check "^1.0.2"
 
 css-selector-tokenizer@^0.7.0, css-selector-tokenizer@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d"
-  integrity sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz#11e5e27c9a48d90284f22d45061c303d7a25ad87"
+  integrity sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==
   dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+    regexpu-core "^4.6.0"
 
 css-to-react-native@^2.2.1:
   version "2.3.2"
@@ -10211,6 +11431,23 @@ css-to-react-native@^2.2.1:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^3.3.0"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
+css-tree@1.0.0-alpha.29:
+  version "1.0.0-alpha.29"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
+  integrity sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -10219,10 +11456,13 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
-  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+css-tree@1.0.0-alpha.39:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
+  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
+  dependencies:
+    mdn-data "2.0.6"
+    source-map "^0.6.1"
 
 css-what@2.1:
   version "2.1.3"
@@ -10234,7 +11474,7 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css@^2.0.0, css@^2.2.1:
+css@^2.0.0, css@^2.2.1, css@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -10256,11 +11496,6 @@ cssdb@^4.3.0, cssdb@^4.4.0:
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
   integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
 
-cssesc@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
-  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
-
 cssesc@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
@@ -10271,7 +11506,15 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^4.0.7:
+csslint@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/csslint/-/csslint-1.0.5.tgz#19cc3eda322160fd3f7232af1cb2a360e898a2e9"
+  integrity sha1-Gcw+2jIhYP0/cjKvHLKjYOiYouk=
+  dependencies:
+    clone "~2.1.0"
+    parserlib "~1.1.1"
+
+cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
   integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
@@ -10329,7 +11572,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.0.0, cssnano@^4.1.0, cssnano@^4.1.10:
+cssnano@4.1.10, cssnano@^4.0.0, cssnano@^4.1.0, cssnano@^4.1.10:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
   integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
@@ -10339,19 +11582,26 @@ cssnano@^4.0.0, cssnano@^4.1.0, cssnano@^4.1.10:
     is-resolvable "^1.0.0"
     postcss "^7.0.0"
 
+csso@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
+  integrity sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==
+  dependencies:
+    css-tree "1.0.0-alpha.29"
+
 csso@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
-  integrity sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
+  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
   dependencies:
-    css-tree "1.0.0-alpha.37"
+    css-tree "1.0.0-alpha.39"
 
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4, cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssom@^0.4.1:
+cssom@^0.4.1, cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
@@ -10363,17 +11613,17 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-cssstyle@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.0.0.tgz#911f0fe25532db4f5d44afc83f89cc4b82c97fe3"
-  integrity sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg==
+cssstyle@^2.0.0, cssstyle@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0, csstype@^2.5.7:
-  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
-  integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
 
 ctype@0.5.3:
   version "0.5.3"
@@ -10392,41 +11642,46 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@^3.4.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.6.1.tgz#4420957923879f60b7a5146ccbf81841a149b653"
-  integrity sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==
+cypress@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.7.0.tgz#3ea29bddaf9a1faeaa5b8d54b60a84ed1cafa83d"
+  integrity sha512-Vav6wUFhPRlImIND/2lOQlUnAWzgCC/iXyJlJjX9nJOJul5LC1vUpf/m8Oiae870PFPyT0ZLLwPHKTXZNdXmHw==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
+    "@cypress/request" "2.88.5"
     "@cypress/xvfb" "1.2.4"
+    "@types/sinonjs__fake-timers" "6.0.1"
     "@types/sizzle" "2.3.2"
     arch "2.1.1"
-    bluebird "3.5.0"
-    cachedir "1.3.0"
+    bluebird "3.7.2"
+    cachedir "2.3.0"
     chalk "2.4.2"
     check-more-types "2.24.0"
-    commander "2.15.1"
+    cli-table3 "0.5.1"
+    commander "4.1.0"
     common-tags "1.8.0"
-    debug "3.2.6"
-    execa "0.10.0"
+    debug "4.1.1"
+    eventemitter2 "4.1.2"
+    execa "1.0.0"
     executable "4.1.1"
-    extract-zip "1.6.7"
-    fs-extra "5.0.0"
-    getos "3.1.1"
-    is-ci "1.2.1"
+    extract-zip "1.7.0"
+    fs-extra "8.1.0"
+    getos "3.1.4"
+    is-ci "2.0.0"
     is-installed-globally "0.1.0"
     lazy-ass "1.6.0"
-    listr "0.12.0"
+    listr "0.14.3"
     lodash "4.17.15"
-    log-symbols "2.2.0"
-    minimist "1.2.0"
+    log-symbols "3.0.0"
+    minimist "1.2.5"
     moment "2.24.0"
-    ramda "0.24.1"
-    request "2.88.0"
+    ospath "1.2.2"
+    pretty-bytes "5.3.0"
+    ramda "0.26.1"
     request-progress "3.0.0"
-    supports-color "5.5.0"
+    supports-color "7.1.0"
     tmp "0.1.0"
-    untildify "3.0.3"
+    untildify "4.0.0"
     url "0.11.0"
     yauzl "2.10.0"
 
@@ -10444,21 +11699,22 @@ dag-map@^2.0.2:
   integrity sha1-lxS0ct6CoYQ94vuptodpOMq0TGg=
 
 damerau-levenshtein@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414"
-  integrity sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
 
-danger@^9.2.1:
-  version "9.2.8"
-  resolved "https://registry.yarnpkg.com/danger/-/danger-9.2.8.tgz#138f5549fdba940f71ec959c4abd7d2d1452ccfb"
-  integrity sha512-AyxHtFBB+Wh266wVi30RmywDJwGIO1geTdTFzS3ctUh83J3OXOeG6uUjzt8WeZfsakdXRKbYHlEPBmsuWw1Dog==
+danger@^10.1.1:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/danger/-/danger-10.2.0.tgz#e3500c2003aa85dca029ba695cd04a85afcc34ff"
+  integrity sha512-3fVMm3l5Nu5hVh8ddHYmB5iMQcDgECGXXeU2cql1y9yuLq7SYHGt6hbXkEQyEg6z1UGhmRKoCR+iHc2Emnvusg==
   dependencies:
     "@babel/polyfill" "^7.2.5"
-    "@octokit/rest" "^16.14.1"
+    "@octokit/rest" "^16.43.1"
     async-retry "1.2.3"
     chalk "^2.3.0"
     commander "^2.18.0"
     debug "^4.1.1"
+    fast-json-patch "^3.0.0-1"
     get-stdin "^6.0.0"
     gitlab "^10.0.1"
     http-proxy-agent "^2.1.0"
@@ -10479,7 +11735,7 @@ danger@^9.2.1:
     node-fetch "^2.3.0"
     override-require "^1.1.1"
     p-limit "^2.1.0"
-    parse-diff "^0.5.1"
+    parse-diff "^0.7.0"
     parse-git-config "^2.0.3"
     parse-github-url "^1.0.2"
     parse-link-header "^1.0.1"
@@ -10487,7 +11743,6 @@ danger@^9.2.1:
     prettyjson "^1.2.1"
     readline-sync "^1.4.9"
     require-from-string "^2.0.2"
-    rfc6902 "^3.0.1"
     supports-hyperlinks "^1.0.1"
 
 dargs@^4.0.1:
@@ -10518,15 +11773,29 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
 date-fns@^2.0.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.8.1.tgz#2109362ccb6c87c3ca011e9e31f702bc09e4123b"
-  integrity sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg==
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
+  integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
 date-time@^2.1.0:
   version "2.1.0"
@@ -10535,32 +11804,30 @@ date-time@^2.1.0:
   dependencies:
     time-zone "^1.0.0"
 
-dateformat@3.0.3, dateformat@^3.0.0:
+dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+dayjs@1.8.26:
+  version "1.8.26"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.26.tgz#c6d62ccdf058ca72a8d14bb93a23501058db9f1e"
+  integrity sha512-KqtAuIfdNfZR5sJY1Dixr2Is4ZvcCqhb0dZpCOt5dGEFiMzoIbjkTSzUb4QKTCsP+WNpGwUjAFIZrnZvUxxkhw==
+
 de-indent@^1.0.2:
   version "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.16"
-  resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.16.tgz#44195eb4330fc9fc487f31ec614cbbdd57633897"
-  integrity sha512-FNCjDwxGbhK+Ye8fmE3p2ahIjERhkbuwX+WVGZPtSbAh9LfE1Saa2p0l+f0t11sIlk9D8W+Bym+cDp6r5yghAQ==
+  version "0.1.20"
+  resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.20.tgz#546fd2660688a1eeed55edce2308c5cf7104f9da"
+  integrity sha512-E1GI7jMI57hL30OX6Ht/hfQU8DO4AuB9m72WFm4c38GNbUD4Q03//XZaOIHZiY+H1xUaomcot5yk2q/qIZQkGQ==
   dependencies:
     bindings "^1.5.0"
     node-addon-api "^1.7.1"
 
-debug@*, debug@4.1.1, debug@^4.0.0, 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"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-debug@2, debug@2.6.9, debug@2.6.x, debug@^2.1.0, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.0, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -10574,7 +11841,14 @@ debug@3.1.0, debug@=3.1.0, debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@3.2.6, debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@4, debug@4.1.1, debug@^4.0.0, 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"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -10586,21 +11860,14 @@ debuglog@^1.0.1:
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
 
-decache@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/decache/-/decache-4.4.0.tgz#6f6df6b85d7e7c4410a932ffc26489b78e9acd13"
-  integrity sha1-b232uF1+fEQQqTL/wmSJt46azRM=
-  dependencies:
-    callsite "^1.0.0"
-
 decache@^4.5.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/decache/-/decache-4.5.1.tgz#94a977a88a4188672c96550ec4889582ceecdf49"
-  integrity sha512-5J37nATc6FmOTLbcsr9qx7Nm28qQyg1SK4xyEHqM0IBkNhWFp0Sm+vKoWYHD8wq+OUEb9jLyaKFfzzd1A9hcoA==
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/decache/-/decache-4.6.0.tgz#87026bc6e696759e82d57a3841c4e251a30356e8"
+  integrity sha512-PppOuLiz+DFeaUvFXEYZjLxAkKiMYH/do/b/MxpDe/8AgKBi5GhZxridoVIbBq72GDbL36e4p0Ce2jTGUwwU+w==
   dependencies:
     callsite "^1.0.0"
 
-decamelize-keys@^1.0.0:
+decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
   integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
@@ -10620,6 +11887,11 @@ decamelize@^2.0.0:
   dependencies:
     xregexp "4.0.0"
 
+decimal.js@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231"
+  integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -10632,28 +11904,11 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
-decompress-response@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
-  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
-  dependencies:
-    mimic-response "^2.0.0"
-
-dedent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
-  integrity sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s=
-
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-diff@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
-  integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==
-
 deep-eql@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-0.1.3.tgz#ef558acab8de25206cd713906d74e56930eb69f2"
@@ -10668,7 +11923,7 @@ deep-equal-ident@^1.1.1:
   dependencies:
     lodash.isequal "^3.0"
 
-deep-equal@^1.0.0, deep-equal@^1.0.1:
+deep-equal@^1.0.0, deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -10695,25 +11950,17 @@ deep-object-diff@^1.1.0:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
   integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
 
-deep-scope-analyser@^1.6.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/deep-scope-analyser/-/deep-scope-analyser-1.7.0.tgz#23015b3a1d23181b1d9cebd25b783a7378ead8da"
-  integrity sha512-rl5Dmt2IZkFpZo6XbEY1zG8st2Wpq8Pi/dV2gz8ZF6BDYt3fnor2JNxHwdO1WLo0k6JbmYp0x8MNy8kE4l1NtA==
-  dependencies:
-    esrecurse "^4.2.1"
-    estraverse "^4.2.0"
-
-deepmerge@^1.3.0:
+deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
-deepmerge@^2.0.1, deepmerge@^2.2.1:
+deepmerge@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
-deepmerge@^4.0.0:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -10726,6 +11973,13 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
+default-gateway@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-5.0.5.tgz#4fd6bd5d2855d39b34cc5a59505486e9aafc9b10"
+  integrity sha512-z2RnruVmj8hVMmAnEJMTIJNijhKCDiGjbLP+BHJFOT7ld3Bo5qcIBpVYDniqhbMIIf+jZDlkP2MkPXiQy/DBLA==
+  dependencies:
+    execa "^3.3.0"
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
@@ -10734,9 +11988,17 @@ defaults@^1.0.3:
     clone "^1.0.2"
 
 defer-to-connect@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.0.tgz#b41bd7efa8508cef13f8456975f7a278c72833fd"
-  integrity sha512-WE2sZoctWm/v4smfCAdjYbrfS55JiMRdlY9ZubFhsYbteCK9+BvAx4YV7nPjYM6ZnX5BcoVKwfmyx9sIFTgQMQ==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
+  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+
+deferred-leveldown@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz#27a997ad95408b61161aa69bd489b86c71b78058"
+  integrity sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    inherits "^2.0.3"
 
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
@@ -10810,7 +12072,7 @@ del@^4.1.1:
     pify "^4.0.1"
     rimraf "^2.6.3"
 
-del@^5.0.0, del@^5.1.0:
+del@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
   integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
@@ -10824,11 +12086,6 @@ del@^5.0.0, del@^5.1.0:
     rimraf "^3.0.0"
     slash "^3.0.0"
 
-delay-async@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/delay-async/-/delay-async-1.2.0.tgz#d62f7974868bd91980c6b9c17dc8132c6768709b"
-  integrity sha512-BDhPL4k42yL2c0b5zTUlMIM3/wmv77HOgZi4ya/8tOHw16GZ1i9Qj7Tmy3xt0jWb4VmpQtklLPReUtOUZUuzuQ==
-
 delayed-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-0.0.5.tgz#d4b1f43a93e8296dfe02694f4680bc37a313c73f"
@@ -10859,17 +12116,17 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+depd@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 dependency-graph@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.7.2.tgz#91db9de6eb72699209d88aea4c1fd5221cac1c49"
   integrity sha512-KqtH4/EZdtdfWX0p6MGP9jljvxSY6msy/pRUD4jgNwVpv3v1QmNLlsB3LDSSUg79BRVSn7jI1QPRtArGABovAQ==
 
-deprecated-decorator@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz#00966317b7a12fe92f3cc831f7583af329b86c37"
-  integrity sha1-AJZjF7ehL+kvPMgx91g68ym4bDc=
-
-deprecation@^2.0.0:
+deprecation@^2.0.0, deprecation@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
@@ -10906,10 +12163,10 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detab@2.0.2, detab@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.2.tgz#074970d1a807b045d0258a4235df5928dd683561"
-  integrity sha512-Q57yPrxScy816TTE1P/uLRXLDKjXhvYTbfxS/e6lPD+YrqghbsMlGB9nQzj/zVtSPaF0DFPSdO916EWO4sQUyQ==
+detab@2.0.3, detab@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.3.tgz#33e5dd74d230501bd69985a0d2b9a3382699a130"
+  integrity sha512-Up8P0clUVwq0FnFjDclzZsy9PadzRn5FFxrr47tQQvMHqyiFYVbpH8oXDzWtF0Q7pYy3l+RPmtBl+BsFF6wH0A==
   dependencies:
     repeat-string "^1.5.4"
 
@@ -10935,21 +12192,16 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
-detect-libc@^1.0.2, detect-libc@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+detect-newline@3.1.0, detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-detect-newline@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
-  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
-
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -10971,7 +12223,7 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
-detective@^5.0.2:
+detective@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
   integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
@@ -10988,30 +12240,37 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
-dfa@^1.0.0:
+dfa@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
   integrity sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==
 
-didyoumean@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
-  integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=
-
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
-diff@^3.2.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
-  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
+
+diff-sequences@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6"
+  integrity sha512-JC/eHYEC3aSS0vZGjuoc4vHA0yAQTzhQQldXMeMF+JlxLGJlCO38Gma82NV9gk1jGFz8mDzUMeaKXvjRRdJ2dg==
 
 diff@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
-  integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+diffable-html@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/diffable-html/-/diffable-html-4.0.0.tgz#eb44a189785115bacd04829f31658fcd3c0ce590"
+  integrity sha512-keJdgy2qBkdrrnwP1YE6e834d4Y+mV0aRFzk8w7WzyAJVbQVfcJltSmUWB3r/NOoO/0jt7RdJlvy5ioyqvmQcw==
+  dependencies:
+    htmlparser2 "^3.9.2"
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -11076,14 +12335,6 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
-doctrine@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-0.7.2.tgz#7cb860359ba3be90e040b26b729ce4bfa654c523"
-  integrity sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=
-  dependencies:
-    esutils "^1.1.6"
-    isarray "0.0.1"
-
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -11111,6 +12362,11 @@ doctypes@^1.1.0:
   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
   integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
 
+dom-accessibility-api@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.4.tgz#c2f9fb8b591bc19581e7ef3e6fe35baf1967c498"
+  integrity sha512-XBM62jdDc06IXSujkqw6BugEWiDkp6jphtzVJf1kgPQGvfzaU7/jRtRSF/mxc8DBCIm2LS3bN1dCa5Sfxx982A==
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -11118,14 +12374,15 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^2.6.7"
 
-dom-serializer@0:
+dom-serializer@0, dom-serializer@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
   integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
@@ -11142,20 +12399,9 @@ dom-serializer@~0.1.1:
     entities "^1.1.1"
 
 dom-walk@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
-  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
-
-dom5@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/dom5/-/dom5-2.3.0.tgz#f8204975bd0dacbbe5b58a8a93ffc1fed0ffcd2a"
-  integrity sha1-+CBJdb0NrLvltYqKk//B/tD/zSo=
-  dependencies:
-    "@types/clone" "^0.1.29"
-    "@types/node" "^6.0.0"
-    "@types/parse5" "^2.2.32"
-    clone "^2.1.0"
-    parse5 "^2.2.2"
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
 domain-browser@^1.1.1, domain-browser@^1.2.0:
   version "1.2.0"
@@ -11179,6 +12425,20 @@ domexception@^1.0.1:
   dependencies:
     webidl-conversions "^4.0.2"
 
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
+domhandler@2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  integrity sha1-LeWaCCLVAn+r/28DLCsloqir5zg=
+  dependencies:
+    domelementtype "1"
+
 domhandler@^2.3.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
@@ -11186,7 +12446,19 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1:
+domhandler@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
+  integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
+  dependencies:
+    domelementtype "^2.0.1"
+
+dompurify@2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.8.tgz#6ef89d2d227d041af139c7b01d9f67ed59c2eb3c"
+  integrity sha512-vIOSyOXkMx81ghEalh4MLBtDHMx1bhKlaqHDMqM2yeitJ996SLOk5mGdDpI9ifJAgokred8Rmu219fX4OltqXw==
+
+domutils@1.5, domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
@@ -11202,6 +12474,23 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16"
+  integrity sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==
+  dependencies:
+    dom-serializer "^0.2.1"
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+
+dot-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
+  integrity sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -11209,14 +12498,14 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^4.1.0, dot-prop@^4.1.1, dot-prop@^4.2.0:
+dot-prop@^4.1.0, dot-prop@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^5.1.0:
+dot-prop@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
   integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
@@ -11224,14 +12513,14 @@ dot-prop@^5.1.0:
     is-obj "^2.0.0"
 
 dot@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/dot/-/dot-1.1.2.tgz#c7377019fc4e550798928b2b9afeb66abfa1f2f9"
-  integrity sha1-xzdwGfxOVQeYkosrmv62ar+h8vk=
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dot/-/dot-1.1.3.tgz#351360e00a748bce9a1f8f27c00c394a7e4e1e9f"
+  integrity sha512-/nt74Rm+PcfnirXGEdhZleTwGC2LMnuKTeeTIlI82xb5loBBoXNYzr2ezCroPSMtilK8EZIfcNZwOcHN+ib1Lg==
 
 dotenv-defaults@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.0.2.tgz#441cf5f067653fca4bbdce9dd3b803f6f84c585d"
-  integrity sha512-iXFvHtXl/hZPiFj++1hBg4lbKwGM+t/GlvELDnRtOFdjXyWP7mubkVr+eZGWG62kdsbulXAef6v/j6kiWc/xGA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
+  integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==
   dependencies:
     dotenv "^6.2.0"
 
@@ -11246,9 +12535,9 @@ dotenv-expand@5.1.0, dotenv-expand@^5.1.0:
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
 dotenv-webpack@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
-  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz#7ca79cef2497dd4079d43e81e0796bc9d0f68a5e"
+  integrity sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==
   dependencies:
     dotenv-defaults "^1.0.2"
 
@@ -11257,26 +12546,65 @@ dotenv@6.2.0, dotenv@^6.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@8.2.0, dotenv@^8.0.0, dotenv@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
 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, dotenv@^8.1.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+downlevel-dts@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/downlevel-dts/-/downlevel-dts-0.4.0.tgz#43f9f649c8b137373d76b4ee396d5a0227c10ddb"
+  integrity sha512-nh5vM3n2pRhPwZqh0iWo5gpItPAYEGEWw9yd0YpI+lO60B7A3A6iJlxDbt7kKVNbqBXKsptL+jwE/Yg5Go66WQ==
+  dependencies:
+    shelljs "^0.8.3"
+    typescript "^3.8.0-dev.20200111"
 
-driver-dom@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/driver-dom/-/driver-dom-2.0.4.tgz#6c89ed21565095acad91b612cbb9ac997d3182eb"
-  integrity sha512-LBQod8KtJzkYlPnR7O33tV1/Vrz1M7q/iAETpUF6ANogdVD8afL3EPGzNmEbwti4Gjsxkx6LM8W7lukw1awhUg==
+driver-dom@^2.0.0, driver-dom@^2.0.5, driver-dom@^2.0.6:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/driver-dom/-/driver-dom-2.0.9.tgz#e3961452b0a22fbefd4d16e5a0ccfcaf4a3565d1"
+  integrity sha512-cmeUGPF++p5Oug/efg8feAt+3SfjOKODHflki4N1ZzNZxkXZgjTKHyi/PAPhLcrEQ/K03vgPbBZaR1atd9yV2A==
+
+driver-kraken@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/driver-kraken/-/driver-kraken-0.2.1.tgz#5a504da0715c08750a90c156a5e4a3d8df1859e1"
+  integrity sha512-ftdkCGSkHJI/P9gqJz4eIWr+M0Zbb7nsSKhEz4640D60EbcdfclvqDSThoTvRNctSbgLXHlSVWWkT+AOSG0kAw==
+
+driver-miniapp@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/driver-miniapp/-/driver-miniapp-0.1.2.tgz#37e014383e57bb14813380dfdaccbd68dcfbee5f"
+  integrity sha512-fx5FmNhk5zLHa/FuMkjZzKeB5GIpVYJI5Srbc4u0hJYorlY6JFm67wRBM18B3wJcmSRDTTmTD4Y3f+oJ/XQ+ag==
+  dependencies:
+    driver-dom "^2.0.6"
 
 driver-server@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/driver-server/-/driver-server-1.0.0.tgz#2fa67991d2aafa66dd808b1a1989b18125bb38c0"
   integrity sha512-H5nhMzsSJYaug+PDPyXiVW2KvK5k7B7K+yVW3FuHESq494Soh1cfomquJ2pk5RiApQr1z0e+0tif11TVRlM+PQ==
 
+driver-universal@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/driver-universal/-/driver-universal-3.1.3.tgz#3c840a740b5d7febddea562f6c00d2fd65e5d6be"
+  integrity sha512-AMpeHGKDdbLsn1e0AmasrBtRB6sV6rPVGA9NbXzkxifn0n+2bhT2fu3sCu9bYrp6wvp5o31VnFAGZwow5FOOYA==
+  dependencies:
+    driver-dom "^2.0.5"
+    driver-kraken "^0.2.0"
+    driver-miniapp "^0.1.0"
+    driver-weex "^2.0.0"
+    style-unit "^2.0.0"
+    universal-env "^3.0.0"
+
+driver-weex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/driver-weex/-/driver-weex-2.0.0.tgz#9faaf97933b32b4d50feba72f7e1be4edda38c11"
+  integrity sha512-qyK9lRGUTlvh1o+CUDCGDPAKcUbklfbTxphQN01QARdusWuQZR93xYGViLb2fMB8VNkb95g1hVTGka1aO+g4bg==
+  dependencies:
+    style-unit "^2.0.0"
+
 dtrace-provider@~0.8:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.8.tgz#2996d5490c37e1347be263b423ed7b297fb0d97e"
@@ -11311,6 +12639,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+easy-stack@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.0.tgz#12c91b3085a37f0baa336e9486eac4bf94e3e788"
+  integrity sha1-EskbMIWjfwuqM26UhurEv5Tj54g=
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -11336,7 +12669,7 @@ ecstatic@^2.0.0:
     minimist "^1.1.0"
     url-join "^2.0.2"
 
-ecstatic@^3.0.0:
+ecstatic@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.3.2.tgz#6d1dd49814d00594682c652adb66076a69d46c48"
   integrity sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==
@@ -11356,34 +12689,41 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^2.6.1, ejs@^2.7.4:
+ejs@^2.6.1:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.191, electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.47:
-  version "1.3.314"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.314.tgz#c186a499ed2c9057bce9eb8dca294d6d5450facc"
-  integrity sha512-IKDR/xCxKFhPts7h+VaSXS02Z1mznP3fli1BbXWXeN89i2gCzKraU8qLpEid8YzKcmZdZD3Mly3cn5/lY9xsBQ==
+ejs@^3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.3.tgz#514d967a8894084d18d3d47bd169a1c0560f093d"
+  integrity sha512-wmtrUGyfSC23GC/B1SMv2ogAUgbQEtDmTIhfqielrG5ExIM9TP4UoYdi90jLF1aTcsWCJNEO0UrgKzP0y3nTSg==
+  dependencies:
+    jake "^10.6.1"
 
-electron-to-chromium@^1.3.322:
-  version "1.3.322"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz#a6f7e1c79025c2b05838e8e344f6e89eb83213a8"
-  integrity sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.413, electron-to-chromium@^1.3.47:
+  version "1.3.452"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.452.tgz#ef6877702722471aa044a2429336cd450629934d"
+  integrity sha512-IdbjgCEqDvcU/1kUQa6C49I2NZOY3SBmU9Eus7mdFdJJBqn0Lg1Epfi/T4nqVcxTNBEGhcjwMhY1EysMBsXZrw==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
-element-resize-detector@^1.1.15:
-  version "1.1.15"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.15.tgz#48eba1a2eaa26969a4c998d972171128c971d8d2"
-  integrity sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==
+elegant-spinner@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-2.0.0.tgz#f236378985ecd16da75488d166be4b688fd5af94"
+  integrity sha512-5YRYHhvhYzV/FC4AiMdeSIg3jAYGq9xFvbhZMpPlJoBsfYgrw2DSCYeXfat6tYBu45PWiyRr3+flaCPPmviPaA==
+
+element-resize-detector@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
+  integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
   dependencies:
-    batch-processor "^1.0.0"
+    batch-processor "1.0.0"
 
-elliptic@^6.0.0:
+elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
   integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
@@ -11413,9 +12753,9 @@ ember-assign-polyfill@^2.6.0:
     ember-cli-version-checker "^2.0.0"
 
 ember-cli-addon-docs-yuidoc@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/ember-cli-addon-docs-yuidoc/-/ember-cli-addon-docs-yuidoc-0.2.3.tgz#13f7943c7ef1909d74ef9d33a719236117c17262"
-  integrity sha512-W1ASMlYnWS18qkyN4ducCAH/APQ5AljNH4rGXV81Ly6I6XHgh7WnQZdXD5eQqjc9XoruC/92hqBIIl27ykShKQ==
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/ember-cli-addon-docs-yuidoc/-/ember-cli-addon-docs-yuidoc-0.2.4.tgz#dd8f5cf4982e8492b255fb677e9d771925e27dce"
+  integrity sha512-asyGxagV+VKK+edc5iOW8JI8Css/d8mEE7ndWKqYa8Ub4eFwVfI6SLr9gHZc8f7q9BK+M5a/RSWHSnTTL5/3Zw==
   dependencies:
     broccoli-caching-writer "^3.0.3"
     ember-cli-babel "^7.7.3"
@@ -11424,7 +12764,7 @@ ember-cli-addon-docs-yuidoc@^0.2.3:
     lodash "^4.17.5"
     yuidocjs "^0.10.2"
 
-ember-cli-app-version@^3.0.0:
+ember-cli-app-version@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ember-cli-app-version/-/ember-cli-app-version-3.2.0.tgz#7b9ad0e1b63ae0518648356ee24c703e922bc26e"
   integrity sha512-fHWOJElSw8JL03FNCHrT0RdWhGpWEQ4VQ10unEwwhVZ+OANNcOLz8O2dA3D5iuB4bb0fMLwjEwYZGM62+TBs1Q==
@@ -11456,44 +12796,38 @@ ember-cli-babel@^6.12.0, ember-cli-babel@^6.16.0:
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.6.0, ember-cli-babel@^7.7.3:
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.13.0.tgz#3f2c2ba7a44d7948ec927d41cf072673330f62cd"
-  integrity sha512-VjagtumwQP+3jsjLR64gpca5iq2o0PS1MT0PdC90COtAYqpOqNM9axYEYBamNLIuv+3vJpAoFKu8EMBC1ZlWGQ==
-  dependencies:
-    "@babel/core" "^7.7.0"
-    "@babel/plugin-proposal-class-properties" "^7.7.0"
-    "@babel/plugin-proposal-decorators" "^7.7.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-runtime" "^7.6.0"
-    "@babel/polyfill" "^7.7.0"
-    "@babel/preset-env" "^7.7.0"
-    "@babel/runtime" "^7.7.0"
+ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.7.3:
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.20.0.tgz#aa77eadd15036a053534fc68f7933bb97c5a1e25"
+  integrity sha512-DwV5Cbn8wlRFpG8zQXxYPRb0NRnnaj/2qVDODeUEjM/doDhoDDbTSSaEI5Pf0kIlkVIimyGB8qpGv1fkgj2IfQ==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/plugin-proposal-class-properties" "^7.8.3"
+    "@babel/plugin-proposal-decorators" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.0"
+    "@babel/plugin-transform-runtime" "^7.9.0"
+    "@babel/plugin-transform-typescript" "^7.9.0"
+    "@babel/polyfill" "^7.8.7"
+    "@babel/preset-env" "^7.9.0"
+    "@babel/runtime" "^7.9.0"
     amd-name-resolver "^1.2.1"
     babel-plugin-debug-macros "^0.3.0"
-    babel-plugin-ember-modules-api-polyfill "^2.12.0"
+    babel-plugin-ember-data-packages-polyfill "^0.1.2"
+    babel-plugin-ember-modules-api-polyfill "^2.13.0"
     babel-plugin-module-resolver "^3.1.1"
-    broccoli-babel-transpiler "^7.3.0"
+    broccoli-babel-transpiler "^7.4.0"
     broccoli-debug "^0.6.4"
     broccoli-funnel "^2.0.1"
     broccoli-source "^1.1.0"
     clone "^2.1.2"
     ember-cli-babel-plugin-helpers "^1.1.0"
-    ember-cli-version-checker "^2.1.2"
+    ember-cli-version-checker "^4.1.0"
     ensure-posix-path "^1.0.2"
+    fixturify-project "^1.10.0"
+    rimraf "^3.0.1"
     semver "^5.5.0"
 
-ember-cli-broccoli-sane-watcher@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ember-cli-broccoli-sane-watcher/-/ember-cli-broccoli-sane-watcher-3.0.0.tgz#dc1812c047e1ceec4413d3c41b51a9ffc61b4cfe"
-  integrity sha512-sLn+wy6FJpGMHtSwAGUjQK3nJFvw2b6H8bR2EgMIXxkUI3DYFLi6Xnyxm02XlMTcfTxF10yHFhHJe0O+PcJM7A==
-  dependencies:
-    broccoli-slow-trees "^3.0.1"
-    heimdalljs "^0.2.1"
-    heimdalljs-logger "^0.1.7"
-    rsvp "^3.0.18"
-    sane "^4.0.0"
-
 ember-cli-get-component-path-option@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
@@ -11510,15 +12844,25 @@ ember-cli-htmlbars-inline-precompile@^2.1.0:
     heimdalljs-logger "^0.1.9"
     silent-error "^1.1.0"
 
-ember-cli-htmlbars@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
-  integrity sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==
+ember-cli-htmlbars@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.3.1.tgz#4af8adc21ab3c4953f768956b7f7d207782cb175"
+  integrity sha512-CW6AY/yzjeVqoRtItOKj3hcYzc5dWPRETmeCzr2Iqjt5vxiVtpl0z5VTqHqIlT5fsFx6sGWBQXNHIe+ivYsxXQ==
   dependencies:
+    "@ember/edition-utils" "^1.2.0"
+    babel-plugin-htmlbars-inline-precompile "^3.0.1"
+    broccoli-debug "^0.6.5"
     broccoli-persistent-filter "^2.3.1"
+    broccoli-plugin "^3.1.0"
+    common-tags "^1.8.0"
+    ember-cli-babel-plugin-helpers "^1.1.0"
+    fs-tree-diff "^2.0.1"
     hash-for-dep "^1.5.1"
+    heimdalljs-logger "^0.1.10"
     json-stable-stringify "^1.0.1"
-    strip-bom "^3.0.0"
+    semver "^6.3.0"
+    strip-bom "^4.0.0"
+    walk-sync "^2.0.2"
 
 ember-cli-inject-live-reload@^2.0.1:
   version "2.0.2"
@@ -11625,20 +12969,29 @@ ember-cli-version-checker@^3.1.3:
     resolve-package-path "^1.2.6"
     semver "^5.6.0"
 
-ember-cli@~3.14.0:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-3.14.0.tgz#9a142da77aa8c95e0bc2c70acc67c9809e9e45cf"
-  integrity sha512-ZZEArSq8ynU6FbVAQnS2Nbx2yr73EgYsAngOHKOGoJwa6YEs3LFh4lHjYsxF26Bt245lH83WnehRcdlLssNF3w==
+ember-cli-version-checker@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-4.1.1.tgz#27b938228306cb0dbc4f74e95c536cdd6448e499"
+  integrity sha512-bzEWsTMXUGEJfxcAGWPe6kI7oHEGD3jaxUWDYPTqzqGhNkgPwXTBgoWs9zG1RaSMaOPFnloWuxRcoHi4TrYS3Q==
+  dependencies:
+    resolve-package-path "^2.0.0"
+    semver "^6.3.0"
+    silent-error "^1.1.1"
+
+ember-cli@~3.17.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-3.17.0.tgz#d846027c01f1835c7903b6bff073c2a80885202e"
+  integrity sha512-0GVer7AyV/g8hclbD64FmsNkULQ0N1pEQytB+utuJl8c6NFU4EUMJL7NyM/NRd7rzupMMR1jwzhxYTCY50ZRcg==
   dependencies:
-    "@babel/core" "^7.6.2"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/core" "^7.8.4"
+    "@babel/plugin-transform-modules-amd" "^7.7.5"
     amd-name-resolver "^1.3.1"
-    babel-plugin-module-resolver "^3.2.0"
+    babel-plugin-module-resolver "^4.0.0"
     bower-config "^1.4.1"
     bower-endpoint-parser "0.2.2"
-    broccoli "^3.2.0"
+    broccoli "^3.3.3"
     broccoli-amd-funnel "^2.0.1"
-    broccoli-babel-transpiler "^7.3.0"
+    broccoli-babel-transpiler "^7.4.0"
     broccoli-builder "^0.18.14"
     broccoli-concat "^3.7.4"
     broccoli-config-loader "^1.0.1"
@@ -11647,24 +13000,21 @@ ember-cli@~3.14.0:
     broccoli-funnel "^2.0.2"
     broccoli-funnel-reducer "^1.0.0"
     broccoli-merge-trees "^3.0.2"
-    broccoli-middleware "^2.1.0"
-    broccoli-module-normalizer "^1.3.0"
-    broccoli-module-unification-reexporter "^1.0.0"
+    broccoli-middleware "^2.1.1"
     broccoli-slow-trees "^3.0.1"
     broccoli-source "^3.0.0"
     broccoli-stew "^3.0.0"
     calculate-cache-key-for-tree "^2.0.0"
     capture-exit "^2.0.0"
-    chalk "^2.4.2"
+    chalk "^3.0.0"
     ci-info "^2.0.0"
     clean-base-url "^1.0.0"
     compression "^1.7.4"
-    configstore "^5.0.0"
+    configstore "^5.0.1"
     console-ui "^3.1.1"
     core-object "^3.1.5"
     dag-map "^2.0.2"
     diff "^4.0.1"
-    ember-cli-broccoli-sane-watcher "^3.0.0"
     ember-cli-is-package-missing "^1.0.0"
     ember-cli-lodash-subset "^2.0.1"
     ember-cli-normalize-entity-name "^1.0.0"
@@ -11681,7 +13031,7 @@ ember-cli@~3.14.0:
     fs-extra "^8.1.0"
     fs-tree-diff "^2.0.1"
     get-caller-file "^2.0.5"
-    git-repo-info "^2.1.0"
+    git-repo-info "^2.1.1"
     glob "^7.1.4"
     heimdalljs "^0.2.6"
     heimdalljs-fs-monitor "^0.2.3"
@@ -11695,30 +13045,29 @@ ember-cli@~3.14.0:
     json-stable-stringify "^1.0.1"
     leek "0.0.24"
     lodash.template "^4.5.0"
-    markdown-it "^9.1.0"
-    markdown-it-terminal "0.1.0"
+    markdown-it "^10.0.0"
+    markdown-it-terminal "0.1.1"
     minimatch "^3.0.4"
     morgan "^1.9.1"
     nopt "^3.0.6"
-    npm-package-arg "^6.1.1"
+    npm-package-arg "^8.0.0"
     p-defer "^3.0.0"
-    portfinder "^1.0.23"
-    promise-map-series "^0.2.3"
-    promise.prototype.finally "^3.1.1"
+    portfinder "^1.0.25"
+    promise-map-series "^0.3.0"
+    promise.hash.helper "^1.0.2"
     quick-temp "^0.1.8"
-    resolve "^1.12.0"
-    resolve-package-path "^1.2.7"
-    rsvp "^4.8.5"
+    resolve "^1.15.1"
+    resolve-package-path "^2.0.0"
     sane "^4.1.0"
     semver "^6.3.0"
     silent-error "^1.1.1"
-    sort-package-json "^1.22.1"
-    symlink-or-copy "^1.2.0"
-    temp "0.9.0"
-    testem "^2.17.0"
+    sort-package-json "^1.39.1"
+    symlink-or-copy "^1.3.1"
+    temp "0.9.1"
+    testem "^3.0.1"
     tiny-lr "^1.1.1"
     tree-sync "^2.0.0"
-    uuid "^3.3.3"
+    uuid "^3.4.0"
     walk-sync "^2.0.2"
     watch-detector "^1.0.0"
     yam "^1.0.0"
@@ -11731,23 +13080,22 @@ ember-load-initializers@^2.0.0:
     ember-cli-babel "^7.11.0"
     ember-cli-typescript "^2.0.2"
 
-ember-resolver@^5.1.3:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-5.3.0.tgz#9fbeedfa63c094b588ac7647ba62f1305374f1d8"
-  integrity sha512-NWin+WzmsRnZxFvDlx9B3rb3kxwK0MNblJemoRvNbbxLK6z5lGxVoBfpU4/nqItWfwmpVb9ZK8bqXYs5q8HT4A==
+ember-resolver@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-7.0.0.tgz#07ca86b3bae373395b44bba784b8c133f75d61c2"
+  integrity sha512-tqyWk9E1P5LL42x7AnVoE25a/YWe0WcwAr8LXasm5V7Az3vFR/zbFtwN0oI3tpoSP/nCoGWDct6dRYlXrQjqBQ==
   dependencies:
-    "@glimmer/resolver" "^0.4.1"
-    babel-plugin-debug-macros "^0.1.10"
+    babel-plugin-debug-macros "^0.3.3"
     broccoli-funnel "^2.0.2"
     broccoli-merge-trees "^3.0.0"
-    ember-cli-babel "^6.16.0"
+    ember-cli-babel "^7.13.2"
     ember-cli-version-checker "^3.1.3"
-    resolve "^1.12.0"
+    resolve "^1.14.0"
 
-ember-rfc176-data@^0.3.1, ember-rfc176-data@^0.3.12:
-  version "0.3.12"
-  resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.12.tgz#90d82878e69e2ac9a5438e8ce14d12c6031c5bd2"
-  integrity sha512-g9HeZj/gU5bfIIrGXkP7MhS2b3Vu5DfNUrYr14hy99TgIvtZETO+96QF4WOEUXGjIJdfTRjerVnQlqngPQSv1g==
+ember-rfc176-data@^0.3.1, ember-rfc176-data@^0.3.13:
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.13.tgz#ed1712a26e65fec703655f35410414aa1982cf3b"
+  integrity sha512-m9JbwQlT6PjY7x/T8HslnXP7Sz9bx/pz3FrNfNi2NesJnbNISly0Lix6NV1fhfo46572cpq4jrM+/6yYlMefTQ==
 
 ember-router-generator@^2.0.0:
   version "2.0.0"
@@ -11765,22 +13113,23 @@ ember-source-channel-url@^2.0.1:
   dependencies:
     got "^8.0.1"
 
-ember-source@~3.15.0:
-  version "3.15.0"
-  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.15.0.tgz#f6500c6d289ce58231bf1e6695c4974df2be7390"
-  integrity sha512-daTELJBDMGqAmQb/Puxdk1YR204/zs1DEiEMQWlqbtmhphAoDUbGi9ifJu20ajP/IcOCWw9Vp7aPzguTohWF7w==
+ember-source@~3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.19.0.tgz#ea156953d177374baf4911eb95d73625c7f8cbbb"
+  integrity sha512-WUL8FojIGNJDtCSxI5SjNguMb6axPPm9p/nskRwox9omj6W+hjbzLzl+pZcMbqRePkQtjCbUTAclVMBdBNaRYg==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.6.2"
-    "@babel/plugin-transform-object-assign" "^7.2.0"
-    "@ember/edition-utils" "^1.1.1"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-object-assign" "^7.8.3"
+    "@ember/edition-utils" "^1.2.0"
     babel-plugin-debug-macros "^0.3.3"
-    babel-plugin-filter-imports "^3.0.0"
+    babel-plugin-filter-imports "^4.0.0"
     broccoli-concat "^3.7.4"
+    broccoli-debug "^0.6.4"
     broccoli-funnel "^2.0.2"
     broccoli-merge-trees "^3.0.2"
-    chalk "^2.4.2"
-    ember-cli-babel "^7.11.0"
+    chalk "^3.0.0"
+    ember-cli-babel "^7.18.0"
     ember-cli-get-component-path-option "^1.0.0"
     ember-cli-is-package-missing "^1.0.0"
     ember-cli-normalize-entity-name "^1.0.0"
@@ -11790,7 +13139,7 @@ ember-source@~3.15.0:
     ember-router-generator "^2.0.0"
     inflection "^1.12.0"
     jquery "^3.4.1"
-    resolve "^1.11.1"
+    resolve "^1.14.2"
     semver "^6.1.1"
     silent-error "^1.1.1"
 
@@ -11800,11 +13149,12 @@ ember-template-compiler@^1.9.0-alpha:
   integrity sha1-GT38/PDYwbNZWpYJ60bZDQXTTy8=
 
 ember-test-waiters@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ember-test-waiters/-/ember-test-waiters-1.1.1.tgz#7df6e7a47e0fdca814aa351f7f7f9a006e15fdcd"
-  integrity sha512-ra71ZWTGBGLeDPa308aeAg9+/nYxv2fk4OEzmXdhvbSa5Dtbei94sr5pbLXx2IiK3Re2gDAvDzxg9PVhLy9fig==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-test-waiters/-/ember-test-waiters-1.2.0.tgz#c12ead4313934c24cff41857020cacdbf8e6effe"
+  integrity sha512-aEw7YuutLuJT4NUuPTNiGFwgTYl23ThqmBxSkfFimQAn+keWjAftykk3dlFELuhsJhYW/S8YoVjN0bSAQRLNtw==
   dependencies:
-    ember-cli-babel "^7.1.2"
+    ember-cli-babel "^7.11.0"
+    semver "^6.3.0"
 
 emitter-mixin@0.0.3:
   version "0.0.3"
@@ -11831,13 +13181,18 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 emotion-theming@^10.0.19:
-  version "10.0.19"
-  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.19.tgz#66d13db74fccaefad71ba57c915b306cf2250295"
-  integrity sha512-dQRBPLAAQ6eA8JKhkLCIWC8fdjPbiNC1zNTdFF292h9amhZXofcNGUP7axHoHX4XesqQESYwZrXp53OPInMrKw==
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
+  integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
   dependencies:
     "@babel/runtime" "^7.5.5"
-    "@emotion/weak-memoize" "0.2.4"
+    "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
 encodeurl@~1.0.2:
@@ -11845,6 +13200,16 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding-down@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/encoding-down/-/encoding-down-6.3.0.tgz#b1c4eb0e1728c146ecaef8e32963c549e76d082b"
+  integrity sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==
+  dependencies:
+    abstract-leveldown "^6.2.1"
+    inherits "^2.0.3"
+    level-codec "^9.0.0"
+    level-errors "^2.0.0"
+
 encoding@^0.1.11:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
@@ -11852,7 +13217,7 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -11860,11 +13225,11 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
     once "^1.4.0"
 
 engine.io-client@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.0.tgz#82a642b42862a9b3f7a188f41776b2deab643700"
-  integrity sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.2.tgz#4fb2ef2b1fe1d3aa1c621c6a8d87f1fc55426b50"
+  integrity sha512-AWjc1Xg06a6UPFOBAzJf48W1UR/qKYmv/ubgSCumo9GXgvL/xGIvo05dXoBL+2NTLMipDI7in8xK61C17L25xg==
   dependencies:
-    component-emitter "1.2.1"
+    component-emitter "~1.3.0"
     component-inherit "0.0.3"
     debug "~4.1.0"
     engine.io-parser "~2.2.0"
@@ -11888,9 +13253,9 @@ engine.io-parser@~2.2.0:
     has-binary2 "~1.0.2"
 
 engine.io@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.4.0.tgz#3a962cc4535928c252759a00f98519cb46c53ff3"
-  integrity sha512-XCyYVWzcHnK5cMz7G4VTu2W7zJS7SM1QkcelghyIk/FmobWBtXE7fwhBusEKvCSqc3bMh8fNFMlUkCKTFRxH2w==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.4.1.tgz#a61cbc13fa0cb27d9453fd079a29ee980564b069"
+  integrity sha512-8MfIfF1/IIfxuc2gv5K+XlFZczw/BpTvqBdl0E2fBLkYQp4miv4LuDTVtYt4yMyaIFLEr4vtaSgV4mjvll8Crw==
   dependencies:
     accepts "~1.3.4"
     base64id "2.0.0"
@@ -11908,7 +13273,7 @@ enhanced-resolve@4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
+enhanced-resolve@4.1.1, enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0, enhanced-resolve@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
   integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
@@ -11917,10 +13282,10 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enquirer@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.2.tgz#1c30284907cadff5ed2404bd8396036dd3da070e"
-  integrity sha512-PLhTMPUXlnaIv9D3Cq3/Zr1xb7soeDDgunobyCmYLUG19n24dvC8i+ZZgm2DekGpDnx7JvFSHV7lxfM58PMtbA==
+enquirer@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.5.tgz#3ab2b838df0a9d8ab9e7dff235b0e8712ef92381"
+  integrity sha512-BNT1C08P9XD0vNg3J475yIUG+mVdp9T6towYFHUv897X0KoHBjB1shyrNmhmtHWKP17iSWgo7Gqh7BBuzLZMSA==
   dependencies:
     ansi-colors "^3.2.1"
 
@@ -11929,90 +13294,65 @@ ensure-posix-path@^1.0.0, ensure-posix-path@^1.0.1, ensure-posix-path@^1.0.2, en
   resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.1.1.tgz#3c62bdb19fa4681544289edb2b382adc029179ce"
   integrity sha512-VWU0/zXzVbeJNXvME/5EmLuEj2TauvoaTz6aFYK1Z92JCBlDlZ3Gu0tuGR42kpW1754ywTs+QB0g5TP0oj9Zaw==
 
+entities@1.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
+  integrity sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=
+
 entities@^1.1.1, entities@^1.1.2, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
-  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
-
-env-ci@^2.1.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-2.6.0.tgz#3fc46537c972b4d3ab5f0b82d07dfc1491297662"
-  integrity sha512-tnOi9qgtDxY3mvf69coXLHbSZtFMNGAJ1s/huirAhJZTx9rs/1qgFjl+6Z5ULQCfpDmlsf34L7wm+eJGwMazYg==
-  dependencies:
-    execa "^1.0.0"
-    java-properties "^0.2.9"
+entities@^2.0.0, entities@~2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
+  integrity sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==
 
-env-ci@^4.1.3:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-4.5.1.tgz#2ef014dcb974728b46d1244e491e9e6ccc1923ef"
-  integrity sha512-Xtmr+ordf8POu3NcNzx3eOa2zHyfD4h3fPHX5fLklkWa86ck35n1c9oZmyUnVPUl9zHnpZWdWtCUBPSWEagjCQ==
+env-ci@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-5.0.2.tgz#48b6687f8af8cdf5e31b8fcf2987553d085249d9"
+  integrity sha512-Xc41mKvjouTXD3Oy9AqySz1IeyvJvHZ20Twf5ZLYbNpPPIuCnL/qHCmNlD01LoNy0JTunw9HPYVptD19Ac7Mbw==
   dependencies:
-    execa "^3.2.0"
+    execa "^4.0.0"
     java-properties "^1.0.0"
 
-env-paths@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
-  integrity sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=
-
-envinfo@5.10.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.10.0.tgz#503a9774ae15b93ea68bdfae2ccd6306624ea6df"
-  integrity sha512-rXbzXWvnQxy+TcqZlARbWVQwgGVVouVJgFZhLVN5htjLxl1thstrP2ZGi0pXC309AbK7gVOPU+ulz/tmpCI7iw==
-
-envinfo@^5.7.0:
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.12.1.tgz#83068c33e0972eb657d6bc69a6df30badefb46ef"
-  integrity sha512-pwdo0/G3CIkQ0y6PCXq4RdkvId2elvtPCJMG0konqlrfkWQbf1DWeH9K2b/cvu2YgGvPPTOnonZxXM1gikFu1w==
-
-envinfo@^7.3.1, envinfo@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.0.tgz#91410bb6db262fb4f1409bd506e9ff57e91023f4"
-  integrity sha512-jDgnJaF/Btomk+m3PZDTTCb5XIIIX3zYItnCRfF73zVgvinLoRomuhi75Y4su0PtQxWz4v66XnLLckyvyJTOIQ==
+env-paths@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
+  integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==
 
-envsub@^3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/envsub/-/envsub-3.0.9.tgz#b89a17c8ffb1460e1fc534764603b03cf6e0a7fe"
-  integrity sha512-3tjwXTxkjfU6SLeOAZ8f2uEK0g+dFFknG93vWvjpNF6YIKvhZMatSDX58D56cgWxfBjWG6ZQcz/4hwHnWc4FGQ==
-  dependencies:
-    bluebird "^3.5.0"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    diff "^3.2.0"
-    handlebars "^4.0.6"
-    lodash "^4.17.4"
+envinfo@7.5.1, envinfo@^7.3.1, envinfo@^7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.1.tgz#93c26897225a00457c75e734d354ea9106a72236"
+  integrity sha512-hQBkDf2iO4Nv0CNHpCuSBeaSrveU6nThVxFGTrq/eDlV716UQk09zChaJae4mZRsos1x4YLY2TaH3LHUae3ZmQ==
 
-enzyme-adapter-react-16@^1.9.1:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz#8ad55332be7091dc53a25d7d38b3485fc2ba50d5"
-  integrity sha512-yMPxrP3vjJP+4wL/qqfkT6JAIctcwKF+zXO6utlGPgUJT2l4tzrdjMDWGd/Pp1BjHBcljhN24OzNEGRteibJhA==
+enzyme-adapter-react-16@^1.15.2, enzyme-adapter-react-16@^1.9.1:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.2.tgz#b16db2f0ea424d58a808f9df86ab6212895a4501"
+  integrity sha512-SkvDrb8xU3lSxID8Qic9rB8pvevDbLybxPK6D/vW7PrT0s2Cl/zJYuXvsd1EBTz0q4o3iqG3FJhpYz3nUNpM2Q==
   dependencies:
-    enzyme-adapter-utils "^1.12.1"
-    enzyme-shallow-equal "^1.0.0"
+    enzyme-adapter-utils "^1.13.0"
+    enzyme-shallow-equal "^1.0.1"
     has "^1.0.3"
     object.assign "^4.1.0"
-    object.values "^1.1.0"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    react-is "^16.10.2"
+    react-is "^16.12.0"
     react-test-renderer "^16.0.0-0"
     semver "^5.7.0"
 
-enzyme-adapter-utils@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.1.tgz#e828e0d038e2b1efa4b9619ce896226f85c9dd88"
-  integrity sha512-KWiHzSjZaLEoDCOxY8Z1RAbUResbqKN5bZvenPbfKtWorJFVETUw754ebkuCQ3JKm0adx1kF8JaiR+PHPiP47g==
+enzyme-adapter-utils@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.0.tgz#01c885dde2114b4690bf741f8dc94cee3060eb78"
+  integrity sha512-YuEtfQp76Lj5TG1NvtP2eGJnFKogk/zT70fyYHXK2j3v6CtuHqc8YmgH/vaiBfL8K1SgVVbQXtTcgQZFwzTVyQ==
   dependencies:
     airbnb-prop-types "^2.15.0"
-    function.prototype.name "^1.1.1"
+    function.prototype.name "^1.1.2"
     object.assign "^4.1.0"
-    object.fromentries "^2.0.1"
+    object.fromentries "^2.0.2"
     prop-types "^15.7.2"
-    semver "^5.7.0"
+    semver "^5.7.1"
 
 enzyme-matchers@^7.1.2:
   version "7.1.2"
@@ -12022,54 +13362,56 @@ enzyme-matchers@^7.1.2:
     circular-json-es6 "^2.0.1"
     deep-equal-ident "^1.1.1"
 
-enzyme-shallow-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz#d8e4603495e6ea279038eef05a4bf4887b55dc69"
-  integrity sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==
+enzyme-shallow-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz#7afe03db3801c9b76de8440694096412a8d9d49e"
+  integrity sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==
   dependencies:
     has "^1.0.3"
-    object-is "^1.0.1"
+    object-is "^1.0.2"
 
 enzyme-to-json@^3.3.0, enzyme-to-json@^3.4.1:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.4.3.tgz#ed4386f48768ed29e2d1a2910893542c34e7e0af"
-  integrity sha512-jqNEZlHqLdz7OTpXSzzghArSS3vigj67IU/fWkPyl1c0TCj9P5s6Ze0kRkYZWNEoCqCR79xlQbigYlMx5erh8A==
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.4.4.tgz#b30726c59091d273521b6568c859e8831e94d00e"
+  integrity sha512-50LELP/SCPJJGic5rAARvU7pgE3m1YaNj7JLM+Qkhl5t7PAs6fiyc8xzc50RnkKPFQCv0EeFVjEWdIFRGPWMsA==
   dependencies:
     lodash "^4.17.15"
+    react-is "^16.12.0"
 
-enzyme@^3.9.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
-  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
+enzyme@^3.11.0, enzyme@^3.9.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
+  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
   dependencies:
-    array.prototype.flat "^1.2.1"
-    cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.1.0"
+    array.prototype.flat "^1.2.3"
+    cheerio "^1.0.0-rc.3"
+    enzyme-shallow-equal "^1.0.1"
+    function.prototype.name "^1.1.2"
     has "^1.0.3"
-    html-element-map "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-callable "^1.1.4"
-    is-number-object "^1.0.3"
-    is-regex "^1.0.4"
-    is-string "^1.0.4"
+    html-element-map "^1.2.0"
+    is-boolean-object "^1.0.1"
+    is-callable "^1.1.5"
+    is-number-object "^1.0.4"
+    is-regex "^1.0.5"
+    is-string "^1.0.5"
     is-subset "^0.1.1"
     lodash.escape "^4.0.1"
     lodash.isequal "^4.5.0"
-    object-inspect "^1.6.0"
-    object-is "^1.0.1"
+    object-inspect "^1.7.0"
+    object-is "^1.0.2"
     object.assign "^4.1.0"
-    object.entries "^1.0.4"
-    object.values "^1.0.4"
-    raf "^3.4.0"
+    object.entries "^1.1.1"
+    object.values "^1.1.1"
+    raf "^3.4.1"
     rst-selector-parser "^2.2.3"
-    string.prototype.trim "^1.1.2"
+    string.prototype.trim "^1.2.1"
 
 err-code@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
 
-errno@^0.1.1, errno@^0.1.2, errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.1, errno@^0.1.2, errno@^0.1.3, errno@~0.1.1, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
   integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
@@ -12083,12 +13425,12 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.4.tgz#a757397dc5d9de973ac9a5d7d4e8ade7cfae9101"
-  integrity sha512-fZ0KkoxSjLFmhW5lHbUT3tLwy3nX1qEzMYo8koY1vrsAco53CMT1djnBSeC/wUjTEZRhZl9iRw7PaMaxfJ4wzQ==
+error-stack-parser@^2.0.0, error-stack-parser@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
   dependencies:
-    stackframe "^1.1.0"
+    stackframe "^1.1.1"
 
 error@^7.0.0:
   version "7.2.1"
@@ -12097,29 +13439,40 @@ error@^7.0.0:
   dependencies:
     string-template "~0.2.1"
 
-errorhandler@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/errorhandler/-/errorhandler-1.5.1.tgz#b9ba5d17cf90744cd1e851357a6e75bf806a9a91"
-  integrity sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==
-  dependencies:
-    accepts "~1.3.7"
-    escape-html "~1.0.3"
-
-es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0, es-abstract@^1.16.0, es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.7.0:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.2.tgz#4e874331645e9925edef141e74fc4bd144669d34"
-  integrity sha512-jYo/J8XU2emLXl3OLwfwtuFfuF2w6DYPs+xy9ZfVyPkDcrauu6LYrw/q2TyCtrbc/KUdCiC5e9UajRhgNkVopA==
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+  version "1.17.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
+  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
     has-symbols "^1.0.1"
-    is-callable "^1.1.4"
-    is-regex "^1.0.4"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
     object-inspect "^1.7.0"
     object-keys "^1.1.1"
-    string.prototype.trimleft "^2.1.0"
-    string.prototype.trimright "^2.1.0"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-get-iterator@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -12140,19 +13493,9 @@ es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14:
     next-tick "~1.0.0"
 
 es5-shim@^4.5.13:
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.13.tgz#5d88062de049f8969f83783f4a4884395f21d28b"
-  integrity sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==
-
-es6-error@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-3.2.0.tgz#e567cfdcb324d4e7ae5922a3700ada5de879a0ca"
-  integrity sha1-5WfP3LMk1OeuWSKjcAraXeh5oMo=
-
-es6-error@4.1.1, es6-error@^4.0.2:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
-  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+  version "4.5.14"
+  resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.14.tgz#90009e1019d0ea327447cb523deaff8fe45697ef"
+  integrity sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg==
 
 es6-iterator@2.0.3, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
@@ -12224,13 +13567,10 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1, es6-symbol@~3.1.3:
     d "^1.0.1"
     ext "^1.1.2"
 
-es6-templates@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
-  integrity sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=
-  dependencies:
-    recast "~0.11.12"
-    through "~2.3.6"
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
 
 escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
@@ -12242,12 +13582,17 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escodegen@^1.10.0, escodegen@^1.11.0, escodegen@^1.11.1, escodegen@^1.12.0, escodegen@^1.8.1, escodegen@^1.9.1:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
-  integrity sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==
+escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escodegen@^1.10.0, escodegen@^1.11.0, escodegen@^1.11.1, escodegen@^1.12.0, escodegen@^1.14.1, escodegen@^1.8.1, escodegen@^1.9.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
+  integrity sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==
   dependencies:
-    esprima "^3.1.3"
+    esprima "^4.0.1"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
@@ -12277,28 +13622,28 @@ escodegen@~1.9.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.0.0:
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz#8a7bcb9643d13c55df4dd7444f138bf4efa61e17"
-  integrity sha512-2IDHobw97upExLmsebhtfoD3NAKhV4H0CJWP3Uprd/uk+cHuWYOczPVxQ8PxLFUAw7o3Th1RAU8u1DoUpr+cMA==
+eslint-config-airbnb-base@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.1.0.tgz#2ba4592dd6843258221d9bff2b6831bd77c874e4"
+  integrity sha512-+XCcfGyCnbzOnktDVhwsCAx+9DmrzEmuwxyHUJpw+kqBVT744OUBrB09khgFKlK1lshVww6qXGsYPZpavoNjJw==
   dependencies:
-    confusing-browser-globals "^1.0.7"
+    confusing-browser-globals "^1.0.9"
     object.assign "^4.1.0"
-    object.entries "^1.1.0"
+    object.entries "^1.1.1"
 
-eslint-config-airbnb@^18.0.1:
-  version "18.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz#a3a74cc29b46413b6096965025381df8fb908559"
-  integrity sha512-hLb/ccvW4grVhvd6CT83bECacc+s4Z3/AEyWQdIT2KeTsG9dR7nx1gs7Iw4tDmGKozCNHFn4yZmRm3Tgy+XxyQ==
+eslint-config-airbnb@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz#724d7e93dadd2169492ff5363c5aaa779e01257d"
+  integrity sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==
   dependencies:
-    eslint-config-airbnb-base "^14.0.0"
+    eslint-config-airbnb-base "^14.1.0"
     object.assign "^4.1.0"
-    object.entries "^1.1.0"
+    object.entries "^1.1.1"
 
-eslint-config-prettier@^6.5.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.7.0.tgz#9a876952e12df2b284adbd3440994bf1f39dfbb9"
-  integrity sha512-FamQVKM3jjUVwhG4hEMnbtsq7xOIDm+SY5iBPfR8gKsJoAB2IQnNF+bk1+8Fy44Nq7PPJaLvkRxILYdJWoguKQ==
+eslint-config-prettier@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
+  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
   dependencies:
     get-stdin "^6.0.0"
 
@@ -12309,10 +13654,10 @@ eslint-config-react-app@^4.0.1:
   dependencies:
     confusing-browser-globals "^1.0.7"
 
-eslint-config-react-app@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.2.tgz#df40d73a1402986030680c040bbee520db5a32a4"
-  integrity sha512-VhlESAQM83uULJ9jsvcKxx2Ab0yrmjUt8kDz5DyhTQufqWE0ssAnejlWri5LXv25xoXfdqOyeDPdfJS9dXKagQ==
+eslint-config-react-app@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
+  integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==
   dependencies:
     confusing-browser-globals "^1.0.9"
 
@@ -12322,12 +13667,12 @@ eslint-config-riot@^1.0.0:
   integrity sha1-+9ZThpgLMPvNDhMF1MP7hhTvIRk=
 
 eslint-import-resolver-node@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
-  integrity sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz#dbaa52b6b2816b50bc6711af75422de808e98404"
+  integrity sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==
   dependencies:
     debug "^2.6.9"
-    resolve "^1.5.0"
+    resolve "^1.13.1"
 
 eslint-loader@2.1.2:
   version "2.1.2"
@@ -12340,29 +13685,29 @@ eslint-loader@2.1.2:
     object-hash "^1.1.4"
     rimraf "^2.6.1"
 
-eslint-loader@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.2.tgz#5a627316a51d6f41d357b9f6f0554e91506cdd6e"
-  integrity sha512-S5VnD+UpVY1PyYRqeBd/4pgsmkvSokbHqTXAQMpvCyRr3XN2tvSLo9spm2nEpqQqh9dezw3os/0zWihLeOg2Rw==
+eslint-loader@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.3.tgz#e018e3d2722381d982b1201adb56819c73b480ca"
+  integrity sha512-+YRqB95PnNvxNp1HEjQmvf9KNvCin5HXYYseOXVC2U0KEcw4IkQ2IQEBG46j7+gW39bMzeu0GsUhVbBY3Votpw==
   dependencies:
     fs-extra "^8.1.0"
     loader-fs-cache "^1.0.2"
     loader-utils "^1.2.3"
-    object-hash "^1.3.1"
-    schema-utils "^2.2.0"
+    object-hash "^2.0.1"
+    schema-utils "^2.6.1"
 
-eslint-module-utils@^2.3.0, eslint-module-utils@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.4.1.tgz#7b4675875bf96b0dbf1b21977456e5bb1f5e018c"
-  integrity sha512-H6DOj+ejw7Tesdgbfs4jeS4YMFrT8uI8xwd1gtQqXssaR0EQ26L+2O/w6wkYFy2MymON0fTwHmXBvvfLNZVZEw==
+eslint-module-utils@^2.3.0, eslint-module-utils@^2.4.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
   dependencies:
-    debug "^2.6.8"
+    debug "^2.6.9"
     pkg-dir "^2.0.0"
 
-eslint-plugin-cypress@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.7.0.tgz#117f14ce63698e4c4f3afea3d7e27025c8d504f0"
-  integrity sha512-52Lq5ePCD/8jc536e1RqtLfj33BAy1s7BlYgCjbG39J5kqUitcTlRY5i3NRoeAyPHueDwETsq0eASF44ugLosQ==
+eslint-plugin-cypress@^2.10.1:
+  version "2.10.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.10.3.tgz#82eba7e014954149d590402eecd0d4e147cc7f14"
+  integrity sha512-CvFeoCquShfO8gHNIKA1VpUTz78WtknMebLemBd1lRbcmJNjwpqCqpQYUG/XVja8GjdX/e2TJXYa+EUBxehtUg==
   dependencies:
     globals "^11.12.0"
 
@@ -12373,19 +13718,19 @@ eslint-plugin-flowtype@2.50.1:
   dependencies:
     lodash "^4.17.10"
 
-eslint-plugin-flowtype@3.13.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz#e241ebd39c0ce519345a3f074ec1ebde4cf80f2c"
-  integrity sha512-bhewp36P+t7cEV0b6OdmoRWJCBYRiHFlqPZAG1oS3SF+Y0LQkeDvFSM4oxoxvczD1OdONCXMlJfQFiWLcV9urw==
+eslint-plugin-flowtype@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.6.0.tgz#82b2bd6f21770e0e5deede0228e456cb35308451"
+  integrity sha512-W5hLjpFfZyZsXfo5anlu7HM970JBDqbEshAJUkeczP6BFCIfJXuiIBQXyberLRtOStT0OGPF8efeTbxlHk4LpQ==
   dependencies:
     lodash "^4.17.15"
 
-eslint-plugin-html@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-6.0.0.tgz#28e5c3e71e6f612e07e73d7c215e469766628c13"
-  integrity sha512-PQcGippOHS+HTbQCStmH5MY1BF2MaU8qW/+Mvo/8xTa/ioeMXdSP+IiaBw2+nh0KEMfYQKuTz1Zo+vHynjwhbg==
+eslint-plugin-html@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-6.0.2.tgz#fcbd293e218d03dd72c147fc999d185c6f5989fe"
+  integrity sha512-Ik/z32UteKLo8GEfwNqVKcJ/WOz/be4h8N5mbMmxxnZ+9aL9XczOXQFz/bGu+nAGVoRg8CflldxJhONFpqlrxw==
   dependencies:
-    htmlparser2 "^3.10.1"
+    htmlparser2 "^4.1.0"
 
 eslint-plugin-import@2.16.0:
   version "2.16.0"
@@ -12403,46 +13748,65 @@ eslint-plugin-import@2.16.0:
     read-pkg-up "^2.0.0"
     resolve "^1.9.0"
 
-eslint-plugin-import@2.18.2, eslint-plugin-import@^2.14.0, eslint-plugin-import@^2.16.0:
-  version "2.18.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
-  integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==
+eslint-plugin-import@2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz#802423196dcb11d9ce8435a5fc02a6d3b46939b3"
+  integrity sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==
+  dependencies:
+    array-includes "^3.0.3"
+    array.prototype.flat "^1.2.1"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.4.1"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.0"
+    read-pkg-up "^2.0.0"
+    resolve "^1.12.0"
+
+eslint-plugin-import@^2.20.2:
+  version "2.20.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz#91fc3807ce08be4837141272c8b99073906e588d"
+  integrity sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==
   dependencies:
     array-includes "^3.0.3"
+    array.prototype.flat "^1.2.1"
     contains-path "^0.1.0"
     debug "^2.6.9"
     doctrine "1.5.0"
     eslint-import-resolver-node "^0.3.2"
-    eslint-module-utils "^2.4.0"
+    eslint-module-utils "^2.4.1"
     has "^1.0.3"
     minimatch "^3.0.4"
     object.values "^1.1.0"
     read-pkg-up "^2.0.0"
-    resolve "^1.11.0"
+    resolve "^1.12.0"
 
-eslint-plugin-jest@^23.0.4:
-  version "23.0.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.0.4.tgz#1ab81ffe3b16c5168efa72cbd4db14d335092aa0"
-  integrity sha512-OaP8hhT8chJNodUPvLJ6vl8gnalcsU/Ww1t9oR3HnGdEWjm/DdCCUXLOral+IPGAeWu/EwgVQCK/QtxALpH1Yw==
+eslint-plugin-jest@^23.8.2:
+  version "23.13.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.13.1.tgz#b2ce83f76064ad8ba1f1f26f322b86a86e44148e"
+  integrity sha512-TRLJH6M6EDvGocD98a7yVThrAOCK9WJfo9phuUb0MJptcrOYZeCKzC9aOzZCD93sxXCsiJVZywaTHdI/mAi0FQ==
   dependencies:
     "@typescript-eslint/experimental-utils" "^2.5.0"
 
-eslint-plugin-json-files@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-json-files/-/eslint-plugin-json-files-0.8.0.tgz#cfad4df0340a8ce82b8b1ef32ca395baa071bbe9"
-  integrity sha512-VZ2NI0FZ2QWZKMp4pNibOthXvj0RPevEJmmgVnSgzg0y8KsDdaBdN8BHzqjckh2TprSD8LxszPd5J4QtH73LPQ==
+eslint-plugin-json-files@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-json-files/-/eslint-plugin-json-files-0.8.1.tgz#cdcdf566cc5f81b7a7fd79ceda61564ce635d2ab"
+  integrity sha512-4uhEh2q6bow8XE3XjRTK9cg9nio0x91WXmjDiLV5ip0aN6XO0aGaUk7BUcS2AwhLMbsZOc/V93G5hhab955ftg==
   dependencies:
     requireindex "^1.2.0"
     semver "^6.0.0"
     sort-package-json "^1.22.1"
 
-eslint-plugin-json@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-2.0.1.tgz#825ba21fed9522a7080044f0692ffffffbc237e3"
-  integrity sha512-IxKZIlMyBn0tvxlBj2viW0N/UBuoey1oYpV+SNVuNFmy4xsNuwgeoOjzEeFDnVXL0FpIo7UbQSeZ+lfh2D/nLQ==
+eslint-plugin-json@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-2.1.1.tgz#7b9c4da2121f6f48d44efceb9a99ac0d4d12b299"
+  integrity sha512-Ktsab8ij33V2KFLhh4alC1FYztdmbV32DeMZYYUCZm4kKLW1s4DrleKKgtbAHSJsmshCK5QGOZtfyc2r3jCRsg==
   dependencies:
     lodash "^4.17.15"
-    vscode-json-languageservice "^3.3.5"
+    vscode-json-languageservice "^3.5.1"
 
 eslint-plugin-jsx-a11y@6.2.1:
   version "6.2.1"
@@ -12473,10 +13837,10 @@ eslint-plugin-jsx-a11y@6.2.3, eslint-plugin-jsx-a11y@^6.2.1:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
-eslint-plugin-prettier@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba"
-  integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==
+eslint-plugin-prettier@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz#ae116a0fc0e598fdae48743a4430903de5b4e6ca"
+  integrity sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -12498,46 +13862,40 @@ eslint-plugin-react@7.12.4:
     prop-types "^15.6.2"
     resolve "^1.9.0"
 
-eslint-plugin-react@7.14.3:
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
-  integrity sha512-EzdyyBWC4Uz2hPYBiEJrKCUi2Fn+BJ9B/pJQcjw5X+x/H2Nm59S4MJIvL4O5NEE0+WbnQwEBxWY03oUk+Bc3FA==
+eslint-plugin-react@7.19.0:
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
+  integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
     doctrine "^2.1.0"
     has "^1.0.3"
-    jsx-ast-utils "^2.1.0"
-    object.entries "^1.1.0"
-    object.fromentries "^2.0.0"
-    object.values "^1.1.0"
+    jsx-ast-utils "^2.2.3"
+    object.entries "^1.1.1"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    resolve "^1.10.1"
+    resolve "^1.15.1"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.2"
+    xregexp "^4.3.0"
 
-eslint-plugin-react@^7.15.1, eslint-plugin-react@^7.16.0:
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.16.0.tgz#9928e4f3e2122ed3ba6a5b56d0303ba3e41d8c09"
-  integrity sha512-GacBAATewhhptbK3/vTP09CbFrgUJmBSaaRcWdbQLFvUZy9yVcQxigBNHGPU/KE2AyHpzj3AWXpxoMTsIDiHug==
+eslint-plugin-react@^7.15.1, eslint-plugin-react@^7.19.0:
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz#f98712f0a5e57dfd3e5542ef0604b8739cd47be3"
+  integrity sha512-rqe1abd0vxMjmbPngo4NaYxTcR3Y4Hrmc/jg4T+sYz63yqlmJRknpEQfmWY+eDWPuMmix6iUIK+mv0zExjeLgA==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
     doctrine "^2.1.0"
     has "^1.0.3"
-    jsx-ast-utils "^2.2.1"
-    object.entries "^1.1.0"
-    object.fromentries "^2.0.0"
-    object.values "^1.1.0"
+    jsx-ast-utils "^2.2.3"
+    object.entries "^1.1.1"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    resolve "^1.12.0"
-
-eslint-plugin-react@~7.11.1:
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c"
-  integrity sha512-cVVyMadRyW7qsIUh3FHp3u6QHNhOgVrLQYdQEB1bPWBsgbNCHdFAeNMquBMCcZJu59eNthX053L70l7gRt4SCw==
-  dependencies:
-    array-includes "^3.0.3"
-    doctrine "^2.1.0"
-    has "^1.0.3"
-    jsx-ast-utils "^2.0.1"
-    prop-types "^15.6.2"
+    resolve "^1.15.1"
+    string.prototype.matchall "^4.0.2"
+    xregexp "^4.3.0"
 
 eslint-scope@3.7.1:
   version "3.7.1"
@@ -12563,6 +13921,13 @@ eslint-scope@^5.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-teamcity@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-teamcity/-/eslint-teamcity-3.0.1.tgz#14524bb460afef6501eb1d1eff819a4b19fa4804"
+  integrity sha512-2OfO2mJu7QhDrexq066os6JtcRENelqhpdveNhJy4yvVSYwvkOqZqz1P6x2cD2ZzGPbXMRVGpYy4WVYDZrCWwA==
+  dependencies:
+    fs-extra "^9.0.x"
+
 eslint-utils@^1.3.1, eslint-utils@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
@@ -12570,12 +13935,19 @@ eslint-utils@^1.3.1, eslint-utils@^1.4.3:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+eslint-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.0.0.tgz#7be1cc70f27a72a76cd14aa698bcabed6890e1cd"
+  integrity sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^5.10.0, eslint@^5.16.0:
+eslint@^5.16.0:
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
   integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==
@@ -12617,10 +13989,10 @@ eslint@^5.10.0, eslint@^5.16.0:
     table "^5.2.3"
     text-table "^0.2.0"
 
-eslint@^6.1.0, eslint@^6.5.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.1.tgz#269ccccec3ef60ab32358a44d147ac209154b919"
-  integrity sha512-UWzBS79pNcsDSxgxbdjkmzn/B6BhsXMfUaOHnNwyE8nD+Q6pyT96ow2MccVayUTV4yMid4qLhMiQaywctRkBLA==
+eslint@^6.6.0, eslint@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
@@ -12660,19 +14032,11 @@ eslint@^6.1.0, eslint@^6.5.1:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-esm@3.2.25, esm@^3.2.25, esm@^3.2.4:
+esm@^3.2.25, esm@^3.2.4:
   version "3.2.25"
   resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
   integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
 
-espree@^3.4.3:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
-  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
-  dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
-
 espree@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
@@ -12683,20 +14047,20 @@ espree@^5.0.1:
     eslint-visitor-keys "^1.0.0"
 
 espree@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.2.tgz#6c272650932b4f91c3714e5e7b5f5e2ecf47262d"
-  integrity sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
   dependencies:
-    acorn "^7.1.0"
-    acorn-jsx "^5.1.0"
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
-esprima@^3.1.3, esprima@~3.1.0:
+esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
   integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
-esprima@^4.0.0, esprima@~4.0.0:
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -12712,24 +14076,29 @@ esprima@~3.0.0:
   integrity sha1-U88kes2ncxPlUcOqLnM0LT+099k=
 
 esquery@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
-  integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
-esrecurse@^4.1.0, esrecurse@^4.2.1:
+esrecurse@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
   integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0, estraverse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
+estraverse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
+
 estraverse@~1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.5.1.tgz#867a3e8e58a9f84618afb6c2ddbcd916b7cbaf71"
@@ -12745,12 +14114,7 @@ estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
-esutils@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.1.6.tgz#c01ccaa9ae4b897c6d0c3e210ae52f3c7a844375"
-  integrity sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=
-
-esutils@^2.0.0, esutils@^2.0.2:
+esutils@^2.0.2, esutils@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
@@ -12773,6 +14137,11 @@ event-emitter@^0.3.5, event-emitter@~0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
+event-pubsub@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
+  integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
+
 event-stream@3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
@@ -12786,30 +14155,25 @@ event-stream@3.3.4:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
-event-target-shim@^1.0.5:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-1.1.1.tgz#a86e5ee6bdaa16054475da797ccddf0c55698491"
-  integrity sha1-qG5e5r2qFgVEddp5fM3fDFVphJE=
-
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+eventemitter2@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
+  integrity sha1-DhqEd6+CGm7zmVsxG/dMI6UkfxU=
 
-eventemitter3@^3.0.0, eventemitter3@^3.1.0:
+eventemitter3@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
   integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
 
 eventemitter3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
-  integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
+  integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
 
 events-light@^1.0.0:
   version "1.0.5"
@@ -12834,9 +14198,9 @@ events@^2.0.0:
   integrity sha512-3Zmiobend8P9DjmKAty0Era4jV8oJ0yGYe2nJJAxgymF9+N8F2m0hhZiMoWtcfepExzNKZumFU3ksdQbInGWCg==
 
 events@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
-  integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
+  integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
 
 eventsource@^1.0.7:
   version "1.0.7"
@@ -12853,30 +14217,18 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-exec-async@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/exec-async/-/exec-async-2.2.0.tgz#c7c5ad2eef3478d38390c6dd3acfe8af0efc8301"
-  integrity sha1-x8WtLu80eNODkMbdOs/orw78gwE=
-
-exec-sh@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
-  integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
-  dependencies:
-    merge "^1.2.0"
-
 exec-sh@^0.3.2:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
   integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
 
-execa@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
+execa@1.0.0, execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
   dependencies:
     cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
+    get-stream "^4.0.0"
     is-stream "^1.1.0"
     npm-run-path "^2.0.0"
     p-finally "^1.0.0"
@@ -12907,38 +14259,39 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+execa@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
+  integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=
   dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
     is-stream "^1.1.0"
     npm-run-path "^2.0.0"
     p-finally "^1.0.0"
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-2.1.0.tgz#e5d3ecd837d2a60ec50f3da78fd39767747bbe99"
-  integrity sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==
+execa@^3.2.0, execa@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
   dependencies:
     cross-spawn "^7.0.0"
     get-stream "^5.0.0"
+    human-signals "^1.1.1"
     is-stream "^2.0.0"
     merge-stream "^2.0.0"
-    npm-run-path "^3.0.0"
+    npm-run-path "^4.0.0"
     onetime "^5.1.0"
     p-finally "^2.0.0"
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
-  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
+execa@^4.0.0, execa@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.2.tgz#ad87fb7b2d9d564f70d2b62d511bee41d5cbb240"
+  integrity sha512-QI2zLa6CjGWdiQsmSkZoGtDx2N+cQIGb3yNolGTdjSQzydzLgYYf8LRuagp7S7fPimjcrzUDSUFd/MgzELMi4Q==
   dependencies:
     cross-spawn "^7.0.0"
     get-stream "^5.0.0"
@@ -12947,15 +14300,9 @@ execa@^3.2.0:
     merge-stream "^2.0.0"
     npm-run-path "^4.0.0"
     onetime "^5.1.0"
-    p-finally "^2.0.0"
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execon@^1.2.0:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/execon/-/execon-1.2.9.tgz#6db11333dcc824f1f13e7317fed0d94a2f26491f"
-  integrity sha1-bbETM9zIJPHxPnMX/tDZSi8mSR8=
-
 executable@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -12963,17 +14310,12 @@ executable@4.1.1:
   dependencies:
     pify "^2.2.0"
 
-exeunt@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/exeunt/-/exeunt-1.1.0.tgz#af72db6f94b3cb75e921aee375d513049843d284"
-  integrity sha1-r3Lbb5Szy3XpIa7jddUTBJhD0oQ=
-
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
   integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
 
-exit@^0.1.2:
+exit@0.1.2, exit@0.1.x, exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
   integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
@@ -13005,11 +14347,6 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-expand-template@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
-  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
-
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
@@ -13029,630 +14366,142 @@ expect@^24.9.0:
     jest-message-util "^24.9.0"
     jest-regex-util "^24.9.0"
 
-expo-ads-admob@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-ads-admob/-/expo-ads-admob-5.0.1.tgz#5a74e7cfba3ef8b81b34697df52a78b6d95e9761"
-  integrity sha512-9eKifW2HQpfk4pNlUXetZHEXUFyflK/nwfMPkXYRxay6tG3OsKKKfF42pod6KohguEtwEy+RFM3lGUf4tLgG5Q==
+expect@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-25.5.0.tgz#f07f848712a2813bb59167da3fb828ca21f58bba"
+  integrity sha512-w7KAXo0+6qqZZhovCaBVPSIqQp7/UTcx4M9uKt2m6pd2VB1voyC8JizLRqeEqud3AAVP02g+hbErDu5gu64tlA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    ansi-styles "^4.0.0"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-regex-util "^25.2.6"
+
+expect@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.0.1.tgz#18697b9611a7e2725e20ba3ceadda49bc9865421"
+  integrity sha512-QcCy4nygHeqmbw564YxNbHTJlXh47dVID2BUP52cZFpLU9zHViMFK6h07cC1wf7GYCTIigTdAXhVua8Yl1FkKg==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.0.0"
+    jest-matcher-utils "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-regex-util "^26.0.0"
+
+express-graphql@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/express-graphql/-/express-graphql-0.9.0.tgz#00fd8552f866bac5c9a4612b2c4c82076107b3c2"
+  integrity sha512-wccd9Lb6oeJ8yHpUs/8LcnGjFUUQYmOG9A5BNLybRdCzGw0PeUrtBxsIR8bfiur6uSW4OvPkVDoYH06z6/N9+w==
   dependencies:
-    prop-types "^15.6.2"
+    accepts "^1.3.7"
+    content-type "^1.0.4"
+    http-errors "^1.7.3"
+    raw-body "^2.4.1"
 
-expo-ads-facebook@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-ads-facebook/-/expo-ads-facebook-5.0.1.tgz#3b563446c4bb2cd18e9a189da0d0671612be477e"
-  integrity sha512-PPPc4AwGUsmCUGwH6/7iE8nMyG7XqdAqMTo/WVN+Tfit3KVte46SLnaKCT53CAhqPuFvKTy6t9a1mqz6eglAqA==
+express@4.17.1, express@^4.10.7, express@^4.13.1, express@^4.16.2, express@^4.16.3, express@^4.16.4, express@^4.17.0, express@^4.17.1, express@~4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
   dependencies:
-    fbemitter "^2.1.1"
-    nullthrows "^1.1.0"
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
 
-expo-analytics-amplitude@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-analytics-amplitude/-/expo-analytics-amplitude-5.0.1.tgz#2f0d046f1949342c45cf0b6351f5b021357d4f92"
-  integrity sha512-zzH82IbA/MTfpEbSQuDq4fHR1O3srNTwdOsBYSizn/mvt7+5DPHn4pHJuf9QRtm8FhmpuQQ7d26I6/2/5JCKKA==
+ext@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
+  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
+  dependencies:
+    type "^2.0.0"
 
-expo-analytics-segment@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-analytics-segment/-/expo-analytics-segment-5.0.1.tgz#63443c0c8fa133ce558b557e28baad12326c8bd2"
-  integrity sha512-IfGmtzbyBOJEvDYKiXbr/L5RMtZsVqagnOXDhd5LlHYXPSsVyLZUYzi61blyy/Yoc3fPDfAzk9BTfjYR+zD3MQ==
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
 
-expo-app-auth@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-app-auth/-/expo-app-auth-5.0.1.tgz#ddf5417d33931870311c8b7571f8d2ad13bbfc2a"
-  integrity sha512-7t2UCw2Ga4t71v4LlaWTu6ikZLG8LEhv3f7dQ82FYO09cQck7PPMJZyWbw7B8pgaFuO7A3mLF1H2F3MXLMZzRw==
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
   dependencies:
-    invariant "^2.2.4"
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
 
-expo-app-loader-provider@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-app-loader-provider/-/expo-app-loader-provider-5.0.1.tgz#56f531e189de8407bdf257d5753ccec43dd253f7"
-  integrity sha512-RrbKXYmy980MdSgroY0fWPEFp4qqRGfE2oixPgN52poXJyrLbFeSmV/92IDsEOFv02jtrbbHJ8i3tiIF63czXA==
+extend@^3.0.0, extend@~3.0.1, extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-expo-asset@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-5.0.1.tgz#02445aeb695b8449cb7239e11fc3a8d34e6c86ce"
-  integrity sha512-dDu2jgFVd5UdBVfCgiznaib7R8bF3fZ0H3cLEO8q05lXV5NwFc/ftC2BXy0+tvV5u/yEtnRvQFAQQBJVhtbvpQ==
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
   dependencies:
-    blueimp-md5 "^2.10.0"
-    path-browserify "^1.0.0"
-    url-parse "^1.4.4"
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
 
-expo-av@~5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-5.0.2.tgz#8f308fc14d7be8b3bc79d6f8dc6c270da07f94d4"
-  integrity sha512-InvEYDinIv5enZR1HM6oIKFrvFoIsXuxAKcbZmgtqeuRzeJpOLJgzEJ5XlqPDfCM9/RX2Fhv4b2mSQsL20T4IQ==
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
   dependencies:
-    lodash "^4.17.11"
+    is-extglob "^1.0.0"
 
-expo-background-fetch@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-background-fetch/-/expo-background-fetch-5.0.1.tgz#103538d81dda5010dd4f525dd4c73daaa54f61d8"
-  integrity sha512-nisjKhpqY9B4XoFcTXtT2tjiSgt0ApuKRxGbECG3q4vq85o13cGoOYuNJv7XkKuuEpVkvuCK6yjh+WVgOoouRw==
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
   dependencies:
-    expo-task-manager "~5.0.1"
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
 
-expo-barcode-scanner@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-barcode-scanner/-/expo-barcode-scanner-5.0.1.tgz#4b35704e05ab61fa5d203ccc27045739072f84f7"
-  integrity sha512-9IGXvfd5w8P3swhauSXgCjR55qDvrSgQIc9AdyPZ70V5+UyBB6rmRF7NVPyNAWd3t41HhZ9mo9TKhOmggboG0Q==
+extract-zip@1.7.0, extract-zip@^1.6.6:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
   dependencies:
-    lodash "^4.6.0"
-    prop-types "^15.6.0"
-
-expo-blur@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-5.0.1.tgz#39edbb391965ec3b426ded6b869618d8294dd56c"
-  integrity sha512-tOrVAut04HBkGQ+CizvCXCluHYWVkBvJ4b4OJnLmVV6WzW7Q2cfWglPzGRn/ue/Yw5IZ6p6mZInEqLt/SFkGDg==
-  dependencies:
-    prop-types "^15.6.0"
-
-expo-brightness@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-brightness/-/expo-brightness-5.0.1.tgz#90e0445a34c7ef92c4511211c888bbc50eae0441"
-  integrity sha512-jUbbucNYoBiWiQhHJG78SB4e7DVTRpcm19DKxvvtcwyDMDUch6YFtk1+pImOjkPDlD6xVFm4xPpSWdW3Y2Md3Q==
-
-expo-calendar@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-calendar/-/expo-calendar-5.0.1.tgz#52660f08d3a41109080ecfb2ee7ebbcd9f67c071"
-  integrity sha512-muMxE5W7itpTmsveuEQwRD6bDi5ccDBxkiFNEsqOYheVzAQA55XwIad5a7PrZ4tT4QfeEVvhR1+mE+ShdWqCmw==
-
-expo-camera@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-5.0.1.tgz#1c90cda9e368148dbf538d14bd047cdf33ea3350"
-  integrity sha512-FlgTV6dubDE1IMRKiOipTl2uH1eCravcFDfUQlQaxIlz73YEilZhJT7MAentq8VLJoYXsD99F3TfGcIltMA46Q==
-  dependencies:
-    lodash "^4.6.0"
-    prop-types "^15.6.0"
-
-expo-cli@^3.7.1:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.9.0.tgz#4b837bfcdfbad59a0caaf4b37f06769f2632fb2b"
-  integrity sha512-kDhl67XSXsFyCmb50NyXgy+WsRBqFxQ+UJHcECfbJrB9HGP2NLsnA8KO2Vjna187WmFB4p5aKZ/FN9cMSvIO0A==
-  dependencies:
-    "@expo/build-tools" "0.1.0-alpha.7"
-    "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.5.1"
-    "@expo/dev-tools" "0.8.0"
-    "@expo/json-file" "^8.2.1"
-    "@expo/simple-spinner" "1.0.2"
-    "@expo/spawn-async" "1.5.0"
-    "@expo/xdl" "57.0.0"
-    "@types/cli-table" "^0.3.0"
-    "@types/untildify" "^3.0.0"
-    ansi-regex "^4.1.0"
-    axios "0.19.0"
-    babel-runtime "6.26.0"
-    base32.js "0.1.0"
-    boxen "4.1.0"
-    chalk "2.4.1"
-    cli-table "0.3.1"
-    commander "2.17.1"
-    dateformat "3.0.3"
-    delay-async "1.2.0"
-    detect-indent "^6.0.0"
-    detect-newline "^3.0.0"
-    enquirer "^2.3.2"
-    envinfo "5.10.0"
-    es6-error "3.2.0"
-    expo-optimize "^0.0.1"
-    fs-extra "6.0.1"
-    getenv "0.7.0"
-    glob "7.1.2"
-    indent-string "4.0.0"
-    inflection "^1.12.0"
-    inquirer "5.2.0"
-    klaw-sync "6.0.0"
-    lodash "4.17.15"
-    match-require "2.1.0"
-    npm-package-arg "6.1.0"
-    open "6.3.0"
-    ora "3.4.0"
-    pacote "9.3.0"
-    pngjs "3.4.0"
-    progress "2.0.0"
-    qrcode-terminal "0.11.0"
-    request "^2.88.0"
-    semver "5.5.0"
-    slash "1.0.0"
-    source-map-support "0.5.9"
-    split "1.0.1"
-    targz "^1.0.1"
-    tempy "^0.3.0"
-    untildify "3.0.3"
-    validator "10.5.0"
-    wordwrap "1.0.0"
-  optionalDependencies:
-    "@expo/traveling-fastlane-darwin" "1.11.0"
-    "@expo/traveling-fastlane-linux" "1.11.0"
-
-expo-constants@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-5.0.1.tgz#597263397f269d7fe37d9cd6b30e305c16635a00"
-  integrity sha512-Ny3teALKaE/jFzBg6DHr2GOoHpwQ/OLs3q3VugZOoR6hXCeVcCEP9MyNvhgn/cheeBDAa6UIgarv2Yufb5RMqQ==
-  dependencies:
-    ua-parser-js "^0.7.19"
-
-expo-contacts@~5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/expo-contacts/-/expo-contacts-5.0.2.tgz#4ed7102e31c426367ba3c9dca86d496b38546ab6"
-  integrity sha512-mOsov0eomKsscsdRU2HQPLLZ61lzojHNgO3FVyBF/yoxKAIyMYLTjneHbiOEKAFX4yfFT4bztHgcrL26aLooXQ==
-  dependencies:
-    uuid-js "^0.7.5"
-
-expo-crypto@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-crypto/-/expo-crypto-5.0.1.tgz#ffb48895c68dd5c5f51bf9648152a6d122514ad8"
-  integrity sha512-Tu3d+KJ9eXBNhP5XYvBFQ2n0I0kwlbOw8iEXnbzXmasvhOqr/fPZEdXVbX7xX0/QJE5G1c+OTIV0z/cS8GdVVQ==
-
-expo-document-picker@~5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/expo-document-picker/-/expo-document-picker-5.0.2.tgz#e6ea131491c8267bdca1c617ad9ff96c6c4fa675"
-  integrity sha512-m8oLY6zmqzbZv2ZLx4R4tpVLJfD68OSC8wlBQHcdzo9TTalsxjO62kp3mxRqfe4Jpj0h7icrl4bqNN4bxSGNNw==
-  dependencies:
-    uuid "^3.3.2"
-
-expo-face-detector@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-face-detector/-/expo-face-detector-5.0.1.tgz#51012d54f8d28d470fc18ed6aea333b1fe1271ce"
-  integrity sha512-UUsbLtmENF8S86AJIeeLkj89Q1gvk69wYe1lQflNN7Wy8YLhrRq3V833Gt0Mna5tKThTnj0MkfOcmR2w2skgtg==
-
-expo-facebook@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-facebook/-/expo-facebook-5.0.1.tgz#a339ae21c3748185ad583ab3c1979c0d5637afa9"
-  integrity sha512-rm28dfPtUcdJEB+7zFgZvwl4G8liYGIfDgxECJGqQZNqFVeRQVxbqyxEBuTBuRmYL/nA5n8egTTeW62NC7v85g==
-
-expo-file-system@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-5.0.1.tgz#c26054e512c3bb2e256325b48e603957a24e6210"
-  integrity sha512-8AD8Tt0vR8XNIPXOg5akPUPGuf+SCiE9kY5JppUwfJtfIsiH3BZnebu1bkYCVOMojSgFA017kr8VmH57vEWdnQ==
-  dependencies:
-    uuid-js "^0.7.5"
-
-expo-font@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-5.0.1.tgz#b3174134efd0ce3382db3a6c282147cba8bee203"
-  integrity sha512-fa/z31lLi1ut6IGTf9/Kvw9KAlwSGQaBkuunuqjrW2ephqiXlHTeOOsaqKMirtmiqgsKOJysdlYUH1Aw03Y2bg==
-  dependencies:
-    fontfaceobserver "^2.1.0"
-
-expo-gl-cpp@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-gl-cpp/-/expo-gl-cpp-5.0.1.tgz#cc83b18c4ab0e3e125cb95cf501975455a2c5bbe"
-  integrity sha512-4RMylFwAyakmi5Dp8Vqomq6N+Ywx81ehM3UqhFLuaEkS7dmKd8UQBKwiTiaFcDLsNkvLbTnyllAx7/qctJLQvQ==
-
-expo-gl@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-gl/-/expo-gl-5.0.1.tgz#52cb200a76744131284622622cde16032b176397"
-  integrity sha512-S3LRjIpyedR04QeeSXOJRxPgq8s+o0W3bFlvKZS0ch54xFYJqDk/TM2YTJYY5j9aR4HY/hypnDbP231NwNm30w==
-  dependencies:
-    expo-gl-cpp "~5.0.1"
-    prop-types "^15.6.2"
-
-expo-google-sign-in@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-google-sign-in/-/expo-google-sign-in-5.0.1.tgz#1285afd2cb605129c310ef89b555ba8a3a5f61c2"
-  integrity sha512-VwKIiG+S7uswF27RN9+WBO4dGQhmBPeqYnlBjuw3Zf8pS+tZcE5VROb1PBzyhgn4WEvGEql+40axm8fIMlensw==
-  dependencies:
-    invariant "^2.2.4"
-
-expo-haptics@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-5.0.1.tgz#60b67bc613522ddd1ad5e4d701412771fe333c40"
-  integrity sha512-+ULs5ZNJXT81PILX+Dpp1l9AvcfZZUazg9wX7Dho//ZIaWncPpd5kkiqZpgBlIJNmr7W0rjGcaD8SqVXgesnKg==
-
-expo-image-manipulator@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-image-manipulator/-/expo-image-manipulator-5.0.1.tgz#7e24161eade3888d87471e7fb724fba91d5857eb"
-  integrity sha512-9SOp1hAF4CghwsnO3odx1/ia7NlMrXX/6uIWx+1nxDYGhRg52YFB/Kv84vXS/a5cSGuewBPc4t3++QTo9S7qdQ==
-
-expo-image-picker@~5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/expo-image-picker/-/expo-image-picker-5.0.2.tgz#975ef46bc614d471f01e6de0b2db42e55aab4a56"
-  integrity sha512-6Lf0rd21JhcOxL0ThL0VLewaR0w8SZ/49FYFsyx/XGpo6CSqu9AOZrS11BnVqlwHPaiS4OPsFSlO4IhEF72mFQ==
-
-expo-intent-launcher@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-intent-launcher/-/expo-intent-launcher-5.0.1.tgz#906fa3bcf13bf4607a9ac88e323ce0ac427b54cf"
-  integrity sha512-fvcwkKBcDwKo6JxTGRM3112zgmPbuPtmQx6TdJWuRPJTBWmeCAG2AelohMt1+xzqpnJxnkXEXET2WoMuI+BXvw==
-
-expo-keep-awake@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-5.0.1.tgz#15aeffd9de673f7eaf145449883e8d83f7d7a799"
-  integrity sha512-DPWAqgxbmLyJoCXPbDXbj+1XFjP/ulv4AYzvi1a+jsvZRU2uiFdho0w269Y++DLCQf30vbuu3zs5HiaJGU43fA==
-
-expo-linear-gradient@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-5.0.1.tgz#b4f5450d680b9315f22f4f99fee6a2b90fb49d92"
-  integrity sha512-5dKn9JIXmXXHq6itC/Jpqo65Tkgjwacyw1kpD8sekoFTEVfT6ciFd2djqIcciUqIa57FF/5d2q54mUvjoqD/TA==
-
-expo-local-authentication@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-local-authentication/-/expo-local-authentication-5.0.1.tgz#e5c239e46cdaa64c342d0fea2411b9294348d252"
-  integrity sha512-Fy4T/5N/WUIFsbuRCDWOZzKejbe90nuCbyD4I5rOmHTZRbIxDfGePUUF/fJv5JhjxEl87QdrIlNMpLLyTLiRqw==
-  dependencies:
-    invariant "^2.2.4"
-
-expo-localization@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-localization/-/expo-localization-5.0.1.tgz#9b617198f4627ed5c4eea406ed1a616dbc6d44f6"
-  integrity sha512-tPubS0oSO9nI3rdqnhnuhegV1REE1h3ltXNgtKX9oj9gHeZ+j7trQChF4xb1IGwaKTVm/ur1f4mkhRpQddJIUg==
-  dependencies:
-    rtl-detect "^1.0.2"
-
-expo-location@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-location/-/expo-location-5.0.1.tgz#697adb49b42018db9e32aa05b7623e0d71250eb9"
-  integrity sha512-YXMrPuYlLfqcHxKjwdc99XjCpeJYWtxu6kqaM9f++u/zjeup95YNnlzeq8uD7YhNuWk8O6boVAFTSXPn9bY+9w==
-  dependencies:
-    invariant "^2.2.4"
-
-expo-mail-composer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-mail-composer/-/expo-mail-composer-5.0.1.tgz#adf4eb2e9a3d4f79b9d128b6c45e8a16c89db818"
-  integrity sha512-ps927F7BY+m1BzVqDYamIgVxmcaE8USQmBXNoligDzl/VqyKhS+68FijkLRdowRo5zGdXIHiZF9EW1Cvbcm3Vw==
-  dependencies:
-    lodash "^4.6.0"
-    query-string "^6.2.0"
-
-expo-media-library@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-media-library/-/expo-media-library-5.0.1.tgz#f7f3b7fa0808eac224cd966583253380f0af2d1d"
-  integrity sha512-b5DHS+Ga8dyhw1+xQDB7Dafiea1jd91iOXbaE8LWg+awUDXTh6Ss14KMh8WI2mE3DVbBkcuLPTQ9NXlM2Oz67Q==
-
-expo-optimize@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/expo-optimize/-/expo-optimize-0.0.1.tgz#2ab920d22b52bdd4f319300c199345ac600a608c"
-  integrity sha512-EiQ6WnEkFE/mnDMLTbYnQXWw6fN74lJC6qEBrhU/E4+9gsuTWMd8AM0nzx3/KvUkwLAks51D2uKTDKn9llFKqg==
-  dependencies:
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.7"
-    "@expo/json-file" "^8.2.1"
-
-expo-payments-stripe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-payments-stripe/-/expo-payments-stripe-5.0.1.tgz#da096cf81fc03dbfd540ce6814cc67222d7447ff"
-  integrity sha512-U1SP9QPrCUUgYURGysUsQN1VEHs88ok+vTd30vsdbKq3TkguIPc0HuL/p2VE48KpVuykLKTmD4j9Ey56qUUiLg==
-
-expo-permissions@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-5.0.1.tgz#cc6af49a37ea3ab73e780a8a19f22b7662379941"
-  integrity sha512-cOg9f9TaV8grORTwLSuoPfviDGcJSALjaALvxdmQD5ujPW6lxO6Ofd/s4/dV4L3lJww4HXiurjPJnT5yo+3ydw==
-
-expo-print@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-print/-/expo-print-5.0.1.tgz#2daca5538a4447764a2910a6cd95d7b844c6637d"
-  integrity sha512-cQ7kyKoAfL52iRnXH7b0aHNmZdORURBXZLZ6z495XG/S52nox1GtuXdZSSfo9qptDwWaKbsetVzDAM58LVIoWw==
-
-expo-random@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-random/-/expo-random-5.0.1.tgz#44ba8b3324f7d179aa1a6f30ccb4d4e3c94afe32"
-  integrity sha512-VUPDd8Ds1adaQoaCxTvEsSdiE02LuszazkxwvDjykE+oPG9CYOcc19yvk8wivyciEkMnjD5zYkM67ystFELGXw==
-  dependencies:
-    base64-js "^1.3.0"
-
-expo-secure-store@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-5.0.1.tgz#451d61e9519bb964e315c2be336e2aa5f130b8a4"
-  integrity sha512-iA0/MJCHZk9z5OdxEXH5TYEDKq5sEIdASBr/7XkdCl+gB7+3peSeEXsXPRK+TK/Tzo9JGgfYrXha/CsVC9nD5A==
-
-expo-sensors@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-sensors/-/expo-sensors-5.0.1.tgz#67dd446f1318712c90d714807f195c263e18552b"
-  integrity sha512-mPpcPKUDeVO/vtpHnHix3yczxlYWv+cHw6w2aeVem3zaXGeg+1pHH95h/pzUgO4B7Y8lci+OnozA5YFy0yNyjA==
-  dependencies:
-    invariant "^2.2.4"
-
-expo-sharing@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-sharing/-/expo-sharing-5.0.1.tgz#ec761be19469e39650e45972053663eae8ed0431"
-  integrity sha512-oBrRpVnhPxDb6qgC4RkcGz82JfTz7ao4uI+/DC8OJGUkRyCczVHuDG0v4R6jLMPld8dkjAxUmUkba7JVgg53FQ==
-
-expo-sms@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-sms/-/expo-sms-5.0.1.tgz#c4f40e9bd15a2f3d8641595807aff536d88bb083"
-  integrity sha512-rGZkTsCLqbigUD7OKYHEt9vYBMG43ne+j8NvWbBwl1DFtkPcAZQIBN7pMFnXjRY0FLZnFePFDeYpboGquyQrgQ==
-
-expo-speech@~5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/expo-speech/-/expo-speech-5.0.2.tgz#ccc66e50614ebbdc06296dde150560c55b8333fd"
-  integrity sha512-AbLIM0lPUA9X+iCq20W7KW4Z/k6CvtKdCHZXEzJXqmm45YnCqENpSmrhVwePG6Lem6MJ4Bzg4DTC0UXl57SD4Q==
-
-expo-sqlite@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-sqlite/-/expo-sqlite-5.0.1.tgz#71bb054141929371330de6ac7a9c16294e05a177"
-  integrity sha512-NQXFcjSScpjCRAC+oKQ1Fn+RYSLkYHudaiJSG5wqN28pKqg3yLqjpPG2gDbq/PvgHYkjZXBnvrNgmddjFzDyIQ==
-  dependencies:
-    "@expo/websql" "^1.0.1"
-    "@types/websql" "^0.0.27"
-    lodash "^4.17.11"
-
-expo-task-manager@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/expo-task-manager/-/expo-task-manager-5.0.1.tgz#18e0a2a7539617d7731c3e4e9bedcf0a3574577b"
-  integrity sha512-ManMdoYH++K2ZaRCYc2hfi1N33XTzjn1o1O8Qkj8JH49VssOzW9TF1URw2j+qRt3iN5Iba4+ECONoi++GoCiqw==
-
-expo-web-browser@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/expo-web-browser/-/expo-web-browser-5.0.3.tgz#c382358ece64a4fad5a5996795faea3446072298"
-  integrity sha512-Etue3QfBki4shFChsVd3Of3xvY7KsXoNINKvckiRCmcCjOC5bGiZ+Grhf70YEHVUB2bEcAUeZhC9Tg0Ip2tdEQ==
-
-expo@^33.0.7:
-  version "33.0.7"
-  resolved "https://registry.yarnpkg.com/expo/-/expo-33.0.7.tgz#e121044c04120ad6d74df6b0099d5d8194244349"
-  integrity sha512-+mDBQ/KeJnDWg8bUoiuP/OpMXwUYaypgHMDPgH7+AXw8OJuedMhJlH+7UEX2OB+UePnWPcQER411sC7m819pag==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    "@expo/vector-icons" "^10.0.1"
-    "@react-native-community/netinfo" "2.0.10"
-    "@types/fbemitter" "^2.0.32"
-    "@types/invariant" "^2.2.29"
-    "@types/lodash.zipobject" "^4.1.4"
-    "@types/qs" "^6.5.1"
-    "@types/uuid-js" "^0.7.1"
-    "@unimodules/core" "^2.0.0"
-    "@unimodules/react-native-adapter" "^2.0.0"
-    babel-preset-expo "^5.0.0"
-    cross-spawn "^6.0.5"
-    expo-ads-admob "~5.0.1"
-    expo-ads-facebook "~5.0.1"
-    expo-analytics-amplitude "~5.0.1"
-    expo-analytics-segment "~5.0.1"
-    expo-app-auth "~5.0.1"
-    expo-app-loader-provider "~5.0.1"
-    expo-asset "~5.0.1"
-    expo-av "~5.0.2"
-    expo-background-fetch "~5.0.1"
-    expo-barcode-scanner "~5.0.1"
-    expo-blur "~5.0.1"
-    expo-brightness "~5.0.1"
-    expo-calendar "~5.0.1"
-    expo-camera "~5.0.1"
-    expo-constants "~5.0.1"
-    expo-contacts "~5.0.2"
-    expo-crypto "~5.0.1"
-    expo-document-picker "~5.0.1"
-    expo-face-detector "~5.0.1"
-    expo-facebook "~5.0.1"
-    expo-file-system "~5.0.1"
-    expo-font "~5.0.1"
-    expo-gl "~5.0.1"
-    expo-gl-cpp "~5.0.1"
-    expo-google-sign-in "~5.0.1"
-    expo-haptics "~5.0.1"
-    expo-image-manipulator "~5.0.1"
-    expo-image-picker "~5.0.2"
-    expo-intent-launcher "~5.0.1"
-    expo-keep-awake "~5.0.1"
-    expo-linear-gradient "~5.0.1"
-    expo-local-authentication "~5.0.1"
-    expo-localization "~5.0.1"
-    expo-location "~5.0.1"
-    expo-mail-composer "~5.0.1"
-    expo-media-library "~5.0.1"
-    expo-payments-stripe "~5.0.1"
-    expo-permissions "~5.0.1"
-    expo-print "~5.0.1"
-    expo-random "~5.0.1"
-    expo-secure-store "~5.0.1"
-    expo-sensors "~5.0.1"
-    expo-sharing "~5.0.1"
-    expo-sms "~5.0.1"
-    expo-speech "~5.0.2"
-    expo-sqlite "~5.0.1"
-    expo-task-manager "~5.0.1"
-    expo-web-browser "~5.0.3"
-    fbemitter "^2.1.1"
-    invariant "^2.2.2"
-    lodash "^4.6.0"
-    lottie-react-native "2.6.1"
-    md5-file "^3.2.3"
-    nullthrows "^1.1.0"
-    pretty-format "^23.6.0"
-    prop-types "^15.6.0"
-    qs "^6.5.0"
-    react-google-maps "^9.4.5"
-    react-native-branch "2.2.5"
-    react-native-gesture-handler "1.2.1"
-    react-native-maps "0.24.2"
-    react-native-reanimated "1.0.1"
-    react-native-screens "1.0.0-alpha.22"
-    react-native-svg "9.4.0"
-    react-native-view-shot "2.6.0"
-    react-native-webview "5.8.1"
-    serialize-error "^2.1.0"
-    unimodules-barcode-scanner-interface "~2.0.1"
-    unimodules-camera-interface "~2.0.1"
-    unimodules-constants-interface "~2.0.1"
-    unimodules-face-detector-interface "~2.0.1"
-    unimodules-file-system-interface "~2.0.1"
-    unimodules-font-interface "~2.0.1"
-    unimodules-image-loader-interface "~2.0.1"
-    unimodules-permissions-interface "~2.0.1"
-    unimodules-sensors-interface "~2.0.1"
-    uuid-js "^0.7.5"
-
-express-graphql@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/express-graphql/-/express-graphql-0.9.0.tgz#00fd8552f866bac5c9a4612b2c4c82076107b3c2"
-  integrity sha512-wccd9Lb6oeJ8yHpUs/8LcnGjFUUQYmOG9A5BNLybRdCzGw0PeUrtBxsIR8bfiur6uSW4OvPkVDoYH06z6/N9+w==
-  dependencies:
-    accepts "^1.3.7"
-    content-type "^1.0.4"
-    http-errors "^1.7.3"
-    raw-body "^2.4.1"
-
-express@4.16.4:
-  version "4.16.4"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
-  integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==
-  dependencies:
-    accepts "~1.3.5"
-    array-flatten "1.1.1"
-    body-parser "1.18.3"
-    content-disposition "0.5.2"
-    content-type "~1.0.4"
-    cookie "0.3.1"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "1.1.1"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.4"
-    qs "6.5.2"
-    range-parser "~1.2.0"
-    safe-buffer "5.1.2"
-    send "0.16.2"
-    serve-static "1.13.2"
-    setprototypeof "1.1.0"
-    statuses "~1.4.0"
-    type-is "~1.6.16"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-express@^4.10.7, express@^4.13.1, express@^4.16.2, express@^4.16.3, express@^4.16.4, express@^4.17.0, express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-ext@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.2.0.tgz#8dd8d2dd21bcced3045be09621fa0cbf73908ba4"
-  integrity sha512-0ccUQK/9e3NreLFg6K6np8aPyRgwycx+oFGtfx1dSp7Wj00Ozw9r05FgBRlzjf2XBM7LAzwgLyDscRrtSU91hA==
-  dependencies:
-    type "^2.0.0"
-
-extend-shallow@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
-  integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=
-  dependencies:
-    kind-of "^1.1.0"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extend@^3.0.0, extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-external-editor@^2.0.4, external-editor@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
-  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
-  dependencies:
-    chardet "^0.4.0"
-    iconv-lite "^0.4.17"
-    tmp "^0.0.33"
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-extglob@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
-  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
-  dependencies:
-    is-extglob "^1.0.0"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extract-zip@1.6.7, extract-zip@^1.6.6:
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
-  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
-  dependencies:
-    concat-stream "1.6.2"
-    debug "2.6.9"
-    mkdirp "0.5.1"
-    yauzl "2.4.1"
+    concat-stream "^1.6.2"
+    debug "^2.6.9"
+    mkdirp "^0.5.4"
+    yauzl "^2.10.0"
 
 extsprintf@1.3.0:
   version "1.3.0"
@@ -13664,19 +14513,19 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fake-tag@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-1.0.1.tgz#1d59da482240a02bd83500ca98976530ed154b0d"
-  integrity sha512-qmewZoBpa71mM+y6oxXYW/d1xOYQmeIvnEXAt1oCmdP0sqcogWYLepR87QL1jQVLSVMVYDq2cjY6ec/Wu8/4pg==
+fake-tag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-2.0.0.tgz#08ea5df950ef8635833186247f569e8406ffb4da"
+  integrity sha512-QDz+8qiNQ9AfBZ31EXlID5JIbUkU3e1nXDWk4tidFzd2gy8XJaEUW1HCuDY6DUy6t2Y0nvhD6PsUc+2WYy5w0w==
 
 falafel@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/falafel/-/falafel-2.1.0.tgz#96bb17761daba94f46d001738b3cedf3a67fe06c"
-  integrity sha1-lrsXdh2rqU9G0AFzizzt86Z/4Gw=
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/falafel/-/falafel-2.2.4.tgz#b5d86c060c2412a43166243cb1bce44d1abd2819"
+  integrity sha512-0HXjo8XASWRmsS0X1EkhwEMZaD3Qvp7FfURwjLKjG1ghfRm/MGZl2r4cWUTv41KdNghTw4OUMmVtdGQp3+H+uQ==
   dependencies:
-    acorn "^5.0.0"
+    acorn "^7.1.1"
     foreach "^2.0.5"
-    isarray "0.0.1"
+    isarray "^2.0.1"
     object-keys "^1.0.6"
 
 fancy-log@^1.3.2, fancy-log@^1.3.3:
@@ -13712,6 +14561,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
 fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
@@ -13729,26 +14583,27 @@ fast-glob@^2.0.2, fast-glob@^2.2.2, fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.1.0.tgz#77375a7e3e6f6fc9b18f061cddd28b8d1eec75ae"
-  integrity sha512-TrUz3THiq2Vy3bjfQUB2wNyPdGBeGmdjbzzBLhfHN4YFurYptCKwGq/TfiRavbGywFRzY6U2CdmQ1zmsY5yYaw==
+fast-glob@^3.0.3, fast-glob@^3.1.0, fast-glob@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
+  integrity sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
     glob-parent "^5.1.0"
     merge2 "^1.3.0"
     micromatch "^4.0.2"
+    picomatch "^2.2.1"
 
-fast-json-parse@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
-  integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==
+fast-json-patch@^3.0.0-1:
+  version "3.0.0-1"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-3.0.0-1.tgz#4c68f2e7acfbab6d29d1719c44be51899c93dabb"
+  integrity sha512-6pdFb07cknxvPzCeLsFHStEy+MysPJPgZQ9LbQ/2O67unQF93SNqfdSqnPPl71YMHX+AD8gbl7iuoGFzHEdDuw==
 
-fast-json-stable-stringify@2.0.0, fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
-  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
+fast-json-stable-stringify@2.1.0, fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@~2.0.6:
   version "2.0.6"
@@ -13767,11 +14622,6 @@ fast-redact@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-2.0.0.tgz#17bb8f5e1f56ecf4a38c8455985e5eab4c478431"
   integrity sha512-zxpkULI9W9MNTK2sJ3BpPQrTEXFNESd2X6O1tXMFpK/XM0G5c5Rll2EVYZH2TqI3xRGK/VaJ+eEOt7pnENJpeA==
 
-fast-safe-stringify@^1.0.8, fast-safe-stringify@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.2.3.tgz#9fe22c37fb2f7f86f06b8f004377dbf8f1ee7bc1"
-  integrity sha512-QJYT/i0QYoiZBQ71ivxdyTqkwKkQ0oxACXHYxH2zYHJEgzi2LsbjgvtzTbLi1SZcF190Db2YP7I7eTsU2egOlw==
-
 fast-safe-stringify@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
@@ -13791,24 +14641,24 @@ fast-sourcemap-concat@^1.4.0:
     source-map-url "^0.3.0"
     sourcemap-validator "^1.1.0"
 
-fastparse@^1.1.1:
+fastparse@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
 fastq@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
-  integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
+  integrity sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==
   dependencies:
-    reusify "^1.0.0"
+    reusify "^1.0.4"
 
 fault@^1.0.0, fault@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
-  integrity sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
   dependencies:
-    format "^0.2.2"
+    format "^0.2.0"
 
 faye-websocket@0.11.x, faye-websocket@~0.11.1:
   version "0.11.3"
@@ -13825,41 +14675,13 @@ faye-websocket@^0.10.0, faye-websocket@~0.10.0:
     websocket-driver ">=0.5.1"
 
 fb-watchman@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
-  integrity sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=
-  dependencies:
-    bser "^2.0.0"
-
-fbemitter@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
-  integrity sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=
-  dependencies:
-    fbjs "^0.8.4"
-
-fbjs-css-vars@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
-  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
-
-fbjs-scripts@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-1.2.0.tgz#069a0c0634242d10031c6460ef1fccefcdae8b27"
-  integrity sha512-5krZ8T0Bf8uky0abPoCLrfa7Orxd8UH4Qq8hRUF2RZYNMu+FmEOrBc7Ib3YVONmxTXTlLAvyrrdrVmksDb2OqQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
   dependencies:
-    "@babel/core" "^7.0.0"
-    ansi-colors "^1.0.1"
-    babel-preset-fbjs "^3.2.0"
-    core-js "^2.4.1"
-    cross-spawn "^5.1.0"
-    fancy-log "^1.3.2"
-    object-assign "^4.0.1"
-    plugin-error "^0.1.2"
-    semver "^5.1.0"
-    through2 "^2.0.0"
+    bser "2.1.1"
 
-fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -13872,27 +14694,6 @@ fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
-fbjs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
-  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
-  dependencies:
-    core-js "^2.4.1"
-    fbjs-css-vars "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
-fd-slicer@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
-  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
-  dependencies:
-    pend "~1.2.0"
-
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -13901,9 +14702,9 @@ fd-slicer@~1.1.0:
     pend "~1.2.0"
 
 figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
-  integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
 figures@^1.7.0:
   version "1.7.0"
@@ -13920,10 +14721,10 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-figures@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.1.0.tgz#4b198dd07d8d71530642864af2d45dd9e459c4ec"
-  integrity sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==
+figures@^3.0.0, figures@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
   dependencies:
     escape-string-regexp "^1.0.5"
 
@@ -13942,15 +14743,7 @@ file-loader@3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
-file-loader@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e"
-  integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.0.0"
-
-file-loader@^4.2.0, file-loader@~4.3.0:
+file-loader@4.3.0, file-loader@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.3.0.tgz#780f040f729b3d18019f20605f723e844b8a58af"
   integrity sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==
@@ -13958,6 +14751,14 @@ file-loader@^4.2.0, file-loader@~4.3.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-loader@6.0.0, file-loader@^6.0.0, file-loader@~6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
@@ -13972,6 +14773,13 @@ file-uri-to-path@1.0.0:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
+filelist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.1.tgz#f10d1a3ae86c1694808e8f20906f43d4c9132dbb"
+  integrity sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==
+  dependencies:
+    minimatch "^3.0.4"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -13982,6 +14790,11 @@ filesize@3.6.1, filesize@^3.6.0, filesize@^3.6.1:
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
   integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
 
+filesize@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.0.1.tgz#f850b509909c7c86f7e450ea19006c31c2ed3d2f"
+  integrity sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==
+
 filesize@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-4.2.1.tgz#ab1cb2069db5d415911c1a13e144c0e743bc89bc"
@@ -14015,19 +14828,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
-  integrity sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.4.0"
-    unpipe "~1.0.0"
-
 finalhandler@1.1.2, finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -14041,7 +14841,7 @@ finalhandler@1.1.2, finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-babel-config@1.2.0, find-babel-config@^1.1.0:
+find-babel-config@1.2.0, find-babel-config@^1.1.0, find-babel-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
   integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
@@ -14049,13 +14849,13 @@ find-babel-config@1.2.0, find-babel-config@^1.1.0:
     json5 "^0.5.1"
     path-exists "^3.0.0"
 
-find-cache-dir@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.0.0.tgz#cd4b7dd97b7185b7e17dbfe2d6e4115ee3eeb8fc"
-  integrity sha512-t7ulV1fmbxh5G9l/492O1p5+EBbr3uwpt6odhFTMc+nWyhmbloe+ja9BZ8pIBtqFWhOmCWVjx+pTW4zDkFoclw==
+find-cache-dir@3.3.1, find-cache-dir@^3.0.0, find-cache-dir@^3.2.0, find-cache-dir@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
   dependencies:
     commondir "^1.0.1"
-    make-dir "^3.0.0"
+    make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
 find-cache-dir@^0.1.1:
@@ -14067,6 +14867,15 @@ find-cache-dir@^0.1.1:
     mkdirp "^0.5.1"
     pkg-dir "^1.0.0"
 
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -14076,15 +14885,6 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.1.0.tgz#9935894999debef4cf9f677fdf646d002c4cdecb"
-  integrity sha512-zw+EFiNBNPgI2NTrKkDd1xd7q0cs6wr/iWnr/oUkI0yF9K9GqQ+riIt4aiyFaaqpaWbxPrJXHI+QvmNUQbX+0Q==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.0"
-    pkg-dir "^4.1.0"
-
 find-index@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/find-index/-/find-index-1.1.1.tgz#4b221f8d46b7f8bea33d8faed953f3ca7a081cbc"
@@ -14107,6 +14907,14 @@ find-up@3.0.0, find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -14122,13 +14930,12 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-find-up@^4.0.0, find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+find-versions@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e"
+  integrity sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==
   dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
+    semver-regex "^2.0.0"
 
 find-yarn-workspace-root@^1.2.1:
   version "1.2.1"
@@ -14153,14 +14960,14 @@ findup-sync@3.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
-findup-sync@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
-  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
+findup-sync@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-4.0.0.tgz#956c9cdde804052b881b428512905c4a5f2cdef0"
+  integrity sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==
   dependencies:
     detect-file "^1.0.0"
-    is-glob "^3.1.0"
-    micromatch "^3.0.4"
+    is-glob "^4.0.0"
+    micromatch "^4.0.2"
     resolve-dir "^1.0.1"
 
 fireworm@^0.7.0:
@@ -14174,6 +14981,25 @@ fireworm@^0.7.0:
     lodash.flatten "^3.0.2"
     minimatch "^3.0.2"
 
+fixturify-project@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/fixturify-project/-/fixturify-project-1.10.0.tgz#091c452a9bb15f09b6b9cc7cf5c0ad559f1d9aad"
+  integrity sha512-L1k9uiBQuN0Yr8tA9Noy2VSQ0dfg0B8qMdvT7Wb5WQKc7f3dn3bzCbSrqlb+etLW+KDV4cBC7R1OvcMg3kcxmA==
+  dependencies:
+    fixturify "^1.2.0"
+    tmp "^0.0.33"
+
+fixturify@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fixturify/-/fixturify-1.3.0.tgz#163c468093c7c4d90b70cde39fd6325f6528b25d"
+  integrity sha512-tL0svlOy56pIMMUQ4bU1xRe6NZbFSa/ABTWMxW2mH38lFGc9TrNAKWcMBQ7eIjo3wqSS8f2ICabFaatFyFmrVQ==
+  dependencies:
+    "@types/fs-extra" "^5.0.5"
+    "@types/minimatch" "^3.0.3"
+    "@types/rimraf" "^2.0.2"
+    fs-extra "^7.0.1"
+    matcher-collection "^2.0.0"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -14183,15 +15009,15 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
-flatstr@^1.0.12, flatstr@^1.0.4, flatstr@^1.0.9:
+flatstr@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.12.tgz#c2ba6a08173edbb6c9640e3055b95e287ceb5931"
   integrity sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw==
 
 flatted@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
-  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flatten@^1.0.2:
   version "1.0.3"
@@ -14199,9 +15025,9 @@ flatten@^1.0.2:
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
 flow-parser@0.*:
-  version "0.112.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.112.0.tgz#938d7949068f147a196ebc2bd982ea066b024df5"
-  integrity sha512-sxjnwhR76B/fUN6n/XerYzn8R1HvtVo3SM8Il3WiZ4nkAlb2BBzKe1TSVKGSyZgD6FW9Bsxom/57ktkqrqmXGA==
+  version "0.125.1"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.125.1.tgz#8e6174c0ad8bce8c4e8dbe3c2cfe30235eb0d080"
+  integrity sha512-vrnK98a85yyaPqcZTQmHlrzb4PAiF/WgkI8xZCmyn5sT6/bAKAFbUB+VQqfzTpnvq2VwZ5SThi/xuz3zMLTFRw==
 
 flush-promises@^1.0.2:
   version "1.0.2"
@@ -14216,16 +15042,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fn-name@^2.0.1, fn-name@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
-  integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
-
-focus-lock@^0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
-  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
-
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -14233,33 +15049,28 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.0.0, follow-redirects@^1.2.5:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
-  integrity sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==
+follow-redirects@^1.0.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.11.0.tgz#afa14f08ba12a52963140fe43212658897bc0ecb"
+  integrity sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==
   dependencies:
     debug "^3.0.0"
 
-fontfaceobserver@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
-  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
-
-fontkit@^1.0.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-1.8.0.tgz#deb9351619e90ddc91707b6156a9f14c8ab11554"
-  integrity sha512-EFDRCca7khfQWYu1iFhsqeABpi87f03MBdkT93ZE6YhqCdMzb5Eojb6c4dlJikGv5liuhByyzA7ikpIPTSBWbQ==
+fontkit@^1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-1.8.1.tgz#ae77485376f1096b45548bf6ced9a07af62a7846"
+  integrity sha512-BsNCjDoYRxmNWFdAuK1y9bQt+igIxGtTC9u/jSFjR9MKhmI00rP1fwSvERt+5ddE82544l0XH5mzXozQVUy2Tw==
   dependencies:
-    babel-runtime "^6.11.6"
-    brfs "^1.4.0"
+    babel-runtime "^6.26.0"
+    brfs "^2.0.0"
     brotli "^1.2.0"
-    browserify-optional "^1.0.0"
-    clone "^1.0.1"
+    browserify-optional "^1.0.1"
+    clone "^1.0.4"
     deep-equal "^1.0.0"
-    dfa "^1.0.0"
+    dfa "^1.2.0"
     restructure "^0.5.3"
     tiny-inflate "^1.0.2"
-    unicode-properties "^1.0.0"
+    unicode-properties "^1.2.2"
     unicode-trie "^0.3.0"
 
 for-in@^0.1.3:
@@ -14315,7 +15126,7 @@ fork-ts-checker-webpack-plugin@1.5.0:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-fork-ts-checker-webpack-plugin@^3.0.1:
+fork-ts-checker-webpack-plugin@3.1.1, fork-ts-checker-webpack-plugin@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz#a1642c0d3e65f50c2cc1742e9c0a80f441f86b19"
   integrity sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ==
@@ -14329,14 +15140,18 @@ fork-ts-checker-webpack-plugin@^3.0.1:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-form-data@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
-  integrity sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=
+fork-ts-checker-webpack-plugin@^4.0.3, fork-ts-checker-webpack-plugin@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.5.tgz#780d52c65183742d8c885fff42a9ec9ea7006672"
+  integrity sha512-nuD4IDqoOfkEIlS6shhjLGaLBDSNyVJulAlr5lFbPe0saGqlsTo+/HmhtIrs/cNLFtmaudL10byivhxr+Qhh4w==
   dependencies:
-    asynckit "^0.4.0"
-    combined-stream "1.0.6"
-    mime-types "^2.1.12"
+    "@babel/code-frame" "^7.5.5"
+    chalk "^2.4.1"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    semver "^5.6.0"
+    tapable "^1.0.0"
+    worker-rpc "^0.1.0"
 
 form-data@^2.5.0:
   version "2.5.1"
@@ -14347,6 +15162,15 @@ form-data@^2.5.0:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+form-data@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.0.tgz#31b7e39c85f1355b7139ee0c647cf0de7f83c682"
+  integrity sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~0.1.0:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-0.1.4.tgz#91abd788aba9702b1aabfa8bc01031a2ac9e3b12"
@@ -14356,7 +15180,7 @@ form-data@~0.1.0:
     combined-stream "~0.0.4"
     mime "~1.2.11"
 
-form-data@~2.3.2:
+form-data@~2.3.1, form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
   integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
@@ -14370,7 +15194,7 @@ format-json@^1.0.3:
   resolved "https://registry.yarnpkg.com/format-json/-/format-json-1.0.3.tgz#268e3d3e169792ff49bb5b030f22c87ca1c2cd9f"
   integrity sha1-Jo49PhaXkv9Ju1sDDyLIfKHCzZ8=
 
-format@^0.2.2:
+format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
@@ -14387,11 +15211,6 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-freeport-async@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/freeport-async/-/freeport-async-2.0.0.tgz#6adf2ec0c629d11abff92836acd04b399135bab4"
-  integrity sha512-K7od3Uw45AJg00XUmy15+Hae2hOcgKcmN3/EF6Y7i01O0gaqiRx8sUSpsb9+BRNL8RPBrhzPsVfy8q9ADlJuWQ==
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -14410,34 +15229,15 @@ from@~0:
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
   integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
 
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
-fs-copy-file-sync@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fs-copy-file-sync/-/fs-copy-file-sync-1.1.1.tgz#11bf32c096c10d126e5f6b36d06eece776062918"
-  integrity sha512-2QY5eeqVv4m2PfyMiEuy9adxNP+ajf+8AR05cEi+OAzPcOj90hvFImeZhTmKLBgSd9EvG33jsD7ZRxsx9dThkQ==
-
 fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
   integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
 
-fs-extra@5.0.0, fs-extra@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
-  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-extra@6.0.1, fs-extra@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b"
-  integrity sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==
+fs-extra@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
+  integrity sha1-+RcExT0bRh+JNFKwwwfZmXZHq2s=
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
@@ -14452,6 +15252,15 @@ fs-extra@7.0.1, fs-extra@^7.0.0, fs-extra@^7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@8.1.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^0.24.0:
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.24.0.tgz#d4e4342a96675cb7846633a6099249332b539952"
@@ -14473,15 +15282,6 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
-  integrity sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-
 fs-extra@^4.0.1, fs-extra@^4.0.2, fs-extra@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
@@ -14491,15 +15291,46 @@ fs-extra@^4.0.1, fs-extra@^4.0.2, fs-extra@^4.0.3:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^8.0.1, fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+fs-extra@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
+  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
   dependencies:
-    graceful-fs "^4.2.0"
+    graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b"
+  integrity sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^9.0.0, fs-extra@^9.0.x:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3"
+  integrity sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
+fs-merger@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/fs-merger/-/fs-merger-3.1.0.tgz#f30f74f6c70b2ff7333ec074f3d2f22298152f3b"
+  integrity sha512-RZ9JtqugaE8Rkt7idO5NSwcxEGSDZpLmVFjtVQUm3f+bWun7JAU6fKyU6ZJUeUnKdJwGx8uaro+K4QQfOR7vpA==
+  dependencies:
+    broccoli-node-api "^1.7.0"
+    broccoli-node-info "^2.1.0"
+    fs-extra "^8.0.1"
+    fs-tree-diff "^2.0.1"
+    rimraf "^2.6.3"
+    walk-sync "^2.0.2"
+
 fs-minipass@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
@@ -14508,9 +15339,9 @@ fs-minipass@^1.2.5:
     minipass "^2.6.0"
 
 fs-minipass@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.0.0.tgz#a6415edab02fae4b9e9230bc87ee2e4472003cd1"
-  integrity sha512-40Qz+LFXmd9tzYVnnBmZvFfvAADfUA14TXPK1s7IfElJTIZ97rA8w4Kin7Wt5JBrC3ShnnFJO/5vPjPEeJIq9A==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
   dependencies:
     minipass "^3.0.0"
 
@@ -14580,23 +15411,23 @@ fsevents@2.0.6:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.0.6.tgz#87b19df0bfb4a1a51d7ddb51b01b5f3bedb40c33"
   integrity sha512-vfmKZp3XPM36DNF0qhW+Cdxk7xm7gTEHY1clv1Xq1arwRQuKZgAhw+NZNWbJBtuaNxzNXwhfdPYRrvIbjfS33A==
 
-fsevents@2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.0.7.tgz#382c9b443c6cbac4c57187cdda23aa3bf1ccfc2a"
-  integrity sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==
+fsevents@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
+  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
 
-fsevents@^1.0.0, fsevents@^1.2.3, fsevents@^1.2.7:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
-  integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
+fsevents@^1.0.0, fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
   dependencies:
+    bindings "^1.5.0"
     nan "^2.12.1"
-    node-pre-gyp "^0.12.0"
 
-fsevents@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
-  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
+fsevents@^2.1.2, fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
 fstream@^1.0.0, fstream@^1.0.12:
   version "1.0.12"
@@ -14608,46 +15439,34 @@ fstream@^1.0.0, fstream@^1.0.12:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-function.prototype.name@^1.1.0, function.prototype.name@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392"
-  integrity sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==
+function.prototype.name@^1.1.0, function.prototype.name@^1.1.1, function.prototype.name@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
+  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
   dependencies:
     define-properties "^1.1.3"
-    function-bind "^1.1.1"
-    functions-have-names "^1.1.1"
-    is-callable "^1.1.4"
+    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.0"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-functions-have-names@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.0.tgz#83da7583e4ea0c9ac5ff530f73394b033e0bf77d"
-  integrity sha512-zKXyzksTeaCSw5wIX79iCA40YAa6CJMJgNg9wdkU/ERBrIdPSimPICYiLp65lRbSBqtiHql/HZfS2DyI/AH6tQ==
-
-fuse.js@^3.4.6:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.6.tgz#545c3411fed88bf2e27c457cab6e73e7af697a45"
-  integrity sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg==
+functions-have-names@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
+  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
 
-gauge@~1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-1.2.7.tgz#e9cec5483d3d4ee0ef44b60a7d99e4935e136d93"
-  integrity sha1-6c7FSD09TuDvRLYKfZnkk14TbZM=
-  dependencies:
-    ansi "^0.3.0"
-    has-unicode "^2.0.0"
-    lodash.pad "^4.1.0"
-    lodash.padend "^4.1.0"
-    lodash.padstart "^4.1.0"
+fuse.js@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
+  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
 
 gauge@~2.7.3:
   version "2.7.4"
@@ -14675,13 +15494,19 @@ genfun@^5.0.0:
   resolved "https://registry.yarnpkg.com/genfun/-/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
   integrity sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==
 
-gentle-fs@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/gentle-fs/-/gentle-fs-2.2.1.tgz#1f38df4b4ead685566257201fd526de401ebb215"
-  integrity sha512-e7dRgUM5fsS+7wm2oggZpgcRx6sEvJHXujPH5RzgQ1ziQY4+HuVBYsnUzJwJ+C7mjOJN27DjiFy1TaL+TNltow==
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
+gentle-fs@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/gentle-fs/-/gentle-fs-2.3.1.tgz#11201bf66c18f930ddca72cf69460bdfa05727b1"
+  integrity sha512-OlwBBwqCFPcjm33rF2BjW+Pr6/ll2741l+xooiwTCeaX2CA1ZuclavyMBe0/KlR21/XGsgY6hzEQZ15BdNa13Q==
   dependencies:
     aproba "^1.1.2"
     chownr "^1.1.2"
+    cmd-shim "^3.0.3"
     fs-vacuum "^1.2.10"
     graceful-fs "^4.1.11"
     iferr "^0.1.5"
@@ -14701,15 +15526,20 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-caller-file@^2.0.0, get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-own-enumerable-property-symbols@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
-  integrity sha512-09/VS4iek66Dh2bctjRkowueRJbY1JDGR1L/zRxO1Qk8Uxs6PnqaNSqalpizPT+CDjre3hnEsuzvhgomz9qYrA==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
 get-pkg-repo@^1.0.0:
   version "1.4.0"
@@ -14732,6 +15562,11 @@ get-port@^4.2.0:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
   integrity sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==
 
+get-port@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
+  integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -14747,11 +15582,6 @@ get-stdin@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
   integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
-get-stdin@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
-  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
-
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -14776,17 +15606,12 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
-getenv@0.7.0, getenv@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/getenv/-/getenv-0.7.0.tgz#39b91838707e2086fd1cf6ef8777d1c93e14649e"
-  integrity sha1-ObkYOHB+IIb9HPbvh3fRyT4UZJ4=
-
-getos@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.1.tgz#967a813cceafee0156b0483f7cffa5b3eff029c5"
-  integrity sha512-oUP1rnEhAr97rkitiszGP9EgDVYnmchgFzfqRzSkgtfv7ai6tEi7Ko8GgjNXts7VLWEqrTWyhsOKLe5C5b/Zkg==
+getos@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
+  integrity sha512-UORPzguEB/7UG5hqiZai8f0vQ7hzynMQyJLxStoQ8dPGAcmgsfXOPA4iE/fGtweHYkK+z4zc9V0g+CIFRf5HYw==
   dependencies:
-    async "2.6.1"
+    async "^3.1.0"
 
 getpass@^0.1.1:
   version "0.1.7"
@@ -14804,6 +15629,11 @@ git-config-path@^1.0.1:
     fs-exists-sync "^0.1.0"
     homedir-polyfill "^1.0.0"
 
+git-hooks-list@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/git-hooks-list/-/git-hooks-list-1.0.3.tgz#be5baaf78203ce342f2f844a9d2b03dba1b45156"
+  integrity sha512-Y7wLWcrLUXwk2noSka166byGCvhMtDRpgHdzCno1UQv/n/Hegp++a2xBWJL1lJarnKD3SWaljD+0z1ztqxuKyQ==
+
 git-raw-commits@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.0.tgz#d92addf74440c14bcc5c83ecce3fb7f8a79118b5"
@@ -14828,7 +15658,7 @@ git-repo-info@^1.4.1:
   resolved "https://registry.yarnpkg.com/git-repo-info/-/git-repo-info-1.4.1.tgz#2a072823254aaf62fcf0766007d7b6651bd41943"
   integrity sha1-KgcoIyVKr2L88HZgB9e2ZRvUGUM=
 
-git-repo-info@^2.1.0:
+git-repo-info@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/git-repo-info/-/git-repo-info-2.1.1.tgz#220ffed8cbae74ef8a80e3052f2ccb5179aed058"
   integrity sha512-8aCohiDo4jwjOwma4FmYFd3i97urZulL8XL24nIPxuE+GZnfsAyy/g2Shqx6OjUiFKUXZM+Yy+KHnOmmA3FVcg==
@@ -14870,23 +15700,18 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-github-from-package@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
-  integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
-
 github-release-from-changelog@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/github-release-from-changelog/-/github-release-from-changelog-2.1.0.tgz#7c6974862eff9ea3b5b96edffaeab711457e011e"
-  integrity sha512-3g8UfE3Ywls6NC5UlANXVfemSculsRRRU449sWCaHE7ekgdHoBE8EJwRunnWK1st5MZi7vn02aKAQ6yPdE5jMA==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/github-release-from-changelog/-/github-release-from-changelog-2.1.1.tgz#035b25d8d15521790da90d338de8d84b403d3197"
+  integrity sha512-7o9BNbAqGZ9A1lnnh9fPLpJy8ejhviogWO5MxIxCQPofYX1memFBAvOQGBUP28Iw13JUyYGacgk44riyEeHZog==
   dependencies:
-    grizzly "^3.0.3"
+    grizzly "^4.0.0"
     minimist "^1.2.0"
 
 github-slugger@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.2.1.tgz#47e904e70bf2dccd0014748142d31126cfd49508"
-  integrity sha512-SsZUjg/P03KPzQBt7OxJPasGw6NRO5uOgiZ5RGXVud5iSIZ0eNZeNp5rTwCxtavrRUa/A77j8mePVc5lEvk0KQ==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.3.0.tgz#9bd0a95c5efdfc46005e82a906ef8e2a059124c9"
+  integrity sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==
   dependencies:
     emoji-regex ">=6.0.0 <=6.1.1"
 
@@ -14927,13 +15752,13 @@ glob-parent@^3.1.0:
     path-dirname "^1.0.0"
 
 glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
   dependencies:
     is-glob "^4.0.1"
 
-glob-promise@3.4.0:
+glob-promise@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20"
   integrity sha512-q08RJ6O+eJn+dVanerAndJwIcumgbDdYiUT7zFQl3Wm1xD6fBKtah7H8ZJChj4wP+8C+QfeVy8xautR7rdmKEw==
@@ -14945,22 +15770,10 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@7.0.x:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
-  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.2"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  integrity sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==
+glob@7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -14969,10 +15782,10 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.1.4:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
-  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
+glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.0.4, glob@^7.0.6, glob@^7.1.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -15003,18 +15816,6 @@ glob@^6.0.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.4, glob@^7.0.6, glob@^7.1.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -15022,6 +15823,13 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
+global-dirs@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.0.1.tgz#acdf3bb6685bcd55cb35e8a052266569e9469201"
+  integrity sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==
+  dependencies:
+    ini "^1.3.5"
+
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -15058,7 +15866,7 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.3.0, global@^4.3.2, global@^4.4.0:
+global@^4.3.2, global@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -15072,9 +15880,9 @@ globals@^11.1.0, globals@^11.12.0, globals@^11.7.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^12.1.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.3.0.tgz#1e564ee5c4dded2ab098b0f88f24702a3c56be13"
-  integrity sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
   dependencies:
     type-fest "^0.8.1"
 
@@ -15084,24 +15892,25 @@ globals@^9.18.0:
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
 globalthis@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.0.tgz#c5fb98213a9b4595f59cf3e7074f141b4169daae"
-  integrity sha512-vcCAZTJ3r5Qcu5l8/2oyVdoFwxKgfYnMTR2vwWeux/NAVZK3PwcMaWkdUIn4GJbmKuRK7xcvDsLuK+CKcXyodg==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
+  integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
   dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    object-keys "^1.0.12"
+    define-properties "^1.1.3"
 
-globby@6.1.0, globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+globby@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.0.tgz#abfcd0630037ae174a88590132c2f6804e291072"
+  integrity sha512-3LifW9M4joGZasyYPz2A1U74zbC/45fvpXUvO/9KbSa+VV0aGZarWkfdgKyR9sExNP0t0x0ss/UMJpNpcaTspw==
   dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
+    "@types/glob" "^7.1.1"
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.0.3"
+    glob "^7.1.3"
+    ignore "^5.1.1"
+    merge2 "^1.2.3"
+    slash "^3.0.0"
 
 globby@8.0.2, globby@^8.0.1:
   version "8.0.2"
@@ -15117,9 +15926,9 @@ globby@8.0.2, globby@^8.0.1:
     slash "^1.0.0"
 
 globby@^10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543"
+  integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==
   dependencies:
     "@types/glob" "^7.1.1"
     array-union "^2.1.0"
@@ -15130,6 +15939,18 @@ globby@^10.0.1:
     merge2 "^1.2.3"
     slash "^3.0.0"
 
+globby@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.0.tgz#56fd0e9f0d4f8fb0c456f1ab0dee96e1380bc154"
+  integrity sha512-iuehFnR3xu5wBBtm4xi0dMe92Ob87ufyu/dHwpDYfbcpYpIbrO5OnS8M1vWvrBhSGEJ3/Ecj7gnX76P8YxpPEg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
@@ -15142,6 +15963,17 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 globby@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
@@ -15169,12 +16001,12 @@ globby@^9.2.0:
     slash "^2.0.0"
 
 globule@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.1.tgz#5dffb1b191f22d20797a9369b49eab4e9839696d"
-  integrity sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.1.tgz#90a25338f22b7fbeb527cee63c629aea754d33b9"
+  integrity sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==
   dependencies:
     glob "~7.1.1"
-    lodash "~4.17.10"
+    lodash "~4.17.12"
     minimatch "~3.0.2"
 
 glur@^1.1.2:
@@ -15189,11 +16021,6 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-google-maps-infobox@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz#1ea6de93c0cdf4138c2d586331835c83dcc59dc2"
-  integrity sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw==
-
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -15251,10 +16078,10 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
@@ -15269,15 +16096,16 @@ grapheme-breaker@^0.3.2:
     brfs "^1.2.0"
     unicode-trie "^0.3.1"
 
-graphiql@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.16.0.tgz#3ca3fc8bca22361d9549d5ad47e70d3fd8d79078"
-  integrity sha512-1Dfpo1+8kxxz+tyksriWgZTffBVzYiWLCuKI6xf/uPd+wWjnh2jqQ3km/Yjb4NnuaBLAWpL1beJClFE5L/YMww==
+graphiql@^0.17.5:
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.17.5.tgz#76c553fc0d8936f77e33114ac3374f1807a718ff"
+  integrity sha512-ogNsrg9qM1py9PzcIUn+C29JukOADbjIfB6zwtfui4BrpOEpDb5UZ6TjAmSL/F/8tCt4TbgwKtkSrBeLNNUrqA==
   dependencies:
     codemirror "^5.47.0"
-    codemirror-graphql "^0.11.2"
+    codemirror-graphql "^0.11.6"
     copy-to-clipboard "^3.2.0"
-    markdown-it "^8.4.0"
+    entities "^2.0.0"
+    markdown-it "^10.0.0"
     regenerator-runtime "^0.13.3"
 
 graphql-config@2.2.1:
@@ -15299,38 +16127,38 @@ graphql-import@^0.7.1:
     lodash "^4.17.4"
     resolve-from "^4.0.0"
 
-graphql-language-service-interface@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/graphql-language-service-interface/-/graphql-language-service-interface-2.3.0.tgz#584ba10e3c1235d0b83f662c046a8c2a1f22cc01"
-  integrity sha512-vH0c3tWgMQiWHyLbxqq4cHfSFfcfExW5UQMBMFuv1Ufh3gW2p1V4pllSYuwo7NN1b0RU0VU4xH1YjsVRIDIKDg==
+graphql-language-service-interface@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/graphql-language-service-interface/-/graphql-language-service-interface-2.3.3.tgz#33d2263e797dcfcac2426e00a33349d2a489edfa"
+  integrity sha512-SMUbbiHbD19ffyDrucR+vwyaKYhDcTgbBFDJu9Z4TBa5XaksmyiurB3f+pWlIkuFvogBvW3JDiiJJlUW7awivg==
   dependencies:
     graphql-config "2.2.1"
-    graphql-language-service-parser "^1.5.0"
-    graphql-language-service-types "^1.5.0"
-    graphql-language-service-utils "^2.3.0"
+    graphql-language-service-parser "^1.5.2"
+    graphql-language-service-types "^1.5.2"
+    graphql-language-service-utils "^2.3.3"
 
-graphql-language-service-parser@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/graphql-language-service-parser/-/graphql-language-service-parser-1.5.0.tgz#3de35eb1ab33ec3c3ef5b09d640dc914c0bd11be"
-  integrity sha512-DX3B6DfvKa28gJoywtnkkIUdZitWqKqBTrZ6CQV8V5wO3GzJalQKT0J+B56oDkS6MhjLt928Yu8fj63laNWfoA==
+graphql-language-service-parser@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/graphql-language-service-parser/-/graphql-language-service-parser-1.5.2.tgz#37deb56c16155cbd324fedef42ef9a3f0b38d723"
+  integrity sha512-kModfvwX5XiT+tYRhh8d6X+rb5Zq9zFQVdcoVlQJvoIW7U6SkxUAeO5Ei9OI3KOMH5r8wyfmXflBZ+xUbJySJw==
   dependencies:
     graphql-config "2.2.1"
-    graphql-language-service-types "^1.5.0"
+    graphql-language-service-types "^1.5.2"
 
-graphql-language-service-types@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/graphql-language-service-types/-/graphql-language-service-types-1.5.0.tgz#826afa555eac5d4d58cfc894d6932ef962a0d137"
-  integrity sha512-THxB15oPC56zlNVSwv7JCahuSUbI9xnUHdftjOqZOz5588qjlPw/UHWQ8V/k0/XwZvH/TwCkmnBkIRmPVb1S5Q==
+graphql-language-service-types@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/graphql-language-service-types/-/graphql-language-service-types-1.5.2.tgz#bfd3b27a45dbc2457233c73cc1f8ff5da26795f8"
+  integrity sha512-WOFHBZX1K41svohPTmhOcKg+zz27d6ULFuZ8mzkiJ9nIpGKueAPyh7/xR0VZNBUAfDzTCbE6wQZxsPl5Kvd7IA==
   dependencies:
     graphql-config "2.2.1"
 
-graphql-language-service-utils@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/graphql-language-service-utils/-/graphql-language-service-utils-2.3.0.tgz#357bc4b7e9ad32e694eacd33aae9f39495168c72"
-  integrity sha512-K/J4OdWG828g6N+TwPpExxp+qsTRhyLeiHR+addCxyhEIo8FqmSkbFsqGG3Gm2jWFdvfKSGhgk2DWeIxST4S1w==
+graphql-language-service-utils@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/graphql-language-service-utils/-/graphql-language-service-utils-2.3.3.tgz#babfffecb754920f028525c4c094bb68638370a3"
+  integrity sha512-uHLdIbQpKkE1V2WA12DRMXrUZpPD3ZKPOuH3MHlNg+j9AEe1y83chA4yP5DQqR+ARdMpefz4FJHvEjQr9alXYw==
   dependencies:
     graphql-config "2.2.1"
-    graphql-language-service-types "^1.5.0"
+    graphql-language-service-types "^1.5.2"
 
 graphql-request@^1.5.0:
   version "1.8.2"
@@ -15339,42 +16167,22 @@ graphql-request@^1.5.0:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql-tools@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-3.0.0.tgz#ff22ad15315fc268de8639d03936b911d78b9e9b"
-  integrity sha512-orcLQm0pc6dcIvFyAudgmno/akZy07bbMalTv5dj6B8uW2ZPmwIANr7pDEJoiumb67h2kZjsU9yvgTwmF0kMPQ==
-  dependencies:
-    apollo-link "1.2.1"
-    apollo-utilities "^1.0.1"
-    deprecated-decorator "^0.1.6"
-    iterall "^1.1.3"
-    uuid "^3.1.0"
-
-graphql@0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
-  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
-  dependencies:
-    iterall "^1.2.1"
-
-graphql@^14.1.1, graphql@^14.2.1:
-  version "14.5.8"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.5.8.tgz#504f3d3114cb9a0a3f359bbbcf38d9e5bf6a6b3c"
-  integrity sha512-MMwmi0zlVLQKLdGiMfWkgQD7dY/TUKt4L+zgJ/aR0Howebod3aNgP5JkgvAULiR2HPVZaP2VEElqtdidHweLkg==
-  dependencies:
-    iterall "^1.2.2"
+graphql@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.0.0.tgz#042a5eb5e2506a2e2111ce41eb446a8e570b8be9"
+  integrity sha512-ZyVO1xIF9F+4cxfkdhOJINM+51B06Friuv4M66W7HzUOeFd+vNzUn4vtswYINPi6sysjf1M2Ri/rwZALqgwbaQ==
 
-grizzly@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/grizzly/-/grizzly-3.0.4.tgz#960dddeb03d05a49e1d80c984792854f3af2c306"
-  integrity sha512-I+wP97IciZXIJJObJwyaUckOHdLl+XfjrZWI1pTO32e4gr3GLATOFhIg7gMVzK8dFi4Ue0f5CoeJd+ZMdhFQMA==
+grizzly@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/grizzly/-/grizzly-4.0.3.tgz#deb7af15928169dcc76804e5b5d9b2ac72663bfb"
+  integrity sha512-yDavF67g2zYyxq5pMYv33Dv+6snKClgJLL3+0Dk7qABp5y5VNEkgp6K7qzfp8CcriWQFBN/uRHqmFskj7fcSmA==
   dependencies:
-    "@octokit/rest" "^14.0.7"
+    "@octokit/rest" "^17.1.1"
     checkup "^1.3.0"
     debug "^4.1.0"
-    execon "^1.2.0"
     minimist "^1.2.0"
-    readjson "^1.1.0"
+    readjson "^2.0.1"
+    try-catch "^3.0.0"
 
 growly@^1.3.0:
   version "1.3.0"
@@ -15395,18 +16203,19 @@ gzip-size@5.1.1, gzip-size@^5.0.0:
     pify "^4.0.1"
 
 handle-thing@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
-  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
-handlebars@^4.0.11, handlebars@^4.0.4, handlebars@^4.0.6, handlebars@^4.1.2, handlebars@^4.3.3, handlebars@^4.4.0:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
-  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
+handlebars@4.7.6, handlebars@^4.0.4, handlebars@^4.3.3, handlebars@^4.7.3, handlebars@^4.7.6:
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
+  integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
   dependencies:
+    minimist "^1.2.5"
     neo-async "^2.6.0"
-    optimist "^0.6.1"
     source-map "^0.6.1"
+    wordwrap "^1.0.0"
   optionalDependencies:
     uglify-js "^3.1.4"
 
@@ -15415,7 +16224,15 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.1.0:
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  integrity sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
+har-validator@~5.1.0, har-validator@~5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
   integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
@@ -15423,6 +16240,11 @@ har-validator@~5.1.0:
     ajv "^6.5.5"
     har-schema "^2.0.0"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 harmony-reflect@^1.4.6:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
@@ -15539,20 +16361,14 @@ has@^1.0.0, has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hasbin@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/hasbin/-/hasbin-1.2.3.tgz#78c5926893c80215c2b568ae1fd3fcab7a2696b0"
-  integrity sha1-eMWSaJPIAhXCtWiuH9P8q3omlrA=
-  dependencies:
-    async "~1.5"
-
 hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
-  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
   dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 hash-for-dep@^1.0.2, hash-for-dep@^1.2.3, hash-for-dep@^1.4.7, hash-for-dep@^1.5.0, hash-for-dep@^1.5.1:
   version "1.5.1"
@@ -15571,6 +16387,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -15579,11 +16400,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hashids@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/hashids/-/hashids-1.1.4.tgz#e4ff92ad66b684a3bd6aace7c17d66618ee5fa21"
-  integrity sha512-U/fnTE3edW0AV92ZI/BfEluMZuVcu3MDOopsN7jS+HqDYcarQo8rXQiWlsBlm0uX48/taYSdxRsfzh2HRg5Z6w==
-
 hast-to-hyperscript@^7.0.0:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.4.tgz#7c4c037d9a8ea19b0a3fdb676a26448ad922353d"
@@ -15597,9 +16413,9 @@ hast-to-hyperscript@^7.0.0:
     web-namespaces "^1.1.2"
 
 hast-util-from-parse5@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.2.tgz#afeadc6aab41e6acfe038645bbefd4005c56a475"
-  integrity sha512-YXFjoRS7ES7PEoLx6uihtSfKTO1s3z/tzGiV5cVpsUiihduogFXubNRCzTIW3yOOGO1nws9CxPq4MbwD39Uo+w==
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.3.tgz#3089dc0ee2ccf6ec8bc416919b51a54a589e097c"
+  integrity sha512-gOc8UB99F6eWVWFtM9jUikjN7QkWxB3nY0df5Z0Zq1/Nkwl5V4hAAsl0tmwlgWl/1shlTF8DnNYLO8X6wRV9pA==
   dependencies:
     ccount "^1.0.3"
     hastscript "^5.0.0"
@@ -15608,39 +16424,39 @@ hast-util-from-parse5@^5.0.0:
     xtend "^4.0.1"
 
 hast-util-parse-selector@^2.0.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.3.tgz#57edd449103900c7f63fd9e6f694ffd7e4634719"
-  integrity sha512-nxbeqjQNxsvo/uYYAw9kij6td05YVUlf1qti09rVfbWSLT5H6wo3c+USIwX6nzXWk5kFZzXnEqO82856r0aM2Q==
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
+  integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
 
-hast-util-raw@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.1.tgz#b39539cf4b9f7ccdc131f72a583502a7911b99ee"
-  integrity sha512-iHo7G6BjRc/GU1Yun5CIEXjil0wVnIbz11C6k0JdDichSDMtYi2+NNtk6YN7EOP0JfPstX30d3pRLfaJv5CkdA==
+hast-util-raw@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.2.tgz#62288f311ec2f35e066a30d5e0277f963ad43a67"
+  integrity sha512-3ReYQcIHmzSgMq8UrDZHFL0oGlbuVGdLKs8s/Fe8BfHFAyZDrdv1fy/AGn+Fim8ZuvAHcJ61NQhVMtyfHviT/g==
   dependencies:
     hast-util-from-parse5 "^5.0.0"
     hast-util-to-parse5 "^5.0.0"
-    html-void-elements "^1.0.1"
+    html-void-elements "^1.0.0"
     parse5 "^5.0.0"
     unist-util-position "^3.0.0"
     web-namespaces "^1.0.0"
-    xtend "^4.0.1"
+    xtend "^4.0.0"
     zwitch "^1.0.0"
 
 hast-util-to-parse5@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.1.tgz#cabf2dbe9ed988a5128fc708457b37cdf535a2e8"
-  integrity sha512-ivCeAd5FCXr7bapJIVsWMnx/EmbjkkW2TU2hd1prq+jGwiaUoK+FcpjyPNwsC5ogzCwWO669tOqIovGeLc/ntg==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.2.tgz#09d27bee9ba9348ea05a6cfcc44e02f9083969b6"
+  integrity sha512-ZgYLJu9lYknMfsBY0rBV4TJn2xiwF1fXFFjbP6EE7S0s5mS8LIKBVWzhA1MeIs1SWW6GnnE4In6c3kPb+CWhog==
   dependencies:
     hast-to-hyperscript "^7.0.0"
     property-information "^5.0.0"
     web-namespaces "^1.0.0"
-    xtend "^4.0.1"
+    xtend "^4.0.0"
     zwitch "^1.0.0"
 
 hastscript@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.1.tgz#71726ee1e97220575d1f29a8e937387d99d48275"
-  integrity sha512-xHo1Hkcqd0LlWNuDL3/BxwhgAGp3d7uEvCMgCTrBY+zsOooPPH+8KAvW8PCgl+GB8H3H44nfSaF0A4BQ+4xlYg==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
+  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
   dependencies:
     comma-separated-tokens "^1.0.0"
     hast-util-parse-selector "^2.0.0"
@@ -15700,10 +16516,15 @@ 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.13.0:
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
-  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+highlight.js@^9.6.0:
+  version "9.18.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
+  integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
+
+highlight.js@~9.15.0, highlight.js@~9.15.1:
+  version "9.15.10"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
+  integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
 
 hmac-drbg@^1.0.0:
   version "1.0.1"
@@ -15724,20 +16545,10 @@ hoek@4.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
   integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
 
-hoek@6.x.x:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
-  integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
-
-hoist-non-react-statics@^2.3.1:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
-  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
-
-hoist-non-react-statics@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
-  integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
 
@@ -15761,10 +16572,17 @@ hoopy@^0.1.4:
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
-hosted-git-info@^2.1.4, hosted-git-info@^2.6.0, hosted-git-info@^2.7.1:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
-  integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
+hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+
+hosted-git-info@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.4.tgz#be4973eb1fd2737b11c9c7c19380739bb249f60d"
+  integrity sha512-4oT62d2jwSDBbLLFLZE+1vPuQ1h8p9wjrJ8Mqx5TjsyWmBMV5B13eJqn8pvluqubLf3cJPTfiYCIwNwDNmzScQ==
+  dependencies:
+    lru-cache "^5.1.1"
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -15791,7 +16609,7 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
-html-element-map@^1.0.0:
+html-element-map@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.2.0.tgz#dfbb09efe882806af63d990cf6db37993f099f22"
   integrity sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==
@@ -15805,36 +16623,48 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
-html-entities@^1.2.0, html-entities@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
-  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
 
-html-loader@^0.5.1, html-loader@^0.5.5:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
-  integrity sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==
+html-entities@^1.2.0, html-entities@^1.2.1, html-entities@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-loader@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-1.1.0.tgz#91915f4d274caa9d46d1c3dc847cd82bfc037dbd"
+  integrity sha512-zwLbEgy+i7sgIYTlxI9M7jwkn29IvdsV6f1y7a2aLv/w8l1RigVk0PFijBZLLFsdi2gvL8sf2VJhTjLlfnK8sA==
   dependencies:
-    es6-templates "^0.2.3"
-    fastparse "^1.1.1"
-    html-minifier "^3.5.8"
-    loader-utils "^1.1.0"
-    object-assign "^4.1.1"
+    html-minifier-terser "^5.0.5"
+    htmlparser2 "^4.1.0"
+    loader-utils "^2.0.0"
+    parse-srcset "^1.0.2"
+    schema-utils "^2.6.5"
 
-html-minifier-terser@^5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.0.2.tgz#0e67a0b062ae1dd0719fc73199479298f807ae16"
-  integrity sha512-VAaitmbBuHaPKv9bj47XKypRhgDxT/cDLvsPiiF7w+omrN3K0eQhpigV9Z1ilrmHa9e0rOYcD6R/+LCDADGcnQ==
+html-minifier-terser@^5.0.1, html-minifier-terser@^5.0.5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
   dependencies:
-    camel-case "^3.0.0"
-    clean-css "^4.2.1"
-    commander "^4.0.0"
+    camel-case "^4.1.1"
+    clean-css "^4.2.3"
+    commander "^4.1.1"
     he "^1.2.0"
-    param-case "^2.1.1"
+    param-case "^3.0.3"
     relateurl "^0.2.7"
-    terser "^4.3.9"
+    terser "^4.6.3"
 
-html-minifier@^3.2.3, html-minifier@^3.5.20, html-minifier@^3.5.8:
+html-minifier@^3.2.3, html-minifier@^3.5.20:
   version "3.5.21"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
   integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
@@ -15862,22 +16692,21 @@ html-tags@^3.1.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
   integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
 
-html-void-elements@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.4.tgz#95e8bb5ecd6b88766569c2645f2b5f1591db9ba5"
-  integrity sha512-yMk3naGPLrfvUV9TdDbuYXngh/TpHbA6TrOw3HL9kS8yhwx7i309BReNg7CbAJXGE+UMJ6je5OqJ7lC63o6YuQ==
+html-void-elements@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
+  integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
 
-html-webpack-plugin@4.0.0-alpha.2:
-  version "4.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-alpha.2.tgz#7745967e389a57a098e26963f328ebe4c19b598d"
-  integrity sha512-tyvhjVpuGqD7QYHi1l1drMQTg5i+qRxpQEGbdnYFREgOKy7aFDf/ocQ/V1fuEDlQx7jV2zMap3Hj2nE9i5eGXw==
+html-webpack-plugin@4.0.0-beta.11:
+  version "4.0.0-beta.11"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
+  integrity sha512-4Xzepf0qWxf8CGg7/WQM5qBB2Lc/NFI7MhU59eUDTkuQp3skZczH4UA1d6oQyDEIoMDgERVhRyTdtUPZ5s5HBg==
   dependencies:
-    "@types/tapable" "1.0.2"
-    html-minifier "^3.2.3"
-    loader-utils "^1.1.0"
-    lodash "^4.17.10"
-    pretty-error "^2.0.2"
-    tapable "^1.0.0"
+    html-minifier-terser "^5.0.1"
+    loader-utils "^1.2.3"
+    lodash "^4.17.15"
+    pretty-error "^2.1.1"
+    tapable "^1.1.3"
     util.promisify "1.0.0"
 
 html-webpack-plugin@4.0.0-beta.5:
@@ -15892,11 +16721,27 @@ html-webpack-plugin@4.0.0-beta.5:
     tapable "^1.1.0"
     util.promisify "1.0.0"
 
-html-webpack-plugin@^4.0.0-beta.2:
-  version "4.0.0-beta.11"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
-  integrity sha512-4Xzepf0qWxf8CGg7/WQM5qBB2Lc/NFI7MhU59eUDTkuQp3skZczH4UA1d6oQyDEIoMDgERVhRyTdtUPZ5s5HBg==
+html-webpack-plugin@^3.0.0, html-webpack-plugin@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s=
+  dependencies:
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    tapable "^1.0.0"
+    toposort "^1.0.0"
+    util.promisify "1.0.0"
+
+html-webpack-plugin@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.3.0.tgz#53bf8f6d696c4637d5b656d3d9863d89ce8174fd"
+  integrity sha512-C0fzKN8yQoVLTelcJxZfJCE+aAvQiY2VUf3UuKrR4a9k5UMWYOtpDLsaXwATbcVCnI05hUS7L9ULQHWLZhyi3w==
   dependencies:
+    "@types/html-minifier-terser" "^5.0.0"
+    "@types/tapable" "^1.0.5"
+    "@types/webpack" "^4.41.8"
     html-minifier-terser "^5.0.1"
     loader-utils "^1.2.3"
     lodash "^4.17.15"
@@ -15909,6 +16754,24 @@ htmlescape@^1.1.0:
   resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
   integrity sha1-OgPtwiFLyjtmQko+eVk0lQnLA1E=
 
+htmlhint@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/htmlhint/-/htmlhint-0.11.0.tgz#d2a315ac7e3371b2bb08373841e85e814b9ccbe5"
+  integrity sha512-uXuRyVhQa0HlNmZg5LJ1BRJvRq5f7IJL/34tItHhZr9re15pwaqAuLUAIcqtwd1bLUCE++7HVPtR+NSReFW0iA==
+  dependencies:
+    async "2.6.1"
+    colors "1.3.2"
+    commander "2.17.1"
+    glob "7.1.3"
+    parse-glob "3.0.4"
+    path-parse "1.0.6"
+    request "2.88.0"
+    strip-json-comments "2.0.1"
+    xml "1.0.1"
+  optionalDependencies:
+    csslint "^1.0.5"
+    jshint "^2.9.6"
+
 htmljs-parser@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/htmljs-parser/-/htmljs-parser-2.7.1.tgz#405c40fd617bf25314828a3f1ecf9327c67dda4f"
@@ -15931,7 +16794,18 @@ htmlnano@^0.2.2:
     terser "^4.3.9"
     uncss "^0.17.2"
 
-htmlparser2@^3.10.1, htmlparser2@^3.3.0, htmlparser2@^3.9.1, htmlparser2@^3.9.2:
+htmlparser2@3.8.x:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
+  integrity sha1-mWwosZFRaovoZQGn15dX5ccMEGg=
+  dependencies:
+    domelementtype "1"
+    domhandler "2.3"
+    domutils "1.5"
+    entities "1.0"
+    readable-stream "1.1"
+
+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==
@@ -15943,6 +16817,16 @@ htmlparser2@^3.10.1, htmlparser2@^3.3.0, htmlparser2@^3.9.1, htmlparser2@^3.9.2:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
+htmlparser2@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78"
+  integrity sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+    domutils "^2.0.0"
+    entities "^2.0.0"
+
 http-auth@3.1.x:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/http-auth/-/http-auth-3.1.3.tgz#945cfadd66521eaf8f7c84913d377d7b15f24e31"
@@ -15959,25 +16843,15 @@ http-cache-semantics@3.8.1, http-cache-semantics@^3.8.1:
   integrity sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==
 
 http-cache-semantics@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz#495704773277eeef6e43f9ab2c2c7d259dda25c5"
-  integrity sha512-TcIMG3qeVLgDr1TEd2XvHaTnMPwYQUQMIBLy+5pLSDKYFc7UIqj39w8EGzZkaxoLv/l2K8HaI0t5AVA+YYgUew==
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
 
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
   integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
 
-http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
-  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -16000,10 +16874,20 @@ http-errors@1.7.3, http-errors@^1.7.3, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
-"http-parser-js@>=0.4.0 <0.4.11":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
-  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
+  integrity sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==
 
 http-proxy-agent@^2.1.0:
   version "2.1.0"
@@ -16013,7 +16897,16 @@ http-proxy-agent@^2.1.0:
     agent-base "4"
     debug "3.1.0"
 
-http-proxy-middleware@0.19.1, http-proxy-middleware@^0.19.1:
+http-proxy-agent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
+http-proxy-middleware@0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
   integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
@@ -16023,10 +16916,20 @@ http-proxy-middleware@0.19.1, http-proxy-middleware@^0.19.1:
     lodash "^4.17.11"
     micromatch "^3.1.10"
 
-http-proxy@^1.13.1, http-proxy@^1.17.0, http-proxy@^1.18.0, http-proxy@^1.8.1:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
-  integrity sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==
+http-proxy-middleware@^0.19.1:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.2.tgz#ee73dcc8348165afefe8de2ff717751d181608ee"
+  integrity sha512-aYk1rTKqLTus23X3L96LGNCGNgWpG4cG0XoZIT1GUPhhulEHX/QalnO6Vbo+WmKWi4AL2IidjuC0wZtbpg0yhQ==
+  dependencies:
+    http-proxy "^1.18.1"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy@^1.13.1, http-proxy@^1.17.0, http-proxy@^1.18.0, http-proxy@^1.18.1, http-proxy@^1.8.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
     eventemitter3 "^4.0.0"
     follow-redirects "^1.0.0"
@@ -16039,27 +16942,29 @@ http-server@^0.10.0:
   dependencies:
     colors "1.0.3"
     corser "~2.0.0"
-    ecstatic "^2.0.0"
-    http-proxy "^1.8.1"
-    opener "~1.4.0"
-    optimist "0.6.x"
-    portfinder "^1.0.13"
-    union "~0.4.3"
-
-http-server@^0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.11.1.tgz#2302a56a6ffef7f9abea0147d838a5e9b6b6a79b"
-  integrity sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==
-  dependencies:
-    colors "1.0.3"
-    corser "~2.0.0"
-    ecstatic "^3.0.0"
+    ecstatic "^2.0.0"
     http-proxy "^1.8.1"
     opener "~1.4.0"
     optimist "0.6.x"
     portfinder "^1.0.13"
     union "~0.4.3"
 
+http-server@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.12.3.tgz#ba0471d0ecc425886616cb35c4faf279140a0d37"
+  integrity sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==
+  dependencies:
+    basic-auth "^1.0.3"
+    colors "^1.4.0"
+    corser "^2.0.1"
+    ecstatic "^3.3.2"
+    http-proxy "^1.18.0"
+    minimist "^1.2.5"
+    opener "^1.5.1"
+    portfinder "^1.0.25"
+    secure-compare "3.0.1"
+    union "~0.5.0"
+
 http-signature@~0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-0.10.1.tgz#4fbdac132559aa8323121e540779c0a012b27e66"
@@ -16078,6 +16983,11 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+http-status-codes@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/http-status-codes/-/http-status-codes-1.4.0.tgz#6e4c15d16ff3a9e2df03b89f3a55e1aae05fb477"
+  integrity sha512-JrT3ua+WgH8zBD3HEJYbeEgnuQaAnUeRRko/YojPAJjGmIfGD3KPU/asLdsLwKjfxOmQe5nXMQ0pt/7MyapVbQ==
+
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
@@ -16091,13 +17001,13 @@ https-proxy-agent@^2.2.1, https-proxy-agent@^2.2.3:
     agent-base "^4.3.0"
     debug "^3.1.0"
 
-https-proxy-agent@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz#b8c286433e87602311b01c8ea34413d856a4af81"
-  integrity sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==
+https-proxy-agent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
+  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
   dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
+    agent-base "5"
+    debug "4"
 
 https@^1.0.0:
   version "1.0.0"
@@ -16121,22 +17031,21 @@ humps@^2.0.1:
   resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
   integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
 
-husky@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
-  integrity sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==
+husky@^4.0.10:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.2.5.tgz#2b4f7622673a71579f901d9885ed448394b5fa36"
+  integrity sha512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ==
   dependencies:
-    chalk "^2.4.2"
+    chalk "^4.0.0"
     ci-info "^2.0.0"
-    cosmiconfig "^5.2.1"
-    execa "^1.0.0"
-    get-stdin "^7.0.0"
+    compare-versions "^3.6.0"
+    cosmiconfig "^6.0.0"
+    find-versions "^3.2.0"
     opencollective-postinstall "^2.0.2"
     pkg-dir "^4.2.0"
     please-upgrade-node "^3.2.0"
-    read-pkg "^5.2.0"
-    run-node "^1.0.0"
     slash "^3.0.0"
+    which-pm-runs "^1.0.0"
 
 hyperlinker@^1.0.0:
   version "1.0.0"
@@ -16150,24 +17059,17 @@ i18next@^17.0.16:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4.23:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
-  integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.0.tgz#59cdde0a2a297cc2aeb0c6445a195ee89f127550"
-  integrity sha512-NnEhI9hIEKHOzJ4f697DMz9IQEXr/MMJ5w64vN2/4Ai+wRnvV7SBrL0KLoRlwaKVghOc7LQ5YkPLuX146b6Ydw==
+iconv-lite@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.1.tgz#b2425d3c7b18f7219f2ca663d103bddb91718d64"
+  integrity sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
@@ -16190,11 +17092,6 @@ identity-obj-proxy@3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-idx@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/idx/-/idx-2.4.0.tgz#e89e6650c889a44bf889f79d47f40fe09b4eeaa3"
-  integrity sha512-FnV6fXF1/cXvam/OXAz98v3GbhQVws+ecMEVLxyQ1aXgK2nooTkTDqex5Lks84wiCsS1So6QtwwCYT6H+vIKkw==
-
 ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
@@ -16205,7 +17102,12 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
+
+ignore-walk@3.0.3, ignore-walk@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
   integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
@@ -16222,10 +17124,10 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.0.0, ignore@^5.1.1:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf"
-  integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==
+ignore@^5.0.0, ignore@^5.1.1, ignore@^5.1.4:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.6.tgz#643194ad4bf2712f37852e386b6998eff0db2106"
+  integrity sha512-cgXgkypZBcCnOgSihyeqbo6gjIaIyDqPQB7Ra4vhE9m6kigdGoQDMHjviFhRZo3IMlRy6yElosoviMs5YxZXUA==
 
 ignoring-watcher@^1.0.5:
   version "1.1.0"
@@ -16235,28 +17137,24 @@ ignoring-watcher@^1.0.5:
     chokidar "^1.4.3"
     raptor-util "^1.0.7"
 
-iltorb@^2.0.1:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/iltorb/-/iltorb-2.4.4.tgz#7ec303bbbd8c0cd4d44a847eb6c6d8490f9c7433"
-  integrity sha512-7Qk6O7TK3rSWVRVRkPehcNTSN+P2i7MsG9pWmw6iVw/W6NcoNj0rFKOuBDM6fbZV6NNGuUW3JBRem6Ozn4KXhg==
-  dependencies:
-    detect-libc "^1.0.3"
-    nan "^2.14.0"
-    npmlog "^4.1.2"
-    prebuild-install "^5.3.2"
-    which-pm-runs "^1.0.0"
+image-size@^0.5.1, image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
-image-size@^0.6.0, image-size@^0.6.3:
+image-size@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
-  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+image-source-loader@^0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/image-source-loader/-/image-source-loader-0.6.5.tgz#5c8f803d3f354d947e860893200f4561b8bbe9a8"
+  integrity sha512-mvDrYkpECf4sXih54ATE4ONqVFlIHpE+ovpmaJYApaq5BK5myUoPEVdDKRfxdMrmvRfxvSI0PEHYzvYItMzO5g==
+  dependencies:
+    image-size "^0.5.1"
 
-immediate@^3.2.2:
+immediate@^3.2.3, immediate@~3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"
   integrity sha1-0UD6j2FGWb1lQSMwl92qwlzdmRw=
@@ -16314,33 +17212,41 @@ import-local@2.0.0, import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
 in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
-  integrity sha1-4g/146KvwmkDILbcVSaCqcf631E=
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c"
+  integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
+  dependencies:
+    repeating "^2.0.0"
 
-indent-string@3.2.0, indent-string@^3.0.0:
+indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
   integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
 
-indent-string@4.0.0, indent-string@^4.0.0:
+indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indent-string@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
-  dependencies:
-    repeating "^2.0.0"
-
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -16369,7 +17275,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -16426,25 +17332,6 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-inquirer@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
-  integrity sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==
-  dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.1.0"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^5.5.2"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
 inquirer@6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
@@ -16464,10 +17351,10 @@ inquirer@6.5.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.1.tgz#8bfb7a5ac02dac6ff641ac4c5ff17da112fcdb42"
-  integrity sha512-uxNHBeQhRXIoHWTSNYUFhQVrHYFThIt6IVo2fFmSe8aBwdR3/w6b58hJpiL/fMukFkvGzjg+hSxFtwvVmKZmXw==
+inquirer@7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
+  integrity sha512-Bu5Td5+j11sCkqfqmUTiwv+tWisMtP0L7Q8WrqA2C/BbBhy1YTdFrvjjlrKq8oagA/tLQBski2Gcx/Sqyi2qSQ==
   dependencies:
     ansi-escapes "^4.2.1"
     chalk "^2.4.2"
@@ -16478,29 +17365,28 @@ inquirer@6.5.1:
     lodash "^4.17.15"
     mute-stream "0.0.8"
     run-async "^2.2.0"
-    rxjs "^6.4.0"
+    rxjs "^6.5.3"
     string-width "^4.1.0"
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^3.0.6:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
-  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
+inquirer@7.1.0, inquirer@^7.0.0, inquirer@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.1.0.tgz#1298a01859883e17c7264b82870ae1034f92dd29"
+  integrity sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==
   dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    cli-cursor "^3.1.0"
     cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.15"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.5.3"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
     through "^2.3.6"
 
 inquirer@^6, inquirer@^6.2.0, inquirer@^6.2.2:
@@ -16522,25 +17408,6 @@ inquirer@^6, inquirer@^6.2.0, inquirer@^6.2.2:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
-  integrity sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
 insert-module-globals@^7.0.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.2.0.tgz#ec87e5b42728479e327bd5c5c71611ddfb4752ba"
@@ -16562,7 +17429,7 @@ inside@^1.0.0:
   resolved "https://registry.yarnpkg.com/inside/-/inside-1.0.0.tgz#db45e993573cdb3db70b9832e8285bad46424770"
   integrity sha1-20Xpk1c82z23C5gy6ChbrUZCR3A=
 
-internal-ip@4.3.0, internal-ip@^4.2.0, internal-ip@^4.3.0:
+internal-ip@^4.2.0, internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
   integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
@@ -16570,6 +17437,15 @@ internal-ip@4.3.0, internal-ip@^4.2.0, internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+internal-slot@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
+  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    has "^1.0.3"
+    side-channel "^1.0.2"
+
 interpret@1.2.0, interpret@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -16588,18 +17464,13 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@2.2.4, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.3, 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==
   dependencies:
     loose-envify "^1.0.0"
 
-inversify@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/inversify/-/inversify-5.0.1.tgz#500d709b1434896ce5a0d58915c4a4210e34fb6e"
-  integrity sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ==
-
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
@@ -16615,26 +17486,21 @@ ip-regex@^2.1.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
   integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
+ip-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.1.0.tgz#5ad62f685a14edb421abebc2fff8db94df67b455"
+  integrity sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==
+
 ip@1.1.5, ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
-  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
-
-ipaddr.js@^1.9.0:
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-irregular-plurals@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-2.0.0.tgz#39d40f05b00f656d0b7fa471230dd3b714af2872"
-  integrity sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==
-
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -16675,10 +17541,10 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-alphabetical@1.0.3, is-alphabetical@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.3.tgz#eb04cc47219a8895d8450ace4715abff2258a1f8"
-  integrity sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==
+is-alphabetical@1.0.4, is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
 
 is-alphanumeric@^1.0.0:
   version "1.0.0"
@@ -16686,9 +17552,9 @@ is-alphanumeric@^1.0.0:
   integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
 
 is-alphanumerical@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz#57ae21c374277b3defe0274c640a5704b8f6657c"
-  integrity sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
   dependencies:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
@@ -16698,11 +17564,6 @@ is-arguments@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
   integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
 
-is-array-buffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-1.0.1.tgz#a4fac0cf325c1fad3f713e2b109eb241a907cf27"
-  integrity sha512-lj035IqdAwsodoRGs9/8+Kn3HPoz9CTuZbcw63afugWonxigvUVeHY5d6Ve1O+s1N3RCk7txo2TIWQLbU0SuNA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -16727,10 +17588,10 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
-  integrity sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=
+is-boolean-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
 
 is-buffer@^1.0.2, is-buffer@^1.1.0, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
@@ -16742,25 +17603,25 @@ is-buffer@^2.0.0, is-buffer@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
   integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
 
-is-callable@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
-  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
-
-is-ci@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
-  dependencies:
-    ci-info "^1.5.0"
+is-callable@^1.1.4, is-callable@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
+  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-ci@^2.0.0:
+is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
     ci-info "^2.0.0"
 
+is-ci@^1.0.10:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+  dependencies:
+    ci-info "^1.5.0"
+
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -16773,18 +17634,6 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
-is-color@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-color/-/is-color-1.0.2.tgz#e92add2af9c73b23a970fb83ee8174ce3c1edb27"
-  integrity sha512-MEQ6XmTGNbYYeEPKUmHRrfkN6HyI2d0LLlR/UtZ18ckxniKBL3FXMuy0wXCkyak2qNEPldN5JWv/AofJdBYz/w==
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -16800,14 +17649,14 @@ is-data-descriptor@^1.0.0:
     kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
-  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
 is-decimal@^1.0.0, is-decimal@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.3.tgz#381068759b9dc807d8c0dc0bfbae2b68e1da48b7"
-  integrity sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
 
 is-descriptor@^0.1.0:
   version "0.1.6"
@@ -16832,7 +17681,12 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-dom@^1.0.9:
+is-docker@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
+  integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
+
+is-dom@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.1.0.tgz#af1fced292742443bb59ca3f76ab5e80907b4e8a"
   integrity sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==
@@ -16865,6 +17719,14 @@ is-expression@^3.0.0:
     acorn "~4.0.2"
     object-assign "^4.0.1"
 
+is-expression@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-4.0.0.tgz#c33155962abf21d0afd2552514d67d2ec16fd2ab"
+  integrity sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==
+  dependencies:
+    acorn "^7.1.1"
+    object-assign "^4.1.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"
@@ -16888,11 +17750,9 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
-  dependencies:
-    number-is-nan "^1.0.0"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
@@ -16911,10 +17771,10 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-  integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
+is-function@^1.0.1, is-function@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
 
 is-generator-fn@^2.0.0:
   version "2.1.0"
@@ -16948,14 +17808,9 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
     is-extglob "^2.1.1"
 
 is-hexadecimal@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz#e8a426a69b6d31470d3a33a47bb825cda02506ee"
-  integrity sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==
-
-is-hidden@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-hidden/-/is-hidden-1.1.2.tgz#6497d48ec5affc7da0f11a3c0dadceb6752e8edd"
-  integrity sha512-kytBeNVW2QTIqZdJBDKIjP+EkUTzDT07rsc111w/gxqR6wK3ODkOswcpxgED6HU6t7fEhOxqojVZ2a2kU9rj+A==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
 is-html@^1.1.0:
   version "1.1.0"
@@ -16972,20 +17827,48 @@ is-installed-globally@0.1.0, is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-installed-globally@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
+  dependencies:
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"
+
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-negated-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
   integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
 
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+  integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
+
 is-npm@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
   integrity sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==
 
-is-number-object@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
-  integrity sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=
+is-npm@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
+  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
+
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
 is-number@^2.1.0:
   version "2.1.0"
@@ -17076,16 +17959,16 @@ is-path-inside@^3.0.1, is-path-inside@^3.0.2:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
   integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
 
+is-plain-obj@2.1.0, is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
-is-plain-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.0.0.tgz#7fd1a7f1b69e160cde9181d2313f445c68aa2679"
-  integrity sha512-EYisGhpgSCwspmIuRHGjROWTon2Xp8Z7U03Wubk/bTL5TTRC5R1rGVgyjzBrk9+ULdH6cRD06KRcw/xfqhVYKQ==
-
 is-plain-object@3.0.0, is-plain-object@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
@@ -17105,15 +17988,20 @@ is-posix-bracket@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
   integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
 
+is-potential-custom-element-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
+  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+
 is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
   integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
 
 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=
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
 is-redirect@^1.0.0:
   version "1.0.0"
@@ -17127,12 +18015,12 @@ is-reference@^1.1.0:
   dependencies:
     "@types/estree" "0.0.39"
 
-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=
+is-regex@^1.0.3, is-regex@^1.0.4, is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
   dependencies:
-    has "^1.0.1"
+    has "^1.0.3"
 
 is-regexp@^1.0.0:
   version "1.0.0"
@@ -17168,6 +18056,11 @@ is-root@2.1.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-ssh@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.1.tgz#f349a8cadd24e65298037a522cf7520f2e81a0f3"
@@ -17185,10 +18078,10 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
-  integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
 is-subset@^0.1.1:
   version "0.1.1"
@@ -17242,6 +18135,13 @@ is-unc-path@^1.0.0:
   dependencies:
     unc-path-regex "^0.1.2"
 
+is-url-superb@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-url-superb/-/is-url-superb-3.0.0.tgz#b9a1da878a1ac73659047d1e6f4ef22c209d3e25"
+  integrity sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==
+  dependencies:
+    url-regex "^5.0.0"
+
 is-url@^1.2.2, is-url@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
@@ -17253,9 +18153,9 @@ is-utf8@^0.2.0:
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
 is-whitespace-character@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac"
-  integrity sha512-SNPgMLz9JzPccD3nPctcj8sZlX9DAMJSKH8bP7Z6bohCwuNgX8xbWr1eTAYXX9Vpi/aSn8Y1akL9WgM3t43YNQ==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
 
 is-window@^1.0.2:
   version "1.0.2"
@@ -17273,19 +18173,21 @@ is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
 is-word-character@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.3.tgz#264d15541cbad0ba833d3992c34e6b40873b08aa"
-  integrity sha512-0wfcrFgOOOBdgRNT9H33xe6Zi6yhX/uoc4U8NBZGeQQB0ctU1dnlNTyL9JM2646bHDTpsDm1Brb3VPoCIMrd/A==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
 
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
-is-wsl@^2.0.0, is-wsl@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
-  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
+is-wsl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
 
 is-yarn-global@^0.3.0:
   version "0.3.0"
@@ -17307,6 +18209,11 @@ isarray@2.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
   integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
 
+isarray@^2.0.1, isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.3.tgz#5d6def3edebf6e8ca8cae9c30183a804b5f8be80"
@@ -17356,38 +18263,15 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-instrumenter-loader@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz#9957bd59252b373fae5c52b7b5188e6fde2a0949"
-  integrity sha512-a5SPObZgS0jB/ixaKSMdn6n/gXSrK2S6q/UfRJBT3e6gQmVjwZROTODQsYW5ZNwOu78hG62Y3fWlebaVOL0C+w==
-  dependencies:
-    convert-source-map "^1.5.0"
-    istanbul-lib-instrument "^1.7.3"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-
-istanbul-lib-coverage@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
-  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
-
 istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
   integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
 
-istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.7.3:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
-  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
-  dependencies:
-    babel-generator "^6.18.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.2.1"
-    semver "^5.3.0"
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
 
 istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
   version "3.3.0"
@@ -17402,6 +18286,16 @@ istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
     istanbul-lib-coverage "^2.0.5"
     semver "^6.0.0"
 
+istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^2.0.4:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
@@ -17411,6 +18305,15 @@ istanbul-lib-report@^2.0.4:
     make-dir "^2.1.0"
     supports-color "^6.1.0"
 
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
 istanbul-lib-source-maps@^3.0.1:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
@@ -17422,12 +18325,29 @@ istanbul-lib-source-maps@^3.0.1:
     rimraf "^2.6.3"
     source-map "^0.6.1"
 
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
 istanbul-reports@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
-  integrity sha512-SKi4rnMyLBKe0Jy2uUdx28h8oG7ph2PPuQPvIAh31d+Ci+lSiEu4C+h3oBPuJ9+mPKhOyW0M8gY4U5NM1WLeXA==
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
+  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
+  dependencies:
+    html-escaper "^2.0.0"
+
+istanbul-reports@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
   dependencies:
-    handlebars "^4.1.2"
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
 
 istextorbinary@2.1.0:
   version "2.1.0"
@@ -17443,13 +18363,31 @@ isurl@^1.0.0-alpha5:
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
   integrity sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==
   dependencies:
-    has-to-string-tag-x "^1.2.0"
-    is-object "^1.0.1"
+    has-to-string-tag-x "^1.2.0"
+    is-object "^1.0.1"
+
+iterate-iterator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
+  integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
+
+iterate-value@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
+  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
+  dependencies:
+    es-get-iterator "^1.0.2"
+    iterate-iterator "^1.0.1"
 
-iterall@1.2.2, iterall@^1.1.3, iterall@^1.2.1, iterall@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
-  integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==
+jake@^10.6.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.7.1.tgz#b8d13e2cf472be150cd5b0081399e22923f4bf2e"
+  integrity sha512-FUkLZXms1LSTQop5EJBdXVzbM0q6yYWMM4vo/TiLQeHJ4UMJVO8DBTZFiAgMBJctin9q92xnr2vdH7Wrpn7tTQ==
+  dependencies:
+    async "0.9.x"
+    chalk "^2.4.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
 
 jasmine-core@~2.8.0:
   version "2.8.0"
@@ -17461,12 +18399,12 @@ jasmine-core@~3.5.0:
   resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.5.0.tgz#132c23e645af96d85c8bca13c8758b18429fc1e4"
   integrity sha512-nCeAiw37MIMA9w9IXso7bRaLl+c/ef3wnxsoSAlYrzS+Ot0zTG6nU8G/cIfGkqpkjX2wNaIW9RFG0TwIFnG6bA==
 
-jasmine-spec-reporter@~4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-4.2.1.tgz#1d632aec0341670ad324f92ba84b4b32b35e9e22"
-  integrity sha512-FZBoZu7VE5nR7Nilzy+Np8KuVIOxF4oXDPDknehCYBDE080EnlPu0afdZNmpGDBRCUBv3mj5qgqCRmk6W/K8vg==
+jasmine-spec-reporter@~5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-5.0.2.tgz#b61288ab074ad440dc2477c4d42840b0e74a6b95"
+  integrity sha512-6gP1LbVgJ+d7PKksQBc2H0oDGNRQI3gKUsWlswKaQ2fif9X5gzhQcgM5+kiJGCQVurOG09jqNhk7payggyp5+g==
   dependencies:
-    colors "1.1.2"
+    colors "1.4.0"
 
 jasmine@2.8.0:
   version "2.8.0"
@@ -17482,16 +18420,16 @@ jasminewd2@^2.1.0:
   resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
   integrity sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=
 
-java-properties@^0.2.9:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
-  integrity sha512-CpKJh9VRNhS+XqZtg1UMejETGEiqwCGDC/uwPEEQwc2nfdbSm73SIE29TplG2gLYuBOOTNDqxzG6A9NtEPLt0w==
-
 java-properties@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-1.0.2.tgz#ccd1fa73907438a5b5c38982269d0e771fe78211"
   integrity sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==
 
+javascript-stringify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
+  integrity sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==
+
 jest-changed-files@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
@@ -17501,7 +18439,25 @@ jest-changed-files@^24.9.0:
     execa "^1.0.0"
     throat "^4.0.0"
 
-jest-cli@^24.7.1, jest-cli@^24.8.0, jest-cli@^24.9.0:
+jest-changed-files@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.5.0.tgz#141cc23567ceb3f534526f8614ba39421383634c"
+  integrity sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    execa "^3.2.0"
+    throat "^5.0.0"
+
+jest-changed-files@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.0.1.tgz#1334630c6a1ad75784120f39c3aa9278e59f349f"
+  integrity sha512-q8LP9Sint17HaE2LjxQXL+oYWW/WeeXMPE2+Op9X3mY8IEGFVc14xRxFjUuXUbcPAlDLhtWdIEt59GdQbn76Hw==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    execa "^4.0.0"
+    throat "^5.0.0"
+
+jest-cli@^24.7.1, jest-cli@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
   integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
@@ -17520,7 +18476,46 @@ jest-cli@^24.7.1, jest-cli@^24.8.0, jest-cli@^24.9.0:
     realpath-native "^1.1.0"
     yargs "^13.3.0"
 
-jest-config@^24.8.0, jest-config@^24.9.0:
+jest-cli@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.5.4.tgz#b9f1a84d1301a92c5c217684cb79840831db9f0d"
+  integrity sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==
+  dependencies:
+    "@jest/core" "^25.5.4"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^25.5.4"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    prompts "^2.0.1"
+    realpath-native "^2.0.0"
+    yargs "^15.3.1"
+
+jest-cli@^26.0.0, jest-cli@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.0.1.tgz#3a42399a4cbc96a519b99ad069a117d955570cac"
+  integrity sha512-pFLfSOBcbG9iOZWaMK4Een+tTxi/Wcm34geqZEqrst9cZDkTQ1LZ2CnBrTlHWuYAiTMFr0EQeK52ScyFU8wK+w==
+  dependencies:
+    "@jest/core" "^26.0.1"
+    "@jest/test-result" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^26.0.1"
+    jest-util "^26.0.1"
+    jest-validate "^26.0.1"
+    prompts "^2.0.1"
+    yargs "^15.3.1"
+
+jest-config@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
   integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
@@ -17543,7 +18538,56 @@ jest-config@^24.8.0, jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@*, jest-diff@^24.3.0, jest-diff@^24.8.0, jest-diff@^24.9.0:
+jest-config@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.5.4.tgz#38e2057b3f976ef7309b2b2c8dcd2a708a67f02c"
+  integrity sha512-SZwR91SwcdK6bz7Gco8qL7YY2sx8tFJYzvg216DLihTWf+LKY/DoJXpM9nTzYakSyfblbqeU48p/p7Jzy05Atg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^25.5.4"
+    "@jest/types" "^25.5.0"
+    babel-jest "^25.5.1"
+    chalk "^3.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^25.5.0"
+    jest-environment-node "^25.5.0"
+    jest-get-type "^25.2.6"
+    jest-jasmine2 "^25.5.4"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    micromatch "^4.0.2"
+    pretty-format "^25.5.0"
+    realpath-native "^2.0.0"
+
+jest-config@^26.0.0, jest-config@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.0.1.tgz#096a3d4150afadf719d1fab00e9a6fb2d6d67507"
+  integrity sha512-9mWKx2L1LFgOXlDsC4YSeavnblN6A4CPfXFiobq+YYLaBMymA/SczN7xYTSmLaEYHZOcB98UdoN4m5uNt6tztg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    babel-jest "^26.0.1"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.0.1"
+    jest-environment-node "^26.0.1"
+    jest-get-type "^26.0.0"
+    jest-jasmine2 "^26.0.1"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.0.1"
+    jest-util "^26.0.1"
+    jest-validate "^26.0.1"
+    micromatch "^4.0.2"
+    pretty-format "^26.0.1"
+
+jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -17553,12 +18597,25 @@ jest-diff@*, jest-diff@^24.3.0, jest-diff@^24.8.0, jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-docblock@23.2.0, jest-docblock@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-23.2.0.tgz#f085e1f18548d99fdd69b20207e6fd55d91383a7"
-  integrity sha1-8IXh8YVI2Z/dabICB+b9VdkTg6c=
+jest-diff@^25.2.1, jest-diff@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
+  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
   dependencies:
-    detect-newline "^2.1.0"
+    chalk "^3.0.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
+
+jest-diff@^26.0.0, jest-diff@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.0.1.tgz#c44ab3cdd5977d466de69c46929e0e57f89aa1de"
+  integrity sha512-odTcHyl5X+U+QsczJmOjWw5tPvww+y9Yim5xzqxVl/R1j4z71+fHW4g8qu1ugMmKdFdxw+AtQgs5mupPnzcIBQ==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.0.0"
+    jest-get-type "^26.0.0"
+    pretty-format "^26.0.1"
 
 jest-docblock@^24.3.0:
   version "24.9.0"
@@ -17567,6 +18624,20 @@ jest-docblock@^24.3.0:
   dependencies:
     detect-newline "^2.1.0"
 
+jest-docblock@^25.3.0:
+  version "25.3.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.3.0.tgz#8b777a27e3477cd77a168c05290c471a575623ef"
+  integrity sha512-aktF0kCar8+zxRHxQZwxMy70stc9R1mOmrLsT5VO3pIT0uzGRSDAXxSlz4NqQWpuLjPpuMhPRl7H+5FRsvIQAg==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
 jest-each@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
@@ -17578,10 +18649,32 @@ jest-each@^24.9.0:
     jest-util "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-each@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.5.0.tgz#0c3c2797e8225cb7bec7e4d249dcd96b934be516"
+  integrity sha512-QBogUxna3D8vtiItvn54xXde7+vuzqRrEeaw8r1s+1TG9eZLVJE5ZkKoSUlqFwRjnlaA4hyKGiu9OlkFIuKnjA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
+    jest-util "^25.5.0"
+    pretty-format "^25.5.0"
+
+jest-each@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.0.1.tgz#633083061619302fc90dd8f58350f9d77d67be04"
+  integrity sha512-OTgJlwXCAR8NIWaXFL5DBbeS4QIYPuNASkzSwMCJO+ywo9BEa6TqkaSWsfR7VdbMLdgYJqSfQcIyjJCNwl5n4Q==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    jest-get-type "^26.0.0"
+    jest-util "^26.0.1"
+    pretty-format "^26.0.1"
+
 jest-emotion@^10.0.17:
-  version "10.0.17"
-  resolved "https://registry.yarnpkg.com/jest-emotion/-/jest-emotion-10.0.17.tgz#e65a881771f522c123d61721d9bb0095dcb6cf40"
-  integrity sha512-Z0SqaeXGr9dshhY5z9ctfPiw2qTw5BRbCsbBWziTtSdiLnqFprj2NuF38lMrpSMFKjNY+q+rioRI5gVyQZrrxA==
+  version "10.0.32"
+  resolved "https://registry.yarnpkg.com/jest-emotion/-/jest-emotion-10.0.32.tgz#8e36a871911f78841701224a95b7c535c65b70b6"
+  integrity sha512-hW3IwWc47qRuxnGsWFGY6uIMX8F4YBzq+Qci3LAYUCUqUBNP+1DU1L5Nudo9Ry0NHVFOqDnDeip1p2UR0kVMwA==
   dependencies:
     "@babel/runtime" "^7.5.5"
     "@types/jest" "^23.0.2"
@@ -17604,7 +18697,19 @@ jest-environment-jsdom-fourteen@0.1.0:
     jest-util "^24.5.0"
     jsdom "^14.0.0"
 
-jest-environment-jsdom-thirteen@^1.0.0, jest-environment-jsdom-thirteen@^1.0.1:
+jest-environment-jsdom-fourteen@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-1.0.1.tgz#4cd0042f58b4ab666950d96532ecb2fc188f96fb"
+  integrity sha512-DojMX1sY+at5Ep+O9yME34CdidZnO3/zfPh8UW+918C5fIZET5vCjfkegixmsi7AtdYfkr4bPlIzmWnlvQkP7Q==
+  dependencies:
+    "@jest/environment" "^24.3.0"
+    "@jest/fake-timers" "^24.3.0"
+    "@jest/types" "^24.3.0"
+    jest-mock "^24.0.0"
+    jest-util "^24.0.0"
+    jsdom "^14.1.0"
+
+jest-environment-jsdom-thirteen@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom-thirteen/-/jest-environment-jsdom-thirteen-1.0.1.tgz#113e3c8aed945dadbc826636fa21139c69567bb5"
   integrity sha512-Zi7OuKF7HMLlBvomitd5eKp5Ykc4Wvw0d+i+cpbCaE+7kmvL24SO4ssDmKrT++aANXR4T8+pmoJIlav5gr2peQ==
@@ -17613,7 +18718,7 @@ jest-environment-jsdom-thirteen@^1.0.0, jest-environment-jsdom-thirteen@^1.0.1:
     jest-util "^24.0.0"
     jsdom "^13.0.0"
 
-jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.8.0, jest-environment-jsdom@^24.9.0:
+jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
   integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
@@ -17625,6 +18730,30 @@ jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.8.0, jest-environment
     jest-util "^24.9.0"
     jsdom "^11.5.1"
 
+jest-environment-jsdom@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.5.0.tgz#dcbe4da2ea997707997040ecf6e2560aec4e9834"
+  integrity sha512-7Jr02ydaq4jaWMZLY+Skn8wL5nVIYpWvmeatOHL3tOcV3Zw8sjnPpx+ZdeBfc457p8jCR9J6YCc+Lga0oIy62A==
+  dependencies:
+    "@jest/environment" "^25.5.0"
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    jsdom "^15.2.1"
+
+jest-environment-jsdom@^26.0.0, jest-environment-jsdom@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.0.1.tgz#217690852e5bdd7c846a4e3b50c8ffd441dfd249"
+  integrity sha512-u88NJa3aptz2Xix2pFhihRBAatwZHWwSiRLBDBQE1cdJvDjPvv7ZGA0NQBxWwDDn7D0g1uHqxM8aGgfA9Bx49g==
+  dependencies:
+    "@jest/environment" "^26.0.1"
+    "@jest/fake-timers" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    jest-mock "^26.0.1"
+    jest-util "^26.0.1"
+    jsdom "^16.2.2"
+
 jest-environment-node@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
@@ -17636,6 +18765,29 @@ jest-environment-node@^24.9.0:
     jest-mock "^24.9.0"
     jest-util "^24.9.0"
 
+jest-environment-node@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.5.0.tgz#0f55270d94804902988e64adca37c6ce0f7d07a1"
+  integrity sha512-iuxK6rQR2En9EID+2k+IBs5fCFd919gVVK5BeND82fYeLWPqvRcFNPKu9+gxTwfB5XwBGBvZ0HFQa+cHtIoslA==
+  dependencies:
+    "@jest/environment" "^25.5.0"
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    semver "^6.3.0"
+
+jest-environment-node@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.0.1.tgz#584a9ff623124ff6eeb49e0131b5f7612b310b13"
+  integrity sha512-4FRBWcSn5yVo0KtNav7+5NH5Z/tEgDLp7VRQVS5tCouWORxj+nI+1tOLutM07Zb2Qi7ja+HEDoOUkjBSWZg/IQ==
+  dependencies:
+    "@jest/environment" "^26.0.1"
+    "@jest/fake-timers" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    jest-mock "^26.0.1"
+    jest-util "^26.0.1"
+
 jest-enzyme@^7.0.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/jest-enzyme/-/jest-enzyme-7.1.2.tgz#91a10b2d3be1b56c0d65b34286e5bdc41ab4ba3d"
@@ -17645,49 +18797,20 @@ jest-enzyme@^7.0.2:
     enzyme-to-json "^3.3.0"
     jest-environment-enzyme "^7.1.2"
 
-jest-expo@^33.0.2:
-  version "33.0.2"
-  resolved "https://registry.yarnpkg.com/jest-expo/-/jest-expo-33.0.2.tgz#6e4c595162047eca2bbb9fcf214a067af3f21b0e"
-  integrity sha512-OSk8hVm9D8YSw8R7vOOjoERQIqlsAwNgQzqpFdNQROy2/TNzntGBy+8hLsic7y8h2CDXmKVsxvBtiKD4CTOZRg==
-  dependencies:
-    babel-jest "^24.7.1"
-    jest "^24.7.1"
-    json5 "^2.1.0"
-    lodash "^4.5.0"
-    react-test-renderer "^16.8.6"
-    whatwg-fetch "^3.0.0"
-
 jest-get-type@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
-jest-haste-map@23.5.0:
-  version "23.5.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.5.0.tgz#d4ca618188bd38caa6cb20349ce6610e194a8065"
-  integrity sha512-bt9Swigb6KZ6ZQq/fQDUwdUeHenVvZ6G/lKwJjwRGp+Fap8D4B3bND3FaeJg7vXVsLX8hXshRArbVxLop/5wLw==
-  dependencies:
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.1.11"
-    invariant "^2.2.4"
-    jest-docblock "^23.2.0"
-    jest-serializer "^23.0.1"
-    jest-worker "^23.2.0"
-    micromatch "^2.3.11"
-    sane "^2.0.0"
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
 
-jest-haste-map@24.0.0-alpha.6:
-  version "24.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.0.0-alpha.6.tgz#fb2c785080f391b923db51846b86840d0d773076"
-  integrity sha512-+NO2HMbjvrG8BC39ieLukdpFrcPhhjCJGhpbHodHNZygH1Tt06WrlNYGpZtWKx/zpf533tCtMQXO/q59JenjNw==
-  dependencies:
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.1.11"
-    invariant "^2.2.4"
-    jest-serializer "^24.0.0-alpha.6"
-    jest-worker "^24.0.0-alpha.6"
-    micromatch "^2.3.11"
-    sane "^3.0.0"
+jest-get-type@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.0.0.tgz#381e986a718998dbfafcd5ec05934be538db4039"
+  integrity sha512-zRc1OAPnnws1EVfykXOj19zo2EMw5Hi6HLbFCSjpuJiXtOWAYIjNsHVSbpQ8bDX7L5BGYGI8m+HmKdjHYFF0kg==
 
 jest-haste-map@^24.9.0:
   version "24.9.0"
@@ -17708,21 +18831,61 @@ jest-haste-map@^24.9.0:
   optionalDependencies:
     fsevents "^1.2.7"
 
-jest-image-snapshot@^2.8.2:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-2.11.1.tgz#5fb44d4908c45b59834fecba1fd0c7733b1f0532"
-  integrity sha512-v3juoanGClyGGMPOz+V/ek1SYuBwdqJ8Gnzv4KIl5WFlEvVyw69N31hJrMcixwYp0LAZDbxZcuw4GTSvpgkyaA==
+jest-haste-map@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.5.1.tgz#1df10f716c1d94e60a1ebf7798c9fb3da2620943"
+  integrity sha512-dddgh9UZjV7SCDQUrQ+5t9yy8iEgKc1AKqZR9YDww8xsVOtzPQSMVLDChc21+g29oTRexb9/B0bIlZL+sWmvAQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    "@types/graceful-fs" "^4.1.2"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-serializer "^25.5.0"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+    which "^2.0.2"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-haste-map@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.0.1.tgz#40dcc03c43ac94d25b8618075804d09cd5d49de7"
+  integrity sha512-J9kBl/EdjmDsvyv7CiyKY5+DsTvVOScenprz/fGqfLg/pm1gdjbwwQ98nW0t+OIt+f+5nAVaElvn/6wP5KO7KA==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    "@types/graceful-fs" "^4.1.2"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-serializer "^26.0.0"
+    jest-util "^26.0.1"
+    jest-worker "^26.0.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+    which "^2.0.2"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-image-snapshot@^3.0.1, jest-image-snapshot@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-3.1.0.tgz#eefc91f1570c426c368ae8a8890fef82d678fd5a"
+  integrity sha512-mzGCCyZlEyQIr6AnKi3KvbFvgOI7445qGPIoyhGm7Qmxw0YLTJMN+rH1WdGcs56ATx0CVM8aMjQMx4dDovlwtQ==
   dependencies:
     chalk "^1.1.3"
     get-stdin "^5.0.1"
     glur "^1.1.2"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
-    pixelmatch "^4.0.2"
-    pngjs "^3.3.3"
+    pixelmatch "^5.1.0"
+    pngjs "^3.4.0"
     rimraf "^2.6.2"
 
-jest-jasmine2@^24.8.0, jest-jasmine2@^24.9.0:
+jest-jasmine2@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
   integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
@@ -17744,6 +18907,52 @@ jest-jasmine2@^24.8.0, jest-jasmine2@^24.9.0:
     pretty-format "^24.9.0"
     throat "^4.0.0"
 
+jest-jasmine2@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.5.4.tgz#66ca8b328fb1a3c5364816f8958f6970a8526968"
+  integrity sha512-9acbWEfbmS8UpdcfqnDO+uBUgKa/9hcRh983IHdM+pKmJPL77G0sWAAK0V0kr5LK3a8cSBfkFSoncXwQlRZfkQ==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/source-map" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    co "^4.6.0"
+    expect "^25.5.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^25.5.0"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-runtime "^25.5.4"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    pretty-format "^25.5.0"
+    throat "^5.0.0"
+
+jest-jasmine2@^26.0.0, jest-jasmine2@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.0.1.tgz#947c40ee816636ba23112af3206d6fa7b23c1c1c"
+  integrity sha512-ILaRyiWxiXOJ+RWTKupzQWwnPaeXPIoLS5uW41h18varJzd9/7I0QJGqg69fhTT1ev9JpSSo9QtalriUN0oqOg==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.0.1"
+    "@jest/source-map" "^26.0.0"
+    "@jest/test-result" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^26.0.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.0.1"
+    jest-matcher-utils "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-runtime "^26.0.1"
+    jest-snapshot "^26.0.1"
+    jest-util "^26.0.1"
+    pretty-format "^26.0.1"
+    throat "^5.0.0"
+
 jest-leak-detector@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
@@ -17752,12 +18961,23 @@ jest-leak-detector@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-localstorage-mock@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jest-localstorage-mock/-/jest-localstorage-mock-2.4.0.tgz#c6073810735dd3af74020ea6c3885ec1cc6d0d13"
-  integrity sha512-/mC1JxnMeuIlAaQBsDMilskC/x/BicsQ/BXQxEOw+5b1aGZkkOAqAF3nu8yq449CpzGtp5jJ5wCmDNxLgA2m6A==
+jest-leak-detector@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.5.0.tgz#2291c6294b0ce404241bb56fe60e2d0c3e34f0bb"
+  integrity sha512-rV7JdLsanS8OkdDpZtgBf61L5xZ4NnYLBq72r6ldxahJWWczZjXawRsoHyXzibM5ed7C2QRjpp6ypgwGdKyoVA==
+  dependencies:
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
 
-jest-matcher-utils@^24.8.0, jest-matcher-utils@^24.9.0:
+jest-leak-detector@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.0.1.tgz#79b19ab3f41170e0a78eb8fa754a116d3447fb8c"
+  integrity sha512-93FR8tJhaYIWrWsbmVN1pQ9ZNlbgRpfvrnw5LmgLRX0ckOJ8ut/I35CL7awi2ecq6Ca4lL59bEK9hr7nqoHWPA==
+  dependencies:
+    jest-get-type "^26.0.0"
+    pretty-format "^26.0.1"
+
+jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
   integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
@@ -17767,6 +18987,26 @@ jest-matcher-utils@^24.8.0, jest-matcher-utils@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-matcher-utils@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.5.0.tgz#fbc98a12d730e5d2453d7f1ed4a4d948e34b7867"
+  integrity sha512-VWI269+9JS5cpndnpCwm7dy7JtGQT30UHfrnM3mXl22gHGt/b7NkjBqXfbhZ8V4B7ANUsjK18PlSBmG0YH7gjw==
+  dependencies:
+    chalk "^3.0.0"
+    jest-diff "^25.5.0"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
+
+jest-matcher-utils@^26.0.0, jest-matcher-utils@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.0.1.tgz#12e1fc386fe4f14678f4cc8dbd5ba75a58092911"
+  integrity sha512-PUMlsLth0Azen8Q2WFTwnSkGh2JZ8FYuwijC8NR47vXKpsrKmA1wWvgcj1CquuVfcYiDEdj985u5Wmg7COEARw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.0.1"
+    jest-get-type "^26.0.0"
+    pretty-format "^26.0.1"
+
 jest-message-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
@@ -17781,6 +19021,34 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
+  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
+jest-message-util@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.0.1.tgz#07af1b42fc450b4cc8e90e4c9cef11b33ce9b0ac"
+  integrity sha512-CbK8uQREZ8umUfo8+zgIfEt+W7HAHjQCoRaNs4WxKGhAYBGwEyvxuK81FXa7VeB9pwDEXeeKOB2qcsNVCAvB7Q==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^26.0.1"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
+
 jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
@@ -17788,28 +19056,32 @@ jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.9.0:
   dependencies:
     "@jest/types" "^24.9.0"
 
+jest-mock@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.5.0.tgz#a91a54dabd14e37ecd61665d6b6e06360a55387a"
+  integrity sha512-eXWuTV8mKzp/ovHc5+3USJMYsTBhyQ+5A1Mak35dey/RG8GlM4YWVylZuGgVXinaW6tpvk/RSecmF37FKUlpXA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+
+jest-mock@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.0.1.tgz#7fd1517ed4955397cf1620a771dc2d61fad8fd40"
+  integrity sha512-MpYTBqycuPYSY6xKJognV7Ja46/TeRbAZept987Zp+tuJvMN0YBWyyhG9mXyYQaU3SBI0TUlSaO5L3p49agw7Q==
+  dependencies:
+    "@jest/types" "^26.0.1"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
   integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
 
-jest-preset-angular@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-6.0.2.tgz#a5c79d6c1b1f894fa12f9dd07bab9506ef9737c1"
-  integrity sha512-uhrllY41tUvkeR41aX9bU5w3/EvvmwZiJ3UitDhRSEJL2Jvq2N/xKlmw7qvlZoGZnciFjOUJ2WDKv5fmCrvnQA==
-  dependencies:
-    "@types/jest" "^23.3.1"
-    jest-zone-patch ">=0.0.9 <1.0.0"
-    ts-jest "~23.1.3"
-
-jest-preset-angular@^7.1.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-7.1.1.tgz#b51fc910e5abea91701fcd89532823ae5990450b"
-  integrity sha512-/uJUi9IHoCxtB6aH6I+llpHjyfGfP2q32lcBCUKKk16v1uYKXvj1Nfdlvfvu/eqjZVoKEDLP+Ejup4bbsc0gAA==
+jest-preset-angular@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-8.2.0.tgz#270c220b4fec2a85d3b4d339d68bcf9a014c9487"
+  integrity sha512-UNmYGju5AVNSQdICBkGD3JhKH0jjUipY8yUQMGM1eUg8XYgFBir0uUuZd7t7Tfg0ibl95jQmvCaDIh3PUL4ySw==
   dependencies:
-    jest-environment-jsdom-thirteen "^1.0.0"
-    pretty-format "^24.0.0"
-    ts-jest "^24.0.0"
+    pretty-format "^25.0.0"
+    ts-jest "^25.0.0"
 
 jest-raw-loader@^1.0.1:
   version "1.0.1"
@@ -17821,6 +19093,16 @@ jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
   integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
 
+jest-regex-util@^25.2.1, jest-regex-util@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
+  integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
+
+jest-regex-util@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
 jest-resolve-dependencies@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
@@ -17830,6 +19112,24 @@ jest-resolve-dependencies@^24.9.0:
     jest-regex-util "^24.3.0"
     jest-snapshot "^24.9.0"
 
+jest-resolve-dependencies@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.5.4.tgz#85501f53957c8e3be446e863a74777b5a17397a7"
+  integrity sha512-yFmbPd+DAQjJQg88HveObcGBA32nqNZ02fjYmtL16t1xw9bAttSn5UGRRhzMHIQbsep7znWvAvnD4kDqOFM0Uw==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-snapshot "^25.5.1"
+
+jest-resolve-dependencies@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.0.1.tgz#607ba7ccc32151d185a477cff45bf33bce417f0b"
+  integrity sha512-9d5/RS/ft0vB/qy7jct/qAhzJsr6fRQJyGAFigK3XD4hf9kIbEH5gks4t4Z7kyMRhowU6HWm/o8ILqhaHdSqLw==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.0.1"
+
 jest-resolve@24.7.1:
   version "24.7.1"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.7.1.tgz#e4150198299298380a75a9fd55043fa3b9b17fde"
@@ -17852,6 +19152,35 @@ jest-resolve@24.9.0, jest-resolve@^24.9.0:
     jest-pnp-resolver "^1.2.1"
     realpath-native "^1.1.0"
 
+jest-resolve@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.5.1.tgz#0e6fbcfa7c26d2a5fe8f456088dc332a79266829"
+  integrity sha512-Hc09hYch5aWdtejsUZhA+vSzcotf7fajSlPA6EZPE1RmPBAD39XtJhvHWFStid58iit4IPDLI/Da4cwdDmAHiQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    browser-resolve "^1.11.3"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.1"
+    read-pkg-up "^7.0.1"
+    realpath-native "^2.0.0"
+    resolve "^1.17.0"
+    slash "^3.0.0"
+
+jest-resolve@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.0.1.tgz#21d1ee06f9ea270a343a8893051aeed940cde736"
+  integrity sha512-6jWxk0IKZkPIVTvq6s72RH735P8f9eCJW3IM5CX/SJFeKq1p2cZx0U49wf/SdMlhaB/anann5J2nCJj6HrbezQ==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.1"
+    jest-util "^26.0.1"
+    read-pkg-up "^7.0.1"
+    resolve "^1.17.0"
+    slash "^3.0.0"
+
 jest-runner@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
@@ -17877,6 +19206,56 @@ jest-runner@^24.9.0:
     source-map-support "^0.5.6"
     throat "^4.0.0"
 
+jest-runner@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.5.4.tgz#ffec5df3875da5f5c878ae6d0a17b8e4ecd7c71d"
+  integrity sha512-V/2R7fKZo6blP8E9BL9vJ8aTU4TH2beuqGNxHbxi6t14XzTb+x90B3FRgdvuHm41GY8ch4xxvf0ATH4hdpjTqg==
+  dependencies:
+    "@jest/console" "^25.5.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^25.5.4"
+    jest-docblock "^25.3.0"
+    jest-haste-map "^25.5.1"
+    jest-jasmine2 "^25.5.4"
+    jest-leak-detector "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-resolve "^25.5.1"
+    jest-runtime "^25.5.4"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runner@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.0.1.tgz#ea03584b7ae4bacfb7e533d680a575a49ae35d50"
+  integrity sha512-CApm0g81b49Znm4cZekYQK67zY7kkB4umOlI2Dx5CwKAzdgw75EN+ozBHRvxBzwo1ZLYZ07TFxkaPm+1t4d8jA==
+  dependencies:
+    "@jest/console" "^26.0.1"
+    "@jest/environment" "^26.0.1"
+    "@jest/test-result" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^26.0.1"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.0.1"
+    jest-jasmine2 "^26.0.1"
+    jest-leak-detector "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-resolve "^26.0.1"
+    jest-runtime "^26.0.1"
+    jest-util "^26.0.1"
+    jest-worker "^26.0.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
 jest-runtime@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
@@ -17906,22 +19285,97 @@ jest-runtime@^24.9.0:
     strip-bom "^3.0.0"
     yargs "^13.3.0"
 
-jest-serializer@23.0.1, jest-serializer@^23.0.1:
-  version "23.0.1"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"
-  integrity sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU=
+jest-runtime@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.5.4.tgz#dc981fe2cb2137abcd319e74ccae7f7eeffbfaab"
+  integrity sha512-RWTt8LeWh3GvjYtASH2eezkc8AehVoWKK20udV6n3/gC87wlTbE1kIA+opCvNWyyPeBs6ptYsc6nyHUb1GlUVQ==
+  dependencies:
+    "@jest/console" "^25.5.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/globals" "^25.5.2"
+    "@jest/source-map" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^25.5.4"
+    jest-haste-map "^25.5.1"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.3.1"
+
+jest-runtime@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.0.1.tgz#a121a6321235987d294168e282d52b364d7d3f89"
+  integrity sha512-Ci2QhYFmANg5qaXWf78T2Pfo6GtmIBn2rRaLnklRyEucmPccmCKvS9JPljcmtVamsdMmkyNkVFb9pBTD6si9Lw==
+  dependencies:
+    "@jest/console" "^26.0.1"
+    "@jest/environment" "^26.0.1"
+    "@jest/fake-timers" "^26.0.1"
+    "@jest/globals" "^26.0.1"
+    "@jest/source-map" "^26.0.0"
+    "@jest/test-result" "^26.0.1"
+    "@jest/transform" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^26.0.1"
+    jest-haste-map "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-mock "^26.0.1"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.0.1"
+    jest-snapshot "^26.0.1"
+    jest-util "^26.0.1"
+    jest-validate "^26.0.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.3.1"
 
-jest-serializer@24.0.0-alpha.6:
-  version "24.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.0.0-alpha.6.tgz#27d2fee4b1a85698717a30c3ec2ab80767312597"
-  integrity sha512-IPA5T6/GhlE6dedSk7Cd7YfuORnYjN0VD5iJVFn1Q81RJjpj++Hen5kJbKcg547vXsQ1TddV15qOA/zeIfOCLw==
+jest-serializer-html@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer-html/-/jest-serializer-html-7.0.0.tgz#9db553a69dea3498412a44c80d74a3770ff62936"
+  integrity sha512-o3S2j/5yA9emV8+QRHqJ41SznW5cZ1PXIAk+aSToJffdhuaiSoDsa4IgqV8lNOHPp4cP0LNT7k5KjXjD+l6SGg==
+  dependencies:
+    diffable-html "^4.0.0"
 
-jest-serializer@^24.0.0-alpha.6, jest-serializer@^24.9.0:
+jest-serializer@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
   integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
-jest-snapshot@^24.1.0, jest-snapshot@^24.9.0:
+jest-serializer@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.5.0.tgz#a993f484e769b4ed54e70e0efdb74007f503072b"
+  integrity sha512-LxD8fY1lByomEPflwur9o4e2a5twSQ7TaVNLlFUuToIdoJuBt8tzHfCsZ42Ok6LkKXWzFWf3AGmheuLAA7LcCA==
+  dependencies:
+    graceful-fs "^4.2.4"
+
+jest-serializer@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.0.0.tgz#f6c521ddb976943b93e662c0d4d79245abec72a3"
+  integrity sha512-sQGXLdEGWFAE4wIJ2ZaIDb+ikETlUirEOBsLXdoBbeLhTHkZUJwgk3+M8eyFizhM6le43PDCCKPA1hzkSDo4cQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+
+jest-snapshot@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
   integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
@@ -17940,12 +19394,61 @@ jest-snapshot@^24.1.0, jest-snapshot@^24.9.0:
     pretty-format "^24.9.0"
     semver "^6.2.0"
 
-jest-specific-snapshot@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz#425fe524b25df154aa39f97fa6fe9726faaac273"
-  integrity sha512-aXaNqBg/svwEpY5iQEzEHc5I85cUBKgfeVka9KmpznxLnatpjiqjr7QLb/BYNYlsrZjZzgRHTjQJ+Svx+dbdvg==
+jest-snapshot@^25.1.0, jest-snapshot@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.5.1.tgz#1a2a576491f9961eb8d00c2e5fd479bc28e5ff7f"
+  integrity sha512-C02JE1TUe64p2v1auUJ2ze5vcuv32tkv9PyhEb318e8XOKF7MOyXdJ7kdjbvrp3ChPLU2usI7Rjxs97Dj5P0uQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/prettier" "^1.19.0"
+    chalk "^3.0.0"
+    expect "^25.5.0"
+    graceful-fs "^4.2.4"
+    jest-diff "^25.5.0"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-resolve "^25.5.1"
+    make-dir "^3.0.0"
+    natural-compare "^1.4.0"
+    pretty-format "^25.5.0"
+    semver "^6.3.0"
+
+jest-snapshot@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.0.1.tgz#1baa942bd83d47b837a84af7fcf5fd4a236da399"
+  integrity sha512-jxd+cF7+LL+a80qh6TAnTLUZHyQoWwEHSUFJjkw35u3Gx+BZUNuXhYvDqHXr62UQPnWo2P6fvQlLjsU93UKyxA==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.0.1"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.0.1"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.0.1"
+    jest-get-type "^26.0.0"
+    jest-matcher-utils "^26.0.1"
+    jest-message-util "^26.0.1"
+    jest-resolve "^26.0.1"
+    make-dir "^3.0.0"
+    natural-compare "^1.4.0"
+    pretty-format "^26.0.1"
+    semver "^7.3.2"
+
+jest-specific-snapshot@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-3.0.0.tgz#c203a6bccc572832aea0278feeaa3350567a306f"
+  integrity sha512-dMEDxj762XleVVUYnxHbRypWOxRwV3HsolUZugISyFu8jE6Xz58TkeKeXxRfT9oG6U8zxPggrH+1MSNVyLwGqg==
+  dependencies:
+    jest-snapshot "^25.1.0"
+
+jest-teamcity@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/jest-teamcity/-/jest-teamcity-1.7.0.tgz#31401d3b353c62809c2a51aac215c4986df088f8"
+  integrity sha512-pj1s59qoMOMaOdCNvptgCyHLSkL6R2A35XCG+iljRLKXdrCfewAQpzPwDZDlcfxJQi4s7eSYZTDeVfbJl6yYVw==
   dependencies:
-    jest-snapshot "^24.1.0"
+    lodash "^4.17.15"
 
 jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.9.0:
   version "24.9.0"
@@ -17965,6 +19468,28 @@ jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
+jest-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
+  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
+
+jest-util@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.0.1.tgz#72c4c51177b695fdd795ca072a6f94e3d7cef00a"
+  integrity sha512-byQ3n7ad1BO/WyFkYvlWQHTsomB6GIewBh8tlGtusiylAlaxQ1UpS0XYH0ngOyhZuHVLN79Qvl6/pMiDMSSG1g==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
+
 jest-validate@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
@@ -17977,14 +19502,38 @@ jest-validate@^24.9.0:
     leven "^3.1.0"
     pretty-format "^24.9.0"
 
+jest-validate@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.5.0.tgz#fb4c93f332c2e4cf70151a628e58a35e459a413a"
+  integrity sha512-okUFKqhZIpo3jDdtUXUZ2LxGUZJIlfdYBvZb1aczzxrlyMlqdnnws9MOxezoLGhSaFc2XYaHNReNQfj5zPIWyQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    camelcase "^5.3.1"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
+    leven "^3.1.0"
+    pretty-format "^25.5.0"
+
+jest-validate@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.0.1.tgz#a62987e1da5b7f724130f904725e22f4e5b2e23c"
+  integrity sha512-u0xRc+rbmov/VqXnX3DlkxD74rHI/CfS5xaV2VpeaVySjbb1JioNVOyly5b56q2l9ZKe7bVG5qWmjfctkQb0bA==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.0.0"
+    leven "^3.1.0"
+    pretty-format "^26.0.1"
+
 jest-vue-preprocessor@^1.5.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/jest-vue-preprocessor/-/jest-vue-preprocessor-1.7.0.tgz#c4496d3731efe0001278a1ecbf83254ea5f10050"
-  integrity sha512-8iGenPDG68r8oZIYNW5BPdbKx2YyVnjEkhQLbTF0c/znmDdPcaExPoNFki89U4mIUJBW/pSdDe+pH1GVM/itlA==
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/jest-vue-preprocessor/-/jest-vue-preprocessor-1.7.1.tgz#607724622ce321c538fe37e04ec12b67188ec9bb"
+  integrity sha512-3JStGaNMuSzuo6OytlnUjtF+L9iYwKMu+BCrQYPXu3DEpzmKuuY3bZiTUz6+x9NbElKz2NMQNxysIgNZaT/QqA==
   dependencies:
     babel-plugin-transform-runtime "6.23.0"
     find-babel-config "1.2.0"
-    vue-property-decorator "8.2.2"
+    vue-property-decorator "8.3.0"
 
 jest-watch-typeahead@0.3.0:
   version "0.3.0"
@@ -17998,30 +19547,31 @@ jest-watch-typeahead@0.3.0:
     string-length "^2.0.0"
     strip-ansi "^5.0.0"
 
-jest-watch-typeahead@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.0.tgz#4d5356839a85421588ce452d2440bf0d25308397"
-  integrity sha512-bJR/HPNgOQnkmttg1OkBIrYFAYuxFxExtgQh67N2qPvaWGVC8TCkedRNPKBfmZfVXFD3u2sCH+9OuS5ApBfCgA==
+jest-watch-typeahead@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.2.tgz#e5be959698a7fa2302229a5082c488c3c8780a4a"
+  integrity sha512-f7VpLebTdaXs81rg/oj4Vg/ObZy2QtGzAmGLNsqUS5G5KtSN68tFcIsbvNODfNyQxU78g7D8x77o3bgfBTR+2Q==
   dependencies:
     ansi-escapes "^4.2.1"
     chalk "^2.4.1"
+    jest-regex-util "^24.9.0"
     jest-watcher "^24.3.0"
     slash "^3.0.0"
     string-length "^3.1.0"
     strip-ansi "^5.0.0"
 
-jest-watch-typeahead@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.2.tgz#e5be959698a7fa2302229a5082c488c3c8780a4a"
-  integrity sha512-f7VpLebTdaXs81rg/oj4Vg/ObZy2QtGzAmGLNsqUS5G5KtSN68tFcIsbvNODfNyQxU78g7D8x77o3bgfBTR+2Q==
+jest-watch-typeahead@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.5.0.tgz#903dba6112f22daae7e90b0a271853f7ff182008"
+  integrity sha512-4r36w9vU8+rdg48hj0Z7TvcSqVP6Ao8dk04grlHQNgduyCB0SqrI0xWIl85ZhXrzYvxQ0N5H+rRLAejkQzEHeQ==
   dependencies:
     ansi-escapes "^4.2.1"
-    chalk "^2.4.1"
-    jest-regex-util "^24.9.0"
-    jest-watcher "^24.3.0"
+    chalk "^3.0.0"
+    jest-regex-util "^25.2.1"
+    jest-watcher "^25.2.4"
     slash "^3.0.0"
     string-length "^3.1.0"
-    strip-ansi "^5.0.0"
+    strip-ansi "^6.0.0"
 
 jest-watcher@^24.3.0, jest-watcher@^24.9.0:
   version "24.9.0"
@@ -18036,21 +19586,39 @@ jest-watcher@^24.3.0, jest-watcher@^24.9.0:
     jest-util "^24.9.0"
     string-length "^2.0.0"
 
-jest-worker@23.2.0, jest-worker@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.2.0.tgz#faf706a8da36fae60eb26957257fa7b5d8ea02b9"
-  integrity sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=
+jest-watcher@^25.2.4, jest-watcher@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.5.0.tgz#d6110d101df98badebe435003956fd4a465e8456"
+  integrity sha512-XrSfJnVASEl+5+bb51V0Q7WQx65dTSk7NL4yDdVjPnRNpM0hG+ncFmDYJo9O8jaSRcAitVbuVawyXCRoxGrT5Q==
+  dependencies:
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    jest-util "^25.5.0"
+    string-length "^3.1.0"
+
+jest-watcher@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.0.1.tgz#5b5e3ebbdf10c240e22a98af66d645631afda770"
+  integrity sha512-pdZPydsS8475f89kGswaNsN3rhP6lnC3/QDCppP7bg1L9JQz7oU9Mb/5xPETk1RHDCWeqmVC47M4K5RR7ejxFw==
   dependencies:
-    merge-stream "^1.0.1"
+    "@jest/test-result" "^26.0.1"
+    "@jest/types" "^26.0.1"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.0.1"
+    string-length "^4.0.1"
 
-jest-worker@24.0.0-alpha.6:
-  version "24.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.0.0-alpha.6.tgz#463681b92c117c57107135c14b9b9d6cd51d80ce"
-  integrity sha512-iXtH7MR9bjWlNnlnRBcrBRrb4cSVxML96La5vsnmBvDI+mJnkP5uEt6Fgpo5Y8f3z9y2Rd7wuPnKRxqQsiU/dA==
+jest-worker@25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.1.0.tgz#75d038bad6fdf58eba0d2ec1835856c497e3907a"
+  integrity sha512-ZHhHtlxOWSxCoNOKHGbiLzXnl42ga9CxDr27H36Qn+15pQZd3R/F24jrmjDelw9j/iHUIWMWs08/u2QN50HHOg==
   dependencies:
-    merge-stream "^1.0.1"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
 
-jest-worker@24.9.0, jest-worker@^24.0.0-alpha.6, jest-worker@^24.6.0, jest-worker@^24.9.0:
+jest-worker@^24.6.0, jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
@@ -18058,10 +19626,21 @@ jest-worker@24.9.0, jest-worker@^24.0.0-alpha.6, jest-worker@^24.6.0, jest-worke
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-"jest-zone-patch@>=0.0.9 <1.0.0":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/jest-zone-patch/-/jest-zone-patch-0.0.10.tgz#58252f44ab4aad45aaed62a705819577b9709b82"
-  integrity sha512-K5uHLHgMgi2Eyj74gbY+xSeGGekb5U48bXsgDwgipRbFdaekyZK+TAcp8auamqU4UjrAt5S4sIUZz/2bBNyTTA==
+jest-worker@^25.1.0, jest-worker@^25.4.0, jest-worker@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
+  integrity sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest-worker@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.0.0.tgz#4920c7714f0a96c6412464718d0c58a3df3fb066"
+  integrity sha512-pPaYa2+JnwmiZjK9x7p9BoZht+47ecFCDFA/CJxspHzeDvQcfVBLWzCiWyo+EGrSiQMWZtCFo9iSvMZnAAo8vw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
 
 jest@24.7.1:
   version "24.7.1"
@@ -18071,7 +19650,7 @@ jest@24.7.1:
     import-local "^2.0.0"
     jest-cli "^24.7.1"
 
-jest@24.9.0, jest@^24.7.1, jest@^24.8.0, jest@^24.9.0:
+jest@24.9.0, jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
   integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
@@ -18079,23 +19658,23 @@ jest@24.9.0, jest@^24.7.1, jest@^24.8.0, jest@^24.9.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-joi@14.0.4:
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-14.0.4.tgz#f066f79330f6bd6f3dda243be6d2c211f83a5f9b"
-  integrity sha512-KUXRcinDUMMbtlOk7YLGHQvG73dLyf8bmgE+6sBTkdJbZpeGVGAlPXEHLiQBV7KinD/VLD5OA0EUgoTTfbRAJQ==
+jest@^25.2.7:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-25.5.4.tgz#f21107b6489cfe32b076ce2adcadee3587acb9db"
+  integrity sha512-hHFJROBTqZahnO+X+PMtT6G2/ztqAZJveGqz//FnWWHurizkD05PQGzRZOhF3XP6z7SJmL+5tCfW8qV06JypwQ==
   dependencies:
-    hoek "6.x.x"
-    isemail "3.x.x"
-    topo "3.x.x"
+    "@jest/core" "^25.5.4"
+    import-local "^3.0.2"
+    jest-cli "^25.5.4"
 
-joi@^11.1.1:
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-11.4.0.tgz#f674897537b625e9ac3d0b7e1604c828ad913ccb"
-  integrity sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==
+jest@^26.0.0:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.0.1.tgz#5c51a2e58dff7525b65f169721767173bf832694"
+  integrity sha512-29Q54kn5Bm7ZGKIuH2JRmnKl85YRigp0o0asTc6Sb6l2ch1DCXIeZTLLFy9ultJvhkTqbswF5DEx4+RlkmCxWg==
   dependencies:
-    hoek "4.x.x"
-    isemail "3.x.x"
-    topo "2.x.x"
+    "@jest/core" "^26.0.1"
+    import-local "^3.0.2"
+    jest-cli "^26.0.1"
 
 joi@^12.0.0:
   version "12.0.0"
@@ -18106,37 +19685,44 @@ joi@^12.0.0:
     isemail "3.x.x"
     topo "2.x.x"
 
-join-component@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/join-component/-/join-component-1.1.0.tgz#b8417b750661a392bee2c2537c68b2a9d4977cd5"
-  integrity sha1-uEF7dQZho5K+4sJTfGiyqdSXfNU=
-
 jquery-deferred@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/jquery-deferred/-/jquery-deferred-0.3.1.tgz#596eca1caaff54f61b110962b23cafea74c35355"
   integrity sha1-WW7KHKr/VPYbEQlisjyv6nTDU1U=
 
 jquery@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
-  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
 
 js-base64@^2.1.8:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
-  integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
+  integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
 
 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-message@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15"
+  integrity sha1-IwDSSxrwjondCVvBpMnJz8uJLRU=
+
+js-queue@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-queue/-/js-queue-2.0.0.tgz#362213cf860f468f0125fc6c96abc1742531f948"
+  integrity sha1-NiITz4YPRo8BJfxslqvBdCUx+Ug=
+  dependencies:
+    easy-stack "^1.0.0"
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
   integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
 
-js-stringify@^1.0.1:
+js-stringify@^1.0.1, js-stringify@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
   integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
@@ -18151,7 +19737,7 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@^3.10.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.9.0:
+js-yaml@3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -18159,6 +19745,14 @@ js-yaml@^3.10.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.2.5, js-yaml@^3.2.
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^3.10.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.9.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -18189,9 +19783,9 @@ jscodeshift@^0.6.3:
     write-file-atomic "^2.3.0"
 
 jscodeshift@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.7.0.tgz#4eee7506fd4fdacbd80340287d61575af991fdab"
-  integrity sha512-Kt6rpTa1HVhAWagD6J0y6qxxqRmDgkFvczerLgOsDNSGoUZSmq2CO1vFRcda9OV1BaZKSHCIh+VREPts5tB/Ig==
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.7.1.tgz#0236ad475d6f0770ca998a0160925d62b57d2507"
+  integrity sha512-YMkZSyoc8zg5woZL23cmWlnFLPH/mHilonGA7Qbzs7H6M4v4PH0Qsn4jeDyw+CHhVoAnm9UxQyB0Yw1OT+mktA==
   dependencies:
     "@babel/core" "^7.1.6"
     "@babel/parser" "^7.1.6"
@@ -18212,6 +19806,70 @@ jscodeshift@^0.7.0:
     temp "^0.8.1"
     write-file-atomic "^2.3.0"
 
+jsdom@16.2.1:
+  version "16.2.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.2.1.tgz#df934649ab9175daeeff3e6f1e2b2268ed1470cd"
+  integrity sha512-3p0gHs5EfT7PxW9v8Phz3mrq//4Dy8MQenU/PoKxhdT+c45S7NjIjKbGT3Ph0nkICweE1r36+yaknXA5WfVNAg==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^5.0.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+    ws "^7.2.1"
+    xml-name-validator "^3.0.0"
+
+jsdom@16.2.2, jsdom@^16.2.2:
+  version "16.2.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.2.2.tgz#76f2f7541646beb46a938f5dc476b88705bedf2b"
+  integrity sha512-pDFQbcYtKBHxRaP55zGXCJWgFHkDAYbKcsXEK/3Icu9nKYZkutUXfLBwbD+09XDutkYSHcgfQLZ0qvpAAm9mvg==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.0.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+    ws "^7.2.3"
+    xml-name-validator "^3.0.0"
+
 jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
@@ -18308,7 +19966,7 @@ jsdom@^14.0.0, jsdom@^14.1.0:
     ws "^6.1.2"
     xml-name-validator "^3.0.0"
 
-jsdom@^15.1.1:
+jsdom@^15.2.1:
   version "15.2.1"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
   integrity sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==
@@ -18360,6 +20018,20 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+jshint@^2.9.6:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/jshint/-/jshint-2.11.1.tgz#28ec7d1cf7baaae5ce7bd37b9a70ed6cfd938570"
+  integrity sha512-WXWePB8ssAH3DlD05IoqolsY6arhbll/1+i2JkRPpihQAuiNaR/gSt8VKIcxpV5m6XChP0hCwESQUqpuQMA8Tg==
+  dependencies:
+    cli "~1.0.0"
+    console-browserify "1.1.x"
+    exit "0.1.x"
+    htmlparser2 "3.8.x"
+    lodash "~4.17.11"
+    minimatch "~3.0.2"
+    shelljs "0.3.x"
+    strip-json-comments "1.0.x"
+
 json-api-serializer@^1.11.0:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/json-api-serializer/-/json-api-serializer-1.15.1.tgz#241ea66dfc5c629ae46d8315c6ee4232b81bb6b7"
@@ -18387,7 +20059,7 @@ json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-bet
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-schema-traverse@0.3.1, json-schema-traverse@^0.3.0:
+json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
   integrity sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=
@@ -18431,12 +20103,12 @@ json3@^3.3.2:
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
   integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
-json5@2.x, json5@^2.0.0, json5@^2.1.0, json5@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
-  integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
+json5@2.x, json5@^2.0.0, json5@^2.1.0, json5@^2.1.1, json5@^2.1.2, json5@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
   dependencies:
-    minimist "^1.2.0"
+    minimist "^1.2.5"
 
 json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
@@ -18450,10 +20122,10 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-jsonc-parser@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.2.0.tgz#f206f87f9d49d644b7502052c04e82dd6392e9ef"
-  integrity sha512-4fLQxW1j/5fWj6p78vAlAafoCKtuBm6ghv+Ij5W2DrDx0qE+ZdEl2c6Ko1mgJNF5ftX1iEWQQ4Ap7+3GlhjkOA==
+jsonc-parser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.2.1.tgz#db73cd59d78cce28723199466b2a03d1be1df2bc"
+  integrity sha512-o6/yDBYccGvTz1+QFevz6l6OBZ2+fMVu2JZ9CIhzsYRX4mjaK5IyX9eldUdCmga16zlgQxyrj5pt9kzuj2C02w==
 
 jsonfile@^2.1.0:
   version "2.4.0"
@@ -18469,12 +20141,12 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonfile@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
-  integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
+jsonfile@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
+  integrity sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==
   dependencies:
-    universalify "^0.1.2"
+    universalify "^1.0.0"
   optionalDependencies:
     graceful-fs "^4.1.6"
 
@@ -18498,7 +20170,7 @@ jsonpointer@^4.0.1:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
   integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
 
-jsonwebtoken@^8.4.0:
+jsonwebtoken@8.5.1, jsonwebtoken@^8.4.0:
   version "8.5.1"
   resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
   integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
@@ -18532,18 +20204,98 @@ jstransformer@1.0.0:
     is-promise "^2.0.0"
     promise "^7.0.1"
 
-jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
-  integrity sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==
+jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.3.0.tgz#edd727794ea284d7fda575015ed1b0cde0289ab6"
+  integrity sha512-3HNoc7nZ1hpZIKB3hJ7BlFRkzCx2BynRtfSwbkqZdpRdvAPsGMnzclPwrvDBS7/lalHTj21NwIeaEpysHBOudg==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
     object.assign "^4.1.0"
 
+jsx-compiler@^0.3.0:
+  version "0.3.37"
+  resolved "https://registry.yarnpkg.com/jsx-compiler/-/jsx-compiler-0.3.37.tgz#e02c25d338db165a3cb4eaa182ff826651cd4393"
+  integrity sha512-C4gf0v1uaE4S0wU8zhYAeFjutazZpwZN4uSRwWay6lPf7Wp+AKZCwz60RSkRHO3rINXqmKGLmIocxDTIeSBQIw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.3.4"
+    "@babel/parser" "^7.3.4"
+    "@babel/traverse" "^7.3.4"
+    "@babel/types" "^7.3.4"
+    chalk "^2.4.2"
+    colors "^1.3.3"
+    css "^2.2.4"
+    fs-extra "^7.0.1"
+    kebab-case "^1.0.0"
+    md5 "^2.2.1"
+    resolve "^1.12.0"
+
+jsx2mp-cli@^0.2.0:
+  version "0.2.23"
+  resolved "https://registry.yarnpkg.com/jsx2mp-cli/-/jsx2mp-cli-0.2.23.tgz#de8bffc1991f6d1b487bee7a4533569118022e9d"
+  integrity sha512-OsvopZPLHw8/e+lcvWSQ6kiPCBNl7xMJ9ngan9GXR0FwRh+4m1uBWBuRvqgwNy2g8hMeWI7GM8A2Gy3cl4AWbg==
+  dependencies:
+    "@babel/plugin-proposal-class-properties" "^7.5.5"
+    "@babel/plugin-proposal-export-default-from" "^7.5.2"
+    "@babel/plugin-transform-typescript" "^7.7.4"
+    "@babel/preset-env" "^7.5.5"
+    "@babel/preset-react" "^7.0.0"
+    babel-loader "^8.0.6"
+    chalk "^2.4.2"
+    chokidar "^3.3.1"
+    commander "^2.20.0"
+    console-clear "^1.1.1"
+    del "^5.1.0"
+    fs-extra "^7.0.1"
+    inquirer "^6.2.2"
+    jsx2mp-loader "^0.2.0"
+    jsx2mp-runtime "^0.3.0"
+    kebab-case "^1.0.0"
+    memory-fs "^0.4.1"
+    ora "^3.4.0"
+    terser "^4.3.8"
+    update-notifier "^3.0.1"
+    webpack "^4.38.0"
+    webpack-cli "^3.3.6"
+    webpack-merge "^4.2.1"
+
+jsx2mp-loader@^0.2.0:
+  version "0.2.23"
+  resolved "https://registry.yarnpkg.com/jsx2mp-loader/-/jsx2mp-loader-0.2.23.tgz#00c206627bdb3ba769b49a82715d97c880906e78"
+  integrity sha512-ZrjAhgiYzXI2frZPd5tKziaSuTaPmW+GxbyAOm4qcqK/THpivvzijAdoTkkeamf621/rR1cU+QOXyculggYG7w==
+  dependencies:
+    "@babel/core" "^7.5.5"
+    "@babel/plugin-proposal-class-properties" "^7.5.5"
+    "@babel/plugin-proposal-export-default-from" "^7.5.2"
+    "@babel/plugin-transform-typescript" "^7.7.4"
+    "@babel/preset-env" "^7.5.5"
+    babel-plugin-danger-remove-unused-import "^2.0.0"
+    babel-plugin-minify-dead-code-elimination "^0.5.1"
+    babel-plugin-transform-define "^1.3.1"
+    chalk "^2.4.2"
+    convert-source-map "^1.6.0"
+    csso "^3.5.1"
+    enhanced-resolve "^4.1.1"
+    fs-extra "^8.1.0"
+    jsx-compiler "^0.3.0"
+    less "^3.10.3"
+    loader-utils "^1.2.3"
+    pretty-data "^0.40.0"
+    pretty-error "^2.1.1"
+    sass "^1.23.2"
+    stylesheet-loader "^0.6.8"
+    stylus "^0.54.7"
+    terser "^4.3.8"
+
+jsx2mp-runtime@^0.3.0:
+  version "0.3.26"
+  resolved "https://registry.yarnpkg.com/jsx2mp-runtime/-/jsx2mp-runtime-0.3.26.tgz#18baf7ba18f01dec2939b837aa2bf2b764a8779a"
+  integrity sha512-BhEjghv55sepL1dwD8V4bWvWHOh1xFqZx3gR7j2wBO6P1nFJfyS+IoN6fQ54uL91lWuhklq1OEmccouocCJ16A==
+
 jszip@^3.1.3:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
-  integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.4.0.tgz#1a69421fa5f0bb9bc222a46bca88182fba075350"
+  integrity sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==
   dependencies:
     lie "~3.3.0"
     pako "~1.0.2"
@@ -18579,6 +20331,18 @@ karma-source-map-support@1.4.0:
   dependencies:
     source-map-support "^0.5.5"
 
+kebab-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.0.tgz#3f9e4990adcad0c686c0e701f7645868f75f91eb"
+  integrity sha1-P55JkK3K0MaGwOcB92RYaPdfkes=
+
+keygrip@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/keygrip/-/keygrip-1.1.0.tgz#871b1681d5e159c62a445b0c74b615e0917e7226"
+  integrity sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==
+  dependencies:
+    tsscmp "1.0.6"
+
 keyv@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
@@ -18598,11 +20362,6 @@ killable@^1.0.0, killable@^1.0.1:
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
   integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
-kind-of@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
-  integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=
-
 kind-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
@@ -18629,12 +20388,12 @@ kind-of@^5.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
-  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klaw-sync@6.0.0:
+klaw-sync@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
   integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
@@ -18648,7 +20407,7 @@ klaw@^1.0.0:
   optionalDependencies:
     graceful-fs "^4.1.9"
 
-kleur@^3.0.3:
+kleur@3.0.3, kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
@@ -18704,9 +20463,9 @@ lasso-loader@^3.0.2:
     raptor-util "^1.0.0"
 
 lasso-marko@^2.4.6:
-  version "2.4.8"
-  resolved "https://registry.yarnpkg.com/lasso-marko/-/lasso-marko-2.4.8.tgz#7f010714f450a91caf08d37ebcfbf67acc3d026f"
-  integrity sha512-D1KpCNG7dQJuBiFa2ijOZF3P4WI8U9rI5rVc2optJFLWG+movZGX8B92ORVPxOs+N2vj0Ax+kxuLQ8G7w3Yvjw==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/lasso-marko/-/lasso-marko-2.5.0.tgz#c1d89cad6607fb30cee8c12ec991e79a45677a96"
+  integrity sha512-zEMSE02DbrKvnKE2nWEiy0nbiUccSmgvRBYSsM+QFMdG+w7IIqW9rPri3VWA+/TUUotvRLDR7NcfFBk01DCHKg==
   dependencies:
     callbackify "^1.1.0"
 
@@ -18796,13 +20555,35 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
-latest-version@5.1.0, latest-version@^5.0.0:
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  integrity sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=
+  dependencies:
+    package-json "^4.0.0"
+
+latest-version@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
   integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
   dependencies:
     package-json "^6.3.0"
 
+launch-editor-middleware@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.2.1.tgz#e14b07e6c7154b0a4b86a0fd345784e45804c157"
+  integrity sha512-s0UO2/gEGiCgei3/2UN3SMuUj1phjQN8lcpnvgLSz26fAzNWPQ6Nf/kF5IFClnfU2ehp6LrmKdMU/beveO+2jg==
+  dependencies:
+    launch-editor "^2.2.1"
+
+launch-editor@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.2.1.tgz#871b5a3ee39d6680fcc26d37930b6eeda89db0ca"
+  integrity sha512-On+V7K2uZK6wK7x691ycSUbLD/FyKKelArkbaAMSSJU8JmqmhwN2+mnJDNINuJWSrh2L0kDk+ZQtbC/gOWUwLw==
+  dependencies:
+    chalk "^2.3.0"
+    shell-quote "^1.6.1"
+
 lazy-ass@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -18858,29 +20639,30 @@ left-pad@^1.3.0:
   integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
 
 lerna@^3.19.0:
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.19.0.tgz#6d53b613eca7da426ab1e97c01ce6fb39754da6c"
-  integrity sha512-YtMmwEqzWHQCh7Ynk7BvjrZri3EkSeVqTAcwZIqWlv9V/dCfvFPyRqp+2NIjPB5nj1FWXLRH6F05VT/qvzuuOA==
-  dependencies:
-    "@lerna/add" "3.19.0"
-    "@lerna/bootstrap" "3.18.5"
-    "@lerna/changed" "3.18.5"
-    "@lerna/clean" "3.18.5"
+  version "3.22.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.22.0.tgz#da14d08f183ffe6eec566a4ef3f0e11afa621183"
+  integrity sha512-xWlHdAStcqK/IjKvjsSMHPZjPkBV1lS60PmsIeObU8rLljTepc4Sg/hncw4HWfQxPIewHAUTqhrxPIsqf9L2Eg==
+  dependencies:
+    "@lerna/add" "3.21.0"
+    "@lerna/bootstrap" "3.21.0"
+    "@lerna/changed" "3.21.0"
+    "@lerna/clean" "3.21.0"
     "@lerna/cli" "3.18.5"
-    "@lerna/create" "3.18.5"
-    "@lerna/diff" "3.18.5"
-    "@lerna/exec" "3.18.5"
-    "@lerna/import" "3.18.5"
-    "@lerna/init" "3.18.5"
-    "@lerna/link" "3.18.5"
-    "@lerna/list" "3.18.5"
-    "@lerna/publish" "3.18.5"
-    "@lerna/run" "3.18.5"
-    "@lerna/version" "3.18.5"
+    "@lerna/create" "3.22.0"
+    "@lerna/diff" "3.21.0"
+    "@lerna/exec" "3.21.0"
+    "@lerna/import" "3.22.0"
+    "@lerna/info" "3.21.0"
+    "@lerna/init" "3.21.0"
+    "@lerna/link" "3.21.0"
+    "@lerna/list" "3.21.0"
+    "@lerna/publish" "3.22.0"
+    "@lerna/run" "3.21.0"
+    "@lerna/version" "3.22.0"
     import-local "^2.0.0"
     npmlog "^4.1.2"
 
-less-loader@5.0.0:
+less-loader@5.0.0, less-loader@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466"
   integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==
@@ -18889,12 +20671,13 @@ less-loader@5.0.0:
     loader-utils "^1.1.0"
     pify "^4.0.1"
 
-less@3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/less/-/less-3.9.0.tgz#b7511c43f37cf57dc87dffd9883ec121289b1474"
-  integrity sha512-31CmtPEZraNUtuUREYjSqRkeETFdyEHSEPAGq4erDlUXtda7pzNmctdljdIagSb589d/qXGWiiP31R5JVf+v0w==
+less@3.11.1, less@^3.0.4, less@^3.10.3, less@^3.9.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/less/-/less-3.11.1.tgz#c6bf08e39e02404fe6b307a3dfffafdc55bd36e2"
+  integrity sha512-tlWX341RECuTOvoDIvtFqXsKj072hm3+9ymRBe76/mD6O5ZZecnlAOVDlWAleF2+aohFrxNidXhv2773f6kY7g==
   dependencies:
     clone "^2.1.2"
+    tslib "^1.10.0"
   optionalDependencies:
     errno "^0.1.1"
     graceful-fs "^4.1.2"
@@ -18905,27 +20688,100 @@ less@3.9.0:
     request "^2.83.0"
     source-map "~0.6.0"
 
-less@^3.0.4:
-  version "3.10.3"
-  resolved "https://registry.yarnpkg.com/less/-/less-3.10.3.tgz#417a0975d5eeecc52cff4bcfa3c09d35781e6792"
-  integrity sha512-vz32vqfgmoxF1h3K4J+yKCtajH0PWmjkIFgbs5d78E/c/e+UQTnI+lWK+1eQRE95PXM2mC3rJlLSSP9VQHnaow==
+level-codec@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/level-codec/-/level-codec-9.0.1.tgz#042f4aa85e56d4328ace368c950811ba802b7247"
+  integrity sha512-ajFP0kJ+nyq4i6kptSM+mAvJKLOg1X5FiFPtLG9M5gCEZyBmgDi3FkDrvlMkEzrUn1cWxtvVmrvoS4ASyO/q+Q==
+
+level-concat-iterator@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz#1d1009cf108340252cb38c51f9727311193e6263"
+  integrity sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==
+
+level-errors@^2.0.0, level-errors@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-errors/-/level-errors-2.0.1.tgz#2132a677bf4e679ce029f517c2f17432800c05c8"
+  integrity sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==
   dependencies:
-    clone "^2.1.2"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    mime "^1.4.1"
-    mkdirp "^0.5.0"
-    promise "^7.1.1"
-    request "^2.83.0"
-    source-map "~0.6.0"
+    errno "~0.1.1"
+
+level-iterator-stream@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz#7ceba69b713b0d7e22fcc0d1f128ccdc8a24f79c"
+  integrity sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+    xtend "^4.0.2"
+
+level-js@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/level-js/-/level-js-4.0.2.tgz#fa51527fa38b87c4d111b0d0334de47fcda38f21"
+  integrity sha512-PeGjZsyMG4O89KHiez1zoMJxStnkM+oBIqgACjoo5PJqFiSUUm3GNod/KcbqN5ktyZa8jkG7I1T0P2u6HN9lIg==
+  dependencies:
+    abstract-leveldown "~6.0.1"
+    immediate "~3.2.3"
+    inherits "^2.0.3"
+    ltgt "^2.1.2"
+    typedarray-to-buffer "~3.1.5"
+
+level-packager@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/level-packager/-/level-packager-5.1.1.tgz#323ec842d6babe7336f70299c14df2e329c18939"
+  integrity sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==
+  dependencies:
+    encoding-down "^6.3.0"
+    levelup "^4.3.2"
+
+level-supports@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/level-supports/-/level-supports-1.0.1.tgz#2f530a596834c7301622521988e2c36bb77d122d"
+  integrity sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==
+  dependencies:
+    xtend "^4.0.2"
+
+level@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/level/-/level-5.0.1.tgz#8528cc1ee37ac413270129a1eab938c610be3ccb"
+  integrity sha512-wcak5OQeA4rURGacqS62R/xNHjCYnJSQDBOlm4KNUGJVE9bWv2B04TclqReYejN+oD65PzD4FsqeWoI5wNC5Lg==
+  dependencies:
+    level-js "^4.0.0"
+    level-packager "^5.0.0"
+    leveldown "^5.0.0"
+    opencollective-postinstall "^2.0.0"
+
+leveldown@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/leveldown/-/leveldown-5.6.0.tgz#16ba937bb2991c6094e13ac5a6898ee66d3eee98"
+  integrity sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    napi-macros "~2.0.0"
+    node-gyp-build "~4.1.0"
+
+levelup@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/levelup/-/levelup-4.4.0.tgz#f89da3a228c38deb49c48f88a70fb71f01cafed6"
+  integrity sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==
+  dependencies:
+    deferred-leveldown "~5.3.0"
+    level-errors "~2.0.0"
+    level-iterator-stream "~4.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
 
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -18975,7 +20831,7 @@ libnpmaccess@^3.0.1:
     npm-package-arg "^6.1.0"
     npm-registry-fetch "^4.0.0"
 
-libnpmconfig@^1.2.1:
+libnpmconfig@^1.0.0, libnpmconfig@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/libnpmconfig/-/libnpmconfig-1.2.1.tgz#c0c2f793a74e67d4825e5039e7a02a0044dfcbc0"
   integrity sha512-9esX8rTQAHqarx6qeZqmGQKBNZR5OIbl/Ayr0qQDy3oXja2iFVQQI81R6GZ2a02bSNZ9p3YOGX1O6HHCb1X7kA==
@@ -19038,10 +20894,10 @@ libnpmteam@^1.0.1:
     get-stream "^4.0.0"
     npm-registry-fetch "^4.0.0"
 
-license-webpack-plugin@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-2.1.2.tgz#63f7c571537a450ec47dc98f5d5ffdbca7b3b14f"
-  integrity sha512-7poZHRla+ae0eEButlwMrPpkXyhNVBf2EHePYWT0jyLnI6311/OXJkTI2sOIRungRpQgU2oDMpro5bSFPT5F0A==
+license-webpack-plugin@2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-2.1.4.tgz#c5529a4bb87cc9b4489b486d054ba7cae43a554e"
+  integrity sha512-1Xq72fmPbTg5KofXs+yI5L4QqPFjQ6mZxoeI6D7gfiEDOtaEIk6PGrdLaej90bpDqKNHNxlQ/MW4tMAL6xMPJQ==
   dependencies:
     "@types/webpack-sources" "^0.1.5"
     webpack-sources "^1.2.0"
@@ -19053,15 +20909,6 @@ lie@~3.3.0:
   dependencies:
     immediate "~3.0.5"
 
-linebreak@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/linebreak/-/linebreak-0.3.0.tgz#0526480a62c05bd679f3e9d99830e09c6a7d0ed6"
-  integrity sha1-BSZICmLAW9Z58+nZmDDgnGp9DtY=
-  dependencies:
-    base64-js "0.0.8"
-    brfs "^1.3.0"
-    unicode-trie "^0.3.0"
-
 linebreak@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/linebreak/-/linebreak-1.0.2.tgz#4b5781733e9a9eb2849dba2f963e47c887f8aa06"
@@ -19090,24 +20937,24 @@ linkify-it@~1.2.0:
   dependencies:
     uc.micro "^1.0.1"
 
-lint-staged@^9.4.1:
-  version "9.4.3"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-9.4.3.tgz#f55ad5f94f6e105294bfd6499b23142961f7b982"
-  integrity sha512-PejnI+rwOAmKAIO+5UuAZU9gxdej/ovSEOAY34yMfC3OS4Ac82vCBPzAWLReR9zCPOMqeVwQRaZ3bUBpAsaL2Q==
+lint-staged@^10.2.1:
+  version "10.2.6"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.2.6.tgz#7d9658bd89dee946a859cbfc6e09566a9fb50b53"
+  integrity sha512-2oEBWyPZHkdyjKcIv2U6ay80Q52ZMlZZrUnfsV0WTVcgzPlt3o2t5UFy2v8ETUTsIDZ0xSJVnffWCgD3LF6xTQ==
   dependencies:
-    chalk "^2.4.2"
-    commander "^2.20.0"
-    cosmiconfig "^5.2.1"
+    chalk "^4.0.0"
+    cli-truncate "2.1.0"
+    commander "^5.1.0"
+    cosmiconfig "^6.0.0"
     debug "^4.1.1"
     dedent "^0.7.0"
-    del "^5.0.0"
-    execa "^2.0.3"
-    listr "^0.14.3"
-    log-symbols "^3.0.0"
+    execa "^4.0.1"
+    listr2 "^2.0.2"
+    log-symbols "^4.0.0"
     micromatch "^4.0.2"
     normalize-path "^3.0.0"
-    please-upgrade-node "^3.1.1"
-    string-argv "^0.3.0"
+    please-upgrade-node "^3.2.0"
+    string-argv "0.3.1"
     stringify-object "^3.3.0"
 
 listener-tracker@^2.0.0:
@@ -19120,20 +20967,6 @@ listr-silent-renderer@^1.1.1:
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
   integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
 
-listr-update-renderer@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.2.0.tgz#ca80e1779b4e70266807e8eed1ad6abe398550f9"
-  integrity sha1-yoDhd5tOcCZoB+ju0a1qvjmFUPk=
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    strip-ansi "^3.0.1"
-
 listr-update-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
@@ -19148,16 +20981,6 @@ listr-update-renderer@^0.5.0:
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
-listr-verbose-renderer@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
-  integrity sha1-ggb0z21S3cWCfl/RSYng6WWTOjU=
-  dependencies:
-    chalk "^1.1.3"
-    cli-cursor "^1.0.2"
-    date-fns "^1.27.2"
-    figures "^1.7.0"
-
 listr-verbose-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
@@ -19168,29 +20991,27 @@ listr-verbose-renderer@^0.5.0:
     date-fns "^1.27.2"
     figures "^2.0.0"
 
-listr@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.12.0.tgz#6bce2c0f5603fa49580ea17cd6a00cc0e5fa451a"
-  integrity sha1-a84sD1YD+klYDqF81qAMwOX6RRo=
+listr2@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.0.4.tgz#b39100b0a227ec5659dcf76ddc516211fc168d61"
+  integrity sha512-oJaAcplPsa72rKW0eg4P4LbEJjhH+UO2I8uqR/I2wzHrVg16ohSfUy0SlcHS21zfYXxtsUpL8YXGHjyfWMR0cg==
   dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    figures "^1.7.0"
-    indent-string "^2.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.2.0"
-    listr-verbose-renderer "^0.4.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    ora "^0.2.3"
-    p-map "^1.1.1"
-    rxjs "^5.0.0-beta.11"
-    stream-to-observable "^0.1.0"
-    strip-ansi "^3.0.1"
+    "@samverschueren/stream-to-observable" "^0.3.0"
+    chalk "^4.0.0"
+    cli-cursor "^3.1.0"
+    cli-truncate "^2.1.0"
+    elegant-spinner "^2.0.0"
+    enquirer "^2.3.5"
+    figures "^3.2.0"
+    indent-string "^4.0.0"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    pad "^3.2.0"
+    rxjs "^6.5.5"
+    through "^2.3.8"
+    uuid "^7.0.2"
 
-listr@^0.14.3:
+listr@0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
   integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
@@ -19206,16 +21027,16 @@ listr@^0.14.3:
     rxjs "^6.3.3"
 
 lit-element@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.2.1.tgz#79c94d8cfdc2d73b245656e37991bd1e4811d96f"
-  integrity sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.1.tgz#73343b978fa1e73d60526c6bb6ad60f53a16c343"
+  integrity sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==
   dependencies:
-    lit-html "^1.0.0"
+    lit-html "^1.1.1"
 
-lit-html@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374"
-  integrity sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==
+lit-html@^1.0.0, lit-html@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.2.1.tgz#1fb933dc1e2ddc095f60b8086277d4fcd9d62cc8"
+  integrity sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ==
 
 live-server@^1.2.1:
   version "1.2.1"
@@ -19283,28 +21104,28 @@ load-json-file@^5.3.0:
     strip-bom "^3.0.0"
     type-fest "^0.3.0"
 
-load-plugin@^2.0.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-2.3.1.tgz#8024739afb4aa04de1e602e15e5b1a678c443d00"
-  integrity sha512-dYB1lbwqHgPTrruy9glukCu8Ya9vzj6TMfouCtj2H/GuJ+8syioisgKTBPxnCi6m8K8jINKfTOxOHngFkUYqHw==
+load-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-3.0.0.tgz#8f3ce57cf4e5111639911012487bc1c2ba3d0e6c"
+  integrity sha512-od7eKCCZ62ITvFf8nHHrIiYmgOHb4xVNDRDqxBWSaao5FZyyZVX8OmRCbwjDGPrSrgIulwPNyBsWCGnhiDC0oQ==
   dependencies:
-    npm-prefix "^1.2.0"
+    libnpmconfig "^1.0.0"
     resolve-from "^5.0.0"
 
 loader-fs-cache@^1.0.0, loader-fs-cache@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz#54cedf6b727e1779fd8f01205f05f6e88706f086"
-  integrity sha512-70IzT/0/L+M20jUlEqZhZyArTU6VKLRTYRDAYN26g4jfzpJqjipLL3/hgYpySqI9PwsVRHHFja0LfEmsx9X2Cw==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
+  integrity sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==
   dependencies:
     find-cache-dir "^0.1.1"
-    mkdirp "0.5.1"
+    mkdirp "^0.5.1"
 
-loader-runner@^2.3.0, loader-runner@^2.4.0:
+loader-runner@^2.3.0, loader-runner@^2.3.1, loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@~1.2.3:
+loader-utils@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -19313,6 +21134,15 @@ loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@2.0.0, loader-utils@^2.0.0, loader-utils@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
@@ -19323,6 +21153,15 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 loader.js@^4.2.3:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/loader.js/-/loader.js-4.7.0.tgz#a1a52902001c83631efde9688b8ab3799325ef1f"
@@ -19357,17 +21196,39 @@ locate-path@^5.0.0:
     p-locate "^4.1.0"
 
 lock-verify@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lock-verify/-/lock-verify-2.1.0.tgz#fff4c918b8db9497af0c5fa7f6d71555de3ceb47"
-  integrity sha512-vcLpxnGvrqisKvLQ2C2v0/u7LVly17ak2YSgoK4PrdsYBXQIax19vhKiLfvKNFx7FRrpTnitrpzF/uuCMuorIg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/lock-verify/-/lock-verify-2.2.0.tgz#12432feb68bb647071c78c44bde16029a0f7d935"
+  integrity sha512-BhM1Vqsu7x0s+EalTifNjdDPks+ZjdAhComvnA6VcCIlDOI5ouELXqAe1BYuEIP4zGN0W08xVm6byJV1LnCiJg==
   dependencies:
+    "@iarna/cli" "^1.2.0"
     npm-package-arg "^6.1.0"
     semver "^5.4.1"
 
-lock@^0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.4.tgz#fec7deaef17e7c3a0a55e1da042803e25d91745d"
-  integrity sha1-/sfervF+fDoKVeHaBCgD4l2RdF0=
+lockfile-lint-api@^5.1.2:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/lockfile-lint-api/-/lockfile-lint-api-5.1.6.tgz#74d1e14c0c8270232607eb11e518a92f6f6b1ddd"
+  integrity sha512-liJ1p/NkHbE2Wx5fRw8T1io+x2b2DttVvXpHLm4x7QC8pW3Lc6sHqV4T7cM6rAOs4fF2O9sAt7SEtuN2sX91qA==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    debug "^4.1.1"
+    object-hash "^2.0.1"
+
+lockfile-lint@4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/lockfile-lint/-/lockfile-lint-4.2.2.tgz#765cca0ef7ce4d2661b3527bd4d746afddb99d4d"
+  integrity sha512-9mr2eiFlIhr9AIlmpQlAeSd7Aov+7viRShnzymaFF4lUO6si7mODueTG5fWH0Jnb49nL0Tjsudw5lD/nu4qVqA==
+  dependencies:
+    cosmiconfig "^6.0.0"
+    debug "^4.1.1"
+    lockfile-lint-api "^5.1.2"
+    yargs "^15.0.2"
+
+lockfile@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.4.tgz#07f819d25ae48f87e538e6578b6964a4981a5609"
+  integrity sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==
+  dependencies:
+    signal-exit "^3.0.2"
 
 lodash._baseassign@^3.0.0:
   version "3.2.0"
@@ -19437,11 +21298,6 @@ lodash.assign@^3.2.0:
     lodash._createassigner "^3.0.0"
     lodash.keys "^3.0.0"
 
-lodash.assign@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-  integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
-
 lodash.assignin@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
@@ -19469,11 +21325,6 @@ lodash.debounce@^3.1.1:
   dependencies:
     lodash._getnative "^3.0.0"
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.defaultsdeep@^4.6.0, lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
@@ -19585,6 +21436,11 @@ lodash.istypedarray@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62"
   integrity sha1-yaR3SYYHUB2OhJTSg7h8OSgc72I=
 
+lodash.kebabcase@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+  integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
+
 lodash.keys@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -19639,21 +21495,6 @@ lodash.once@^4.0.0, lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash.pad@^4.1.0:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/lodash.pad/-/lodash.pad-4.5.1.tgz#4330949a833a7c8da22cc20f6a26c4d59debba70"
-  integrity sha1-QzCUmoM6fI2iLMIPaibE1Z3runA=
-
-lodash.padend@^4.1.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.padend/-/lodash.padend-4.6.1.tgz#53ccba047d06e158d311f45da625f4e49e6f166e"
-  integrity sha1-U8y6BH0G4VjTEfRdpiX05J5vFm4=
-
-lodash.padstart@^4.1.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.padstart/-/lodash.padstart-4.6.1.tgz#d2e3eebff0d9d39ad50f5cbd1b52a7bce6bb611b"
-  integrity sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=
-
 lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
@@ -19694,10 +21535,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+lodash.transform@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
+  integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=
 
 lodash.unescape@4.0.1:
   version "4.0.1"
@@ -19714,17 +21555,17 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
-lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1, lodash@^4.6.0, lodash@^4.6.1, lodash@~4.17.10:
+lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.5.1, lodash@~4.17.11, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-log-symbols@2.2.0, log-symbols@^2.1.0, log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+log-symbols@3.0.0, log-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
   dependencies:
-    chalk "^2.0.1"
+    chalk "^2.4.2"
 
 log-symbols@^1.0.2:
   version "1.0.2"
@@ -19733,20 +21574,19 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
+log-symbols@^2.1.0, log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
   dependencies:
-    chalk "^2.4.2"
+    chalk "^2.0.1"
 
-log-update@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
-  integrity sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
   dependencies:
-    ansi-escapes "^1.0.0"
-    cli-cursor "^1.0.2"
+    chalk "^4.0.0"
 
 log-update@^2.3.0:
   version "2.3.0"
@@ -19757,23 +21597,25 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-logfmt@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/logfmt/-/logfmt-1.3.2.tgz#be34020b7390b8201212a12f533e3cb4c92d70c2"
-  integrity sha512-U0lelcaGWEfEITZQXs8y5HrJp2xa0BJ+KDfkkLJRmuKbQIEVGNv145FbaNekY4ZYHJSBBx8NLJitaPtRqLEkxQ==
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
   dependencies:
-    split "0.2.x"
-    through "2.3.x"
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
 
 loglevel-plugin-prefix@^0.8.4:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644"
   integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==
 
-loglevel@^1.4.1, loglevel@^1.6.4:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
-  integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
+loglevel@^1.4.1, loglevel@^1.6.4, loglevel@^1.6.6, loglevel@^1.6.7, loglevel@^1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
+  integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
 
 loglevelnext@^1.0.1:
   version "1.0.5"
@@ -19783,10 +21625,17 @@ loglevelnext@^1.0.1:
     es6-symbol "^3.1.1"
     object.assign "^4.1.0"
 
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 longest-streak@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.3.tgz#3de7a3f47ee18e9074ded8575b5c091f5d0a4105"
-  integrity sha512-9lz5IVdpwsKLMzQi0MQ+oD9EA0mIGcWYP7jXMTZVXP8D42PwuAk+M/HBFYQoxt1G5OR8m7aSIgb1UymfWGBWEw==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
 
 longest@^1.0.1:
   version "1.0.1"
@@ -19800,21 +21649,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-ios@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/lottie-ios/-/lottie-ios-2.5.0.tgz#55c808e785d4a6933b0c10b395530b17098b05de"
-  integrity sha1-VcgI54XUppM7DBCzlVMLFwmLBd4=
-
-lottie-react-native@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-2.6.1.tgz#330d24fa6aac5928ea63f8e181b9b7d930a1a119"
-  integrity sha512-Z+6lARvWWhB8n8OSmW7/aHkV71ftsmO7hYXFt0D+REy/G40mpkQt1H7Cdy1HqY4cKAp7EYDWVxhu5+fkdD6o4g==
-  dependencies:
-    invariant "^2.2.2"
-    lottie-ios "2.5.0"
-    prop-types "^15.5.10"
-    react-native-safe-module "^1.1.0"
-
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -19828,6 +21662,13 @@ lower-case@^1.1.1:
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
+lower-case@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
+  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
+  dependencies:
+    tslib "^1.10.0"
+
 lowercase-keys@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
@@ -19843,13 +21684,13 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lowlight@~1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
-  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
+lowlight@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.12.1.tgz#014acf8dd73a370e02ff1cc61debcde3bb1681eb"
+  integrity sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==
   dependencies:
     fault "^1.0.2"
-    highlight.js "~9.13.0"
+    highlight.js "~9.15.0"
 
 lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
@@ -19866,7 +21707,19 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lunr@^2.3.6:
+ltgt@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
+  integrity sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=
+
+lunr-mutable-indexes@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/lunr-mutable-indexes/-/lunr-mutable-indexes-2.3.2.tgz#864253489735d598c5140f3fb75c0a5c8be2e98c"
+  integrity sha512-Han6cdWAPPFM7C2AigS2Ofl3XjAT0yVMrUixodJEpyg71zCtZ2yzXc3s+suc/OaNt4ca6WJBEzVnEIjxCTwFMw==
+  dependencies:
+    lunr ">= 2.3.0 < 2.4.0"
+
+"lunr@>= 2.3.0 < 2.4.0", lunr@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
   integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
@@ -19876,10 +21729,17 @@ macos-release@^2.2.0:
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"
   integrity sha512-OHhSbtcviqMPt7yfw5ef5aghS2jzFVKEFyCJndQt2YpSQ9qRVSEv2axSJI1paVThEu+FFGs584h/1YhxjVqajA==
 
-magic-string@0.25.3:
-  version "0.25.3"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.3.tgz#34b8d2a2c7fec9d9bdf9929a3fd81d271ef35be9"
-  integrity sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==
+magic-string@0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.1.tgz#b1c248b399cd7485da0fe7385c2fc7011843266e"
+  integrity sha512-sCuTz6pYom8Rlt4ISPFn6wuFodbKMIHUMv4Qko9P17dpxb7s52KJTmRuZZqHdGmLCK9AOcDare039nRIcfdkEg==
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+magic-string@0.25.7, magic-string@^0.25.0:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
   dependencies:
     sourcemap-codec "^1.4.4"
 
@@ -19890,13 +21750,6 @@ magic-string@^0.22.4:
   dependencies:
     vlq "^0.2.2"
 
-magic-string@^0.25.0:
-  version "0.25.4"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.4.tgz#325b8a0a79fc423db109b77fd5a19183b7ba5143"
-  integrity sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw==
-  dependencies:
-    sourcemap-codec "^1.4.4"
-
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -19912,19 +21765,19 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.0.tgz#1b5f39f6b9270ed33f9f054c5c0f84304989f801"
-  integrity sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==
+make-dir@^3.0.0, make-dir@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
     semver "^6.0.0"
 
 make-error@1.x, make-error@^1.1.1:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
-  integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
-make-fetch-happen@^4.0.1, make-fetch-happen@^4.0.2:
+make-fetch-happen@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-4.0.2.tgz#2d156b11696fb32bffbafe1ac1bc085dd6c78a79"
   integrity sha512-YMJrAjHSb/BordlsDEcVcPyTbiJKkzqMf48N8dAJZT9Zjctrkb6Yg4TY9Sq2AwSIQJFn5qBBKVTYt3vP5FMIHA==
@@ -19992,6 +21845,11 @@ map-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
+map-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
+  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
+
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -20010,26 +21868,37 @@ map-visit@^1.0.0:
     object-visit "^1.0.0"
 
 markdown-escapes@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.3.tgz#6155e10416efaafab665d466ce598216375195f5"
-  integrity sha512-XUi5HJhhV5R74k8/0H2oCbCiYf/u4cO/rX8tnGkRvrqhsr5BRNU6Mg0yt/8UIx1iIS8220BNJsDb7XnILhLepw==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
 markdown-extensions@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-1.1.1.tgz#fea03b539faeaee9b4ef02a3769b455b189f7fc3"
   integrity sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==
 
-markdown-it-terminal@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/markdown-it-terminal/-/markdown-it-terminal-0.1.0.tgz#545abd8dd01c3d62353bfcea71db580b51d22bd9"
-  integrity sha1-VFq9jdAcPWI1O/zqcdtYC1HSK9k=
+markdown-it-terminal@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-terminal/-/markdown-it-terminal-0.1.1.tgz#7665d28a97f6f7f61f8738304d409a8505620192"
+  integrity sha512-8v4pHGEh7eiw+UbD28PRyrpu+WrnRR/HefC6NRs+Ttbk1ZQoOY6ViMrkZcdO9Y+PoBsfxNsmiJZtG9BRHEGZ2A==
   dependencies:
     ansi-styles "^3.0.0"
     cardinal "^1.0.0"
     cli-table "^0.3.1"
-    lodash.merge "^4.6.0"
+    lodash.merge "^4.6.2"
     markdown-it "^8.3.1"
 
+markdown-it@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdown-it@^4.3.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-4.4.0.tgz#3df373dbea587a9a7fef3e56311b68908f75c414"
@@ -20041,7 +21910,7 @@ markdown-it@^4.3.0:
     mdurl "~1.0.0"
     uc.micro "^1.0.0"
 
-markdown-it@^8.3.1, markdown-it@^8.4.0:
+markdown-it@^8.3.1:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
   integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
@@ -20052,49 +21921,30 @@ markdown-it@^8.3.1, markdown-it@^8.4.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-markdown-it@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-9.1.0.tgz#df9601c168568704d554b1fff9af0c5b561168d9"
-  integrity sha512-xHKG4C8iPriyfu/jc2hsCC045fKrMQ0VexX2F1FGYiRxDxqMB2aAhF8WauJ3fltn2kb90moGBkiiEdooGIg55w==
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
   dependencies:
-    argparse "^1.0.7"
-    entities "~1.1.1"
-    linkify-it "^2.0.0"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
+    repeat-string "^1.0.0"
 
-markdown-table@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
-  integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
-
-markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
-  version "6.10.3"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.10.3.tgz#7f0946684acd321125ff2de7fd258a9b9c7c40b7"
-  integrity sha512-PSoUyLnW/xoW6RsxZrquSSz5eGEOTwa15H5eqp3enmrp8esmgDJmhzd6zmQ9tgAA9TxJzx1Hmf3incYU/IamoQ==
+markdown-to-jsx@^6.11.4:
+  version "6.11.4"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz#b4528b1ab668aef7fe61c1535c27e837819392c5"
+  integrity sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==
   dependencies:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-marked@^0.6.2:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
-  integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
-
-marked@^0.7.0:
+marked@0.7.0, marked@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
   integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
 
-marker-clusterer-plus@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67"
-  integrity sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc=
-
-markerwithlabel@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/markerwithlabel/-/markerwithlabel-2.0.2.tgz#fa6aee4abb0ee553e24e2b708226858f58b8729e"
-  integrity sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg==
+marked@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
+  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
 
 marko-starter-generic-server@^1.1.0:
   version "1.1.0"
@@ -20140,10 +21990,10 @@ marko-starter@^2.1.0:
     routes-table "^1.2.1"
     try-require "^1.2.1"
 
-marko@^4.1.1, marko@^4.10.0, marko@^4.18.25:
-  version "4.18.25"
-  resolved "https://registry.yarnpkg.com/marko/-/marko-4.18.25.tgz#1f9da3cdad7c4a1a86b4aee16c53ece8872ecb74"
-  integrity sha512-5ri/gooqcUthlwZMh9C6eHYf568J8PLOfT2d88YdiFkUt8zRzBrSQ7qszEiGT77Qub2NQAhAAzj79p1MUsUjtQ==
+marko@^4.1.1, marko@^4.10.0, marko@^4.18.39:
+  version "4.21.10"
+  resolved "https://registry.yarnpkg.com/marko/-/marko-4.21.10.tgz#c33e7b407ad7b5850a13ac28f524110d93381ada"
+  integrity sha512-OeK56Z7Zt4ERAzIS9t+jr2hjPsjl34DieJYaADgyPSCy0JS8ymHzd6AgSg7tYCY+BlGe1Su6roebwrLwFwFeKQ==
   dependencies:
     app-module-path "^2.2.0"
     argly "^1.0.0"
@@ -20154,8 +22004,7 @@ marko@^4.1.1, marko@^4.10.0, marko@^4.18.25:
     deresolve "^1.1.2"
     escodegen "^1.8.1"
     esprima "^4.0.0"
-    estraverse "^4.2.0"
-    events "^1.0.2"
+    estraverse "^4.3.0"
     events-light "^1.0.0"
     he "^1.1.0"
     htmljs-parser "^2.7.1"
@@ -20164,36 +22013,15 @@ marko@^4.1.1, marko@^4.10.0, marko@^4.18.25:
     lasso-package-root "^1.0.1"
     listener-tracker "^2.0.0"
     minimatch "^3.0.2"
-    object-assign "^4.1.0"
     property-handlers "^1.0.0"
-    raptor-json "^1.0.1"
-    raptor-polyfill "^1.0.0"
-    raptor-promises "^1.0.1"
     raptor-regexp "^1.0.0"
     raptor-util "^3.2.0"
     resolve-from "^2.0.0"
-    shorthash "0.0.2"
+    self-closing-tags "^1.0.1"
     simple-sha1 "^2.1.0"
     strip-json-comments "^2.0.1"
-    try-require "^1.2.1"
     warp10 "^2.0.1"
 
-marksy@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/marksy/-/marksy-7.0.1.tgz#fb26f780ce56bf5ca48fc137efdef1f97dd4c7ef"
-  integrity sha512-tB4cQxIY7f8PWTcIouJO/V60rl9JVVOmCDjmukYVO7mdpGM1JWl4qIP98iDYItexSXZ0DkEqk6yXFxgdmZRMxA==
-  dependencies:
-    babel-standalone "^6.26.0"
-    he "^1.1.1"
-    marked "^0.6.2"
-
-match-require@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/match-require/-/match-require-2.1.0.tgz#f67d62c4cb1d703f408fb63b55b9ae83fb25e2cc"
-  integrity sha1-9n1ixMsdcD9Aj7Y7Vbmug/sl4sw=
-  dependencies:
-    uuid "^3.0.0"
-
 matcher-collection@^1.0.0, matcher-collection@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/matcher-collection/-/matcher-collection-1.1.2.tgz#1076f506f10ca85897b53d14ef54f90a5c426838"
@@ -20229,13 +22057,6 @@ maximatch@^0.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-md5-file@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-3.2.3.tgz#f9bceb941eca2214a4c0727f5e700314e770f06f"
-  integrity sha512-3Tkp1piAHaworfcCgH0jKbTvj1jWWFgbvh2cXaNCgHwyTCBxxvD1Y04rmfpvdPm1P4oXMOpm6+2H7sr7v9v8Fw==
-  dependencies:
-    buffer-alloc "^1.1.0"
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -20254,75 +22075,87 @@ md5@^2.2.1:
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
-md5hex@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8"
-  integrity sha1-7XS0d6Luk2n3Xv7i8I1ZFeUqQug=
-
 mdast-comment-marker@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.1.1.tgz#9c9c18e1ed57feafc1965d92b028f37c3c8da70d"
-  integrity sha512-TWZDaUtPLwKX1pzDIY48MkSUQRDwX/HqbTB4m3iYdL/zosi/Z6Xqfdv0C0hNVKvzrPjZENrpWDt4p4odeVO0Iw==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.1.2.tgz#5ad2e42cfcc41b92a10c1421a98c288d7b447a6d"
+  integrity sha512-vTFXtmbbF3rgnTh3Zl3irso4LtvwUq/jaDvT2D1JqTGAwaipcS7RpTxzi6KjoRqI9n2yuAhzLDAC8xVTF3XYVQ==
 
-mdast-squeeze-paragraphs@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
-  integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
+mdast-squeeze-paragraphs@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz#7c4c114679c3bee27ef10b58e2e015be79f1ef97"
+  integrity sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ==
   dependencies:
-    unist-util-remove "^1.0.0"
+    unist-util-remove "^2.0.0"
 
-mdast-util-compact@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.4.tgz#d531bb7667b5123abf20859be086c4d06c894593"
-  integrity sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==
+mdast-util-compact@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
   dependencies:
-    unist-util-visit "^1.1.0"
+    unist-util-visit "^2.0.0"
 
-mdast-util-definitions@^1.2.0, mdast-util-definitions@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.5.tgz#3fe622a4171c774ebd06f11e9f8af7ec53ea5c74"
-  integrity sha512-CJXEdoLfiISCDc2JB6QLb79pYfI6+GcIH+W2ox9nMc7od0Pz+bovcHsiq29xAQY6ayqe/9CsK2VzkSJdg1pFYA==
+mdast-util-definitions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-2.0.1.tgz#2c931d8665a96670639f17f98e32c3afcfee25f3"
+  integrity sha512-Co+DQ6oZlUzvUR7JCpP249PcexxygiaKk9axJh+eRzHDZJk2julbIdKB4PXHVxdBuLzvJ1Izb+YDpj2deGMOuA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+mdast-util-definitions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz#06af6c49865fc63d6d7d30125569e2f7ae3d0a86"
+  integrity sha512-BAv2iUm/e6IK/b2/t+Fx69EL/AGcq/IG2S+HxHjDJGfLJtd6i9SZUS76aC9cig+IEucsqxKTR0ot3m933R3iuA==
   dependencies:
-    unist-util-visit "^1.0.0"
+    unist-util-visit "^2.0.0"
 
 mdast-util-heading-style@^1.0.2:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-heading-style/-/mdast-util-heading-style-1.0.5.tgz#81b2e60d76754198687db0e8f044e42376db0426"
-  integrity sha512-8zQkb3IUwiwOdUw6jIhnwM6DPyib+mgzQuHAe7j2Hy1rIarU4VUxe472bp9oktqULW3xqZE+Kz6OD4Gi7IA3vw==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/mdast-util-heading-style/-/mdast-util-heading-style-1.0.6.tgz#6410418926fd5673d40f519406b35d17da10e3c5"
+  integrity sha512-8ZuuegRqS0KESgjAGW8zTx4tJ3VNIiIaGFNEzFpRSAQBavVc7AvOo9I4g3crcZBfYisHs4seYh0rAVimO6HyOw==
 
-mdast-util-to-hast@6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-6.0.2.tgz#24a8791b7c624118637d70f03a9d29116e4311cf"
-  integrity sha512-GjcOimC9qHI0yNFAQdBesrZXzUkRdFleQlcoU8+TVNfDW6oLUazUx8MgUoTaUyCJzBOnE5AOgqhpURrSlf0QwQ==
+mdast-util-to-hast@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.0.tgz#6ef121dd3cd3b006bf8650b1b9454da0faf79ffe"
+  integrity sha512-Akl2Vi9y9cSdr19/Dfu58PVwifPXuFt1IrHe7l+Crme1KvgUT+5z+cHLVcQVGCiNTZZcdqjnuv9vPkGsqWytWA==
   dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.3"
     collapse-white-space "^1.0.0"
     detab "^2.0.0"
-    mdast-util-definitions "^1.2.0"
-    mdurl "^1.0.1"
-    trim "0.0.1"
+    mdast-util-definitions "^3.0.0"
+    mdurl "^1.0.0"
     trim-lines "^1.0.0"
-    unist-builder "^1.0.1"
-    unist-util-generated "^1.1.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.0"
-    xtend "^4.0.1"
+    unist-util-visit "^2.0.0"
 
 mdast-util-to-string@^1.0.0, mdast-util-to-string@^1.0.2:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.7.tgz#62d8e9c6b2113070d8b497c7dc35bf12796f06ee"
-  integrity sha512-P+gdtssCoHOX+eJUrrC30Sixqao86ZPlVjR5NEAoy0U79Pfxb1Y0Gntei0+GrnQD4T04X9xA8tcugp90cSmNow==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
+  integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdn-data@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
+  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
+
+mdn-data@~1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
+  integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
+
 mdn-links@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/mdn-links/-/mdn-links-0.1.0.tgz#e24c83b97cb4c5886cc39f2f780705fbfe273aa5"
   integrity sha1-4kyDuXy0xYhsw58veAcF+/4nOqU=
 
-mdurl@^1.0.1, mdurl@~1.0.0:
+mdurl@^1.0.0, mdurl@^1.0.1, mdurl@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -20349,9 +22182,11 @@ mem@^4.0.0:
     p-is-promise "^2.0.0"
 
 memfs-or-file-map-to-github-branch@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.1.2.tgz#9d46c02481b7eca8e5ee8a94f170b7e0138cad67"
-  integrity sha512-D2JKK2DTuVYQqquBWco3K6UfSVyVwmd58dgNqh+TgxHOZdTmR8I130gjMbVCkemDl/EzqDA62417cJxKL3/FFA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.2.0.tgz#a56cd13443144a8c7fbe2a4b90b5f570fb39c845"
+  integrity sha512-PloI9AkRXrLQuBU1s7eYQpl+4hkL0U0h23lddMaJ3ZGUufn8pdNRxd1kCfBqL5gISCFQs78ttXS15e4/f5vcTA==
+  dependencies:
+    "@octokit/rest" "^16.43.1"
 
 memoize-id@^0.2.0:
   version "0.2.0"
@@ -20424,20 +22259,41 @@ meow@^4.0.0:
     redent "^2.0.0"
     trim-newlines "^2.0.0"
 
-meow@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
-  integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
-  dependencies:
-    camelcase-keys "^4.0.0"
-    decamelize-keys "^1.0.0"
-    loud-rejection "^1.0.0"
-    minimist-options "^3.0.1"
-    normalize-package-data "^2.3.4"
-    read-pkg-up "^3.0.0"
-    redent "^2.0.0"
-    trim-newlines "^2.0.0"
-    yargs-parser "^10.0.0"
+meow@^6.1.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
+  integrity sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "^4.0.2"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
+meow@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-7.0.1.tgz#1ed4a0a50b3844b451369c48362eb0515f04c1dc"
+  integrity sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    arrify "^2.0.1"
+    camelcase "^6.0.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "^4.0.2"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
 
 merge-deep@^3.0.2:
   version "3.0.2"
@@ -20467,13 +22323,6 @@ merge-source-map@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
-merge-stream@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
-  integrity sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=
-  dependencies:
-    readable-stream "^2.0.1"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -20504,511 +22353,25 @@ merge2@^1.2.3, merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
   integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
 
-merge@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
-  integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
-
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-metro-babel-register@0.51.0:
-  version "0.51.0"
-  resolved "https://registry.yarnpkg.com/metro-babel-register/-/metro-babel-register-0.51.0.tgz#d86d3f2d90b45c7a3c6ae67a53bd1e50bad7a24d"
-  integrity sha512-rhdvHFOZ7/ub019A3+aYs8YeLydb02/FAMsKr2Nz2Jlf6VUxWrMnrcT0NYX16F9TGdi2ulRlJ9dwvUmdhkk+Bw==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/register" "^7.0.0"
-    core-js "^2.2.2"
-    escape-string-regexp "^1.0.5"
-
-metro-babel-register@^0.48.1:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-babel-register/-/metro-babel-register-0.48.5.tgz#ece8131f959a1f7acf37af83c8e5696bfd0a448e"
-  integrity sha512-bJCessd7THqEfXrKEoj284XVjg9AGYbGqZiyV622l6ex9TvtVi1lToDY0TuAAuDXOm+V4vQXV7/HvR6JPP0dTQ==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/register" "^7.0.0"
-    core-js "^2.2.2"
-    escape-string-regexp "^1.0.5"
-
-metro-babel-transformer@0.51.0:
-  version "0.51.0"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.51.0.tgz#9ee5199163ac46b2057527b3f8cbd8b089ffc03e"
-  integrity sha512-M7KEY/hjD3E8tJEliWgI0VOSaJtqaznC0ItM6FiMrhoGDqqa1BvGofl+EPcKqjBSOV1UgExua/T1VOIWbjwQsw==
-  dependencies:
-    "@babel/core" "^7.0.0"
-
-metro-babel-transformer@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.51.1.tgz#97be9e2b96c78aa202b52ae05fb86f71327aef72"
-  integrity sha512-+tOnZZzOzufB86ASdfimUEGB1jBKsdsVpPdjNJZkueTFyvYlGqWDQKHM1w9bwKMeM/czPQ48Y6m8Bou6le0X4w==
-  dependencies:
-    "@babel/core" "^7.0.0"
-
-metro-babel7-plugin-react-transform@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.48.5.tgz#312eb0adf3764357c79b79acc6eb92646051b349"
-  integrity sha512-S0cA0msHBGw7PSwB6nAsvtHEpQXVwzKBaE4AibLpaBiIVdWkYpIOok653zs9x+E9QvQgcghAnlVnDV+MDM+rSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-
-metro-babel7-plugin-react-transform@0.51.0:
-  version "0.51.0"
-  resolved "https://registry.yarnpkg.com/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.51.0.tgz#af27dd81666b91f05d2b371b0d6d283c585e38b6"
-  integrity sha512-dZ95kXcE2FJMoRsYhxr7YLCbOlHWKwe0bOpihRhfImDTgFfuKIzU4ROQwMUbE0NCbzB+ATFsa2FZ3pHDJ5GI0w==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-
-metro-babel7-plugin-react-transform@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.51.1.tgz#9cce2c340cc4006fc82aa6dfab27af22d592607e"
-  integrity sha512-wzn4X9KgmAMZ7Bi6v9KxA7dw+AHGL0RODPxU5NDJ3A6d0yERvzfZ3qkzWhz8jbFkVBK12cu5DTho3HBazKQDOw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-
-metro-babel7-plugin-react-transform@0.54.1:
-  version "0.54.1"
-  resolved "https://registry.yarnpkg.com/metro-babel7-plugin-react-transform/-/metro-babel7-plugin-react-transform-0.54.1.tgz#5335b810284789724886dc483d5bde9c149a1996"
-  integrity sha512-jWm5myuMoZAOhoPsa8ItfDxdTcOzKhTTzzhFlbZnRamE7i9qybeMdrZt8KHQpF7i2p/mKzE9Yhf4ouOz5K/jHg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-
-metro-cache@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.48.5.tgz#5ab3ad13c9df527f4196f0de096a3d496db97a6b"
-  integrity sha512-vlUf3A6+U3LXcf6wAn42N22q1h7MMoopA25w5KR4Flwd0xKVokxHwsTo9v06vpn4gqFtpXWCpEJSBaYRrWYJwg==
-  dependencies:
-    jest-serializer "23.0.1"
-    metro-core "0.48.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-
-metro-cache@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.51.1.tgz#d0b296eab8e009214413bba87e4eac3d9b44cd04"
-  integrity sha512-0m1+aicsw77LVAehNuTxDpE1c/7Xv/ajRD+UL/lFCWUxnrjSbxVtIKr8l5DxEY11082c1axVRuaV9e436W+eXg==
-  dependencies:
-    jest-serializer "24.0.0-alpha.6"
-    metro-core "0.51.1"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-
-metro-config@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.48.5.tgz#05624064617eb648ee6e336951b60ac665230a45"
-  integrity sha512-b+EmFgBOAEUM5THjJ2EU6CJxnULLC5V1Q8S8dz4xX4v96eLIsRCLPrXgYKATHJTVi0qw99ATVRsOBZVZ77fwjg==
-  dependencies:
-    cosmiconfig "^5.0.5"
-    metro "0.48.5"
-    metro-cache "0.48.5"
-    metro-core "0.48.5"
-    pretty-format "^23.4.1"
-
-metro-config@0.51.1, metro-config@^0.51.0:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.51.1.tgz#8f1a241ce2c0b521cd492c39bc5c6c69e3397b82"
-  integrity sha512-WCNd0tTI9gb/ubgTqK1+ljZL4b3hsXVinsOAtep4nHiVb6DSDdbO2yXDD2rpYx3NE6hDRMFS9HHg6G0139pAqQ==
-  dependencies:
-    cosmiconfig "^5.0.5"
-    metro "0.51.1"
-    metro-cache "0.51.1"
-    metro-core "0.51.1"
-    pretty-format "24.0.0-alpha.6"
-
-metro-core@0.48.5, metro-core@^0.48.1:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.48.5.tgz#eef57d0ea947cfd2e44d86b20592a321ca234b89"
-  integrity sha512-Yp0BOAHhxf/qdNkwJhemVdD2Y59iyaTjwxUimCmeD8u5VEL6mLgEC1S0KczyWEiAgX3Fs48rezCAcx3mo67wXg==
-  dependencies:
-    jest-haste-map "23.5.0"
-    lodash.throttle "^4.1.1"
-    metro-resolver "0.48.5"
-    wordwrap "^1.0.0"
-
-metro-core@0.51.1, metro-core@^0.51.0:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.51.1.tgz#e7227fb1dd1bb3f953272fad9876e6201140b038"
-  integrity sha512-sG1yACjdFqmIzZN50HqLTKUMp1oy0AehHhmIuYeIllo1DjX6Y2o3UAT3rGP8U+SAqJGXf/OWzl6VNyRPGDENfA==
-  dependencies:
-    jest-haste-map "24.0.0-alpha.6"
-    lodash.throttle "^4.1.1"
-    metro-resolver "0.51.1"
-    wordwrap "^1.0.0"
-
-metro-memory-fs@^0.48.1:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-memory-fs/-/metro-memory-fs-0.48.5.tgz#ae390f494ff0d54f2fb60531a3e4b83282a6b66d"
-  integrity sha512-dxN0dBtMOR1CvyRIOM/NE+uFirybWb4y2PZke0Z8bpYn6ttmv8ZF3PVdFxJf9v9irVBSOIPD0mD5zllxQkXzhg==
-
-metro-memory-fs@^0.51.0:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-memory-fs/-/metro-memory-fs-0.51.1.tgz#624291f5956b0fd11532d80b1b85d550926f96c9"
-  integrity sha512-dXVUpLPLwfQcYHd1HlqHGVzBsiwvUdT92TDSbdc10152TP+iynHBqLDWbxt0MAtd6c/QXwOuGZZ1IcX3+lv5iw==
-
-metro-minify-uglify@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.48.5.tgz#c8e878ce31adc1f9af3550917da7028b9eb91bc1"
-  integrity sha512-tiHVYlUMuL91YjQPx9BzzzXy5jAAA5SWLqlvWfmM6m9faWtFeCv8Se27vVNuPDkOPYyL8qPCRhUpZMUhA0yN2g==
-  dependencies:
-    uglify-es "^3.1.9"
-
-metro-minify-uglify@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.51.1.tgz#60cd8fe4d3e82d6670c717b8ddb52ae63199c0e4"
-  integrity sha512-HAqd/rFrQ6mnbqVAszDXIKTg2rqHlY9Fm8DReakgbkAeyMbF2mH3kEgtesPmTrhajdFk81UZcNSm6wxj1JMgVg==
-  dependencies:
-    uglify-es "^3.1.9"
-
-metro-react-native-babel-preset@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.48.5.tgz#cafa1c3ea326a447a89031928b0932f38a65815c"
-  integrity sha512-ldG1bsusB5zlS1fhAiSLRjUA7I/Chn/dniaXTlkUpgiqyEAaDDmqhkDJ8gyZw3rhlLMVswlBd3o6I8yYti+57w==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-object-assign" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    metro-babel7-plugin-react-transform "0.48.5"
-    react-transform-hmr "^1.0.4"
-
-metro-react-native-babel-preset@0.51.0:
-  version "0.51.0"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.51.0.tgz#978d960acf2d214bbbe43e59145878d663bd07de"
-  integrity sha512-Y/aPeLl4RzY8IEAneOyDcpdjto/8yjIuX9eUWRngjSqdHYhGQtqiSBpfTpo0BvXpwNRLwCLHyXo58gNpckTJFw==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-object-assign" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    metro-babel7-plugin-react-transform "0.51.0"
-    react-transform-hmr "^1.0.4"
-
-metro-react-native-babel-preset@0.51.1, metro-react-native-babel-preset@^0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.51.1.tgz#44aeeedfea37f7c2ab8f6f273fa71b90fe65f089"
-  integrity sha512-e9tsYDFhU70gar0jQWcZXRPJVCv4k7tEs6Pm74wXO2OO/T1MEumbvniDIGwGG8bG8RUnYdHhjcaiub2Vc5BRWw==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-object-assign" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    metro-babel7-plugin-react-transform "0.51.1"
-    react-transform-hmr "^1.0.4"
-
-metro-react-native-babel-preset@^0.54.1:
-  version "0.54.1"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.54.1.tgz#b8f03865c381841d7f8912e7ba46804ea3a928b8"
-  integrity sha512-Hfr32+u5yYl3qhYQJU8NQ26g4kQlc3yFMg7keVR/3H8rwBIbFqXgsKt8oe0dOrv7WvrMqBHhDtVdU9ls3sSq8g==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-object-assign" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    metro-babel7-plugin-react-transform "0.54.1"
-    react-transform-hmr "^1.0.4"
-
-metro-react-native-babel-transformer@0.51.0:
-  version "0.51.0"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.51.0.tgz#57a695e97a19d95de63c9633f9d0dc024ee8e99a"
-  integrity sha512-VFnqtE0qrVmU1HV9B04o53+NZHvDwR+CWCoEx4+7vCqJ9Tvas741biqCjah9xtifoKdElQELk6x0soOAWCDFJA==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    babel-preset-fbjs "^3.0.1"
-    metro-babel-transformer "0.51.0"
-    metro-react-native-babel-preset "0.51.0"
-
-metro-react-native-babel-transformer@^0.51.0:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.51.1.tgz#bac34f988c150c725cd1875c13701cc2032615f9"
-  integrity sha512-D0KU+JPb/Z76nUWt3+bkjKggOlGvqAVI2BpIH2JFKprpUyBjWaCRqHnkBfZGixYwUfmu93MIlKJWr6iKzzFrlg==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    babel-preset-fbjs "^3.0.1"
-    metro-babel-transformer "0.51.1"
-    metro-react-native-babel-preset "0.51.1"
-
-metro-resolver@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.48.5.tgz#d2ff84afab13ec3962685953ebd03d878e1f4c36"
-  integrity sha512-lScSpLJKZMmNPRwvcY6zj28AwMOcI1M5bCCv+m06VWcISCTq1KlaKVwqLKmFgUtPkoFtFLD+PVKRKCRUxj1opg==
-  dependencies:
-    absolute-path "^0.0.0"
-
-metro-resolver@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.51.1.tgz#4c26f0baee47d30250187adca3d34c902e627611"
-  integrity sha512-zmWbD/287NDA/jLPuPV0hne/YMMSG0dljzu21TYMg2lXRLur/zROJHHhyepZvuBHgInXBi4Vhr2wvuSnY39SuA==
-  dependencies:
-    absolute-path "^0.0.0"
-
-metro-source-map@0.48.5:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.48.5.tgz#ab738f5cea4627fdae839d09237f85dd13d972ab"
-  integrity sha512-+BbcU9vfEl/XhMlVV0RwuHuEkai4lq7RmlQkxgoOoWl1u0yXCAPRZ5sqa326fPlJzElOR3cp0y7+Oc2nbIguyg==
-  dependencies:
-    source-map "^0.5.6"
-
-metro-source-map@0.51.1:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.51.1.tgz#1a8da138e98e184304d5558b4f92a5c2141822d0"
-  integrity sha512-JyrE+RV4YumrboHPHTGsUUGERjQ681ImRLrSYDGcmNv4tfpk9nvAK26UAas4IvBYFCC9oW90m0udt3kaQGv59Q==
-  dependencies:
-    source-map "^0.5.6"
-
-metro@0.48.5, metro@^0.48.1:
-  version "0.48.5"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.48.5.tgz#94fb4476ea18d3cf2e96e5c37dc85a21b69b4bf1"
-  integrity sha512-aCarzjxdYqh+9I40bF+Hh1ayrwfPrnDwVOvpQg3VZFWU4wfeMiJb+tzeRN9p94cC/MKhBTOjRmUF3plzrHoe0w==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/generator" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    "@babel/plugin-external-helpers" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    absolute-path "^0.0.0"
-    async "^2.4.0"
-    babel-preset-fbjs "^3.0.1"
-    chalk "^1.1.1"
-    concat-stream "^1.6.0"
-    connect "^3.6.5"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    eventemitter3 "^3.0.0"
-    fbjs "^1.0.0"
-    fs-extra "^1.0.0"
-    graceful-fs "^4.1.3"
-    image-size "^0.6.0"
-    jest-docblock "23.2.0"
-    jest-haste-map "23.5.0"
-    jest-worker "23.2.0"
-    json-stable-stringify "^1.0.1"
-    lodash.throttle "^4.1.1"
-    merge-stream "^1.0.1"
-    metro-cache "0.48.5"
-    metro-config "0.48.5"
-    metro-core "0.48.5"
-    metro-minify-uglify "0.48.5"
-    metro-react-native-babel-preset "0.48.5"
-    metro-resolver "0.48.5"
-    metro-source-map "0.48.5"
-    mime-types "2.1.11"
-    mkdirp "^0.5.1"
-    node-fetch "^2.2.0"
-    nullthrows "^1.1.0"
-    react-transform-hmr "^1.0.4"
-    resolve "^1.5.0"
-    rimraf "^2.5.4"
-    serialize-error "^2.1.0"
-    source-map "^0.5.6"
-    temp "0.8.3"
-    throat "^4.1.0"
-    wordwrap "^1.0.0"
-    write-file-atomic "^1.2.0"
-    ws "^1.1.0"
-    xpipe "^1.0.5"
-    yargs "^9.0.0"
-
-metro@0.51.1, metro@^0.51.0:
-  version "0.51.1"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.51.1.tgz#b0aad4731593b9f244261bad1abb2a006d1c8969"
-  integrity sha512-nM0dqn8LQlMjhChl2fzTUq2EWiUebZM7nkesD9vQe47W10bj/tbRLPiIIAxht6SRDbPd/hRA+t39PxLhPSKEKg==
-  dependencies:
-    "@babel/core" "^7.0.0"
-    "@babel/generator" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    "@babel/plugin-external-helpers" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    absolute-path "^0.0.0"
-    async "^2.4.0"
-    babel-preset-fbjs "^3.0.1"
-    buffer-crc32 "^0.2.13"
-    chalk "^2.4.1"
-    concat-stream "^1.6.0"
-    connect "^3.6.5"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    eventemitter3 "^3.0.0"
-    fbjs "^1.0.0"
-    fs-extra "^1.0.0"
-    graceful-fs "^4.1.3"
-    image-size "^0.6.0"
-    invariant "^2.2.4"
-    jest-haste-map "24.0.0-alpha.6"
-    jest-worker "24.0.0-alpha.6"
-    json-stable-stringify "^1.0.1"
-    lodash.throttle "^4.1.1"
-    merge-stream "^1.0.1"
-    metro-babel-transformer "0.51.1"
-    metro-cache "0.51.1"
-    metro-config "0.51.1"
-    metro-core "0.51.1"
-    metro-minify-uglify "0.51.1"
-    metro-react-native-babel-preset "0.51.1"
-    metro-resolver "0.51.1"
-    metro-source-map "0.51.1"
-    mime-types "2.1.11"
-    mkdirp "^0.5.1"
-    node-fetch "^2.2.0"
-    nullthrows "^1.1.0"
-    react-transform-hmr "^1.0.4"
-    resolve "^1.5.0"
-    rimraf "^2.5.4"
-    serialize-error "^2.1.0"
-    source-map "^0.5.6"
-    temp "0.8.3"
-    throat "^4.1.0"
-    wordwrap "^1.0.0"
-    write-file-atomic "^1.2.0"
-    ws "^1.1.5"
-    xpipe "^1.0.5"
-    yargs "^9.0.0"
-
 microevent.ts@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
   integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
 
-micromatch@^2.1.5, micromatch@^2.3.11:
+micromatch@4.x, micromatch@^4.0.0, micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
+micromatch@^2.1.5:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
@@ -21046,14 +22409,6 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0, micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -21062,29 +22417,17 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.42.0, "mime-db@>= 1.40.0 < 2":
-  version "1.42.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
-  integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
-
-mime-db@~1.23.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.23.0.tgz#a31b4070adaea27d732ea333740a64d0ec9a6659"
-  integrity sha1-oxtAcK2uon1zLqMzdApk0OyaZlk=
-
-mime-types@2.1.11:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.11.tgz#c259c471bda808a85d6cd193b430a5fae4473b3c"
-  integrity sha1-wlnEcb2oCKhdbNGTtDCl+uRHOzw=
-  dependencies:
-    mime-db "~1.23.0"
+mime-db@1.44.0, "mime-db@>= 1.43.0 < 2":
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
 
-mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.19, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.25"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.25.tgz#39772d46621f93e2a80a856c53b86a62156a6437"
-  integrity sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==
+mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.25, mime-types@^2.1.26, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
   dependencies:
-    mime-db "1.42.0"
+    mime-db "1.44.0"
 
 mime-types@~1.0.1:
   version "1.0.2"
@@ -21096,16 +22439,21 @@ mime@1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
-mime@1.6.0, mime@^1.2.11, mime@^1.3.4, mime@^1.4.1, mime@^1.6.0:
+mime@1.6.0, mime@^1.2.11, mime@^1.4.1, mime@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.0.3, mime@^2.3.1, mime@^2.4.0, mime@^2.4.4:
+mime@2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
   integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
 
+mime@^2.0.3, mime@^2.3.1, mime@^2.4.4:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.5.tgz#d8de2ecb92982dedbb6541c9b6841d7f218ea009"
+  integrity sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==
+
 mime@~1.2.11:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
@@ -21126,11 +22474,6 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
-mimic-response@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.0.0.tgz#996a51c60adf12cb8a87d7fb8ef24c2f3d5ebb46"
-  integrity sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -21138,6 +22481,11 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+min-indent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
+  integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
+
 mini-css-extract-plugin@0.5.0, mini-css-extract-plugin@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
@@ -21147,10 +22495,10 @@ mini-css-extract-plugin@0.5.0, mini-css-extract-plugin@^0.5.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
-mini-css-extract-plugin@0.8.0, mini-css-extract-plugin@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
-  integrity sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==
+mini-css-extract-plugin@0.9.0, mini-css-extract-plugin@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
+  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "1.9.1"
@@ -21182,15 +22530,24 @@ minimist-options@^3.0.1:
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
 
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
+minimist-options@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
 
-minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+minimist@1.2.5, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+minimist@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.1.tgz#827ba4e7593464e7c221e8c5bed930904ee2c455"
+  integrity sha512-GY8fANSrTMfBVfInqJAY41QkOM+upUTytK1jZ0c8+3HdHrJxBJ3rF5i9moClXTE8uUSnUo8cAsCoxDXvSY4DHg==
 
 minimist@~0.0.1:
   version "0.0.10"
@@ -21212,21 +22569,13 @@ minipass-flush@^1.0.5:
     minipass "^3.0.0"
 
 minipass-pipeline@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz#3dcb6bb4a546e32969c7ad710f2c79a86abba93a"
-  integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz#55f7839307d74859d6e8ada9c3ebe72cec216a34"
+  integrity sha512-cFOknTvng5vqnwOpDsZTWhNll6Jf8o2x+/diplafmxpuIymAjzoOolZG0VvQf3V2HgqzJNhnuKHYp2BqDgz8IQ==
   dependencies:
     minipass "^3.0.0"
 
-minipass@2.3.5:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
-  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minipass@^2.2.0, minipass@^2.3.3, minipass@^2.3.5, minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+minipass@^2.2.0, minipass@^2.3.5, minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
   integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
@@ -21235,19 +22584,27 @@ minipass@^2.2.0, minipass@^2.3.3, minipass@^2.3.5, minipass@^2.6.0, minipass@^2.
     yallist "^3.0.0"
 
 minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
-  integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
   dependencies:
     yallist "^4.0.0"
 
-minizlib@^1.1.0, minizlib@^1.2.1:
+minizlib@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
   integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
   dependencies:
     minipass "^2.9.0"
 
+minizlib@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3"
+  integrity sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -21264,11 +22621,6 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
-mithril@*:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mithril/-/mithril-2.0.4.tgz#d125969d992b924c7185d24ff92d997e5c00116b"
-  integrity sha512-mgw+DMZlhMS4PpprF6dl7ZoeZq5GGcAuWnrg5e12MvaGauc4jzWsDZtVGRCktsiQczOEUr2K5teKbE5k44RlOg==
-
 mithril@^1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/mithril/-/mithril-1.1.7.tgz#505d7d77fe164ff16969de8f9b6eda42e0346cbe"
@@ -21290,6 +22642,11 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
+mkdirp-classic@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
+
 mkdirp-promise@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/mkdirp-promise/-/mkdirp-promise-5.0.1.tgz#e9b8f68e552c68a9c1713b84883f7a1dd039b8a1"
@@ -21297,22 +22654,44 @@ mkdirp-promise@^5.0.1:
   dependencies:
     mkdirp "*"
 
-mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
+mkdirp@*, mkdirp@1.x, mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
+mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@~0.5.0, mkdirp@~0.5.1, mkdirp@~0.5.x:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
   dependencies:
-    minimist "0.0.8"
+    minimist "^1.2.5"
+
+mkdirp@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.3.tgz#4cf2e30ad45959dddea53ad97d518b6c8205e1ea"
+  integrity sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==
 
 mktemp@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
   integrity sha1-bQUVYRyKjITkhKogABKbmOmB/ws=
 
-mock-fs@^4.8.0:
-  version "4.10.3"
-  resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.10.3.tgz#d0550663dd2b5d33a7c1b8713c6925aab07a04ae"
-  integrity sha512-bcukePBvuA3qovmq0Qtqu9+1APCIGkFHnsozrPIVromt5XFGGgkQSfaN0H6RI8gStHkO/hRgimvS3tooNes4pQ==
+mocha-list-tests@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mocha-list-tests/-/mocha-list-tests-1.0.2.tgz#4749f76bfd8df7d241ffbe8983d2a4eca1ff0ad7"
+  integrity sha512-uHoDjYesxoRcR3CgfrohIfcXnj05tysH9QIdY46SHl+je7u3DlxwfIEMJ7Tj8jyiiXTSF8FqHdJiE8IRNeQ0Wg==
+
+mock-fs@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.12.0.tgz#a5d50b12d2d75e5bec9dac3b67ffe3c41d31ade4"
+  integrity sha512-/P/HtrlvBxY4o/PzXY9cCNBrdylDNxg7gnrv2sMNxj+UJ2m8jSpl0/A6fuJeNAWr99ZvGWH8XCbE0vmnM5KupQ==
+
+modify-code@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/modify-code/-/modify-code-1.2.0.tgz#f9295996c03ce2172dd68726a7936db39e2db2c5"
+  integrity sha512-5j/jvLnY5hPIGAm8JDb9qGr+UKd88R0pD8KQWqn0aABKZGbslk+PHMeZMy0gSpNTU8lQlMnFWe5kNiar8VOk3w==
+  dependencies:
+    source-map "^0.7.3"
 
 modify-values@^1.0.0:
   version "1.0.1"
@@ -21320,16 +22699,16 @@ modify-values@^1.0.0:
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
 module-deps@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.1.tgz#cfe558784060e926824f474b4e647287837cda50"
-  integrity sha512-UnEn6Ah36Tu4jFiBbJVUtt0h+iXqxpLqDvPS8nllbw5RZFmNJ1+Mz5BjYnM9ieH80zyxHkARGLnMIHlPK5bu6A==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.2.tgz#d8a15c2265dfc119153c29bb47386987d0ee423b"
+  integrity sha512-a9y6yDv5u5I4A+IPHTnqFxcaKr4p50/zxTjcQJaX2ws9tN/W6J6YXnEKhqRyPhl494dkcxx951onSKVezmI+3w==
   dependencies:
     JSONStream "^1.0.3"
     browser-resolve "^1.7.0"
     cached-path-relative "^1.0.2"
     concat-stream "~1.6.0"
     defined "^1.0.0"
-    detective "^5.0.2"
+    detective "^5.2.0"
     duplexer2 "^0.1.2"
     inherits "^2.0.1"
     parents "^1.0.0"
@@ -21340,26 +22719,31 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-moment@2.24.0, moment@>=1.6.0, moment@^2.10.6, moment@^2.18.1:
+moment@2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
-moo@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
-  integrity sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw==
+moment@>=1.6.0, moment@^2.10.6, moment@^2.18.1:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
+  integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
 
-morgan@^1.9.0, morgan@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.1.tgz#0a8d16734a1d9afbc824b99df87e738e58e2da59"
-  integrity sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==
+moo@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
+  integrity sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==
+
+morgan@^1.9.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
+  integrity sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==
   dependencies:
-    basic-auth "~2.0.0"
+    basic-auth "~2.0.1"
     debug "2.6.9"
-    depd "~1.1.2"
+    depd "~2.0.0"
     on-finished "~2.3.0"
-    on-headers "~1.0.1"
+    on-headers "~1.0.2"
 
 mount-point@^3.0.0:
   version "3.0.0"
@@ -21396,6 +22780,13 @@ move-file@^1.1.0:
     make-dir "^3.0.0"
     path-exists "^3.0.0"
 
+move-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/move-file/-/move-file-2.0.0.tgz#83ffa309b5d7f69d518b28e1333e2ffadf331e3e"
+  integrity sha512-cdkdhNCgbP5dvS4tlGxZbD+nloio9GIimP57EjqFhwLcMjnU+XJKAZzlmg/TN/AK1LuNAdTSvm3CPPP4Xkv0iQ==
+  dependencies:
+    path-exists "^4.0.0"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -21444,18 +22835,10 @@ multimatch@^3.0.0:
     arrify "^1.0.1"
     minimatch "^3.0.4"
 
-multiyargs@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/multiyargs/-/multiyargs-1.0.0.tgz#006e2e409eb6c155220d1eb5323dd09bfd34b828"
-  integrity sha1-AG4uQJ62wVUiDR61Mj3Qm/00uCg=
-  dependencies:
-    debug "2.6.x"
-    promise-do-whilst "1.0.x"
-
 mustache@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mustache/-/mustache-3.1.0.tgz#9fba26e7aefc5709f07ff585abb7e0abced6c372"
-  integrity sha512-3Bxq1R5LBZp7fbFPZzFe5WN4s0q3+gxZaZuZVY+QctYJiCiVgXHOTIC0/HgZuOPFt/6BQcx5u0H2CUOxT/RoGQ==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-3.2.1.tgz#89e78a9d207d78f2799b1e95764a25bf71a28322"
+  integrity sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA==
 
 mute-stream@0.0.7:
   version "0.0.7"
@@ -21476,7 +22859,7 @@ mv@2.1.1, mv@~2:
     ncp "~2.0.0"
     rimraf "~2.4.0"
 
-mz@^2.5.0, mz@^2.7.0:
+mz@^2.4.0, mz@^2.5.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -21495,9 +22878,9 @@ najax@^1.0.3:
     qs "^6.2.0"
 
 nan@^2.12.1, nan@^2.13.2, nan@^2.14.0:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
-  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -21516,41 +22899,32 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-napi-build-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.1.tgz#1381a0f92c39d66bf19852e7873432fc2123e508"
-  integrity sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA==
+napi-macros@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b"
+  integrity sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==
 
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-ncp@2.0.0, ncp@~2.0.0:
+ncp@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
   integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
 nearley@^2.7.10:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.0.tgz#37717781d0fd0f2bfc95e233ebd75678ca4bda46"
-  integrity sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.3.tgz#ae3b040e27616b5348102c436d1719209476a5a1"
+  integrity sha512-FpAy1PmTsUpOtgxr23g4jRNvJHYzZEW2PixXeSzksLR/ykPfwKhAodc2+9wQhY+JneWLcvkDw6q7FJIsIdF/aQ==
   dependencies:
     commander "^2.19.0"
-    moo "^0.4.3"
+    moo "^0.5.0"
     railroad-diagrams "^1.0.0"
     randexp "0.4.6"
     semver "^5.4.1"
 
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -21566,12 +22940,7 @@ nested-error-stacks@^2.0.0:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
   integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
 
-nested-object-assign@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
-  integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
-
-next-tick@^1.0.0, next-tick@~1.0.0:
+next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
@@ -21588,12 +22957,13 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
-node-abi@^2.7.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.12.0.tgz#40e9cfabdda1837863fa825e7dfa0b15686adf6f"
-  integrity sha512-VhPBXCIcvmo/5K8HPmnWJyyhvgKxnHTUMXR/XwGHV68+wrgkzST4UmQrY/XszSWA5dtnXpNp528zkcyJ/pzVcw==
+no-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
+  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
   dependencies:
-    semver "^5.4.1"
+    lower-case "^2.0.1"
+    tslib "^1.10.0"
 
 node-addon-api@^1.7.1:
   version "1.7.1"
@@ -21618,9 +22988,9 @@ node-dir@^0.1.10, node-dir@^0.1.17:
     minimatch "^3.0.2"
 
 node-fetch-npm@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz#7258c9046182dca345b4208eda918daf33697ff7"
-  integrity sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz#6507d0e17a9ec0be3bec516958a497cec54bf5a4"
+  integrity sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==
   dependencies:
     encoding "^0.1.11"
     json-parse-better-errors "^1.0.0"
@@ -21644,20 +23014,20 @@ node-fetch@^2.2.0, node-fetch@^2.3.0, node-fetch@^2.5.0, node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-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==
-
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
   integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
-node-forge@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.1.tgz#775368e6846558ab6676858a4d8c6e8d16c677b5"
-  integrity sha512-G6RlQt5Sb4GMBzXvhfkeFmbqR6MzhtnT7VTHuLadjkii3rdYHNdw0m8zA4BTxVIh68FicCQ2NSUANpsqkr9jvQ==
+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==
+
+node-gyp-build@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb"
+  integrity sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==
 
 node-gyp@^3.8.0:
   version "3.8.0"
@@ -21695,27 +23065,36 @@ node-gyp@^4.0.0:
     which "1"
 
 node-gyp@^5.0.2:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-5.0.5.tgz#f6cf1da246eb8c42b097d7cd4d6c3ce23a4163af"
-  integrity sha512-WABl9s4/mqQdZneZHVWVG4TVr6QQJZUC6PAx47ITSk9lreZ1n+7Z9mMAIbA3vnO4J9W20P7LhCxtzfWsAD/KDw==
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-5.1.1.tgz#eb915f7b631c937d282e33aed44cb7a025f62a3e"
+  integrity sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==
   dependencies:
-    env-paths "^1.0.0"
-    glob "^7.0.3"
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    nopt "2 || 3"
-    npmlog "0 || 1 || 2 || 3 || 4"
-    request "^2.87.0"
-    rimraf "2"
-    semver "~5.3.0"
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.1.2"
+    request "^2.88.0"
+    rimraf "^2.6.3"
+    semver "^5.7.1"
     tar "^4.4.12"
-    which "1"
+    which "^1.3.1"
 
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
+node-ipc@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.1.tgz#4e245ed6938e65100e595ebc5dc34b16e8dd5d69"
+  integrity sha512-FAyICv0sIRJxVp3GW5fzgaf9jwwRQxAKDJlmNFUL5hOy+W4X/I5AypyHoq0DXXbo9o/gt79gj++4cMr4jVWE/w==
+  dependencies:
+    event-pubsub "4.3.0"
+    js-message "1.0.5"
+    js-queue "2.0.0"
+
 node-libs-browser@^2.0.0, node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -21764,7 +23143,7 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.0.1, node-notifier@^5.2.1, node-notifier@^5.4.2:
+node-notifier@^5.0.1, node-notifier@^5.4.2:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
   integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
@@ -21775,40 +23154,38 @@ node-notifier@^5.0.1, node-notifier@^5.2.1, node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
-  integrity sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
-
-node-releases@^1.1.25, node-releases@^1.1.29:
-  version "1.1.41"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.41.tgz#57674a82a37f812d18e3b26118aefaf53a00afed"
-  integrity sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==
+node-notifier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
+  integrity sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==
   dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.1.1"
     semver "^6.3.0"
+    shellwords "^0.1.1"
+    which "^1.3.1"
 
-node-releases@^1.1.42:
-  version "1.1.43"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.43.tgz#2c6ca237f88ce11d49631f11190bb01f8d0549f2"
-  integrity sha512-Rmfnj52WNhvr83MvuAWHEqXVoZXCcDQssSOffU4n4XOL9sPrP61mSZ88g25NqmABDvH7PiAlFCzoSCSdzA293w==
+node-notifier@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-7.0.1.tgz#a355e33e6bebacef9bf8562689aed0f4230ca6f9"
+  integrity sha512-VkzhierE7DBmQEElhTGJIoiZa1oqRijOtgOlsXg32KrJRXsPy0NXFBqWGW/wTswnJlDCs5viRYaqWguqzsKcmg==
   dependencies:
-    semver "^6.3.0"
+    growly "^1.3.0"
+    is-wsl "^2.1.1"
+    semver "^7.2.1"
+    shellwords "^0.1.1"
+    uuid "^7.0.3"
+    which "^2.0.2"
+
+node-releases@^1.1.29, node-releases@^1.1.52, node-releases@^1.1.53:
+  version "1.1.56"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.56.tgz#bc054a417d316e3adac90eafb7e1932802f28705"
+  integrity sha512-EVo605FhWLygH8a64TjgpjyHYOihkxECwX1bHHr8tETJKWEiWS2YJjPbvsX2jFjnjTNEgBCmk9mLjKG1Mf11cw==
 
-node-sass@^4.12.0:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
-  integrity sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==
+node-sass@^4.12.0, node-sass@^4.14.0:
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"
+  integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -21824,7 +23201,7 @@ node-sass@^4.12.0:
     node-gyp "^3.8.0"
     npmlog "^4.0.0"
     request "^2.88.0"
-    sass-graph "^2.2.4"
+    sass-graph "2.2.5"
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
@@ -21833,15 +23210,21 @@ node-uuid@~1.4.0:
   resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907"
   integrity sha1-sEDrCSOWivq/jTL7HxfxFn/auQc=
 
-noop-fn@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/noop-fn/-/noop-fn-1.0.0.tgz#5f33d47f13d2150df93e0cb036699e982f78ffbf"
-  integrity sha1-XzPUfxPSFQ35PgywNmmemC94/78=
-
-noop-logger@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
-  integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
+nodemon@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.4.tgz#55b09319eb488d6394aa9818148c0c2d1c04c416"
+  integrity sha512-Ltced+hIfTmaS28Zjv1BM552oQ3dbwPqI4+zI0SLgq+wpJhSyqgYude/aZa/3i31VCQWMfXJVxvu86abcam3uQ==
+  dependencies:
+    chokidar "^3.2.2"
+    debug "^3.2.6"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.7"
+    semver "^5.7.1"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.2"
+    update-notifier "^4.0.0"
 
 "nopt@2 || 3", nopt@^3.0.6:
   version "3.0.6"
@@ -21851,13 +23234,20 @@ noop-logger@^0.1.1:
     abbrev "1"
 
 nopt@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
-  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
+  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
   dependencies:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
 normalize-html-whitespace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz#5e3c8e192f1b06c3b9eee4b7e7f28854c7601e34"
@@ -21873,6 +23263,11 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379"
+  integrity sha1-MtDkcvkf80VwHBWoMRAY07CpA3k=
+
 normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -21920,9 +23315,18 @@ normalize-url@^4.1.0:
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
 npm-bundled@^1.0.1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
-  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-install-checks@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-4.0.0.tgz#a37facc763a2fde0497ef2c6d0ac7c3fbe00d7b4"
+  integrity sha512-09OmyDkNLYwqKPOnbI8exiOZU2GVVmQp7tgez2BPi5OZC8M82elDAps7sxC4l//uSUtotWqoEIDwjRvWH4qz8w==
+  dependencies:
+    semver "^7.1.1"
 
 npm-lifecycle@^2.1.0:
   version "2.1.1"
@@ -21939,9 +23343,9 @@ npm-lifecycle@^2.1.0:
     which "^1.3.1"
 
 npm-lifecycle@^3.1.2:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-3.1.4.tgz#de6975c7d8df65f5150db110b57cce498b0b604c"
-  integrity sha512-tgs1PaucZwkxECGKhC/stbEgFyc3TGh2TJcg2CDr6jbvQRdteHNhmMeljRzpe4wgFAXQADoy1cSqqi7mtiAa5A==
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz#9882d3642b8c82c815782a12e6a1bfeed0026309"
+  integrity sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==
   dependencies:
     byline "^5.0.0"
     graceful-fs "^4.1.15"
@@ -21957,17 +23361,21 @@ npm-logical-tree@^1.2.1:
   resolved "https://registry.yarnpkg.com/npm-logical-tree/-/npm-logical-tree-1.2.1.tgz#44610141ca24664cad35d1e607176193fd8f5b88"
   integrity sha512-AJI/qxDB2PWI4LG1CYN579AY1vCiNyWfkiquCsJWqntRu/WwimVrC8yXeILBFHDwxfOejxewlmnvW9XXjMlYIg==
 
-npm-package-arg@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.0.tgz#15ae1e2758a5027efb4c250554b85a737db7fcc1"
-  integrity sha512-zYbhP2k9DbJhA0Z3HKUePUgdB1x7MfIfKssC+WLPFMKTBZKpZh5m13PgexJjCq6KW7j17r0jHWcCpxEqnnncSA==
+npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-package-arg@8.0.1, npm-package-arg@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.0.1.tgz#9d76f8d7667b2373ffda60bb801a27ef71e3e270"
+  integrity sha512-/h5Fm6a/exByzFSTm7jAyHbgOqErl9qSNJDQF32Si/ZzgwT2TERVxRxn3Jurw1wflgyVVAxnFR4fRHPM7y1ClQ==
   dependencies:
-    hosted-git-info "^2.6.0"
-    osenv "^0.1.5"
-    semver "^5.5.0"
+    hosted-git-info "^3.0.2"
+    semver "^7.0.0"
     validate-npm-package-name "^3.0.0"
 
-"npm-package-arg@^4.0.0 || ^5.0.0 || ^6.0.0", npm-package-arg@^6.0.0, npm-package-arg@^6.1.0, npm-package-arg@^6.1.1:
+"npm-package-arg@^4.0.0 || ^5.0.0 || ^6.0.0", npm-package-arg@^6.0.0, npm-package-arg@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.1.tgz#02168cb0a49a2b75bf988a28698de7b529df5cb7"
   integrity sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==
@@ -21977,15 +23385,25 @@ npm-package-arg@6.1.0:
     semver "^5.6.0"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.1.12, npm-packlist@^1.1.6, npm-packlist@^1.4.4:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.6.tgz#53ba3ed11f8523079f1457376dd379ee4ea42ff4"
-  integrity sha512-u65uQdb+qwtGvEJh/DgQgW1Xg7sqeNbmxYyrvlNznaVTjV3E5P6F/EFjM+BVHXl7JJlsdG8A64M0XI8FI/IOlg==
+npm-packlist@^1.1.12, npm-packlist@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
+  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
+    npm-normalize-package-bin "^1.0.1"
 
-npm-pick-manifest@3.0.2, npm-pick-manifest@^3.0.0:
+npm-pick-manifest@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-6.0.0.tgz#bfde7abe95f2670aed1629a3c18245ccb3cc2eb8"
+  integrity sha512-PdJpXMvjqt4nftNEDpCgjBUF8yI3Q3MyuAmVB9nemnnCg32F4BPL/JFBfdj8DubgHCYUFQhtLWmBPvdsFtjWMg==
+  dependencies:
+    npm-install-checks "^4.0.0"
+    npm-package-arg "^8.0.0"
+    semver "^7.0.0"
+
+npm-pick-manifest@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz#f4d9e5fd4be2153e5f4e5f9b7be8dc419a99abb7"
   integrity sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==
@@ -21994,28 +23412,10 @@ npm-pick-manifest@3.0.2, npm-pick-manifest@^3.0.0:
     npm-package-arg "^6.0.0"
     semver "^5.4.1"
 
-npm-pick-manifest@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-2.2.3.tgz#32111d2a9562638bb2c8f2bf27f7f3092c8fae40"
-  integrity sha512-+IluBC5K201+gRU85vFlUwX3PFShZAbAgDNp2ewJdWMVSppdo/Zih0ul2Ecky/X7b51J7LrrUAP+XOmOCvYZqA==
-  dependencies:
-    figgy-pudding "^3.5.1"
-    npm-package-arg "^6.0.0"
-    semver "^5.4.1"
-
-npm-prefix@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/npm-prefix/-/npm-prefix-1.2.0.tgz#e619455f7074ba54cc66d6d0d37dd9f1be6bcbc0"
-  integrity sha1-5hlFX3B0ulTMZtbQ033Z8b5ry8A=
-  dependencies:
-    rc "^1.1.0"
-    shellsubstitute "^1.1.0"
-    untildify "^2.1.0"
-
 npm-profile@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-4.0.2.tgz#8272a71c19634d0dce9c35a5daf8ee589cbb0f52"
-  integrity sha512-VRsC04pvRH+9cF+PoVh2nTmJjiG21yu59IHpsBpkxk+jaGAV8lxx96G4SDc0jOHAkfWLXbc6kIph3dGAuRnotQ==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-4.0.4.tgz#28ee94390e936df6d084263ee2061336a6a1581b"
+  integrity sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==
   dependencies:
     aproba "^1.1.2 || 2"
     figgy-pudding "^3.4.1"
@@ -22034,9 +23434,9 @@ npm-registry-fetch@^3.8.0:
     npm-package-arg "^6.1.0"
 
 npm-registry-fetch@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-4.0.2.tgz#2b1434f93ccbe6b6385f8e45f45db93e16921d7a"
-  integrity sha512-Z0IFtPEozNdeZRPh3aHHxdG+ZRpzcbQaJLthsm3VhNf6DScicTFRHZzK82u8RsJUsUHkX+QH/zcB/5pmd20H4A==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-4.0.4.tgz#2da1ecf3f43d419d96abf313664291a4623d3ea5"
+  integrity sha512-6jb34hX/iYNQebqWUHtU8YF6Cjb1H6ouTFPClYsyiW6lpFkljTpdeftm53rRojtja1rKAvKNIIiTS5Sjpw4wsA==
   dependencies:
     JSONStream "^1.3.4"
     bluebird "^3.5.1"
@@ -22060,21 +23460,14 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-3.1.0.tgz#7f91be317f6a466efed3c9f2980ad8a4ee8b0fa5"
-  integrity sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==
-  dependencies:
-    path-key "^3.0.0"
-
 npm-run-path@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.0.tgz#d644ec1bd0569187d2a52909971023a0a58e8438"
-  integrity sha512-8eyAOAH+bYXFPSnNnKr3J+yoybe8O87Is5rtAQ8qRczJz1ajcsjg8l2oZqP+Ppx15Ii3S1vUTjQN2h4YO2tWWQ==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -22084,15 +23477,6 @@ npm-run-path@^4.0.0:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-npmlog@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-2.0.4.tgz#98b52530f2514ca90d09ec5b22c8846722375692"
-  integrity sha1-mLUlMPJRTKkNCexbIsiEZyI3VpI=
-  dependencies:
-    ansi "~0.3.1"
-    are-we-there-yet "~1.1.2"
-    gauge "~1.2.5"
-
 nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -22100,11 +23484,6 @@ nth-check@^1.0.2, nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
-nullthrows@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
-  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -22125,6 +23504,11 @@ oauth-sign@~0.3.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.3.0.tgz#cb540f93bb2b22a7d5941691a288d60e8ea9386e"
   integrity sha1-y1QPk7srIqfVlBaRoojWDo6pOG4=
 
+oauth-sign@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+  integrity sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -22154,6 +23538,11 @@ object-hash@^1.1.4, object-hash@^1.3.1:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
+object-hash@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
+  integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
+
 object-inspect@^1.6.0, object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
@@ -22164,10 +23553,13 @@ object-inspect@~1.4.0:
   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-is@^1.0.1, object-is@^1.0.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
 
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
@@ -22186,7 +23578,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.1, object.assign@^4.1.0:
+object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
@@ -22196,33 +23588,32 @@ object.assign@^4.0.1, object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.entries@^1.0.4, object.entries@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
-  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
+object.entries@^1.1.0, object.entries@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
+  integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.12.0"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.5"
     has "^1.0.3"
 
-object.fromentries@^2.0.0, "object.fromentries@^2.0.0 || ^1.0.0", object.fromentries@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
-  integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==
+object.fromentries@^2.0.0, "object.fromentries@^2.0.0 || ^1.0.0", object.fromentries@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
-  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
+  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -22246,13 +23637,13 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.0.4, object.values@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
-  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+object.values@^1.1.0, object.values@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.12.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
@@ -22281,12 +23672,12 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-on-headers@~1.0.1, on-headers@~1.0.2:
+on-headers@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -22312,28 +23703,30 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
-open@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-6.3.0.tgz#60d0b845ee38fae0631f5d739a21bd40e3d2a527"
-  integrity sha512-6AHdrJxPvAXIowO/aIaeHZ8CeMdDf7qCyRNq8NwJpinmCdXhz+NZR7ie1Too94lpciCDsG+qHGO9Mt0svA4OqA==
+open@7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
+  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
   dependencies:
-    is-wsl "^1.1.0"
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
 
-open@6.4.0, open@^6.3.0:
+open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
   integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
   dependencies:
     is-wsl "^1.1.0"
 
-open@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.0.0.tgz#7e52999b14eb73f90f0f0807fe93897c4ae73ec9"
-  integrity sha512-K6EKzYqnwQzk+/dzJAQSBORub3xlBTxMz+ntpZpH/LyCa1o6KjXhuN+2npAaI9jaSmU3R1Q8NWf4KUWcyytGsQ==
+open@^7.0.2, open@^7.0.3:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.4.tgz#c28a9d315e5c98340bf979fdcb2e58664aa10d83"
+  integrity sha512-brSA+/yq+b08Hsr4c8fsEW2CRzk1BmfN3SAK/5VCHQ9bdoZJ4qa/+AfR0xHjlbbZUyPkUHs1b8x1RqdyZdkVqQ==
   dependencies:
-    is-wsl "^2.1.0"
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
 
-opencollective-postinstall@^2.0.2:
+opencollective-postinstall@^2.0.0, opencollective-postinstall@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
   integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
@@ -22348,18 +23741,11 @@ opener@~1.4.0:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
   integrity sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=
 
-openurl@1.1.1, openurl@^1.1.1:
+openurl@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
   integrity sha1-OHW0sO96UsFW8NtB1GCduw+Us4c=
 
-opn@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-3.0.3.tgz#b6d99e7399f78d65c3baaffef1fb288e9b85243a"
-  integrity sha1-ttmec5n3jWXDuq/+8fsojpuFJDo=
-  dependencies:
-    object-assign "^4.0.1"
-
 opn@^5.1.0, opn@^5.3.0, opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -22374,7 +23760,7 @@ opn@latest:
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@0.6.x, optimist@^0.6.1, optimist@~0.6.0:
+optimist@0.6.x:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
   integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
@@ -22410,33 +23796,20 @@ optionator@^0.8.1, optionator@^0.8.2, optionator@^0.8.3:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-options@>=0.0.5:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
-  integrity sha1-7CLTEoBrtT5zF3Pnza788cZDEo8=
-
-ora@3.4.0, ora@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-3.4.0.tgz#bf0752491059a3ef3ed4c85097531de9fdbcd318"
-  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
+ora@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-4.0.3.tgz#752a1b7b4be4825546a7a3d59256fa523b6b6d05"
+  integrity sha512-fnDebVFyz309A73cqCipVL1fBZewq4vwgSHfxh43vVy31mbyoQ8sCH3Oeaog/owYOs/lLlGVPCISQonTneg6Pg==
   dependencies:
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-spinners "^2.0.0"
-    log-symbols "^2.2.0"
-    strip-ansi "^5.2.0"
+    chalk "^3.0.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.2.0"
+    is-interactive "^1.0.0"
+    log-symbols "^3.0.0"
+    mute-stream "0.0.8"
+    strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-ora@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
-  integrity sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=
-  dependencies:
-    chalk "^1.1.1"
-    cli-cursor "^1.0.2"
-    cli-spinners "^0.1.2"
-    object-assign "^4.0.1"
-
 ora@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-2.1.0.tgz#6caf2830eb924941861ec53a173799e008b51e5b"
@@ -22449,6 +23822,18 @@ ora@^2.1.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"
+  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
+  dependencies:
+    chalk "^2.4.2"
+    cli-cursor "^2.1.0"
+    cli-spinners "^2.0.0"
+    log-symbols "^2.2.0"
+    strip-ansi "^5.2.0"
+    wcwidth "^1.0.1"
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -22461,18 +23846,11 @@ os-browserify@^0.3.0, os-browserify@~0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0, os-homedir@^1.0.1:
+os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
-os-locale@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
-  integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
-  dependencies:
-    lcid "^1.0.0"
-
 os-locale@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
@@ -22512,6 +23890,21 @@ osenv@0, osenv@^0.1.3, osenv@^0.1.4, osenv@^0.1.5:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+ospath@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
+  integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
+
+overlayscrollbars-react@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/overlayscrollbars-react/-/overlayscrollbars-react-0.2.2.tgz#330b5d298090d714af660ef45a73d89964f9172e"
+  integrity sha512-sRJDaKIxD+No6ygMRaCxejuIH2CksSCUTfaDOzDhPt22lI3IPZq/+Ifw2RT4j+U7hgXLn9P5QqA00f2bsZVwPA==
+
+overlayscrollbars@^1.10.2:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz#e3e257bbb8a179760c2c712ad08ac2c78583c9f6"
+  integrity sha512-zJGYLeBfaPx2VmiDfBMNTPzm9N8w8wZ6M7dm1ee8TGuet8tsK4nxOzGvEEu0SmueqMHQxhLsstf7iTWCGiYa9Q==
+
 override-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/override-require/-/override-require-1.1.1.tgz#6ae22fadeb1f850ffb0cf4c20ff7b87e5eb650df"
@@ -22544,6 +23937,11 @@ p-each-series@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -22571,10 +23969,10 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0, p-limit@^2.1.0, p-limit@^2.2.0, p-limit@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
-  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
+p-limit@^2.0.0, p-limit@^2.1.0, p-limit@^2.2.0, p-limit@^2.2.1, p-limit@^2.2.2, p-limit@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
   dependencies:
     p-try "^2.0.0"
 
@@ -22606,13 +24004,6 @@ p-map-series@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
-p-map@3.0.0, p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
@@ -22623,6 +24014,20 @@ p-map@^2.0.0, p-map@^2.1.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
+p-map@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
+  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-pipe@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-pipe/-/p-pipe-1.2.0.tgz#4b1a11399a11520a67790ee5a0c1d5881d6befe9"
@@ -22640,14 +24045,6 @@ p-reduce@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
   integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
 
-p-retry@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.1.0.tgz#9ce7cef2069e84bf590df3b8ec18d740109338d6"
-  integrity sha512-oepllyG9gX1qH4Sm20YAKxg1GA7L7puhvGnTfimi31P07zSIj7SDV6YtuAx9nbJF51DES+2CIIRkXs8GKqWJxA==
-  dependencies:
-    "@types/retry" "^0.12.0"
-    retry "^0.12.0"
-
 p-retry@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
@@ -22655,13 +24052,6 @@ p-retry@^3.0.1:
   dependencies:
     retry "^0.12.0"
 
-p-timeout@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.1.0.tgz#198c1f503bb973e9b9727177a276c80afd6851f3"
-  integrity sha512-C27DYI+tCroT8J8cTEyySGydl2B7FlxrGNF5/wmMbl1V+jeehUCzEE/BVgzRebdm2K3ZitKOKx8YbdFumDyYmw==
-  dependencies:
-    p-finally "^1.0.0"
-
 p-timeout@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
@@ -22674,7 +24064,7 @@ p-try@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
   integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
 
-p-try@^2.0.0, p-try@^2.1.0, p-try@^2.2.0:
+p-try@^2.0.0, p-try@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
@@ -22686,15 +24076,15 @@ p-waterfall@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
-package-json@6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.4.0.tgz#4f626976604f4a9a41723ce1792b204a60b1b61e"
-  integrity sha512-bd1T8OBG7hcvMd9c/udgv6u5v9wISP3Oyl9Cm7Weop8EFwrtcQDnS2sb6zhwqus2WslSr5wSTIPiTTpxxmPm7Q==
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  integrity sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=
   dependencies:
-    got "^9.6.0"
-    registry-auth-token "^3.4.0"
-    registry-url "^5.0.0"
-    semver "^6.1.1"
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
 
 package-json@^6.3.0:
   version "6.5.0"
@@ -22706,77 +24096,10 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
-pacote@9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-9.3.0.tgz#ec0d21b739a625d81a19ae546386fedee3300bc1"
-  integrity sha512-uy5xghB5wUtmFS+uNhQGhlsIF9rfsfxw6Zsu2VpmSz4/f+8D2+5V1HwjHdSn7W6aQTrxNNmmoUF5qNE10/EVdA==
-  dependencies:
-    bluebird "^3.5.3"
-    cacache "^11.3.2"
-    figgy-pudding "^3.5.1"
-    get-stream "^4.1.0"
-    glob "^7.1.3"
-    lru-cache "^5.1.1"
-    make-fetch-happen "^4.0.1"
-    minimatch "^3.0.4"
-    minipass "^2.3.5"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    normalize-package-data "^2.4.0"
-    npm-package-arg "^6.1.0"
-    npm-packlist "^1.1.12"
-    npm-pick-manifest "^2.2.3"
-    npm-registry-fetch "^3.8.0"
-    osenv "^0.1.5"
-    promise-inflight "^1.0.1"
-    promise-retry "^1.1.1"
-    protoduck "^5.0.1"
-    rimraf "^2.6.2"
-    safe-buffer "^5.1.2"
-    semver "^5.6.0"
-    ssri "^6.0.1"
-    tar "^4.4.8"
-    unique-filename "^1.1.1"
-    which "^1.3.1"
-
-pacote@9.5.5:
-  version "9.5.5"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-9.5.5.tgz#63355a393614c3424e735820c3731e2cbbedaeeb"
-  integrity sha512-jAEP+Nqj4kyMWyNpfTU/Whx1jA7jEc5cCOlurm0/0oL+v8TAp1QSsK83N7bYe+2bEdFzMAtPG5TBebjzzGV0cA==
-  dependencies:
-    bluebird "^3.5.3"
-    cacache "^12.0.2"
-    figgy-pudding "^3.5.1"
-    get-stream "^4.1.0"
-    glob "^7.1.3"
-    infer-owner "^1.0.4"
-    lru-cache "^5.1.1"
-    make-fetch-happen "^5.0.0"
-    minimatch "^3.0.4"
-    minipass "^2.3.5"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    normalize-package-data "^2.4.0"
-    npm-package-arg "^6.1.0"
-    npm-packlist "^1.1.12"
-    npm-pick-manifest "^2.2.3"
-    npm-registry-fetch "^4.0.0"
-    osenv "^0.1.5"
-    promise-inflight "^1.0.1"
-    promise-retry "^1.1.1"
-    protoduck "^5.0.1"
-    rimraf "^2.6.2"
-    safe-buffer "^5.1.2"
-    semver "^5.6.0"
-    ssri "^6.0.1"
-    tar "^4.4.8"
-    unique-filename "^1.1.1"
-    which "^1.3.1"
-
-pacote@^9.2.3, pacote@^9.5.0:
-  version "9.5.9"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-9.5.9.tgz#fa3a08629c9390b2b99769c55b2cc137e1a24df3"
-  integrity sha512-S1nYW9ly+3btn3VmwRAk2LG3TEh8mkrFdY+psbnHSk8oPODbZ28uG0Z0d3yI0EpqcpLR6BukoVRf3H4IbGCkPQ==
+pacote@9.5.12, pacote@^9.2.3, pacote@^9.5.0:
+  version "9.5.12"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-9.5.12.tgz#1e11dd7a8d736bcc36b375a9804d41bb0377bf66"
+  integrity sha512-BUIj/4kKbwWg4RtnBncXPJd15piFSVNpTzY0rysSr3VnMowTYgkGKcaHrbReepAkjTr8lH2CVWRi58Spg2CicQ==
   dependencies:
     bluebird "^3.5.3"
     cacache "^12.0.2"
@@ -22792,6 +24115,7 @@ pacote@^9.2.3, pacote@^9.5.0:
     mississippi "^3.0.0"
     mkdirp "^0.5.1"
     normalize-package-data "^2.4.0"
+    npm-normalize-package-bin "^1.0.0"
     npm-package-arg "^6.1.0"
     npm-packlist "^1.1.12"
     npm-pick-manifest "^3.0.0"
@@ -22815,15 +24139,22 @@ pad-right@^0.2.2:
   dependencies:
     repeat-string "^1.5.2"
 
+pad@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/pad/-/pad-3.2.0.tgz#be7a1d1cb6757049b4ad5b70e71977158fea95d1"
+  integrity sha512-2u0TrjcGbOjBTJpyewEl4hBO3OeX5wWue7eIFPzQTg6wFSvoaHcBTTUY5m+n0hd04gmTCPuY0kCpVIVuw5etwg==
+  dependencies:
+    wcwidth "^1.0.1"
+
 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.2, pako@~1.0.5:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
-  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
 parallel-transform@^1.1.0:
   version "1.2.0"
@@ -22834,13 +24165,21 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x, param-case@^2.1.1:
+param-case@2.1.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
   integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
   dependencies:
     no-case "^2.2.0"
 
+param-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.3.tgz#4be41f8399eff621c56eebb829a5e451d9801238"
+  integrity sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==
+  dependencies:
+    dot-case "^3.0.3"
+    tslib "^1.10.0"
+
 parcel@^1.12.3:
   version "1.12.4"
   resolved "https://registry.yarnpkg.com/parcel/-/parcel-1.12.4.tgz#c8136085179c6382e632ca98126093e110be2ac5"
@@ -22920,7 +24259,7 @@ parents@^1.0.0, parents@^1.0.1:
   dependencies:
     path-platform "~0.11.15"
 
-parse-asn1@^5.0.0:
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
   integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
@@ -22932,12 +24271,12 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
-parse-diff@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.5.1.tgz#18b3e82a0765ac1c8796e3854e475073a691c4fb"
-  integrity sha512-/qXjo9x/pFa5bVk/ZXaJD0yr3Tf3Yp6MWWMr4vnUmumDrE0yoE6YDH2A8vmcCD/Ko3tW2o0X+zGYh2zMLXshsg==
+parse-diff@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.7.0.tgz#f11128d3aa02381b46ebc8320b470c2c327e67dc"
+  integrity sha512-88ar4IU2Fx+KgiyvVul0Y+YprMArTgLscO0nEKaEvWvhzRSSYefdf1M9PUmpx1pu5crUoVl2QNDMqjxfCeKptQ==
 
-parse-entities@^1.0.2, parse-entities@^1.1.0, parse-entities@^1.1.2:
+parse-entities@^1.1.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
   integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
@@ -22949,6 +24288,18 @@ parse-entities@^1.0.2, parse-entities@^1.1.0, parse-entities@^1.1.2:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-git-config@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-2.0.3.tgz#6fb840d4a956e28b971c97b33a5deb73a6d5b6bb"
@@ -22968,7 +24319,7 @@ parse-github-url@^1.0.2:
   resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
   integrity sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==
 
-parse-glob@^3.0.4:
+parse-glob@3.0.4, parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
   integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
@@ -23040,6 +24391,11 @@ parse-path@^4.0.0:
     is-ssh "^1.3.0"
     protocols "^1.4.0"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=
+
 parse-url@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-5.0.1.tgz#99c4084fc11be14141efa41b3d117a96fcb9527f"
@@ -23050,12 +24406,12 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/parse5-utils/-/parse5-utils-2.0.0.tgz#c926c1764e2431a450a5941f302db9beaec9d78a"
-  integrity sha1-ySbBdk4kMaRQpZQfMC25vq7J14o=
+parse5-htmlparser2-tree-adapter@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.1.1.tgz#e8c743d4e92194d5293ecde2b08be31e67461cbc"
+  integrity sha512-CF+TKjXqoqyDwHqBhFQ+3l5t83xYi6fVT1tQNg+Ye0JRLnTxWvIroCjEp1A0k4lneHNBGnICUf0cfYVYGEazqw==
   dependencies:
-    parse5 "^2.2.1"
+    parse5 "^5.1.1"
 
 parse5@4.0.0:
   version "4.0.0"
@@ -23067,23 +24423,18 @@ parse5@5.1.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
   integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
 
-parse5@^2.2.1, parse5@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-2.2.3.tgz#0c4fc41c1000c5e6b93d48b03f8083837834e9f6"
-  integrity sha1-DE/EHBAAxea5PUiwP4CDg3g06fY=
+parse5@5.1.1, parse5@^5.0.0, parse5@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
-parse5@^3.0.1, parse5@^3.0.2:
+parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
   integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
   dependencies:
     "@types/node" "*"
 
-parse5@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
-
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -23091,6 +24442,11 @@ parseqs@0.0.5:
   dependencies:
     better-assert "~1.0.0"
 
+parserlib@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/parserlib/-/parserlib-1.1.1.tgz#a64cfa724062434fdfc351c9a4ec2d92b94c06f4"
+  integrity sha1-pkz6ckBiQ0/fw1HJpOwtkrlMBvQ=
+
 parseuri@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
@@ -23103,13 +24459,13 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-pascal-case@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.1.tgz#2d578d3455f660da65eca18ef95b4e0de912761e"
-  integrity sha1-LVeNNFX2YNpl7KGO+VtODekSdh4=
+pascal-case@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
+  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
   dependencies:
-    camel-case "^3.0.0"
-    upper-case-first "^1.1.0"
+    no-case "^3.0.3"
+    tslib "^1.10.0"
 
 pascalcase@^0.1.1:
   version "0.1.1"
@@ -23126,7 +24482,7 @@ path-browserify@0.0.1, path-browserify@~0.0.0:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
   integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
-path-browserify@1.0.0, path-browserify@^1.0.0:
+path-browserify@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.0.tgz#40702a97af46ae00b0ea6fa8998c0b03c0af160d"
   integrity sha512-Hkavx/nY4/plImrZPHRk2CL9vpOymZLgEbMNX1U0bjcBL7QN9wODxyx0yaMZURSQaUtSEvDrfAvxa9oPb0at9g==
@@ -23178,7 +24534,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@1.0.6, path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
@@ -23266,25 +24622,25 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-pdfkit@>=0.8.1, pdfkit@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.10.0.tgz#88f2aa8e3cf9e1cc2caff6447b68dd4e435cb284"
-  integrity sha512-mRJ6iuDzpIQ4ftKp5GvijLXNVRK86xjnyIPBraYSPrUPubNqWM5/oYmc7FZKUWz3wusRTj3PLR9HJ1X5ooqfsg==
+pdfkit@>=0.8.1, pdfkit@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.11.0.tgz#9cdb2fc42bd2913587fe3ddf48cc5bbb3c36f7de"
+  integrity sha512-1s9gaumXkYxcVF1iRtSmLiISF2r4nHtsTgpwXiK8Swe+xwk/1pm8FJjYqN7L3x13NsWnGyUFntWcO8vfqq+wwA==
   dependencies:
     crypto-js "^3.1.9-1"
-    fontkit "^1.0.0"
-    linebreak "^0.3.0"
-    png-js ">=0.1.0"
+    fontkit "^1.8.0"
+    linebreak "^1.0.2"
+    png-js "^1.0.0"
 
 pdfmake@^0.1.60:
-  version "0.1.62"
-  resolved "https://registry.yarnpkg.com/pdfmake/-/pdfmake-0.1.62.tgz#62f2400eba066cc271736b95c7d0cdf9c8e06983"
-  integrity sha512-2QIzijdkwFBChTFu5nVmMe+fLBQTAYTPTxi4jGbUTyGxZBq7YR1I17FBk1Cs+3nrYufNKNukT6OR1RNxbovsTA==
+  version "0.1.65"
+  resolved "https://registry.yarnpkg.com/pdfmake/-/pdfmake-0.1.65.tgz#09c4cf796809ec5fce789343560a36780ff47e37"
+  integrity sha512-MgzRyiKSP3IEUH7vm4oj3lpikmk5oCD9kYxiJM6Z2Xf6CP9EcikeSDey2rGd4WVvn79Y0TGqz2+to8FtWP8MrA==
   dependencies:
-    iconv-lite "^0.5.0"
+    iconv-lite "^0.5.1"
     linebreak "^1.0.2"
-    pdfkit "^0.10.0"
-    svg-to-pdfkit "^0.1.7"
+    pdfkit "^0.11.0"
+    svg-to-pdfkit "^0.1.8"
 
 pend@~1.2.0:
   version "1.2.0"
@@ -23301,10 +24657,10 @@ physical-cpu-count@^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.4, picomatch@^2.0.5:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5"
-  integrity sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
 pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
@@ -23333,34 +24689,21 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-pino-std-serializers@^2.3.0:
+pino-std-serializers@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-2.4.2.tgz#cb5e3e58c358b26f88969d7e619ae54bdfcc1ae1"
   integrity sha512-WaL504dO8eGs+vrK+j4BuQQq6GLKeCCcHaMB2ItygzVURcL1CycwNEUHTD/lHFHs/NL5qAz2UKrjYWXKSf4aMQ==
 
-pino@4.10.2:
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-4.10.2.tgz#77e93cdfa1cdb58f688cbb0abaebe67eb2f315f4"
-  integrity sha512-hNNDgOju2UvK4iKqXR3ZwEutoOujBRN9jfQgty/X4B3q1QOqpWqvmVn+GT/a20o8Jw5Wd7VkGJAdgFQg55a+mw==
-  dependencies:
-    chalk "^2.3.0"
-    fast-json-parse "^1.0.0"
-    fast-safe-stringify "^1.2.1"
-    flatstr "^1.0.4"
-    pump "^1.0.3"
-    quick-format-unescaped "^1.1.1"
-    split2 "^2.2.0"
-
-pino@5.13.4:
-  version "5.13.4"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-5.13.4.tgz#52935caaab8d47048deffa315336e8da30d8b96d"
-  integrity sha512-heeg8m8FZY8Nl3nuuD+msJUmhamqoGl7JXoTExh9YpGajzz6LYbVByUqrjbf4sCEMYFsqdcqnTJWiSY660DraQ==
+pino@5.17.0:
+  version "5.17.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-5.17.0.tgz#b9def314e82402154f89a25d76a31f20ca84b4c8"
+  integrity sha512-LqrqmRcJz8etUjyV0ddqB6OTUutCgQULPFg2b4dtijRHUsucaAdBgSUW58vY6RFSX+NT8963F+q0tM6lNwGShA==
   dependencies:
     fast-redact "^2.0.0"
     fast-safe-stringify "^2.0.7"
-    flatstr "^1.0.9"
-    pino-std-serializers "^2.3.0"
-    quick-format-unescaped "^3.0.2"
+    flatstr "^1.0.12"
+    pino-std-serializers "^2.4.2"
+    quick-format-unescaped "^3.0.3"
     sonic-boom "^0.7.5"
 
 pinpoint@^1.1.0:
@@ -23375,12 +24718,12 @@ pirates@^4.0.0, pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
-pixelmatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
-  integrity sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=
+pixelmatch@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.0.tgz#6433386c6a830b0d9ee3962f9ad59695500677cd"
+  integrity sha512-TdleROuanI+Uo/4PcOAH7b7qgO4kjzJO8K4y/TBAo1wx/5BE8cn1B0I6Jfk3mKcJsGpWvX7zjM8OjU5o9i+aog==
   dependencies:
-    pngjs "^3.0.0"
+    pngjs "^4.0.1"
 
 pkg-add-deps@^0.1.0:
   version "0.1.0"
@@ -23427,80 +24770,50 @@ pkg-up@2.0.0, pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-pkg-up@^3.1.0:
+pkg-up@3.1.0, pkg-up@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
   integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
   dependencies:
     find-up "^3.0.0"
 
-please-upgrade-node@^3.1.1, please-upgrade-node@^3.2.0:
+pkginfo@0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
+  integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
+
+please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
   integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
   dependencies:
     semver-compare "^1.0.0"
 
-plist@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/plist/-/plist-2.0.1.tgz#0a32ca9481b1c364e92e18dc55c876de9d01da8b"
-  integrity sha1-CjLKlIGxw2TpLhjcVch23p0B2os=
-  dependencies:
-    base64-js "1.1.2"
-    xmlbuilder "8.2.2"
-    xmldom "0.1.x"
-
-plist@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/plist/-/plist-2.1.0.tgz#57ccdb7a0821df21831217a3cad54e3e146a1025"
-  integrity sha1-V8zbeggh3yGDEhejytVOPhRqECU=
-  dependencies:
-    base64-js "1.2.0"
-    xmlbuilder "8.2.2"
-    xmldom "0.1.x"
-
-plist@^3.0.0, plist@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.1.tgz#a9b931d17c304e8912ef0ba3bdd6182baf2e1f8c"
-  integrity sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==
-  dependencies:
-    base64-js "^1.2.3"
-    xmlbuilder "^9.0.7"
-    xmldom "0.1.x"
-
-plugin-error@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
-  integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=
-  dependencies:
-    ansi-cyan "^0.1.1"
-    ansi-red "^0.1.1"
-    arr-diff "^1.0.1"
-    arr-union "^2.0.1"
-    extend-shallow "^1.1.2"
-
-plur@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/plur/-/plur-3.1.1.tgz#60267967866a8d811504fe58f2faaba237546a5b"
-  integrity sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==
-  dependencies:
-    irregular-plurals "^2.0.0"
+pluralize@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
+  integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
 pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-png-js@>=0.1.0:
+png-js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/png-js/-/png-js-1.0.0.tgz#e5484f1e8156996e383aceebb3789fd75df1874d"
   integrity sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g==
 
-pngjs@3.4.0, pngjs@^3.0.0, pngjs@^3.3.3:
+pngjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
 pnp-webpack-plugin@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.2.1.tgz#cd9d698df2a6fcf7255093c1c9511adf65b9421b"
@@ -23508,44 +24821,29 @@ pnp-webpack-plugin@1.2.1:
   dependencies:
     ts-pnp "^1.0.0"
 
-pnp-webpack-plugin@1.5.0, pnp-webpack-plugin@^1.2.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
-  integrity sha512-jd9olUr9D7do+RN8Wspzhpxhgp1n6Vd0NtQ4SFkmIACZoEL1nkyAdW9Ygrinjec0vgDcWjscFQQ1gDW8rsfKTg==
-  dependencies:
-    ts-pnp "^1.1.2"
-
-polished@^3.3.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.2.tgz#b4780dad81d64df55615fbfc77acb52fd17d88cd"
-  integrity sha512-9Rch6iMZckABr6EFCLPZsxodeBpXMo9H4fRlfR/9VjMEyy5xpo1/WgXlJGgSjPyVhEZNycbW7UmYMNyWS5MI0g==
+pnp-webpack-plugin@1.6.4, pnp-webpack-plugin@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
+  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
   dependencies:
-    "@babel/runtime" "^7.6.3"
+    ts-pnp "^1.1.6"
 
-polymer-webpack-loader@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/polymer-webpack-loader/-/polymer-webpack-loader-2.0.3.tgz#2a2d1c2ef05bff372b573d3b761628a3b4ad3e7f"
-  integrity sha512-3SR+/qVAGeVKltvsSMA+euGdLwj8ZZJnwd5NvXRvbdQ7yO57sdcTpRw3d34pTc9YTZxncW/kozuI/9bHjr/rdg==
+polished@^3.3.1, polished@^3.4.4:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.6.3.tgz#68f4fe7ffad46530733029b939dd12978200cb59"
+  integrity sha512-QJ0q0b6gX1+0OJtPMfgVJxV0vg5XTa4im+Rca989dAtmsd/fEky3X+0A+V+OUXq1nyiDGplJwqD853dTS0gkPg==
   dependencies:
-    css-selector-tokenizer "^0.7.0"
-    dom5 "^2.3.0"
-    espree "^3.4.3"
-    html-loader "^0.5.1"
-    loader-utils "^1.1.0"
-    parse5 "^3.0.2"
-    parse5-utils "^2.0.0"
-    postcss "^6.0.9"
-    source-map "^0.5.6"
+    "@babel/runtime" "^7.9.2"
 
 popper.js@^1.14.4, popper.js@^1.14.7:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
-  integrity sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
-portfinder@^1.0.13, portfinder@^1.0.23, portfinder@^1.0.25, portfinder@^1.0.9:
-  version "1.0.25"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
-  integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
+portfinder@^1.0.13, portfinder@^1.0.25, portfinder@^1.0.26, portfinder@^1.0.9:
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
+  integrity sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==
   dependencies:
     async "^2.6.2"
     debug "^3.1.1"
@@ -23557,12 +24855,12 @@ posix-character-classes@^0.1.0:
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
 postcss-attribute-case-insensitive@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz#b2a721a0d279c2f9103a36331c88981526428cc7"
-  integrity sha512-L2YKB3vF4PetdTIthQVeT+7YiSzMoNMLLYxPXXppOOP7NoazEAy45sh2LvJ8leCQjfBcfkYQs8TtCcQjeZTp8A==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
+  integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
   dependencies:
     postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0"
+    postcss-selector-parser "^6.0.2"
 
 postcss-browser-comments@^2.0.0:
   version "2.0.0"
@@ -23571,15 +24869,21 @@ postcss-browser-comments@^2.0.0:
   dependencies:
     postcss "^7.0.2"
 
+postcss-browser-comments@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz#1248d2d935fb72053c8e1f61a84a57292d9f65e9"
+  integrity sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==
+  dependencies:
+    postcss "^7"
+
 postcss-calc@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
-  integrity sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
+  integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
   dependencies:
-    css-unit-converter "^1.1.1"
-    postcss "^7.0.5"
-    postcss-selector-parser "^5.0.0-rc.4"
-    postcss-value-parser "^3.3.1"
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
 
 postcss-color-functional-notation@^2.0.1:
   version "2.0.1"
@@ -23623,6 +24927,14 @@ postcss-color-rebeccapurple@^4.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-color-rebeccapurple@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-6.0.0.tgz#a426e54eaf25c9bc41213f8edcd0f318f7300eab"
+  integrity sha512-7DOI5VEpi73Mn9YsCoMX7Ld5EQzQPxJh3JaiUERCDDV5xhQtmO41zqktLOTi7psJYuQnzWdbrxbpJ/TUdg1zrg==
+  dependencies:
+    postcss "^7.0.27"
+    postcss-values-parser "^3.2.0"
+
 postcss-colormin@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
@@ -23717,13 +25029,20 @@ postcss-env-function@^2.0.2:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-flexbugs-fixes@4.1.0, postcss-flexbugs-fixes@^4.1.0:
+postcss-flexbugs-fixes@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
   integrity sha512-jr1LHxQvStNNAHlgco6PzY308zvLklh7SJVYuWUwyUQncofaAlD2l+P/gxKHOdqWKe7xJSkVLFF/2Tp+JqMSZA==
   dependencies:
     postcss "^7.0.0"
 
+postcss-flexbugs-fixes@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
+  integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
+  dependencies:
+    postcss "^7.0.26"
+
 postcss-focus-visible@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
@@ -23930,10 +25249,10 @@ postcss-modules-scope@1.1.0:
     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"
-  integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==
+postcss-modules-scope@^2.1.0, postcss-modules-scope@^2.1.1, postcss-modules-scope@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
   dependencies:
     postcss "^7.0.6"
     postcss-selector-parser "^6.0.0"
@@ -24060,6 +25379,17 @@ postcss-normalize@7.0.1:
     postcss "^7.0.2"
     postcss-browser-comments "^2.0.0"
 
+postcss-normalize@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-8.0.1.tgz#90e80a7763d7fdf2da6f2f0f82be832ce4f66776"
+  integrity sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==
+  dependencies:
+    "@csstools/normalize.css" "^10.1.0"
+    browserslist "^4.6.2"
+    postcss "^7.0.17"
+    postcss-browser-comments "^3.0.0"
+    sanitize.css "^10.0.0"
+
 postcss-ordered-values@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
@@ -24091,6 +25421,13 @@ postcss-place@^4.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-plugin-rpx2vw@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-plugin-rpx2vw/-/postcss-plugin-rpx2vw-0.0.1.tgz#04ba18d555fc63ca29688faeed3a3d0d061c388b"
+  integrity sha512-kahaCZbhd58s10H8qt1Ae11IFa6lRctb3+CFR2VA6naud5G9L5LPT1ABwN0fo491C34jlifRt7tBZQtWdem+eA==
+  dependencies:
+    postcss "^7.0.17"
+
 postcss-preset-env@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.6.0.tgz#642e7d962e2bdc2e355db117c1eb63952690ed5b"
@@ -24134,7 +25471,7 @@ postcss-preset-env@6.6.0:
     postcss-selector-matches "^4.0.0"
     postcss-selector-not "^4.0.0"
 
-postcss-preset-env@6.7.0:
+postcss-preset-env@6.7.0, postcss-preset-env@^6.6.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
   integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
@@ -24212,7 +25549,7 @@ postcss-replace-overflow-wrap@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-safe-parser@4.0.1, postcss-safe-parser@^4.0.1:
+postcss-safe-parser@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
   integrity sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==
@@ -24245,15 +25582,15 @@ postcss-selector-parser@6.0.2, postcss-selector-parser@^6.0.0, postcss-selector-
     uniq "^1.0.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=
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
   dependencies:
-    dot-prop "^4.1.1"
+    dot-prop "^5.2.0"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
+postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
   integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
@@ -24286,10 +25623,10 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
-  integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3, postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
 postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
   version "2.0.1"
@@ -24300,6 +25637,16 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-values-parser@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-3.2.1.tgz#55114607de6631338ba8728d3e9c15785adcc027"
+  integrity sha512-SQ7/88VE9LhJh9gc27/hqnSU/aZaREVJcRVccXBmajgP2RkjdJzNyH/a9GCVMI5nsRhT0jC5HpUMwfkz81DVVg==
+  dependencies:
+    color-name "^1.1.4"
+    is-url-superb "^3.0.0"
+    postcss "^7.0.5"
+    url-regex "^5.0.0"
+
 postcss@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
@@ -24309,34 +25656,34 @@ postcss@6.0.1:
     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"
-  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
+postcss@7.0.21:
+  version "7.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+  integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@7.0.17:
-  version "7.0.17"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
-  integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
+postcss@7.0.27:
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
+  integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@7.x.x, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.23.tgz#9f9759fad661b15964f3cfc3140f66f1e05eadc1"
-  integrity sha512-hOlMf3ouRIFXD+j2VJecwssTwbvsPGJVMzupptg+85WA+i7MwyrydmQAgY3R+m0Bc0exunhbJmijy8u8+vufuQ==
+postcss@7.x.x, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.31.tgz#332af45cb73e26c0ee2614d7c7fb02dfcc2bd6dd"
+  integrity sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^6.0.1, postcss@^6.0.9:
+postcss@^6.0.1:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -24345,17 +25692,17 @@ postcss@^6.0.1, postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-posthtml-parser@^0.4.0, posthtml-parser@^0.4.1:
+posthtml-parser@^0.4.0, posthtml-parser@^0.4.1, posthtml-parser@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.4.2.tgz#a132bbdf0cd4bc199d34f322f5c1599385d7c6c1"
   integrity sha512-BUIorsYJTvS9UhXxPTzupIztOMVNPa/HtAm9KHni9z6qEfiJ1bpOBL5DfUOL9XAc3XkLIEzBzpph+Zbm4AdRAg==
   dependencies:
     htmlparser2 "^3.9.2"
 
-posthtml-render@^1.1.3, 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-render@^1.1.3, posthtml-render@^1.1.5, posthtml-render@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.2.2.tgz#f554a19ed40d40e2bfc160826b0a91d4a23656cd"
+  integrity sha512-MbIXTWwAfJ9qET6Zl29UNwJcDJEEz9Zkr5oDhiujitJa7YBJwEpbkX2cmuklCDxubTMoRWpid3q8DrSyGnUUzQ==
 
 posthtml@^0.11.2:
   version "0.11.6"
@@ -24366,54 +25713,28 @@ posthtml@^0.11.2:
     posthtml-render "^1.1.5"
 
 posthtml@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.12.0.tgz#6e2a2fcd774eaed1a419a95c5cc3a92b676a40a6"
-  integrity sha512-aNUEP/SfKUXAt+ghG51LC5MmafChBZeslVe/SSdfKIgLGUVRE68mrMF4V8XbH07ZifM91tCSuxY3eHIFLlecQw==
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.12.3.tgz#8fa5b903907e9c10ba5b883863cc550189a309d5"
+  integrity sha512-Fbpi95+JJyR0tqU7pUy1zTSQFjAsluuwB9pJ1h0jtnGk7n/O2TBtP5nDl9rV0JVACjQ1Lm5wSp4ppChr8u3MhA==
   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"
-  integrity sha1-/mOhfal3YRq+98uAJssalVP9g1k=
+    posthtml-parser "^0.4.2"
+    posthtml-render "^1.2.2"
 
 preact-render-to-json@^3.6.6:
   version "3.6.6"
   resolved "https://registry.yarnpkg.com/preact-render-to-json/-/preact-render-to-json-3.6.6.tgz#f67f48581912ac53fc9f4873bc6d7ce342f71c20"
   integrity sha1-9n9IWBkSrFP8n0hzvG1840L3HCA=
 
-preact@*:
-  version "10.0.5"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.0.5.tgz#16f0bcd77241693e710778069e703217dd497867"
-  integrity sha512-62+J+GTrv3Uhp6DefqZTel6VYcdUA1zqHO7gjQSKdOwkU2sNOp/Vl6Zf2A3hIWV5EBgjeDA8gsOn6dmB3I1Dvg==
+preact@^10.4.0:
+  version "10.4.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.4.tgz#0bd6d759ec2f8684aaf8c63c7f076191e46528cf"
+  integrity sha512-EaTJrerceyAPatQ+vfnadoopsMBZAOY7ak9ogVdUi5xbpR8SoHgtLryXnW+4mQOwt21icqoVR1brkU2dq7pEBA==
 
 preact@^8.4.2:
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.5.3.tgz#78c2a5562fcecb1fed1d0055fa4ac1e27bde17c1"
   integrity sha512-O3kKP+1YdgqHOFsZF2a9JVdtqD+RPzCQc3rP+Ualf7V6rmRDchZ9MJbiGTT7LuyqFKZqlHSOyO/oMFmI2lVTsw==
 
-prebuild-install@^5.3.0, prebuild-install@^5.3.2:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.3.tgz#ef4052baac60d465f5ba6bf003c9c1de79b9da8e"
-  integrity sha512-GV+nsUXuPW2p8Zy7SarF/2W/oiK8bFQgJcncoJ0d7kRpekEA0ftChjfEaF9/Y+QJEc/wFR7RAEa8lYByuUIe2g==
-  dependencies:
-    detect-libc "^1.0.3"
-    expand-template "^2.0.3"
-    github-from-package "0.0.0"
-    minimist "^1.2.0"
-    mkdirp "^0.5.1"
-    napi-build-utils "^1.0.1"
-    node-abi "^2.7.0"
-    noop-logger "^0.1.1"
-    npmlog "^4.0.1"
-    pump "^3.0.0"
-    rc "^1.2.7"
-    simple-get "^3.0.3"
-    tar-fs "^2.0.0"
-    tunnel-agent "^0.6.0"
-    which-pm-runs "^1.0.0"
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -24441,26 +25762,26 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.16.4, prettier@^1.18.2:
+prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-pretty-bytes@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.2.0.tgz#96c92c6e95a0b35059253fb33c03e260d40f5a1f"
-  integrity sha512-ujANBhiUsl9AhREUDUEY1GPOharMGm8x8juS7qOHybcLi7XsKfrYQ88hSly1l2i0klXHTDYrlL8ihMCG55Dc3w==
-
-pretty-bytes@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
-  integrity sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=
+prettier@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
-pretty-bytes@^5.1.0:
+pretty-bytes@5.3.0, pretty-bytes@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
   integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
 
+pretty-data@^0.40.0:
+  version "0.40.0"
+  resolved "https://registry.yarnpkg.com/pretty-data/-/pretty-data-0.40.0.tgz#572aa8ea23467467ab94b6b5266a6fd9c8fddd72"
+  integrity sha1-Vyqo6iNGdGerlLa1Jmpv2cj93XI=
+
 pretty-error@^2.0.2, pretty-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -24469,23 +25790,7 @@ pretty-error@^2.0.2, pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@24.0.0-alpha.6:
-  version "24.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.0.0-alpha.6.tgz#25ad2fa46b342d6278bf241c5d2114d4376fbac1"
-  integrity sha512-zG2m6YJeuzwBFqb5EIdmwYVf30sap+iMRuYNPytOccEXZMAJbPIFGKVJ/U0WjQegmnQbRo9CI7j6j3HtDaifiA==
-  dependencies:
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-
-pretty-format@^23.4.1, pretty-format@^23.6.0:
-  version "23.6.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
-  integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
-  dependencies:
-    ansi-regex "^3.0.0"
-    ansi-styles "^3.2.0"
-
-pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
+pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -24495,10 +25800,25 @@ pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
-pretty-format@^4.2.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-4.3.1.tgz#530be5c42b3c05b36414a7a2a4337aa80acd0e8d"
-  integrity sha1-UwvlxCs8BbNkFKeipDN6qArNDo0=
+pretty-format@^25.0.0, pretty-format@^25.1.0, pretty-format@^25.2.1, pretty-format@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
+  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
+pretty-format@^26.0.1:
+  version "26.0.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.0.1.tgz#a4fe54fe428ad2fd3413ca6bbd1ec8c2e277e197"
+  integrity sha512-SWxz6MbupT3ZSlL0Po4WF/KujhQaVehijR2blyRDCzk9e45EaYMVhMBn49fnRuHxtkSpXTes1GxNpVmH86Bxfw==
+  dependencies:
+    "@jest/types" "^26.0.1"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
 
 pretty-hrtime@^1.0.3:
   version "1.0.3"
@@ -24521,11 +25841,18 @@ prettyjson@^1.2.1:
     minimist "^1.2.0"
 
 printf@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.2.tgz#8546e01a1f647b1dff510ae92bdc92beb8c9b2f9"
-  integrity sha512-Hn0UuWqTRd94HiCJoiCNGZTnSyXJdIF3t4/4I293hezIzyH4pQ3ai4TlH/SmRCiMvR5aNMxSYWshjQWWW6J8MQ==
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"
+  integrity sha512-t3lYN6vPU5PZXDiEZZqoyXvN8wCsBfi8gPoxTKo2e5hhV673t/KUh+mfO8P8lCOCDC/BWcOGIxKyebxc5FuqLA==
+
+prismjs@^1.8.4:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
+  integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
+  optionalDependencies:
+    clipboard "^2.0.0"
 
-prismjs@^1.8.4, prismjs@~1.17.0:
+prismjs@~1.17.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
   integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
@@ -24537,30 +25864,6 @@ private@^0.1.6, private@^0.1.8, private@~0.1.5:
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
-probe-image-size@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-4.0.0.tgz#d35b71759e834bcf580ea9f18ec8b9265c0977eb"
-  integrity sha512-nm7RvWUxps+2+jZKNLkd04mNapXNariS6G5WIEVzvAqjx7EUuKcY1Dp3e6oUK7GLwzJ+3gbSbPLFAASHFQrPcQ==
-  dependencies:
-    any-promise "^1.3.0"
-    deepmerge "^2.0.1"
-    inherits "^2.0.3"
-    next-tick "^1.0.0"
-    request "^2.83.0"
-    stream-parser "~0.3.1"
-
-probe-image-size@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-3.2.0.tgz#0b8d7cd6e8dce8356bec732a1d9e793bcc8aed44"
-  integrity sha512-LE7mIvfDoEeOgIH9TbMNv5txJh+K0/UVandiXHk+Hm4VKqNV5qxoeDzdW3QiMIlqXsIEm3K+SzeAedT6fZKjtQ==
-  dependencies:
-    any-promise "^1.3.0"
-    deepmerge "^1.3.0"
-    got "^6.7.1"
-    inherits "^2.0.3"
-    next-tick "^1.0.0"
-    stream-parser "~0.3.1"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -24578,15 +25881,6 @@ process@^0.11.10, process@~0.11.0:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-progress-bar-webpack-plugin@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-1.12.1.tgz#bbf3b1137a4ba2474eeb111377d6c1a580c57dd1"
-  integrity sha512-tVbPB5xBbqNwdH3mwcxzjL1r1Vrm/xGu93OsqVSAbCaXGoKFvfWIh0gpMDpn2kYsPVRSAIK0pBkP9Vfs+JJibQ==
-  dependencies:
-    chalk "^1.1.1"
-    object.assign "^4.0.1"
-    progress "^1.1.8"
-
 progress-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-2.0.0.tgz#fac63a0b3d11deacbb0969abcc93b214bce19ed5"
@@ -24595,38 +25889,33 @@ progress-stream@^2.0.0:
     speedometer "~1.0.0"
     through2 "~2.0.3"
 
-progress@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
-  integrity sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=
-
-progress@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
-  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
-
 progress@^2.0.0, progress@^2.0.1, progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise-do-whilst@1.0.x:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-do-whilst/-/promise-do-whilst-1.0.1.tgz#6ddad44009f36da9549dbdccfad99a868dff9ecf"
-  integrity sha1-bdrUQAnzbalUnb3M+tmaho3/ns8=
-
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-promise-map-series@^0.2.1, promise-map-series@^0.2.3:
+promise-map-series@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/promise-map-series/-/promise-map-series-0.2.3.tgz#c2d377afc93253f6bd03dbb77755eb88ab20a847"
   integrity sha1-wtN3r8kyU/a9A9u3d1XriKsgqEc=
   dependencies:
     rsvp "^3.0.14"
 
+promise-map-series@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/promise-map-series/-/promise-map-series-0.3.0.tgz#41873ca3652bb7a042b387d538552da9b576f8a1"
+  integrity sha512-3npG2NGhTc8BWBolLLf8l/92OxMGaRLbqvIh9wjCHhDXNvk4zsxaTaCpiCunW09qWPrN2zeNSNwRLVBrQQtutA==
+
+promise-polyfill@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
+  integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
+
 promise-retry@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
@@ -24636,29 +25925,29 @@ promise-retry@^1.1.1:
     retry "^0.10.0"
 
 promise.allsettled@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.1.tgz#afe4bfcc13b26e2263a97a7fbbb19b8ca6eb619c"
-  integrity sha512-3ST7RS7TY3TYLOIe+OACZFvcWVe1osbgz2x07nTb446pa3t4GUZWidMDzQ4zf9jC2l6mRa1/3X81icFYbi+D/g==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
+  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
   dependencies:
+    array.prototype.map "^1.0.1"
     define-properties "^1.1.3"
-    es-abstract "^1.13.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
+    iterate-value "^1.0.0"
 
-promise.prototype.finally@^3.1.0, promise.prototype.finally@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.1.tgz#cb279d3a5020ca6403b3d92357f8e22d50ed92aa"
-  integrity sha512-gnt8tThx0heJoI3Ms8a/JdkYBVhYP/wv+T7yQimR+kdOEJL21xTFbiJhMRqnSPcr54UVvMbsscDk2w+ivyaLPw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.13.0"
-    function-bind "^1.1.1"
+promise.hash.helper@^1.0.2:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/promise.hash.helper/-/promise.hash.helper-1.0.7.tgz#2f39d8495df40dcdfbc1d5be9e9e56efeae7f180"
+  integrity sha512-0qhWYyCV9TYDMSooYw1fShIb7R6hsWYja7JLqbeb1MvHqDTvP/uy/R1RsyVqDi6GCiHOI4G5p2Hpr3IA+/l/+Q==
 
-promise@8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
-  integrity sha512-HeRDUL1RJiLhyA0/grn+PTShlBAcLuh/1BJGtrvjwbvRDCTLLMEz9rOGCV+R3vHY4MixIuoMEd9Yq/XvsTPcjw==
+promise.prototype.finally@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.2.tgz#b8af89160c9c673cefe3b4c4435b53cfd0287067"
+  integrity sha512-A2HuJWl2opDH0EafgdjwEw7HysI8ff/n4lW4QEVBCUXFk9QeGecBWv0Deph0UmLe3tTNYegz8MOjsVuE6SMoJA==
   dependencies:
-    asap "~2.0.6"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.0"
+    function-bind "^1.1.1"
 
 promise@^7.0.1, promise@^7.1.1:
   version "7.3.1"
@@ -24667,13 +25956,20 @@ promise@^7.0.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+promise@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
+  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
+  dependencies:
+    asap "~2.0.6"
+
 prompts@^2.0.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.0.tgz#a444e968fa4cc7e86689a74050685ac8006c4cc4"
-  integrity sha512-NfbbPPg/74fT7wk2XYQ7hAIp9zJyZp5Fu19iRbORqqy1BhtrkZ0fPafBU+7bmn8ie69DpT0R6QpJIN2oisYjJg==
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
+  integrity sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
   dependencies:
     kleur "^3.0.3"
-    sisteransi "^1.0.3"
+    sisteransi "^1.0.4"
 
 promzard@^0.3.0:
   version "0.3.0"
@@ -24691,7 +25987,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -24700,22 +25996,17 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-property-expr@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
-  integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
-
 property-handlers@^1.0.0, property-handlers@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/property-handlers/-/property-handlers-1.1.1.tgz#cb20d322aab7d94fffac28f46c9186bd5947b4b4"
   integrity sha1-yyDTIqq32U//rCj0bJGGvVlHtLQ=
 
 property-information@^5.0.0, property-information@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.3.0.tgz#bc87ac82dc4e72a31bb62040544b1bf9653da039"
-  integrity sha512-IslotQn1hBCZDY7SaJ3zmCjVea219VTwmOk6Pu3z9haU9m4+T8GwaDubur+6NMHEU+Fjs/6/p66z6QULPkcL1w==
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.5.0.tgz#4dc075d493061a82e2b7d096f406e076ed859943"
+  integrity sha512-RgEbCx2HLa1chNgvChcx+rrCWD0ctBmGSE0M7lVm1yyv4UbvbrWoXp/BkVLZefzjrRBGW8/Js6uh/BnlHXFyjA==
   dependencies:
-    xtend "^4.0.1"
+    xtend "^4.0.0"
 
 proto-list@~1.2.1:
   version "1.2.4"
@@ -24734,10 +26025,10 @@ protoduck@^5.0.1:
   dependencies:
     genfun "^5.0.0"
 
-protractor@~5.4.2:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.4.2.tgz#329efe37f48b2141ab9467799be2d4d12eb48c13"
-  integrity sha512-zlIj64Cr6IOWP7RwxVeD8O4UskLYPoyIcg0HboWJL9T79F1F0VWtKkGTr/9GN6BKL+/Q/GmM7C9kFVCfDbP5sA==
+protractor@~5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/protractor/-/protractor-5.4.4.tgz#b241466aaf83b76bc2c58df67deb9a5cdfc61529"
+  integrity sha512-BaL4vePgu3Vfa/whvTUAlgaCAId4uNSGxIFSCXMgj7LMYENPWLp85h5RBi9pdpX/bWQ8SF6flP7afmi2TC4eHw==
   dependencies:
     "@types/q" "^0.0.32"
     "@types/selenium-webdriver" "^3.0.0"
@@ -24747,26 +26038,26 @@ protractor@~5.4.2:
     glob "^7.0.3"
     jasmine "2.8.0"
     jasminewd2 "^2.1.0"
-    optimist "~0.6.0"
     q "1.4.1"
     saucelabs "^1.5.0"
     selenium-webdriver "3.6.0"
     source-map-support "~0.4.0"
     webdriver-js-extender "2.1.0"
     webdriver-manager "^12.0.6"
+    yargs "^12.0.5"
 
-proxy-addr@~2.0.4, proxy-addr@~2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
-  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
+proxy-addr@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
+  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
   dependencies:
     forwarded "~0.1.2"
-    ipaddr.js "1.9.0"
+    ipaddr.js "1.9.1"
 
 proxy-from-env@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
-  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
 proxy-middleware@latest:
   version "0.15.0"
@@ -24783,10 +26074,15 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.24, psl@^1.1.28:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
-  integrity sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==
+psl@^1.1.24, psl@^1.1.28, psl@^1.1.33:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
+pstree.remy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -24809,6 +26105,15 @@ pug-attrs@^2.0.4:
     js-stringify "^1.0.1"
     pug-runtime "^2.0.5"
 
+pug-attrs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-3.0.0.tgz#b10451e0348165e31fad1cc23ebddd9dc7347c41"
+  integrity sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==
+  dependencies:
+    constantinople "^4.0.1"
+    js-stringify "^1.0.2"
+    pug-runtime "^3.0.0"
+
 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"
@@ -24823,11 +26128,30 @@ pug-code-gen@^2.0.2:
     void-elements "^2.0.1"
     with "^5.0.0"
 
+pug-code-gen@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.1.tgz#ff3b337b100c494ea63ef766091d27f7d73acb7e"
+  integrity sha512-xJIGvmXTQlkJllq6hqxxjRWcay2F9CU69TuAuiVZgHK0afOhG5txrQOcZyaPHBvSWCU/QQOqEp5XCH94rRZpBQ==
+  dependencies:
+    constantinople "^4.0.1"
+    doctypes "^1.1.0"
+    js-stringify "^1.0.2"
+    pug-attrs "^3.0.0"
+    pug-error "^2.0.0"
+    pug-runtime "^3.0.0"
+    void-elements "^3.1.0"
+    with "^7.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-error@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.0.0.tgz#5c62173cb09c34de2a2ce04f17b8adfec74d8ca5"
+  integrity sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
+
 pug-filters@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-3.1.1.tgz#ab2cc82db9eeccf578bda89130e252a0db026aa7"
@@ -24841,6 +26165,17 @@ pug-filters@^3.1.1:
     resolve "^1.1.6"
     uglify-js "^2.6.1"
 
+pug-filters@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-4.0.0.tgz#d3e49af5ba8472e9b7a66d980e707ce9d2cc9b5e"
+  integrity sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==
+  dependencies:
+    constantinople "^4.0.1"
+    jstransformer "1.0.0"
+    pug-error "^2.0.0"
+    pug-walk "^2.0.0"
+    resolve "^1.15.1"
+
 pug-lexer@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-4.1.0.tgz#531cde48c7c0b1fcbbc2b85485c8665e31489cfd"
@@ -24850,6 +26185,15 @@ pug-lexer@^4.1.0:
     is-expression "^3.0.0"
     pug-error "^1.3.3"
 
+pug-lexer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-5.0.0.tgz#0b779e7d8cbf0f103803675be96351942fd9a727"
+  integrity sha512-52xMk8nNpuyQ/M2wjZBN5gXQLIylaGkAoTk5Y1pBhVqaopaoj8Z0iVzpbFZAqitL4RHNVDZRnJDsqEYe99Ti0A==
+  dependencies:
+    character-parser "^2.2.0"
+    is-expression "^4.0.0"
+    pug-error "^2.0.0"
+
 pug-linker@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-3.0.6.tgz#f5bf218b0efd65ce6670f7afc51658d0f82989fb"
@@ -24858,6 +26202,14 @@ pug-linker@^3.0.6:
     pug-error "^1.3.3"
     pug-walk "^1.1.8"
 
+pug-linker@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-4.0.0.tgz#12cbc0594fc5a3e06b9fc59e6f93c146962a7708"
+  integrity sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==
+  dependencies:
+    pug-error "^2.0.0"
+    pug-walk "^2.0.0"
+
 pug-load@^2.0.12:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.12.tgz#d38c85eb85f6e2f704dea14dcca94144d35d3e7b"
@@ -24866,6 +26218,14 @@ pug-load@^2.0.12:
     object-assign "^4.1.0"
     pug-walk "^1.1.8"
 
+pug-load@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-3.0.0.tgz#9fd9cda52202b08adb11d25681fb9f34bd41b662"
+  integrity sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==
+  dependencies:
+    object-assign "^4.1.1"
+    pug-walk "^2.0.0"
+
 pug-parser@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-5.0.1.tgz#03e7ada48b6840bd3822f867d7d90f842d0ffdc9"
@@ -24874,11 +26234,24 @@ pug-parser@^5.0.1:
     pug-error "^1.3.3"
     token-stream "0.0.1"
 
+pug-parser@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-6.0.0.tgz#a8fdc035863a95b2c1dc5ebf4ecf80b4e76a1260"
+  integrity sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==
+  dependencies:
+    pug-error "^2.0.0"
+    token-stream "1.0.0"
+
 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-runtime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-3.0.0.tgz#d523025fdc0a1efe70929d1fd3a2d24121ffffb6"
+  integrity sha512-GoEPcmQNnaTsePEdVA05bDpY+Op5VLHKayg08AQiqJBWU/yIaywEYv7TetC5dEQS3fzBBoyb2InDcZEg3mPTIA==
+
 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"
@@ -24886,11 +26259,23 @@ pug-strip-comments@^1.0.4:
   dependencies:
     pug-error "^1.3.3"
 
+pug-strip-comments@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz#f94b07fd6b495523330f490a7f554b4ff876303e"
+  integrity sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==
+  dependencies:
+    pug-error "^2.0.0"
+
 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-walk@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-2.0.0.tgz#417aabc29232bb4499b5b5069a2b2d2a24d5f5fe"
+  integrity sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
+
 pug@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
@@ -24905,13 +26290,19 @@ pug@^2.0.3:
     pug-runtime "^2.0.5"
     pug-strip-comments "^1.0.4"
 
-pump@^1.0.0, pump@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
-  integrity sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
+pug@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.0.tgz#101eecd7a236cd9906e420e17799d4d57f2b7d93"
+  integrity sha512-inmsJyFBSHZaiGLaguoFgJGViX0If6AcfcElimvwj9perqjDpUpw79UIEDZbWFmoGVidh08aoE+e8tVkjVJPCw==
+  dependencies:
+    pug-code-gen "^3.0.0"
+    pug-filters "^4.0.0"
+    pug-lexer "^5.0.0"
+    pug-linker "^4.0.0"
+    pug-load "^3.0.0"
+    pug-parser "^6.0.0"
+    pug-runtime "^3.0.0"
+    pug-strip-comments "^2.0.0"
 
 pump@^2.0.0:
   version "2.0.1"
@@ -24953,24 +26344,49 @@ punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
+pupa@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.0.1.tgz#dbdc9ff48ffbea4a26a069b6f9f7abb051008726"
+  integrity sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==
+  dependencies:
+    escape-goat "^2.0.0"
+
+puppeteer-core@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-2.1.1.tgz#e9b3fbc1237b4f66e25999832229e9db3e0b90ed"
+  integrity sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==
+  dependencies:
+    "@types/mime-types" "^2.1.0"
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^4.0.0"
+    mime "^2.0.3"
+    mime-types "^2.1.25"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
 puppeteer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-2.0.0.tgz#0612992e29ec418e0a62c8bebe61af1a64d7ec01"
-  integrity sha512-t3MmTWzQxPRP71teU6l0jX47PHXlc4Z52sQv4LJQSZLq1ttkKS2yGM3gaI57uQwZkNaoGd0+HPPMELZkcyhlqA==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-2.1.1.tgz#ccde47c2a688f131883b50f2d697bd25189da27e"
+  integrity sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==
   dependencies:
+    "@types/mime-types" "^2.1.0"
     debug "^4.1.0"
     extract-zip "^1.6.6"
-    https-proxy-agent "^3.0.0"
+    https-proxy-agent "^4.0.0"
     mime "^2.0.3"
+    mime-types "^2.1.25"
     progress "^2.0.1"
     proxy-from-env "^1.0.0"
     rimraf "^2.6.1"
     ws "^6.1.0"
 
 purgecss@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.1.tgz#d362e63eb1ed9dd1fa1554b9fd7accb8d54e56dc"
-  integrity sha512-5jONV/D/3nfa+lC425+LA+OWe5/LDn4a79cac+TnzJq3VczwnWlpIDdW275hHsGhkzIlqATQsYFLW7or0cSwNQ==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.2.tgz#67ab50cb4f5c163fcefde56002467c974e577f41"
+  integrity sha512-hkOreFTgiyMHMmC2BxzdIw5DuC6kxAbP/gGOGd3MEsF3+5m69rIvUEPaxrnoUtfODTFKe9hcXjGwC6jcjoyhOw==
   dependencies:
     glob "^7.1.3"
     postcss "^7.0.14"
@@ -24987,25 +26403,20 @@ q@^1.0.1, q@^1.1.2, q@^1.4.1, q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qrcode-terminal@0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.11.0.tgz#ffc6c28a2fc0bfb47052b47e23f4f446a5fbdb9e"
-  integrity sha1-/8bCii/Av7RwUrR+I/T0RqX7254=
-
-qs@6.5.2, qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+qrcode-terminal@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
+  integrity sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==
 
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@^6.2.0, qs@^6.4.0, qs@^6.5.0, qs@^6.6.0:
-  version "6.9.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
-  integrity sha512-Cxm7/SS/y/Z3MHWSxXb8lIFqgqBowP5JMlTUFyJN88y0SGQhVmZnqFK/PeuMX9LzUyWsqqhNxIyg0jlzq946yA==
+qs@^6.2.0, qs@^6.4.0, qs@^6.6.0:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
+  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
 
 qs@~1.0.0:
   version "1.0.2"
@@ -25017,6 +26428,11 @@ qs@~2.3.3:
   resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
   integrity sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=
 
+qs@~6.5.1, qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -25034,10 +26450,10 @@ query-string@^5.0.1:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.2.0, query-string@^6.8.2:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.9.0.tgz#1c3b727c370cf00f177c99f328fda2108f8fa3dd"
-  integrity sha512-KG4bhCFYapExLsUHrFt+kQVEegF2agm4cpF/VNc6pZVthIfCc/GK8t8VyNIE3nyXG9DK3Tf2EGkxjR6/uRdYsA==
+query-string@^6.8.2:
+  version "6.12.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.12.1.tgz#2ae4d272db4fba267141665374e49a1de09e8a7c"
+  integrity sha512-OHj+zzfRMyj3rmo/6G8a5Ifvw3AleL/EbcHMD27YA31Q+cO5lfmQxECkImuNVjcskLcvBRVHNAB3w6udMs1eAA==
   dependencies:
     decode-uri-component "^0.2.0"
     split-on-first "^1.0.0"
@@ -25058,14 +26474,7 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
 
-quick-format-unescaped@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-1.1.2.tgz#0ca581de3174becef25ac3c2e8956342381db698"
-  integrity sha1-DKWB3jF0vs7yWsPC6JVjQjgdtpg=
-  dependencies:
-    fast-safe-stringify "^1.0.8"
-
-quick-format-unescaped@^3.0.2:
+quick-format-unescaped@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-3.0.3.tgz#fb3e468ac64c01d22305806c39f121ddac0d1fb9"
   integrity sha512-dy1yjycmn9blucmJLXOfZDx1ikZJUi6E8bBZLnhPG5gBrVhHXx2xVyqqgKBubVNEXmx51dBACMHpoMQK/N/AXQ==
@@ -25075,6 +26484,11 @@ quick-lru@^1.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/quick-temp/-/quick-temp-0.1.8.tgz#bab02a242ab8fb0dd758a3c9776b32f9a5d94408"
@@ -25093,7 +26507,7 @@ quote-stream@^1.0.1, quote-stream@~1.0.2:
     minimist "^1.1.3"
     through2 "^2.0.0"
 
-raf@3.4.1, raf@^3.4.0:
+raf@^3.4.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -25105,10 +26519,10 @@ railroad-diagrams@^1.0.0:
   resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
   integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
 
-ramda@0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
-  integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=
+ramda@0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 ramda@^0.21.0:
   version "0.21.0"
@@ -25197,13 +26611,6 @@ raptor-dust@^1:
     async-writer "^1.1.0"
     raptor-util "^1.0.0"
 
-raptor-json@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/raptor-json/-/raptor-json-1.1.0.tgz#70bd09b14e64f7d32ec50cce8377d6029c0f0876"
-  integrity sha1-cL0JsU5k99MuxQzOg3fWApwPCHY=
-  dependencies:
-    raptor-strings "^1.0.0"
-
 raptor-logging@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/raptor-logging/-/raptor-logging-1.1.3.tgz#6bd8843632882e56387aa53bcafcbebaca695ca1"
@@ -25242,7 +26649,7 @@ raptor-stacktraces@^1.0.0:
   resolved "https://registry.yarnpkg.com/raptor-stacktraces/-/raptor-stacktraces-1.0.1.tgz#7f9fb271a7ddcdae291c6a6b15ddeffbcc008a76"
   integrity sha1-f5+ycafdza4pHGprFd3v+8wAinY=
 
-raptor-strings@^1.0.0, raptor-strings@^1.0.2:
+raptor-strings@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/raptor-strings/-/raptor-strings-1.0.2.tgz#92ce2cb0153afe90470d8039a0255b4cf33ab5fc"
   integrity sha1-ks4ssBU6/pBHDYA5oCVbTPM6tfw=
@@ -25259,27 +26666,6 @@ raptor-util@^3.1.0, raptor-util@^3.2.0:
   resolved "https://registry.yarnpkg.com/raptor-util/-/raptor-util-3.2.0.tgz#23b0c803c8f1ac8a1cae67d9a6388b49161c9758"
   integrity sha1-I7DIA8jxrIocrmfZpjiLSRYcl1g=
 
-raven@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/raven/-/raven-2.6.3.tgz#207475a12809277ef54eaceafe2597ff65262ab4"
-  integrity sha512-bKre7qlDW+y1+G2bUtCuntdDYc8o5v1T233t0vmJfbj8ttGOgLrGRlYB8saelVMW9KUAJNLrhFkAKOwFWFJonw==
-  dependencies:
-    cookie "0.3.1"
-    md5 "^2.2.1"
-    stack-trace "0.0.10"
-    timed-out "4.0.1"
-    uuid "3.0.0"
-
-raw-body@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
-  integrity sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==
-  dependencies:
-    bytes "3.0.0"
-    http-errors "1.6.3"
-    iconv-lite "0.4.23"
-    unpipe "1.0.0"
-
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -25308,13 +26694,21 @@ raw-body@~1.1.0:
     bytes "1"
     string_decoder "0.10"
 
-raw-loader@3.1.0, raw-loader@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
-  integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
+raw-loader@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.0.tgz#d639c40fb9d72b5c7f8abc1fb2ddb25b29d3d540"
+  integrity sha512-iINUOYvl1cGEmfoaLjnZXt4bKfT2LJnZZib5N/LLyAphC+Dd11vNP9CNVb38j+SAJpFI1uo8j9frmih53ASy7Q==
   dependencies:
-    loader-utils "^1.1.0"
-    schema-utils "^2.0.1"
+    loader-utils "^1.2.3"
+    schema-utils "^2.5.0"
+
+raw-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
+  integrity sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
 
 rax-children@^1.0.0:
   version "1.0.0"
@@ -25329,9 +26723,9 @@ rax-clone-element@^1.0.0:
     rax-is-valid-element "^1.0.0"
 
 rax-compile-config@^0.2.0:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/rax-compile-config/-/rax-compile-config-0.2.7.tgz#7fc910e7cb8af9e6999e70b5e4c0f99084521f54"
-  integrity sha512-PIDSeKq5MW0xnGVynMFUZmzCZky37WBpPYKbD9ZMT0Wqf/BdebRkhoguB+/+EOEYxNrAy4R2eJ38xZsNitfs6g==
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/rax-compile-config/-/rax-compile-config-0.2.13.tgz#eca585205e01f80b5baad4ab225ce1d22b3f8d8f"
+  integrity sha512-leGtvVl8uHYWDAna6jVYKwYiChNr3ioTzLHO3SJ5H1+R8kup9q78TyjFJfn/8q8Nm7ABtyt9otAiqtgXBXXZdw==
   dependencies:
     "@babel/code-frame" "^7.5.5"
     "@babel/generator" "^7.6.4"
@@ -25360,6 +26754,7 @@ rax-compile-config@^0.2.0:
     babel-plugin-transform-jsx-memo "^0.1.2"
     babel-plugin-transform-jsx-slot "^0.1.1"
     babel-plugin-transform-jsx-stylesheet "^0.6.8"
+    babel-plugin-transform-jsx-to-html "^0.1.0"
     babel-runtime-jsx-plus "^0.1.3"
     chalk "^2.4.2"
     fs-extra "^8.1.0"
@@ -25385,55 +26780,37 @@ rax-is-valid-element@^1.0.0:
   integrity sha512-MM3IUAQRKn3EJ0D2vjxgobOJLplLAw3YxE7/IRM6ytDYzlPq5iIZ8wsXoPAp/qW3Y+n23HLQUIljmLKywcCEIA==
 
 rax-link@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/rax-link/-/rax-link-1.1.1.tgz#9e7864e6d578f164dfa723aa27451b34cc25c187"
-  integrity sha512-dmx50DHPrA5LJAVua93TpscZL1QAyA3rXgIN+2crJl62cUcYITfXKl0qgBtQiJsNqVJtmAIqhFyRiPXkz+ch8Q==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/rax-link/-/rax-link-1.4.0.tgz#642fc80abce3e23910a3e81f1ee26a23d4fa3230"
+  integrity sha512-jtO/H6s+vVUq27nvNIFQE9Jt/oN0hKIKUzB3YK7g18KhZnfORJF8wfHtw+0yYQ5gu2paSgp5zas8V2EnK83scA==
   dependencies:
     rax-text "^1.0.1"
-    universal-env "^1.0.0"
-
-rax-scripts@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/rax-scripts/-/rax-scripts-2.0.4.tgz#da322451be7c98a56e95fbecc1d91f0b26393a74"
-  integrity sha512-VMBDLhX8HIEs5Q6gAsQqlr65UU+Ilyef7HLrZCaAo03//Wj0f7zTxNa7jSeRS4Cbt+wFrhZOwpzi9i5zbnAVfA==
-  dependencies:
-    "@babel/preset-typescript" "^7.6.0"
-    babel-core "7.0.0-bridge.0"
-    babel-jest "^23.6.0"
-    commander "^3.0.1"
-    eslint "^5.10.0"
-    eslint-plugin-import "^2.14.0"
-    eslint-plugin-react "~7.11.1"
-    jest "^24.8.0"
-    jest-cli "^24.7.1"
-    jest-localstorage-mock "^2.3.0"
-    rax-compile-config "^0.2.0"
-    scripts-core "^0.1.0"
+    universal-env "^3.0.0"
 
-rax-test-renderer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rax-test-renderer/-/rax-test-renderer-1.0.0.tgz#13b7d680557db20539d216e3a0bb397ab210beb6"
-  integrity sha512-4k0WFgueaZsGsGE1OJoKMQCVXIGN7lGKwSM29GU6f7X/YPvZ33pSCFOyr+TFFjs7YUO4GfVX1at0Hoo3E2mrog==
+rax-server-renderer@^1.0.0:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/rax-server-renderer/-/rax-server-renderer-1.1.7.tgz#13342f2ca80a3a7e4636fd561feaac61230089d2"
+  integrity sha512-cdPwAESXGsXRFNeMsJev2grZEhzWPDt90sJLGYqq+p9lCp1VavxRon1wysGTolq8rqN90c6jFJ/cftFs+STy3A==
 
 rax-text@^1.0.1, rax-text@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/rax-text/-/rax-text-1.1.2.tgz#c72f5ca2746cd91b8686078b65de2880a4489439"
-  integrity sha512-CchRe/tV20ahIeyG7FWiUbfwkZfyxuVq1OiLbeU81fdXOcwsXNo/SclsTgIdOfDC9nu+FEkLMYMQhCL/oSCJNg==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rax-text/-/rax-text-1.3.1.tgz#e91ca62253f2f1fbb44f49548627fffb8d809340"
+  integrity sha512-BQ2ZC6jEa7WnGm+ZsiwGvMFD7yEvpvHq3qljJRqJwtYewJsimZ2KZ+d66EWwvSgfXGGtss1DJmqCUBRFHsFnxw==
   dependencies:
-    universal-env "^1.0.0"
+    universal-env "^3.0.0"
 
 rax-view@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/rax-view/-/rax-view-1.1.0.tgz#4ff95bcadb6c5355d342753b7f4e364e219c3411"
-  integrity sha512-AaBkFaks49Igs8tHU3HmYoa+PoXitMbddAQ8BlfJabYTT6/gfcMdj7ejDB/23MGtB/cuJthmuiQMlkr8/JVUuA==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/rax-view/-/rax-view-1.1.2.tgz#3fb43a007ab1a0fbc14c633a2aaf46f16adede5a"
+  integrity sha512-HYUDcOMcJ1uVfa5ITXDlJNyjT7ivQkJstlrUXC9agmFPh8HFk6ZRLtJilgMPFO4FXK7vmcA83UKTfmfCcFIUQw==
   dependencies:
     classnames "^2.2.6"
-    universal-env "^1.0.0"
+    universal-env "^3.0.0"
 
 rax@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/rax/-/rax-1.1.0.tgz#124cccf8462c4d367f3e8fa96f5a637da49428c7"
-  integrity sha512-/DWDOWCIZoYr2DauE7ZmiPWkvQ7CNzh+VXHY+37B5k86JApt6wxkNUVoeuMYNXxu7PqqdQLE+6DGZA6YAJ2kiA==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/rax/-/rax-1.1.3.tgz#4498ef2f3074ef4317cb0802d81442e0ea614922"
+  integrity sha512-MPOydNpBjqW0O1JKXX+yrs2mRdJJBVwktSnVd1Tmy41/x/7CkB27hZsbLVbgGsoRh4ZMnxAuebP2bKgyE99k6A==
   dependencies:
     "@babel/runtime" "^7.2.0"
     driver-server "^1.0.0"
@@ -25443,7 +26820,7 @@ rax@^1.1.0:
     rax-create-factory "^1.0.0"
     rax-is-valid-element "^1.0.0"
 
-rc@^1.1.0, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -25453,43 +26830,22 @@ rc@^1.1.0, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.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-app-polyfill@^1.0.1, react-app-polyfill@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.4.tgz#4dd2636846b585c2d842b1e44e1bc29044345874"
-  integrity sha512-5Vte6ki7jpNsNCUKaboyofAhmURmCn2Y6Hu7ydJ6Iu4dct1CIGoh/1FT7gUZKAbowVX2lxVPlijvp1nKxfAl4w==
-  dependencies:
-    core-js "3.2.1"
-    object-assign "4.1.1"
-    promise "8.0.3"
-    raf "3.4.1"
-    regenerator-runtime "0.13.3"
-    whatwg-fetch "3.0.0"
-
-react-clientside-effect@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
-  integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
+react-app-polyfill@^1.0.1, react-app-polyfill@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
+  integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==
   dependencies:
-    "@babel/runtime" "^7.0.0"
-
-react-clone-referenced-element@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-clone-referenced-element/-/react-clone-referenced-element-1.1.0.tgz#9cdda7f2aeb54fea791f3ab8c6ab96c7a77d0158"
-  integrity sha512-FKOsfKbBkPxYE8576EM6uAfHC4rnMpLyH6/TJUL4WcHUEB3EUn8AxPjnnV/IiwSSzsClvHYK+sDELKN/EJ0WYg==
+    core-js "^3.5.0"
+    object-assign "^4.1.1"
+    promise "^8.0.3"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.3"
+    whatwg-fetch "^3.0.0"
 
 react-color@^2.17.0:
-  version "2.17.3"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.3.tgz#b8556d744f95193468c7061d2aa19180118d4a48"
-  integrity sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
+  integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
   dependencies:
     "@icons/material" "^0.2.4"
     lodash "^4.17.11"
@@ -25498,43 +26854,37 @@ react-color@^2.17.0:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-deep-force-update@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
-  integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
-
-react-dev-utils@9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.0.3.tgz#7607455587abb84599451460eb37cef0b684131a"
-  integrity sha512-OyInhcwsvycQ3Zr2pQN+HV4gtRXrky5mJXIy4HnqrWa+mI624xfYfqGuC9dYbxp4Qq3YZzP8GSGQjv0AgNU15w==
+react-dev-utils@^10.0.0, react-dev-utils@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
+  integrity sha512-XxTbgJnYZmxuPtY3y/UV0D8/65NKkmaia4rXzViknVnZeVlklSh8u6TnaEYPfAi/Gh1TP4mEOXHI6jQOPbeakQ==
   dependencies:
-    "@babel/code-frame" "7.5.5"
-    address "1.1.0"
-    browserslist "4.6.6"
+    "@babel/code-frame" "7.8.3"
+    address "1.1.2"
+    browserslist "4.10.0"
     chalk "2.4.2"
-    cross-spawn "6.0.5"
+    cross-spawn "7.0.1"
     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.5.0"
+    escape-string-regexp "2.0.0"
+    filesize "6.0.1"
+    find-up "4.1.0"
+    fork-ts-checker-webpack-plugin "3.1.1"
     global-modules "2.0.0"
     globby "8.0.2"
     gzip-size "5.1.1"
     immer "1.10.0"
-    inquirer "6.5.0"
+    inquirer "7.0.4"
     is-root "2.1.0"
     loader-utils "1.2.3"
-    open "^6.3.0"
-    pkg-up "2.0.0"
-    react-error-overlay "^6.0.1"
+    open "^7.0.2"
+    pkg-up "3.1.0"
+    react-error-overlay "^6.0.7"
     recursive-readdir "2.2.2"
-    shell-quote "1.6.1"
-    sockjs-client "1.3.0"
-    strip-ansi "5.2.0"
+    shell-quote "1.7.2"
+    strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dev-utils@^9.0.0, react-dev-utils@^9.0.1, react-dev-utils@^9.1.0:
+react-dev-utils@^9.0.1, react-dev-utils@^9.0.4:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
   integrity sha512-X2KYF/lIGyGwP/F/oXgGDF24nxDA2KC4b7AFto+eqzc/t838gpSGiaU8trTqHXOohuLxxc5qi1eDzsl9ucPDpg==
@@ -25565,41 +26915,33 @@ react-dev-utils@^9.0.0, react-dev-utils@^9.0.1, react-dev-utils@^9.1.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-devtools-core@^3.4.2, react-devtools-core@^3.6.0:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-3.6.3.tgz#977d95b684c6ad28205f0c62e1e12c5f16675814"
-  integrity sha512-+P+eFy/yo8Z/UH9J0DqHZuUM5+RI2wl249TNvMx3J2jpUomLQa4Zxl56GEotGfw3PIP1eI+hVf1s53FlUONStQ==
-  dependencies:
-    shell-quote "^1.6.1"
-    ws "^3.3.1"
-
-react-docgen-typescript-loader@^3.3.0, react-docgen-typescript-loader@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.6.0.tgz#5515f03f869e66d49e287c5f1e7ec10f2084f7bb"
-  integrity sha512-+uEsM3VYCdlcBGxF3tBqI5XWL1phvrh8dkiIfdpciKlM1BDHW+d82kKJI9hX6zk9H8TL+3Th/j/JAEaKb5FFNw==
+react-docgen-typescript-loader@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.7.2.tgz#45cb2305652c0602767242a8700ad1ebd66bbbbd"
+  integrity sha512-fNzUayyUGzSyoOl7E89VaPKJk9dpvdSgyXg81cUkwy0u+NBvkzQG3FC5WBIlXda0k/iaxS+PWi+OC+tUiGxzPA==
   dependencies:
     "@webpack-contrib/schema-utils" "^1.0.0-beta.0"
     loader-utils "^1.2.3"
     react-docgen-typescript "^1.15.0"
 
 react-docgen-typescript@^1.15.0:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.15.1.tgz#1648aa422940d9850bc5433c1d179e440d8401f6"
-  integrity sha512-/6yjmJJBqJ1fu721gMrCCF3zu4290S03f/EM75w4ZrjU84Bi/lZ096fARdjSWYCUgIPrwRlwZvziTnXUhjalIw==
+  version "1.16.5"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.16.5.tgz#b305563425ab370f5a3c82b42579eb5069449b87"
+  integrity sha512-guXnx6a554IDVUoVIkX/BGRTrwc2n2w/kMxo7TKLNLJW1qszhT6BRHX4qV8eWq5eaJxRxuesOW5AOLiOI9WQOA==
 
-react-docgen@^5.0.0-beta.1:
-  version "5.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.0.0-beta.1.tgz#3654ab8f5cb7abacbfc122c1950c45d8e77048da"
-  integrity sha512-CbbHF5jXrgyXuP3gQcN1zG4YpNj5QQuxTsEhKH3UXQN01V4cho/eL926ya6ecCWryUtlK97QGRxtK48KbCtXEQ==
+react-docgen@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.3.0.tgz#9aabde5e69f1993c8ba839fd9a86696504654589"
+  integrity sha512-hUrv69k6nxazOuOmdGeOpC/ldiKy7Qj/UFpxaQi0eDMrUFUTIPGtY5HJu7BggSmiyAMfREaESbtBL9UzdQ+hyg==
   dependencies:
-    "@babel/core" "^7.4.4"
-    "@babel/runtime" "^7.0.0"
-    ast-types "^0.12.4"
-    async "^2.1.4"
+    "@babel/core" "^7.7.5"
+    "@babel/runtime" "^7.7.6"
+    ast-types "^0.13.2"
     commander "^2.19.0"
     doctrine "^3.0.0"
+    neo-async "^2.6.1"
     node-dir "^0.1.10"
-    strip-indent "^2.0.0"
+    strip-indent "^3.0.0"
 
 react-dom@^15.4.2:
   version "15.6.2"
@@ -25611,403 +26953,124 @@ react-dom@^15.4.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-dom@^16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
-  integrity sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.16.2"
-
-react-dom@^16.11.0, react-dom@^16.8.3, react-dom@^16.8.4:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
-  integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==
+react-dom@^16.0.0, react-dom@^16.10.2, react-dom@^16.12.0, react-dom@^16.13.1, react-dom@^16.8.3, react-dom@^16.8.4:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.17.0"
+    scheduler "^0.19.1"
 
 react-draggable@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.1.0.tgz#e1c5b774001e32f0bff397254e1e9d5448ac92a4"
-  integrity sha512-Or/qe70cfymshqoC8Lsp0ukTzijJObehb7Vfl7tb5JRxoV+b6PDkOGoqYaWBzZ59k9dH/bwraLGsnlW78/3vrA==
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.2.tgz#f3cefecee25f467f865144cda0d066e5f05f94a0"
+  integrity sha512-zLQs4R4bnBCGnCVTZiD8hPsHtkiJxgMpGDlRESM+EHQo8ysXhKJ2GKdJ8UxxLJdRVceX1j19jy+hQS2wHislPQ==
   dependencies:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
-react-element-to-jsx-string@^14.0.2, react-element-to-jsx-string@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.1.0.tgz#31fcc3a82459d5e57ef852aa6879bcd0a578a8cb"
-  integrity sha512-uvfAsY6bn2c8HMBkxwj+2MMXcvNIkKDl0aZg2Jhzp+c096hZaXUNivVCP2H4RBtmGSSJcfMqQA5oPk8YdqFOVw==
+react-element-to-jsx-string@^14.1.0:
+  version "14.3.1"
+  resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.1.tgz#a08fa6e46eb76061aca7eabc2e70f433583cb203"
+  integrity sha512-LRdQWRB+xcVPOL4PU4RYuTg6dUJ/FNmaQ8ls6w38YbzkbV6Yr5tFNESroub9GiSghtnMq8dQg2LcNN5aMIDzVg==
   dependencies:
-    "@base2/pretty-print-object" "^1.0.0"
+    "@base2/pretty-print-object" "1.0.0"
     is-plain-object "3.0.0"
 
-react-error-overlay@^6.0.1, react-error-overlay@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
-  integrity sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw==
-
-react-fast-compare@^2.0.4:
-  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==
+react-error-overlay@^6.0.3, react-error-overlay@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
+  integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-focus-lock@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
-  integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^0.6.6"
-    prop-types "^15.6.2"
-    react-clientside-effect "^1.2.2"
-    use-callback-ref "^1.2.1"
-    use-sidecar "^1.0.1"
+react-fast-compare@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
+  integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw==
 
 react-ga@^2.5.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c"
-  integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==
-
-react-google-maps@^9.4.5:
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/react-google-maps/-/react-google-maps-9.4.5.tgz#920c199bdc925e0ce93880edffb09428d263aafa"
-  integrity sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA==
-  dependencies:
-    babel-runtime "^6.11.6"
-    can-use-dom "^0.1.0"
-    google-maps-infobox "^2.0.0"
-    invariant "^2.2.1"
-    lodash "^4.16.2"
-    marker-clusterer-plus "^2.1.4"
-    markerwithlabel "^2.0.1"
-    prop-types "^15.5.8"
-    recompose "^0.26.0"
-    scriptjs "^2.5.8"
-    warning "^3.0.0"
-
-react-helmet-async@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
-  integrity sha512-KTGHE9sz8N7+fCkZ2a3vzXH9eIkiTNhL2NhKR7XzzQl3WsGlCHh76arauJUIiGdfhjeMp7DY7PkASAmYFXeJYg==
-  dependencies:
-    "@babel/runtime" "^7.3.4"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
-    react-fast-compare "^2.0.4"
-    shallowequal "^1.1.0"
-
-react-hotkeys@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
-  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
-  dependencies:
-    prop-types "^15.6.1"
-
-react-input-autosize@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
-  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
-  dependencies:
-    prop-types "^15.5.8"
-
-react-inspector@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-4.0.0.tgz#ad73200ca18452aff333df2e2791be4544c422a9"
-  integrity sha512-heh4THBeJg0HLYO/3VBAOaFPkdEHoTZq9VFgP4rOzGw/jyqdVd5spfXSl3LNB1fwrwaWef75Q1hCuwlY4GaKjQ==
-  dependencies:
-    babel-runtime "^6.26.0"
-    is-dom "^1.0.9"
-    prop-types "^15.6.1"
-    storybook-chromatic "^2.2.2"
-
-react-is@^16.10.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
-  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
-
-react-lifecycles-compat@^3.0.4:
-  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==
-
-react-moment-proptypes@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz#89881479840a76c13574a86e3bb214c4ba564e7a"
-  integrity sha512-ZbOn/P4u469WEGAw5hgkS/E+g1YZqdves2BjYsLluJobzUZCtManhjHiZKjniBVT7MSHM6D/iKtRVzlXVv3ikA==
-  dependencies:
-    moment ">=1.6.0"
-
-react-native-animatable@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
-  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
-  dependencies:
-    prop-types "^15.7.2"
-
-react-native-branch@2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.2.5.tgz#4074dd63b4973e6397d9ce50e97b57c77a518e9d"
-  integrity sha1-QHTdY7SXPmOX2c5Q6XtXx3pRjp0=
-
-react-native-color-picker@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-color-picker/-/react-native-color-picker-0.4.2.tgz#5d4534b846f3b92b062cf28b185d1a4f35671fca"
-  integrity sha512-9mvaCx8XdKnUy/QjX8Z0WTGmZN4pms202g9dyTfRiS0U59GLWTVAkMKh+Cd+DjpAu9duzIDLKzb1l+m0oKSE+w==
-  dependencies:
-    prop-types "^15.5.10"
-    tinycolor2 "^1.4.1"
-
-react-native-gesture-handler@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.2.1.tgz#9c48fb1ab13d29cece24bbb77b1e847eebf27a2b"
-  integrity sha512-c1+L72Vjc/bwHKcIJ8a2/88SW9l3/axcAIpg3zB1qTzwdCxHZJeQn6d58cQXHPepxFBbgfTCo60B7SipSfo+zw==
-  dependencies:
-    hoist-non-react-statics "^2.3.1"
-    invariant "^2.2.2"
-    prop-types "^15.5.10"
-
-react-native-maps@0.24.2:
-  version "0.24.2"
-  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.24.2.tgz#19974f967cb0c2e24dab74ca879118e0932571b2"
-  integrity sha512-1iNIDikp2dkCG+8DguaEviYZiMSYyvwqYT7pO2YTZvuFRDSc/P9jXMhTUnSh4wNDlEeQ47OJ09l0pwWVBZ7wxg==
+  integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==
 
-react-native-modal-datetime-picker@^7.4.2:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-7.6.0.tgz#6818f221010d0f61a6396a956b303fee65726fee"
-  integrity sha512-p7MquU/oAFO+S7+d1IYYK/8b9mroZXuStK2HA2FxX3e8O1YeNyq2Bggr4KPr6D0saJ/6iGzq8pFwN0YfaCW9+A==
+react-helmet-async@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.6.tgz#11c15c74e79b3f66670c73779bef3e0e352b1d4e"
+  integrity sha512-t+bhAI4NgxfEv8ez4r77cLfR4O4Z55E/FH2DT+uiE4U7yfWgAk7OAOi7IxHxuYEVLI26bqjZvlVCkpC5/5AoNA==
   dependencies:
+    "@babel/runtime" "^7.9.2"
+    invariant "^2.2.4"
     prop-types "^15.7.2"
-    react-native-modal "^11.0.2"
-
-react-native-modal-selector@^1.0.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-native-modal-selector/-/react-native-modal-selector-1.1.2.tgz#5b919a1c7d1fa95c741c0132adb0a3233b7ef40e"
-  integrity sha512-LHFvEsoUUSFrpU3vZIYO/0wjizaGC5vSbkypKsf8qmVGoXvOtUVvJrvyf12YFkr0S1FkYYjRFb0t/H1PNdDRRQ==
-  dependencies:
-    prop-types "^15.5.10"
+    react-fast-compare "^3.0.1"
+    shallowequal "^1.1.0"
 
-react-native-modal@^11.0.2:
-  version "11.5.3"
-  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.5.3.tgz#28b4c761680a165eaf1d2c0fb08e272c0191b39f"
-  integrity sha512-U6RghSkZUZ6c0LHMbwAnVscEwGoI58eXfBstVs18t50miV0GmLcJhIOu5OND+SDGVkBQFiGFRu/pTUJaA7wfGw==
+react-hotkeys@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
+  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
   dependencies:
-    prop-types "^15.6.2"
-    react-native-animatable "1.3.3"
-
-react-native-reanimated@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz#5ecb6a2f6dad0351077ac9b771ca943b7ad6feda"
-  integrity sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA==
+    prop-types "^15.6.1"
 
-react-native-safe-module@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-module/-/react-native-safe-module-1.2.0.tgz#a23824ca24edc2901913694a76646475113d570d"
-  integrity sha1-ojgkyiTtwpAZE2lKdmRkdRE9Vw0=
+react-input-autosize@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
+  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
   dependencies:
-    dedent "^0.6.0"
-
-react-native-screens@1.0.0-alpha.22:
-  version "1.0.0-alpha.22"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b"
-  integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA==
+    prop-types "^15.5.8"
 
-react-native-simple-markdown@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-simple-markdown/-/react-native-simple-markdown-1.1.0.tgz#4d462f8ced26393c5230467420c61a50cc6a8095"
-  integrity sha1-TUYvjO0mOTxSMEZ0IMYaUMxqgJU=
+react-inspector@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.0.1.tgz#8a30f3d488c4f40203624bbe24800f508ae05d3a"
+  integrity sha512-qRIENuAIcRaytrmg/TL5nN5igYZMzyQqIKlWA8zoYRDltULsZC1bWy2Ua5wYJuwEYnC3gK4FCjcIQnb+5OyLsQ==
   dependencies:
-    lodash "^4.15.0"
-    simple-markdown "git://github.com/CharlesMangwa/simple-markdown.git"
+    "@babel/runtime" "^7.8.7"
+    is-dom "^1.1.0"
+    prop-types "^15.6.1"
 
-react-native-svg@9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.4.0.tgz#e428e0eae55aebd2355f1ff4f22675dad4611960"
-  integrity sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg==
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-swipe-gestures@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.4.tgz#6a9c6613bfe06cd9014a36a2c4a09f719ff62451"
-  integrity sha512-C/vz0KPHNyqHk3uF4Cz/jzd/0N8z34ZgsjAZUh/RsXPH2FtJJf3Fw73pQDWJSoCMtvVadlztb8xQ+/aEQrll7w==
+react-lifecycles-compat@^3.0.4:
+  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==
 
-react-native-switch@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/react-native-switch/-/react-native-switch-1.5.0.tgz#a5c8e72f87def649d1c9de027c5ae27e2037ea40"
-  integrity sha1-pcjnL4fe9knRyd4CfFrifiA36kA=
+react-moment-proptypes@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz#89881479840a76c13574a86e3bb214c4ba564e7a"
+  integrity sha512-ZbOn/P4u469WEGAw5hgkS/E+g1YZqdves2BjYsLluJobzUZCtManhjHiZKjniBVT7MSHM6D/iKtRVzlXVv3ikA==
   dependencies:
-    prop-types "^15.6.0"
-
-react-native-view-shot@2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz#3b23675826f67658366352c4b97b59a6aded2f43"
-  integrity sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ==
+    moment ">=1.6.0"
 
-react-native-webview@5.8.1:
-  version "5.8.1"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-5.8.1.tgz#6f5a83dec55bbc02700155b1a16a668870f14de0"
-  integrity sha512-b6pSvmjoiWtcz6YspggW02X+BRXJWuquHwkh37BRx1NMW1iwMZA31SnFQvTpPzWYYIb9WF/mRsy2nGtt9C6NIg==
-  dependencies:
-    escape-string-regexp "1.0.5"
-    invariant "2.2.4"
+react-native-swipe-gestures@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
+  integrity sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==
 
-react-native@^0.57.8:
-  version "0.57.8"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.57.8.tgz#1a840fbe144cd3902cc14313a783ce28efc48cb9"
-  integrity sha512-K6DAMTPTq+lxVYC73y4Kh/bgLajddBaIKzwsVeV4JOoS1Fdq48/ISXD3vApV+x+/IBVTXnrT9qlA+9U6MMZCqA==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    absolute-path "^0.0.0"
-    art "^0.10.0"
-    base64-js "^1.1.2"
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    compression "^1.7.1"
-    connect "^3.6.5"
-    create-react-class "^15.6.3"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    envinfo "^5.7.0"
-    errorhandler "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    event-target-shim "^1.0.5"
-    fbjs "^1.0.0"
-    fbjs-scripts "^1.0.0"
-    fs-extra "^1.0.0"
-    glob "^7.1.1"
-    graceful-fs "^4.1.3"
-    inquirer "^3.0.6"
-    lodash "^4.17.5"
-    metro "^0.48.1"
-    metro-babel-register "^0.48.1"
-    metro-core "^0.48.1"
-    metro-memory-fs "^0.48.1"
-    mime "^1.3.4"
-    minimist "^1.2.0"
-    mkdirp "^0.5.1"
-    morgan "^1.9.0"
-    node-fetch "^2.2.0"
-    node-notifier "^5.2.1"
-    npmlog "^2.0.4"
-    opn "^3.0.2"
-    optimist "^0.6.1"
-    plist "^3.0.0"
-    pretty-format "^4.2.1"
-    promise "^7.1.1"
-    prop-types "^15.5.8"
-    react-clone-referenced-element "^1.0.1"
-    react-devtools-core "^3.4.2"
-    react-timer-mixin "^0.13.2"
-    regenerator-runtime "^0.11.0"
-    rimraf "^2.5.4"
-    semver "^5.0.3"
-    serve-static "^1.13.1"
-    shell-quote "1.6.1"
-    stacktrace-parser "^0.1.3"
-    ws "^1.1.5"
-    xcode "^1.0.0"
-    xmldoc "^0.4.0"
-    yargs "^9.0.0"
-
-"react-native@https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz":
-  version "0.59.8"
-  resolved "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz#970a32631977dbe7158f024abc23e4c0c0975058"
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    "@react-native-community/cli" "^1.2.1"
-    absolute-path "^0.0.0"
-    art "^0.10.0"
-    base64-js "^1.1.2"
-    chalk "^2.4.1"
-    commander "^2.9.0"
-    compression "^1.7.1"
-    connect "^3.6.5"
-    create-react-class "^15.6.3"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    errorhandler "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    event-target-shim "^1.0.5"
-    fbjs "^1.0.0"
-    fbjs-scripts "^1.0.0"
-    fs-extra "^1.0.0"
-    glob "^7.1.1"
-    graceful-fs "^4.1.3"
-    inquirer "^3.0.6"
-    invariant "^2.2.4"
-    lodash "^4.17.5"
-    metro-babel-register "0.51.0"
-    metro-react-native-babel-transformer "0.51.0"
-    mime "^1.3.4"
-    minimist "^1.2.0"
-    mkdirp "^0.5.1"
-    morgan "^1.9.0"
-    node-fetch "^2.2.0"
-    node-notifier "^5.2.1"
-    npmlog "^2.0.4"
-    nullthrows "^1.1.0"
-    opn "^3.0.2"
-    optimist "^0.6.1"
-    plist "^3.0.0"
-    pretty-format "24.0.0-alpha.6"
-    promise "^7.1.1"
-    prop-types "^15.5.8"
-    react-clone-referenced-element "^1.0.1"
-    react-devtools-core "^3.6.0"
-    regenerator-runtime "^0.11.0"
-    rimraf "^2.5.4"
-    semver "^5.0.3"
-    serve-static "^1.13.1"
-    shell-quote "1.6.1"
-    stacktrace-parser "0.1.4"
-    ws "^1.1.5"
-    xmldoc "^0.4.0"
-    yargs "^9.0.0"
-
-react-popper-tooltip@^2.8.3:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.10.0.tgz#4d8383644d1002a50bd2bf74b2d1214d84ffc77c"
-  integrity sha512-iMNWaY41G7kcx2/kcV+37GLe4C93yI9CPZ9DH+V9tOtJIJwEzm/w9+mlr6G1QLzxefDxjliqymMXk9X73pyuWA==
+react-popper-tooltip@^2.11.0:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
+  integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
   dependencies:
-    "@babel/runtime" "^7.6.3"
-    react-popper "^1.3.4"
+    "@babel/runtime" "^7.9.2"
+    react-popper "^1.3.7"
 
-react-popper@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.6.tgz#32122f83af8fda01bdd4f86625ddacaf64fdd06d"
-  integrity sha512-kLTfa9z8n+0jJvRVal9+vIuirg41rObg4Bbrvv/ZfsGPQDN9reyVVSxqnHF1ZNgXgV7x11PeUfd5ItF8DZnqhg==
+react-popper@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
   dependencies:
     "@babel/runtime" "^7.1.2"
     create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
     popper.js "^1.14.4"
     prop-types "^15.6.1"
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-proxy@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
-  integrity sha1-nb/Z2SdSjDqp9ETkVYw3gwq4wmo=
-  dependencies:
-    lodash "^4.6.1"
-    react-deep-force-update "^1.0.0"
-
-react-redux@^7.0.2:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
-  integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^16.9.0"
-
 react-scripts@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"
@@ -26068,71 +27131,70 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-react-scripts@3.2.0, react-scripts@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.2.0.tgz#58ccd6b4ffa27f1b4d2986cbdcaa916660e9e33c"
-  integrity sha512-6LzuKbE2B4eFQG6i1FnTScn9HDcWBfXXnOwW9xKFPJ/E3rK8i1ufbOZ0ocKyRPxJAKdN7iqg3i7lt0+oxkSVOA==
-  dependencies:
-    "@babel/core" "7.6.0"
-    "@svgr/webpack" "4.3.2"
-    "@typescript-eslint/eslint-plugin" "^2.2.0"
-    "@typescript-eslint/parser" "^2.2.0"
-    babel-eslint "10.0.3"
+react-scripts@3.4.1, react-scripts@^3.0.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
+  integrity sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@svgr/webpack" "4.3.3"
+    "@typescript-eslint/eslint-plugin" "^2.10.0"
+    "@typescript-eslint/parser" "^2.10.0"
+    babel-eslint "10.1.0"
     babel-jest "^24.9.0"
-    babel-loader "8.0.6"
-    babel-plugin-named-asset-import "^0.3.4"
-    babel-preset-react-app "^9.0.2"
-    camelcase "^5.2.0"
-    case-sensitive-paths-webpack-plugin "2.2.0"
-    css-loader "2.1.1"
-    dotenv "6.2.0"
+    babel-loader "8.1.0"
+    babel-plugin-named-asset-import "^0.3.6"
+    babel-preset-react-app "^9.1.2"
+    camelcase "^5.3.1"
+    case-sensitive-paths-webpack-plugin "2.3.0"
+    css-loader "3.4.2"
+    dotenv "8.2.0"
     dotenv-expand "5.1.0"
-    eslint "^6.1.0"
-    eslint-config-react-app "^5.0.2"
-    eslint-loader "3.0.2"
-    eslint-plugin-flowtype "3.13.0"
-    eslint-plugin-import "2.18.2"
+    eslint "^6.6.0"
+    eslint-config-react-app "^5.2.1"
+    eslint-loader "3.0.3"
+    eslint-plugin-flowtype "4.6.0"
+    eslint-plugin-import "2.20.1"
     eslint-plugin-jsx-a11y "6.2.3"
-    eslint-plugin-react "7.14.3"
+    eslint-plugin-react "7.19.0"
     eslint-plugin-react-hooks "^1.6.1"
-    file-loader "3.0.1"
-    fs-extra "7.0.1"
-    html-webpack-plugin "4.0.0-beta.5"
+    file-loader "4.3.0"
+    fs-extra "^8.1.0"
+    html-webpack-plugin "4.0.0-beta.11"
     identity-obj-proxy "3.0.0"
-    is-wsl "^1.1.0"
     jest "24.9.0"
-    jest-environment-jsdom-fourteen "0.1.0"
+    jest-environment-jsdom-fourteen "1.0.1"
     jest-resolve "24.9.0"
-    jest-watch-typeahead "0.4.0"
-    mini-css-extract-plugin "0.8.0"
+    jest-watch-typeahead "0.4.2"
+    mini-css-extract-plugin "0.9.0"
     optimize-css-assets-webpack-plugin "5.0.3"
-    pnp-webpack-plugin "1.5.0"
+    pnp-webpack-plugin "1.6.4"
     postcss-flexbugs-fixes "4.1.0"
     postcss-loader "3.0.0"
-    postcss-normalize "7.0.1"
+    postcss-normalize "8.0.1"
     postcss-preset-env "6.7.0"
     postcss-safe-parser "4.0.1"
-    react-app-polyfill "^1.0.4"
-    react-dev-utils "^9.1.0"
-    resolve "1.12.0"
-    resolve-url-loader "3.1.0"
-    sass-loader "7.2.0"
+    react-app-polyfill "^1.0.6"
+    react-dev-utils "^10.2.1"
+    resolve "1.15.0"
+    resolve-url-loader "3.1.1"
+    sass-loader "8.0.2"
     semver "6.3.0"
-    style-loader "1.0.0"
-    terser-webpack-plugin "1.4.1"
-    ts-pnp "1.1.4"
-    url-loader "2.1.0"
-    webpack "4.41.0"
-    webpack-dev-server "3.2.1"
-    webpack-manifest-plugin "2.1.1"
+    style-loader "0.23.1"
+    terser-webpack-plugin "2.3.5"
+    ts-pnp "1.1.6"
+    url-loader "2.3.0"
+    webpack "4.42.0"
+    webpack-dev-server "3.10.3"
+    webpack-manifest-plugin "2.2.0"
     workbox-webpack-plugin "4.3.1"
   optionalDependencies:
-    fsevents "2.0.7"
+    fsevents "2.1.2"
 
 react-select@^3.0.8:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.8.tgz#06ff764e29db843bcec439ef13e196865242e0c1"
-  integrity sha512-v9LpOhckLlRmXN5A6/mGGEft4FMrfaBFTGAnuPHcUgVId7Je42kTq9y0Z+Ye5z8/j0XDT3zUqza8gaRaI1PZIg==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
+  integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@emotion/cache" "^10.0.9"
@@ -26141,88 +27203,57 @@ react-select@^3.0.8:
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
     react-input-autosize "^2.2.2"
-    react-transition-group "^2.2.1"
+    react-transition-group "^4.3.0"
 
 react-sizeme@^2.5.2, react-sizeme@^2.6.7:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.10.tgz#9993dcb5e67fab94a8e5d078a0d3820609010f17"
-  integrity sha512-OJAPQxSqbcpbsXFD+fr5ARw4hNSAOimWcaTOLcRkIqnTp9+IFWY0w3Qdw1sMez6Ao378aimVL/sW6TTsgigdOA==
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"
+  integrity sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw==
   dependencies:
-    element-resize-detector "^1.1.15"
+    element-resize-detector "^1.2.1"
     invariant "^2.2.4"
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
-react-syntax-highlighter@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
-  integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
+react-syntax-highlighter@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e"
+  integrity sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    highlight.js "~9.13.0"
-    lowlight "~1.11.0"
+    highlight.js "~9.15.1"
+    lowlight "1.12.1"
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-test-renderer@16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.10.2.tgz#4d8492f8678c9b43b721a7d79ed0840fdae7c518"
-  integrity sha512-k9Qzyev6cTIcIfrhgrFlYQAFxh5EEDO6ALNqYqmKsWVA7Q/rUMTay5nD3nthi6COmYsd4ghVYyi8U86aoeMqYQ==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.16.2"
-
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.3, react-test-renderer@^16.8.6:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.12.0.tgz#11417ffda579306d4e841a794d32140f3da1b43f"
-  integrity sha512-Vj/teSqt2oayaWxkbhQ6gKis+t5JrknXfPVo+aIJ8QwYAqMPH77uptOdrlphyxl8eQI/rtkOYg86i/UWkpFu0w==
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.3:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
+  integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
     react-is "^16.8.6"
-    scheduler "^0.18.0"
-
-react-textarea-autosize@^7.0.4, react-textarea-autosize@^7.1.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
-  integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    prop-types "^15.6.0"
-
-react-timer-mixin@^0.13.2:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
-  integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+    scheduler "^0.19.1"
 
-react-transform-hmr@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
-  integrity sha1-4aQL0Krvxy6N/Xp82gmvhQZjl7s=
+react-textarea-autosize@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.0.1.tgz#fce0dbf6a59b7b9d892c6af40b6be06a29f62c49"
+  integrity sha512-Qs7Lm17F0CIsWeDaUcHPpP22etVQHkayOcMgOXTfVasVToS6G+IL+5a7ECZtbDR2qTgTRIXjYcLmuZUuTX4tNA==
   dependencies:
-    global "^4.3.0"
-    react-proxy "^1.1.7"
+    "@babel/runtime" "^7.8.4"
+    use-composed-ref "^1.0.0"
+    use-latest "^1.0.0"
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
-react@*, react@16.12.0, react@^16.10.2, react@^16.6.0, react@^16.8.3, react@^16.8.4:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
-  integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 react@^15.4.2:
   version "15.6.2"
@@ -26235,10 +27266,10 @@ react@^15.4.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react@^16.11.0:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
-  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
+react@^16.0.0, react@^16.10.2, react@^16.13.1, react@^16.8.3, react@^16.8.4, react@^16.9.17:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -26258,22 +27289,6 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-read-chunk@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"
-  integrity sha1-agTAkoAF7Z1C4aasVgDhnLx/9lU=
-  dependencies:
-    pify "^3.0.0"
-    safe-buffer "^5.1.1"
-
-read-chunk@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.2.0.tgz#2984afe78ca9bfbbdb74b19387bf9e86289c16ca"
-  integrity sha512-CEjy9LCzhmD7nUpJ1oVOE6s/hBkejlcJEgLQHVnQznOSilOPb+kpKktlLfFDK3/WP43+F80xkUTM2VOkYoSYvQ==
-  dependencies:
-    pify "^4.0.1"
-    with-open-file "^0.1.6"
-
 read-cmd-shim@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@@ -26281,13 +27296,6 @@ read-cmd-shim@^1.0.1:
   dependencies:
     graceful-fs "^4.1.2"
 
-read-last-lines@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/read-last-lines/-/read-last-lines-1.6.0.tgz#d6e418d7cd3095aab5c3a81b0e5432fab70fe95c"
-  integrity sha512-PLKEiyUBMqRMvPu+vfL1XQmkRE5g/TurxrsoNEURqfHbP6eOJaE/2K6+H2IXSfc6/flG5LIj+MtxahclzVvsAA==
-  dependencies:
-    mz "^2.7.0"
-
 read-only-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -26296,14 +27304,14 @@ read-only-stream@^2.0.0:
     readable-stream "^2.0.2"
 
 "read-package-json@1 || 2", read-package-json@^2.0.0, read-package-json@^2.0.13:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.0.tgz#e3d42e6c35ea5ae820d9a03ab0c7291217fc51d5"
-  integrity sha512-KLhu8M1ZZNkMcrq1+0UJbR8Dii8KZUqB0Sha4mOx/bknfKI/fyrQVrG/YIt2UOtG667sD8+ee4EXMM91W9dC+A==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.1.tgz#16aa66c59e7d4dad6288f179dd9295fd59bb98f1"
+  integrity sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==
   dependencies:
     glob "^7.1.1"
     json-parse-better-errors "^1.0.1"
     normalize-package-data "^2.0.0"
-    slash "^1.0.0"
+    npm-normalize-package-bin "^1.0.0"
   optionalDependencies:
     graceful-fs "^4.1.2"
 
@@ -26348,10 +27356,10 @@ read-pkg-up@^4.0.0:
     find-up "^3.0.0"
     read-pkg "^3.0.0"
 
-read-pkg-up@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.0.tgz#3f3e53858ec5ae5e6fe14bc479da0a7c98f85ff3"
-  integrity sha512-t2ODkS/vTTcRlKwZiZsaLGb5iwfx9Urp924aGzVyboU6+7Z2i6eGr/G1Z4mjvwLLQV3uFOBKobNRGM3ux2PD/w==
+read-pkg-up@^7.0.0, read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
   dependencies:
     find-up "^4.1.0"
     read-pkg "^5.2.0"
@@ -26410,10 +27418,10 @@ 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.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==
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
@@ -26423,10 +27431,20 @@ read@1, read@~1.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-"readable-stream@2 || 3", readable-stream@^3.0.1, readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
-  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+readable-stream@1.1:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+  integrity sha1-9u73ZPUUyJ4rniMUanW6EGdW0j4=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
   dependencies:
     inherits "^2.0.3"
     string_decoder "^1.1.1"
@@ -26461,19 +27479,19 @@ readdirp@^2.0.0, readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-readdirp@~3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.2.0.tgz#c30c33352b12c96dfb4b895421a49fd5a9593839"
-  integrity sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
   dependencies:
-    picomatch "^2.0.4"
+    picomatch "^2.2.1"
 
-readjson@^1.1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/readjson/-/readjson-1.1.4.tgz#89501f648453dcda9b15399b3fb10c38249662c7"
-  integrity sha512-H4dRk2S67w3HtE1apnw5wlHpN9qkJ0pen0AcEvyAfnrPfskZIyUOYLXpfN6olDQZI+eUlxg0Yo4lJ2bymujOUA==
+readjson@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/readjson/-/readjson-2.0.1.tgz#1822964dfd0bc0b49c8f983c192a9dd5309eb9e1"
+  integrity sha512-6WuJWYFKx9IVT0zogHlyRC6p+RttAC457garckmGQ8qKICT/xLVrpmvlwp8nTwPHzopbdXIJ593Df8AErIbgeQ==
   dependencies:
-    try-catch "^2.0.0"
+    try-catch "^3.0.0"
 
 readline-sync@^1.4.9:
   version "1.4.10"
@@ -26487,6 +27505,11 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+realpath-native@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
+  integrity sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==
+
 recast@^0.14.7:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
@@ -26518,24 +27541,24 @@ recast@^0.17.3:
     source-map "~0.6.1"
 
 recast@^0.18.1:
-  version "0.18.5"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.5.tgz#9d5adbc07983a3c8145f3034812374a493e0fe4d"
-  integrity sha512-sD1WJrpLQAkXGyQZyGzTM75WJvyAd98II5CHdK3IYbt/cZlU0UzCRVU11nUFNXX9fBVEt4E9ajkMjBlUlG+Oog==
+  version "0.18.10"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.10.tgz#605ebbe621511eb89b6356a7e224bff66ed91478"
+  integrity sha512-XNvYvkfdAN9QewbrxeTOjgINkdY/odTgTS56ZNEWL9Ml0weT4T3sFtvnTuF+Gxyu46ANcRm1ntrF6F5LAJPAaQ==
   dependencies:
-    ast-types "0.13.2"
+    ast-types "0.13.3"
     esprima "~4.0.0"
     private "^0.1.8"
     source-map "~0.6.1"
 
-recast@~0.11.12:
-  version "0.11.23"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
-  integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
+recast@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.19.1.tgz#555f3612a5a10c9f44b9a923875c51ff775de6c8"
+  integrity sha512-8FCjrBxjeEU2O6I+2hyHyBFH1siJbMBLwIRvVr1T3FD2cL754sOaJDsJ/8h3xYltasbJ8jqWRIhMuDGBSiSbjw==
   dependencies:
-    ast-types "0.9.6"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
+    ast-types "0.13.3"
+    esprima "~4.0.0"
+    private "^0.1.8"
+    source-map "~0.6.1"
 
 rechoir@^0.6.2:
   version "0.6.2"
@@ -26544,16 +27567,6 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-recompose@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
-  integrity sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==
-  dependencies:
-    change-emitter "^0.1.2"
-    fbjs "^0.8.1"
-    hoist-non-react-statics "^2.3.1"
-    symbol-observable "^1.0.4"
-
 recursive-copy@^2.0.10:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/recursive-copy/-/recursive-copy-2.0.10.tgz#a39402f2270c5f8b562b48d438a42e2e6e5c644c"
@@ -26593,6 +27606,14 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 redeyed@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-1.0.1.tgz#e96c193b40c0816b00aec842698e61185e55498a"
@@ -26600,15 +27621,7 @@ redeyed@~1.0.0:
   dependencies:
     esprima "~3.0.0"
 
-redux@^4.0.0, redux@^4.0.1:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
-  integrity sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==
-  dependencies:
-    loose-envify "^1.4.0"
-    symbol-observable "^1.2.0"
-
-reflect-metadata@^0.1.12, reflect-metadata@^0.1.2:
+reflect-metadata@^0.1.2:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
@@ -26619,18 +27632,18 @@ reflect.ownkeys@^0.2.0:
   integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
 
 refractor@^2.4.1:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.0.tgz#4cc7efc0028a87924a9b31d82d129dec831a287b"
-  integrity sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
+  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
   dependencies:
     hastscript "^5.0.0"
     parse-entities "^1.1.2"
     prismjs "~1.17.0"
 
-regenerate-unicode-properties@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
-  integrity sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
   dependencies:
     regenerate "^1.4.0"
 
@@ -26639,10 +27652,10 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@0.13.3, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
-  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+regenerator-runtime@0.13.5, regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
 
 regenerator-runtime@^0.10.5:
   version "0.10.5"
@@ -26654,11 +27667,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
-  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
-
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -26668,12 +27676,13 @@ regenerator-transform@^0.10.0:
     babel-types "^6.19.0"
     private "^0.1.6"
 
-regenerator-transform@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
-  integrity sha512-flVuee02C3FKRISbxhXl9mGzdbWUVHubl1SMaknjxkFB1/iqpJhArQUvRxOOPEc/9tAiX0BaQ28FJH10E4isSQ==
+regenerator-transform@^0.14.2:
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
+  integrity sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==
   dependencies:
-    private "^0.1.6"
+    "@babel/runtime" "^7.8.4"
+    private "^0.1.8"
 
 regex-cache@^0.4.2:
   version "0.4.4"
@@ -26695,12 +27704,13 @@ regex-parser@2.2.10:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
   integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
 
-regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  integrity sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
   dependencies:
-    define-properties "^1.1.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 regexpp@^2.0.1:
   version "2.0.1"
@@ -26708,18 +27718,9 @@ regexpp@^2.0.1:
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
 regexpp@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.0.0.tgz#dd63982ee3300e67b41c1956f850aa680d9d330e"
-  integrity sha512-Z+hNr7RAVWxznLPuA7DIh8UNX1j9CDrUQxskw9IrBE1Dxue2lyXT+shqEIeLUjrokxIP8CMy1WkjgG3rTsd5/g==
-
-regexpu-core@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
-  integrity sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
 regexpu-core@^2.0.0:
   version "2.0.0"
@@ -26730,19 +27731,19 @@ regexpu-core@^2.0.0:
     regjsgen "^0.2.0"
     regjsparser "^0.1.4"
 
-regexpu-core@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
-  integrity sha512-YlVaefl8P5BnFYOITTNzDvan1ulLOiXJzCNZxduTIosN17b87h3bvG9yHMoHaRuo88H4mQ06Aodj5VtYGGGiTg==
+regexpu-core@^4.6.0, regexpu-core@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
   dependencies:
     regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.1.0"
-    regjsgen "^0.5.0"
-    regjsparser "^0.6.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
     unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.1.0"
+    unicode-match-property-value-ecmascript "^1.2.0"
 
-registry-auth-token@^3.4.0:
+registry-auth-token@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.4.0.tgz#d7446815433f5d5ed6431cd5dca21048f66b397e"
   integrity sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==
@@ -26751,12 +27752,18 @@ registry-auth-token@^3.4.0:
     safe-buffer "^5.0.1"
 
 registry-auth-token@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.0.0.tgz#30e55961eec77379da551ea5c4cf43cbf03522be"
-  integrity sha512-lpQkHxd9UL6tb3k/aHAVfnVtn+Bcs9ob5InuFLLEDqSqeq+AljB8GZW9xY0x7F+xYwEcjKe07nyoxzEYz6yvkw==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.1.1.tgz#40a33be1e82539460f94328b0f7f0f84c16d9479"
+  integrity sha512-9bKS7nTl9+/A1s7tnPeGrUpRcVY+LUh7bfFgzpndALdPfXQBfQV77rQVtqgUV3ti4vc/Ik81Ex8UJDWDQ12zQA==
   dependencies:
     rc "^1.2.8"
-    safe-buffer "^5.0.1"
+
+registry-url@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  integrity sha1-PU74cPc93h138M+aOBQyRE4XSUI=
+  dependencies:
+    rc "^1.0.1"
 
 registry-url@^5.0.0:
   version "5.1.0"
@@ -26770,10 +27777,10 @@ regjsgen@^0.2.0:
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
   integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
 
-regjsgen@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
-  integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
+regjsgen@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
 regjsparser@^0.1.4:
   version "0.1.5"
@@ -26782,10 +27789,10 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
-  integrity sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
   dependencies:
     jsesc "~0.5.0"
 
@@ -26794,292 +27801,276 @@ relateurl@0.2.x, relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remark-cli@^7.0.0, remark-cli@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/remark-cli/-/remark-cli-7.0.1.tgz#2d19d77674e20ea20a3f8ae31694ac30fddb1f52"
-  integrity sha512-CUjBLLSbEay0mNwOO+pptnLIoS8UB6cHlhZVpTRKbtbIcw6YEzEfD7jGjW1HCA8lZK87IfY3/DuWE6DlXu+hfg==
+remark-cli@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/remark-cli/-/remark-cli-8.0.0.tgz#0cb405080d320de539656b181908b796c369f37d"
+  integrity sha512-5iRrk8ad+dU4espDl60H7ANhXqoaEXYsIyL8Mau0lDN6pP7QMAZsZTCX2XdoCfKfKEpiOggA7CHv43HkyVEppA==
   dependencies:
     markdown-extensions "^1.1.0"
-    remark "^11.0.0"
-    unified-args "^7.0.0"
+    remark "^12.0.0"
+    unified-args "^8.0.0"
 
-remark-external-links@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-5.0.0.tgz#e7fc0e0cc4c92d33fb195b08ed1dc691fdb1689a"
-  integrity sha512-lYnZGNN10N3YGMvO95Zup4hZ+VHI82JgcrGJfuxOLQExoho/iNhlrPVSkmdapYQl928pkOn4YOgJf/0pdZkteA==
+remark-external-links@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-6.0.0.tgz#c89e2565578584a925097a0526ef7ab874f8e342"
+  integrity sha512-pshbYdqIHxTyMaHYT3H7RS7DIFWchM6cpQ1AU0Fmb7erZ/S3H4fuWvcOM2cE1QNVKPOsXFIi6qi++tmFakTA/w==
   dependencies:
     extend "^3.0.0"
     is-absolute-url "^3.0.0"
-    mdast-util-definitions "^1.2.3"
+    mdast-util-definitions "^2.0.0"
     space-separated-tokens "^1.1.2"
-    unist-util-visit "^1.4.0"
+    unist-util-visit "^2.0.0"
+
+remark-footnotes@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-1.0.0.tgz#9c7a97f9a89397858a50033373020b1ea2aad011"
+  integrity sha512-X9Ncj4cj3/CIvLI2Z9IobHtVi8FVdUrdJkCNaL9kdX8ohfsi18DXHsCVd/A7ssARBdccdDb5ODnt62WuEWaM/g==
 
 remark-lint-final-newline@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-final-newline/-/remark-lint-final-newline-1.0.3.tgz#06c3d71ec7b97c16cde31543cd41a16b36c30f79"
-  integrity sha512-ETAadktv75EwUS3XDhyZUVstXKxfPAEn7SmfN9kZ4+Jb4qo4hHE9gtTOzhE6HxLUxxl9BBhpC5mMO3JcL8UZ5A==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/remark-lint-final-newline/-/remark-lint-final-newline-1.0.4.tgz#b2e6219d64becc9f909bbfb902da6ec79dfa5988"
+  integrity sha512-pUwqX8TVTTfqX5arMnu9Dr2ufg6wZ6Pk1VeqlnWfK92PBXLG8Zc3yrLpYXOJy1fHdWpqUECRRowG0H/OkZIEbw==
   dependencies:
     unified-lint-rule "^1.0.0"
 
-remark-lint-hard-break-spaces@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/remark-lint-hard-break-spaces/-/remark-lint-hard-break-spaces-1.0.4.tgz#200e1dae849a6bc2f8fdb3b843faf23c70942530"
-  integrity sha512-YM82UpgliZCZhGNmFxEe7ArfhqR5CplFf2bc0k0+8w3rKWKx7EJcGMar2NK410tIi40gGeWtH/pIEypPJFCCiA==
+remark-lint-hard-break-spaces@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-hard-break-spaces/-/remark-lint-hard-break-spaces-2.0.0.tgz#266c2b59f63203edd4a5a6d004f63cb7f7142d14"
+  integrity sha512-dmB8GucOSDtEctwa+Y8JlSAWF4q8HcquvLr+OpFOSE1QCrpFoZdb2mcSY+rZuTtfeg4S60orhhzArd2aiHvUPQ==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-list-item-bullet-indent@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-list-item-bullet-indent/-/remark-lint-list-item-bullet-indent-1.0.3.tgz#3b12b7360694508402e0056c7ecd0eedab2aaac1"
-  integrity sha512-iVxQbrgzLpMHG3C6o6wRta/+Bc96etOiBYJnh2zm/aWz6DJ7cGLDykngblP/C4he7LYSeWOD/8Y57HbXZwM2Og==
+remark-lint-list-item-bullet-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-list-item-bullet-indent/-/remark-lint-list-item-bullet-indent-2.0.0.tgz#895e71cdeb7b0c37eab4abb7b2e1ae3b61275a6f"
+  integrity sha512-8iK+ht771UBf/Iuj4YBgdLnFFOyEgfXY62jBoywtMuiOLVWXDfPe+jUY7pCrnFjsnxXGEnMaxHJqENgrHd0J/w==
   dependencies:
-    plur "^3.0.0"
+    pluralize "^8.0.0"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-list-item-indent@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/remark-lint-list-item-indent/-/remark-lint-list-item-indent-1.0.4.tgz#7a1ef6283f9a928f4940e02ec37099935f2783e6"
-  integrity sha512-Sv0gVH6qP1/nFpbJuyyguB9sAD2o42StD2WbEZeUcEexXwRO4u/YaX0Pm5pMtCiEHyN+qyL6ShKBQMtgol9BeA==
+remark-lint-list-item-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-list-item-indent/-/remark-lint-list-item-indent-2.0.0.tgz#88b47c12ca487b639cef10520bf445c5f609c190"
+  integrity sha512-qnKsq2UQpCC8gnI1O23dgoKsd+5RAJrAJuvHXrlkRgzsab7BOMluptxRlyLVXn0P71l4Wo/bfo84Ual7qpOyWw==
   dependencies:
-    plur "^3.0.0"
+    pluralize "^8.0.0"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-auto-link-without-protocol@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-auto-link-without-protocol/-/remark-lint-no-auto-link-without-protocol-1.0.3.tgz#f97aed92af24e6c07023a7a7dc2c147f7eb7927f"
-  integrity sha512-k+hg2mXnO4Q9WV+UShPLen5oThvFxcRVWkx2hviVd/nu3eiszBKH3o38csBwjeJoMG3l2ZhdUW8dlOBhq8670Q==
+remark-lint-no-auto-link-without-protocol@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-auto-link-without-protocol/-/remark-lint-no-auto-link-without-protocol-2.0.0.tgz#e245d7841a08ad5197113aad05110456b1c78ab9"
+  integrity sha512-pIntUa+zNiyRxIt2Wvp1soktDbVnk1SEiJXsjcLYYn9GapgXqOQG5ZfFwR6zxTkGV5mZKo9927EvHQkvIV6cLQ==
   dependencies:
     mdast-util-to-string "^1.0.2"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-blockquote-without-marker@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-blockquote-without-marker/-/remark-lint-no-blockquote-without-marker-2.0.3.tgz#7eb431fcb742412e3bc66faa7f58531245ad952f"
-  integrity sha512-faDzKrA6aKidsRXG6gcIlCO8TexLxIxe+n9B3mdnl8mhZGgE0FfWTkIWVMj0IYps/xVsVMf45KxhXgc1wU9kwg==
+remark-lint-no-blockquote-without-marker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-blockquote-without-marker/-/remark-lint-no-blockquote-without-marker-3.0.0.tgz#8790558a6b45e326434a89e36806f86ea59a82d1"
+  integrity sha512-auyAxMVDuhvGw29VilqUfUIUnBT7qmByG/kBPqV/GwM1a5rn4fIUJ7p9Je9BlWMRCBMTNQUMsm3ce0dawouVew==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
-    vfile-location "^2.0.1"
+    unist-util-visit "^2.0.0"
+    vfile-location "^3.0.0"
 
-remark-lint-no-duplicate-definitions@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-duplicate-definitions/-/remark-lint-no-duplicate-definitions-1.0.5.tgz#b0347f3bae7f8870a9f04a27157ff658fbde28a4"
-  integrity sha512-zKXmfNUODXhJsGQdqfguMG9Nl9v1sLaDsQgMjUtmOSoQRnNud9ThQAZl62eX5jBn5HKcpOifG80tgkyBvU5eEw==
+remark-lint-no-duplicate-definitions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-duplicate-definitions/-/remark-lint-no-duplicate-definitions-2.0.0.tgz#5e643440f0cd4390461ebfde8c5f7287a2cd5899"
+  integrity sha512-Z5DkYKbmS+r4D0ZhaXgK6L72EWzhiklpXNF/TS+KCsffAFgfy5aJfSA3A8GpVNj1wYMP35STXBGBCLW5TckvGw==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
     unist-util-stringify-position "^2.0.0"
-    unist-util-visit "^1.4.0"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-heading-content-indent@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-heading-content-indent/-/remark-lint-no-heading-content-indent-1.0.3.tgz#2f1f23b3e9f0c1e3c3abca5e2de1587cc3178d6b"
-  integrity sha512-7xM6X5E/dt8OXOHdejH+sfYb139a3kMr8ZSSkcp90Ab1y+ZQBNaWsR3mYh8FRKkYPTN5eyd+KjhNpLWyqqCbgg==
+remark-lint-no-heading-content-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-heading-content-indent/-/remark-lint-no-heading-content-indent-2.0.0.tgz#1ffb32496c674ac276565daf49fea4c36d9c0ccb"
+  integrity sha512-Zqg0WXG60Nan8j7HZtnBXidMxXhlhc7Q5JrB54I3n7H3vSPCyaqhZJ2/obYVLalEVGND8NOJGvfA1rtchaZyYg==
   dependencies:
     mdast-util-heading-style "^1.0.2"
-    plur "^3.0.0"
+    pluralize "^8.0.0"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-inline-padding@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-inline-padding/-/remark-lint-no-inline-padding-1.0.4.tgz#eedb4ca2691d30f3f05b4e5e33967bd64a34daa4"
-  integrity sha512-u5rgbDkcfVv645YxxOwoGBBJbsHEwWm/XqnO8EhfKTxkfKOF4ZItG7Ajhj89EDaeXMkvCcB/avBl4bj50eJH3g==
+remark-lint-no-inline-padding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-inline-padding/-/remark-lint-no-inline-padding-2.0.0.tgz#fc1b997a939477def3fc69198c2a7d43169e25a9"
+  integrity sha512-0YueQ3SBA8zFQYCN0/afRc6ZuSbM4Azx4sPVeVpAfMT0MrYgmi6msswyhUDXaeN2RwVO6bx/ZW6di8dVqRr7UA==
   dependencies:
     mdast-util-to-string "^1.0.2"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
-    unist-util-visit "^1.4.0"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-literal-urls@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-literal-urls/-/remark-lint-no-literal-urls-1.0.3.tgz#1b5374e416d1b595ee1902587dc37f34c0d6244a"
-  integrity sha512-H5quyMzl2kaewK+jYD1FI0G1SIinIsIp4DEyOUwIR+vYUoKwo0B4vvW0cmPpD1dgqqxHYx0B2B0JQQKFVWzGiw==
+remark-lint-no-literal-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-literal-urls/-/remark-lint-no-literal-urls-2.0.0.tgz#54a51fe5439242e4fa58458b259add440c2dcd4c"
+  integrity sha512-bZAxr65ftz9joszDkSs2LBeJB2cRE8GydUtxYdA1WRHYmVW1AfM5ilcqLnWhiOmu+XMPH7J0eRvUzbtvu+xerw==
   dependencies:
     mdast-util-to-string "^1.0.2"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-shortcut-reference-image@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-shortcut-reference-image/-/remark-lint-no-shortcut-reference-image-1.0.3.tgz#ab4fa15fd8aff251cb8db1f3aed4853e293aff41"
-  integrity sha512-CGm27X54kXp/5ehXejDTsZjqzK4uIhLGcrFzN3k/KjdwunQouEY92AARGrLSEuJ1hQx0bJsmnvr/hvQyWAfNJg==
+remark-lint-no-shortcut-reference-image@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-shortcut-reference-image/-/remark-lint-no-shortcut-reference-image-2.0.0.tgz#098071db5187b8980b222258a6a6ef0017b3599d"
+  integrity sha512-kgGCQBHibJ0IFVhWjnfjbqkKC0VeL5+cvyjjwfMJlgZrHEXNOYb2FJE2nvF/l6PSXQ17goRZpznTBfP4mQieUA==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-shortcut-reference-link@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-shortcut-reference-link/-/remark-lint-no-shortcut-reference-link-1.0.4.tgz#92af34b939c0341eacdb2fc2ede855f742dc1779"
-  integrity sha512-FXdMJYqspZBhPlxYqfVgVluVXjxStg0RHJzqrk8G9wS8fCS62AE3reoaoiCahwoH1tfKcA+poktbKqDAmZo7Jg==
+remark-lint-no-shortcut-reference-link@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-shortcut-reference-link/-/remark-lint-no-shortcut-reference-link-2.0.0.tgz#a9e195744f2bb469b1ba6d85d48d0015100a9909"
+  integrity sha512-rSdGLWpEsHa4b2doUch+B7QtUHH9XuC8Hndb4rAYf8U0d48KfGAIoiicxUho8qZJ4VA3RIaDo4kA/iQ15Al+Vg==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
-    unist-util-visit "^1.1.1"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-undefined-references@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-undefined-references/-/remark-lint-no-undefined-references-1.1.1.tgz#b9fa2caec896df41a3c47169d9c6dd0cee3a2075"
-  integrity sha512-b1eIjWFaCu6m16Ax2uG33o1v+eRYqDTQRUqU6UeQ76JXmDmVtVO75ZuyRpqqE7VTZRW8YLVurXfJPDXfIa5Wng==
+remark-lint-no-undefined-references@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-undefined-references/-/remark-lint-no-undefined-references-2.0.0.tgz#ec2a45cd19d36a5d9ce16df0a044496881143119"
+  integrity sha512-K4k05pmlMRqEMUDYewitRUx8zM+ntJWbG61dILmL7to7uy0JoSbzuDtz1cxC+kKBKzkulPnyE3WOgRZG8RX2Jg==
   dependencies:
     collapse-white-space "^1.0.4"
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
-    unist-util-visit "^1.4.0"
+    unist-util-visit "^2.0.0"
 
-remark-lint-no-unused-definitions@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/remark-lint-no-unused-definitions/-/remark-lint-no-unused-definitions-1.0.5.tgz#183a0de2e55295f52ff888f99f9830eae35eaddf"
-  integrity sha512-Bo22e0RNzc1QMW317KTuStGFDG7uTDUQhm/TrW6Qzud0WXnNnqUyvts+e7wTYoj8VnwhhjyjyoA9lKA3uXMdAQ==
+remark-lint-no-unused-definitions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-no-unused-definitions/-/remark-lint-no-unused-definitions-2.0.0.tgz#f622b6f129b8c073a4d75234a869211c213d66a7"
+  integrity sha512-Y8zrulwaf7z6WR1ICfEGjW92iq2SPEN7Zhrs0nloNITHOg22tIPf28TurUz9HSQ3sEd52d9bZCfW9RkdfMq1xw==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
-    unist-util-visit "^1.4.0"
+    unist-util-visit "^2.0.0"
 
-remark-lint-ordered-list-marker-style@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/remark-lint-ordered-list-marker-style/-/remark-lint-ordered-list-marker-style-1.0.3.tgz#3fc6b9e254a641036e275269254365c42b7c62a1"
-  integrity sha512-24TmW1eUa/2JlwprZg9jJ8LKLxNGKnlKiI5YOhN4taUp2yv8daqlV9vR54yfn/ZZQh6EQvbIX0jeVY9NYgQUtw==
+remark-lint-ordered-list-marker-style@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint-ordered-list-marker-style/-/remark-lint-ordered-list-marker-style-2.0.0.tgz#0757ecb38ad7ec4ceeef8dcaa9558a969ef8ee2a"
+  integrity sha512-zYMZA8tQD/slJYKqsstZv0/Q34Hkdlf4DjC8SOr92PSA60R/xr7JdVd/AHHisbMsFvdnHZrxaB8oIOtbAUJCSw==
   dependencies:
     unified-lint-rule "^1.0.0"
     unist-util-generated "^1.1.0"
     unist-util-position "^3.0.0"
-    unist-util-visit "^1.1.1"
-
-remark-lint@^6.0.0, remark-lint@^6.0.4:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/remark-lint/-/remark-lint-6.0.5.tgz#fbb864d56bf83d2e5d23ea7e346ca5e36710fda3"
-  integrity sha512-o1I3ddm+KNsTxk60wWGI+p2yU1jB1gcm8jo2Sy6VhJ4ab2TrQIp1oQbp5xeLoFXYSh/NAqCpKjHkCM/BYpkFdQ==
-  dependencies:
-    remark-message-control "^4.0.0"
+    unist-util-visit "^2.0.0"
 
-remark-mdx@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.5.1.tgz#df176c69b0d22fca890812cb828a100d5c14ae60"
-  integrity sha512-emKP/F1VV/k7iKGOfSChTIGocKHXbiDtdn4icefpJUedxLXlNYXe+jiSDSqlBhkv/mmN4poDTTHvFEIV6vpd4w==
-  dependencies:
-    "@babel/core" "7.6.2"
-    "@babel/helper-plugin-utils" "7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "7.6.2"
-    "@babel/plugin-syntax-jsx" "7.2.0"
-    "@mdx-js/util" "^1.5.1"
-    is-alphabetical "1.0.3"
-    remark-parse "7.0.1"
-    unified "8.3.2"
-
-remark-message-control@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/remark-message-control/-/remark-message-control-4.2.0.tgz#184c4a69ce6c4c707a5633fa35b0ce3dbf81f22c"
-  integrity sha512-WXH2t5ljTyhsXlK1zPBLF3iPHbXl58R94phPMreS1xcHWBZJt6Oiu8RtNjy1poZFb3PqKnbYLJeR/CWcZ1bTFw==
+remark-lint@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/remark-lint/-/remark-lint-7.0.0.tgz#76c054bbd32e8b7b01234f6a0c00e3d72ac9129a"
+  integrity sha512-OLrWPYy0MUcGLa/2rjuy1kQILTRRK+JiRtyUzqe4XRoHboGuvFDcy/W2e7sq5hu/0xmD+Eh7cEa1Coiqp7LeaA==
+  dependencies:
+    remark-message-control "^6.0.0"
+
+remark-mdx@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.4.tgz#51c6eba0abb97591f0926c195e088bdb025c0b8a"
+  integrity sha512-tJ/CGNNLVC8nOm0C3EjDQH4Vl3YhawgR2f3J+RaalrMDrT4s5ZzOqoNesV1cnF/DsoOxKlYkExOpNSOa6rkAtQ==
+  dependencies:
+    "@babel/core" "7.9.6"
+    "@babel/helper-plugin-utils" "7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "7.9.6"
+    "@babel/plugin-syntax-jsx" "7.8.3"
+    "@mdx-js/util" "^1.6.4"
+    is-alphabetical "1.0.4"
+    remark-parse "8.0.2"
+    unified "9.0.0"
+
+remark-message-control@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/remark-message-control/-/remark-message-control-6.0.0.tgz#955b054b38c197c9f2e35b1d88a4912949db7fc5"
+  integrity sha512-k9bt7BYc3G7YBdmeAhvd3VavrPa/XlKWR3CyHjr4sLO9xJyly8WHHT3Sp+8HPR8lEUv+/sZaffL7IjMLV0f6BA==
   dependencies:
     mdast-comment-marker "^1.0.0"
-    unified-message-control "^1.0.0"
-    xtend "^4.0.1"
-
-remark-parse@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.1.tgz#0c13d67e0d7b82c2ad2d8b6604ec5fae6c333c2b"
-  integrity sha512-WOZLa545jYXtSy+txza6ACudKWByQac4S2DmGk+tAGO/3XnVTOxwyCIxB7nTcLlk8Aayhcuf3cV1WV6U6L7/DQ==
-  dependencies:
-    collapse-white-space "^1.0.2"
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    is-word-character "^1.0.0"
-    markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    trim "0.0.1"
-    trim-trailing-lines "^1.0.0"
-    unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
-    xtend "^4.0.1"
+    unified-message-control "^3.0.0"
 
-remark-parse@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
-  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
+remark-parse@8.0.2, remark-parse@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.2.tgz#5999bc0b9c2e3edc038800a64ff103d0890b318b"
+  integrity sha512-eMI6kMRjsAGpMXXBAywJwiwAse+KNpmt+BK55Oofy4KvBZEqUDj6mWbGLJZrujoPIPPxDXzn3T9baRlpsm2jnQ==
   dependencies:
+    ccount "^1.0.0"
     collapse-white-space "^1.0.2"
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
     trim-trailing-lines "^1.0.0"
     unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
+    unist-util-remove-position "^2.0.0"
+    vfile-location "^3.0.0"
     xtend "^4.0.1"
 
-remark-preset-lint-recommended@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/remark-preset-lint-recommended/-/remark-preset-lint-recommended-3.0.3.tgz#1322af0e49801278057f8f275ed1b6ed60328b40"
-  integrity sha512-5sQ34j1Irlsj6Tt4WWRylZ7UU+1jD5es/LfDZBZp/LXDwC4ldGqKpMmCCR6Z00x1jYM1phmS4M+eGqTdah0qkQ==
+remark-preset-lint-recommended@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/remark-preset-lint-recommended/-/remark-preset-lint-recommended-4.0.0.tgz#b6221efec09ab7f6eabe2c8b42a9957690b564f5"
+  integrity sha512-Nroe+4Itvk+AHxkMCMu6iRUptE/5pXWgLoEOGdVO/2JIiMk/+15HEogMZ05vMhPct9+Wp4uVt2zqfuvzNzdcww==
   dependencies:
-    remark-lint "^6.0.0"
+    remark-lint "^7.0.0"
     remark-lint-final-newline "^1.0.0"
-    remark-lint-hard-break-spaces "^1.0.0"
-    remark-lint-list-item-bullet-indent "^1.0.0"
-    remark-lint-list-item-indent "^1.0.0"
-    remark-lint-no-auto-link-without-protocol "^1.0.0"
-    remark-lint-no-blockquote-without-marker "^2.0.0"
-    remark-lint-no-duplicate-definitions "^1.0.0"
-    remark-lint-no-heading-content-indent "^1.0.0"
-    remark-lint-no-inline-padding "^1.0.0"
-    remark-lint-no-literal-urls "^1.0.0"
-    remark-lint-no-shortcut-reference-image "^1.0.0"
-    remark-lint-no-shortcut-reference-link "^1.0.0"
-    remark-lint-no-undefined-references "^1.0.0"
-    remark-lint-no-unused-definitions "^1.0.0"
-    remark-lint-ordered-list-marker-style "^1.0.0"
-
-remark-slug@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-5.1.2.tgz#715ecdef8df1226786204b1887d31ab16aa24609"
-  integrity sha512-DWX+Kd9iKycqyD+/B+gEFO3jjnt7Yg1O05lygYSNTe5i5PIxxxPjp5qPBDxPIzp5wreF7+1ROCwRgjEcqmzr3A==
+    remark-lint-hard-break-spaces "^2.0.0"
+    remark-lint-list-item-bullet-indent "^2.0.0"
+    remark-lint-list-item-indent "^2.0.0"
+    remark-lint-no-auto-link-without-protocol "^2.0.0"
+    remark-lint-no-blockquote-without-marker "^3.0.0"
+    remark-lint-no-duplicate-definitions "^2.0.0"
+    remark-lint-no-heading-content-indent "^2.0.0"
+    remark-lint-no-inline-padding "^2.0.0"
+    remark-lint-no-literal-urls "^2.0.0"
+    remark-lint-no-shortcut-reference-image "^2.0.0"
+    remark-lint-no-shortcut-reference-link "^2.0.0"
+    remark-lint-no-undefined-references "^2.0.0"
+    remark-lint-no-unused-definitions "^2.0.0"
+    remark-lint-ordered-list-marker-style "^2.0.0"
+
+remark-slug@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-6.0.0.tgz#2b54a14a7b50407a5e462ac2f376022cce263e2c"
+  integrity sha512-ln67v5BrGKHpETnm6z6adlJPhESFJwfuZZ3jrmi+lKTzeZxh2tzFzUfDD4Pm2hRGOarHLuGToO86MNMZ/hA67Q==
   dependencies:
     github-slugger "^1.0.0"
     mdast-util-to-string "^1.0.0"
-    unist-util-visit "^1.0.0"
+    unist-util-visit "^2.0.0"
 
-remark-squeeze-paragraphs@3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.4.tgz#9fe50c3bf3b572dd88754cd426ada007c0b8dc5f"
-  integrity sha512-Wmz5Yj9q+W1oryo8BV17JrOXZgUKVcpJ2ApE2pwnoHwhFKSk4Wp2PmFNbmJMgYSqAdFwfkoe+TSYop5Fy8wMgA==
+remark-squeeze-paragraphs@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz#76eb0e085295131c84748c8e43810159c5653ead"
+  integrity sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw==
   dependencies:
-    mdast-squeeze-paragraphs "^3.0.0"
+    mdast-squeeze-paragraphs "^4.0.0"
 
-remark-stringify@^7.0.0:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
-  integrity sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==
+remark-stringify@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.0.0.tgz#33423ab8bf3076fb197f4cf582aaaf866b531625"
+  integrity sha512-cABVYVloFH+2ZI5bdqzoOmemcz/ZuhQSH6W6ZNYnLojAUUn3xtX7u+6BpnYp35qHoGr2NFBsERV14t4vCIeW8w==
   dependencies:
     ccount "^1.0.0"
     is-alphanumeric "^1.0.0"
@@ -27087,34 +28078,29 @@ remark-stringify@^7.0.0:
     is-whitespace-character "^1.0.0"
     longest-streak "^2.0.1"
     markdown-escapes "^1.0.0"
-    markdown-table "^1.1.0"
-    mdast-util-compact "^1.0.0"
-    parse-entities "^1.0.2"
+    markdown-table "^2.0.0"
+    mdast-util-compact "^2.0.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
-    stringify-entities "^2.0.0"
+    stringify-entities "^3.0.0"
     unherit "^1.0.4"
     xtend "^4.0.1"
 
-remark@^11.0.0:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-11.0.2.tgz#12b90ea100ac3362b1976fa87a6e4e0ab5968202"
-  integrity sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==
+remark@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.0.tgz#d1c145c07341c9232f93b2f8539d56da15a2548c"
+  integrity sha512-oX4lMIS0csgk8AEbzY0h2jdR0ngiCHOpwwpxjmRa5TqAkeknY+tkhjRJGZqnCmvyuWh55/0SW5WY3R3nn3PH9A==
   dependencies:
-    remark-parse "^7.0.0"
-    remark-stringify "^7.0.0"
-    unified "^8.2.0"
+    remark-parse "^8.0.0"
+    remark-stringify "^8.0.0"
+    unified "^9.0.0"
 
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
   integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
-remove-trailing-slash@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-slash/-/remove-trailing-slash-0.1.0.tgz#1498e5df0984c27e49b76ebf06887ca2d01150d2"
-  integrity sha1-FJjl3wmEwn5Jt26/Boh8otARUNI=
-
 renderkid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.3.tgz#380179c2ff5ae1365c522bf2fcfcff01c5b74149"
@@ -27131,7 +28117,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.0.0, repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -27148,11 +28134,6 @@ replace-ext@1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-replace-string@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/replace-string/-/replace-string-1.1.0.tgz#87062117f823fe5800c306bacb2cfa359b935fea"
-  integrity sha1-hwYhF/gj/lgAwwa6yyz6NZuTX+o=
-
 request-progress@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
@@ -27160,13 +28141,6 @@ request-progress@3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
-request-promise-core@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
-  integrity sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=
-  dependencies:
-    lodash "^4.13.1"
-
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -27174,16 +28148,7 @@ request-promise-core@1.1.3:
   dependencies:
     lodash "^4.17.15"
 
-request-promise-native@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
-  integrity sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=
-  dependencies:
-    request-promise-core "1.1.1"
-    stealthy-require "^1.1.0"
-    tough-cookie ">=2.3.3"
-
-request-promise-native@^1.0.5, request-promise-native@^1.0.7:
+request-promise-native@^1.0.5, request-promise-native@^1.0.7, request-promise-native@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
   integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
@@ -27192,7 +28157,33 @@ request-promise-native@^1.0.5, request-promise-native@^1.0.7:
     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.87.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.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==
@@ -27218,6 +28209,32 @@ request@2.88.0, "request@>=2.76.0 <3.0.0", request@^2.81.0, request@^2.83.0, req
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
+"request@>=2.76.0 <3.0.0", request@^2.83.0, request@^2.87.0, request@^2.88.0, request@^2.88.2:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 request@~2.40.0:
   version "2.40.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.40.0.tgz#4dd670f696f1e6e842e66b4b5e839301ab9beb67"
@@ -27285,10 +28302,10 @@ 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:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
@@ -27297,6 +28314,13 @@ resolve-cwd@^2.0.0:
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -27305,11 +28329,6 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
-resolve-from@5.0.0, resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
 resolve-from@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
@@ -27330,7 +28349,12 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-package-path@^1.0.11, resolve-package-path@^1.2.6, resolve-package-path@^1.2.7:
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-package-path@^1.0.11, resolve-package-path@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/resolve-package-path/-/resolve-package-path-1.2.7.tgz#2a7bc37ad96865e239330e3102c31322847e652e"
   integrity sha512-fVEKHGeK85bGbVFuwO9o1aU0n3vqQGrezPc51JGu9UTXpFQfWq5qCeKxyaRUSvephs+06c5j5rPq/dzHGEo8+Q==
@@ -27338,6 +28362,14 @@ resolve-package-path@^1.0.11, resolve-package-path@^1.2.6, resolve-package-path@
     path-root "^0.1.1"
     resolve "^1.10.0"
 
+resolve-package-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-package-path/-/resolve-package-path-2.0.0.tgz#7f258ab86ff074fff4ff8027a28f94d17d6fb1df"
+  integrity sha512-/CLuzodHO2wyyHTzls5Qr+EFeG6RcW4u6//gjYvUfcfyuplIX1SSccU+A5A9A78Gmezkl3NBkFAMxLbzTY9TJA==
+  dependencies:
+    path-root "^0.1.1"
+    resolve "^1.13.1"
+
 resolve-path@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/resolve-path/-/resolve-path-1.4.0.tgz#c4bda9f5efb2fce65247873ab36bb4d834fe16f7"
@@ -27346,18 +28378,18 @@ resolve-path@^1.4.0:
     http-errors "~1.6.2"
     path-is-absolute "1.0.1"
 
-resolve-url-loader@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
-  integrity sha512-2QcrA+2QgVqsMJ1Hn5NnJXIGCX1clQ1F6QJTqOeiaDw9ACo1G2k+8/shq3mtqne03HOFyskAClqfxKyFBriXZg==
+resolve-url-loader@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
+  integrity sha512-K1N5xUjj7v0l2j/3Sgs5b8CjrrgtC70SmdCuZiJ8tSyb5J+uk3FoeZ4b7yTnH6j7ngI+Bc5bldHJIa8hYdu2gQ==
   dependencies:
     adjust-sourcemap-loader "2.0.0"
-    camelcase "5.0.0"
+    camelcase "5.3.1"
     compose-function "3.0.3"
-    convert-source-map "1.6.0"
+    convert-source-map "1.7.0"
     es6-iterator "2.0.3"
     loader-utils "1.2.3"
-    postcss "7.0.14"
+    postcss "7.0.21"
     rework "1.0.1"
     rework-visit "1.0.0"
     source-map "0.6.1"
@@ -27379,17 +28411,17 @@ resolve@1.10.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
-  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
+resolve@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.0.tgz#1b7ca96073ebb52e741ffd799f6b39ea462c67f5"
+  integrity sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==
   dependencies:
     path-parse "^1.0.6"
 
-resolve@1.x, resolve@^1.1.4, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.13.1.tgz#be0aa4c06acd53083505abb35f4d66932ab35d16"
-  integrity sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==
+resolve@^1.1.4, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.0, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
   dependencies:
     path-parse "^1.0.6"
 
@@ -27455,7 +28487,7 @@ retry@^0.10.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
   integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
 
-reusify@^1.0.0:
+reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
@@ -27478,10 +28510,10 @@ rework@1.0.1:
     convert-source-map "^0.3.3"
     css "^2.0.0"
 
-rfc6902@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/rfc6902/-/rfc6902-3.0.4.tgz#82965f13536fd20cb7799ce0376e9ce7cd3ebfe6"
-  integrity sha512-OnzreaZXrwT5w2ikKXWr5QcuI7NZpL+J3hIkAwozjOnKVUL7fPsB8Vcmu8YBiiou1/r3V0Jc0T1uQDyfAPvLzA==
+rfdc@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
+  integrity sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==
 
 rgb-regex@^1.0.1:
   version "1.0.1"
@@ -27514,18 +28546,13 @@ rimraf@2.6.3, rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
-rimraf@3.0.0, rimraf@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
-  integrity sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==
+rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.1, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
-rimraf@~2.2.6:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
-  integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=
-
 rimraf@~2.4.0:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
@@ -27613,6 +28640,13 @@ rollup-pluginutils@^2.0.1:
   dependencies:
     estree-walker "^0.6.1"
 
+rollup@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.1.0.tgz#552e248e397a06b9c6db878c0564ca4ee06729c9"
+  integrity sha512-gfE1455AEazVVTJoeQtcOq/U6GSxwoj4XPSWVsuWmgIxj7sBQNLDOSA82PbdMe+cP8ql8fR1jogPFe8Wg8g4SQ==
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 rollup@^0.57.1:
   version "0.57.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.57.1.tgz#0bb28be6151d253f67cf4a00fea48fb823c74027"
@@ -27630,10 +28664,10 @@ rollup@^0.57.1:
     signal-exit "^3.0.2"
     sourcemap-codec "^1.4.1"
 
-rotating-file-stream@^1.4.4:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/rotating-file-stream/-/rotating-file-stream-1.4.6.tgz#42725b951835f6c3b5c16f8f6126e65758ef1d61"
-  integrity sha512-QS7vGxBK6sGc1mCqlmAuwV4J0fmmVCKaUgMvKbkTueZr4jdkXN3bSpTEOQxtdtAVEzi1aUqdHzwIQ0ejNn+CQg==
+rotating-file-stream@^2.0.2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/rotating-file-stream/-/rotating-file-stream-2.1.1.tgz#41f7f63a16dc016171e845b3d664063fe38cb652"
+  integrity sha512-cAKIeAmdr5ttkEogIYHpbyV1DSTe9FsY/jr3RPrC1BqbGZn4OBgWR2ye+42CQnbxqW3PcvhPD36emX9fDvZtrw==
 
 routes-table@^1.2.1:
   version "1.2.5"
@@ -27651,7 +28685,7 @@ rst-selector-parser@^2.2.3:
     lodash.flattendeep "^4.4.0"
     nearley "^2.7.10"
 
-rsvp@^3.0.14, rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.0.21, rsvp@^3.0.6, rsvp@^3.1.0, rsvp@^3.3.3:
+rsvp@^3.0.14, rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.0.21, rsvp@^3.0.6, rsvp@^3.1.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
   integrity sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==
@@ -27666,22 +28700,10 @@ rsvp@~3.2.1:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.2.1.tgz#07cb4a5df25add9e826ebc67dcc9fd89db27d84a"
   integrity sha1-B8tKXfJa3Z6Cbrxn3Mn9idsn2Eo=
 
-rtl-detect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
-  integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
-
-run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
-  dependencies:
-    is-promise "^2.1.0"
-
-run-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
-  integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
+run-async@^2.2.0, run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 run-parallel@^1.1.9:
   version "1.1.9"
@@ -27700,46 +28722,22 @@ rusha@^0.8.1:
   resolved "https://registry.yarnpkg.com/rusha/-/rusha-0.8.13.tgz#9a084e7b860b17bff3015b92c67a6a336191513a"
   integrity sha1-mghOe4YLF7/zAVuSxnpqM2GRUTo=
 
-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
-  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
-  dependencies:
-    rx-lite "*"
-
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
-  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
-
-rx@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
-  integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
-
 rxjs-compat@^6.4.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.5.3.tgz#18440949b2678bf87a78a754009676b2c49183dc"
-  integrity sha512-BIJX2yovz3TBpjJoAZyls2QYuU6ZiCaZ+U96SmxQpuSP/qDUfiXPKOVLbThBB2WZijNHkdTTJXKRwvv5Y48H7g==
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.5.5.tgz#073c40510f29c45a2a5fc02dde87f8c3ad75f2c2"
+  integrity sha512-F42sssVbUyWH4vJswEo6m+Eh02xHv3q93n8S7nUJO58R7sbc3CvJIOts605zdaBhWa1xMB9aVSyqPqhQ5q3eXg==
 
-rxjs@6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504"
-  integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==
+rxjs@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
+  integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
   dependencies:
     tslib "^1.9.0"
 
-rxjs@^5.0.0-beta.11, rxjs@^5.5.2:
-  version "5.5.12"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
-  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
-  dependencies:
-    symbol-observable "1.0.1"
-
-rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
-  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
+rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.2, rxjs@^6.5.3, rxjs@^6.5.4, rxjs@^6.5.5:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
+  integrity sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -27754,9 +28752,14 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-identifier@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.1.tgz#b6516bf72594f03142b5f914f4c01842ccb1b678"
+  integrity sha512-73tOz5TXsq3apuCc3vC8c9QRhhdNZGiBhHmPPjqpH4TO5oCDqk8UIsDcSs/RG6dYcFAkOOva0pqHS3u7hh7XXA==
 
 safe-json-parse@~1.0.1:
   version "1.0.1"
@@ -27775,44 +28778,11 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sane@^2.0.0:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.5.2.tgz#b4dc1861c21b427e929507a3e751e2a2cb8ab3fa"
-  integrity sha1-tNwYYcIbQn6SlQej51HiosuKs/o=
-  dependencies:
-    anymatch "^2.0.0"
-    capture-exit "^1.2.0"
-    exec-sh "^0.2.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-    watch "~0.18.0"
-  optionalDependencies:
-    fsevents "^1.2.3"
-
-sane@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-3.1.0.tgz#995193b7dc1445ef1fe41ddfca2faf9f111854c6"
-  integrity sha512-G5GClRRxT1cELXfdAq7UKtUsv8q/ZC5k8lQGmjEm4HcAl3HzBy68iglyNCmw4+0tiXPCBZntslHlRhbnsSws+Q==
-  dependencies:
-    anymatch "^2.0.0"
-    capture-exit "^1.2.0"
-    exec-sh "^0.2.0"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-    watch "~0.18.0"
-  optionalDependencies:
-    fsevents "^1.2.3"
-
 sane@^4.0.0, sane@^4.0.3, sane@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
@@ -27828,15 +28798,20 @@ sane@^4.0.0, sane@^4.0.3, sane@^4.1.0:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
-  integrity sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=
+sanitize.css@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"
+  integrity sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==
+
+sass-graph@2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8"
+  integrity sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
     scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
+    yargs "^13.3.2"
 
 sass-loader@7.1.0:
   version "7.1.0"
@@ -27850,32 +28825,28 @@ sass-loader@7.1.0:
     pify "^3.0.0"
     semver "^5.5.0"
 
-sass-loader@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.2.0.tgz#e34115239309d15b2527cb62b5dfefb62a96ff7f"
-  integrity sha512-h8yUWaWtsbuIiOCgR9fd9c2lRXZ2uG+h8Dzg/AGNj+Hg/3TO8+BBAW9mEP+mh8ei+qBKqSJ0F1FLlYjNBc61OA==
-  dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.0.1"
-    neo-async "^2.5.0"
-    pify "^4.0.1"
-    semver "^5.5.0"
-
-sass-loader@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.0.tgz#e7b07a3e357f965e6b03dd45b016b0a9746af797"
-  integrity sha512-+qeMu563PN7rPdit2+n5uuYVR0SSVwm0JsOUsaJXzgYcClWSlmX0iHDnmeOobPkf5kUglVot3QS6SyLyaQoJ4w==
+sass-loader@8.0.2, sass-loader@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
   dependencies:
     clone-deep "^4.0.1"
     loader-utils "^1.2.3"
     neo-async "^2.6.1"
-    schema-utils "^2.1.0"
+    schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sass@1.22.9:
-  version "1.22.9"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.22.9.tgz#41a2ed6038027f58be2bd5041293452a29c2cb84"
-  integrity sha512-FzU1X2V8DlnqabrL4u7OBwD2vcOzNMongEJEx3xMEhWY/v26FFR3aG0hyeu2T965sfR0E9ufJwmG+Qjz78vFPQ==
+sass@1.26.3:
+  version "1.26.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"
+  integrity sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
+sass@^1.23.2:
+  version "1.26.5"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.5.tgz#2d7aecfbbabfa298567c8f06615b6e24d2d68099"
+  integrity sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
@@ -27886,21 +28857,11 @@ saucelabs@^1.5.0:
   dependencies:
     https-proxy-agent "^2.2.1"
 
-sax@0.5.x:
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
-  integrity sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=
-
 sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-sax@~1.1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.1.6.tgz#5d616be8a5e607d54e114afae55b7eaf2fcc3240"
-  integrity sha1-XWFr6KXmB9VOEUr65Vt+ry/MMkA=
-
 saxes@^3.1.5, saxes@^3.1.9:
   version "3.1.11"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
@@ -27908,44 +28869,21 @@ saxes@^3.1.5, saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-schedule@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.5.0.tgz#c128fffa0b402488b08b55ae74bb9df55cc29cc8"
-  integrity sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==
-  dependencies:
-    object-assign "^4.1.1"
-
-scheduler@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"
-  integrity sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-scheduler@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
-  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+saxes@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
   dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+    xmlchars "^2.2.0"
 
-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-schema-utils@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
-  integrity sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=
-  dependencies:
-    ajv "^5.0.0"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -27955,47 +28893,27 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.2.0, schema-utils@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.5.0.tgz#8f254f618d402cc80257486213c8970edfd7c22f"
-  integrity sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==
+schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5, schema-utils@^2.6.6:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
+  integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
   dependencies:
-    ajv "^6.10.2"
+    ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
 scope-analyzer@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/scope-analyzer/-/scope-analyzer-2.0.5.tgz#72c9c6770c3e66984f84c7d3c7045998a1a7db8a"
-  integrity sha512-+U5H0417mnTEstCD5VwOYO7V4vYuSqwqjFap40ythe67bhMFL5C3UgPwyBv7KDJsqUBIKafOD57xMlh1rN7eaw==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/scope-analyzer/-/scope-analyzer-2.1.1.tgz#5156c27de084d74bf75af9e9506aaf95c6e73dd6"
+  integrity sha512-azEAihtQ9mEyZGhfgTJy3IbOWEzeOrYbg7NcYEshPKnKd+LZmC3TNd5dmDxbLBsTG/JVWmCp+vDJ03vJjeXMHg==
   dependencies:
     array-from "^2.1.1"
+    dash-ast "^1.0.0"
     es6-map "^0.1.5"
     es6-set "^0.1.5"
     es6-symbol "^3.1.1"
     estree-is-function "^1.0.0"
     get-assigned-identifiers "^1.1.0"
 
-scriptjs@^2.5.8:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
-  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
-
-scripts-core@^0.1.0:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/scripts-core/-/scripts-core-0.1.4.tgz#0992c98e53e129d57ecdc113f4a4c8f7f3f0161c"
-  integrity sha512-Ilrz2+HJvVzFI/84FVgSReBNvsSyCmcwEhKYv13FWZ5HCT/k7LZGgYfF9MGxPqSckYM5wrQCtUf5CSPCt8UTQA==
-  dependencies:
-    address "^1.1.0"
-    chalk "^2.4.1"
-    commander "^2.19.0"
-    console-clear "^1.1.1"
-    deepmerge "^4.0.0"
-    fs-extra "^8.1.0"
-    lodash "^4.17.15"
-    npmlog "^4.1.2"
-    webpack "^4.27.1"
-    webpack-dev-server "^3.7.2"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -28004,6 +28922,11 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+secure-compare@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"
+  integrity sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -28024,6 +28947,11 @@ selenium-webdriver@3.6.0, selenium-webdriver@^3.0.1:
     tmp "0.0.30"
     xml2js "^0.4.17"
 
+self-closing-tags@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
+  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
+
 selfsigned@^1.10.7, selfsigned@^1.9.1:
   version "1.10.7"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
@@ -28043,6 +28971,13 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
 semver-dsl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/semver-dsl/-/semver-dsl-1.0.1.tgz#d3678de5555e8a61f629eed025366ae5f27340a0"
@@ -28057,7 +28992,12 @@ semver-intersect@1.4.0:
   dependencies:
     semver "^5.0.0"
 
-"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0:
+semver-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
+  integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
+
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.0, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -28072,12 +29012,7 @@ semver@6.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
   integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==
 
-semver@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
-  integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==
-
-semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+semver@6.3.0, semver@6.x, semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -28087,30 +29022,26 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
+semver@7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
+  integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==
+
+semver@7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.2.1.tgz#d997aa36bdbb00b501ae4ac4c7d17e9f7a587ae5"
+  integrity sha512-aHhm1pD02jXXkyIpq25qBZjr3CQgg8KST8uX0OWXch3xE6jw+1bfbWnCjzMwojsTquroUmKFHNzU6x26mEiRxw==
+
+semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
   integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
 
-send@0.16.2, send@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
-  integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.4.0"
-
 send@0.17.1, send@latest:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -28130,25 +29061,34 @@ send@0.17.1, send@latest:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-error@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
-  integrity sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=
-
-serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
-  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
+send@^0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.4.0"
 
-serialize-javascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.0.tgz#9310276819efd0eb128258bb341957f6eb2fc570"
-  integrity sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==
+serialize-javascript@^1.4.0, serialize-javascript@^2.1.2, serialize-javascript@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.0.0.tgz#492e489a2d77b7b804ad391a5f5d97870952548e"
+  integrity sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==
 
 serialize-to-js@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/serialize-to-js/-/serialize-to-js-3.0.2.tgz#d71834a18135aff742e516d3b2208f662a46a8ac"
-  integrity sha512-o5FqeMyxGx1wkp8p14q9QqGXh1JjXtIDYTr15N/B4ThM5ULqlpXdtOO84m950jFGvBkeRD1utW+WyNKvao2ybQ==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/serialize-to-js/-/serialize-to-js-3.1.1.tgz#b3e77d0568ee4a60bfe66287f991e104d3a1a4ac"
+  integrity sha512-F+NGU0UHMBO4Q965tjw7rvieNVjlH6Lqi2emq/Lc9LUURYJbiCzmpi4Cy1OOjjVPtxu0c+NE85LU6968Wko5ZA==
 
 serve-favicon@^2.5.0:
   version "2.5.0"
@@ -28174,17 +29114,7 @@ serve-index@^1.7.2, serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.13.2:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
-  integrity sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.2"
-
-serve-static@1.14.1, serve-static@^1.12.4, serve-static@^1.13.1:
+serve-static@1.14.1, serve-static@^1.12.4, serve-static@^1.14.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==
@@ -28269,42 +29199,15 @@ shallow-copy@~0.0.1:
   integrity sha1-QV9CcC1z2BAzApLMXuhurhoRoXA=
 
 shallow-equal@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
-  integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
 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==
 
-sharp-cli@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/sharp-cli/-/sharp-cli-1.10.0.tgz#d201c85303ee66be286051157c2161053860aeb3"
-  integrity sha512-Sh3nXZGzGBNwnl++qSvtdlGaP0DRcEmGoD72xac7wJGmdMA2Afab/TMnBghNtxf10ym5ydTvW6Q6WrK7GEalxQ==
-  dependencies:
-    bubble-stream-error "1.0.x"
-    multiyargs "1.0.x"
-    sharp "0.22.1"
-    url-template "2.0.x"
-    yargs "12.0.x"
-
-sharp@0.22.1:
-  version "0.22.1"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.22.1.tgz#a67c0e75567f03dd5a7861b901fec04072c5b0f4"
-  integrity sha512-lXzSk/FL5b/MpWrT1pQZneKe25stVjEbl6uhhJcTULm7PhmJgKKRbTDM/vtjyUuC/RLqL2PRyC4rpKwbv3soEw==
-  dependencies:
-    color "^3.1.1"
-    detect-libc "^1.0.3"
-    fs-copy-file-sync "^1.1.1"
-    nan "^2.13.2"
-    npmlog "^4.1.2"
-    prebuild-install "^5.3.0"
-    semver "^6.0.0"
-    simple-get "^3.0.3"
-    tar "^4.4.8"
-    tunnel-agent "^0.6.0"
-
 shasum-object@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shasum-object/-/shasum-object-1.0.0.tgz#0b7b74ff5b66ecf9035475522fa05090ac47e29e"
@@ -28344,45 +29247,30 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
-  integrity sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=
-  dependencies:
-    array-filter "~0.0.0"
-    array-map "~0.0.0"
-    array-reduce "~0.0.0"
-    jsonify "~0.0.0"
-
 shell-quote@1.7.2, shell-quote@^1.6.1:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
-shelljs@^0.8.1, shelljs@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
-  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+shelljs@0.3.x:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.3.0.tgz#3596e6307a781544f591f37da618360f31db57b1"
+  integrity sha1-NZbmMHp4FUT1kfN9phg2DzHbV7E=
+
+shelljs@^0.8.1, shelljs@^0.8.3, shelljs@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
+  integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shellsubstitute@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shellsubstitute/-/shellsubstitute-1.2.0.tgz#e4f702a50c518b0f6fe98451890d705af29b6b70"
-  integrity sha1-5PcCpQxRiw9v6YRRiQ1wWvKba3A=
-
 shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-shorthash@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/shorthash/-/shorthash-0.0.2.tgz#59b268eecbde59038b30da202bcfbddeb2c4a4eb"
-  integrity sha1-WbJo7sveWQOLMNogK8+93rLEpOs=
-
 shx@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/shx/-/shx-0.3.2.tgz#40501ce14eb5e0cbcac7ddbd4b325563aad8c123"
@@ -28392,10 +29280,18 @@ shx@^0.3.2:
     minimist "^1.2.0"
     shelljs "^0.8.1"
 
+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 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"
-  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
 silent-error@^1.0.0, silent-error@^1.0.1, silent-error@^1.1.0, silent-error@^1.1.1:
   version "1.1.1"
@@ -28414,41 +29310,10 @@ simple-dom@1.3.0:
   resolved "https://registry.yarnpkg.com/simple-dom/-/simple-dom-1.3.0.tgz#8473e0d34e340544b061410dba3faf4f1b7aa282"
   integrity sha512-RVjr6e80FFGDqDJZeQd4EMwoDLatn4Jy2SfuXecrP1IgG4ZAqkGSokE8LNV5i0kzWR2IM0e257xGN9JS8lxm0Q==
 
-simple-get@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
-  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
-  dependencies:
-    decompress-response "^4.2.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-html-tokenizer@^0.5.7:
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.5.8.tgz#3417382f75954ee34515cc4fd32d9918e693f173"
-  integrity sha512-0Sq4FvLlQEQODVA6PH2MIrc7tzYO0KT2HzzwvaVLYClWgIsuvaNUOrhrAvTi1pZHrcq7GDB4WiI3ukjqBMxcGQ==
-
-"simple-markdown@git://github.com/CharlesMangwa/simple-markdown.git":
-  version "0.1.1"
-  resolved "git://github.com/CharlesMangwa/simple-markdown.git#33d963c760b8196bee01b1a5ba9974bc7f669af1"
-
-simple-plist@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-0.2.1.tgz#71766db352326928cf3a807242ba762322636723"
-  integrity sha1-cXZts1IyaSjPOoByQrp2IyJjZyM=
-  dependencies:
-    bplist-creator "0.0.7"
-    bplist-parser "0.1.1"
-    plist "2.0.1"
-
-simple-plist@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-1.1.0.tgz#8354ab63eb3922a054c78ce96c209c532e907a23"
-  integrity sha512-2i5Tc0BYAqppM7jVzmNrI+aEUntPolIq4fDgji6WuNNn1D/qYdn2KwoLhZdzQkE04lu9L5tUoeJsjuJAvd+lFg==
-  dependencies:
-    bplist-creator "0.0.8"
-    bplist-parser "0.2.0"
-    plist "^3.0.1"
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.5.9.tgz#1a83fe97f5a3e39b335fddf71cfe9b0263b581c2"
+  integrity sha512-w/3FEDN94r4JQ9WoYrIr8RqDIPZdyNkdpbK9glFady1CAEyD97XWCv8HFetQO21w81e7h7Nh59iYTyG1mUJftg==
 
 simple-sha1@^2.1.0:
   version "2.1.2"
@@ -28464,37 +29329,17 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-simplebar-react@^1.0.0-alpha.6:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882"
-  integrity sha512-1EOWJzFC7eqHUp1igD1/tb8GBv5aPQA5ZMvpeDnVkpNJ3jAuvmrL2kir3HuijlxhG7njvw9ssxjjBa89E5DrJg==
-  dependencies:
-    prop-types "^15.6.1"
-    simplebar "^4.2.3"
-
-simplebar@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.3.tgz#dac40aced299c17928329eab3d5e6e795fafc10c"
-  integrity sha512-9no0pK7/1y+8/oTF3sy/+kx0PjQ3uk4cYwld5F1CJGk2gx+prRyUq8GRfvcVLq5niYWSozZdX73a2wIr1o9l/g==
-  dependencies:
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-    resize-observer-polyfill "^1.5.1"
-
-sisteransi@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"
-  integrity sha512-/ekMoM4NJ59ivGSfKapeG+FWtrmWvA1p6FBZwXrqojw90vJu8lBmrTxCMuBCydKtkaUe2zt4PlxeTKpjwMbyig==
+sisteransi@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
 skip-regex@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/skip-regex/-/skip-regex-0.3.1.tgz#17919aae2ac4ce3d61d5e77eedd88206c64aa215"
   integrity sha1-F5GarirEzj1h1ed+7diCBsZKohU=
 
-slash@1.0.0, slash@^1.0.0:
+slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
   integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
@@ -28523,33 +29368,34 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 sliced@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
   integrity sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E=
 
-slide@^1.1.5, slide@^1.1.6:
+slide@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
   integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
 
-slugid@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/slugid/-/slugid-1.1.0.tgz#e09f00899c09f5a7058edc36dd49f046fd50a82a"
-  integrity sha1-4J8AiZwJ9acFjtw23UnwRv1QqCo=
-  dependencies:
-    uuid "^2.0.1"
-
-slugify@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.1.tgz#f572127e8535329fbc6c1edb74ab856b61ad7de2"
-  integrity sha512-6BwyhjF5tG5P8s+0DPNyJmBSBePG6iMyhjvIW5zGdA3tFik9PtK+yNkZgTeiroCRGZYgkHftFA62tGVK1EI9Kw==
-
-slugify@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.6.tgz#ba5fd6159b570fe4811d02ea9b1f4906677638c3"
-  integrity sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ==
-
 smart-buffer@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.1.0.tgz#91605c25d91652f4661ea69ccf45f1b331ca21ba"
@@ -28593,9 +29439,9 @@ sntp@0.2.x:
     hoek "0.9.x"
 
 socket.io-adapter@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
-  integrity sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz#ab3f0d6f66b8fc7fca3959ab5991f82221789be9"
+  integrity sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g==
 
 socket.io-client@2.3.0:
   version "2.3.0"
@@ -28627,9 +29473,9 @@ socket.io-parser@~3.3.0:
     isarray "2.0.1"
 
 socket.io-parser@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.4.0.tgz#370bb4a151df2f77ce3345ff55a7072cc6e9565a"
-  integrity sha512-/G/VOI+3DBp0+DJKW4KesGnQkQPFmUCbA/oO2QGT6CWxU7hLGWqU3tyuzeSK/dqcyeHsQg1vTe9jiZI8GU9SCQ==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.4.1.tgz#b06af838302975837eab2dc980037da24054d64a"
+  integrity sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A==
   dependencies:
     component-emitter "1.2.1"
     debug "~4.1.0"
@@ -28679,6 +29525,15 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
+sockjs@0.3.20:
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.20.tgz#b26a283ec562ef8b2687b44033a4eeceac75d855"
+  integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^3.4.0"
+    websocket-driver "0.6.5"
+
 socks-proxy-agent@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz#3c8991f3145b2799e70e11bd5fbc8b1963116386"
@@ -28696,10 +29551,11 @@ socks@~2.3.2:
     smart-buffer "^4.1.0"
 
 sonic-boom@^0.7.5:
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-0.7.6.tgz#c42df6df884a6a3d54fa7a45b11e4e2196818d45"
-  integrity sha512-k9E2QQ4zxuVRLDW+ZW6ISzJs3wlEorVdmM7ApDgor7wsGKSDG5YGHsGmgLY4XYh4DMlr/2ap2BWAE7yTFJtWnQ==
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-0.7.7.tgz#d921de887428208bfa07b0ae32c278de043f350a"
+  integrity sha512-Ei5YOo5J64GKClHIL/5evJPgASXFVpfVYbJV9PILZQytTK6/LCwHvsZJW2Ig4p9FMC2OrBrMnXKgRN/OEoAWfg==
   dependencies:
+    atomic-sleep "^1.0.0"
     flatstr "^1.0.12"
 
 sort-keys@^1.0.0:
@@ -28716,19 +29572,22 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sort-object-keys@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-object-keys/-/sort-object-keys-1.1.2.tgz#d3a6c48dc2ac97e6bc94367696e03f6d09d37952"
-  integrity sha1-06bEjcKsl+a8lDZ2luA/bQnTeVI=
+sort-object-keys@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/sort-object-keys/-/sort-object-keys-1.1.3.tgz#bff833fe85cab147b34742e45863453c1e190b45"
+  integrity sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==
 
-sort-package-json@^1.21.0, sort-package-json@^1.22.1:
-  version "1.24.0"
-  resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.24.0.tgz#837d16b5ee2ddc5567e668c15854bbc8dd9780ca"
-  integrity sha512-yb3ay8kIP+XHDbJ6GT8zENBIZ4PQgf8sCO06gnasosZWm4Hy59q97MAgGvUzimqhQLcbRuAp2zjImqSeM+VUCQ==
+sort-package-json@^1.22.1, sort-package-json@^1.39.1, sort-package-json@^1.42.1:
+  version "1.42.3"
+  resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.42.3.tgz#cbd04f9432418d5a0d601ac67744ca82f8c83338"
+  integrity sha512-K00EtaQEJ58/I/jSzX5zkY9WD5hD8+iJhN/aO+zANGirMsX+MC/q7cLZoox7c6pE8QXbz+SozNK3w/ZoIvktRg==
   dependencies:
     detect-indent "^6.0.0"
-    glob "^7.1.6"
-    sort-object-keys "^1.1.2"
+    detect-newline "3.1.0"
+    git-hooks-list "1.0.3"
+    globby "10.0.0"
+    is-plain-obj "2.1.0"
+    sort-object-keys "^1.1.3"
 
 sort-routes@^1.0.0:
   version "1.0.0"
@@ -28743,11 +29602,6 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-list-map@~0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
-  integrity sha1-xVCyq1Qn9rPyH1r+rYjE9Vh7IQY=
-
 source-map-loader@0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
@@ -28757,43 +29611,27 @@ source-map-loader@0.2.4:
     loader-utils "^1.1.0"
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
-  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
   dependencies:
-    atob "^2.1.1"
+    atob "^2.1.2"
     decode-uri-component "^0.2.0"
     resolve-url "^0.2.1"
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@0.4.18, source-map-support@^0.4.15, source-map-support@~0.4.0:
+source-map-support@^0.4.15, source-map-support@~0.4.0:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
   integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@0.5.13:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-support@0.5.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
-  integrity sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-support@^0.5.16, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
-  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -28808,14 +29646,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@0.1.x, source-map@~0.1.30, source-map@~0.1.x:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@0.4.x, source-map@^0.4.2, source-map@~0.4.1:
+source-map@0.4.x, source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
@@ -28832,15 +29663,22 @@ source-map@0.7.3, source-map@^0.7.2, source-map@^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.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, 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.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=
 
-sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9"
-  integrity sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==
+source-map@~0.1.30, source-map@~0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
+  dependencies:
+    amdefine ">=0.0.4"
+
+sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 sourcemap-validator@^1.1.0:
   version "1.1.1"
@@ -28853,9 +29691,9 @@ sourcemap-validator@^1.1.0:
     source-map "~0.1.x"
 
 space-separated-tokens@^1.0.0, space-separated-tokens@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz#27910835ae00d0adfcdbd0ad7e611fb9544351fa"
-  integrity sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA==
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
 spawn-args@^0.2.0:
   version "0.2.0"
@@ -28868,22 +29706,22 @@ spawn-command@^0.0.2-1:
   integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
 
 spdx-correct@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
-  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
-  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
 
 spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
-  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
@@ -28905,10 +29743,10 @@ spdy-transport@^3.0.0:
     readable-stream "^3.0.6"
     wbuf "^1.7.3"
 
-spdy@^4.0.0, spdy@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
-  integrity sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==
+spdy@^4.0.0, spdy@^4.0.1, spdy@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
   dependencies:
     debug "^4.1.0"
     handle-thing "^2.0.0"
@@ -28940,20 +29778,13 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-split2@^2.0.0, split2@^2.2.0:
+split2@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
   integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
   dependencies:
     through2 "^2.0.2"
 
-split@0.2.x:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/split/-/split-0.2.10.tgz#67097c601d697ce1368f418f06cd201cf0521a57"
-  integrity sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc=
-  dependencies:
-    through "2"
-
 split@0.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
@@ -28961,7 +29792,7 @@ split@0.3:
   dependencies:
     through "2"
 
-split@1.0.1, split@^1.0.0:
+split@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
   integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
@@ -29005,7 +29836,7 @@ ssri@^6.0.0, ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
-ssri@^7.0.0:
+ssri@^7.0.0, ssri@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.1.0.tgz#92c241bf6de82365b5c7fb4bd76e975522e1294d"
   integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==
@@ -29013,37 +29844,34 @@ ssri@^7.0.0:
     figgy-pudding "^3.5.1"
     minipass "^3.1.1"
 
+ssri@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
+  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@^0.1.5, stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
-stack-trace@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
-  integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
-
 stack-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
-stackframe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.0.tgz#e3fc2eb912259479c9822f7d1f1ff365bd5cbc83"
-  integrity sha512-Vx6W1Yvy+AM1R/ckVwcHQHV147pTPBKWCRLrXMuPrFVfvBUc3os7PR1QLIWCMhPpRg5eX9ojzbQIMLGBwyLjqg==
-
-stacktrace-parser@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.4.tgz#01397922e5f62ecf30845522c95c4fe1d25e7d4e"
-  integrity sha1-ATl5IuX2Ls8whFUiyVxP4dJefU4=
-
-stacktrace-parser@^0.1.3:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.7.tgz#9ed005638a5e79dcf256611da1dfb4871e6fd14d"
-  integrity sha512-Evm+NuZ2ZTwGazsbsZC+EV1EGsvyxgIvtNwbyFfeXaq/8L78M5Kdh0qpmQaTkUpbOAKbbPP7c7qZa7u8XFsrUA==
+stack-utils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.2.tgz#5cf48b4557becb4638d0bc4f21d23f5d19586593"
+  integrity sha512-0H7QK2ECz3fyZMzQ8rH0j2ykpfbnd20BFtfg/SqVC2+sCTtcw0aDTGB7dk+de4U4uUeuz6nOtJcrkFFLG1B0Rg==
   dependencies:
-    type-fest "^0.7.1"
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.1.tgz#ffef0a3318b1b60c3b58564989aca5660729ec71"
+  integrity sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ==
 
 stagehand@^1.0.0:
   version "1.0.0"
@@ -29053,14 +29881,14 @@ stagehand@^1.0.0:
     debug "^4.1.0"
 
 state-toggle@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.2.tgz#75e93a61944116b4959d665c8db2d243631d6ddc"
-  integrity sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
-static-eval@^2.0.0, static-eval@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.3.tgz#cb62fc79946bd4d5f623a45ad428233adace4d72"
-  integrity sha512-zsxDGucfAh8T339sSKgpFbvg15Fms2IVaJGC+jqp0bVsxhcpM+iMeAI8weNo8dmf4OblgifTBUoyk1vGVtYw2w==
+static-eval@^2.0.0, static-eval@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.5.tgz#f0782e66999c4b3651cda99d9ce59c507d188f71"
+  integrity sha512-nNbV6LbGtMBgv7e9LFkt5JV8RVlRsyJrphfAt9tOtBBW/SfnzZDf2KnS72an8e434A+9e/BmJuTxeGPvrAK7KA==
   dependencies:
     escodegen "^1.11.1"
 
@@ -29093,23 +29921,23 @@ static-module@^2.2.0:
     through2 "~2.0.3"
 
 static-module@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/static-module/-/static-module-3.0.3.tgz#cc2301ed3fe353e2d2a2195137013853676f9960"
-  integrity sha512-RDaMYaI5o/ym0GkCqL/PlD1Pn216omp8fY81okxZ6f6JQxWW5tptOw9reXoZX85yt/scYvbWIt6uoszeyf+/MQ==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/static-module/-/static-module-3.0.4.tgz#bfbd1d1c38dd1fbbf0bb4af0c1b3ae18a93a2b68"
+  integrity sha512-gb0v0rrgpBkifXCa3yZXxqVmXDVE+ETXj6YlC/jt5VzOnGXR2C15+++eXuMDUYsePnbhf+lwW0pE1UXyOLtGCw==
   dependencies:
     acorn-node "^1.3.0"
     concat-stream "~1.6.0"
     convert-source-map "^1.5.1"
     duplexer2 "~0.1.4"
-    escodegen "~1.9.0"
+    escodegen "^1.11.1"
     has "^1.0.1"
-    magic-string "^0.22.4"
+    magic-string "0.25.1"
     merge-source-map "1.0.4"
-    object-inspect "~1.4.0"
+    object-inspect "^1.6.0"
     readable-stream "~2.3.3"
     scope-analyzer "^2.0.1"
     shallow-copy "~0.0.1"
-    static-eval "^2.0.2"
+    static-eval "^2.0.5"
     through2 "~2.0.3"
 
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
@@ -29129,88 +29957,15 @@ stdout-stream@^1.4.0:
   dependencies:
     readable-stream "^2.0.1"
 
-stealthy-require@^1.1.0, stealthy-require@^1.1.1:
+stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
 store2@^2.7.1:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
-  integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==
-
-storybook-chromatic@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0"
-  integrity sha512-n79eX0MQEHzDCnXqgOjvDOQ1xfBOTyQHy1RNxEMQvZolfAle8YVS0NnRpcW0xh/Ye621Iote3dwFI3uQmlcqPw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    "@chromaui/localtunnel" "1.10.1"
-    async-retry "^1.1.4"
-    commander "^2.9.0"
-    debug "^3.0.1"
-    denodeify "^1.2.1"
-    env-ci "^2.1.0"
-    fake-tag "^1.0.0"
-    jsdom "^11.5.1"
-    jsonfile "^4.0.0"
-    minimatch "^3.0.4"
-    node-ask "^1.0.1"
-    node-fetch "^2.6.0"
-    node-loggly-bulk "^2.2.4"
-    param-case "^2.1.1"
-    pino "4.10.2"
-    progress "^2.0.3"
-    progress-stream "^2.0.0"
-    semver "^6.2.0"
-    strip-color "^0.1.0"
-    tmp "^0.1.0"
-    tree-kill "^1.1.0"
-    uuid "^3.3.2"
-
-storybook-chromatic@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-3.1.0.tgz#f013bbb9052c8b6458b623ef7b2c28f091c54f2e"
-  integrity sha512-UWawMIrZ753veUxTlRmIC1C680XOgpx+hxVD5PJjSO3HwosWMPkg4iNOMUI4betLqbuZZbGwGJzbecImby94aA==
-  dependencies:
-    "@babel/preset-react" "^7.0.0"
-    "@babel/runtime" "^7.6.2"
-    "@chromaui/localtunnel" "2.0.1"
-    async-retry "^1.1.4"
-    babel-plugin-require-context-hook "^1.0.0"
-    cross-spawn "^7.0.1"
-    debug "^4.1.1"
-    denodeify "^1.2.1"
-    dotenv "^8.1.0"
-    enhanced-resolve "^4.1.0"
-    env-ci "^4.1.3"
-    esm "^3.2.25"
-    fake-tag "^1.0.0"
-    fs-extra "^8.1.0"
-    is-url "^1.2.4"
-    jest "^24.9.0"
-    jsdom "^15.1.1"
-    jsonfile "^5.0.0"
-    meow "^5.0.0"
-    minimatch "^3.0.4"
-    node-ask "^1.0.1"
-    node-fetch "^2.6.0"
-    node-loggly-bulk "^2.2.4"
-    npmlog "^4.1.2"
-    param-case "^2.1.1"
-    pino "5.13.4"
-    pkg-up "^3.1.0"
-    progress "^2.0.3"
-    progress-stream "^2.0.0"
-    rotating-file-stream "^1.4.4"
-    semver "^6.2.0"
-    strip-color "^0.1.0"
-    tmp "^0.1.0"
-    tree-kill "^1.1.0"
-    ts-dedent "^1.1.0"
-    util-deprecate "^1.0.2"
-    uuid "^3.3.3"
-    yarn-or-npm "^3.0.1"
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.2.tgz#a298e5e97b21b3ce7419b732540bc7c79cb007db"
+  integrity sha512-TQMKs+C6n9idtzLpxluikmDCYiDJrTbbIGn9LFxMg0BVTu+8JZKSlXTWYRpOFKlfKD5HlDWLVpJJyNGZ2e9l1A==
 
 stream-browserify@^2.0.0, stream-browserify@^2.0.1:
   version "2.0.2"
@@ -29220,11 +29975,6 @@ stream-browserify@^2.0.0, stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-buffers@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
-  integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
-
 stream-combiner2@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
@@ -29248,6 +29998,13 @@ stream-each@^1.1.0:
     end-of-stream "^1.1.0"
     stream-shift "^1.0.0"
 
+stream-events@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.5.tgz#bbc898ec4df33a4902d892333d47da9bf1c406d5"
+  integrity sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==
+  dependencies:
+    stubs "^3.0.0"
+
 stream-http@^2.7.2:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
@@ -29260,26 +30017,19 @@ stream-http@^2.7.2:
     xtend "^4.0.0"
 
 stream-http@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.1.0.tgz#22fb33fe9b4056b4eccf58bd8f400c4b993ffe57"
-  integrity sha512-cuB6RgO7BqC4FBYzmnvhob5Do3wIdIsXAgGycHJnW+981gHqoYcYz9lqjJrk8WXRddbwPuqPYRl+bag6mYv4lw==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.1.1.tgz#0370a8017cf8d050b9a8554afe608f043eaff564"
+  integrity sha512-S7OqaYu0EkFpgeGFb/NPOoPLxFko7TPqtEeFg5DXPB4v/KETHG0Ln6fRFrNezoelpaDKmycEmmZ81cC9DAwgYg==
   dependencies:
     builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^3.0.6"
-    xtend "^4.0.0"
-
-stream-parser@~0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/stream-parser/-/stream-parser-0.3.1.tgz#1618548694420021a1182ff0af1911c129761773"
-  integrity sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=
-  dependencies:
-    debug "2"
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    xtend "^4.0.2"
 
 stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
 stream-splicer@^2.0.0:
   version "2.0.1"
@@ -29296,11 +30046,6 @@ stream-to-array@^2.3.0:
   dependencies:
     any-promise "^1.1.0"
 
-stream-to-observable@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
-  integrity sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=
-
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -29311,7 +30056,7 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
-string-argv@^0.3.0:
+string-argv@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
@@ -29332,6 +30077,14 @@ string-length@^3.1.0:
     astral-regex "^1.0.0"
     strip-ansi "^5.2.0"
 
+string-length@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
+  integrity sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
 string-similarity@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-1.2.2.tgz#99b2c20a3c9bbb3903964eae1d89856db3d8db9b"
@@ -29348,7 +30101,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
-string-width@^1.0.1, string-width@^1.0.2:
+string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
   integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
@@ -29374,7 +30127,7 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.0.0, string-width@^4.1.0:
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
   integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
@@ -29383,59 +30136,76 @@ string-width@^4.0.0, string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-"string.prototype.matchall@^4.0.0 || ^3.0.1":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.0.tgz#47191e37b67dca43131706bc9c4550df31b2c471"
-  integrity sha512-/cSuf1qsUaPicdvXcVZJ98fM9FmvkXvw7PKSM5pTtlj4R9VLQc7B51fOZBMsGfv9UXhUhdpxSrEsGe2ObsR2cw==
+"string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
+  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    regexp.prototype.flags "^1.2.0"
+    es-abstract "^1.17.0"
+    has-symbols "^1.0.1"
+    internal-slot "^1.0.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
 
 string.prototype.padend@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
-  integrity sha1-86rvfBcZ8XDF6rHDK/eA2W4h8vA=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
+  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.4.3"
-    function-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 string.prototype.padstart@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padstart/-/string.prototype.padstart-3.0.0.tgz#5bcfad39f4649bb2d031292e19bcf0b510d4b242"
-  integrity sha1-W8+tOfRkm7LQMSkuGbzwtRDUskI=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padstart/-/string.prototype.padstart-3.1.0.tgz#b47c087540d0710be5a49375751a0a627bd4ff90"
+  integrity sha512-envqZvUp2JItI+OeQ5UAh1ihbAV5G/2bixTojvlIa090GGqF+NQRxbWb2nv9fTGrZABv6+pE6jXoAZhhS2k4Hw==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.4.3"
-    function-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
-string.prototype.trim@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz#75a729b10cfc1be439543dae442129459ce61e3d"
-  integrity sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==
+string.prototype.trim@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz#141233dff32c82bfad80684d7e5f0869ee0fb782"
+  integrity sha512-MjGFEeqixw47dAMFMtgUro/I0+wNqZB5GKXGt1fFr24u3TzDXCPu7J9Buppzoe3r/LqkSDLDDJzE15RGWDGAVw==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.13.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
 
-string.prototype.trimleft@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
-  integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
+string.prototype.trimend@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimleft@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
+  integrity sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    string.prototype.trimstart "^1.0.0"
+
+string.prototype.trimright@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz#c76f1cef30f21bbad8afeb8db1511496cfb0f2a3"
+  integrity sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==
   dependencies:
     define-properties "^1.1.3"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.5"
+    string.prototype.trimend "^1.0.0"
 
-string.prototype.trimright@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
-  integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==
+string.prototype.trimstart@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
   dependencies:
     define-properties "^1.1.3"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.5"
 
 string_decoder@0.10, string_decoder@~0.10.x:
   version "0.10.31"
@@ -29456,10 +30226,10 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-stringify-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-2.0.0.tgz#fa7ca6614b355fb6c28448140a20c4ede7462827"
-  integrity sha512-fqqhZzXyAM6pGD9lky/GOPq6V4X0SeTAFBl0iXb/BzOegl40gpf/bV3QQP7zULNYvjr6+Dx8SCaDULjVoOru0A==
+stringify-entities@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.1.tgz#32154b91286ab0869ab2c07696223bd23b6dbfc0"
+  integrity sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==
   dependencies:
     character-entities-html4 "^1.0.0"
     character-entities-legacy "^1.0.0"
@@ -29467,7 +30237,7 @@ stringify-entities@^2.0.0:
     is-decimal "^1.0.2"
     is-hexadecimal "^1.0.0"
 
-stringify-object@^3.2.2, stringify-object@^3.3.0:
+stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
@@ -29493,6 +30263,13 @@ strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@6.0.0, strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -29507,13 +30284,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -29526,6 +30296,11 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
 strip-color@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b"
@@ -29561,15 +30336,27 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-json-comments@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+  integrity sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=
+
+strip-json-comments@2.0.1, strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
 strip-json-comments@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
-  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
+  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
 
 strong-log-transformer@^2.0.0:
   version "2.1.0"
@@ -29580,7 +30367,12 @@ strong-log-transformer@^2.0.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
-style-loader@0.23.1, style-loader@^0.23.1:
+stubs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
+  integrity sha1-6NK6H6nJBXAwPAMLaQD31fiavls=
+
+style-loader@0.23.1, style-loader@^0.23.0:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
   integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
@@ -29588,21 +30380,59 @@ style-loader@0.23.1, style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-style-loader@1.0.0, style-loader@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
-  integrity sha512-B0dOCFwv7/eY31a5PCieNwMgMhVGFe9w+rh7s/Bx8kfFkrth9zfTZquoYvdw8URgiqxObQKcpW51Ugz1HjfdZw==
+style-loader@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200"
+  integrity sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==
   dependencies:
     loader-utils "^1.2.3"
-    schema-utils "^2.0.1"
+    schema-utils "^2.6.4"
+
+style-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+
+style-to-object@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
 
-style-to-object@0.2.3, style-to-object@^0.2.1:
+style-to-object@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
   integrity sha512-1d/k4EY2N7jVLOqf2j04dTc37TPOv/hHxZmvpg8Pdh8UYydxeu/C1W1U4vD8alzf5V2Gt7rLsmkr4dxAlDm9ng==
   dependencies:
     inline-style-parser "0.1.1"
 
+style-unit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/style-unit/-/style-unit-2.0.1.tgz#c93c6a005b46671badf95df654450290d50eebdd"
+  integrity sha512-1OHU+0lWHrK22W3DDfLKFl5cOIwTxghbVRgtzgue+/9m5dqsYQhVBObQupMdtN6FIhpM375l18h8nLqPKgHfPQ==
+  dependencies:
+    universal-env "^2.0.0"
+
+styled-components@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"
+  integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled_string@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/styled_string/-/styled_string-0.0.1.tgz#d22782bd81295459bc4f1df18c4bad8e94dd124a"
@@ -29617,15 +30447,25 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylesheet-loader@^0.6.5:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/stylesheet-loader/-/stylesheet-loader-0.6.8.tgz#4542c71e3594ff6dc0ce3e92c5d96059eb58fc1a"
-  integrity sha512-LZpo/SPDOP3XdqHHrtGtQ2+d1Mu6anoBemyoyOvELcCJWcHpp4AbzqCzb7rVl99VQ1rtT5TZTw0AXoyfgrGzpw==
+stylesheet-loader@^0.6.5, stylesheet-loader@^0.6.8:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/stylesheet-loader/-/stylesheet-loader-0.6.10.tgz#3350201762f04ab88756c519c41565499ff2b0dc"
+  integrity sha512-3WrTFIRnIBiDcTVuaZybNVz/W9cZ0ivqehky5RquRhXxNPEVKVbz/O4S8Z6rR+jTgG+AQE6IfLpXuwgbjzn1eA==
   dependencies:
     camelcase "^3.0.0"
     chalk "^1.1.3"
     css "^2.2.1"
-    loader-utils "^0.2.16"
+    loader-utils "^1.2.3"
+
+stylesheet-loader@^0.8.0:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/stylesheet-loader/-/stylesheet-loader-0.8.4.tgz#a66e14be6c0a8efc6aba2b7a408b7fe9aeb9f615"
+  integrity sha512-lW75rKd1bPdk+D8Lu2n6+uiF86/WHd2G5MVBsLZ+5LHUBOG3DDwRsf36uVlfq7x3Eot18mc8RKXxpCBBW8lqxQ==
+  dependencies:
+    camelcase "^3.0.0"
+    chalk "^1.1.3"
+    css "^2.2.1"
+    loader-utils "^1.2.3"
 
 stylus-loader@3.0.2:
   version "3.0.2"
@@ -29636,17 +30476,19 @@ stylus-loader@3.0.2:
     lodash.clonedeep "^4.5.0"
     when "~3.6.x"
 
-stylus@0.54.5:
-  version "0.54.5"
-  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
-  integrity sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=
+stylus@0.54.7, stylus@^0.54.7:
+  version "0.54.7"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.7.tgz#c6ce4793965ee538bcebe50f31537bfc04d88cd2"
+  integrity sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==
   dependencies:
-    css-parse "1.7.x"
-    debug "*"
-    glob "7.0.x"
-    mkdirp "0.5.x"
-    sax "0.5.x"
-    source-map "0.1.x"
+    css-parse "~2.0.0"
+    debug "~3.1.0"
+    glob "^7.1.3"
+    mkdirp "~0.5.x"
+    safer-buffer "^2.1.2"
+    sax "~1.2.4"
+    semver "^6.0.0"
+    source-map "^0.7.3"
 
 subarg@^1.0.0:
   version "1.0.0"
@@ -29655,20 +30497,6 @@ subarg@^1.0.0:
   dependencies:
     minimist "^1.1.0"
 
-subscriptions-transport-ws@0.9.8:
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.8.tgz#3a26ab96e06f78cf4ace8d083f6227fa55970947"
-  integrity sha1-OiarluBveM9Kzo0IP2In+lWXCUc=
-  dependencies:
-    backo2 "^1.0.2"
-    eventemitter3 "^2.0.3"
-    iterall "^1.2.1"
-    lodash.assign "^4.2.0"
-    lodash.isobject "^3.0.2"
-    lodash.isstring "^4.0.1"
-    symbol-observable "^1.0.4"
-    ws "^3.0.0"
-
 sum-up@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sum-up/-/sum-up-1.0.3.tgz#1c661f667057f63bcb7875aa1438bc162525156e"
@@ -29676,13 +30504,6 @@ sum-up@^1.0.1:
   dependencies:
     chalk "^1.0.0"
 
-supports-color@5.5.0, supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.4.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -29690,6 +30511,13 @@ supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@7.1.0, supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -29702,19 +30530,12 @@ supports-color@^3.2.3:
   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"
-  integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=
-  dependencies:
-    has-flag "^2.0.0"
-
-supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
-    has-flag "^4.0.0"
+    has-flag "^3.0.0"
 
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
@@ -29724,6 +30545,14 @@ supports-hyperlinks@^1.0.1:
     has-flag "^2.0.0"
     supports-color "^5.0.0"
 
+supports-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
+  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 svelte-dev-helper@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
@@ -29742,35 +30571,35 @@ svelte-loader@^2.13.4:
     loader-utils "^1.1.0"
     svelte-dev-helper "^1.1.9"
 
-svelte@^3.15.0, svelte@^3.4.1:
-  version "3.15.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.15.0.tgz#9dda8ad1d86cd74626b25f9c182f3ae86599fd79"
-  integrity sha512-OL9FIdUAmVTXR38cB/2vQQ9xWvW/7IuOASjWMfwRAB5NXywLW4Xqhblouan4odjI0S/JFGsytkgp7jelWpFgSA==
+svelte@^3.18.1:
+  version "3.22.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
+  integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==
 
-svg-parser@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
-  integrity sha512-1gtApepKFweigFZj3sGO8KT8LvVZK8io146EzXrpVuWCDAbISz/yMucco3hWTkpZNoPabM+dnMOpy6Swue68Zg==
+svg-parser@^2.0.0, svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svg-to-pdfkit@^0.1.7:
+svg-to-pdfkit@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/svg-to-pdfkit/-/svg-to-pdfkit-0.1.8.tgz#5921765922044843f0c1a5b25ec1ef8a4a33b8af"
   integrity sha512-QItiGZBy5TstGy+q8mjQTMGRlDDOARXLxH+sgVm1n/LYeo0zFcQlcCh8m4zi8QxctrxB9Kue/lStc/RD5iLadQ==
   dependencies:
     pdfkit ">=0.8.1"
 
-svg-url-loader@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/svg-url-loader/-/svg-url-loader-3.0.3.tgz#95274eae80f4a46454a5b44e9582beb2f533465e"
-  integrity sha512-MKGiRNDs8fnHcZcPkhGcw9+130IXyFM9H8m6T7u3ScUuZYEeVzX0vNMru30D4MCF6vMYas5iw/Ru9lwFKBjaGw==
+svg-url-loader@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/svg-url-loader/-/svg-url-loader-5.0.1.tgz#d94b5056feb48301b35ade6fbd0817a0785bcef8"
+  integrity sha512-U6t6p6iwtG1P7RWcA8Bevud5fMCpmxAQfjHn7vqHFl00d+Geoj1N0kP1HhTJfVUoDtyLJysEMzrSJERnn0m81w==
   dependencies:
-    file-loader "~4.3.0"
-    loader-utils "~1.2.3"
+    file-loader "~6.0.0"
+    loader-utils "~2.0.0"
 
 svgo@^1.0.0, svgo@^1.2.2, svgo@^1.3.2:
   version "1.3.2"
@@ -29791,33 +30620,28 @@ svgo@^1.0.0, svgo@^1.2.2, svgo@^1.3.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
-  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
-
-symbol-observable@1.2.0, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
+symbol-observable@1.2.0, symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-symbol-tree@^3.2.2:
+symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 symbol.prototype.description@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/symbol.prototype.description/-/symbol.prototype.description-1.0.1.tgz#e44e5db04d977932d1a261570bf65312773406d0"
-  integrity sha512-smeS1BCkN6lcz1XveFK+cfvfBmNJ6dcPi6lgOnLUU8Po8SmV+rtmYGObbNOisW9RHWMyUfsgMA+eTQg+b3v9Vg==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/symbol.prototype.description/-/symbol.prototype.description-1.0.2.tgz#f325e1e6ad534b3b29c9c3ca73c136c9ce03c5e2"
+  integrity sha512-2CW5SU4/Ki1cYOOHcL2cXK4rxSg5hCU1TwZ7X4euKhV9VnfqKslh7T6/UyKkubA8cq2tOmsOv7m3ZUmQslBRuw==
   dependencies:
-    es-abstract "^1.16.0"
-    has-symbols "^1.0.0"
+    es-abstract "^1.17.0-next.1"
+    has-symbols "^1.0.1"
 
-symlink-or-copy@^1.0.0, symlink-or-copy@^1.0.1, symlink-or-copy@^1.1.8, symlink-or-copy@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz#5d49108e2ab824a34069b68974486c290020b393"
-  integrity sha512-W31+GLiBmU/ZR02Ii0mVZICuNEN9daZ63xZMPDsYgPgNjMtg+atqLEGI7PPI936jYSQZxoLb/63xos8Adrx4Eg==
+symlink-or-copy@^1.0.0, symlink-or-copy@^1.0.1, symlink-or-copy@^1.1.8, symlink-or-copy@^1.2.0, symlink-or-copy@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/symlink-or-copy/-/symlink-or-copy-1.3.1.tgz#9506dd64d8e98fa21dcbf4018d1eab23e77f71fe"
+  integrity sha512-0K91MEXFpBUaywiwSSkmKjnGcasG/rVBXFLJz5DrgGabpYD6N+3yZrfD6uUIfpuTu65DZLHi7N8CizHc07BPZA==
 
 sync-disk-cache@^1.3.3:
   version "1.3.4"
@@ -29830,11 +30654,6 @@ sync-disk-cache@^1.3.3:
     rimraf "^2.2.8"
     username-sync "^1.0.2"
 
-synchronous-promise@^2.0.6:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.10.tgz#e64c6fd3afd25f423963353043f4a68ebd397fd8"
-  integrity sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==
-
 syntax-error@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.4.0.tgz#2d9d4ff5c064acb711594a3e3b95054ad51d907c"
@@ -29866,63 +30685,6 @@ tapable@^1.0.0, tapable@^1.1.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar-fs@^1.8.1:
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.3.tgz#966a628841da2c4010406a82167cbd5e0c72d509"
-  integrity sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==
-  dependencies:
-    chownr "^1.0.1"
-    mkdirp "^0.5.1"
-    pump "^1.0.0"
-    tar-stream "^1.1.2"
-
-tar-fs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.0.tgz#677700fc0c8b337a78bee3623fdc235f21d7afad"
-  integrity sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp "^0.5.1"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
-tar-stream@^1.1.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
-  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
-  dependencies:
-    bl "^1.0.0"
-    buffer-alloc "^1.2.0"
-    end-of-stream "^1.0.0"
-    fs-constants "^1.0.0"
-    readable-stream "^2.3.0"
-    to-buffer "^1.1.1"
-    xtend "^4.0.0"
-
-tar-stream@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.0.tgz#d1aaa3661f05b38b5acc9b7020efdca5179a2cc3"
-  integrity sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==
-  dependencies:
-    bl "^3.0.0"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
-tar@4.4.6:
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.6.tgz#63110f09c00b4e60ac8bcfe1bf3c8660235fbc9b"
-  integrity sha512-tMkTnh9EdzxyfW+6GK6fCahagXsnYk6kE6S9Gr9pjVdys769+laCTbodXDhPAjzVtEBazRgP0gYqOjnk9dQzLg==
-  dependencies:
-    chownr "^1.0.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.3.3"
-    minizlib "^1.1.0"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.2"
-
 tar@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
@@ -29932,7 +30694,7 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4, tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
   version "4.4.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
@@ -29945,20 +30707,32 @@ tar@^4, tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
-targz@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/targz/-/targz-1.0.1.tgz#8f76a523694cdedfbb5d60a4076ff6eeecc5398f"
-  integrity sha1-j3alI2lM3t+7XWCkB2/27uzFOY8=
+tar@^6.0.1, tar@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
+  integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
   dependencies:
-    tar-fs "^1.8.1"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.0"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
 
-teeny-request@^3.11.3:
-  version "3.11.3"
-  resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-3.11.3.tgz#335c629f7645e5d6599362df2f3230c4cbc23a55"
-  integrity sha512-CKncqSF7sH6p4rzCgkb/z/Pcos5efl0DmolzvlqRQUNcpRIruOhY9+T1FsIlyEbfWd7MsFpodROOwHYh2BaXzw==
+teamcity-service-messages@^0.1.11:
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/teamcity-service-messages/-/teamcity-service-messages-0.1.11.tgz#b5510677c2a85e0086de5c251ab3ab2f734425df"
+  integrity sha512-C1olucTOnOMocG1gcDquHugZC4RHrVNvjPX/ZEZfjbo9DYALqUEBGHpmgigX/KA37E2dSopA9JB6Tfj07QV4YA==
+
+teeny-request@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-6.0.1.tgz#9b1f512cef152945827ba7e34f62523a4ce2c5b0"
+  integrity sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==
   dependencies:
-    https-proxy-agent "^2.2.1"
+    http-proxy-agent "^4.0.0"
+    https-proxy-agent "^4.0.0"
     node-fetch "^2.2.0"
+    stream-events "^1.0.5"
     uuid "^3.3.2"
 
 telejson@^3.2.0:
@@ -29975,6 +30749,20 @@ telejson@^3.2.0:
     lodash "^4.17.15"
     memoizerific "^1.11.3"
 
+telejson@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-4.0.0.tgz#91ac1747f1efbc88a58e4344fbd8fe438695f77e"
+  integrity sha512-xTDEZd7bVIsbnOzTBTlUed+uKPThxMQPYtjN9OhvtsJQLJ7zEEX8bl8G72SlzfvQlTpxv1RTDq7Qfk1hMOw2zA==
+  dependencies:
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
+    is-function "^1.0.2"
+    is-regex "^1.0.5"
+    is-symbol "^1.0.3"
+    isobject "^4.0.0"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -29992,18 +30780,10 @@ temp-write@^3.4.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
-temp@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
-  integrity sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k=
-  dependencies:
-    os-tmpdir "^1.0.0"
-    rimraf "~2.2.6"
-
-temp@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.9.0.tgz#61391795a11bd9738d4c4d7f55f012cb8f55edaa"
-  integrity sha512-YfUhPQCJoNQE5N+FJQcdPz63O3x3sdT4Xju69Gj4iZe0lBKOtnAMi0SLj9xKhGkcGhsxThvTJ/usxtFPo438zQ==
+temp@0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.9.1.tgz#2d666114fafa26966cd4065996d7ceedd4dd4697"
+  integrity sha512-WMuOgiua1xb5R56lE0eH6ivpVmg/lq2OHm4+LtT/xtEtPQ+sz6N3bBM6WZ5FvO1lO4IKIOb43qnhoc4qxP5OeA==
   dependencies:
     rimraf "~2.6.2"
 
@@ -30014,15 +30794,6 @@ temp@^0.8.1:
   dependencies:
     rimraf "~2.6.2"
 
-tempy@0.3.0, tempy@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.3.0.tgz#6f6c5b295695a16130996ad5ab01a8bd726e8bf8"
-  integrity sha512-WrH/pui8YCwmeiAoxV+lpRH9HpRtgBhSR2ViBPgpGb/wnYDzp21R4MN45fsCGvLROvY67o3byhJRYRONJyImVQ==
-  dependencies:
-    temp-dir "^1.0.0"
-    type-fest "^0.3.1"
-    unique-string "^1.0.0"
-
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -30031,9 +30802,17 @@ term-size@^1.2.0:
     execa "^0.7.0"
 
 term-size@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.1.0.tgz#3aec444c07a7cf936e157c1dc224b590c3c7eef2"
-  integrity sha512-I42EWhJ+2aeNQawGx1VtpO0DFI9YcfuvAMNIdKyf/6sRbHJ4P+ZQ/zIT87tE+ln1ymAGcCJds4dolfSAS0AcNg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
+  integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
 
 terser-webpack-plugin@1.2.3:
   version "1.2.3"
@@ -30049,39 +30828,70 @@ terser-webpack-plugin@1.2.3:
     webpack-sources "^1.1.0"
     worker-farm "^1.5.2"
 
-terser-webpack-plugin@1.4.1, terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
-  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+terser-webpack-plugin@2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
+  integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==
+  dependencies:
+    cacache "^13.0.1"
+    find-cache-dir "^3.2.0"
+    jest-worker "^25.1.0"
+    p-limit "^2.2.2"
+    schema-utils "^2.6.4"
+    serialize-javascript "^2.1.2"
+    source-map "^0.6.1"
+    terser "^4.4.3"
+    webpack-sources "^1.4.3"
+
+terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
+  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^1.7.0"
+    serialize-javascript "^2.1.2"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser-webpack-plugin@^2.1.2:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.2.1.tgz#5569e6c7d8be79e5e43d6da23acc3b6ba77d22bd"
-  integrity sha512-jwdauV5Al7zopR6OAYvIIRcxXCSvLjZjr7uZE8l2tIWb/ryrGN48sJftqGf5k9z09tWhajx53ldp0XPI080YnA==
+terser-webpack-plugin@^2.1.3, terser-webpack-plugin@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.6.tgz#a4014b311a61f87c6a1b217ef4f5a75bd0665a69"
+  integrity sha512-I8IDsQwZrqjdmOicNeE8L/MhwatAap3mUrtcAKJuilsemUNcX+Hier/eAzwStVqhlCxq0aG3ni9bK/0BESXkTg==
   dependencies:
     cacache "^13.0.1"
-    find-cache-dir "^3.0.0"
-    jest-worker "^24.9.0"
-    schema-utils "^2.5.0"
-    serialize-javascript "^2.1.0"
+    find-cache-dir "^3.3.1"
+    jest-worker "^25.4.0"
+    p-limit "^2.3.0"
+    schema-utils "^2.6.6"
+    serialize-javascript "^3.0.0"
     source-map "^0.6.1"
-    terser "^4.3.9"
+    terser "^4.6.12"
     webpack-sources "^1.4.3"
 
-terser@4.3.9:
-  version "4.3.9"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.9.tgz#e4be37f80553d02645668727777687dad26bbca8"
-  integrity sha512-NFGMpHjlzmyOtPL+fDw3G7+6Ueh/sz4mkaUYa4lJCxOPTNzd0Uj0aZJOmsDYoSQyfuVoWDMSWTPU3huyOm2zdA==
+terser-webpack-plugin@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-3.0.1.tgz#31928c9330a582fb5ec6f90805337289b85cb8fe"
+  integrity sha512-eFDtq8qPUEa9hXcUzTwKXTnugIVtlqc1Z/ZVhG8LmRT3lgRY13+pQTnFLY2N7ATB6TKCHuW/IGjoAnZz9wOIqw==
+  dependencies:
+    cacache "^15.0.3"
+    find-cache-dir "^3.3.1"
+    jest-worker "^26.0.0"
+    p-limit "^2.3.0"
+    schema-utils "^2.6.6"
+    serialize-javascript "^3.0.0"
+    source-map "^0.6.1"
+    terser "^4.6.13"
+    webpack-sources "^1.4.3"
+
+terser@4.6.10:
+  version "4.6.10"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.10.tgz#90f5bd069ff456ddbc9503b18e52f9c493d3b7c2"
+  integrity sha512-qbF/3UOo11Hggsbsqm2hPa6+L4w7bkr+09FNseEe8xrcVD3APGLFqE+Oz1ZKAxjYnFsj80rLOfgAtJ0LNJjtTA==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -30096,26 +30906,15 @@ terser@^3.16.1, terser@^3.17.0, terser@^3.7.3:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
-terser@^4.1.2, terser@^4.3.9:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.0.tgz#22c46b4817cf4c9565434bfe6ad47336af259ac3"
-  integrity sha512-oDG16n2WKm27JO8h4y/w3iqBGAOSCtq7k8dRmrn4Wf9NouL0b2WpMHGChFGZq4nFAQy1FsNJrVQHfurXOSTmOA==
+terser@^4.1.2, terser@^4.3.8, terser@^4.3.9, terser@^4.4.3, terser@^4.6.12, terser@^4.6.13, terser@^4.6.3:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.7.0.tgz#15852cf1a08e3256a80428e865a2fa893ffba006"
+  integrity sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-test-exclude@^4.2.1:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
-  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
-  dependencies:
-    arrify "^1.0.1"
-    micromatch "^2.3.11"
-    object-assign "^4.1.0"
-    read-pkg-up "^1.0.1"
-    require-main-filename "^1.0.1"
-
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
@@ -30126,10 +30925,19 @@ test-exclude@^5.2.3:
     read-pkg-up "^4.0.0"
     require-main-filename "^2.0.0"
 
-testem@^2.17.0:
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/testem/-/testem-2.17.0.tgz#1cb4a2a90524a088803dfe52fbf197a6fd73c883"
-  integrity sha512-PLkIlT523w5rTJPWwR4TL1EiAEa941ECV7d4pMqsB0YdnH+sCTz0loWMKCUSdhR+VijveAZ6anE/JHehE7KqMQ==
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+testem@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/testem/-/testem-3.1.0.tgz#d27ec0b5593706c5cb005d8829b5abd329c86c16"
+  integrity sha512-wmPMqwocl9sU7kk32+fRpYFQVwL2XO6PszYF3IPIi6exw3zXb879Ulw4NQrkybdNtTS8yj9yv2lEuvYgpulbaw==
   dependencies:
     backbone "^1.1.2"
     bluebird "^3.4.6"
@@ -30190,11 +30998,25 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
-throat@^4.0.0, throat@^4.1.0:
+thread-loader@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-2.1.3.tgz#cbd2c139fc2b2de6e9d28f62286ab770c1acbdda"
+  integrity sha512-wNrVKH2Lcf8ZrWxDF/khdlLlsTMczdcwPA9VEK4c2exlEPynYWxi9op3nPTo5lAnDIkE0rQEB3VBP+4Zncc9Hg==
+  dependencies:
+    loader-runner "^2.3.1"
+    loader-utils "^1.1.0"
+    neo-async "^2.6.0"
+
+throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
 
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
+
 throttle-debounce@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
@@ -30228,7 +31050,7 @@ through2@^3.0.0, through2@^3.0.1:
   dependencies:
     readable-stream "2 || 3"
 
-through@2, through@2.3.x, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.4, through@~2.3.6:
+through@2, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -30248,7 +31070,7 @@ time-zone@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-zone/-/time-zone-1.0.0.tgz#99c5bf55958966af6d06d83bdf3800dc82faec5d"
   integrity sha1-mcW/VZWJZq9tBtg73zgA3IL67F0=
 
-timed-out@4.0.1, timed-out@^4.0.0, timed-out@^4.0.1:
+timed-out@^4.0.0, timed-out@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
@@ -30283,9 +31105,9 @@ tiny-inflate@^1.0.0, tiny-inflate@^1.0.2:
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
 tiny-json-http@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.1.2.tgz#620e189849bab08992ec23fada7b48c7c61637b4"
-  integrity sha512-XB9Bu+ohdQso6ziPFNVqK+pcTt0l8BSRkW/CCBq0pUVlLxcYDsorpo7ae5yPhu2CF1xYgJuKVLF7cfOGeLCTlA==
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.2.0.tgz#1bc51d3c4ac0fe617b2c523319ca87d58934e703"
+  integrity sha512-blMwK3w6R+9/ZCMAlrAw4/yOmym6SNaF8LNHqjVnugtDAWNK/+HxK9AgEy8ynagRniMIiWhUcVst16Qumf66QQ==
 
 tiny-lr@^1.1.1:
   version "1.1.1"
@@ -30299,16 +31121,16 @@ tiny-lr@^1.1.1:
     object-assign "^4.1.0"
     qs "^6.4.0"
 
-tiny-queue@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
-  integrity sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY=
-
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+tlds@^1.203.0:
+  version "1.207.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.207.0.tgz#459264e644cf63ddc0965fece3898913286b1afd"
+  integrity sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==
+
 tmp@0.0.28:
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
@@ -30337,6 +31159,13 @@ tmp@0.1.0, tmp@^0.1.0:
   dependencies:
     rimraf "^2.6.3"
 
+tmp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -30352,11 +31181,6 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-buffer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
-  integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
-
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
@@ -30405,9 +31229,9 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     safe-regex "^1.1.0"
 
 to-vfile@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-6.0.0.tgz#96c4aa0ee09c51dd4e8fd0b9c11da040d7dba9ea"
-  integrity sha512-i9fwXXSsHLu7mzgixc1WjgnqSe6pGpjnzCYoFmrASvEueLfyKf09QAe+XQYu8OAJ62aFqHpe2EKXojeRVvEzqA==
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-6.1.0.tgz#5f7a3f65813c2c4e34ee1f7643a5646344627699"
+  integrity sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==
   dependencies:
     is-buffer "^2.0.0"
     vfile "^4.0.0"
@@ -30427,6 +31251,11 @@ token-stream@0.0.1:
   resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a"
   integrity sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=
 
+token-stream@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
+  integrity sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=
+
 topo@2.x.x:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
@@ -30434,19 +31263,36 @@ topo@2.x.x:
   dependencies:
     hoek "4.x.x"
 
-topo@3.x.x:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-3.0.3.tgz#d5a67fb2e69307ebeeb08402ec2a2a6f5f7ad95c"
-  integrity sha512-IgpPtvD4kjrJ7CRA3ov2FhWQADwv+Tdqbsf1ZnPUSAtCJ9e1Z44MmoSGDXGk4IppoZA7jd/QRkNddlLJWlUZsQ==
+toposort@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
   dependencies:
-    hoek "6.x.x"
+    nopt "~1.0.10"
 
-toposort@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
-  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+tough-cookie@>=0.12.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.1.2"
+
+tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
 
-tough-cookie@>=0.12.0, tough-cookie@>=2.3.3, tough-cookie@^3.0.1:
+tough-cookie@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
   integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
@@ -30455,13 +31301,12 @@ tough-cookie@>=0.12.0, tough-cookie@>=2.3.3, tough-cookie@^3.0.1:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+tough-cookie@~2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
   dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
+    punycode "^1.4.1"
 
 tough-cookie@~2.4.3:
   version "2.4.3"
@@ -30478,6 +31323,13 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
 trash@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/trash/-/trash-6.1.1.tgz#8fb863421b31f32571f2650b53534934d5e63025"
@@ -30493,20 +31345,15 @@ trash@^6.1.1:
     uuid "^3.3.2"
     xdg-trashdir "^2.1.1"
 
-traverse@^0.6.6:
+traverse@0.6.6, traverse@^0.6.6:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
 
-tree-kill@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
-  integrity sha512-DlX6dR0lOIRDFxI0mjL9IYg6OTncLm/Zt+JiBhE5OlFcAR8yc9S7FFXU9so0oda47frdM/JFsk7UjNt9vscKcg==
-
-tree-kill@1.2.1, tree-kill@^1.1.0, tree-kill@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a"
-  integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==
+tree-kill@1.2.2, tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
 tree-sync@^1.2.2:
   version "1.4.0"
@@ -30531,9 +31378,9 @@ tree-sync@^2.0.0:
     walk-sync "^0.3.3"
 
 trim-lines@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.2.tgz#c8adbdbdae21bb5c2766240a661f693afe23e59b"
-  integrity sha512-3GOuyNeTqk3FAqc3jOJtw7FTjYl94XBR5aD9QnDbK/T4CA9sW/J0l9RoaRPE9wyPP7NF331qnHnvJFBJ+IDkmQ==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.3.tgz#839514be82428fd9e7ec89e35081afe8f6f93115"
+  integrity sha512-E0ZosSWYK2mkSu+KEtQ9/KqarVjA9HztOSX+9FDdNacRAq29RRV6ZQNgob3iuW8Htar9vAfEa6yyt5qBAHZDBA==
 
 trim-newlines@^1.0.0:
   version "1.0.0"
@@ -30545,6 +31392,11 @@ trim-newlines@^2.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
   integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
 
+trim-newlines@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
+  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
+
 trim-off-newlines@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
@@ -30556,9 +31408,9 @@ trim-right@^1.0.1:
   integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
 trim-trailing-lines@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz#d2f1e153161152e9f02fabc670fb40bec2ea2e3a"
-  integrity sha512-MUjYItdrqqj2zpcHFTkMa9WAv4JHTI6gnRQGPFLrt5L9a6tRMiDnIqYl8JBvu2d2Tc3lWJKQwlGCp0K8AvCM+Q==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
+  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
 
 trim@0.0.1:
   version "0.0.1"
@@ -30566,9 +31418,9 @@ trim@0.0.1:
   integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
 
 trough@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
-  integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
 "true-case-path@^1.0.2":
   version "1.0.3"
@@ -30577,10 +31429,10 @@ trough@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
-try-catch@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-2.0.1.tgz#a35d354187c422f291a0bcfd9eb77e3a4f90c1e5"
-  integrity sha512-LsOrmObN/2WdM+y2xG+t16vhYrQsnV8wftXIcIOWZhQcBJvKGYuamJGwnU98A7Jxs2oZNkJztXlphEOoA0DWqg==
+try-catch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-3.0.0.tgz#7996d8b89895e2e8ae62cbdbeb4fe17470f8131b"
+  integrity sha512-3uAqUnoemzca1ENvZ72EVimR+E8lqBbzwZ9v4CEbLjkaV3Q+FtdmPUt7jRtoSoTiYjyIMxEkf6YgUpe/voJ1ng==
 
 try-require@^1.2.1:
   version "1.2.1"
@@ -30592,22 +31444,20 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-dedent@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.0.tgz#67983940793183dc7c7f820acb66ba02cdc33c6e"
-  integrity sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==
+ts-dedent@^1.1.0, ts-dedent@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
+  integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==
 
-ts-invariant@^0.4.0:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
-  integrity sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==
-  dependencies:
-    tslib "^1.9.3"
+ts-essentials@^2.0.3:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
+  integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
 
-ts-jest@^24.0.0, ts-jest@^24.0.2:
-  version "24.2.0"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.2.0.tgz#7abca28c2b4b0a1fdd715cd667d65d047ea4e768"
-  integrity sha512-Yc+HLyldlIC9iIK8xEN7tV960Or56N49MDP7hubCZUeI7EbIOTsas6rXCMB4kQjLACJ7eDOF4xWEO5qumpKsag==
+ts-jest@^25.0.0:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-25.5.1.tgz#2913afd08f28385d54f2f4e828be4d261f4337c7"
+  integrity sha512-kHEUlZMK8fn8vkxDjwbHlxXRB9dHYpyzqKIGDNxbzs+Rz+ssNDSDNusEK8Fk/sDd4xE6iKoQLfFkFVaskmTJyw==
   dependencies:
     bs-logger "0.x"
     buffer-from "1.x"
@@ -30615,25 +31465,42 @@ ts-jest@^24.0.0, ts-jest@^24.0.2:
     json5 "2.x"
     lodash.memoize "4.x"
     make-error "1.x"
+    micromatch "4.x"
     mkdirp "0.x"
-    resolve "1.x"
-    semver "^5.5"
-    yargs-parser "10.x"
+    semver "6.x"
+    yargs-parser "18.x"
 
-ts-jest@~23.1.3:
-  version "23.1.4"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-23.1.4.tgz#66ac1d8d3fbf8f9a98432b11aa377aa850664b2b"
-  integrity sha512-9rCSxbWfoZxxeXnSoEIzRNr9hDIQ8iEJAWmSRsWhDHDT8OeuGfURhJQUE8jtJlkyEygs6rngH8RYtHz9cfjmEA==
+ts-jest@^26.1.0:
+  version "26.1.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.1.0.tgz#e9070fc97b3ea5557a48b67c631c74eb35e15417"
+  integrity sha512-JbhQdyDMYN5nfKXaAwCIyaWLGwevcT2/dbqRPsQeh6NZPUuXjZQZEfeLb75tz0ubCIgEELNm6xAzTe5NXs5Y4Q==
   dependencies:
-    closest-file-data "^0.1.4"
-    fs-extra "6.0.1"
-    json5 "^0.5.0"
-    lodash "^4.17.10"
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    micromatch "4.x"
+    mkdirp "1.x"
+    semver "7.x"
+    yargs-parser "18.x"
 
-ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
-  integrity sha512-Dd9FekWuABGgjE1g0TlQJ+4dFUfYGbYcs52/HQObE0ZmUNjQlmLAS7xXsSzy23AMaMwipsx5sNHvoEpT2CZq1g==
+ts-loader@^5.3.3:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.4.5.tgz#a0c1f034b017a9344cef0961bfd97cc192492b8b"
+  integrity sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^3.1.4"
+    semver "^5.0.1"
+
+ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0, ts-loader@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.2.tgz#dffa3879b01a1a1e0a4b85e2b8421dc0dfff1c58"
+  integrity sha512-HDo5kXZCBml3EUPcc7RlZOV/JGlLHwppTLEHb3SHnr5V7NXD4klMEkrhJe5wgRbaWsSXi+Y1SIBN/K9B6zWGWQ==
   dependencies:
     chalk "^2.3.0"
     enhanced-resolve "^4.0.0"
@@ -30646,31 +31513,42 @@ ts-map@^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.5.2:
-  version "8.5.2"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.5.2.tgz#434f6c893bafe501a30b32ac94ee36809ba2adce"
-  integrity sha512-W1DK/a6BGoV/D4x/SXXm6TSQx6q3blECUzd5TN+j56YEMX3yPVMpHsICLedUw3DvGF3aTQ8hfdR9AKMaHjIi+A==
+ts-node@^8.9.1:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.10.1.tgz#77da0366ff8afbe733596361d2df9a60fc9c9bd3"
+  integrity sha512-bdNz1L4ekHiJul6SHtZWs1ujEKERJnHs4HxN7rjTyyVOFf3HaJ6sLqe6aPG62XTzAB/63pKRh5jTSWL0D7bsvw==
   dependencies:
     arg "^4.1.0"
     diff "^4.0.1"
     make-error "^1.1.1"
-    source-map-support "^0.5.6"
-    yn "^3.0.0"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
+ts-node@~8.9.1:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.9.1.tgz#2f857f46c47e91dcd28a14e052482eb14cfd65a5"
+  integrity sha512-yrq6ODsxEFTLz0R3BX2myf0WBCSQh9A+py8PBo1dCzWIOcvisbyH6akNKqDHMgXePF2kir5mm5JXJTH3OUJYOQ==
+  dependencies:
+    arg "^4.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
 
 ts-pnp@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
   integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA==
 
-ts-pnp@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
-  integrity sha512-1J/vefLC+BWSo+qe8OnJQfWTYRS6ingxjwqmHMqaMxXMj7kFtKLgAaYW3JeX3mktjgUL+etlU8/B4VUAUI9QGw==
+ts-pnp@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
+  integrity sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==
 
-ts-pnp@^1.0.0, ts-pnp@^1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
-  integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA==
+ts-pnp@^1.0.0, ts-pnp@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
+  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
 ts-simple-ast@12.4.0:
   version "12.4.0"
@@ -30688,6 +31566,11 @@ ts-simple-ast@12.4.0:
     tslib "^1.9.0"
     typescript "2.9.1"
 
+ts-simple-type@~0.3.6:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/ts-simple-type/-/ts-simple-type-0.3.7.tgz#1e77222c3d90d7093f80a954e74c725fd99c911c"
+  integrity sha512-bDXWURwpDpe1mA5E9eldmI0Mpt9zGprhtN/ZTLOJjsAMyeMy1UT7WvGRQghYewIYBYxDZurChhe4DrsPbcCVrA==
+
 tsconfig-paths-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.2.0.tgz#6e70bd42915ad0efb64d3385163f0c1270f3e04d"
@@ -30707,51 +31590,17 @@ tsconfig-paths@^3.4.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@1.10.0, tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-tslib@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
-  integrity sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==
-
-tslint-config-airbnb@^5.11.1:
-  version "5.11.2"
-  resolved "https://registry.yarnpkg.com/tslint-config-airbnb/-/tslint-config-airbnb-5.11.2.tgz#2f3d239fa3923be8e7a4372217a7ed552671528f"
-  integrity sha512-mUpHPTeeCFx8XARGG/kzYP4dPSOgoCqNiYbGHh09qTH8q+Y1ghsOgaeZKYYQT7IyxMos523z/QBaiv2zKNBcow==
-  dependencies:
-    tslint-consistent-codestyle "^1.14.1"
-    tslint-eslint-rules "^5.4.0"
-    tslint-microsoft-contrib "~5.2.1"
-
-tslint-consistent-codestyle@^1.14.1:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.16.0.tgz#52348ea899a7e025b37cc6545751c6a566a19077"
-  integrity sha512-ebR/xHyMEuU36hGNOgCfjGBNYxBPixf0yU1Yoo6s3BrpBRFccjPOmIVaVvQsWAUAMdmfzHOCihVkcaMfimqvHw==
-  dependencies:
-    "@fimbul/bifrost" "^0.21.0"
-    tslib "^1.7.1"
-    tsutils "^2.29.0"
-
-tslint-eslint-rules@^5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz#e488cc9181bf193fe5cd7bfca213a7695f1737b5"
-  integrity sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==
-  dependencies:
-    doctrine "0.7.2"
-    tslib "1.9.0"
-    tsutils "^3.0.0"
+tslib@1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
-tslint-microsoft-contrib@~5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz#a6286839f800e2591d041ea2800c77487844ad81"
-  integrity sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==
-  dependencies:
-    tsutils "^2.27.2 <2.29.0"
+tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
-tslint@^5.14.0:
+tslint@^5.20.1:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
   integrity sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==
@@ -30770,12 +31619,10 @@ tslint@^5.14.0:
     tslib "^1.8.0"
     tsutils "^2.29.0"
 
-"tsutils@^2.27.2 <2.29.0":
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.28.0.tgz#6bd71e160828f9d019b6f4e844742228f85169a1"
-  integrity sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==
-  dependencies:
-    tslib "^1.8.1"
+tsscmp@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
+  integrity sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==
 
 tsutils@^2.29.0:
   version "2.29.0"
@@ -30784,7 +31631,7 @@ tsutils@^2.29.0:
   dependencies:
     tslib "^1.8.1"
 
-tsutils@^3.0.0, tsutils@^3.17.1, tsutils@^3.5.0, tsutils@^3.7.0:
+tsutils@^3.17.1, tsutils@^3.7.0:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
   integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
@@ -30830,37 +31677,42 @@ type-detect@0.1.1:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-0.1.1.tgz#0ba5ec2a885640e470ea4e8505971900dac58822"
   integrity sha1-C6XsKohWQORw6k6FBZcZANrFiCI=
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-detect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
   integrity sha1-diIXzAbbJY7EiQihKY6LlRIejqI=
 
-type-fest@^0.3.0, type-fest@^0.3.1:
+type-fest@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
+  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
+
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
+type-fest@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
   integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
 
-type-fest@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
-  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
-
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
   integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
-type-fest@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
-  integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
-
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-is@~1.6.16, type-is@~1.6.17, type-is@~1.6.18:
+type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
   integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
@@ -30883,7 +31735,7 @@ typed-styles@^0.0.7:
   resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
   integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
 
-typedarray-to-buffer@^3.1.5:
+typedarray-to-buffer@^3.1.5, typedarray-to-buffer@~3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
   integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
@@ -30900,39 +31752,36 @@ typescript@2.9.1:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961"
   integrity sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==
 
-typescript@3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
-  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==
+typescript@3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.5.tgz#dae20114a7b4ff4bd642db9c8c699f2953e8bbdb"
+  integrity sha512-BEjlc0Z06ORZKbtcxGrIvvwYs5hAnuo6TKdNFL55frVDlB+na3z5bsLhFaIxmT+dPWgBIjMo6aNnTOgHHmHgiQ==
 
-typescript@3.7.2, typescript@^3.4.0:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
-  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 typescript@^2.4.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
   integrity sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==
 
-ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
-  version "0.7.20"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
-  integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
+typescript@^3.0.0, typescript@^3.2.4, typescript@^3.4.0, typescript@^3.5.3, typescript@^3.8.0-dev.20200111, typescript@^3.8.3, typescript@^3.9.2, typescript@^3.9.3, typescript@latest:
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a"
+  integrity sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==
+
+ua-parser-js@^0.7.18:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
+  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
 
 uc.micro@^1.0.0, uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-uglify-es@^3.1.9:
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
-  integrity sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==
-  dependencies:
-    commander "~2.13.0"
-    source-map "~0.6.1"
-
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -30952,12 +31801,11 @@ uglify-js@^2.6.1:
     uglify-to-browserify "~1.0.0"
 
 uglify-js@^3.1.4:
-  version "3.6.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.9.tgz#85d353edb6ddfb62a9d798f36e91792249320611"
-  integrity sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.9.3.tgz#4a285d1658b8a2ebaef9e51366b3a0f7acd79ec2"
+  integrity sha512-r5ImcL6QyzQGVimQoov3aL2ZScywrOgBXGndbWrdehKoSvGe/RmiE5Jpw/v+GvxODt6l2tpBXwA7n+qZVlHBMA==
   dependencies:
     commander "~2.20.3"
-    source-map "~0.6.1"
 
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
@@ -30969,16 +31817,6 @@ uid-number@0.0.6:
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
   integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
 
-ultron@1.0.x:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
-  integrity sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po=
-
-ultron@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
-  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
-
 umask@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
@@ -30995,9 +31833,9 @@ unc-path-regex@^0.1.0, unc-path-regex@^0.1.2:
   integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
 
 uncss@^0.17.2:
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/uncss/-/uncss-0.17.2.tgz#fac1c2429be72108e8a47437c647d58cf9ea66f1"
-  integrity sha512-hu2HquwDItuGDem4YsJROdAD8SknmWtM24zwhQax6J1se8tPjV1cnwPKhtjodzBaUhaL8Zb3hlGdZ2WAUpbAOg==
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/uncss/-/uncss-0.17.3.tgz#50fc1eb4ed573ffff763458d801cd86e4d69ea11"
+  integrity sha512-ksdDWl81YWvF/X14fOSw4iu8tESDHFIeyKIeDrK6GEVTQvqJc1WlOEXqostNwOCi3qAj++4EaLsdAgPmUbEyog==
   dependencies:
     commander "^2.20.0"
     glob "^7.1.4"
@@ -31020,6 +31858,13 @@ undeclared-identifiers@^1.1.2:
     simple-concat "^1.0.0"
     xtend "^4.0.1"
 
+undefsafe@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
+  integrity sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==
+  dependencies:
+    debug "^2.2.0"
+
 underscore.string@^3.2.2, underscore.string@~3.3.4:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"
@@ -31029,9 +31874,9 @@ underscore.string@^3.2.2, underscore.string@~3.3.4:
     util-deprecate "^1.0.2"
 
 underscore@>=1.8.3:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
-  integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
+  integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
 
 unfetch@^4.1.0:
   version "4.1.0"
@@ -31039,12 +31884,12 @@ unfetch@^4.1.0:
   integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
 
 unherit@^1.0.4:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.2.tgz#14f1f397253ee4ec95cec167762e77df83678449"
-  integrity sha512-W3tMnpaMG7ZY6xe/moK04U9fBhi6wEiCYHUW5Mop/wQHf12+79EQGwxYejNdhEz2mkqkBlGwm7pxmgBKMVUj0w==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
   dependencies:
-    inherits "^2.0.1"
-    xtend "^4.0.1"
+    inherits "^2.0.0"
+    xtend "^4.0.0"
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
@@ -31059,12 +31904,12 @@ unicode-match-property-ecmascript@^1.0.4:
     unicode-canonical-property-names-ecmascript "^1.0.4"
     unicode-property-aliases-ecmascript "^1.0.4"
 
-unicode-match-property-value-ecmascript@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
-  integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
 
-unicode-properties@^1.0.0:
+unicode-properties@^1.2.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/unicode-properties/-/unicode-properties-1.3.1.tgz#cc642b6314bde2c691d65dd94cece09ed84f1282"
   integrity sha512-nIV3Tf3LcUEZttY/2g4ZJtGXhWwSkuLL+rCu0DIAMbjyVPj+8j5gNVz4T/sVbnQybIsd5SFGkPKg/756OY6jlA==
@@ -31073,9 +31918,9 @@ unicode-properties@^1.0.0:
     unicode-trie "^2.0.0"
 
 unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
-  integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
+  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
 unicode-trie@^0.3.0, unicode-trie@^0.3.1:
   version "0.3.1"
@@ -31101,129 +31946,70 @@ unicode-trie@^2.0.0:
     pako "^0.2.5"
     tiny-inflate "^1.0.0"
 
-unified-args@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/unified-args/-/unified-args-7.1.0.tgz#cd87a0ee54aa88d2308b5e0616dc1d289f1c351d"
-  integrity sha512-soi9Rn7l5c1g0RfElSCHMwaxeiclSI0EsS3uZmMPUOfwMeeeZjLpNmHAowV9iSlQh59iiZhSMyQu9lB8WnIz5g==
+unified-args@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/unified-args/-/unified-args-8.0.0.tgz#c74d92a2b2ab43ed95c22c61d0ef81b4eed1bd80"
+  integrity sha512-224jfXOL0Xu0e52fJTfxmAaNTuW1zopPmnXh/5GDAxx4Z6NbcZpjgQPBmo1xoLAhGih0rWVG2+a2kodzrEHfHw==
   dependencies:
     camelcase "^5.0.0"
-    chalk "^2.0.0"
+    chalk "^3.0.0"
     chokidar "^3.0.0"
     fault "^1.0.2"
     json5 "^2.0.0"
     minimist "^1.2.0"
     text-table "^0.2.0"
-    unified-engine "^7.0.0"
+    unified-engine "^8.0.0"
 
-unified-engine@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-7.0.0.tgz#37df3a0369d94435fa5a233d8cb40de23f89e476"
-  integrity sha512-zH/MvcISpWg3JZtCoY/GYBw1WnVHkhnPoMBWpmuvAifCPSS9mzT9EbtimesJp6t2nnr/ojI0mg3TmkO1CjIwVA==
+unified-engine@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-8.0.0.tgz#e3996ff6eaecc6ca3408af92b70e25691192d17d"
+  integrity sha512-vLUezxCnjzz+ya4pYouRQVMT8k82Rk4fIj406UidRnSFJdGXFaQyQklAnalsQHJrLqAlaYPkXPUa1upfVSHGCA==
   dependencies:
     concat-stream "^2.0.0"
     debug "^4.0.0"
     fault "^1.0.0"
     figures "^3.0.0"
-    fn-name "^2.0.1"
     glob "^7.0.3"
     ignore "^5.0.0"
+    is-buffer "^2.0.0"
     is-empty "^1.0.0"
-    is-hidden "^1.0.1"
-    is-object "^1.0.1"
+    is-plain-obj "^2.0.0"
     js-yaml "^3.6.1"
-    load-plugin "^2.0.0"
-    parse-json "^4.0.0"
+    load-plugin "^3.0.0"
+    parse-json "^5.0.0"
     to-vfile "^6.0.0"
     trough "^1.0.0"
-    unist-util-inspect "^4.1.2"
+    unist-util-inspect "^5.0.0"
     vfile-reporter "^6.0.0"
     vfile-statistics "^1.1.0"
-    x-is-string "^0.1.0"
-    xtend "^4.0.1"
 
 unified-lint-rule@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unified-lint-rule/-/unified-lint-rule-1.0.4.tgz#be432d316db7ad801166041727b023ba18963e24"
-  integrity sha512-q9wY6S+d38xRAuWQVOMjBQYi7zGyKkY23ciNafB8JFVmDroyKjtytXHCg94JnhBCXrNqpfojo3+8D+gmF4zxJQ==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/unified-lint-rule/-/unified-lint-rule-1.0.5.tgz#41dcac68a283bfc4b4ff6014e370cc8931eb4b5d"
+  integrity sha512-jOPr/fx8lTzqszEfh46p99jUMqgPlIZ8rNKllEepumISvgfj9lUq1c7BSpVihr0L1df3lkjVHAThRPS7dIyjYg==
   dependencies:
     wrapped "^1.0.1"
 
-unified-message-control@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unified-message-control/-/unified-message-control-1.0.4.tgz#a5e02c07112f78c6687b83a10392c2fba86dc09b"
-  integrity sha512-e1dEtN4Z/TvLn/qHm+xeZpzqhJTtfZusFErk336kkZVpqrJYiV9ptxq+SbRPFMlN0OkjDYHmVJ929KYjsMTo3g==
-  dependencies:
-    trim "0.0.1"
-    unist-util-visit "^1.0.0"
-    vfile-location "^2.0.0"
-
-unified@8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.3.2.tgz#aed69d0e577d6ef27268431c63a10faef60e63ab"
-  integrity sha512-NDtUAXcd4c+mKppCbsZHzmhkKEQuhveZNBrFYmNgMIMk2K9bc8hmG3mLEGVtRmSNodobwyMePAnvIGVWZfPdzQ==
+unified-message-control@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/unified-message-control/-/unified-message-control-3.0.1.tgz#7018855daea9af96082cbea35970d48c9c4dbbf2"
+  integrity sha512-K2Kvvp1DBzeuxYLLsumZh/gDWUTl4e2z/P3VReFirC78cfHKtQifbhnfRrSBtKtd1Uc6cvYTW0/SZIUaMAEcTg==
   dependencies:
-    bail "^1.0.0"
-    extend "^3.0.0"
-    is-plain-obj "^2.0.0"
-    trough "^1.0.0"
-    vfile "^4.0.0"
+    unist-util-visit "^2.0.0"
+    vfile-location "^3.0.0"
 
-unified@^8.2.0:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
-  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+unified@9.0.0, unified@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
+  integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
+    is-buffer "^2.0.0"
     is-plain-obj "^2.0.0"
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unimodules-barcode-scanner-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-2.0.1.tgz#74196fe25c366344ff101540626b8d61cc6c0438"
-  integrity sha512-Rp3428am/4vCcvVsreqaaGcJNcjtVOMDHVX0yjF2yr8QfD07UVzRYo8ZBhQHc/hYSVWwe+19Pbmk0b+sTnTgkg==
-
-unimodules-camera-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-camera-interface/-/unimodules-camera-interface-2.0.1.tgz#0691ce3282fafaf87aecc3423b1d9c1b729797a4"
-  integrity sha512-m+sYhFFahaPWYl0aVCq9VU8u6CiLVI4cSywYl9rwbIMAifi83rO5GUKKDIaMfAqMj9z77i/RF53x3nVdpclpyA==
-
-unimodules-constants-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-constants-interface/-/unimodules-constants-interface-2.0.1.tgz#385a8adab7f22b4aa8cca2c302516c0465a64773"
-  integrity sha512-Ue/5CpfHvc9jrVc9bvDRgMVMQznvgpJ27hQoNia0sUhsMtHDvnFhXrcNfLO4tG5zGgcda6fuKtTMz91vLz8uqw==
-
-unimodules-face-detector-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-face-detector-interface/-/unimodules-face-detector-interface-2.0.1.tgz#a9f3150f69fd8061f6ea920e6ae83c544990b549"
-  integrity sha512-uM25vRESCRXwhmgVlkiDhxx1R0yGFjoiTYjqG7bfqzSnc964HR3Qy5KaWvJUOtFpLun50pfBw+lzutqFnshCpg==
-
-unimodules-file-system-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-file-system-interface/-/unimodules-file-system-interface-2.0.1.tgz#5fc237b5c4adaa48bd817a9542271d4210d978a9"
-  integrity sha512-1z//JY7ifBxq3e4dgjID2JgX3uTYEZqVFS1PqlVb9FEmdD+nvuGI2w+ohe+3Y20FYX1lZrffGCeT/Si3xa4tkA==
-
-unimodules-font-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-font-interface/-/unimodules-font-interface-2.0.1.tgz#c2fee253c12d8ae45594adfe8dabff3ac57884de"
-  integrity sha512-LirIkEZyBJMakQkYwSZBBbqXWY5KFBbBF97CCAaV/uzp6UaNawExD8kYhexajM3+uNdIPlnCIfdqQbpbXBdkVg==
-
-unimodules-image-loader-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-image-loader-interface/-/unimodules-image-loader-interface-2.0.1.tgz#d9d9148638d594bbdb95963449b78b5d0c686eb0"
-  integrity sha512-o6HHXNcWmDiT8NhBR/wRB/MTf64sQ3c9sSf13BMvmKt2nt64lkhzQC7IVDl1oxx2ejHTfwhC/XK/EafaJvvHWQ==
-
-unimodules-permissions-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-permissions-interface/-/unimodules-permissions-interface-2.0.1.tgz#a8a21807095553a0476a72028ae7f3beab090dbd"
-  integrity sha512-eqs6Bub19RiUHxCMrrdyro+xOpab1reHjGHBBoMOndY4bKkARpKDN7x1gDxJv3HCtP8a2hAm0xae0cDZ5S38Tw==
-
-unimodules-sensors-interface@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unimodules-sensors-interface/-/unimodules-sensors-interface-2.0.1.tgz#5e24964bba0a541b1d4d8d3b82e54efb1aba96b9"
-  integrity sha512-JvR04JZHqt+EJiGL/9KWsaTpTJQ53qqNMmZAC+MX6NUgnz1bWiUw9eY9MAAIaQbmorCwKyCqfpX9twTUM8z1yA==
-
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -31241,6 +32027,13 @@ union@~0.4.3:
   dependencies:
     qs "~2.3.3"
 
+union@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/union/-/union-0.5.0.tgz#b2c11be84f60538537b846edb9ba266ba0090075"
+  integrity sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==
+  dependencies:
+    qs "^6.4.0"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -31287,22 +32080,20 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
-unist-builder@1.0.4, unist-builder@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.4.tgz#e1808aed30bd72adc3607f25afecebef4dd59e17"
-  integrity sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==
-  dependencies:
-    object-assign "^4.1.0"
+unist-builder@2.0.3, unist-builder@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
 
-unist-util-generated@^1.1.0:
+unist-util-generated@^1.0.0, unist-util-generated@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
   integrity sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==
 
-unist-util-inspect@^4.1.2:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-4.1.4.tgz#fefc4794445d0f79bffea7a2421c6f556e73a37c"
-  integrity sha512-7xxyvKiZ1SC9vL5qrMqKub1T31gRHfau4242F69CcaOrXt//5PmRVOmDZ36UAEgiT+tZWzmQmbNZn+mVtnR9HQ==
+unist-util-inspect@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-5.0.1.tgz#168c8770a99902318ca268f8c391e294bcf44540"
+  integrity sha512-fPNWewS593JSmg49HbnE86BJKuBi1/nMWhDSccBvbARfxezEuJV85EaARR9/VplveiwCoLm2kWq+DhP8TBaDpw==
   dependencies:
     is-empty "^1.0.0"
 
@@ -31312,68 +32103,54 @@ unist-util-is@^3.0.0:
   integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
 
 unist-util-is@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.1.tgz#ae3e39b9ad1b138c8e3b9d2f4658ad0031be4610"
-  integrity sha512-7NYjErP4LJtkEptPR22wO5RsCPnHZZrop7t2SoQzjvpFedCFer4WW8ujj9GI5DkUX7yVcffXLjoURf6h2QUv6Q==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.2.tgz#c7d1341188aa9ce5b3cff538958de9895f14a5de"
+  integrity sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==
 
 unist-util-position@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.4.tgz#5872be7aec38629b971fdb758051f78817b0040a"
-  integrity sha512-tWvIbV8goayTjobxDIr4zVTyG+Q7ragMSMeKC3xnPl9xzIc0+she8mxXLM3JVNDDsfARPbCd3XdzkyLdo7fF3g==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
+  integrity sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==
 
-unist-util-remove-position@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
-  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
+unist-util-remove-position@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
   dependencies:
-    unist-util-visit "^1.1.0"
+    unist-util-visit "^2.0.0"
 
-unist-util-remove@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
-  integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
+unist-util-remove@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-2.0.0.tgz#32c2ad5578802f2ca62ab808173d505b2c898488"
+  integrity sha512-HwwWyNHKkeg/eXRnE11IpzY8JT55JNM1YCwwU9YNCnfzk6s8GhPXrVBBZWiwLeATJbI7euvoGSzcy9M29UeW3g==
   dependencies:
-    unist-util-is "^3.0.0"
+    unist-util-is "^4.0.0"
 
 unist-util-stringify-position@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.2.tgz#5a3866e7138d55974b640ec69a94bc19e0f3fa12"
-  integrity sha512-nK5n8OGhZ7ZgUwoUbL8uiVRwAbZyzBsB/Ddrlbu6jwwubFza4oe15KlyEaLNMXQW1svOQq4xesUeqA85YrIUQA==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
   dependencies:
     "@types/unist" "^2.0.2"
 
-unist-util-visit-parents@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
-  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
-  dependencies:
-    unist-util-is "^3.0.0"
-
 unist-util-visit-parents@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.0.1.tgz#666883dc8684c6eec04a7e9781cdcd8b4888319f"
-  integrity sha512-umEOTkm6/y1gIqPrqet55mYqlvGXCia/v1FSc5AveLAI7jFmOAIbqiwcHcviLcusAkEQt1bq2hixCKO9ltMb2Q==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.0.2.tgz#d4076af3011739c71d2ce99d05de37d545f4351d"
+  integrity sha512-yJEfuZtzFpQmg1OSCyS9M5NJRrln/9FbYosH3iW0MG402QbdbaB8ZESwUv9RO6nRfLAKvWcMxCwdLWOov36x/g==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
-unist-util-visit@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.0.tgz#1fdae5ea88251651bfe49b7e84390d664fc227c5"
-  integrity sha512-kiTpWKsF54u/78L/UU/i7lxrnqGiEWBgqCpaIZBYP0gwUC+Akq0Ajm4U8JiNIoQNfAioBdsyarnOcTEAb9mLeQ==
+unist-util-visit@2.0.2, unist-util-visit@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.2.tgz#3843782a517de3d2357b4c193b24af2d9366afb7"
+  integrity sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
-  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
-  dependencies:
-    unist-util-visit-parents "^2.0.0"
-
-universal-analytics@^0.4.20:
+universal-analytics@0.4.20:
   version "0.4.20"
   resolved "https://registry.yarnpkg.com/universal-analytics/-/universal-analytics-0.4.20.tgz#d6b64e5312bf74f7c368e3024a922135dbf24b03"
   integrity sha512-gE91dtMvNkjO+kWsPstHRtSwHXz0l2axqptGYp5ceg4MsuurloM0PU3pdOfpb5zBXUvyjT4PwhWK2m39uczZuw==
@@ -31387,6 +32164,16 @@ universal-env@^1.0.0:
   resolved "https://registry.yarnpkg.com/universal-env/-/universal-env-1.0.7.tgz#31a1f9d3328677bd1fc016c141353ca35766a456"
   integrity sha512-N7n9nZSpVSKwjPDO0QsN+3/5pPPum9u5i7Km3xxUi0ykA8UD9nKt8foMYdVFB8HIRXx/Sh7HVu3pC5CJX/t9Tw==
 
+universal-env@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universal-env/-/universal-env-2.0.0.tgz#b734b2f42ba62c4384eea319a9f937109dc3a406"
+  integrity sha512-jfPJvPXFdhJHsDhuCHj3Njc3nxF+dmj6LeqKE9R41EdKKOJ1d5GGpFu3DrT+Ff+pxS9jsnbtj7BZYFAcLlxdPg==
+
+universal-env@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/universal-env/-/universal-env-3.2.0.tgz#ac25409a6308d9af9da0b8556d858b02887d0533"
+  integrity sha512-cfi0FU/Yv1BFCu8ILUptaTM8pnevdH/rXQ8Z8+gMj4Ky7wNb8RVqjwx2TUjTbJ+Q7eh9Rfd9h7goKeohFV9ZZg==
+
 universal-url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universal-url/-/universal-url-2.0.0.tgz#35e7fc2c3374804905cee67ea289ed3a47669809"
@@ -31396,9 +32183,16 @@ universal-url@^2.0.0:
     whatwg-url "^7.0.0"
 
 universal-user-agent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-4.0.0.tgz#27da2ec87e32769619f68a14996465ea1cb9df16"
-  integrity sha512-eM8knLpev67iBDizr/YtqkJsF3GK8gzDc6st/WKzrTuPtcsOKW/0IdL4cnMBsU69pOx0otavLWBDGTwg+dB0aA==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-4.0.1.tgz#fd8d6cb773a679a709e967ef8288a31fcc03e557"
+  integrity sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==
+  dependencies:
+    os-name "^3.1.0"
+
+universal-user-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-5.0.0.tgz#a3182aa758069bf0e79952570ca757de3579c1d9"
+  integrity sha512-B5TPtzZleXyPrUMKCpEHFmVhMN6EhmJYjG5PQna9s7mXeSqGTLap4OpqLl5FCEFUI3UBmllkETwKf/db66Y54Q==
   dependencies:
     os-name "^3.1.0"
 
@@ -31407,7 +32201,12 @@ universalify@^0.1.0, universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
-unix-crypt-td-js@^1.0.0:
+universalify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
+unix-crypt-td-js@1.1.4, unix-crypt-td-js@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/unix-crypt-td-js/-/unix-crypt-td-js-1.1.4.tgz#4912dfad1c8aeb7d20fa0a39e4c31918c1d5d5dd"
   integrity sha512-8rMeVYWSIyccIJscb9NdCfZKSRBKYTeVnwmiRYT2ulE3qd1RaDQ0xQDP+rI3ccIWbhu/zuo5cgN8z73belNZgw==
@@ -31438,10 +32237,10 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
-  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
+untildify@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
 untildify@^2.1.0:
   version "2.1.0"
@@ -31455,12 +32254,28 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
   integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-upath@^1.0.2, upath@^1.1.0, upath@^1.1.1:
+upath@^1.0.2, upath@^1.1.0, upath@^1.1.1, upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-notifier@^3.0.0:
+update-notifier@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
+  integrity sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+update-notifier@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.1.tgz#78ecb68b915e2fd1be9f767f6e298ce87b736250"
   integrity sha512-grrmrB6Zb8DUiyDIaeRTBCkgISYUgETNe7NglEbVsrLWXeESnlCSP50WfRSj/GmzMPl6Uchj24S/p80nP/ZQrQ==
@@ -31478,12 +32293,24 @@ update-notifier@^3.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-upper-case-first@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
-  integrity sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=
+update-notifier@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.0.tgz#4866b98c3bc5b5473c020b1250583628f9a328f3"
+  integrity sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==
   dependencies:
-    upper-case "^1.1.1"
+    boxen "^4.2.0"
+    chalk "^3.0.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.1"
+    is-npm "^4.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.0.0"
+    pupa "^2.0.1"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
 
 upper-case@^1.1.1:
   version "1.1.3"
@@ -31502,17 +32329,12 @@ 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-join@^2.0.2, url-join@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
   integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
 
-url-loader@1.1.2, url-loader@^1.1.2:
+url-loader@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.2.tgz#b971d191b83af693c5e3fea4064be9e1f2d7f8d8"
   integrity sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==
@@ -31521,16 +32343,7 @@ url-loader@1.1.2, url-loader@^1.1.2:
     mime "^2.0.3"
     schema-utils "^1.0.0"
 
-url-loader@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
-  integrity sha512-kVrp/8VfEm5fUt+fl2E0FQyrpmOYgMEkBsv8+UDP1wFhszECq5JyGF33I7cajlVY90zRZ6MyfgKXngLvHYZX8A==
-  dependencies:
-    loader-utils "^1.2.3"
-    mime "^2.4.4"
-    schema-utils "^2.0.0"
-
-url-loader@^2.0.1:
+url-loader@2.3.0, url-loader@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b"
   integrity sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==
@@ -31539,6 +32352,15 @@ url-loader@^2.0.1:
     mime "^2.4.4"
     schema-utils "^2.5.0"
 
+url-loader@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"
+  integrity sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.26"
+    schema-utils "^2.6.5"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -31553,7 +32375,7 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
-url-parse@^1.4.3, url-parse@^1.4.4:
+url-parse@^1.4.3:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
   integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
@@ -31561,10 +32383,13 @@ url-parse@^1.4.3, url-parse@^1.4.4:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-url-template@2.0.x, url-template@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
-  integrity sha1-/FZaPMy/93MMd19WQflVV5FDnyE=
+url-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/url-regex/-/url-regex-5.0.0.tgz#8f5456ab83d898d18b2f91753a702649b873273a"
+  integrity sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==
+  dependencies:
+    ip-regex "^4.1.0"
+    tlds "^1.203.0"
 
 url-to-options@^1.0.1:
   version "1.0.1"
@@ -31579,28 +32404,27 @@ url@0.11.0, url@^0.11.0, url@~0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-urlgrey@^0.4.4:
+urlgrey@0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/urlgrey/-/urlgrey-0.4.4.tgz#892fe95960805e85519f1cd4389f2cb4cbb7652f"
   integrity sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=
 
-use-callback-ref@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
-  integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
+use-composed-ref@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.0.0.tgz#bb13e8f4a0b873632cde4940abeb88b92d03023a"
+  integrity sha512-RVqY3NFNjZa0xrmK3bIMWNmQ01QjKPDc7DeWR3xa/N8aliVppuutOE5bZzPkQfvL+5NRWMMp0DJ99Trd974FIw==
+  dependencies:
+    ts-essentials "^2.0.3"
 
 use-image@^1.0.3:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.0.5.tgz#51fa23fe705c3ad0d4ae3eca6cf636551c591693"
   integrity sha512-tv1tHn1GRcbrifNzCPAN81Z1Fayfd3GXkUDFx0/dUkqqPmADNDRoCyT9MqrUX9GPcofsQl6SREPr9Zavm3dRTQ==
 
-use-sidecar@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
-  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
-  dependencies:
-    detect-node "^2.0.4"
-    tslib "^1.9.3"
+use-latest@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.0.0.tgz#c86d2e4893b15f27def69da574a47136d107facb"
+  integrity sha512-CxmFi75KTXeTIBlZq3LhJ4Hz98pCaRKZHCpnbiaEHIr5QnuHvH8lKYoluPBt/ik7j/hFVPB8K3WqF6mQvLyQTg==
 
 use@^3.1.0:
   version "3.1.1"
@@ -31631,7 +32455,7 @@ util-promisify@^2.1.0:
   dependencies:
     object.getownpropertydescriptors "^2.0.3"
 
-util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
+util.promisify@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
   integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
@@ -31639,6 +32463,16 @@ util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
+util.promisify@^1.0.0, util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -31670,30 +32504,25 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid-js@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/uuid-js/-/uuid-js-0.7.5.tgz#6c886d02a53d2d40dcf25d91a170b4a7b25b94d0"
-  integrity sha1-bIhtAqU9LUDc8l2RoXC0p7JblNA=
-
-uuid@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.0.tgz#6728fc0459c450d796a99c31837569bdf672d728"
-  integrity sha1-Zyj8BFnEUNeWqZwxg3VpvfZy1yg=
+uuid@7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.2.tgz#7ff5c203467e91f5e0d85cfcbaaf7d2ebbca9be6"
+  integrity sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==
 
-uuid@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
-  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2, uuid@^3.3.3, uuid@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
-  integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
+uuid@^7.0.2, uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
 
-uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2, uuid@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
-  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
+uuid@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.1.0.tgz#6f1536eb43249f473abc6bd58ff983da1ca30d8d"
+  integrity sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg==
 
 v8-compile-cache@2.0.3:
   version "2.0.3"
@@ -31705,6 +32534,15 @@ v8-compile-cache@^2.0.0, v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
   integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
+v8-to-istanbul@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.4.tgz#b97936f21c0e2d9996d4985e5c5156e9d4e49cd6"
+  integrity sha512-Rw6vJHj1mbdK8edjR7+zuJrpDtKIgNdAvTSAcpYfgMIw+u2dPDntD3dgN4XQFLU2/fvFQdzj+EeSGfd/jnY5fQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -31720,25 +32558,81 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-validator@10.5.0:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-10.5.0.tgz#1debbe1e6f5fd0c920ed2af47516f3762033939c"
-  integrity sha512-6OOi+eV2mOxCFLq0f2cJDrdB6lrtLXEUxabhNRGjgOLT/l3SSll9J49Cl+LIloUqkWWTPraK/mucEQ3dc2jStQ==
-
-validator@11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-11.0.0.tgz#fb10128bfb1fd14ce4ed36b79fc94289eae70667"
-  integrity sha512-+wnGLYqaKV2++nUv60uGzUJyJQwYVOin6pn1tgEiFCeCQO60yeu3Og9/yPccbBX574kxIcEJicogkzx6s6eyag==
-
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
-vendors@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
-  integrity sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw==
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
+verdaccio-audit@9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/verdaccio-audit/-/verdaccio-audit-9.4.0.tgz#1a06ccf30290e1563f7f578dc9c19811b73dc029"
+  integrity sha512-oXHYg/1L+f+iOcdD38gXN/OVmE+cW+fCsX/1Apg/0G6JHpl4msTpJ5DTeP3QdcggXwVHKMvU1NM8PNJBpxpfnQ==
+  dependencies:
+    express "4.17.1"
+    request "2.88.0"
+
+verdaccio-auth-memory@^9.4.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/verdaccio-auth-memory/-/verdaccio-auth-memory-9.5.0.tgz#de8fd820405776c3c7e78856f63675887b13e2bd"
+  integrity sha512-N5nruT05U9AFwo38SW4fYlXH+QYTWxCBoZkjqlAHK1ws/fWwkYFXeM21C1YxVckyK6VeM7c9tgCS8a/x0G9BjQ==
+  dependencies:
+    "@verdaccio/commons-api" "^9.4.0"
+
+verdaccio-htpasswd@9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/verdaccio-htpasswd/-/verdaccio-htpasswd-9.4.1.tgz#44f9e57083d34c740a56654fa4210cb66bec9fc5"
+  integrity sha512-d7WkEErQWPB4xeMaWV0AQTafJoK8gFFmOiyJ+lBENN+hyLtb9tUUnqcbJYBzx/5swkisAmH4I+x7523ikq30SA==
+  dependencies:
+    "@verdaccio/file-locking" "^9.4.0"
+    apache-md5 "1.1.2"
+    bcryptjs "2.4.3"
+    http-errors "1.7.3"
+    unix-crypt-td-js "1.1.4"
+
+verdaccio@^4.5.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/verdaccio/-/verdaccio-4.6.2.tgz#1d90628a8f386ca4417804b29f490b8f4d346c86"
+  integrity sha512-VFiplHOxQXofInyEUjUhGODMQCTwpT5a2uNtvWJ7JDebIUlJPNgoPqjbfsMCE0gCTqgAL6b+Q/SZQfowRGLl9Q==
+  dependencies:
+    "@verdaccio/commons-api" "9.4.0"
+    "@verdaccio/local-storage" "9.4.0"
+    "@verdaccio/readme" "9.4.0"
+    "@verdaccio/streams" "9.4.0"
+    "@verdaccio/ui-theme" "1.7.1"
+    JSONStream "1.3.5"
+    async "3.2.0"
+    body-parser "1.19.0"
+    bunyan "1.8.12"
+    commander "3.0.2"
+    compression "1.7.4"
+    cookies "0.8.0"
+    cors "2.8.5"
+    dayjs "1.8.26"
+    envinfo "7.5.1"
+    express "4.17.1"
+    handlebars "4.7.6"
+    http-errors "1.7.3"
+    js-yaml "3.13.1"
+    jsonwebtoken "8.5.1"
+    kleur "3.0.3"
+    lockfile-lint "4.2.2"
+    lodash "4.17.15"
+    lunr-mutable-indexes "2.3.2"
+    marked "0.8.2"
+    mime "2.4.4"
+    minimatch "3.0.4"
+    mkdirp "1.0.3"
+    mv "2.1.1"
+    pkginfo "0.4.1"
+    request "2.87.0"
+    semver "7.2.1"
+    verdaccio-audit "9.4.0"
+    verdaccio-htpasswd "9.4.1"
 
 verror@1.10.0:
   version "1.10.0"
@@ -31749,23 +32643,23 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vfile-location@^2.0.0, vfile-location@^2.0.1:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
-  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
+vfile-location@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.0.1.tgz#d78677c3546de0f7cd977544c367266764d31bb3"
+  integrity sha512-yYBO06eeN/Ki6Kh1QAkgzYpWT1d3Qln+ZCtSbJqFExPl1S3y2qqotJQXoh6qEvl/jDlgpUJolBn3PItVnnZRqQ==
 
 vfile-message@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.2.tgz#75ba05090ec758fa8420f2c11ce049bcddd8cf3e"
-  integrity sha512-gNV2Y2fDvDOOqq8bEe7cF3DXU6QgV4uA9zMR2P8tix11l1r7zju3zry3wZ8sx+BEfuO6WQ7z2QzfWTvqHQiwsA==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
 vfile-reporter@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/vfile-reporter/-/vfile-reporter-6.0.0.tgz#753119f51dec9289b7508b457afc0cddf5e07f2e"
-  integrity sha512-8Is0XxFxWJUhPJdOg3CyZTqd3ICCWg6r304PuBl818ZG91h4FMS3Q+lrOPS+cs5/DZK3H0+AkJdH0J8JEwKtDA==
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-reporter/-/vfile-reporter-6.0.1.tgz#45d4dc11df2e312196ea2ceb95e42a67fc8ce814"
+  integrity sha512-0OppK9mo8G2XUpv+hIKLVSDsoxJrXnOy73+vIm0jQUOUFYRduqpFHX+QqAQfvRHyX9B0UFiRuNJnBOjQCIsw1g==
   dependencies:
     repeat-string "^1.5.0"
     string-width "^4.0.0"
@@ -31775,19 +32669,19 @@ vfile-reporter@^6.0.0:
     vfile-statistics "^1.1.0"
 
 vfile-sort@^2.1.2:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/vfile-sort/-/vfile-sort-2.2.1.tgz#74e714f9175618cdae96bcaedf1a3dc711d87567"
-  integrity sha512-5dt7xEhC44h0uRQKhbM2JAe0z/naHphIZlMOygtMBM9Nn0pZdaX5fshhwWit9wvsuP8t/wp43nTDRRErO1WK8g==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/vfile-sort/-/vfile-sort-2.2.2.tgz#720fe067ce156aba0b411a01bb0dc65596aa1190"
+  integrity sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA==
 
 vfile-statistics@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-1.1.3.tgz#e9c87071997fbcb4243764d2c3805e0bb0820c60"
-  integrity sha512-CstaK/ebTz1W3Qp41Bt9Lj/2DmumFsCwC2sKahDNSPh0mPh7/UyMLCoU8ZBX34CRU0d61B4W41yIFsV0NKMZeA==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-1.1.4.tgz#b99fd15ecf0f44ba088cc973425d666cb7a9f245"
+  integrity sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA==
 
 vfile@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.0.2.tgz#71af004d4a710b0e6be99c894655bc56126d5d56"
-  integrity sha512-yhoTU5cDMSsaeaMfJ5g0bUKYkYmZhAh9fn9TZicxqn+Cw4Z439il2v3oT9S0yjlpqlI74aFOQCt3nOV+pxzlkw==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.1.1.tgz#282d28cebb609183ac51703001bc18b3e3f17de9"
+  integrity sha512-lRjkpyDGjVlBA7cDQhQ+gNcvB1BGaTHYuSOcY3S7OhDmBtnzX95FhtZZDecSTDm6aajFymyve6S5DN4ZHGezdQ==
   dependencies:
     "@types/unist" "^2.0.0"
     is-buffer "^2.0.0"
@@ -31815,49 +32709,54 @@ void-elements@^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.3.5:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-3.4.7.tgz#8d85f3c1d46a1e58e9867d747552fb8c83d934fd"
-  integrity sha512-y3MN2+/yph3yoIHGmHu4ScYpm285L58XVvfGkd49xTQzLja4apxSbwzsYcP9QsqS0W7KuvoyiPhqksiudoMwjg==
+void-elements@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
+
+vscode-json-languageservice@^3.5.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-3.6.0.tgz#133a1e2c3a3dffe38564a1ba948516805c3c1869"
+  integrity sha512-dXzFywypUZ9T0tjr4fREZiknXDz6vAGx1zsxbQY1+9DOpjMfbz0VLP873KmcbuvL4K3nseKTxc4TKHu8kLXRMw==
   dependencies:
-    jsonc-parser "^2.2.0"
-    vscode-languageserver-textdocument "^1.0.0-next.4"
-    vscode-languageserver-types "^3.15.0-next.6"
-    vscode-nls "^4.1.1"
-    vscode-uri "^2.1.0"
+    jsonc-parser "^2.2.1"
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.15.1"
+    vscode-nls "^4.1.2"
+    vscode-uri "^2.1.1"
 
-vscode-languageserver-textdocument@^1.0.0-next.4:
-  version "1.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.0-next.5.tgz#dbb7a45dd973a19261a7c57ab9a439c40f3799ee"
-  integrity sha512-1jp/zAidN/bF/sqPimhBX1orH5G4rzRw63k75TesukJDuxm8yW79ECStWbDSy41BHGOwSGN4M69QFvhancSr5A==
+vscode-languageserver-textdocument@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f"
+  integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==
 
-vscode-languageserver-types@^3.15.0-next.6:
-  version "3.15.0-next.8"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.15.0-next.8.tgz#59bfe70e5690bcef7d28d0f3a7f813915edf62e1"
-  integrity sha512-AEfWrSNyeamWMKPehh/kd3nBnKD9ZGCPhzfxMnW9YNqElSh28G2+Puk3knIQWyaWyV6Bzh28ok9BRJsPzXFCkQ==
+vscode-languageserver-types@^3.15.1:
+  version "3.15.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz#17be71d78d2f6236d414f0001ce1ef4d23e6b6de"
+  integrity sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ==
 
-vscode-nls@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-4.1.1.tgz#f9916b64e4947b20322defb1e676a495861f133c"
-  integrity sha512-4R+2UoUUU/LdnMnFjePxfLqNhBS8lrAFyX7pjb2ud/lqDkrUavFUTcG7wR0HBZFakae0Q6KLBFjMS6W93F403A==
+vscode-nls@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-4.1.2.tgz#ca8bf8bb82a0987b32801f9fddfdd2fb9fd3c167"
+  integrity sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==
 
-vscode-uri@^2.1.0:
+vscode-uri@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.1.tgz#5aa1803391b6ebdd17d047f51365cf62c38f6e90"
   integrity sha512-eY9jmGoEnVf8VE8xr5znSah7Qt1P/xsCdErz+g8HYZtJ7bZqKH5E3d+6oVNm1AC/c6IHUDokbmVXKOi4qPAC9A==
 
-vue-class-component@^7.0.1:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.1.0.tgz#b33efcb10e17236d684f70b1e96f1946ec793e87"
-  integrity sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg==
+vue-class-component@^7.1.0, vue-class-component@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.3.tgz#a5b1abd53513a72ad51098752e2dedd499807cca"
+  integrity sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==
 
-vue-docgen-api@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.1.0.tgz#46e8df9f37c815d32165c883dac6d667430b5d4f"
-  integrity sha512-Oop5CqQbglFA5kJRY9e/QqsVMo/2zh2Gxnh7HnJI8hrjilZxfD+YvSfmZtq+HCTBota+F012qi5QJiBctUKUzA==
+vue-docgen-api@^4.7.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.24.0.tgz#d258e299958c9a9d6c8c573afeaed7dd205a17a9"
+  integrity sha512-alb0lJSUMEaMxQw6/THemXnwCUVQGsFhR9VyrCmkHe2LpoIB8dfLgqTK9DrsGJS0iCy/qVWxeflr+ybgQREXpA==
   dependencies:
-    "@babel/parser" "^7.2.3"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/types" "^7.6.0"
     ast-types "^0.12.2"
     hash-sum "^1.0.2"
     lru-cache "^4.1.5"
@@ -31866,10 +32765,10 @@ vue-docgen-api@^4.1.0:
     ts-map "^1.0.3"
     vue-template-compiler "^2.0.0"
 
-vue-docgen-loader@^1.3.0-beta.0:
-  version "1.3.0-beta.1"
-  resolved "https://registry.yarnpkg.com/vue-docgen-loader/-/vue-docgen-loader-1.3.0-beta.1.tgz#e72972e7d3c1b37679ec303180ec72c1d1d8d13a"
-  integrity sha512-842c/87P4T4wChDzuoFs0Iuni66Fe4ztlRi0XFJg1e7EN0IRZEAvgbkE2vT2BcGkQQkhB7VNFjmYSEEucz7BwQ==
+vue-docgen-loader@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vue-docgen-loader/-/vue-docgen-loader-1.5.0.tgz#bf8797ea9dde87a8d734b56176f105477d9bf266"
+  integrity sha512-LKZ8mxeIQ44uSUMTplnwOXbC4bO4E2vyZDTbn7/1QlVwJPEIjk3ahL0DA1m27IEw6YTlHOwtWS0PrHmDkFgyAg==
   dependencies:
     clone "^2.1.2"
     jscodeshift "^0.7.0"
@@ -31881,25 +32780,32 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-loader@^15.7.0:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.2.tgz#cc89e2716df87f70fe656c9da9d7f8bec06c73d6"
-  integrity sha512-H/P9xt/nkocyu4hZKg5TzPqyCT1oKOaCSk9zs0JCbJuy0Q8KtR0bjJpnT/5R5x/Ckd1GFkkLQnQ1C4x6xXeLZg==
+vue-loader@^15.7.0, vue-loader@^15.9.1:
+  version "15.9.2"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.2.tgz#ae01f5f4c9c6a04bff4483912e72ef91a402c1ae"
+  integrity sha512-oXBubaY//CYEISBlHX+c2YPJbmOH68xXPXjFv4MAgPqQvUsnjrBAjCJi8HXZ/r/yfn0tPL5VZj1Zcp8mJPI8VA==
   dependencies:
-    "@vue/component-compiler-utils" "^3.0.0"
+    "@vue/component-compiler-utils" "^3.1.0"
     hash-sum "^1.0.2"
     loader-utils "^1.1.0"
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-property-decorator@8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.2.2.tgz#ac895e9508ee1bf86e3a28568d94d842c2c8e42f"
-  integrity sha512-3gRrIeoUtjXvkoMX2stJsVs7805Pa9MXEndnk21ej+sWO7AIc5HF1TKqK0Pox5TEjpO02UbadIF0QWNrx6ZwXQ==
+vue-property-decorator@8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.3.0.tgz#536f027dc7d626f37c8d85a2dc02f0a6cb979440"
+  integrity sha512-77YtTbZHd5CNiPzbqv51kEgL48yvD2dUDfF28vEyw3MbQ9bBAb/tDyFzskcqjNRbWyXk1vq4oM2CK/LfhxuIBg==
+  dependencies:
+    vue-class-component "^7.1.0"
+
+vue-property-decorator@^8.4.1:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz#016e17f259f73bc547e77a50ce282ba18db4ee41"
+  integrity sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ==
   dependencies:
-    vue-class-component "^7.0.1"
+    vue-class-component "^7.1.0"
 
-vue-style-loader@^4.1.0:
+vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
   integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==
@@ -31907,10 +32813,10 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.0.0, 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==
+vue-template-compiler@^2.0.0, vue-template-compiler@^2.6.11, vue-template-compiler@^2.6.8:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -31921,21 +32827,21 @@ vue-template-es2015-compiler@^1.9.0:
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
 vue@^2.6.8:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
-  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
 vuex@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
-  integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.4.0.tgz#20cc086062d750769fce1febb34e7fceeaebde45"
+  integrity sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg==
 
-w3c-hr-time@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
-  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
+w3c-hr-time@^1.0.1, w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
   dependencies:
-    browser-process-hrtime "^0.1.2"
+    browser-process-hrtime "^1.0.0"
 
 w3c-xmlserializer@^1.0.1, w3c-xmlserializer@^1.1.2:
   version "1.1.2"
@@ -31946,21 +32852,24 @@ w3c-xmlserializer@^1.0.1, w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.1.tgz#ec204a76b0038f17711e575720aaf28505ac7185"
-  integrity sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
 
-wait-on@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-3.3.0.tgz#9940981d047a72a9544a97b8b5fca45b2170a082"
-  integrity sha512-97dEuUapx4+Y12aknWZn7D25kkjMk16PbWoYzpSdA8bYpVfS6hpl2a2pOWZ3c+Tyt3/i4/pglyZctG3J4V1hWQ==
+wait-on@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-4.0.2.tgz#6ee9b5751b4e0329630abbb5fdba787802b32914"
+  integrity sha512-Qpmgm3Hw/sXm7xK68FBsYy5r+Uid94/QymwnEjn9GTpfiWTUVYm0bccivVwY/BXGYO2r+5Cd8S/DzrRZqHK/9w==
   dependencies:
-    "@hapi/joi" "^15.0.3"
-    core-js "^2.6.5"
-    minimist "^1.2.0"
-    request "^2.88.0"
-    rx "^4.1.0"
+    "@hapi/joi" "^17.1.1"
+    lodash "^4.17.15"
+    minimist "^1.2.5"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    rxjs "^6.5.5"
 
 walk-sync@^0.2.5:
   version "0.2.7"
@@ -31988,9 +32897,9 @@ walk-sync@^1.0.0, walk-sync@^1.1.3:
     matcher-collection "^1.1.1"
 
 walk-sync@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.0.2.tgz#5ea8a28377c8be68c92d50f4007ea381725da14b"
-  integrity sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.1.0.tgz#e214248e5f5cf497ddd87db5a2a02e47e29c6501"
+  integrity sha512-KpH9Xw64LNSx7/UI+3guRZvJWlDxVA4+KKb/4puRoVrG8GkvZRxnF3vhxdjgpoKJGL2TVg1OrtkXIE/VuGPLHQ==
   dependencies:
     "@types/minimatch" "^3.0.3"
     ensure-posix-path "^1.1.0"
@@ -32003,13 +32912,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
-  dependencies:
-    loose-envify "^1.0.0"
-
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -32022,17 +32924,6 @@ warp10@^2.0.1:
   resolved "https://registry.yarnpkg.com/warp10/-/warp10-2.0.1.tgz#a21936d53f152a6003ce49bae85c8758c54c3d2c"
   integrity sha512-nS1KG2RCVTWepfSitZKzL+HYiqqMJag06KtOJF/LwklrJWeJYRWHjMYpd6GXMt09ot+HIEj+Y4dmQNnNNE0Bjg==
 
-watch-detector@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/watch-detector/-/watch-detector-0.1.0.tgz#e37b410d149e2a8bf263a4f8b71e2f667633dbf8"
-  integrity sha512-vfzMMfpjQc88xjETwl2HuE6PjEuxCBeyC4bQmqrHrofdfYWi/4mEJklYbNgSzpqM9PxubsiPIrE5SZ1FDyiQ2w==
-  dependencies:
-    heimdalljs-logger "^0.1.9"
-    quick-temp "^0.1.8"
-    rsvp "^4.7.0"
-    semver "^5.4.1"
-    silent-error "^1.1.0"
-
 watch-detector@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/watch-detector/-/watch-detector-1.0.0.tgz#c7b722d8695fee9ab6071e0f38f258e6adb22609"
@@ -32043,22 +32934,23 @@ watch-detector@^1.0.0:
     silent-error "^1.1.1"
     tmp "^0.1.0"
 
-watch@~0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
-  integrity sha1-KAlUdsbffJDJYxOJkMClQj60uYY=
+watchpack-chokidar2@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
+  integrity sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==
   dependencies:
-    exec-sh "^0.2.0"
-    minimist "^1.2.0"
+    chokidar "^2.1.8"
 
-watchpack@^1.5.0, watchpack@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
-  integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
+watchpack@^1.5.0, watchpack@^1.6.0, watchpack@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.2.tgz#c02e4d4d49913c3e7e122c3325365af9d331e9aa"
+  integrity sha512-ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0g==
   dependencies:
-    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.0"
+    watchpack-chokidar2 "^2.0.0"
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
@@ -32074,10 +32966,20 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-component-analyzer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/web-component-analyzer/-/web-component-analyzer-1.0.3.tgz#da73dff15d6a8f4864311664476f0f436274e97d"
+  integrity sha512-QA6GVVJrKRPHLVqPv4evY0H+du1yY+E1q8c82bdY5e10+pWsRfeYA+Hsh2r8yl1EGQVC55SeV3tGvJ6+CxaH/Q==
+  dependencies:
+    fast-glob "^3.1.0"
+    ts-simple-type "~0.3.6"
+    typescript "^3.5.3"
+    yargs "^15.0.2"
+
 web-namespaces@^1.0.0, web-namespaces@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.3.tgz#9bbf5c99ff0908d2da031f1d732492a96571a83f"
-  integrity sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
+  integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
 webdriver-js-extender@2.1.0:
   version "2.1.0"
@@ -32109,13 +33011,23 @@ webidl-conversions@^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-bundle-analyzer@^3.0.4, webpack-bundle-analyzer@^3.4.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
-  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+webpack-bundle-analyzer@^3.4.1, webpack-bundle-analyzer@^3.6.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz#ce6b3f908daf069fd1f7266f692cbb3bded9ba16"
+  integrity sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==
   dependencies:
-    acorn "^6.0.7"
-    acorn-walk "^6.1.1"
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
     bfj "^6.1.1"
     chalk "^2.4.1"
     commander "^2.18.0"
@@ -32128,10 +33040,18 @@ webpack-bundle-analyzer@^3.0.4, webpack-bundle-analyzer@^3.4.1:
     opener "^1.5.1"
     ws "^6.0.0"
 
-webpack-cli@^3.3.0:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
-  integrity sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==
+webpack-chain@^6.0.0, webpack-chain@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.4.0.tgz#22f0b27b6a9bc9ee3cba4f9e6513cf66394034e2"
+  integrity sha512-f97PYqxU+9/u0IUqp/ekAHRhBD1IQwhBv3wlJo2nvyELpr2vNnUqO3XQEk+qneg0uWGP54iciotszpjfnEExFA==
+  dependencies:
+    deepmerge "^1.5.2"
+    javascript-stringify "^2.0.1"
+
+webpack-cli@^3.3.0, webpack-cli@^3.3.6:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.11.tgz#3bf21889bf597b5d82c38f215135a411edfdc631"
+  integrity sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==
   dependencies:
     chalk "2.4.2"
     cross-spawn "6.0.5"
@@ -32145,21 +33065,6 @@ webpack-cli@^3.3.0:
     v8-compile-cache "2.0.3"
     yargs "13.2.4"
 
-webpack-core@^0.6.8:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
-  integrity sha1-/FcViMhVjad76e+23r3Fo7FyvcI=
-  dependencies:
-    source-list-map "~0.1.7"
-    source-map "~0.4.1"
-
-webpack-deep-scope-plugin@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/webpack-deep-scope-plugin/-/webpack-deep-scope-plugin-1.6.0.tgz#5a3a26dc8a40863c7c362840df1fb63f5ca4c441"
-  integrity sha512-ZYldKNeWQtk9SoV70x7Eb2NRmvHMtNBOjscs0wUdg/pfymntiF+0W/D9v2o76ztufjND6RNFjNVnyFQww25AZg==
-  dependencies:
-    deep-scope-analyser "^1.6.0"
-
 webpack-dev-middleware@3.7.2, webpack-dev-middleware@^3.5.1, webpack-dev-middleware@^3.7.0, webpack-dev-middleware@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
@@ -32171,46 +33076,49 @@ webpack-dev-middleware@3.7.2, webpack-dev-middleware@^3.5.1, webpack-dev-middlew
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.2.1.tgz#1b45ce3ecfc55b6ebe5e36dab2777c02bc508c4e"
-  integrity sha512-sjuE4mnmx6JOh9kvSbPYw3u/6uxCLHNWfhWaIPwcXWsvWOPN+nc5baq4i9jui3oOBRXGonK9+OI0jVkaz6/rCw==
+webpack-dev-server@3.10.3:
+  version "3.10.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz#f35945036813e57ef582c2420ef7b470e14d3af0"
+  integrity sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
-    chokidar "^2.0.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
+    chokidar "^2.1.8"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
     debug "^4.1.1"
-    del "^3.0.0"
-    express "^4.16.2"
-    html-entities "^1.2.0"
-    http-proxy-middleware "^0.19.1"
+    del "^4.1.1"
+    express "^4.17.1"
+    html-entities "^1.2.1"
+    http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
-    internal-ip "^4.2.0"
+    internal-ip "^4.3.0"
     ip "^1.1.5"
-    killable "^1.0.0"
-    loglevel "^1.4.1"
-    opn "^5.1.0"
-    portfinder "^1.0.9"
+    is-absolute-url "^3.0.3"
+    killable "^1.0.1"
+    loglevel "^1.6.6"
+    opn "^5.5.0"
+    p-retry "^3.0.1"
+    portfinder "^1.0.25"
     schema-utils "^1.0.0"
-    selfsigned "^1.9.1"
-    semver "^5.6.0"
-    serve-index "^1.7.2"
+    selfsigned "^1.10.7"
+    semver "^6.3.0"
+    serve-index "^1.9.1"
     sockjs "0.3.19"
-    sockjs-client "1.3.0"
-    spdy "^4.0.0"
-    strip-ansi "^3.0.0"
+    sockjs-client "1.4.0"
+    spdy "^4.0.1"
+    strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
-    webpack-dev-middleware "^3.5.1"
+    webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
-    yargs "12.0.2"
+    ws "^6.2.1"
+    yargs "12.0.5"
 
-webpack-dev-server@3.9.0, webpack-dev-server@^3.7.2, webpack-dev-server@^3.8.2:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
-  integrity sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==
+webpack-dev-server@3.11.0, webpack-dev-server@^3.10.3, webpack-dev-server@^3.7.2, webpack-dev-server@^3.8.2:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
+  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -32220,31 +33128,67 @@ webpack-dev-server@3.9.0, webpack-dev-server@^3.7.2, webpack-dev-server@^3.8.2:
     debug "^4.1.1"
     del "^4.1.1"
     express "^4.17.1"
-    html-entities "^1.2.1"
+    html-entities "^1.3.1"
     http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
     internal-ip "^4.3.0"
     ip "^1.1.5"
     is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.4"
+    loglevel "^1.6.8"
     opn "^5.5.0"
     p-retry "^3.0.1"
-    portfinder "^1.0.25"
+    portfinder "^1.0.26"
     schema-utils "^1.0.0"
     selfsigned "^1.10.7"
     semver "^6.3.0"
     serve-index "^1.9.1"
-    sockjs "0.3.19"
+    sockjs "0.3.20"
     sockjs-client "1.4.0"
-    spdy "^4.0.1"
+    spdy "^4.0.2"
     strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
     webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
     ws "^6.2.1"
-    yargs "12.0.5"
+    yargs "^13.3.2"
+
+webpack-dev-server@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.2.1.tgz#1b45ce3ecfc55b6ebe5e36dab2777c02bc508c4e"
+  integrity sha512-sjuE4mnmx6JOh9kvSbPYw3u/6uxCLHNWfhWaIPwcXWsvWOPN+nc5baq4i9jui3oOBRXGonK9+OI0jVkaz6/rCw==
+  dependencies:
+    ansi-html "0.0.7"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^4.1.1"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "^0.19.1"
+    import-local "^2.0.0"
+    internal-ip "^4.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    schema-utils "^1.0.0"
+    selfsigned "^1.9.1"
+    semver "^5.6.0"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.3.0"
+    spdy "^4.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.5.1"
+    webpack-log "^2.0.0"
+    yargs "12.0.2"
 
 webpack-hot-middleware@^2.25.0:
   version "2.25.0"
@@ -32283,17 +33227,7 @@ webpack-manifest-plugin@2.0.4:
     lodash ">=3.5 <5"
     tapable "^1.0.0"
 
-webpack-manifest-plugin@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
-  integrity sha512-2zqJ6mvc3yoiqfDjghAIpljhLSDh/G7vqGrzYcYqqRCd/ZZZCAuc/YPE5xG0LGpLgDJRhUNV1H+znyyhIxahzA==
-  dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
-
-webpack-manifest-plugin@^2.0.4:
+webpack-manifest-plugin@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
   integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
@@ -32303,21 +33237,14 @@ webpack-manifest-plugin@^2.0.4:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
-webpack-merge@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
-  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
-  dependencies:
-    lodash "^4.17.5"
-
-webpack-merge@^4.2.1:
+webpack-merge@4.2.2, webpack-merge@^4.2.1, webpack-merge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
   integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@1.4.3, webpack-sources@^1.0.1, webpack-sources@^1.0.2, webpack-sources@^1.1.0, webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+webpack-sources@1.4.3, webpack-sources@^1.1.0, webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -32325,119 +33252,61 @@ webpack-sources@1.4.3, webpack-sources@^1.0.1, webpack-sources@^1.0.2, webpack-s
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-subresource-integrity@1.1.0-rc.6:
-  version "1.1.0-rc.6"
-  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.6.tgz#37f6f1264e1eb378e41465a98da80fad76ab8886"
-  integrity sha512-Az7y8xTniNhaA0620AV1KPwWOqawurVVDzQSpPAeR5RwNbL91GoBSJAAo9cfd+GiFHwsS5bbHepBw1e6Hzxy4w==
+webpack-subresource-integrity@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-1.4.0.tgz#44963a64c9a214ad729158e7f46d52c2525cc88a"
+  integrity sha512-GB1kB/LwAWC3CxwcedGhMkxGpNZxSheCe1q+KJP1bakuieAdX/rGHEcf5zsEzhKXpqsGqokgsDoD9dIkr61VDQ==
   dependencies:
-    webpack-core "^0.6.8"
+    webpack-sources "^1.3.0"
 
 webpack-virtual-modules@^0.1.10:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.1.12.tgz#ff6430c1d6f514eff12bae773ec03e5043a81943"
   integrity sha512-uwVhcpmh7WykpP2fD4T//5DLdMuanPHGXQHCnIrKoRg10GgVNy5z2oAcn26HLF67a6HCSzgc9xar+SMtZhOnXw==
-  dependencies:
-    debug "^3.0.0"
-
-webpack-virtual-modules@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.2.0.tgz#dd13e089898ee14a77717d37a9848b40a9b1068b"
-  integrity sha512-Leo4r6Sjj0HkoeP9vtQzm1abUm6UJc6gK1KrqNakIer+03mCyFVivGOFy0I0NFpRrv+kQm3UKstjWg0Fe+JqUQ==
-  dependencies:
-    debug "^3.0.0"
-
-webpack@4.29.6:
-  version "4.29.6"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.6.tgz#66bf0ec8beee4d469f8b598d3988ff9d8d90e955"
-  integrity sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==
-  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.39.0:
-  version "4.39.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.39.0.tgz#1d511308c3dd8f9fe3152c9447ce30f1814a620c"
-  integrity sha512-nrxFNSEKm4T1C/EsgOgN50skt//Pl4X7kgJC1MrlE47M292LSCVmMOC47iTGL0CGxbdwhKGgeThrJcw0bstEfA==
-  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.2.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.1"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
-    watchpack "^1.6.0"
-    webpack-sources "^1.4.1"
+  dependencies:
+    debug "^3.0.0"
+
+webpack-virtual-modules@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz#20863dc3cb6bb2104729fff951fbe14b18bd0299"
+  integrity sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==
+  dependencies:
+    debug "^3.0.0"
 
-webpack@4.39.2:
-  version "4.39.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.39.2.tgz#c9aa5c1776d7c309d1b3911764f0288c8c2816aa"
-  integrity sha512-AKgTfz3xPSsEibH00JfZ9sHXGUwIQ6eZ9tLN8+VLzachk1Cw2LVmy+4R7ZiwTa9cZZ15tzySjeMui/UnSCAZhA==
+webpack@4.29.6:
+  version "4.29.6"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.6.tgz#66bf0ec8beee4d469f8b598d3988ff9d8d90e955"
+  integrity sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==
   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.2.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
+    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.3"
+    eslint-scope "^4.0.0"
     json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.1"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
+    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.3"
-    terser-webpack-plugin "^1.4.1"
-    watchpack "^1.6.0"
-    webpack-sources "^1.4.1"
+    tapable "^1.1.0"
+    terser-webpack-plugin "^1.1.0"
+    watchpack "^1.5.0"
+    webpack-sources "^1.3.0"
 
-webpack@4.41.0:
-  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
-  integrity sha512-yNV98U4r7wX1VJAj5kyMsu36T8RPPQntcb5fJLOsMz/pt/WrKC0Vp1bAlqPLkA1LegSwQwf6P+kAbyhRKVQ72g==
+webpack@4.42.0:
+  version "4.42.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.0.tgz#b901635dd6179391d90740a63c93f76f39883eb8"
+  integrity sha512-EzJRHvwQyBiYrYqhyjW9AqM90dE4+s1/XtCfn7uWg6cS72zH+2VPFAlsnW0+W0cDi0XRjNKUMoJtpSi50+Ph6w==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -32459,20 +33328,20 @@ webpack@4.41.0:
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
+    terser-webpack-plugin "^1.4.3"
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-webpack@4.41.2, webpack@^4.27.1, webpack@^4.33.0, webpack@^4.38.0:
-  version "4.41.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
-  integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
+webpack@^4.0.0, webpack@^4.27.1, webpack@^4.33.0, webpack@^4.38.0, webpack@^4.41.2, webpack@^4.41.4, webpack@^4.43.0:
+  version "4.43.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
+  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
   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.2.1"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
     chrome-trace-event "^1.0.2"
@@ -32483,21 +33352,28 @@ webpack@4.41.2, webpack@^4.27.1, webpack@^4.33.0, webpack@^4.38.0:
     loader-utils "^1.2.3"
     memory-fs "^0.4.1"
     micromatch "^3.1.10"
-    mkdirp "^0.5.1"
+    mkdirp "^0.5.3"
     neo-async "^2.6.1"
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
-    watchpack "^1.6.0"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.6.1"
     webpack-sources "^1.4.1"
 
+websocket-driver@0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
+  dependencies:
+    websocket-extensions ">=0.1.1"
+
 websocket-driver@>=0.5.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
-  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
   dependencies:
-    http-parser-js ">=0.4.0 <0.4.11"
+    http-parser-js ">=0.5.1"
     safe-buffer ">=5.1.0"
     websocket-extensions ">=0.1.1"
 
@@ -32518,7 +33394,7 @@ whatwg-fetch@2.0.4:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
-whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
@@ -32546,16 +33422,20 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+whatwg-url@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.1.0.tgz#c628acdcf45b82274ce7281ee31dd3c839791771"
+  integrity sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^5.0.0"
+
 when@~3.6.x:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
   integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
 
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
-  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -32573,7 +33453,7 @@ which@1, which@^1.2.14, which@^1.2.8, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1:
+which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
@@ -32606,21 +33486,20 @@ window-size@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"
-  integrity sha512-QTlz2hKLrdqukrsapKsINzqMgOUpQW268eJ0OaOpJN32h272waxR9fkB9VoWRtK7uKHG5EHJcTXQBD8XZVJkFA==
+window-size@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-1.1.1.tgz#9858586580ada78ab26ecd6978a6e03115c1af20"
+  integrity sha512-5D/9vujkmVQ7pSmc0SCBmHXbkv6eaHwXEx65MywhmUMsI8sGqJ972APq1lotfcwMKPFLuCFfL8xGHLIp7jaBmA==
   dependencies:
-    execa "^1.0.0"
+    define-property "^1.0.0"
+    is-number "^3.0.0"
 
-with-open-file@^0.1.6:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/with-open-file/-/with-open-file-0.1.7.tgz#e2de8d974e8a8ae6e58886be4fe8e7465b58a729"
-  integrity sha512-ecJS2/oHtESJ1t3ZfMI3B7KIDKyfN0O16miWxdn30zdh66Yd3LsRFebXZXq6GU4xfxLf6nVxp9kIqElb5fqczA==
+windows-release@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.3.0.tgz#dce167e9f8be733f21c849ebd4d03fe66b29b9f0"
+  integrity sha512-2HetyTg1Y+R+rUgrKeUEhAG/ZuOmTrI1NBb3ZyAGQMYmOJjBBPe4MTodghRkmLJZHwkuPi02anbeGP+Zf401LQ==
   dependencies:
-    p-finally "^1.0.0"
-    p-try "^2.1.0"
-    pify "^4.0.1"
+    execa "^1.0.0"
 
 with@^5.0.0:
   version "5.1.1"
@@ -32630,6 +33509,16 @@ with@^5.0.0:
     acorn "^3.1.0"
     acorn-globals "^3.0.0"
 
+with@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"
+  integrity sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==
+  dependencies:
+    "@babel/parser" "^7.9.6"
+    "@babel/types" "^7.9.6"
+    assert-never "^1.2.1"
+    babel-walk "3.0.0-canary-5"
+
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -32640,22 +33529,15 @@ wordwrap@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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
-wordwrap@~0.0.2:
+wordwrap@^0.0.3, wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
   integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
-workbox-background-sync@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-3.6.3.tgz#6609a0fac9eda336a7c52e6aa227ba2ae532ad94"
-  integrity sha512-ypLo0B6dces4gSpaslmDg5wuoUWrHHVJfFWwl1udvSylLdXvnrfhFfriCS42SNEe5lsZtcNZF27W/SMzBlva7Q==
-  dependencies:
-    workbox-core "^3.6.3"
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
 workbox-background-sync@^4.3.1:
   version "4.3.1"
@@ -32664,13 +33546,6 @@ workbox-background-sync@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-broadcast-cache-update@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.6.3.tgz#3f5dff22ada8c93e397fb38c1dc100606a7b92da"
-  integrity sha512-pJl4lbClQcvp0SyTiEw0zLSsVYE1RDlCPtpKnpMjxFtu8lCFTAEuVyzxp9w7GF4/b3P4h5nyQ+q7V9mIR7YzGg==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-broadcast-update@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
@@ -32678,34 +33553,6 @@ workbox-broadcast-update@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-build@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-3.6.3.tgz#77110f9f52dc5d82fa6c1c384c6f5e2225adcbd8"
-  integrity sha512-w0clZ/pVjL8VXy6GfthefxpEXs0T8uiRuopZSFVQ8ovfbH6c6kUpEh6DcYwm/Y6dyWPiCucdyAZotgjz+nRz8g==
-  dependencies:
-    babel-runtime "^6.26.0"
-    common-tags "^1.4.0"
-    fs-extra "^4.0.2"
-    glob "^7.1.2"
-    joi "^11.1.1"
-    lodash.template "^4.4.0"
-    pretty-bytes "^4.0.2"
-    stringify-object "^3.2.2"
-    strip-comments "^1.0.2"
-    workbox-background-sync "^3.6.3"
-    workbox-broadcast-cache-update "^3.6.3"
-    workbox-cache-expiration "^3.6.3"
-    workbox-cacheable-response "^3.6.3"
-    workbox-core "^3.6.3"
-    workbox-google-analytics "^3.6.3"
-    workbox-navigation-preload "^3.6.3"
-    workbox-precaching "^3.6.3"
-    workbox-range-requests "^3.6.3"
-    workbox-routing "^3.6.3"
-    workbox-strategies "^3.6.3"
-    workbox-streams "^3.6.3"
-    workbox-sw "^3.6.3"
-
 workbox-build@^4.2.0, workbox-build@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
@@ -32735,20 +33582,6 @@ workbox-build@^4.2.0, workbox-build@^4.3.1:
     workbox-sw "^4.3.1"
     workbox-window "^4.3.1"
 
-workbox-cache-expiration@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-cache-expiration/-/workbox-cache-expiration-3.6.3.tgz#4819697254a72098a13f94b594325a28a1e90372"
-  integrity sha512-+ECNph/6doYx89oopO/UolYdDmQtGUgo8KCgluwBF/RieyA1ZOFKfrSiNjztxOrGJoyBB7raTIOlEEwZ1LaHoA==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-cacheable-response@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-3.6.3.tgz#869f1a68fce9063f6869ddbf7fa0a2e0a868b3aa"
-  integrity sha512-QpmbGA9SLcA7fklBLm06C4zFg577Dt8u3QgLM0eMnnbaVv3rhm4vbmDpBkyTqvgK/Ly8MBDQzlXDtUCswQwqqg==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-cacheable-response@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
@@ -32756,11 +33589,6 @@ workbox-cacheable-response@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-core@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-3.6.3.tgz#69abba70a4f3f2a5c059295a6f3b7c62bd00e15c"
-  integrity sha512-cx9cx0nscPkIWs8Pt98HGrS9/aORuUcSkWjG25GqNWdvD/pSe7/5Oh3BKs0fC+rUshCiyLbxW54q0hA+GqZeSQ==
-
 workbox-core@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
@@ -32773,16 +33601,6 @@ workbox-expiration@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-google-analytics@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-3.6.3.tgz#99df2a3d70d6e91961e18a6752bac12e91fbf727"
-  integrity sha512-RQBUo/6SXtIaQTRFj4RQZ9e1gAl7D8oS5S+Hi173Kk70/BgJjzPwXpC5A249Jv5YfkCOLMQCeF9A27BiD0b0ig==
-  dependencies:
-    workbox-background-sync "^3.6.3"
-    workbox-core "^3.6.3"
-    workbox-routing "^3.6.3"
-    workbox-strategies "^3.6.3"
-
 workbox-google-analytics@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
@@ -32793,13 +33611,6 @@ workbox-google-analytics@^4.3.1:
     workbox-routing "^4.3.1"
     workbox-strategies "^4.3.1"
 
-workbox-navigation-preload@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-3.6.3.tgz#a2c34eb7c17e7485b795125091215f757b3c4964"
-  integrity sha512-dd26xTX16DUu0i+MhqZK/jQXgfIitu0yATM4jhRXEmpMqQ4MxEeNvl2CgjDMOHBnCVMax+CFZQWwxMx/X/PqCw==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-navigation-preload@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
@@ -32807,13 +33618,6 @@ workbox-navigation-preload@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-precaching@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-3.6.3.tgz#5341515e9d5872c58ede026a31e19bafafa4e1c1"
-  integrity sha512-aBqT66BuMFviPTW6IpccZZHzpA8xzvZU2OM1AdhmSlYDXOJyb1+Z6blVD7z2Q8VNtV1UVwQIdImIX+hH3C3PIw==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-precaching@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
@@ -32821,13 +33625,6 @@ workbox-precaching@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-range-requests@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-3.6.3.tgz#3cc21cba31f2dd8c43c52a196bcc8f6cdbcde803"
-  integrity sha512-R+yLWQy7D9aRF9yJ3QzwYnGFnGDhMUij4jVBUVtkl67oaVoP1ymZ81AfCmfZro2kpPRI+vmNMfxxW531cqdx8A==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-range-requests@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
@@ -32835,13 +33632,6 @@ workbox-range-requests@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-routing@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-3.6.3.tgz#659cd8f9274986cfa98fda0d050de6422075acf7"
-  integrity sha512-bX20i95OKXXQovXhFOViOK63HYmXvsIwZXKWbSpVeKToxMrp0G/6LZXnhg82ijj/S5yhKNRf9LeGDzaqxzAwMQ==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-routing@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
@@ -32849,13 +33639,6 @@ workbox-routing@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-strategies@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-3.6.3.tgz#11a0dc249a7bc23d3465ec1322d28fa6643d64a0"
-  integrity sha512-Pg5eulqeKet2y8j73Yw6xTgLdElktcWExGkzDVCGqfV9JCvnGuEpz5eVsCIK70+k4oJcBCin9qEg3g3CwEIH3g==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-strategies@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
@@ -32863,13 +33646,6 @@ workbox-strategies@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-streams@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-3.6.3.tgz#beaea5d5b230239836cc327b07d471aa6101955a"
-  integrity sha512-rqDuS4duj+3aZUYI1LsrD2t9hHOjwPqnUIfrXSOxSVjVn83W2MisDF2Bj+dFUZv4GalL9xqErcFW++9gH+Z27w==
-  dependencies:
-    workbox-core "^3.6.3"
-
 workbox-streams@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
@@ -32877,11 +33653,6 @@ workbox-streams@^4.3.1:
   dependencies:
     workbox-core "^4.3.1"
 
-workbox-sw@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-3.6.3.tgz#278ea4c1831b92bbe2d420da8399176c4b2789ff"
-  integrity sha512-IQOUi+RLhvYCiv80RP23KBW/NTtIvzvjex28B8NW1jOm+iV4VIu3VXKXTA6er5/wjjuhmtB28qEAUqADLAyOSg==
-
 workbox-sw@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
@@ -32905,15 +33676,6 @@ workbox-webpack-plugin@4.3.1:
     json-stable-stringify "^1.0.1"
     workbox-build "^4.3.1"
 
-workbox-webpack-plugin@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-3.6.3.tgz#a807bb891b4e4e3c808df07e58f17de2d5ba6182"
-  integrity sha512-RwmKjc7HFHUFHoOlKoZUq9349u0QN3F8W5tZZU0vc1qsBZDINWXRiIBCAKvo/Njgay5sWz7z4I2adnyTo97qIQ==
-  dependencies:
-    babel-runtime "^6.26.0"
-    json-stable-stringify "^1.0.1"
-    workbox-build "^3.6.3"
-
 workbox-window@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
@@ -32928,10 +33690,10 @@ worker-farm@^1.5.2, worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-worker-plugin@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/worker-plugin/-/worker-plugin-3.2.0.tgz#ddae9f161b76fcbaacf8f54ecd037844584e43e7"
-  integrity sha512-W5nRkw7+HlbsEt3qRP6MczwDDISjiRj2GYt9+bpe8A2La00TmJdwzG5bpdMXhRt1qcWmwAvl1TiKaHRa+XDS9Q==
+worker-plugin@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/worker-plugin/-/worker-plugin-4.0.3.tgz#7c42e600d5931ad154d3d5f187a32446df64db0f"
+  integrity sha512-7hFDYWiKcE3yHZvemsoM9lZis/PzurHAEX1ej8PLCu818Rt6QqUAiDdxHPCKZctzmhqzPpcFSgvMCiPbtooqAg==
   dependencies:
     loader-utils "^1.1.0"
 
@@ -32959,9 +33721,9 @@ workerpool@^3.1.1:
     rsvp "^4.8.4"
 
 workerpool@^5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-5.0.2.tgz#8fd8f6c7250710b9c3143d5f7494db3b6633ce6e"
-  integrity sha512-RsXfHGFzbqrfrExTN1TyZobWXCN6+vbn9B1CsZ5zQ2ASA2kQaYONCGOAT88Ew+kNSaRq/XmApRC/HRSv9Z98Ng==
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-5.0.4.tgz#4f67cb70ff7550a27ab94de25b0b843cd92059a2"
+  integrity sha512-Sywova24Ow2NQ24JPB68bI89EdqMDjUXo4OpofK/QMD7C2ZVMloYBgQ5J3PChcBJHj2vspsmGx1/3nBKXtUkXQ==
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
@@ -32988,6 +33750,15 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrapped@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wrapped/-/wrapped-1.0.1.tgz#c783d9d807b273e9b01e851680a938c87c907242"
@@ -33010,15 +33781,6 @@ write-file-atomic@2.4.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-write-file-atomic@^1.2.0:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
-  integrity sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    slide "^1.1.5"
-
 write-file-atomic@^2.0.0, write-file-atomic@^2.3.0, write-file-atomic@^2.4.2:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
@@ -33029,9 +33791,9 @@ write-file-atomic@^2.0.0, write-file-atomic@^2.3.0, write-file-atomic@^2.4.2:
     signal-exit "^3.0.2"
 
 write-file-atomic@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.1.tgz#558328352e673b5bb192cf86500d60b230667d4b"
-  integrity sha512-JPStrIyyVJ6oCSz/691fAjFtefZ6q+fP6tm+OS4Qw6o+TGQxNp1ziY2PgS+X/m0V8OWhZiO/m4xSj+Pr4RrZvw==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
   dependencies:
     imurmurhash "^0.1.4"
     is-typedarray "^1.0.0"
@@ -33077,23 +33839,6 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^1.1.0, ws@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.5.tgz#cbd9e6e75e09fc5d2c90015f21f0c40875e0dd51"
-  integrity sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==
-  dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
-ws@^3.0.0, ws@^3.3.1:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
-  integrity sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==
-  dependencies:
-    async-limiter "~1.0.0"
-    safe-buffer "~5.1.0"
-    ultron "~1.1.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"
@@ -33108,12 +33853,10 @@ ws@^6.0.0, ws@^6.1.0, ws@^6.1.2, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.0.0, ws@^7.1.2:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.0.tgz#422eda8c02a4b5dba7744ba66eebbd84bcef0ec7"
-  integrity sha512-+SqNqFbwTm/0DC18KYzIsMTnEWpLwJsiasW/O17la4iDRRIO9uaHbvKiAS3AHgTiuuWerK/brj4O6MYZkei9xg==
-  dependencies:
-    async-limiter "^1.0.0"
+ws@^7.0.0, ws@^7.1.2, ws@^7.2.1, ws@^7.2.3:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.0.tgz#4b2f7f219b3d3737bc1a2fbf145d825b94d38ffd"
+  integrity sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==
 
 ws@~6.1.0:
   version "6.1.4"
@@ -33122,27 +33865,6 @@ ws@~6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
-x-is-string@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
-  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
-
-xcode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/xcode/-/xcode-1.1.0.tgz#9fcb63f417a9af377bfb743a5c22afce4e1da964"
-  integrity sha512-hllHFtfsNu5WbVzj8KbGNdI3NgOYmTLZqyF4a9c9J1aGMhAdxmLLsXlpG0Bz8fEtKh6I3pyargRXN0ZlLpcF5w==
-  dependencies:
-    simple-plist "^0.2.1"
-    uuid "^3.3.2"
-
-xcode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/xcode/-/xcode-2.0.0.tgz#134f1f94c26fbfe8a9aaa9724bfb2772419da1a2"
-  integrity sha512-5xF6RCjAdDEiEsbbZaS/gBRt3jZ/177otZcpoLCjGN/u1LrfgH7/Sgeeavpr/jELpyDqN2im3AKosl2G2W8hfw==
-  dependencies:
-    simple-plist "^1.0.0"
-    uuid "^3.3.2"
-
 xdg-basedir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
@@ -33177,61 +33899,50 @@ xml-name-validator@^3.0.0:
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
 xml2js@^0.4.17:
-  version "0.4.22"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.22.tgz#4fa2d846ec803237de86f30aa9b5f70b6600de02"
-  integrity sha512-MWTbxAQqclRSTnehWWe5nMKzI3VmJ8ltiJEco8akcC6j3miOhjjfzKum5sId+CWhfxdOs/1xauYr8/ZDBtQiRw==
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
+  integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
   dependencies:
     sax ">=0.6.0"
-    util.promisify "~1.0.0"
     xmlbuilder "~11.0.0"
 
-xmlbuilder@8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-8.2.2.tgz#69248673410b4ba42e1a6136551d2922335aa773"
-  integrity sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=
-
-xmlbuilder@^9.0.7:
-  version "9.0.7"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
-  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
+xml@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
+  integrity sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=
 
 xmlbuilder@~11.0.0:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
   integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
 
-xmlchars@^2.1.1:
+xmlchars@^2.1.1, xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xmldoc@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/xmldoc/-/xmldoc-0.4.0.tgz#d257224be8393eaacbf837ef227fd8ec25b36888"
-  integrity sha1-0lciS+g5PqrL+DfvIn/Y7CWzaIg=
-  dependencies:
-    sax "~1.1.1"
-
-xmldom@0.1.27, xmldom@0.1.x, xmldom@^0.1.19:
-  version "0.1.27"
-  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
-  integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
+xmldom@^0.1.19:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
+  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
 
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
   integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
-xpipe@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/xpipe/-/xpipe-1.0.5.tgz#8dd8bf45fc3f7f55f0e054b878f43a62614dafdf"
-  integrity sha1-jdi/Rfw/f1Xw4FS4ePQ6YmFNr98=
-
 xregexp@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
   integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
+xregexp@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.3.0.tgz#7e92e73d9174a99a59743f67a4ce879a04b5ae50"
+  integrity sha512-7jXDIFXh5yJ/orPn4SXjuVrWWoi4Cr8jfV1eHv9CixKSbU+jY4mxfrBwAuDvupPNKpMUY+FeIqsVw/JLT9+B8g==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.8.3"
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
@@ -33271,13 +33982,19 @@ yam@^1.0.0:
     lodash.merge "^4.6.0"
 
 yaml@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.2.tgz#f26aabf738590ab61efaca502358e48dc9f348b2"
-  integrity sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
+yargs-parser@18.x, yargs-parser@^18.1.0, yargs-parser@^18.1.1, yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
   dependencies:
-    "@babel/runtime" "^7.6.3"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
-yargs-parser@10.x, yargs-parser@^10.0.0, yargs-parser@^10.1.0:
+yargs-parser@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
   integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==
@@ -33292,35 +34009,29 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^13.0.0, yargs-parser@^13.1.0, yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
-  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+yargs-parser@^13.1.0, yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
-  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
+yargs-parser@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-14.0.0.tgz#42e25777b06718ec99eac2c3a98ad3de73b6818f"
+  integrity sha512-zn/Mnx+tbFjkCFUodEpjXckNS65NfpB5oyqOkDDEG/8uxlfLZJu2IoBLQFjukUkn9rBbGkVYNzrDh6qy4NUd3g==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
-  integrity sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=
-  dependencies:
-    camelcase "^3.0.0"
-
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
-  integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
+yargs-parser@^15.0.1:
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.1.tgz#54786af40b820dcb2fb8025b11b4d659d76323b3"
+  integrity sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==
   dependencies:
-    camelcase "^3.0.0"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
 yargs-parser@^7.0.0:
   version "7.0.0"
@@ -33347,7 +34058,7 @@ yargs@12.0.2:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^10.1.0"
 
-yargs@12.0.5, yargs@12.0.x, yargs@^12.0.5:
+yargs@12.0.5, yargs@^12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
@@ -33365,23 +34076,6 @@ yargs@12.0.5, yargs@12.0.x, yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@13.1.0:
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.1.0.tgz#b2729ce4bfc0c584939719514099d8a916ad2301"
-  integrity sha512-1UhJbXfzHiPqkfXNHYhiz79qM/kZqjTE8yGlEjZa85Q+3+OwcV6NRkV7XOV1W2Eom2bzILeUn55pQYffjVOLAg==
-  dependencies:
-    cliui "^4.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    os-locale "^3.1.0"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.0.0"
-
 yargs@13.2.4:
   version "13.2.4"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
@@ -33399,29 +34093,27 @@ yargs@13.2.4:
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
 
-yargs@6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
-  integrity sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=
+yargs@15.3.0:
+  version "15.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.0.tgz#403af6edc75b3ae04bf66c94202228ba119f0976"
+  integrity sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==
   dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
     require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
+    require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^4.2.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.0"
 
-yargs@^13.2.2, yargs@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
-  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+yargs@^13.2.2, yargs@^13.3.0, yargs@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
   dependencies:
     cliui "^5.0.0"
     find-up "^3.0.0"
@@ -33432,12 +34124,12 @@ yargs@^13.2.2, yargs@^13.3.0:
     string-width "^3.0.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^13.1.1"
+    yargs-parser "^13.1.2"
 
 yargs@^14.0.0, yargs@^14.2.2:
-  version "14.2.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
-  integrity sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
+  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
   dependencies:
     cliui "^5.0.0"
     decamelize "^1.2.0"
@@ -33449,31 +34141,29 @@ yargs@^14.0.0, yargs@^14.2.2:
     string-width "^3.0.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^15.0.0"
+    yargs-parser "^15.0.1"
 
-yargs@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
-  integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
+yargs@^15.0.0, yargs@^15.0.2, yargs@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
   dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
     require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
+    require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^5.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.1"
 
-yargs@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
-  integrity sha1-UqzCP+7Kw0BCB47njAwAf1CF20w=
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  integrity sha1-YpmpBVsc78lp/355wdkY3Osiw2A=
   dependencies:
     camelcase "^4.1.0"
     cliui "^3.2.0"
@@ -33507,7 +34197,7 @@ yarn-or-npm@^3.0.1:
     cross-spawn "^6.0.5"
     pkg-dir "^4.2.0"
 
-yauzl@2.10.0:
+yauzl@2.10.0, yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
   integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
@@ -33515,23 +34205,26 @@ yauzl@2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yauzl@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
-  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
-  dependencies:
-    fd-slicer "~1.0.1"
-
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
   integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
 
-yn@^3.0.0:
+yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
+yorkie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yorkie/-/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9"
+  integrity sha512-jcKpkthap6x63MB4TxwCyuIGkV0oYP/YRyuQU5UO0Yz/E/ZAu+653/uov+phdmO54n6BcvFRyyt0RRrWdN2mpw==
+  dependencies:
+    execa "^0.8.0"
+    is-ci "^1.0.10"
+    normalize-path "^1.0.0"
+    strip-indent "^2.0.0"
+
 yui@^3.18.1:
   version "3.18.1"
   resolved "https://registry.yarnpkg.com/yui/-/yui-3.18.1.tgz#e000269ec0a7b6fbc741cbb8fcbd0e65117b014c"
@@ -33552,37 +34245,12 @@ yuidocjs@^0.10.2:
     rimraf "^2.4.1"
     yui "^3.18.1"
 
-yup@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7"
-  integrity sha512-v1yFnE4+u9za42gG/b/081E7uNW9mUj3qtkmelLbW5YPROZzSH/KUUyJu9Wt8vxFJcT9otL/eZopS0YK1L5yPQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    fn-name "~2.0.1"
-    lodash "^4.17.11"
-    property-expr "^1.5.0"
-    synchronous-promise "^2.0.6"
-    toposort "^2.0.2"
-
-zen-observable-ts@^0.8.6:
-  version "0.8.20"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz#44091e335d3fcbc97f6497e63e7f57d5b516b163"
-  integrity sha512-2rkjiPALhOtRaDX6pWyNqK1fnP5KkJJybYebopNSn6wDG1lxBoFs2+nwwXKoA6glHIrtwrfBBy6da0stkKtTAA==
-  dependencies:
-    tslib "^1.9.3"
-    zen-observable "^0.8.0"
-
-zen-observable@^0.8.0:
-  version "0.8.15"
-  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
-  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
-
 zone.js@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.10.2.tgz#67ca084b3116fc33fc40435e0d5ea40a207e392e"
-  integrity sha512-UAYfiuvxLN4oyuqhJwd21Uxb4CNawrq6fPS/05Su5L4G+1TN+HVDJMUHNMobVQDFJRir2cLAODXwluaOKB7HFg==
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.10.3.tgz#3e5e4da03c607c9dcd92e37dd35687a14a140c16"
+  integrity sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==
 
 zwitch@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.4.tgz#93b1b993b13c8926753a41afaf8f27bbfac6be8b"
-  integrity sha512-YO803/X+13GNaZB7fVopjvHH0uWQKgJkgKnU1YCjxShjKGVuN9PPHHW8g+uFDpkHpSTNi3rCMKMewIcbC1BAYg==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==