diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f3f5db4ef8..14ec5e5f638 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,70 @@
+## 6.4.0-beta.31 (November 10, 2021)
+
+### Features
+
+* Core: Add feature flag to stop storybook from aliasing emotion ([#16613](https://github.com/storybookjs/storybook/pull/16613))
+
+### Bug Fixes
+
+* Core: Fix `staticDirs` and `-s` conflict check ([#16649](https://github.com/storybookjs/storybook/pull/16649))
+
+### Maintenance
+
+* Build: Add node-gyp for M1 macs ([#16645](https://github.com/storybookjs/storybook/pull/16645))
+
+## 6.4.0-beta.30 (November 8, 2021)
+
+### Features
+
+- Args: Add ability to specific argType "targets" ([#16333](https://github.com/storybookjs/storybook/pull/16333))
+
+### Bug Fixes
+
+- Core: Fix sorting by `__namedExportsOrder` ([#16626](https://github.com/storybookjs/storybook/pull/16626))
+- Angular: Fix zonejs imports in framework preset ([#16631](https://github.com/storybookjs/storybook/pull/16631))
+- Core: Change CSF loading problems from warning to error ([#16632](https://github.com/storybookjs/storybook/pull/16632))
+- Core: Fix args values updated from url to control ([#16508](https://github.com/storybookjs/storybook/pull/16508))
+- CLI: Fix upgrade error state ([#16622](https://github.com/storybookjs/storybook/pull/16622))
+
+## 6.4.0-beta.29 (November 6, 2021)
+
+### Features
+
+- CSFFile: Handle re-exported stories ([#16607](https://github.com/storybookjs/storybook/pull/16607))
+
+### Bug Fixes
+
+- StoryIndex: Skip files with no default export ([#16606](https://github.com/storybookjs/storybook/pull/16606))
+- Addon-docs/Source: Fix disabling show code with null ([#16615](https://github.com/storybookjs/storybook/pull/16615))
+- Core: Handle missing websocket in production build ([#16590](https://github.com/storybookjs/storybook/pull/16590))
+- Core: Ensure we set `parameters.filePath` in v7 mode ([#16566](https://github.com/storybookjs/storybook/pull/16566))
+- Core: Fix behavior around missing stories to be more clear ([#16608](https://github.com/storybookjs/storybook/pull/16608))
+
+## 6.4.0-beta.28 (November 5, 2021)
+
+### Bug Fixes
+
+- Interactions: Fix README link ([#16596](https://github.com/storybookjs/storybook/pull/16596))
+
+## 6.4.0-beta.27 (November 4, 2021)
+
+### Features
+
+- Core: Add 'staticDirs' config option ([#15969](https://github.com/storybookjs/storybook/pull/15969))
+
+### Bug Fixes
+
+- TS: Fix type for Refs so they can be disabled ([#16582](https://github.com/storybookjs/storybook/pull/16582))
+- CLI: Add a check for source-dir in `sb extract` ([#16505](https://github.com/storybookjs/storybook/pull/16505))
+- UI: Fix links that have no onClick handler ([#16581](https://github.com/storybookjs/storybook/pull/16581))
+- Core: Continue running play function on rerender ([#16574](https://github.com/storybookjs/storybook/pull/16574))
+- Ensure we always initialize the story store, even when the index errors. ([#16537](https://github.com/storybookjs/storybook/pull/16537))
+- Interactions: Fix panel tab icon/count ([#16578](https://github.com/storybookjs/storybook/pull/16578))
+
+### Dependency Upgrades
+
+- Pin the version of `history` for `react-router-dom` compat ([#16560](https://github.com/storybookjs/storybook/pull/16560))
+
 ## 6.4.0-beta.26 (November 2, 2021)
 
 ### Bug Fixes
diff --git a/MIGRATION.md b/MIGRATION.md
index e8a52225216..845393ade0c 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -16,6 +16,8 @@
   - [Babel mode v7](#babel-mode-v7)
   - [Loader behavior with args changes](#loader-behavior-with-args-changes)
   - [Angular component parameter removed](#angular-component-parameter-removed)
+  - [6.4 deprecations](#64-deprecations)
+    - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
 - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
   - [Webpack 5](#webpack-5)
     - [Fixing hoisting issues](#fixing-hoisting-issues)
@@ -189,7 +191,7 @@ Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, i
 upgrade the configuration. You can do this automatically by running:
 
 ```
-npx sb@next fix
+npx sb@next automigrate
 ```
 
 Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
@@ -452,6 +454,29 @@ export const MyStory = () => ({ component: MyComponent, ... })
 
 [More discussion here.](https://github.com/storybookjs/storybook/pull/16010#issuecomment-917378595)
 
+### 6.4 deprecations
+
+#### Deprecated --static-dir CLI flag
+
+In 6.4 we've replaced the `--static-dir` CLI flag with the the `staticDirs` field in `.storybook/main.js`. Note that the CLI directories are relative to the current working directory, whereas the `staticDirs` are relative to the location of `main.js`.
+
+Before:
+
+```sh
+start-storybook --static-dir ./public,./static,./foo/assets:/assets
+```
+
+After:
+
+```js
+// .storybook/main.js
+module.exports = {
+  staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
+};
+```
+
+The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0.
+
 ## From version 6.2.x to 6.3.0
 
 ### Webpack 5
@@ -610,7 +635,7 @@ export const Basic = () => ({
 });
 ```
 
-The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see https://github.com/storybookjs/storybook/issues/8673.
+The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see <https://github.com/storybookjs/storybook/issues/8673>.
 
 #### New Angular renderer
 
@@ -647,7 +672,7 @@ Instead of continuing to include PostCSS inside the core library, it has been mo
 
 If you require PostCSS support, please install `@storybook/addon-postcss` in your project, add it to your list of addons inside `.storybook/main.js`, and configure a `postcss.config.js` file.
 
-Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669.
+Further information is available at <https://github.com/storybookjs/storybook/issues/12668> and <https://github.com/storybookjs/storybook/pull/13669>.
 
 If you're not using Postcss and you don't want to see the warning, you can disable it by adding the following to your `.storybook/main.js`:
 
@@ -788,7 +813,7 @@ Starting in 6.1, `react` and `react-dom` are required peer dependencies of `@sto
 Error: Cannot find module 'react-dom/package.json'
 ```
 
-They were also peer dependencies in earlier versions, but due to the package structure they would be installed by Storybook if they were not required by the user's project. For more discussion: https://github.com/storybookjs/storybook/issues/13269
+They were also peer dependencies in earlier versions, but due to the package structure they would be installed by Storybook if they were not required by the user's project. For more discussion: <https://github.com/storybookjs/storybook/issues/13269>
 
 ### 6.1 deprecations
 
@@ -817,7 +842,7 @@ console.log(unboundStoryFn(context));
 
 If you're not using loaders, `storyFn` will work as before. If you are, you'll need to use the new approach.
 
-> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in a future release. You can track the issue at https://github.com/storybookjs/storybook/issues/13074.
+> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in a future release. You can track the issue at <https://github.com/storybookjs/storybook/issues/13074>.
 
 #### Deprecated onBeforeRender
 
@@ -2287,16 +2312,16 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
 
 ### Storyshots Changes
 
-1.  `imageSnapshot` test function was extracted from `addon-storyshots`
-    and moved to a new package - `addon-storyshots-puppeteer` that now will
-    be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
-2.  `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
-    class that now can be overridden for a custom implementation of the
-    snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
-3.  Storybook that was configured with Webpack's `require.context()` feature
-    will need to add a babel plugin to polyfill this functionality.
-    A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
-    [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
+1. `imageSnapshot` test function was extracted from `addon-storyshots`
+   and moved to a new package - `addon-storyshots-puppeteer` that now will
+   be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
+2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
+   class that now can be overridden for a custom implementation of the
+   snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
+3. Storybook that was configured with Webpack's `require.context()` feature
+   will need to add a babel plugin to polyfill this functionality.
+   A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
+   [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
 
 ### Webpack 4
 
@@ -2307,9 +2332,11 @@ Storybook now uses webpack 4. If you have a [custom webpack config](https://stor
 Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
 
 - If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
+
   ```
   npm i -D @babel/core babel-loader@next
   ```
+
 - If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory.
 
 ### Create-react-app
@@ -2560,11 +2587,14 @@ If you **are** using these addons, it takes two steps to migrate:
 - add the addons you use to your `package.json`.
 - update your code:
   change `addons.js` like so:
+
   ```js
   import '@storybook/addon-actions/register';
   import '@storybook/addon-links/register';
   ```
+
   change `x.story.js` like so:
+
   ```js
   import React from 'react';
   import { storiesOf } from '@storybook/react';
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 4d643ba5536..45915f73bc3 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",
diff --git a/addons/actions/package.json b/addons/actions/package.json
index ee770643a1b..6985c87be63 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -41,12 +41,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index f5c7d37acab..068d91ff2eb 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -77,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",
diff --git a/addons/controls/package.json b/addons/controls/package.json
index 4fe9a7a9fe4..2a656a7e6c7 100644
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "lodash": "^4.17.20",
     "ts-dedent": "^2.0.0"
@@ -73,7 +73,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Controls",
diff --git a/addons/docs/package.json b/addons/docs/package.json
index d263ed8be2e..d00cedc9a8b 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -63,21 +63,21 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/postinstall": "6.4.0-beta.26",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/source-loader": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/csf-tools": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/postinstall": "6.4.0-beta.31",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/source-loader": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -106,11 +106,11 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.4.0-beta.26",
-    "@storybook/html": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/vue": "6.4.0-beta.26",
-    "@storybook/web-components": "6.4.0-beta.26",
+    "@storybook/angular": "6.4.0-beta.31",
+    "@storybook/html": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/vue": "6.4.0-beta.31",
+    "@storybook/web-components": "6.4.0-beta.31",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -140,12 +140,12 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.4.0-beta.26",
-    "@storybook/html": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/vue": "6.4.0-beta.26",
-    "@storybook/vue3": "6.4.0-beta.26",
-    "@storybook/web-components": "6.4.0-beta.26",
+    "@storybook/angular": "6.4.0-beta.31",
+    "@storybook/html": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/vue": "6.4.0-beta.31",
+    "@storybook/vue3": "6.4.0-beta.31",
+    "@storybook/web-components": "6.4.0-beta.31",
     "lit": "^2.0.0-rc.1",
     "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
@@ -202,7 +202,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",
diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
index 2fa59005525..29e81215ae8 100644
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@@ -69,7 +69,7 @@ const getSnippet = (snippet: string, story?: Story<any>): string => {
 
   // if user has hard-coded the snippet, that takes precedence
   const userCode = parameters.docs?.source?.code;
-  if (userCode) {
+  if (userCode !== undefined) {
     return userCode;
   }
 
diff --git a/addons/essentials/package.json b/addons/essentials/package.json
index f8dae2dcd2c..7ea25c5bc7c 100644
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -39,31 +39,31 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-measure": "6.4.0-beta.26",
-    "@storybook/addon-outline": "6.4.0-beta.26",
-    "@storybook/addon-toolbars": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-measure": "6.4.0-beta.31",
+    "@storybook/addon-outline": "6.4.0-beta.31",
+    "@storybook/addon-toolbars": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.4.0-beta.26",
+    "@storybook/vue": "6.4.0-beta.31",
     "@types/jest": "^26.0.16",
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.4.0-beta.26",
-    "@storybook/web-components": "6.4.0-beta.26",
+    "@storybook/vue": "6.4.0-beta.31",
+    "@storybook/web-components": "6.4.0-beta.31",
     "babel-loader": "^8.0.0",
     "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
@@ -93,6 +93,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/addons/interactions/README.md b/addons/interactions/README.md
index 680d48e6bef..d3687e084f3 100644
--- a/addons/interactions/README.md
+++ b/addons/interactions/README.md
@@ -22,6 +22,19 @@ module.exports = {
 
 Note that `@storybook/addon-interactions` must be listed **after** `@storybook/addon-actions` or `@storybook/addon-essentials`.
 
+## Experimental step debugging
+
+Step debugging features are experimental and disabled by default. To enable them:
+
+```js
+// main.js
+module.exports = {
+  features: {
+    interactionsDebugger: true,
+  },
+};
+```
+
 ## Usage
 
 Interactions relies on "instrumented" versions of Jest and Testing Library, that you import from `@storybook/jest` and
@@ -43,8 +56,8 @@ export const Demo = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
     await expect(args.onClick).toHaveBeenCalled();
-  }
-}
+  },
+};
 ```
 
 In order to enable step-through debugging, calls to `userEvent.*`, `fireEvent`, `findBy*`, `waitFor*` and `expect` have to
diff --git a/addons/interactions/package.json b/addons/interactions/package.json
index 562179c9a72..b8b0099bb0c 100644
--- a/addons/interactions/package.json
+++ b/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -41,14 +41,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/instrumenter": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/instrumenter": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.0.5",
@@ -74,7 +74,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Interactions",
diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index 266a9212b80..8b21f905059 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -19,7 +19,6 @@ interface AddonPanelProps {
 
 interface InteractionsPanelProps {
   active: boolean;
-  showTabIcon?: boolean;
   interactions: (Call & { state?: CallStates })[];
   isDisabled?: boolean;
   hasPrevious?: boolean;
@@ -45,9 +44,13 @@ const TabIcon = styled(StatusIcon)({
   marginLeft: 5,
 });
 
+const TabStatus = ({ children }: { children: React.ReactChild }) => {
+  const container = global.document.getElementById('tabbutton-interactions');
+  return container && ReactDOM.createPortal(children, container);
+};
+
 export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
   ({
-    showTabIcon,
     interactions,
     isDisabled,
     hasPrevious,
@@ -65,57 +68,50 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
     endRef,
     isDebuggingEnabled,
     ...panelProps
-  }) => {
-    return (
-      <AddonPanel {...panelProps}>
-        {showTabIcon &&
-          ReactDOM.createPortal(
-            <TabIcon status={hasException ? CallStates.ERROR : CallStates.ACTIVE} />,
-            global.document.getElementById('tabbutton-interactions')
-          )}
-        {isDebuggingEnabled && interactions.length > 0 && (
-          <Subnav
-            isDisabled={isDisabled}
-            hasPrevious={hasPrevious}
-            hasNext={hasNext}
-            storyFileName={fileName}
-            status={
-              // eslint-disable-next-line no-nested-ternary
-              isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
-            }
-            onStart={onStart}
-            onPrevious={onPrevious}
-            onNext={onNext}
-            onEnd={onEnd}
-            onScrollToEnd={onScrollToEnd}
-          />
-        )}
-        {interactions.map((call) => (
-          <Interaction
-            key={call.id}
-            call={call}
-            callsById={calls}
-            isDebuggingEnabled={isDebuggingEnabled}
-            isDisabled={isDisabled}
-            onClick={() => onInteractionClick(call.id)}
-          />
-        ))}
-        <div ref={endRef} />
-        {!isPlaying && interactions.length === 0 && (
-          <Placeholder>
-            No interactions found
-            <Link
-              href="https://storybook.js.org/docs/react/essentials/interactions"
-              target="_blank"
-              withArrow
-            >
-              Learn how to add interactions to your story
-            </Link>
-          </Placeholder>
-        )}
-      </AddonPanel>
-    );
-  }
+  }) => (
+    <AddonPanel {...panelProps}>
+      {isDebuggingEnabled && interactions.length > 0 && (
+        <Subnav
+          isDisabled={isDisabled}
+          hasPrevious={hasPrevious}
+          hasNext={hasNext}
+          storyFileName={fileName}
+          status={
+            // eslint-disable-next-line no-nested-ternary
+            isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
+          }
+          onStart={onStart}
+          onPrevious={onPrevious}
+          onNext={onNext}
+          onEnd={onEnd}
+          onScrollToEnd={onScrollToEnd}
+        />
+      )}
+      {interactions.map((call) => (
+        <Interaction
+          key={call.id}
+          call={call}
+          callsById={calls}
+          isDebuggingEnabled={isDebuggingEnabled}
+          isDisabled={isDisabled}
+          onClick={() => onInteractionClick(call.id)}
+        />
+      ))}
+      <div ref={endRef} />
+      {!isPlaying && interactions.length === 0 && (
+        <Placeholder>
+          No interactions found
+          <Link
+            href="https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md"
+            target="_blank"
+            withArrow
+          >
+            Learn how to add interactions to your story
+          </Link>
+        </Placeholder>
+      )}
+    </AddonPanel>
+  )
 );
 
 export const Panel: React.FC<AddonPanelProps> = (props) => {
@@ -156,6 +152,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
 
   const isDebuggingEnabled = FEATURES.interactionsDebugger === true;
 
+  const showStatus = log.length > 0 && !isPlaying;
   const isDebugging = log.some((item) => pendingStates.includes(item.state));
   const hasPrevious = log.some((item) => completedStates.includes(item.state));
   const hasNext = log.some((item) => item.state === CallStates.WAITING);
@@ -165,8 +162,6 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
     ? hasActive || isLocked || (isPlaying && !isDebugging)
     : true;
 
-  const showTabIcon = isDebugging || (!isPlaying && hasException);
-
   const onStart = React.useCallback(() => emit(EVENTS.START, { storyId }), [storyId]);
   const onPrevious = React.useCallback(() => emit(EVENTS.BACK, { storyId }), [storyId]);
   const onNext = React.useCallback(() => emit(EVENTS.NEXT, { storyId }), [storyId]);
@@ -177,25 +172,30 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   );
 
   return (
-    <AddonPanelPure
-      showTabIcon={showTabIcon}
-      interactions={interactions}
-      isDisabled={isDisabled}
-      hasPrevious={hasPrevious}
-      hasNext={hasNext}
-      fileName={fileName}
-      hasException={hasException}
-      isPlaying={isPlaying}
-      calls={calls.current}
-      endRef={endRef}
-      isDebuggingEnabled={isDebuggingEnabled}
-      onStart={onStart}
-      onPrevious={onPrevious}
-      onNext={onNext}
-      onEnd={onEnd}
-      onInteractionClick={onInteractionClick}
-      onScrollToEnd={scrollTarget && scrollToTarget}
-      {...props}
-    />
+    <React.Fragment key="interactions">
+      <TabStatus>
+        {showStatus &&
+          (hasException ? <TabIcon status={CallStates.ERROR} /> : ` (${interactions.length})`)}
+      </TabStatus>
+      <AddonPanelPure
+        interactions={interactions}
+        isDisabled={isDisabled}
+        hasPrevious={hasPrevious}
+        hasNext={hasNext}
+        fileName={fileName}
+        hasException={hasException}
+        isPlaying={isPlaying}
+        calls={calls.current}
+        endRef={endRef}
+        isDebuggingEnabled={isDebuggingEnabled}
+        onStart={onStart}
+        onPrevious={onPrevious}
+        onNext={onNext}
+        onEnd={onEnd}
+        onInteractionClick={onInteractionClick}
+        onScrollToEnd={scrollTarget && scrollToTarget}
+        {...props}
+      />
+    </React.Fragment>
   );
 };
diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index cf3ffc6a4e9..962f09543db 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -8,7 +8,11 @@ import { AccountForm } from './AccountForm';
 export default {
   title: 'Addons/Interactions/AccountForm',
   component: AccountForm,
-  parameters: { layout: 'centered', theme: 'light' },
+  parameters: {
+    layout: 'centered',
+    theme: 'light',
+    options: { selectedPanel: 'storybook/interactions/panel' },
+  },
   argTypes: {
     onSubmit: { action: true },
   },
@@ -58,15 +62,11 @@ export const StandardEmailFailed: CSF3Story = {
   ...Standard,
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByTestId('email'), 'me');
-    await userEvent.type(canvas.getByTestId('password1'), 'helloyou');
+    await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
+    await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
     await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
 
-    await canvas.findByText(
-      'Please enter a correctly formatted email address',
-      {},
-      { timeout: 2000 }
-    );
+    await canvas.findByText('Please enter a correctly formatted email address');
     expect(args.onSubmit).not.toHaveBeenCalled();
   },
 };
diff --git a/addons/interactions/src/components/StatusIcon/StatusIcon.tsx b/addons/interactions/src/components/StatusIcon/StatusIcon.tsx
index d7b0c843eb7..9aed8af4df2 100644
--- a/addons/interactions/src/components/StatusIcon/StatusIcon.tsx
+++ b/addons/interactions/src/components/StatusIcon/StatusIcon.tsx
@@ -31,12 +31,19 @@ const StyledStatusIcon = styled(Icons)<StatusIconProps>(({ theme, status }) => {
   };
 });
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+export const StatusIcon: React.FC<StatusIconProps> = ({ status, className }) => {
   const icon = {
     [CallStates.DONE]: 'check',
     [CallStates.ERROR]: 'stopalt',
     [CallStates.ACTIVE]: 'play',
     [CallStates.WAITING]: 'circle',
   }[status] as IconsProps['icon'];
-  return <StyledStatusIcon data-testid={`icon-${status}`} status={status} icon={icon} />;
+  return (
+    <StyledStatusIcon
+      data-testid={`icon-${status}`}
+      status={status}
+      icon={icon}
+      className={className}
+    />
+  );
 };
diff --git a/addons/jest/package.json b/addons/jest/package.json
index f7a1e7dc551..e603c31f409 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -47,11 +47,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
@@ -76,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Jest",
diff --git a/addons/links/package.json b/addons/links/package.json
index 9238880239e..8027c2e22f1 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -41,11 +41,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/router": "6.4.0-beta.26",
+    "@storybook/router": "6.4.0-beta.31",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,7 +72,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Links",
diff --git a/addons/measure/package.json b/addons/measure/package.json
index a652b35a283..93e338ccbe3 100644
--- a/addons/measure/package.json
+++ b/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -44,11 +44,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
@@ -71,7 +71,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Measure",
diff --git a/addons/outline/package.json b/addons/outline/package.json
index 51c92676d09..bfdb8ddaf07 100644
--- a/addons/outline/package.json
+++ b/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -47,11 +47,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -76,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Outline",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index a292d35ca39..67bcacdf0f7 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -45,11 +45,11 @@
   },
   "dependencies": {
     "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-client": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-client": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
@@ -69,11 +69,11 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/angular": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/vue": "6.4.0-beta.26",
-    "@storybook/vue3": "6.4.0-beta.26",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/angular": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/vue": "6.4.0-beta.31",
+    "@storybook/vue3": "6.4.0-beta.31",
     "babel-loader": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
@@ -151,7 +151,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "storybook": {
     "displayName": "Storyshots",
     "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 79252e39962..58223364919 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": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "@types/jest-image-snapshot": "^4.1.3",
     "core-js": "^3.8.2",
     "jest-image-snapshot": "^4.3.0",
@@ -53,7 +53,7 @@
     "@types/puppeteer": "^5.4.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
     "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
 }
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index f2848ae1f87..ae0a90d839d 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -41,13 +41,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/router": "6.4.0-beta.26",
-    "@storybook/source-loader": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/router": "6.4.0-beta.31",
+    "@storybook/source-loader": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
@@ -75,7 +75,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Storysource",
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
index 02f7c161206..a7fcc7ea221 100644
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -45,10 +45,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
@@ -67,7 +67,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Toolbars",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index ef42c36a8f7..1f3d9078d3e 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -42,12 +42,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -69,7 +69,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/preview.js",
   "storybook": {
     "displayName": "Viewport",
diff --git a/app/angular/package.json b/app/angular/package.json
index 0c26c6622d0..4e49217f709 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "autoprefixer": "^9.8.6",
     "core-js": "^3.8.2",
@@ -131,5 +131,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
 }
diff --git a/app/angular/src/client/preview/config.ts b/app/angular/src/client/preview/config.ts
index f6f8d190dc7..4f80f032131 100644
--- a/app/angular/src/client/preview/config.ts
+++ b/app/angular/src/client/preview/config.ts
@@ -1,3 +1,5 @@
+import './globals';
+
 export { render, renderToDOM } from './render';
 export { decorateStory } from './decorateStory';
 
diff --git a/app/ember/package.json b/app/ember/package.json
index f42f4c3e2a0..554914f4e00 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
   "bugs": {
@@ -43,9 +43,9 @@
   },
   "dependencies": {
     "@ember/test-helpers": "^2.1.4",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -66,6 +66,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/html/package.json b/app/html/package.json
index e35b2597b13..1934e5d6c55 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -71,6 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/preact/package.json b/app/preact/package.json
index 6417c8143cc..72626ae100e 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -74,6 +74,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/react/package.json b/app/react/package.json
index ac9899e468e..38e879971bf 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,14 +49,14 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
@@ -73,7 +73,7 @@
     "webpack": "4"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-beta.26",
+    "@storybook/client-api": "6.4.0-beta.31",
     "@types/node": "^14.14.20",
     "@types/prompts": "^2.0.9"
   },
@@ -96,6 +96,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx
index d006aa4fdf3..1a5e10e556b 100644
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@@ -15,12 +15,14 @@ import { ReactFramework } from './types-6-0';
 
 const { FRAMEWORK_OPTIONS } = global;
 
-export const render: ArgsStoryFn<ReactFramework> = (args, { id, component: Component }) => {
+export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
+  const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
       `Unable to render story ${id} as the component annotation is missing from the default export`
     );
   }
+
   return <Component {...args} />;
 };
 
diff --git a/app/server/README.md b/app/server/README.md
index f4762564b70..3421377c873 100644
--- a/app/server/README.md
+++ b/app/server/README.md
@@ -130,7 +130,7 @@ Static parameters can be defined using the `params` story parameter. For example
 }
 ```
 
-The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stopr` and `server.url/controls/button?color=green&label=OK`
+The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK`
 
 Like all story parameters server params can be defined in the default export and overridden in stories.
 
diff --git a/app/server/package.json b/app/server/package.json
index ab86dace737..137dd24cec6 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -75,6 +75,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/svelte/package.json b/app/svelte/package.json
index f73b0153cbc..30165f2ace4 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,11 +45,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -75,6 +75,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue/package.json b/app/vue/package.json
index e799667e022..ddcb0c54d97 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,11 +45,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -83,6 +83,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue3/package.json b/app/vue3/package.json
index 5dc74b1dfe9..35eeafa5188 100644
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,11 +45,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,6 +81,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/web-components/package.json b/app/web-components/package.json
index a10405960e7..4b43f2d54e3 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
@@ -50,13 +50,13 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "babel-plugin-bundled-import-meta": "^0.3.1",
     "core-js": "^3.8.2",
@@ -79,6 +79,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 0a22c6a2203..1011f5c4a1e 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -18,7 +18,7 @@ Usage: start-storybook [options]
 | -V, --version                      | Output the version number                                                                                                                      | `start-storybook -V`                                      |
 | -p, --port [number]                | Port to run Storybook                                                                                                                          | `start-storybook -p 9009`                                 |
 | -h, --host [string]                | Host to run Storybook                                                                                                                          | `start-storybook -h my-host.com`                          |
-| -s, --static-dir `<dir-names>`     | Directory where to load static files from, comma-separated list                                                                                | `start-storybook -s public`                               |
+| -s, --static-dir `<dir-names>`     | **[DEPRECATED]** Directory where to load static files from, comma-separated list                                                               | `start-storybook -s public`                               |
 | -c, --config-dir [dir-name]        | Directory where to load Storybook configurations from                                                                                          | `start-storybook -c .storybook`                           |
 | --https                            | Serve Storybook over HTTPS. Note: You must provide your own certificate information.                                                           | `start-storybook --https`                                 |
 | --ssl-ca `<ca>`                    | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)                                     | `start-storybook --ssl-ca my-certificate`                 |
@@ -26,7 +26,7 @@ Usage: start-storybook [options]
 | --ssl-key `<key>`                  | Provide an SSL key. (Required with --https)                                                                                                    | `start-storybook --ssl-key my-ssl-key`                    |
 | --smoke-test                       | Exit after successful start                                                                                                                    | `start-storybook --smoke-test`                            |
 | --ci                               | CI mode (skip interactive prompts, don't open browser)                                                                                         | `start-storybook --ci`                                    |
-| --no-open                          | Do not open Storybook automatically in the browser                                                                                            | `start-storybook --no-open`                               |
+| --no-open                          | Do not open Storybook automatically in the browser                                                                                             | `start-storybook --no-open`                               |
 | --quiet                            | Suppress verbose build output                                                                                                                  | `start-storybook --quiet`                                 |
 | --no-dll                           | Do not use dll reference (no-op)                                                                                                               | `start-storybook --no-dll`                                |
 | --debug-webpack                    | Display final webpack configurations for debugging purposes                                                                                    | `start-storybook --debug-webpack`                         |
@@ -44,19 +44,19 @@ Usage: start-storybook [options]
 Usage: build-storybook [options]
 ```
 
-| Options                            | Description                                                                                                                                     | Example                                                   |
-| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
-| -h, --help                         | Output usage information                                                                                                                        | `build-storybook --help`                                  |
-| -V, --version                      | Output the version number                                                                                                                       | `build-storybook -V`                                      |
-| -s, --static-dir `<dir-names>`     | Directory where to load static files from, comma-separated list                                                                                 | `build-storybook -s public`                               |
-| -o, --output-dir [dir-name]        | Directory where to store built files                                                                                                            | `build-storybook -o /my-deployed-storybook`               |
-| -c, --config-dir [dir-name]        | Directory where to load Storybook configurations from                                                                                           | `build-storybook -c .storybook`                           |
-| --loglevel [level]                 | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]                                    | `build-storybook --loglevel warn`                         |
-| --quiet                            | Suppress verbose build output                                                                                                                   | `build-storybook --quiet`                                 |
-| --no-dll                           | Do not use dll reference (no-op)                                                                                                                | `build-storybook --no-dll`                                |
-| --debug-webpack                    | Display final webpack configurations for debugging purposes                                                                                     | `build-storybook --debug-webpack`                         |
+| Options                            | Description                                                                                                                                     | Example                                                            |
+| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- |
+| -h, --help                         | Output usage information                                                                                                                        | `build-storybook --help`                                           |
+| -V, --version                      | Output the version number                                                                                                                       | `build-storybook -V`                                               |
+| -s, --static-dir `<dir-names>`     | **[DEPRECATED]** Directory where to load static files from, comma-separated list                                                                | `build-storybook -s public`                                        |
+| -o, --output-dir [dir-name]        | Directory where to store built files                                                                                                            | `build-storybook -o /my-deployed-storybook`                        |
+| -c, --config-dir [dir-name]        | Directory where to load Storybook configurations from                                                                                           | `build-storybook -c .storybook`                                    |
+| --loglevel [level]                 | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]                                    | `build-storybook --loglevel warn`                                  |
+| --quiet                            | Suppress verbose build output                                                                                                                   | `build-storybook --quiet`                                          |
+| --no-dll                           | Do not use dll reference (no-op)                                                                                                                | `build-storybook --no-dll`                                         |
+| --debug-webpack                    | Display final webpack configurations for debugging purposes                                                                                     | `build-storybook --debug-webpack`                                  |
 | `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk                                                                                                                | `build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
-| --docs                             | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs`                                  |
+| --docs                             | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs`                                           |
 
 <div class="aside">
 💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 0ecc8b4e807..a680ed3a8a2 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -30,27 +30,27 @@ Afterwards you can use any asset in your stories:
 
 <!-- prettier-ignore-end -->
 
-### Serving static files via Storybook
+### Serving static files via Storybook Configuration
 
 We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. This technique is recommended for assets that your components often use like logos, fonts, and icons.
 
-Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so:
+Configure a directory (or a list of directories) where your assets live in your Storybook configuration. Use the `staticDirs` property in your `main.js` or `main.ts` configuration file like so:
 
-```json
+```js
 {
-  "scripts": {
-    "start-storybook": "start-storybook -s ./public -p 9001"
-  }
+  ...
+  staticDirs: ['./public'];
+  ...
 }
 ```
 
-Or when building your Storybook with `build-storybook`:
+You can map your local static directories to a different path like this:
 
-```json
+```js
 {
-  "scripts": {
-    "build-storybook": "build-storybook -s public"
-  }
+  ...
+  staticDirs: [{ from: './public', to: '/assets' }];
+  ...
 }
 ```
 
@@ -76,23 +76,33 @@ Here `./public` is your static directory. Now use it in a component or story lik
 
 You can also pass a list of directories separated by commas without spaces instead of a single directory.
 
-```json
+```js
 {
-  "scripts": {
-    "start-storybook": "start-storybook -s ./public,./static -p 9001"
-  }
+  ...
+  staticDirs: ['./public', './statics'];
+  ...
 }
 ```
-The same can be applied when you're building your Storybook.
 
-```json
+Or you can map each of them to different paths:
+
+You can map your local static directories to a different path like this:
+
+```js
 {
-  "scripts": {
-    "build-storybook": "build-storybook -s ./public,./static -p 9001"
-  }
+  ...
+  staticDirs: [
+    { from: './public', to: '/assets' },
+    { from: './statics', to: '/resources' }
+  ];
+  ...
 }
 ```
 
+### **[⚠️ Deprecated]** Serving static files via Storybook CLI
+
+Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is recommended to use [Storybook static directory configuration option](#serving-static-files-via-storybook-configuration) instead.
+
 ### Reference assets from a CDN
 
 Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service.
@@ -123,4 +133,4 @@ In this case, you need to have all your images and media files with relative pat
 
 If you load static content via importing, this is automatic and you do not have to do anything.
 
-If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
\ No newline at end of file
+If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
diff --git a/docs/essentials/addon-interactions-installed-registered.png b/docs/essentials/addon-interactions-installed-registered.png
new file mode 100644
index 00000000000..f61c71c770e
Binary files /dev/null and b/docs/essentials/addon-interactions-installed-registered.png differ
diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md
new file mode 100644
index 00000000000..a7dba42aceb
--- /dev/null
+++ b/docs/essentials/interactions.md
@@ -0,0 +1,65 @@
+---
+title: 'Interactions'
+---
+
+The `play` function in Storybook allows you to simulate user interactions to run after a story renders. With the Interactions addon, you have a way to visualize and debug these interactions. 
+
+## Play function for interactions
+
+Stories isolate and capture component states in a structured manner. While developing a component, you can quickly cycle through the stories to verify the look and feel. Each story specifies all the inputs required to reproduce a specific state. You can even mock context and API calls. That allows you to handle most use cases of a component. But what about states that require user interaction?
+
+For example, clicking a button to open/close a dialog box, dragging a list item to reorder it or filling out a form to check for validation errors. To test those behaviours, you have to interact with the components as a user would. Interactive stories enable you to automate these interactions using a play function. These are small snippets of code that script out the exact steps a human would take to interact with the component. It's then executed as soon as the story is rendered.
+
+### Powered by Testing Library and Jest
+
+The interactions are written using a Storybook-instrumented versions of Testing Library and Jest. That gives you a familiar developer-friendly syntax to interact with the DOM and make assertions, but with extra telemetry to help with debugging.
+
+## Installation
+
+Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.
+
+```shell
+yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-library
+```
+
+Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-interactions-addon-registration.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+⚠️ <strong>Note</strong>: Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
+</div>
+
+Now when you run Storybook the Interactions addon will be enabled.
+
+![Storybook Interactions installed and registered](./storybook-interactions-installed-registered.png)
+
+## Writing interactions
+
+Interactions run as part of the `play` function on your stories. We rely on Testing Library to do the heavy lifting.
+
+Make sure to import the Storybook wrappers for Jest and Testing Library rather than importing Jest and Testing Library directly.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-interactions-play-function.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+The above example uses the `canvasElement` to scope your element queries to the current story. This is important if you want your play functions to eventually be compatible with Storybook Docs, which renders multiple components on the same page.
+
+While you can refer to the [Testing Library documentation](https://testing-library.com/docs/) for details on how to use it, there's an important detail that's different when using the Storybook wrapper: **method invocations must be `await`-ed**. This allows you to step back and forth through your interactions using the debugger.
+
+Any `args` that have been marked as an Action, either using the [argTypes annotation](./actions.md#action-argtype-annotation) or the [argTypesRegex](./actions.md#automatically-matching-args), will be automatically converted to a [Jest mock function](https://jestjs.io/docs/mock-function-api) (spy). This allows you to make assertions about calls to these functions.
diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
index 8341dc81cf1..8297d30fa51 100644
--- a/docs/get-started/installation-problems/preact.mdx
+++ b/docs/get-started/installation-problems/preact.mdx
@@ -1,2 +1,2 @@
-- You can also setup Storybook manually through the Storybook CLI. Add the `--type mithril` flag when you initialize Storybook in your project.
+- You can also setup Storybook manually through the Storybook CLI. Add the `--type preact` flag when you initialize Storybook in your project.
 - If there's an installation problem, check the [README for the Preact framework](../../app/preact/README.md).
diff --git a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx
new file mode 100644
index 00000000000..3cdcdfec05e
--- /dev/null
+++ b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+  stories: [],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-interactions', // 👈 Register the addon
+  ],
+};
+```
diff --git a/docs/snippets/common/storybook-interactions-play-function.js.mdx b/docs/snippets/common/storybook-interactions-play-function.js.mdx
new file mode 100644
index 00000000000..b449defce27
--- /dev/null
+++ b/docs/snippets/common/storybook-interactions-play-function.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyForm.stories.js
+import { expect } from '@storybook/jest';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { MyForm } from './MyForm'
+
+export default {
+  title: 'MyForm',
+  component: MyForm,
+  argTypes: {
+    onSubmit: { action: true },
+  },
+};
+
+const Template = (args) => <MyForm {...args} />;
+
+const Submitted = Template.bind({});
+Submitted.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
+  await userEvent.type(canvas.getByTestId('password'), 'supersecret');
+  await userEvent.click(canvas.getByRole('button'));
+
+  await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
+};
+```
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 496bb7645ad..3ebe4fc08c5 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"6.4.0-beta.26","info":{"plain":"### Bug Fixes\n\n- Core: Replace SSE with websockets ([#16504](https://github.com/storybookjs/storybook/pull/16504))\n- UI: Upgrade react-router ([#16554](https://github.com/storybookjs/storybook/pull/16554))\n- Addon-docs/HTML: Fix source snippetization for DOM elements ([#16553](https://github.com/storybookjs/storybook/pull/16553))"}}
\ No newline at end of file
+{"version":"6.4.0-beta.31","info":{"plain":"### Features\n\n* Core: Add feature flag to stop storybook from aliasing emotion ([#16613](https://github.com/storybookjs/storybook/pull/16613))\n\n### Bug Fixes\n\n* Core: Fix `staticDirs` and `-s` conflict check ([#16649](https://github.com/storybookjs/storybook/pull/16649))\n\n### Maintenance\n\n* Build: Add node-gyp for M1 macs ([#16645](https://github.com/storybookjs/storybook/pull/16645))"}}
\ No newline at end of file
diff --git a/docs/workflows/storybook-composition.md b/docs/workflows/storybook-composition.md
index 06a03c6dff4..ee7596641f1 100644
--- a/docs/workflows/storybook-composition.md
+++ b/docs/workflows/storybook-composition.md
@@ -64,7 +64,7 @@ You can also compose Storybooks based on the current development environment. Fo
 
 ### Improve your Storybook composition
 
-So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow:
+So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
 
 ```shell
 npx sb extract
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index efadbeac44a..0357685dd98 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -39,4 +39,5 @@ module.exports = {
       url: 'https://storybookjs.netlify.app/cra-ts-essentials',
     },
   },
+  staticDirs: ['../src/assets'],
 };
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 95a70847e17..05d10d47d2d 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,16 +1,16 @@
 {
   "name": "angular-cli",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "license": "MIT",
   "scripts": {
     "build": "ng build",
-    "build-storybook": "yarn storybook-prebuild && build-storybook -s src/assets",
+    "build-storybook": "yarn storybook-prebuild && build-storybook",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "yarn storybook-prebuild && start-storybook -p 9008 -s src/assets --no-manager-cache",
+    "storybook": "yarn storybook-prebuild && start-storybook -p 9008 --no-manager-cache",
     "storybook-prebuild": "yarn test:generate-output && yarn docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
@@ -39,20 +39,20 @@
     "@angular/compiler-cli": "^11.2.14",
     "@angular/elements": "^11.2.14",
     "@compodoc/compodoc": "^1.1.14",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-interactions": "6.4.0-beta.26",
-    "@storybook/addon-jest": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/angular": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-interactions": "6.4.0-beta.31",
+    "@storybook/addon-jest": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/angular": "6.4.0-beta.31",
     "@storybook/jest": "^0.0.2",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "@storybook/testing-library": "^0.0.3",
     "@types/core-js": "^2.5.4",
     "@types/jest": "^26.0.16",
diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
index cefc73a0fe2..0179e07dd64 100644
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@@ -33,4 +33,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index d1656493ba6..2a2f0850837 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,17 +1,17 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9010 -s public --no-manager-cache",
+    "storybook": "start-storybook -p 9010 --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "react": "16.14.0",
@@ -21,19 +21,19 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-jest": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
+    "@storybook/addon-jest": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js
index 520bcd3a706..76fdcb43fa9 100644
--- a/examples/cra-react15/.storybook/main.js
+++ b/examples/cra-react15/.storybook/main.js
@@ -21,4 +21,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 6e160804e7c..f42376d03a4 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,13 +1,13 @@
 {
   "name": "cra-react15",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
+    "storybook": "start-storybook -p 9009 --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
@@ -19,14 +19,14 @@
     "react-scripts": "3.4.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.4.0-beta.26",
+    "@storybook/addon-actions": "6.4.0-beta.31",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "babel-core": "6",
     "babel-runtime": "6",
     "webpack": "4"
diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.js
index 630d249ef46..2ddcf7a8e5b 100644
--- a/examples/cra-ts-essentials/.storybook/main.js
+++ b/examples/cra-ts-essentials/.storybook/main.js
@@ -25,4 +25,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index 8f4993817a9..f1c50a262be 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,13 +1,13 @@
 {
   "name": "cra-ts-essentials",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
+    "storybook": "start-storybook -p 9009 --no-manager-cache",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -34,12 +34,12 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.4.0-beta.26",
+    "@storybook/addon-essentials": "6.4.0-beta.31",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-beta.26",
+    "@storybook/react": "6.4.0-beta.31",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
index f0c7ca3dc3c..2f33809ea75 100644
--- a/examples/cra-ts-kitchen-sink/.storybook/main.ts
+++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -29,4 +29,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 04ccd02332e..2338b932779 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,13 +1,13 @@
 {
   "name": "cra-ts-kitchen-sink",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
+    "storybook": "start-storybook -p 9009 --no-manager-cache",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -34,15 +34,15 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-beta.26",
+    "@storybook/react": "6.4.0-beta.31",
     "@types/enzyme": "^3.10.8",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.9.1",
diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js
index 46578f66d04..a1eb7ba54fa 100644
--- a/examples/ember-cli/.storybook/main.js
+++ b/examples/ember-cli/.storybook/main.js
@@ -29,4 +29,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../ember-output'],
 };
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 136056930ec..08853858c98 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,14 +1,14 @@
 {
   "name": "ember-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "ember build --output-path ember-output",
-    "build-storybook": "yarn storybook-prebuild && build-storybook -s ember-output",
+    "build-storybook": "yarn storybook-prebuild && build-storybook",
     "dev": "ember serve",
-    "storybook": "yarn build && start-storybook -p 9009 -s ember-output --no-manager-cache",
+    "storybook": "yarn build && start-storybook -p 9009 --no-manager-cache",
     "storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
-    "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
+    "storybook:dev": "yarn dev & start-storybook -p 9009"
   },
   "dependencies": {
     "ember-named-blocks-polyfill": "^0.2.3",
@@ -17,18 +17,18 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@ember/optional-features": "^2.0.0",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/ember": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/ember": "6.4.0-beta.31",
     "@storybook/ember-cli-storybook": "^0.2.1",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "babel-loader": "^8.0.0",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^7.0.3",
@@ -45,6 +45,7 @@
     "ember-resolver": "^7.0.0",
     "ember-source": "~3.24.0",
     "loader.js": "^4.7.0",
+    "shx": "^0.3.2",
     "webpack": "4",
     "webpack-cli": "^4.2.0"
   },
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index 54d01f001f6..8f4b8f1ed5c 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006 --no-manager-cache"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-jest": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-jest": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/core": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/html": "6.4.0-beta.26",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/core": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/html": "6.4.0-beta.31",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "autoprefixer": "^10.0.1",
     "eventemitter3": "^4.0.7",
     "format-json": "^1.0.3",
diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts
index d4861400a64..846261c69e7 100644
--- a/examples/official-storybook/main.ts
+++ b/examples/official-storybook/main.ts
@@ -40,6 +40,11 @@ const config: StorybookConfig = {
     modernInlineRender: true,
     interactionsDebugger: true,
   },
+  staticDirs: [
+    './statics/public',
+    { from: './statics/examples/example1', to: '/example1' },
+    { from: './statics/examples/example2', to: '/example2' },
+  ],
 };
 
 module.exports = config;
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index ce0a3d34c1a..e0103f795fe 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -14,31 +14,31 @@
   "devDependencies": {
     "@packtracker/webpack-plugin": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-interactions": "6.4.0-beta.26",
-    "@storybook/addon-jest": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-toolbars": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/cli": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-interactions": "6.4.0-beta.31",
+    "@storybook/addon-jest": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-toolbars": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/cli": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/design-system": "^5.4.7",
     "@storybook/jest": "^0.0.2",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/router": "6.4.0-beta.26",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/router": "6.4.0-beta.31",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "@storybook/testing-library": "^0.0.3",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/user-event": "^13.1.9",
     "chromatic": "^6.0.2",
diff --git a/examples/official-storybook/statics/examples/example1/example1.txt b/examples/official-storybook/statics/examples/example1/example1.txt
new file mode 100644
index 00000000000..b01a2ca4d50
--- /dev/null
+++ b/examples/official-storybook/statics/examples/example1/example1.txt
@@ -0,0 +1 @@
+example1!
\ No newline at end of file
diff --git a/examples/official-storybook/statics/examples/example2/example2.txt b/examples/official-storybook/statics/examples/example2/example2.txt
new file mode 100644
index 00000000000..760014c6d2f
--- /dev/null
+++ b/examples/official-storybook/statics/examples/example2/example2.txt
@@ -0,0 +1 @@
+example2!
\ No newline at end of file
diff --git a/examples/official-storybook/statics/public/public.txt b/examples/official-storybook/statics/public/public.txt
new file mode 100644
index 00000000000..e043990393f
--- /dev/null
+++ b/examples/official-storybook/statics/public/public.txt
@@ -0,0 +1 @@
+public!
\ No newline at end of file
diff --git a/examples/official-storybook/stories/addon-docs/source.stories.tsx b/examples/official-storybook/stories/addon-docs/source.stories.tsx
index 8fce2c7422f..e9a671086f9 100644
--- a/examples/official-storybook/stories/addon-docs/source.stories.tsx
+++ b/examples/official-storybook/stories/addon-docs/source.stories.tsx
@@ -30,3 +30,7 @@ ForceCodeSource.parameters = { docs: { source: { type: 'code' } } };
 export const CustomSource = Template.bind({});
 CustomSource.args = { ...Basic.args };
 CustomSource.parameters = { docs: { source: { code: 'custom source' } } };
+
+export const NoSource = Template.bind({});
+NoSource.args = { ...Basic.args };
+NoSource.parameters = { docs: { source: { code: null } } };
diff --git a/examples/official-storybook/stories/core/sideloaded.stories.tsx b/examples/official-storybook/stories/core/sideloaded.stories.tsx
new file mode 100644
index 00000000000..8c81d843a94
--- /dev/null
+++ b/examples/official-storybook/stories/core/sideloaded.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Component = (props: Record<string, number>) => <pre>{JSON.stringify(props)}</pre>;
+
+export default {
+  component: Component,
+  argTypes: {
+    a: { target: 'somewhere' },
+  },
+  parameters: {
+    argTypeTarget: true,
+  },
+};
+
+export const StoryOne = {
+  args: {
+    a: 1,
+    b: 2,
+    c: 3,
+  },
+};
+
+export const StoryTwo = {
+  args: {
+    a: 1,
+    b: 2,
+    c: 3,
+  },
+  argTypes: {
+    c: { target: 'somewhere' },
+  },
+};
diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js
index 8cb9b23eb71..781d93b00a9 100644
--- a/examples/preact-kitchen-sink/.storybook/main.js
+++ b/examples/preact-kitchen-sink/.storybook/main.js
@@ -24,4 +24,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 260c612ec71..eedf7610c1f 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,12 +1,12 @@
 {
   "name": "preact-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache"
+    "storybook": "start-storybook -p 9009 --no-manager-cache"
   },
   "dependencies": {
     "global": "^4.4.0",
@@ -15,16 +15,16 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/preact": "6.4.0-beta.26",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/preact": "6.4.0-beta.31",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^17",
     "@types/react-dom": "^17",
diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json
index 31a3bf822db..f8beb0117d2 100644
--- a/examples/react-ts-webpack4/package.json
+++ b/examples/react-ts-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-react-ts-webpack4",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,10 +8,10 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
   },
   "dependencies": {
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-essentials": "6.4.0-beta.26",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-essentials": "6.4.0-beta.31",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
     "prop-types": "15.7.2",
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index eccdc7535bc..1bd3d5a3f62 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -1,11 +1,12 @@
 {
   "name": "@storybook/example-react-ts",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
     "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache"
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache",
+    "sb": "node ../../lib/cli/bin/index.js"
   },
   "dependencies": {
     "formik": "^2.2.9",
@@ -17,12 +18,13 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-essentials": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/addon-essentials": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/cli": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/user-event": "^13.1.9",
     "@types/babel__preset-env": "^7",
diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx
index 2c278463d02..4f2400bb745 100644
--- a/examples/react-ts/src/button.stories.tsx
+++ b/examples/react-ts/src/button.stories.tsx
@@ -13,6 +13,7 @@ export default {
 
 export const WithArgs: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 WithArgs.args = { label: 'With args' };
+
 export const Basic = () => <Button label="Click me" />;
 
 export const StoryObject = {
@@ -36,3 +37,13 @@ CSF2StoryWithPlay.play = () => {
   console.log('play!!');
   userEvent.click(screen.getByRole('button'));
 };
+
+// eslint-disable-next-line no-underscore-dangle
+export const __namedExportsOrder = [
+  'Basic',
+  'WithArgs',
+  'StoryObject',
+  'StoryNoRender',
+  'StoryWithPlay',
+  'CSF2StoryWithPlay',
+];
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
index d0c995c47f0..2cbffbe38dd 100644
--- a/examples/server-kitchen-sink/package.json
+++ b/examples/server-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "server-kitchen-sink",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,13 +14,13 @@
     "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/server": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/server": "6.4.0-beta.31",
     "concurrently": "^5.3.0",
     "cors": "^2.8.5",
     "express": "~4.17.1",
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
index 353ce983331..32a6340801a 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,13 +1,13 @@
 {
   "name": "standalone-preview",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "storybook": "parcel ./storybook.html --port 1337"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/react": "6.4.0-beta.26",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/react": "6.4.0-beta.31",
     "parcel": "^1.12.4",
     "react": "16.14.0",
     "react-dom": "16.14.0"
diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js
index 8695b34d7d9..b916ff3157b 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.js
+++ b/examples/svelte-kitchen-sink/.storybook/main.js
@@ -36,4 +36,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index cedc8b8498f..7a2e20673f7 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,29 +1,29 @@
 {
   "name": "svelte-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
-    "build-storybook": "build-storybook -s public",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache"
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 9009 --no-manager-cache"
   },
   "dependencies": {
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-interactions": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-interactions": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
     "@storybook/jest": "^0.0.2",
-    "@storybook/source-loader": "6.4.0-beta.26",
-    "@storybook/svelte": "6.4.0-beta.26",
+    "@storybook/source-loader": "6.4.0-beta.31",
+    "@storybook/svelte": "6.4.0-beta.31",
     "@storybook/testing-library": "^0.0.3",
     "svelte-jester": "1.3.0",
     "svelte-preprocess": "4.6.8"
diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json
index e94e5a627e7..d112a849368 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-3-cli-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-essentials": "6.4.0-beta.26",
-    "@storybook/addon-interactions": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-essentials": "6.4.0-beta.31",
+    "@storybook/addon-interactions": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
     "@storybook/jest": "^0.0.2",
     "@storybook/testing-library": "^0.0.3",
-    "@storybook/vue3": "6.4.0-beta.26",
+    "@storybook/vue3": "6.4.0-beta.31",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
index 9e5d5e3e839..23a501df2fb 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -15,11 +15,11 @@
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-essentials": "6.4.0-beta.26",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-essentials": "6.4.0-beta.31",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/source-loader": "6.4.0-beta.26",
-    "@storybook/vue": "6.4.0-beta.26",
+    "@storybook/source-loader": "6.4.0-beta.31",
+    "@storybook/vue": "6.4.0-beta.31",
     "@vue/cli-plugin-babel": "~4.3.1",
     "@vue/cli-plugin-typescript": "~4.3.1",
     "@vue/cli-service": "~4.3.1",
diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.js
index 9fd4372a597..0c3697d3a9e 100644
--- a/examples/vue-kitchen-sink/.storybook/main.js
+++ b/examples/vue-kitchen-sink/.storybook/main.js
@@ -15,4 +15,5 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  staticDirs: ['../public'],
 };
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index ceab33b9b9a..8024a4659e6 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-example",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "start-storybook -p 9009 -s public --no-manager-cache"
+    "storybook": "start-storybook -p 9009 --no-manager-cache"
   },
   "dependencies": {
     "vue": "^2.6.12",
@@ -14,21 +14,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-a11y": "6.4.0-beta.26",
-    "@storybook/addon-actions": "6.4.0-beta.26",
-    "@storybook/addon-backgrounds": "6.4.0-beta.26",
-    "@storybook/addon-controls": "6.4.0-beta.26",
-    "@storybook/addon-docs": "6.4.0-beta.26",
-    "@storybook/addon-interactions": "6.4.0-beta.26",
-    "@storybook/addon-links": "6.4.0-beta.26",
-    "@storybook/addon-storyshots": "6.4.0-beta.26",
-    "@storybook/addon-storysource": "6.4.0-beta.26",
-    "@storybook/addon-viewport": "6.4.0-beta.26",
-    "@storybook/addons": "6.4.0-beta.26",
+    "@storybook/addon-a11y": "6.4.0-beta.31",
+    "@storybook/addon-actions": "6.4.0-beta.31",
+    "@storybook/addon-backgrounds": "6.4.0-beta.31",
+    "@storybook/addon-controls": "6.4.0-beta.31",
+    "@storybook/addon-docs": "6.4.0-beta.31",
+    "@storybook/addon-interactions": "6.4.0-beta.31",
+    "@storybook/addon-links": "6.4.0-beta.31",
+    "@storybook/addon-storyshots": "6.4.0-beta.31",
+    "@storybook/addon-storysource": "6.4.0-beta.31",
+    "@storybook/addon-viewport": "6.4.0-beta.31",
+    "@storybook/addons": "6.4.0-beta.31",
     "@storybook/jest": "^0.0.2",
-    "@storybook/source-loader": "6.4.0-beta.26",
+    "@storybook/source-loader": "6.4.0-beta.31",
     "@storybook/testing-library": "^0.0.3",
-    "@storybook/vue": "6.4.0-beta.26",
+    "@storybook/vue": "6.4.0-beta.31",
     "@vue/babel-preset-jsx": "^1.2.4",
     "babel-loader": "^8.0.0",
     "cross-env": "^7.0.3",
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index ccb2707a373..48caa6b152e 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": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "description": "",
   "keywords": [],
diff --git a/lerna.json b/lerna.json
index ca4d6ea5b59..986c1673d2a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "6.4.0-beta.26"
+  "version": "6.4.0-beta.31"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index a1459b2eadc..5eb315c3428 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -40,13 +40,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/router": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/router": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/public_api.js"
 }
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index 0f1f7c9cffb..4852bc835af 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -92,6 +92,8 @@ export class AddonStore {
 
   hasChannel = (): boolean => !!this.channel;
 
+  hasServerChannel = (): boolean => !!this.serverChannel;
+
   setChannel = (channel: Channel): void => {
     this.channel = channel;
     this.resolve();
diff --git a/lib/api/package.json b/lib/api/package.json
index 25f5561a9b3..daaabf7f299 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -38,13 +38,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/router": "6.4.0-beta.26",
+    "@storybook/router": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -71,6 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/api/src/modules/globals.ts b/lib/api/src/modules/globals.ts
index f766789c8fb..7f44f580386 100644
--- a/lib/api/src/modules/globals.ts
+++ b/lib/api/src/modules/globals.ts
@@ -77,7 +77,11 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
         logger.warn('received globals from a non-local ref. This is not currently supported.');
       }
 
-      if (currentGlobals && !deepEqual(globals, currentGlobals)) {
+      if (
+        currentGlobals &&
+        Object.keys(currentGlobals).length !== 0 &&
+        !deepEqual(globals, currentGlobals)
+      ) {
         api.updateGlobals(currentGlobals);
       }
     });
diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
index f8ef44a810c..654aad148fe 100644
--- a/lib/api/src/modules/stories.ts
+++ b/lib/api/src/modules/stories.ts
@@ -514,7 +514,7 @@ export const init: ModuleFn = ({
     );
 
     if (FEATURES?.storyStoreV7) {
-      provider.serverChannel.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchStoryList());
+      provider.serverChannel?.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchStoryList());
       await fullAPI.fetchStoryList();
     }
   };
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 498ea2b489d..8c225446201 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '6.4.0-beta.26';
+export const version = '6.4.0-beta.31';
diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json
index 8ef072800c7..f50e324baf7 100644
--- a/lib/builder-webpack4/package.json
+++ b/lib/builder-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack4",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -61,22 +61,22 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/channel-postmessage": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/router": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/channel-postmessage": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/router": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
-    "@storybook/ui": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
+    "@storybook/ui": "6.4.0-beta.31",
     "@types/node": "^14.0.10",
     "@types/webpack": "^4.41.26",
     "autoprefixer": "^9.8.6",
@@ -131,6 +131,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
index 8b3d54d79ce..f0d31ac1eb0 100644
--- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -238,7 +238,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: {
-        ...themingPaths,
+        ...(features?.emotionAlias ? themingPaths : {}),
         ...storybookPaths,
         react: path.dirname(require.resolve('react/package.json')),
         'react-dom': path.dirname(require.resolve('react-dom/package.json')),
diff --git a/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
index 10bf9443cb3..514bc546821 100644
--- a/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
+++ b/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
@@ -17,15 +17,17 @@ const getProjectAnnotations = () =>
 const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
-const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
-addons.setServerChannel(serverChannel);
+if (SERVER_CHANNEL_URL) {
+  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
+  addons.setServerChannel(serverChannel);
+  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+}
 
 const preview = new PreviewWeb();
 
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
 window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
 window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
 
 preview.initialize({ importFn, getProjectAnnotations });
diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json
index 11bd6a0afde..0f3f2f651c6 100644
--- a/lib/builder-webpack5/package.json
+++ b/lib/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -60,21 +60,21 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/channel-postmessage": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/router": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/channel-postmessage": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/router": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
     "@types/node": "^14.0.10",
     "babel-loader": "^8.0.0",
     "babel-plugin-macros": "^3.0.1",
@@ -117,6 +117,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index f1fe7ee907d..d89233c8675 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -232,7 +232,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: {
-        ...themingPaths,
+        ...(features?.emotionAlias ? themingPaths : {}),
         ...storybookPaths,
         react: path.dirname(require.resolve('react/package.json')),
         'react-dom': path.dirname(require.resolve('react-dom/package.json')),
diff --git a/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars
index 10bf9443cb3..514bc546821 100644
--- a/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars
+++ b/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars
@@ -17,15 +17,17 @@ const getProjectAnnotations = () =>
 const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
-const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
-addons.setServerChannel(serverChannel);
+if (SERVER_CHANNEL_URL) {
+  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
+  addons.setServerChannel(serverChannel);
+  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+}
 
 const preview = new PreviewWeb();
 
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
 window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
 window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
 
 preview.initialize({ importFn, getProjectAnnotations });
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 9ed7374286a..40f5b8d14b6 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "qs": "^6.10.0",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 60a62dd5843..be71d455f4a 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,8 +40,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "telejson": "^5.3.2"
@@ -49,6 +49,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 514926707e1..60a12de311c 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json
index 2b71ed6f6b6..47e5bf73c93 100644
--- a/lib/cli-sb/package.json
+++ b/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -24,10 +24,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.4.0-beta.26"
+    "@storybook/cli": "6.4.0-beta.31"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
 }
diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json
index cc2e1daf867..0b40a65cdb0 100644
--- a/lib/cli-storybook/package.json
+++ b/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -27,10 +27,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.4.0-beta.26"
+    "@storybook/cli": "6.4.0-beta.31"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
 }
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 945f5ba5b3c..67d196f45bd 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -48,10 +48,10 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/csf-tools": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/codemod": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/csf-tools": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
@@ -76,7 +76,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-beta.26",
+    "@storybook/client-api": "6.4.0-beta.31",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
 }
diff --git a/lib/cli/src/automigrate/index.ts b/lib/cli/src/automigrate/index.ts
index 9b8e5577f7e..7d0a517819a 100644
--- a/lib/cli/src/automigrate/index.ts
+++ b/lib/cli/src/automigrate/index.ts
@@ -46,7 +46,7 @@ export const automigrate = async ({ fixId, dryRun, yes }: FixOptions) => {
       } else {
         logger.info(`Skipping the ${chalk.cyan(f.id)} fix.`);
         logger.info();
-        logger.info(`If you change your mind, run '${chalk.cyan('npx sb@next fix')}'`);
+        logger.info(`If you change your mind, run '${chalk.cyan('npx sb@next automigrate')}'`);
       }
     }
   }
diff --git a/lib/cli/src/extract.ts b/lib/cli/src/extract.ts
index 688574be771..92adfb02498 100644
--- a/lib/cli/src/extract.ts
+++ b/lib/cli/src/extract.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { writeFile } from 'fs-extra';
+import { writeFile, stat } from 'fs-extra';
 import puppeteerCore from 'puppeteer-core';
 import express from 'express';
 import getPort from 'get-port';
@@ -28,6 +28,9 @@ const read = async (url: string) => {
 };
 
 const useLocation: (input: string) => Promise<[string, () => void]> = async (input: string) => {
+  // check for input's existence
+  await stat(path.resolve(input));
+
   if (input.match(/^http/)) {
     return [input, async () => {}];
   }
diff --git a/lib/cli/src/upgrade.ts b/lib/cli/src/upgrade.ts
index 469976b075d..37661545f1d 100644
--- a/lib/cli/src/upgrade.ts
+++ b/lib/cli/src/upgrade.ts
@@ -70,6 +70,7 @@ export const checkVersionConsistency = () => {
   if (!storybookPackages.length) {
     logger.warn('No storybook core packages found.');
     logger.warn(`'npm ls | grep storybook' can show if multiple versions are installed.`);
+    return;
   }
   storybookPackages.sort((a, b) => semver.rcompare(a.version, b.version));
   const latestVersion = storybookPackages[0].version;
diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json
index cf8bcd9686e..22eff867475 100644
--- a/lib/cli/src/versions.json
+++ b/lib/cli/src/versions.json
@@ -1,59 +1,59 @@
 {
-  "@storybook/addon-a11y": "6.4.0-beta.26",
-  "@storybook/addon-actions": "6.4.0-beta.26",
-  "@storybook/addon-backgrounds": "6.4.0-beta.26",
-  "@storybook/addon-controls": "6.4.0-beta.26",
-  "@storybook/addon-docs": "6.4.0-beta.26",
-  "@storybook/addon-essentials": "6.4.0-beta.26",
-  "@storybook/addon-interactions": "6.4.0-beta.26",
-  "@storybook/addon-jest": "6.4.0-beta.26",
-  "@storybook/addon-links": "6.4.0-beta.26",
-  "@storybook/addon-storyshots": "6.4.0-beta.26",
-  "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.26",
-  "@storybook/addon-storysource": "6.4.0-beta.26",
-  "@storybook/addon-toolbars": "6.4.0-beta.26",
-  "@storybook/addon-viewport": "6.4.0-beta.26",
-  "@storybook/addons": "6.4.0-beta.26",
-  "@storybook/angular": "6.4.0-beta.26",
-  "@storybook/api": "6.4.0-beta.26",
-  "@storybook/aurelia": "6.4.0-beta.26",
-  "@storybook/builder-webpack4": "6.4.0-beta.26",
-  "@storybook/builder-webpack5": "6.4.0-beta.26",
-  "@storybook/channel-postmessage": "6.4.0-beta.26",
-  "@storybook/channel-websocket": "6.4.0-beta.26",
-  "@storybook/channels": "6.4.0-beta.26",
-  "@storybook/cli": "6.4.0-beta.26",
-  "@storybook/client-api": "6.4.0-beta.26",
-  "@storybook/client-logger": "6.4.0-beta.26",
-  "@storybook/codemod": "6.4.0-beta.26",
-  "@storybook/components": "6.4.0-beta.26",
-  "@storybook/core": "6.4.0-beta.26",
-  "@storybook/core-client": "6.4.0-beta.26",
-  "@storybook/core-common": "6.4.0-beta.26",
-  "@storybook/core-events": "6.4.0-beta.26",
-  "@storybook/core-server": "6.4.0-beta.26",
-  "@storybook/csf-tools": "6.4.0-beta.26",
-  "@storybook/ember": "6.4.0-beta.26",
-  "@storybook/html": "6.4.0-beta.26",
-  "@storybook/instrumenter": "6.4.0-beta.26",
-  "@storybook/manager-webpack4": "6.4.0-beta.26",
-  "@storybook/manager-webpack5": "6.4.0-beta.26",
-  "@storybook/marionette": "6.4.0-beta.26",
-  "@storybook/marko": "6.4.0-beta.26",
-  "@storybook/mithril": "6.4.0-beta.26",
-  "@storybook/node-logger": "6.4.0-beta.26",
-  "@storybook/postinstall": "6.4.0-beta.26",
-  "@storybook/preact": "6.4.0-beta.26",
-  "@storybook/rax": "6.4.0-beta.26",
-  "@storybook/react": "6.4.0-beta.26",
-  "@storybook/riot": "6.4.0-beta.26",
-  "@storybook/router": "6.4.0-beta.26",
-  "@storybook/server": "6.4.0-beta.26",
-  "@storybook/source-loader": "6.4.0-beta.26",
-  "@storybook/svelte": "6.4.0-beta.26",
-  "@storybook/theming": "6.4.0-beta.26",
-  "@storybook/ui": "6.4.0-beta.26",
-  "@storybook/vue": "6.4.0-beta.26",
-  "@storybook/vue3": "6.4.0-beta.26",
-  "@storybook/web-components": "6.4.0-beta.26"
+  "@storybook/addon-a11y": "6.4.0-beta.31",
+  "@storybook/addon-actions": "6.4.0-beta.31",
+  "@storybook/addon-backgrounds": "6.4.0-beta.31",
+  "@storybook/addon-controls": "6.4.0-beta.31",
+  "@storybook/addon-docs": "6.4.0-beta.31",
+  "@storybook/addon-essentials": "6.4.0-beta.31",
+  "@storybook/addon-interactions": "6.4.0-beta.31",
+  "@storybook/addon-jest": "6.4.0-beta.31",
+  "@storybook/addon-links": "6.4.0-beta.31",
+  "@storybook/addon-storyshots": "6.4.0-beta.31",
+  "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.31",
+  "@storybook/addon-storysource": "6.4.0-beta.31",
+  "@storybook/addon-toolbars": "6.4.0-beta.31",
+  "@storybook/addon-viewport": "6.4.0-beta.31",
+  "@storybook/addons": "6.4.0-beta.31",
+  "@storybook/angular": "6.4.0-beta.31",
+  "@storybook/api": "6.4.0-beta.31",
+  "@storybook/aurelia": "6.4.0-beta.31",
+  "@storybook/builder-webpack4": "6.4.0-beta.31",
+  "@storybook/builder-webpack5": "6.4.0-beta.31",
+  "@storybook/channel-postmessage": "6.4.0-beta.31",
+  "@storybook/channel-websocket": "6.4.0-beta.31",
+  "@storybook/channels": "6.4.0-beta.31",
+  "@storybook/cli": "6.4.0-beta.31",
+  "@storybook/client-api": "6.4.0-beta.31",
+  "@storybook/client-logger": "6.4.0-beta.31",
+  "@storybook/codemod": "6.4.0-beta.31",
+  "@storybook/components": "6.4.0-beta.31",
+  "@storybook/core": "6.4.0-beta.31",
+  "@storybook/core-client": "6.4.0-beta.31",
+  "@storybook/core-common": "6.4.0-beta.31",
+  "@storybook/core-events": "6.4.0-beta.31",
+  "@storybook/core-server": "6.4.0-beta.31",
+  "@storybook/csf-tools": "6.4.0-beta.31",
+  "@storybook/ember": "6.4.0-beta.31",
+  "@storybook/html": "6.4.0-beta.31",
+  "@storybook/instrumenter": "6.4.0-beta.31",
+  "@storybook/manager-webpack4": "6.4.0-beta.31",
+  "@storybook/manager-webpack5": "6.4.0-beta.31",
+  "@storybook/marionette": "6.4.0-beta.31",
+  "@storybook/marko": "6.4.0-beta.31",
+  "@storybook/mithril": "6.4.0-beta.31",
+  "@storybook/node-logger": "6.4.0-beta.31",
+  "@storybook/postinstall": "6.4.0-beta.31",
+  "@storybook/preact": "6.4.0-beta.31",
+  "@storybook/rax": "6.4.0-beta.31",
+  "@storybook/react": "6.4.0-beta.31",
+  "@storybook/riot": "6.4.0-beta.31",
+  "@storybook/router": "6.4.0-beta.31",
+  "@storybook/server": "6.4.0-beta.31",
+  "@storybook/source-loader": "6.4.0-beta.31",
+  "@storybook/svelte": "6.4.0-beta.31",
+  "@storybook/theming": "6.4.0-beta.31",
+  "@storybook/ui": "6.4.0-beta.31",
+  "@storybook/vue": "6.4.0-beta.31",
+  "@storybook/vue3": "6.4.0-beta.31",
+  "@storybook/web-components": "6.4.0-beta.31"
 }
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 8ebd41c8e8a..56fe49b8e36 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -40,13 +40,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/channel-postmessage": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/channel-postmessage": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/qs": "^6.9.5",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -68,6 +68,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/client-api/src/StoryStoreFacade.ts b/lib/client-api/src/StoryStoreFacade.ts
index 0f1cc7be1f7..1b51c68bda0 100644
--- a/lib/client-api/src/StoryStoreFacade.ts
+++ b/lib/client-api/src/StoryStoreFacade.ts
@@ -22,6 +22,7 @@ import {
   sortStoriesV6,
   StoryIndexEntry,
 } from '@storybook/store';
+import { logger } from '@storybook/client-logger';
 
 export interface GetStorybookStory<TFramework extends AnyFramework> {
   name: string;
@@ -74,7 +75,11 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
     const sortableV6: [StoryId, Story<TFramework>, Parameters, Parameters][] = storyEntries.map(
       ([storyId, { importPath }]) => {
         const exports = this.csfExports[importPath];
-        const csfFile = store.processCSFFileWithCache<TFramework>(exports, exports.default.title);
+        const csfFile = store.processCSFFileWithCache<TFramework>(
+          exports,
+          importPath,
+          exports.default.title
+        );
         return [
           storyId,
           store.storyFromCSFFile({ storyId, csfFile }),
@@ -156,26 +161,33 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
         )
       );
     if (!title) {
-      throw new Error(
+      logger.info(
         `Unexpected default export without title in '${fileName}': ${JSON.stringify(
           fileExports.default
         )}`
       );
+      return;
     }
 
     this.csfExports[fileName] = {
       ...fileExports,
-      default: {
-        ...defaultExport,
-        title,
-        parameters: {
-          fileName,
-          ...defaultExport.parameters,
-        },
-      },
+      default: { ...defaultExport, title },
     };
 
-    Object.entries(namedExports)
+    let sortedExports = 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)) {
+      sortedExports = {};
+      __namedExportsOrder.forEach((name) => {
+        const namedExport = namedExports[name];
+        if (namedExport) sortedExports[name] = namedExport;
+      });
+    }
+
+    Object.entries(sortedExports)
       .filter(([key]) => isExportStory(key, defaultExport))
       .forEach(([key, storyExport]: [string, any]) => {
         const exportName = storyNameFromExport(key);
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index fae565d9963..257fba364a8 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -46,6 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index d54f2cad333..38b08ec42a4 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -44,8 +44,8 @@
     "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/csf-tools": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
@@ -62,6 +62,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/package.json b/lib/components/package.json
index 4370b7f6aed..68f0091d950 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/src/typography/link/link.tsx b/lib/components/src/typography/link/link.tsx
index 1b08faeb1ab..571250d76df 100644
--- a/lib/components/src/typography/link/link.tsx
+++ b/lib/components/src/typography/link/link.tsx
@@ -191,22 +191,24 @@ export const Link: FunctionComponent<LinkProps & AProps> = ({
   containsIcon,
   className,
   ...rest
-}) => {
-  return (
-    <A {...rest} onClick={cancel ? (e) => cancelled(e, onClick) : onClick} className={className}>
-      <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
-        {children}
-        {withArrow && <Icons icon="arrowright" />}
-      </LinkInner>
-    </A>
-  );
-};
+}) => (
+  <A
+    {...rest}
+    onClick={onClick && cancel ? (e) => cancelled(e, onClick) : onClick}
+    className={className}
+  >
+    <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
+      {children}
+      {withArrow && <Icons icon="arrowright" />}
+    </LinkInner>
+  </A>
+);
 
 Link.defaultProps = {
   cancel: true,
   className: undefined,
   style: undefined,
-  onClick: () => {},
+  onClick: undefined,
   withArrow: false,
   containsIcon: false,
 };
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index 00f2f5c0d34..8fbaec3ddbf 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-client",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,16 +40,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/channel-postmessage": "6.4.0-beta.26",
-    "@storybook/channel-websocket": "6.4.0-beta.26",
-    "@storybook/client-api": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/channel-postmessage": "6.4.0-beta.31",
+    "@storybook/channel-websocket": "6.4.0-beta.31",
+    "@storybook/client-api": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/preview-web": "6.4.0-beta.26",
-    "@storybook/store": "6.4.0-beta.26",
-    "@storybook/ui": "6.4.0-beta.26",
+    "@storybook/preview-web": "6.4.0-beta.31",
+    "@storybook/store": "6.4.0-beta.31",
+    "@storybook/ui": "6.4.0-beta.31",
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "core-js": "^3.8.2",
@@ -74,6 +74,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-client/src/manager/provider.ts b/lib/core-client/src/manager/provider.ts
index 0c0ad8c179d..e5d44f6df2c 100644
--- a/lib/core-client/src/manager/provider.ts
+++ b/lib/core-client/src/manager/provider.ts
@@ -25,7 +25,7 @@ export default class ReactProvider extends Provider {
     this.addons = addons;
     this.channel = channel;
 
-    if (FEATURES?.storyStoreV7) {
+    if (FEATURES?.storyStoreV7 && SERVER_CHANNEL_URL) {
       const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
       this.serverChannel = serverChannel;
       addons.setServerChannel(this.serverChannel);
diff --git a/lib/core-client/src/preview/executeLoadable.ts b/lib/core-client/src/preview/executeLoadable.ts
index c4c3f27a80d..2261190cb4b 100644
--- a/lib/core-client/src/preview/executeLoadable.ts
+++ b/lib/core-client/src/preview/executeLoadable.ts
@@ -31,7 +31,7 @@ export function executeLoadable(loadable: Loadable) {
         } catch (error) {
           const errorString =
             error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString();
-          logger.warn(`Unexpected error while loading ${filename}: ${errorString}`);
+          logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
         }
       });
     });
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index e933257ca3b..b5fcc9c8ffb 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -61,7 +61,7 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.1",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
     "@types/node": "^14.0.10",
     "@types/pretty-hrtime": "^1.0.0",
@@ -110,6 +110,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts
index c9c5674a48d..45228ecc100 100644
--- a/lib/core-common/src/types.ts
+++ b/lib/core-common/src/types.ts
@@ -27,6 +27,11 @@ export interface CoreConfig {
   channelOptions?: Partial<TelejsonOptions>;
 }
 
+interface DirectoryMapping {
+  from: string;
+  to: string;
+}
+
 export interface Presets {
   apply(
     extension: 'typescript',
@@ -128,6 +133,9 @@ export interface CLIOptions {
   previewUrl?: string;
   forceBuildPreview?: boolean;
   host?: string;
+  /**
+   * @deprecated Use 'staticDirs' Storybook Configuration option instead
+   */
   staticDir?: string[];
   configDir?: string;
   https?: boolean;
@@ -262,13 +270,7 @@ export type Preset =
  */
 export type Entry = string;
 
-type StorybookRefs = Record<
-  string,
-  {
-    title: string;
-    url: string;
-  }
->;
+type StorybookRefs = Record<string, { title: string; url: string } | { disable: boolean }>;
 
 /**
  * The interface for Storybook configuration in `main.ts` files.
@@ -281,6 +283,12 @@ export interface StorybookConfig {
    */
   addons?: Preset[];
   core?: CoreConfig;
+  /**
+   * Sets a list of directories of static files to be loaded by Storybook server
+   *
+   * @example `['./public']` or `[{from: './public', 'to': '/assets'}]`
+   */
+  staticDirs?: (DirectoryMapping | string)[];
   logLevel?: string;
   features?: {
     /**
@@ -288,6 +296,11 @@ export interface StorybookConfig {
      */
     postcss?: boolean;
 
+    /**
+     * Allows to disable deprecated implicit PostCSS loader.
+     */
+    emotionAlias?: boolean;
+
     /**
      * Build stories.json automatically on start/build
      */
@@ -324,6 +337,11 @@ export interface StorybookConfig {
      * Use Storybook 7.0 babel config scheme
      */
     babelModeV7?: boolean;
+
+    /**
+     * Filter args with a "target" on the type from the render function (EXPERIMENTAL)
+     */
+    argTypeTargetsV7?: boolean;
   };
 
   /**
diff --git a/lib/core-common/src/utils/normalize-stories.ts b/lib/core-common/src/utils/normalize-stories.ts
index 42f8ef3c918..f0f196ab2c2 100644
--- a/lib/core-common/src/utils/normalize-stories.ts
+++ b/lib/core-common/src/utils/normalize-stories.ts
@@ -38,6 +38,22 @@ const isDirectory = (configDir: string, entry: string) => {
   }
 };
 
+export const getDirectoryFromWorkingDir = ({
+  configDir,
+  workingDir,
+  directory,
+}: NormalizeOptions & { directory: string }) => {
+  const directoryFromConfig = path.resolve(configDir, directory);
+  let directoryFromWorking = path.relative(workingDir, directoryFromConfig);
+
+  // relative('/foo', '/foo/src') => 'src'
+  // but we want `./src` to match importPaths
+  if (!directoryFromWorking.startsWith('.')) {
+    directoryFromWorking = `.${path.sep}${directoryFromWorking}`;
+  }
+  return directoryFromWorking;
+};
+
 export const normalizeStoriesEntry = (
   entry: StoriesEntry,
   { configDir, workingDir }: NormalizeOptions
@@ -90,15 +106,14 @@ export const normalizeStoriesEntry = (
   // At this stage `directory` is relative to `main.js` (the config dir)
   // We want to work relative to the working dir, so we transform it here.
   const { directory: directoryRelativeToConfig } = specifierWithoutMatcher;
-  const absoluteDirectory = path.resolve(configDir, directoryRelativeToConfig);
-  let directory = slash(path.relative(workingDir, absoluteDirectory));
 
-  // relative('/foo', '/foo/src') => 'src'
-  // but we want `./src` to match importPaths
-  if (!directory.startsWith('.')) {
-    directory = `./${directory}`;
-  }
-  directory = directory.replace(/\/$/, '');
+  const directory = slash(
+    getDirectoryFromWorkingDir({
+      configDir,
+      workingDir,
+      directory: directoryRelativeToConfig,
+    })
+  ).replace(/\/$/, '');
 
   // Now make the importFn matcher.
   const importPathMatcher = globToRegexp(`${directory}/${files}`);
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 4a6b04561a8..d8c4320d1b9 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -45,6 +45,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index 7283e66c94e..9d058dbdab0 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -41,16 +41,16 @@
   },
   "dependencies": {
     "@discoveryjs/json-ext": "^0.5.3",
-    "@storybook/builder-webpack4": "6.4.0-beta.26",
-    "@storybook/core-client": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/builder-webpack4": "6.4.0-beta.31",
+    "@storybook/core-client": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-beta.26",
-    "@storybook/manager-webpack4": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
+    "@storybook/csf-tools": "6.4.0-beta.31",
+    "@storybook/manager-webpack4": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "@types/node": "^14.0.10",
     "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
@@ -84,7 +84,7 @@
     "ws": "^8.2.3"
   },
   "devDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-beta.26",
+    "@storybook/builder-webpack5": "6.4.0-beta.31",
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/serve-favicon": "^2.5.2",
@@ -92,8 +92,8 @@
     "jest-specific-snapshot": "^4.0.0"
   },
   "peerDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-beta.26",
-    "@storybook/manager-webpack5": "6.4.0-beta.26",
+    "@storybook/builder-webpack5": "6.4.0-beta.31",
+    "@storybook/manager-webpack5": "6.4.0-beta.31",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
@@ -111,6 +111,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
index 852c93c75b1..6a12381214b 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
@@ -223,3 +223,227 @@ Object {
   ],
 }
 `;
+
+exports[`vue-3-cli preview dev mode 1`] = `
+Object {
+  "entry": Array [
+    "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
+    "ROOT/lib/core-client/dist/esm/manager/index.js",
+    "ROOT/addons/links/dist/esm/register.js",
+    "ROOT/addons/docs/dist/esm/register.js",
+    "ROOT/addons/controls/dist/esm/register.js",
+    "ROOT/addons/actions/dist/esm/register.js",
+    "ROOT/addons/backgrounds/dist/esm/register.js",
+    "ROOT/addons/viewport/dist/esm/register.js",
+    "ROOT/addons/toolbars/dist/esm/register.js",
+    "ROOT/addons/measure/dist/esm/register.js",
+    "ROOT/addons/outline/dist/esm/register.js",
+    "ROOT/addons/interactions/dist/esm/register.js",
+  ],
+  "keys": Array [
+    "name",
+    "mode",
+    "bail",
+    "devtool",
+    "entry",
+    "output",
+    "watchOptions",
+    "plugins",
+    "module",
+    "resolve",
+    "resolveLoader",
+    "recordsPath",
+    "performance",
+    "optimization",
+  ],
+  "module": Object {
+    "rules": Array [
+      Object {
+        "exclude": Array [
+          "NODE_MODULES/",
+          "/dist/",
+        ],
+        "include": Array [
+          "ROOT",
+        ],
+        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/babel-loader/lib/index.js",
+            "options": Object {
+              "babelrc": false,
+              "configFile": false,
+              "plugins": Array [
+                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
+                  Object {
+                    "legacy": true,
+                  },
+                ],
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
+                  Object {
+                    "loose": true,
+                  },
+                ],
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
+                  Object {
+                    "loose": true,
+                  },
+                ],
+                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
+                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
+                  Object {
+                    "loose": true,
+                    "useBuiltIns": true,
+                  },
+                ],
+                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
+                "NODE_MODULES/babel-plugin-macros/dist/index.js",
+                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
+                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
+                Array [
+                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
+                  Object {
+                    "absoluteImports": "NODE_MODULES/core-js/index.js",
+                    "method": "usage-global",
+                    "version": "*",
+                  },
+                ],
+                "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
+              ],
+              "presets": Array [
+                Array [
+                  "NODE_MODULES/@babel/preset-env/lib/index.js",
+                  Object {
+                    "loose": true,
+                    "shippedProposals": true,
+                  },
+                ],
+                "NODE_MODULES/@babel/preset-typescript/lib/index.js",
+                "NODE_MODULES/@babel/preset-react/lib/index.js",
+              ],
+              "sourceType": "unambiguous",
+            },
+          },
+        ],
+      },
+      Object {
+        "include": [Function],
+        "test": "/\\\\.js$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/babel-loader/lib/index.js",
+            "options": Object {
+              "plugins": Array [
+                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
+                  Object {
+                    "legacy": true,
+                  },
+                ],
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
+                  Object {
+                    "loose": true,
+                  },
+                ],
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
+                  Object {
+                    "loose": true,
+                  },
+                ],
+                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
+                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
+                Array [
+                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
+                  Object {
+                    "loose": true,
+                    "useBuiltIns": true,
+                  },
+                ],
+                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
+                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
+                "NODE_MODULES/babel-plugin-macros/dist/index.js",
+                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
+                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
+                Array [
+                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
+                  Object {
+                    "absoluteImports": "NODE_MODULES/core-js/index.js",
+                    "method": "usage-global",
+                    "version": "*",
+                  },
+                ],
+              ],
+              "presets": Array [
+                Array [
+                  "NODE_MODULES/@babel/preset-env/lib/index.js",
+                  Object {
+                    "loose": true,
+                    "modules": false,
+                    "shippedProposals": true,
+                    "targets": "defaults",
+                  },
+                ],
+                "NODE_MODULES/@babel/preset-react/lib/index.js",
+              ],
+              "sourceType": "unambiguous",
+            },
+          },
+        ],
+      },
+      Object {
+        "test": "/\\\\.css$/",
+        "use": Array [
+          "NODE_MODULES/style-loader/dist/cjs.js",
+          Object {
+            "loader": "NODE_MODULES/css-loader/dist/cjs.js",
+            "options": Object {
+              "importLoaders": 1,
+            },
+          },
+        ],
+      },
+      Object {
+        "loader": "NODE_MODULES/file-loader/dist/cjs.js",
+        "options": Object {
+          "name": "static/media/[name].[contenthash:8].[ext]",
+        },
+        "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
+      },
+      Object {
+        "loader": "NODE_MODULES/url-loader/dist/cjs.js",
+        "options": Object {
+          "limit": 10000,
+          "name": "static/media/[name].[contenthash:8].[ext]",
+        },
+        "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
+      },
+    ],
+  },
+  "plugins": Array [
+    "VirtualModulesPlugin",
+    "HtmlWebpackPlugin",
+    "CaseSensitivePathsPlugin",
+    "DefinePlugin",
+  ],
+}
+`;
diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts
index 0daccb76842..25632964c17 100644
--- a/lib/core-server/src/build-static.ts
+++ b/lib/core-server/src/build-static.ts
@@ -2,6 +2,7 @@ import chalk from 'chalk';
 import cpy from 'cpy';
 import fs from 'fs-extra';
 import path from 'path';
+import dedent from 'ts-dedent';
 
 import { logger } from '@storybook/node-logger';
 
@@ -20,7 +21,10 @@ import {
 
 import { getProdCli } from './cli';
 import { outputStats } from './utils/output-stats';
-import { copyAllStaticFiles } from './utils/copy-all-static-files';
+import {
+  copyAllStaticFiles,
+  copyAllStaticFilesRelativeToMain,
+} from './utils/copy-all-static-files';
 import { getPreviewBuilder } from './utils/get-preview-builder';
 import { getManagerBuilder } from './utils/get-manager-builder';
 import { extractStoriesJson } from './utils/stories-json';
@@ -52,7 +56,6 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
   await fs.emptyDir(options.outputDir);
 
   await cpy(defaultFavIcon, options.outputDir);
-  await copyAllStaticFiles(options.staticDir, options.outputDir);
 
   const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
   const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
@@ -68,6 +71,25 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
     ...options,
   });
 
+  const staticDirs = await presets.apply<StorybookConfig['staticDirs']>('staticDirs');
+
+  if (staticDirs && options.staticDir) {
+    throw new Error(dedent`
+      Conflict when trying to read staticDirs:
+      * Storybook's configuration option: 'staticDirs'
+      * Storybook's CLI flag: '--staticDir' or '-s'
+      
+      Choose one of them, but not both.
+    `);
+  }
+
+  if (staticDirs) {
+    await copyAllStaticFilesRelativeToMain(staticDirs, options.outputDir, options.configDir);
+  }
+  if (options.staticDir) {
+    await copyAllStaticFiles(options.staticDir, options.outputDir);
+  }
+
   const features = await presets.apply<StorybookConfig['features']>('features');
   if (features?.buildStoriesJson || features?.storyStoreV7) {
     const directories = {
diff --git a/lib/core-server/src/cli/prod.ts b/lib/core-server/src/cli/prod.ts
index e0321be59e2..5fe806d325c 100644
--- a/lib/core-server/src/cli/prod.ts
+++ b/lib/core-server/src/cli/prod.ts
@@ -1,23 +1,25 @@
 import program, { CommanderStatic } from 'commander';
 import chalk from 'chalk';
 import { logger } from '@storybook/node-logger';
+import type { CLIOptions } from '@storybook/core-common';
 import { parseList, getEnvConfig, checkDeprecatedFlags } from './utils';
 
-export interface ProdCliOptions {
-  staticDir?: string[];
-  outputDir?: string;
-  configDir?: string;
-  quiet?: boolean;
-  loglevel?: string;
-  dll?: boolean;
-  docsDll?: boolean;
-  uiDll?: boolean;
-  debugWebpack?: boolean;
-  previewUrl?: string;
-  forceBuildPreview?: boolean;
-  docs?: boolean;
-  modern?: boolean;
-}
+export type ProdCliOptions = Pick<
+  CLIOptions,
+  | 'configDir'
+  | 'debugWebpack'
+  | 'dll'
+  | 'docs'
+  | 'docsDll'
+  | 'forceBuildPreview'
+  | 'loglevel'
+  | 'modern'
+  | 'outputDir'
+  | 'previewUrl'
+  | 'quiet'
+  | 'staticDir'
+  | 'uiDll'
+>;
 
 export function getProdCli(packageJson: {
   version: string;
diff --git a/lib/core-server/src/cli/utils.ts b/lib/core-server/src/cli/utils.ts
index 36360ba9efb..30e5f13f94d 100644
--- a/lib/core-server/src/cli/utils.ts
+++ b/lib/core-server/src/cli/utils.ts
@@ -1,5 +1,7 @@
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
+import type { CLIOptions } from '@storybook/core-common';
+import type { ProdCliOptions } from './prod';
 
 export function parseList(str: string): string[] {
   return str
@@ -18,21 +20,36 @@ export function getEnvConfig(program: Record<string, any>, configEnv: Record<str
   });
 }
 
-const warnDLLsDeprecated = deprecate(
-  () => {},
-  dedent`
+const warnDeprecatedFlag = (message: string) => {
+  return deprecate(() => {}, dedent(message));
+};
+
+const warnDLLsDeprecated = warnDeprecatedFlag(
+  `
     DLL-related CLI flags are deprecated, see:
     
     https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags
   `
 );
 
-export function checkDeprecatedFlags(options: {
-  dll?: boolean;
-  uiDll?: boolean;
-  docsDll?: boolean;
-}) {
-  if (!options.dll || options.uiDll || options.docsDll) {
+const warnStaticDirDeprecated = warnDeprecatedFlag(
+  `
+    --static-dir CLI flag is deprecated, see:
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-static-dir-flag
+  `
+);
+
+export function checkDeprecatedFlags({
+  dll,
+  uiDll,
+  docsDll,
+  staticDir,
+}: CLIOptions | ProdCliOptions) {
+  if (!dll || uiDll || docsDll) {
     warnDLLsDeprecated();
   }
+  if (staticDir) {
+    warnStaticDirDeprecated();
+  }
 }
diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts
index 4ddfcf91459..e88f56f82b4 100644
--- a/lib/core-server/src/presets/common-preset.ts
+++ b/lib/core-server/src/presets/common-preset.ts
@@ -64,4 +64,5 @@ export const typescript = () => ({
 export const features = async (existing: Record<string, boolean>) => ({
   ...existing,
   postcss: true,
+  emotionAlias: true,
 });
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index e38eada511d..a44a41dd91c 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -167,7 +167,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(5);
+        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
 
         readCsfOrMdxMock.mockClear();
         await generator.getIndex();
@@ -204,7 +204,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(5);
+        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
 
         generator.invalidate(specifier, './src/B.stories.ts', false);
 
@@ -244,7 +244,7 @@ describe('StoryIndexGenerator', () => {
           const generator = new StoryIndexGenerator([specifier], options);
           await generator.initialize();
           await generator.getIndex();
-          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(5);
+          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
 
           generator.invalidate(specifier, './src/B.stories.ts', true);
 
@@ -283,7 +283,7 @@ describe('StoryIndexGenerator', () => {
           const generator = new StoryIndexGenerator([specifier], options);
           await generator.initialize();
           await generator.getIndex();
-          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(5);
+          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
 
           generator.invalidate(specifier, './src/B.stories.ts', true);
 
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts
index e0685359480..b76d599c705 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -99,10 +99,9 @@ export class StoryIndexGenerator {
 
   async extractStories(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
     const relativePath = path.relative(this.options.workingDir, absolutePath);
+    const fileStories = {} as StoryIndex['stories'];
+    const entry = this.storyIndexEntries.get(specifier);
     try {
-      const entry = this.storyIndexEntries.get(specifier);
-      const fileStories = {} as StoryIndex['stories'];
-
       const importPath = slash(relativePath[0] === '.' ? relativePath : `./${relativePath}`);
       const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
       const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
@@ -114,13 +113,16 @@ export class StoryIndexGenerator {
           importPath,
         };
       });
-
-      entry[absolutePath] = fileStories;
-      return fileStories;
     } catch (err) {
-      logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
-      throw err;
+      if (err.name === 'NoMetaError') {
+        logger.info(`💡 Skipping ${relativePath}: ${err}`);
+      } else {
+        logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
+        throw err;
+      }
     }
+    entry[absolutePath] = fileStories;
+    return fileStories;
   }
 
   async sortStories(storiesList: StoryIndex['stories'][]) {
diff --git a/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts b/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts
new file mode 100644
index 00000000000..b12d3b47ab7
--- /dev/null
+++ b/lib/core-server/src/utils/__mockdata__/src/NoMeta.stories.ts
@@ -0,0 +1,3 @@
+// no default export
+// e.g. https://github.com/storybookjs/storybook/issues/16421
+export const StoryOne = {};
diff --git a/lib/core-server/src/utils/copy-all-static-files.ts b/lib/core-server/src/utils/copy-all-static-files.ts
index 68d9eabe7e7..5fa157cfd4f 100644
--- a/lib/core-server/src/utils/copy-all-static-files.ts
+++ b/lib/core-server/src/utils/copy-all-static-files.ts
@@ -2,6 +2,7 @@ import chalk from 'chalk';
 import fs from 'fs-extra';
 import path from 'path';
 import { logger } from '@storybook/node-logger';
+import { getDirectoryFromWorkingDir } from '@storybook/core-common';
 import { parseStaticDir } from './server-statics';
 
 export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDir: string) {
@@ -28,3 +29,28 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi
     );
   }
 }
+export async function copyAllStaticFilesRelativeToMain(
+  staticDirs: any[] | undefined,
+  outputDir: string,
+  configDir: string
+) {
+  staticDirs.forEach(async (dir) => {
+    const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
+    const { staticPath: from, targetEndpoint: to } = await parseStaticDir(
+      getDirectoryFromWorkingDir({
+        configDir,
+        workingDir: process.cwd(),
+        directory: staticDirAndTarget,
+      })
+    );
+
+    const targetPath = path.join(outputDir, to);
+    const skipPaths = ['index.html', 'iframe.html'].map((f) => path.join(targetPath, f));
+    logger.info(chalk`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`);
+    await fs.copy(from, targetPath, {
+      dereference: true,
+      preserveTimestamps: true,
+      filter: (_, dest) => !skipPaths.includes(dest),
+    });
+  });
+}
diff --git a/lib/core-server/src/utils/server-statics.ts b/lib/core-server/src/utils/server-statics.ts
index b7ad357beb2..d9fbfb46812 100644
--- a/lib/core-server/src/utils/server-statics.ts
+++ b/lib/core-server/src/utils/server-statics.ts
@@ -1,4 +1,6 @@
 import { logger } from '@storybook/node-logger';
+import type { Options, StorybookConfig } from '@storybook/core-common';
+import { getDirectoryFromWorkingDir } from '@storybook/core-common';
 import chalk from 'chalk';
 import express from 'express';
 import { pathExists } from 'fs-extra';
@@ -9,8 +11,35 @@ import dedent from 'ts-dedent';
 
 const defaultFavIcon = require.resolve('../public/favicon.ico');
 
-export async function useStatics(router: any, options: { staticDir?: string[] }) {
+export async function useStatics(router: any, options: Options) {
   let hasCustomFavicon = false;
+  const staticDirs = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs');
+
+  if (staticDirs && options.staticDir) {
+    throw new Error(dedent`
+      Conflict when trying to read staticDirs:
+      * Storybook's configuration option: 'staticDirs'
+      * Storybook's CLI flag: '--staticDir' or '-s'
+      
+      Choose one of them, but not both.
+    `);
+  }
+
+  if (staticDirs) {
+    staticDirs.forEach(async (dir) => {
+      const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
+      const { staticPath: from, targetEndpoint: to } = await parseStaticDir(
+        getDirectoryFromWorkingDir({
+          configDir: options.configDir,
+          workingDir: process.cwd(),
+          directory: staticDirAndTarget,
+        })
+      );
+
+      logger.info(chalk`=> Serving static files from {cyan ${from}} at {cyan ${to}}`);
+      router.use(to, express.static(from, { index: false }));
+    });
+  }
 
   if (options.staticDir && options.staticDir.length > 0) {
     await Promise.all(
diff --git a/lib/core/package.json b/lib/core/package.json
index 29e56fec8bb..7a4dd093f47 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,11 +40,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core-client": "6.4.0-beta.26",
-    "@storybook/core-server": "6.4.0-beta.26"
+    "@storybook/core-client": "6.4.0-beta.31",
+    "@storybook/core-server": "6.4.0-beta.31"
   },
   "peerDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-beta.26",
+    "@storybook/builder-webpack5": "6.4.0-beta.31",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "webpack": "*"
@@ -60,6 +60,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json
index 4d06103a13f..6e089377623 100644
--- a/lib/csf-tools/package.json
+++ b/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -65,6 +65,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/csf-tools/src/CsfFile.test.ts b/lib/csf-tools/src/CsfFile.test.ts
index 301d8012d5a..e93f2311811 100644
--- a/lib/csf-tools/src/CsfFile.test.ts
+++ b/lib/csf-tools/src/CsfFile.test.ts
@@ -285,6 +285,54 @@ describe('CsfFile', () => {
               __id: foo-bar--b
       `);
     });
+
+    it('re-exported stories', () => {
+      expect(
+        parse(
+          dedent`
+          export default { title: 'foo/bar' };
+          export { default as A } from './A';
+          export { B } from './B';
+        `
+        )
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: foo/bar
+        stories:
+          - id: foo-bar--a
+            name: A
+          - id: foo-bar--b
+            name: B
+      `);
+    });
+
+    it('named exports order', () => {
+      expect(
+        parse(
+          dedent`
+          export default { title: 'foo/bar' };
+          export const A = () => {};
+          export const B = (args) => {};
+          export const __namedExportsOrder = ['B', 'A'];
+        `,
+          true
+        )
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: foo/bar
+        stories:
+          - id: foo-bar--b
+            name: B
+            parameters:
+              __isArgsStory: true
+              __id: foo-bar--b
+          - id: foo-bar--a
+            name: A
+            parameters:
+              __isArgsStory: false
+              __id: foo-bar--a
+      `);
+    });
   });
 
   describe('error handling', () => {
@@ -298,6 +346,7 @@ describe('CsfFile', () => {
         )
       ).toThrow('CSF: missing default export');
     });
+
     it('no metadata', () => {
       expect(() =>
         parse(
@@ -309,6 +358,7 @@ describe('CsfFile', () => {
         )
       ).toThrow('CSF: missing title/component');
     });
+
     it('dynamic titles', () => {
       expect(() =>
         parse(
@@ -320,6 +370,7 @@ describe('CsfFile', () => {
         )
       ).toThrow('CSF: unexpected dynamic title');
     });
+
     it('storiesOf calls', () => {
       expect(() =>
         parse(
diff --git a/lib/csf-tools/src/CsfFile.ts b/lib/csf-tools/src/CsfFile.ts
index f9e32c82c85..b908947438a 100644
--- a/lib/csf-tools/src/CsfFile.ts
+++ b/lib/csf-tools/src/CsfFile.ts
@@ -100,10 +100,41 @@ const isArgsStory = (init: t.Expression, parent: t.Node, csf: CsfFile) => {
   return false;
 };
 
+const parseExportsOrder = (init: t.Expression) => {
+  if (t.isArrayExpression(init)) {
+    return init.elements.map((item: t.Expression) => {
+      if (t.isStringLiteral(item)) {
+        return item.value;
+      }
+      throw new Error(`Expected string literal named export: ${item}`);
+    });
+  }
+  throw new Error(`Expected array of string literals: ${init}`);
+};
+
+const sortExports = (exportByName: Record<string, any>, order: string[]) => {
+  return order.reduce((acc, name) => {
+    const namedExport = exportByName[name];
+    if (namedExport) acc[name] = namedExport;
+    return acc;
+  }, {} as Record<string, any>);
+};
+
 export interface CsfOptions {
   defaultTitle: string;
   fileName?: string;
 }
+
+export class NoMetaError extends Error {
+  constructor(ast: t.Node, fileName?: string) {
+    super(dedent`
+      CSF: missing default export ${formatLocation(ast, fileName)}
+
+      More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+    `);
+    this.name = this.constructor.name;
+  }
+}
 export class CsfFile {
   _ast: t.File;
 
@@ -123,6 +154,8 @@ export class CsfFile {
 
   _templates: Record<string, t.Expression> = {};
 
+  _namedExportsOrder?: string[];
+
   constructor(ast: t.File, { defaultTitle, fileName }: CsfOptions) {
     this._ast = ast;
     this._defaultTitle = defaultTitle;
@@ -196,6 +229,10 @@ export class CsfFile {
             node.declaration.declarations.forEach((decl) => {
               if (t.isVariableDeclarator(decl) && t.isIdentifier(decl.id)) {
                 const { name: exportName } = decl.id;
+                if (exportName === '__namedExportsOrder') {
+                  self._namedExportsOrder = parseExportsOrder(decl.init);
+                  return;
+                }
                 self._storyExports[exportName] = decl;
                 let name = storyNameFromExport(exportName);
                 if (self._storyAnnotations[exportName]) {
@@ -234,6 +271,15 @@ export class CsfFile {
                 };
               }
             });
+          } else if (node.specifiers.length > 0) {
+            // export { X as Y }
+            node.specifiers.forEach((specifier) => {
+              if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) {
+                const { name: exportName } = specifier.exported;
+                self._storyAnnotations[exportName] = {};
+                self._stories[exportName] = { id: 'FIXME', name: exportName, parameters: {} };
+              }
+            });
           }
         },
       },
@@ -291,11 +337,7 @@ export class CsfFile {
     });
 
     if (!self._meta) {
-      throw new Error(dedent`
-        CSF: missing default export ${formatLocation(self._ast, self._fileName)}
-
-        More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-      `);
+      throw new NoMetaError(self._ast, self._fileName);
     }
 
     if (!self._meta.title && !self._meta.component) {
@@ -328,6 +370,11 @@ export class CsfFile {
       }
     });
 
+    if (self._namedExportsOrder) {
+      self._storyExports = sortExports(self._storyExports, self._namedExportsOrder);
+      self._stories = sortExports(self._stories, self._namedExportsOrder);
+    }
+
     return self;
   }
 
diff --git a/lib/instrumenter/package.json b/lib/instrumenter/package.json
index 77c6ff5e2b6..d63e7c051ef 100644
--- a/lib/instrumenter/package.json
+++ b/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,14 +40,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "global": "^4.4.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
index da95213af98..3b5464f0c27 100644
--- a/lib/instrumenter/src/instrumenter.test.ts
+++ b/lib/instrumenter/src/instrumenter.test.ts
@@ -286,7 +286,7 @@ describe('Instrumenter', () => {
       },
     });
     expect(fn()).toEqual(new Error('Boom!'));
-    expect(() => setRenderPhase('completed')).toThrow(new Error('Boom!'));
+    expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
   });
 
   it('forwards nested exceptions', () => {
@@ -297,7 +297,7 @@ describe('Instrumenter', () => {
       },
     });
     expect(fn1(fn2())).toEqual(new Error('Boom!'));
-    expect(() => setRenderPhase('completed')).toThrow(new Error('Boom!'));
+    expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
   });
 
   it("re-throws anything that isn't an error", () => {
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index b14520f96a5..17be1c23bc7 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -31,7 +31,7 @@ export interface Options {
 }
 
 export interface State {
-  renderPhase: 'loading' | 'rendering' | 'playing' | 'completed' | 'aborted';
+  renderPhase: 'loading' | 'rendering' | 'playing' | 'played' | 'completed' | 'aborted' | 'errored';
   isDebugging: boolean;
   cursor: number;
   calls: Call[];
@@ -139,7 +139,7 @@ export class Instrumenter {
       if (newPhase === 'playing') {
         resetState({ storyId, isDebugging });
       }
-      if (newPhase === 'completed') {
+      if (newPhase === 'played') {
         this.setState(storyId, { isDebugging: false, forwardedException: undefined });
         // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
         if (forwardedException) throw forwardedException;
@@ -175,7 +175,6 @@ export class Instrumenter {
       });
 
       // Force remount may trigger a page reload if the play function can't be aborted.
-      // global.window.location.reload();
       this.channel.emit(FORCE_REMOUNT, { storyId, isDebugging: true });
     };
 
@@ -362,6 +361,10 @@ export class Instrumenter {
   }
 
   invoke(fn: Function, call: Call, options: Options) {
+    // TODO this doesnt work because the abortSignal we have here is the newly created one
+    // const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};
+    // if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;
+
     const { parentCall, callRefsByResult, forwardedException, renderPhase } = this.getState(
       call.storyId
     );
@@ -428,7 +431,7 @@ export class Instrumenter {
         throw forwardedException;
       }
 
-      if (renderPhase === 'completed' && !call.retain) {
+      if (renderPhase === 'played' && !call.retain) {
         throw alreadyCompletedException;
       }
 
diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
index f376d5860ca..699f9f690aa 100644
--- a/lib/manager-webpack4/package.json
+++ b/lib/manager-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-webpack4",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-template-literals": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core-client": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
-    "@storybook/ui": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core-client": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
+    "@storybook/ui": "6.4.0-beta.31",
     "@types/node": "^14.0.10",
     "@types/webpack": "^4.41.26",
     "babel-loader": "^8.0.0",
@@ -97,6 +97,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
index 9c4e102dcc2..b49334c1786 100644
--- a/lib/manager-webpack5/package.json
+++ b/lib/manager-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-webpack5",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-template-literals": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/core-client": "6.4.0-beta.26",
-    "@storybook/core-common": "6.4.0-beta.26",
-    "@storybook/node-logger": "6.4.0-beta.26",
-    "@storybook/theming": "6.4.0-beta.26",
-    "@storybook/ui": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/core-client": "6.4.0-beta.31",
+    "@storybook/core-common": "6.4.0-beta.31",
+    "@storybook/node-logger": "6.4.0-beta.31",
+    "@storybook/theming": "6.4.0-beta.31",
+    "@storybook/ui": "6.4.0-beta.31",
     "@types/node": "^14.0.10",
     "babel-loader": "^8.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -93,6 +93,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 5055d322240..b115323fc5f 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -52,6 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index 267babce893..38d38a7b5fe 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json
index 116d869cc3e..131f7caab1b 100644
--- a/lib/preview-web/package.json
+++ b/lib/preview-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-web",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,12 +40,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/channel-postmessage": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/channel-postmessage": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.4.0-beta.26",
+    "@storybook/store": "6.4.0-beta.31",
     "ansi-to-html": "^0.6.11",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -64,6 +64,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
index fc7181a1453..ade2f4220f7 100644
--- a/lib/preview-web/src/PreviewWeb.test.ts
+++ b/lib/preview-web/src/PreviewWeb.test.ts
@@ -114,12 +114,14 @@ describe('PreviewWeb', () => {
     it('shows an error if getProjectAnnotations throws', async () => {
       const err = new Error('meta error');
       const preview = new PreviewWeb();
-      await preview.initialize({
-        importFn,
-        getProjectAnnotations: () => {
-          throw err;
-        },
-      });
+      await expect(
+        preview.initialize({
+          importFn,
+          getProjectAnnotations: () => {
+            throw err;
+          },
+        })
+      ).rejects.toThrow(err);
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
@@ -130,7 +132,9 @@ describe('PreviewWeb', () => {
       mockFetchResult = { status: 500, text: async () => err.toString() };
 
       const preview = new PreviewWeb();
-      await preview.initialize({ importFn, getProjectAnnotations });
+      await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
+        'sort error'
+      );
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
@@ -154,7 +158,7 @@ describe('PreviewWeb', () => {
     });
 
     it('SET_GLOBALS sets globals and types even when undefined', async () => {
-      await createAndRenderPreview({ getProjectAnnotations: () => ({}) });
+      await createAndRenderPreview({ getProjectAnnotations: () => ({ renderToDOM: jest.fn() }) });
 
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
         globals: {},
@@ -182,6 +186,16 @@ describe('PreviewWeb', () => {
         foo: 'url',
       });
     });
+    it('updates args from the URL', async () => {
+      document.location.search = '?id=component-one--a&args=foo:url';
+
+      await createAndRenderPreview();
+
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+        storyId: 'component-one--a',
+        args: { foo: 'url' },
+      });
+    });
 
     it('allows async getProjectAnnotations', async () => {
       const preview = new PreviewWeb();
@@ -236,12 +250,12 @@ describe('PreviewWeb', () => {
     });
 
     describe('if the story specified does not exist', () => {
-      it('renders missing', async () => {
+      it('renders a loading error', async () => {
         document.location.search = '?id=random';
 
         const preview = await createAndRenderPreview();
 
-        expect(preview.view.showNoPreview).toHaveBeenCalled();
+        expect(preview.view.showErrorDisplay).toHaveBeenCalled();
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'random');
       });
 
@@ -250,7 +264,7 @@ describe('PreviewWeb', () => {
 
         const preview = await createAndRenderPreview();
 
-        expect(preview.view.showNoPreview).toHaveBeenCalled();
+        expect(preview.view.showErrorDisplay).toHaveBeenCalled();
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--d');
 
         mockChannel.emit.mockClear();
@@ -294,7 +308,7 @@ describe('PreviewWeb', () => {
 
           const preview = await createAndRenderPreview();
 
-          expect(preview.view.showNoPreview).toHaveBeenCalled();
+          expect(preview.view.showErrorDisplay).toHaveBeenCalled();
           expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--d');
 
           emitter.emit(Events.SET_CURRENT_STORY, {
@@ -339,7 +353,7 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
 
       expect(preview.view.showNoPreview).toHaveBeenCalled();
-      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, undefined);
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING);
     });
 
     describe('in story viewMode', () => {
@@ -361,7 +375,11 @@ describe('PreviewWeb', () => {
 
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--a',
-          parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+          parameters: {
+            __isArgsStory: false,
+            docs: { container: expect.any(Function) },
+            fileName: './src/ComponentOne.stories.js',
+          },
           initialArgs: { foo: 'a' },
           argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
           args: { foo: 'a' },
@@ -375,7 +393,11 @@ describe('PreviewWeb', () => {
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
           expect.objectContaining({
             id: 'component-one--a',
-            parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+            parameters: {
+              __isArgsStory: false,
+              docs: { container: expect.any(Function) },
+              fileName: './src/ComponentOne.stories.js',
+            },
             initialArgs: { foo: 'a' },
             argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
             args: { foo: 'a' },
@@ -392,7 +414,11 @@ describe('PreviewWeb', () => {
             forceRemount: true,
             storyContext: expect.objectContaining({
               id: 'component-one--a',
-              parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+              parameters: {
+                __isArgsStory: false,
+                docs: { container: expect.any(Function) },
+                fileName: './src/ComponentOne.stories.js',
+              },
               globals: { a: 'b' },
               initialArgs: { foo: 'a' },
               argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
@@ -436,18 +462,17 @@ describe('PreviewWeb', () => {
           projectAnnotations.renderToDOM = undefined;
 
           document.location.search = '?id=component-one--a';
-          const preview = await createAndRenderPreview();
+          const preview = new PreviewWeb();
+          await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow();
 
           expect(preview.view.showErrorDisplay).toHaveBeenCalled();
           expect((preview.view.showErrorDisplay as jest.Mock).mock.calls[0][0])
             .toMatchInlineSnapshot(`
-            [Error:     Expected 'framework' in your main.js to export 'renderToDOM', but none found.
+            [Error: Expected your framework's preset to export a \\\`renderToDOM\\\` field.
 
-                You can fix this automatically by running:
+            Perhaps it needs to be upgraded for Storybook 6.4?
 
-                npx sb@next automigrate
-
-                More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field          ]
+            More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field          ]
           `);
         } finally {
           projectAnnotations.renderToDOM = originalRenderToDOM;
@@ -543,7 +568,11 @@ describe('PreviewWeb', () => {
 
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--a',
-          parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+          parameters: {
+            __isArgsStory: false,
+            docs: { container: expect.any(Function) },
+            fileName: './src/ComponentOne.stories.js',
+          },
           initialArgs: { foo: 'a' },
           argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
           args: { foo: 'a' },
@@ -719,7 +748,7 @@ describe('PreviewWeb', () => {
     });
 
     describe('while story is still rendering', () => {
-      it('runs loaders again and stops previous render', async () => {
+      it('runs loaders again', async () => {
         const [gate, openGate] = createGate();
 
         document.location.search = '?id=component-one--a';
@@ -739,9 +768,6 @@ describe('PreviewWeb', () => {
           storyId: 'component-one--a',
           updatedArgs: { new: 'arg' },
         });
-
-        // Now let the first loader call resolve
-        openGate({ l: 8 });
         await waitForRender();
 
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
@@ -754,7 +780,7 @@ describe('PreviewWeb', () => {
         expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
         expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
           expect.objectContaining({
-            forceRemount: true,
+            forceRemount: true, // Wasn't yet rendered so we need to force remount
             storyContext: expect.objectContaining({
               loaded: { l: 7 }, // This is the value returned by the *second* loader call
               args: { foo: 'a', new: 'arg' },
@@ -762,6 +788,25 @@ describe('PreviewWeb', () => {
           }),
           undefined // this is coming from view.prepareForStory, not super important
         );
+
+        // Now let the first loader call resolve
+        mockChannel.emit.mockClear();
+        projectAnnotations.renderToDOM.mockClear();
+        openGate({ l: 8 });
+        await waitForRender();
+
+        // Now the first call comes through, but picks up the new args
+        // Note this isn't a particularly realistic case (the second loader being quicker than the first)
+        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
+        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect.objectContaining({
+            storyContext: expect.objectContaining({
+              loaded: { l: 8 },
+              args: { foo: 'a', new: 'arg' },
+            }),
+          }),
+          undefined // this is coming from view.prepareForStory, not super important
+        );
       });
 
       it('renders a second time if renderToDOM is running', async () => {
@@ -838,7 +883,7 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('warns and calls renderToDOM again if play function is running', async () => {
+      it('calls renderToDOM again if play function is running', async () => {
         const [gate, openGate] = createGate();
         componentOneExports.a.play.mockImplementationOnce(async () => gate);
 
@@ -1128,7 +1173,7 @@ describe('PreviewWeb', () => {
       });
     });
 
-    it('renders missing if the story specified does not exist', async () => {
+    it('renders loading error if the story specified does not exist', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
@@ -1139,7 +1184,7 @@ describe('PreviewWeb', () => {
       await waitForSetCurrentStory();
 
       await waitForEvents([Events.STORY_MISSING]);
-      expect(preview.view.showNoPreview).toHaveBeenCalled();
+      expect(preview.view.showErrorDisplay).toHaveBeenCalled();
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'random');
     });
 
@@ -1248,7 +1293,11 @@ describe('PreviewWeb', () => {
         await waitForEvents([Events.STORY_PREPARED]);
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--b',
-          parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+          parameters: {
+            __isArgsStory: false,
+            docs: { container: expect.any(Function) },
+            fileName: './src/ComponentOne.stories.js',
+          },
           initialArgs: { foo: 'b' },
           argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
           args: { foo: 'b' },
@@ -1270,7 +1319,11 @@ describe('PreviewWeb', () => {
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
           expect.objectContaining({
             id: 'component-one--b',
-            parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+            parameters: {
+              __isArgsStory: false,
+              docs: { container: expect.any(Function) },
+              fileName: './src/ComponentOne.stories.js',
+            },
             initialArgs: { foo: 'b' },
             argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
             args: { foo: 'b' },
@@ -1295,7 +1348,11 @@ describe('PreviewWeb', () => {
             forceRemount: true,
             storyContext: expect.objectContaining({
               id: 'component-one--b',
-              parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+              parameters: {
+                __isArgsStory: false,
+                docs: { container: expect.any(Function) },
+                fileName: './src/ComponentOne.stories.js',
+              },
               globals: { a: 'b' },
               initialArgs: { foo: 'b' },
               argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
@@ -1786,7 +1843,11 @@ describe('PreviewWeb', () => {
         await waitForEvents([Events.STORY_PREPARED]);
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--a',
-          parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+          parameters: {
+            __isArgsStory: false,
+            docs: { container: expect.any(Function) },
+            fileName: './src/ComponentOne.stories.js',
+          },
           initialArgs: { foo: 'a' },
           argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
           args: { foo: 'a' },
@@ -1808,7 +1869,11 @@ describe('PreviewWeb', () => {
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
           expect.objectContaining({
             id: 'component-one--a',
-            parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+            parameters: {
+              __isArgsStory: false,
+              docs: { container: expect.any(Function) },
+              fileName: './src/ComponentOne.stories.js',
+            },
             initialArgs: { foo: 'a' },
             argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
             args: { foo: 'a' },
@@ -1833,7 +1898,11 @@ describe('PreviewWeb', () => {
             forceRemount: true,
             storyContext: expect.objectContaining({
               id: 'component-one--a',
-              parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+              parameters: {
+                __isArgsStory: false,
+                docs: { container: expect.any(Function) },
+                fileName: './src/ComponentOne.stories.js',
+              },
               globals: { a: 'b' },
               initialArgs: { foo: 'a' },
               argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
@@ -1944,6 +2013,50 @@ describe('PreviewWeb', () => {
   });
 
   describe('onStoriesChanged', () => {
+    describe('if stories.json endpoint 500s initially', () => {
+      it('recovers and renders the story', async () => {
+        document.location.search = '?id=component-one--a';
+        const err = new Error('sort error');
+        mockFetchResult = { status: 500, text: async () => err.toString() };
+
+        const preview = new PreviewWeb();
+        await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
+          'sort error'
+        );
+
+        expect(preview.view.showErrorDisplay).toHaveBeenCalled();
+        expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
+
+        mockChannel.emit.mockClear();
+        mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
+        preview.onStoryIndexChanged();
+        await waitForRender();
+        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+      });
+
+      it('sets story args from the URL', async () => {
+        document.location.search = '?id=component-one--a&args=foo:url';
+        const err = new Error('sort error');
+        mockFetchResult = { status: 500, text: async () => err.toString() };
+
+        const preview = new PreviewWeb();
+        await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
+          'sort error'
+        );
+
+        expect(preview.view.showErrorDisplay).toHaveBeenCalled();
+        expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, expect.any(Error));
+
+        mockChannel.emit.mockClear();
+        mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
+        preview.onStoryIndexChanged();
+        await waitForRender();
+        expect(preview.storyStore.args.get('component-one--a')).toEqual({
+          foo: 'url',
+        });
+      });
+    });
+
     describe('when the current story changes', () => {
       const newComponentOneExports = merge({}, componentOneExports, {
         a: { args: { foo: 'edited' } },
@@ -1989,7 +2102,11 @@ describe('PreviewWeb', () => {
 
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {
           id: 'component-one--a',
-          parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+          parameters: {
+            __isArgsStory: false,
+            docs: { container: expect.any(Function) },
+            fileName: './src/ComponentOne.stories.js',
+          },
           initialArgs: { foo: 'edited' },
           argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
           args: { foo: 'edited' },
@@ -2022,7 +2139,11 @@ describe('PreviewWeb', () => {
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
           expect.objectContaining({
             id: 'component-one--a',
-            parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+            parameters: {
+              __isArgsStory: false,
+              docs: { container: expect.any(Function) },
+              fileName: './src/ComponentOne.stories.js',
+            },
             initialArgs: { foo: 'edited' },
             argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
             args: { foo: 'edited' },
@@ -2044,7 +2165,11 @@ describe('PreviewWeb', () => {
             forceRemount: true,
             storyContext: expect.objectContaining({
               id: 'component-one--a',
-              parameters: { __isArgsStory: false, docs: { container: expect.any(Function) } },
+              parameters: {
+                __isArgsStory: false,
+                docs: { container: expect.any(Function) },
+                fileName: './src/ComponentOne.stories.js',
+              },
               globals: { a: 'b' },
               initialArgs: { foo: 'edited' },
               argTypes: { foo: { name: 'foo', type: { name: 'string' } } },
@@ -2343,7 +2468,7 @@ describe('PreviewWeb', () => {
         },
       };
 
-      it('renders story missing', async () => {
+      it('renders loading error', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
@@ -2351,7 +2476,7 @@ describe('PreviewWeb', () => {
         preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
         await waitForEvents([Events.STORY_MISSING]);
 
-        expect(preview.view.showNoPreview).toHaveBeenCalled();
+        expect(preview.view.showErrorDisplay).toHaveBeenCalled();
         expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--a');
       });
 
@@ -2388,24 +2513,68 @@ describe('PreviewWeb', () => {
   });
 
   describe('onGetProjectAnnotationsChanged', () => {
+    describe('if initial getProjectAnnotations threw', () => {
+      it('recovers and renders the story', async () => {
+        document.location.search = '?id=component-one--a';
+
+        const err = new Error('meta error');
+        const preview = new PreviewWeb();
+        await expect(
+          preview.initialize({
+            importFn,
+            getProjectAnnotations: () => {
+              throw err;
+            },
+          })
+        ).rejects.toThrow(err);
+
+        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+        await waitForRender();
+
+        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
+      });
+
+      it('sets globals from the URL', async () => {
+        document.location.search = '?id=*&globals=a:c';
+
+        const err = new Error('meta error');
+        const preview = new PreviewWeb();
+        await expect(
+          preview.initialize({
+            importFn,
+            getProjectAnnotations: () => {
+              throw err;
+            },
+          })
+        ).rejects.toThrow(err);
+
+        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+        await waitForRender();
+
+        expect(preview.storyStore.globals.get()).toEqual({ a: 'c' });
+      });
+    });
+
     it('shows an error the new value throws', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
       const err = new Error('error getting meta');
-      await preview.onGetProjectAnnotationsChanged({
-        getProjectAnnotations: () => {
-          throw err;
-        },
-      });
+      await expect(
+        preview.onGetProjectAnnotationsChanged({
+          getProjectAnnotations: () => {
+            throw err;
+          },
+        })
+      ).rejects.toThrow(err);
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
       expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
     });
 
     const newGlobalDecorator = jest.fn((s) => s());
-    const newGetGlobalMeta = () => {
+    const newGetProjectAnnotations = () => {
       return {
         ...projectAnnotations,
         args: { global: 'added' },
@@ -2419,18 +2588,33 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetGlobalMeta });
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
       expect(preview.storyStore.globals.get()).toEqual({ a: 'edited' });
     });
 
+    it('emits SET_GLOBALS with new values', async () => {
+      document.location.search = '?id=component-one--a';
+      const preview = await createAndRenderPreview();
+
+      mockChannel.emit.mockClear();
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+      await waitForRender();
+
+      await waitForEvents([Events.SET_GLOBALS]);
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.SET_GLOBALS, {
+        globals: { a: 'edited' },
+        globalTypes: {},
+      });
+    });
+
     it('updates args to their new values', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetGlobalMeta });
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
       expect(preview.storyStore.args.get('component-one--a')).toEqual({
@@ -2439,13 +2623,27 @@ describe('PreviewWeb', () => {
       });
     });
 
+    it('emits SET_STORY_ARGS with new values', async () => {
+      document.location.search = '?id=component-one--a';
+      const preview = await createAndRenderPreview();
+
+      mockChannel.emit.mockClear();
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+      await waitForRender();
+
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {
+        storyId: 'component-one--a',
+        args: { foo: 'a', global: 'added' },
+      });
+    });
+
     it('rerenders the current story with new global meta-generated context', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       projectAnnotations.renderToDOM.mockClear();
       mockChannel.emit.mockClear();
-      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetGlobalMeta });
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
       expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
index 8baa5e30e4c..9d906ef9944 100644
--- a/lib/preview-web/src/PreviewWeb.tsx
+++ b/lib/preview-web/src/PreviewWeb.tsx
@@ -38,7 +38,7 @@ function focusInInput(event: Event) {
   return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }
 
-function createController() {
+function createController(): AbortController {
   if (AbortController) return new AbortController();
   // Polyfill for IE11
   return {
@@ -46,10 +46,17 @@ function createController() {
     abort() {
       this.signal.aborted = true;
     },
-  };
+  } as AbortController;
 }
 
-export type RenderPhase = 'loading' | 'rendering' | 'playing' | 'completed' | 'aborted' | 'errored';
+export type RenderPhase =
+  | 'loading'
+  | 'rendering'
+  | 'playing'
+  | 'played'
+  | 'completed'
+  | 'aborted'
+  | 'errored';
 type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
 type MaybePromise<T> = Promise<T> | T;
 type StoryCleanupFn = () => MaybePromise<void>;
@@ -67,6 +74,10 @@ export class PreviewWeb<TFramework extends AnyFramework> {
 
   view: WebView;
 
+  getStoryIndex?: () => StoryIndex;
+
+  importFn?: ModuleImportFn;
+
   renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'];
 
   previousSelection: Selection;
@@ -75,9 +86,13 @@ export class PreviewWeb<TFramework extends AnyFramework> {
 
   previousCleanup: StoryCleanupFn;
 
+  abortController: AbortController;
+
+  disableKeyListeners: boolean;
+
   constructor() {
     this.channel = addons.getChannel();
-    if (global.FEATURES?.storyStoreV7) {
+    if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) {
       this.serverChannel = addons.getServerChannel();
     }
     this.view = new WebView();
@@ -96,6 +111,8 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     );
   }
 
+  // INITIALIZATION
+
   // NOTE: the reason that the preview and store's initialization code is written in a promise
   // style and not `async-await`, and the use of `SynchronousPromise`s is in order to allow
   // storyshots to immediately call `raw()` on the store without waiting for a later tick.
@@ -112,74 +129,17 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     getStoryIndex?: () => StoryIndex;
     importFn: ModuleImportFn;
     getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>;
-  }): PromiseLike<void> {
-    return this.getProjectAnnotationsOrRenderError(getProjectAnnotations).then(
-      (projectAnnotations) => {
-        this.storyStore.setProjectAnnotations(projectAnnotations);
+  }) {
+    // We save these two on initialization in case `getProjectAnnotations` errors,
+    // in which case we may need them later when we recover.
+    this.getStoryIndex = getStoryIndex;
+    this.importFn = importFn;
 
-        this.setupListeners();
+    this.setupListeners();
 
-        let storyIndexPromise: PromiseLike<StoryIndex>;
-        if (global.FEATURES?.storyStoreV7) {
-          storyIndexPromise = this.getStoryIndexFromServer();
-        } else {
-          if (!getStoryIndex) {
-            throw new Error('No `getStoryIndex` passed defined in v6 mode');
-          }
-          storyIndexPromise = SynchronousPromise.resolve().then(getStoryIndex);
-        }
-
-        return storyIndexPromise
-          .then((storyIndex: StoryIndex) => {
-            return this.storyStore
-              .initialize({
-                storyIndex,
-                importFn,
-                cache: !global.FEATURES?.storyStoreV7,
-              })
-              .then(() => {
-                if (!global.FEATURES?.storyStoreV7) {
-                  this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
-                }
-
-                this.setGlobalsAndRenderSelection();
-              });
-          })
-          .catch((err) => {
-            logger.warn(err);
-            this.renderPreviewEntryError(err);
-          });
-      }
-    );
-  }
-
-  getProjectAnnotationsOrRenderError(
-    getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>
-  ): PromiseLike<ProjectAnnotations<TFramework>> {
-    return SynchronousPromise.resolve()
-      .then(() => getProjectAnnotations())
-      .then((projectAnnotations) => {
-        this.renderToDOM = projectAnnotations.renderToDOM;
-        if (!this.renderToDOM) {
-          throw new Error(dedent`
-            Expected 'framework' in your main.js to export 'renderToDOM', but none found.
-
-            You can fix this automatically by running:
-
-            npx sb@next automigrate
-        
-            More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field          
-          `);
-        }
-        return projectAnnotations;
-      })
-      .catch((err) => {
-        logger.warn(err);
-        // This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and
-        // needs to be show to the user as a simple error
-        this.renderPreviewEntryError(err);
-        return {};
-      });
+    return this.getProjectAnnotationsOrRenderError(
+      getProjectAnnotations
+    ).then((projectAnnotations) => this.initializeWithProjectAnnotations(projectAnnotations));
   }
 
   setupListeners() {
@@ -194,23 +154,99 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     this.channel.on(Events.RESET_STORY_ARGS, this.onResetArgs.bind(this));
   }
 
-  async setGlobalsAndRenderSelection() {
+  getProjectAnnotationsOrRenderError(
+    getProjectAnnotations: () => MaybePromise<WebProjectAnnotations<TFramework>>
+  ): PromiseLike<ProjectAnnotations<TFramework>> {
+    return SynchronousPromise.resolve()
+      .then(getProjectAnnotations)
+      .then((projectAnnotations) => {
+        this.renderToDOM = projectAnnotations.renderToDOM;
+        if (!this.renderToDOM) {
+          throw new Error(dedent`
+            Expected your framework's preset to export a \`renderToDOM\` field.
+
+            Perhaps it needs to be upgraded for Storybook 6.4?
+
+            More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field          
+          `);
+        }
+        return projectAnnotations;
+      })
+      .catch((err) => {
+        // This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and
+        // needs to be show to the user as a simple error
+        this.renderPreviewEntryError('Error reading preview.js:', err);
+        throw err;
+      });
+  }
+
+  // If initialization gets as far as project annotations, this function runs.
+  initializeWithProjectAnnotations(projectAnnotations: WebProjectAnnotations<TFramework>) {
+    this.storyStore.setProjectAnnotations(projectAnnotations);
+
+    this.setInitialGlobals();
+
+    let storyIndexPromise: PromiseLike<StoryIndex>;
+    if (global.FEATURES?.storyStoreV7) {
+      storyIndexPromise = this.getStoryIndexFromServer();
+    } else {
+      if (!this.getStoryIndex) {
+        throw new Error('No `getStoryIndex` passed defined in v6 mode');
+      }
+      storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex);
+    }
+
+    return storyIndexPromise
+      .then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex))
+      .catch((err) => {
+        this.renderPreviewEntryError('Error loading story index:', err);
+        throw err;
+      });
+  }
+
+  async setInitialGlobals() {
     const { globals } = this.urlStore.selectionSpecifier || {};
     if (globals) {
       this.storyStore.globals.updateFromPersisted(globals);
     }
+    this.emitGlobals();
+  }
+
+  emitGlobals() {
     this.channel.emit(Events.SET_GLOBALS, {
       globals: this.storyStore.globals.get() || {},
       globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
     });
+  }
 
-    return this.selectSpecifiedStory();
+  async getStoryIndexFromServer() {
+    const result = await fetch(STORY_INDEX_PATH);
+    if (result.status === 200) return result.json() as StoryIndex;
+
+    throw new Error(await result.text());
+  }
+
+  // If initialization gets as far as the story index, this function runs.
+  initializeWithStoryIndex(storyIndex: StoryIndex) {
+    return this.storyStore
+      .initialize({
+        storyIndex,
+        importFn: this.importFn,
+        cache: !global.FEATURES?.storyStoreV7,
+      })
+      .then(() => {
+        if (!global.FEATURES?.storyStoreV7) {
+          this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
+        }
+
+        return this.selectSpecifiedStory();
+      });
   }
 
   // Use the selection specifier to choose a story, then render it
   async selectSpecifiedStory() {
     if (!this.urlStore.selectionSpecifier) {
-      await this.renderMissingStory();
+      this.renderMissingStory();
       return;
     }
 
@@ -218,7 +254,15 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     const storyId = this.storyStore.storyIndex.storyIdFromSpecifier(storySpecifier);
 
     if (!storyId) {
-      await this.renderMissingStory(storySpecifier);
+      if (storySpecifier === '*') {
+        this.renderMissingStory();
+      } else {
+        this.renderStoryLoadingException(
+          storySpecifier,
+          new Error(`Couldn't find story matching ${storySpecifier}.`)
+        );
+      }
+
       return;
     }
 
@@ -230,8 +274,71 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     await this.renderSelection({ persistedArgs: args });
   }
 
+  // EVENT HANDLERS
+
+  // This happens when a config file gets reloaded
+  async onGetProjectAnnotationsChanged({
+    getProjectAnnotations,
+  }: {
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
+  }) {
+    const projectAnnotations = await this.getProjectAnnotationsOrRenderError(getProjectAnnotations);
+    if (!this.storyStore.projectAnnotations) {
+      await this.initializeWithProjectAnnotations(projectAnnotations);
+      return;
+    }
+
+    await this.storyStore.setProjectAnnotations(projectAnnotations);
+    this.emitGlobals();
+    this.renderSelection();
+  }
+
+  async onStoryIndexChanged() {
+    if (!this.storyStore.projectAnnotations) {
+      // We haven't successfully set project annotations yet,
+      // we need to do that before we can do anything else.
+      return;
+    }
+
+    try {
+      const storyIndex = await this.getStoryIndexFromServer();
+
+      // This is the first time the story index worked, let's load it into the store
+      if (!this.storyStore.storyIndex) {
+        await this.initializeWithStoryIndex(storyIndex);
+      }
+
+      // Update the store with the new stories.
+      await this.onStoriesChanged({ storyIndex });
+    } catch (err) {
+      this.renderPreviewEntryError('Error loading story index:', err);
+      throw err;
+    }
+  }
+
+  // This happens when a glob gets HMR-ed
+  async onStoriesChanged({
+    importFn,
+    storyIndex,
+  }: {
+    importFn?: ModuleImportFn;
+    storyIndex?: StoryIndex;
+  }) {
+    await this.storyStore.onStoriesChanged({ importFn, storyIndex });
+    if (!global.FEATURES?.storyStoreV7) {
+      this.channel.emit(Events.SET_STORIES, await this.storyStore.getSetStoriesPayload());
+    }
+
+    if (this.urlStore.selection) {
+      await this.renderSelection();
+    } else {
+      // Our selection has never applied before, but maybe it does now, let's try!
+      await this.selectSpecifiedStory();
+    }
+  }
+
   onKeydown(event: KeyboardEvent) {
-    if (!focusInInput(event)) {
+    if (!this.disableKeyListeners && !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;
       this.channel.emit(Events.PREVIEW_KEYDOWN, {
@@ -286,53 +393,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     this.onUpdateArgs({ storyId, updatedArgs });
   }
 
-  async onStoryIndexChanged() {
-    const storyIndex = await this.getStoryIndexFromServer();
-    return this.onStoriesChanged({ storyIndex });
-  }
-
-  // This happens when a glob gets HMR-ed
-  async onStoriesChanged({
-    importFn,
-    storyIndex,
-  }: {
-    importFn?: ModuleImportFn;
-    storyIndex?: StoryIndex;
-  }) {
-    await this.storyStore.onStoriesChanged({ importFn, storyIndex });
-
-    if (this.urlStore.selection) {
-      await this.renderSelection();
-    } else {
-      await this.selectSpecifiedStory();
-    }
-
-    if (!global.FEATURES?.storyStoreV7) {
-      this.channel.emit(Events.SET_STORIES, await this.storyStore.getSetStoriesPayload());
-    }
-  }
-
-  // This happens when a config file gets reloade
-  async onGetProjectAnnotationsChanged({
-    getProjectAnnotations,
-  }: {
-    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
-  }) {
-    const projectAnnotations = await this.getProjectAnnotationsOrRenderError(getProjectAnnotations);
-    if (!projectAnnotations) {
-      return;
-    }
-
-    this.storyStore.setProjectAnnotations(projectAnnotations);
-    this.renderSelection();
-  }
-
-  async getStoryIndexFromServer() {
-    const result = await fetch(STORY_INDEX_PATH);
-    if (result.status === 200) return result.json() as StoryIndex;
-
-    throw new Error(await result.text());
-  }
+  // RENDERING
 
   // We can either have:
   // - a story selected in "story" viewMode,
@@ -340,22 +401,20 @@ export class PreviewWeb<TFramework extends AnyFramework> {
   // - a story selected in "docs" viewMode,
   //     in which case we render the docsPage for that story
   async renderSelection({ persistedArgs }: { persistedArgs?: Args } = {}) {
-    if (!this.urlStore.selection) {
+    const { selection } = this.urlStore;
+    if (!selection) {
       throw new Error('Cannot render story as no selection was made');
     }
 
-    const {
-      selection,
-      selection: { storyId },
-    } = this.urlStore;
+    const { storyId } = selection;
 
     let story;
     try {
       story = await this.storyStore.loadStory({ storyId });
     } catch (err) {
+      await this.cleanupPreviousRender();
       this.previousStory = null;
-      logger.warn(err);
-      await this.renderMissingStory(storyId);
+      this.renderStoryLoadingException(storyId, err);
       return;
     }
 
@@ -396,8 +455,11 @@ export class PreviewWeb<TFramework extends AnyFramework> {
         args,
       });
     }
-    // If the implementation changed, the args also may have changed
-    if (implementationChanged) {
+
+    // For v6 mode / compatibility
+    // If the implementation changed, or args were persisted, the args may have changed,
+    // and the STORY_PREPARED event above may not be respected.
+    if (implementationChanged || persistedArgs) {
       this.channel.emit(Events.STORY_ARGS_UPDATED, { storyId, args });
     }
 
@@ -487,7 +549,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
   renderStoryToElement({
     story,
     renderContext: renderContextWithoutStoryContext,
-    element,
+    element: canvasElement,
   }: {
     story: Story<TFramework>;
     renderContext: Omit<
@@ -498,28 +560,24 @@ export class PreviewWeb<TFramework extends AnyFramework> {
   }): StoryCleanupFn {
     const { id, applyLoaders, unboundStoryFn, playFunction } = story;
 
+    let notYetRendered = true;
     let phase: RenderPhase;
     const isPending = () => ['rendering', 'playing'].includes(phase);
 
-    let controller: AbortController;
-    let notYetRendered = true;
-    const render = async ({ forceRemount = false } = {}) => {
-      let ctrl = controller; // we also need a stable reference within this closure
+    this.abortController = createController();
 
-      // Abort the signal used by the previous render, so it'll (hopefully) stop executing. The
-      // play function might continue execution regardless, which we deal with during cleanup.
-      // Note we can't reload the page here because there's a legitimate use case for forceRemount
-      // while in the 'playing' phase: the play function may never resolve during debugging, while
-      // "step back" will trigger a forceRemount. In this case it's up to the debugger to reload.
-      if (ctrl) ctrl.abort();
-      ctrl = createController();
-      controller = ctrl;
+    const render = async ({ initial = false, forceRemount = false } = {}) => {
+      if (forceRemount && !initial) {
+        this.abortController.abort();
+        this.abortController = createController();
+      }
 
-      const runPhase = async (phaseName: RenderPhase, phaseFn: () => MaybePromise<void>) => {
+      const abortSignal = this.abortController.signal; // we need a stable reference to the signal
+      const runPhase = async (phaseName: RenderPhase, phaseFn?: () => MaybePromise<void>) => {
         phase = phaseName;
         this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: phase, storyId: id });
-        await phaseFn();
-        if (ctrl.signal.aborted) {
+        if (phaseFn) await phaseFn();
+        if (abortSignal.aborted) {
           phase = 'aborted';
           this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: phase, storyId: id });
         }
@@ -530,18 +588,18 @@ export class PreviewWeb<TFramework extends AnyFramework> {
         await runPhase('loading', async () => {
           loadedContext = await applyLoaders({
             ...this.storyStore.getStoryContext(story),
-            viewMode: element === this.view.storyRoot() ? 'story' : 'docs',
+            viewMode: canvasElement === this.view.storyRoot() ? 'story' : 'docs',
           } as StoryContextForLoaders<TFramework>);
         });
-        if (ctrl.signal.aborted) return;
+        if (abortSignal.aborted) return;
 
         const renderStoryContext: StoryContext<TFramework> = {
           ...loadedContext,
           // By this stage, it is possible that new args/globals have been received for this story
           // and we need to ensure we render it with the new values
           ...this.storyStore.getStoryContext(story),
-          abortSignal: ctrl.signal,
-          canvasElement: element,
+          abortSignal,
+          canvasElement,
         };
         const renderContext: RenderContext<TFramework> = {
           ...renderContextWithoutStoryContext,
@@ -551,13 +609,16 @@ export class PreviewWeb<TFramework extends AnyFramework> {
           unboundStoryFn,
         };
 
-        await runPhase('rendering', () => this.renderToDOM(renderContext, element));
+        await runPhase('rendering', () => this.renderToDOM(renderContext, canvasElement));
         notYetRendered = false;
-        if (ctrl.signal.aborted) return;
+        if (abortSignal.aborted) return;
 
         if (forceRemount && playFunction) {
+          this.disableKeyListeners = true;
           await runPhase('playing', () => playFunction(renderContext.storyContext));
-          if (ctrl.signal.aborted) return;
+          await runPhase('played');
+          this.disableKeyListeners = false;
+          if (abortSignal.aborted) return;
         }
 
         await runPhase('completed', () => this.channel.emit(Events.STORY_RENDERED, id));
@@ -570,7 +631,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     // function below right away, so if the user changes story during the first render we can cancel
     // it without having to first wait for it to finish.
     // Whenever the selection changes we want to force the component to be remounted.
-    render({ forceRemount: true });
+    render({ initial: true, forceRemount: true });
 
     const remountStoryIfMatches = ({ storyId }: { storyId: StoryId }) => {
       if (storyId === story.id) render({ forceRemount: true });
@@ -594,7 +655,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
       // (possibly the loaders or the play function are still running). We use the controller
       // as a method to abort them, ASAP, but this is not foolproof as we cannot control what
       // happens inside the user's code.
-      controller.abort();
+      this.abortController.abort();
 
       this.storyStore.cleanupStory(story);
       this.channel.off(Events.UPDATE_GLOBALS, render);
@@ -639,32 +700,43 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     }
   }
 
-  renderPreviewEntryError(err: Error) {
+  renderPreviewEntryError(reason: string, err: Error) {
+    logger.error(reason);
+    logger.error(err);
     this.view.showErrorDisplay(err);
     this.channel.emit(Events.CONFIG_ERROR, err);
   }
 
-  async renderMissingStory(storySpecifier?: StorySpecifier) {
-    await this.cleanupPreviousRender();
+  renderMissingStory() {
+    logger.error(`No story selected`);
     this.view.showNoPreview();
+    this.channel.emit(Events.STORY_MISSING);
+  }
+
+  renderStoryLoadingException(storySpecifier: StorySpecifier, err: Error) {
+    logger.error(`Unable to load story '${storySpecifier}':`);
+    logger.error(err);
+    this.view.showErrorDisplay(err);
     this.channel.emit(Events.STORY_MISSING, storySpecifier);
   }
 
   // renderException is used if we fail to render the story and it is uncaught by the app layer
-  renderException(storyId: StoryId, error: Error) {
-    this.channel.emit(Events.STORY_THREW_EXCEPTION, error);
+  renderException(storyId: StoryId, err: Error) {
+    this.channel.emit(Events.STORY_THREW_EXCEPTION, err);
     this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
 
     // Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
-    if (error !== IGNORED_EXCEPTION) {
-      this.view.showErrorDisplay(error);
-      logger.error(error);
+    if (err !== IGNORED_EXCEPTION) {
+      this.view.showErrorDisplay(err);
+      logger.error(`Error rendering story '${storyId}':`);
+      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(storyId: StoryId, { title, description }: { title: string; description: string }) {
+    logger.error(`Error rendering story ${title}: ${description}`);
     this.channel.emit(Events.STORY_ERRORED, { title, description });
     this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
     this.view.showErrorDisplay({
diff --git a/lib/preview-web/src/UrlStore.ts b/lib/preview-web/src/UrlStore.ts
index b3761368871..86437da74e8 100644
--- a/lib/preview-web/src/UrlStore.ts
+++ b/lib/preview-web/src/UrlStore.ts
@@ -17,20 +17,30 @@ export function pathToId(path: string) {
   return match[1];
 }
 
-const getQueryString = (selection: Selection, extraParams?: qs.ParsedQs) => {
+const getQueryString = ({
+  selection,
+  extraParams,
+}: {
+  selection?: Selection;
+  extraParams?: qs.ParsedQs;
+}) => {
   const { search = '' } = document.location;
   const { path, selectedKind, selectedStory, ...rest } = qs.parse(search, {
     ignoreQueryPrefix: true,
   });
   return qs.stringify(
-    { ...rest, ...extraParams, id: selection.storyId, viewMode: selection.viewMode },
+    {
+      ...rest,
+      ...extraParams,
+      ...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
+    },
     { encode: false, addQueryPrefix: true }
   );
 };
 
 export const setPath = (selection?: Selection) => {
   if (!selection) return;
-  const query = getQueryString(selection);
+  const query = getQueryString({ selection });
   const { hash = '' } = document.location;
   history.replaceState({}, '', `${document.location.pathname}${query}${hash}`);
 };
@@ -103,7 +113,7 @@ export class UrlStore {
   }
 
   setQueryParams(queryParams: qs.ParsedQs) {
-    const query = getQueryString(this.selection, queryParams);
+    const query = getQueryString({ extraParams: queryParams });
     const { hash = '' } = document.location;
     history.replaceState({}, '', `${document.location.pathname}${query}${hash}`);
   }
diff --git a/lib/router/package.json b/lib/router/package.json
index e8d9bcc31e5..a471e0a174b 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -40,11 +40,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
-    "history": "^5.0.1",
+    "history": "5.0.0",
     "lodash": "^4.17.20",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/source-loader/README.md b/lib/source-loader/README.md
index a2c825b77e8..2d724e8fee5 100644
--- a/lib/source-loader/README.md
+++ b/lib/source-loader/README.md
@@ -30,7 +30,7 @@ Usage:
 module.exports = function ({ config }) {
   config.module.rules.push({
     test: /\.stories\.tsx?$/,
-    loaders: [
+    use: [
       {
         loader: require.resolve('@storybook/source-loader'),
         options: { parser: 'typescript' },
@@ -65,7 +65,7 @@ Usage:
 module.exports = function ({ config }) {
   config.module.rules.push({
     test: /\.stories\.jsx?$/,
-    loaders: [
+    use: [
       {
         loader: require.resolve('@storybook/source-loader'),
         options: {
@@ -99,7 +99,7 @@ Usage:
 module.exports = function ({ config }) {
   config.module.rules.push({
     test: /\.stories\.jsx?$/,
-    loaders: [
+    use: [
       {
         loader: require.resolve('@storybook/source-loader'),
         options: {
@@ -126,7 +126,7 @@ Usage:
 module.exports = function ({ config }) {
   config.module.rules.push({
     test: /\.stories\.jsx?$/,
-    loaders: [
+    use: [
       {
         loader: require.resolve('@storybook/source-loader'),
         options: { injectDecorator: false },
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index f65900c78e5..e4c5c296ccb 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -41,8 +41,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/store/package.json b/lib/store/package.json
index bea9297a095..388e2dd6d06 100644
--- a/lib/store/package.json
+++ b/lib/store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/store/src/StoryIndexStore.ts b/lib/store/src/StoryIndexStore.ts
index 2337600906f..13c64c4d4d3 100644
--- a/lib/store/src/StoryIndexStore.ts
+++ b/lib/store/src/StoryIndexStore.ts
@@ -8,7 +8,7 @@ export class StoryIndexStore {
 
   stories: StoryIndex['stories'];
 
-  constructor({ stories }: StoryIndex) {
+  constructor({ stories }: StoryIndex = { v: 3, stories: {} }) {
     this.stories = stories;
   }
 
diff --git a/lib/store/src/StoryStore.test.ts b/lib/store/src/StoryStore.test.ts
index 78c6fa8daa7..1a85a832c68 100644
--- a/lib/store/src/StoryStore.test.ts
+++ b/lib/store/src/StoryStore.test.ts
@@ -333,6 +333,7 @@ describe('StoryStore', () => {
             "name": "A",
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentOne-new.stories.js",
             },
             "playFunction": undefined,
             "story": "A",
@@ -480,6 +481,7 @@ describe('StoryStore', () => {
             "name": "A",
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentOne.stories.js",
             },
             "playFunction": undefined,
             "story": "A",
@@ -514,6 +516,7 @@ describe('StoryStore', () => {
             "name": "B",
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentOne.stories.js",
             },
             "playFunction": undefined,
             "story": "B",
@@ -548,6 +551,7 @@ describe('StoryStore', () => {
             "name": "C",
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentTwo.stories.js",
             },
             "playFunction": undefined,
             "story": "C",
@@ -622,6 +626,7 @@ describe('StoryStore', () => {
             "originalStoryFn": [MockFunction],
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentOne.stories.js",
             },
             "playFunction": undefined,
             "story": "A",
@@ -658,6 +663,7 @@ describe('StoryStore', () => {
             "originalStoryFn": [MockFunction],
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentOne.stories.js",
             },
             "playFunction": undefined,
             "story": "B",
@@ -694,6 +700,7 @@ describe('StoryStore', () => {
             "originalStoryFn": [MockFunction],
             "parameters": Object {
               "__isArgsStory": false,
+              "fileName": "./src/ComponentTwo.stories.js",
             },
             "playFunction": undefined,
             "story": "C",
@@ -754,6 +761,7 @@ describe('StoryStore', () => {
               "name": "A",
               "parameters": Object {
                 "__isArgsStory": false,
+                "fileName": "./src/ComponentOne.stories.js",
               },
               "playFunction": undefined,
               "story": "A",
@@ -788,6 +796,7 @@ describe('StoryStore', () => {
               "name": "B",
               "parameters": Object {
                 "__isArgsStory": false,
+                "fileName": "./src/ComponentOne.stories.js",
               },
               "playFunction": undefined,
               "story": "B",
@@ -822,6 +831,7 @@ describe('StoryStore', () => {
               "name": "C",
               "parameters": Object {
                 "__isArgsStory": false,
+                "fileName": "./src/ComponentTwo.stories.js",
               },
               "playFunction": undefined,
               "story": "C",
diff --git a/lib/store/src/StoryStore.ts b/lib/store/src/StoryStore.ts
index 9f12bc98dd6..b4d486b47c7 100644
--- a/lib/store/src/StoryStore.ts
+++ b/lib/store/src/StoryStore.ts
@@ -115,7 +115,7 @@ export class StoryStore<TFramework extends AnyFramework> {
     importFn,
     cache = false,
   }: {
-    storyIndex: StoryIndex;
+    storyIndex?: StoryIndex;
     importFn: ModuleImportFn;
     cache?: boolean;
   }): PromiseLike<void> {
@@ -149,7 +149,7 @@ export class StoryStore<TFramework extends AnyFramework> {
     const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
     return this.importFn(importPath).then((moduleExports) =>
       // We pass the title in here as it may have been generated by autoTitle on the server.
-      this.processCSFFileWithCache(moduleExports, title)
+      this.processCSFFileWithCache(moduleExports, importPath, title)
     );
   }
 
diff --git a/lib/store/src/args.test.ts b/lib/store/src/args.test.ts
index 952ab73fa29..f251fa3237f 100644
--- a/lib/store/src/args.test.ts
+++ b/lib/store/src/args.test.ts
@@ -1,5 +1,11 @@
 import { once } from '@storybook/client-logger';
-import { combineArgs, mapArgsToTypes, validateOptions } from './args';
+import {
+  combineArgs,
+  groupArgsByTarget,
+  mapArgsToTypes,
+  NO_TARGET_NAME,
+  validateOptions,
+} from './args';
 
 const stringType = { name: 'string' };
 const numberType = { name: 'number' };
@@ -238,3 +244,37 @@ describe('validateOptions', () => {
     );
   });
 });
+
+describe('groupArgsByTarget', () => {
+  it('groups targeted args', () => {
+    const groups = groupArgsByTarget({
+      args: { a: 1, b: 2, c: 3 },
+      argTypes: { a: { target: 'group1' }, b: { target: 'group2' }, c: { target: 'group2' } },
+    } as any);
+    expect(groups).toEqual({
+      group1: {
+        a: 1,
+      },
+      group2: {
+        b: 2,
+        c: 3,
+      },
+    });
+  });
+
+  it('groups non-targetted args into a group with no name', () => {
+    const groups = groupArgsByTarget({
+      args: { a: 1, b: 2, c: 3 },
+      argTypes: { b: { name: 'b', target: 'group2' }, c: {} },
+    } as any);
+    expect(groups).toEqual({
+      [NO_TARGET_NAME]: {
+        a: 1,
+        c: 3,
+      },
+      group2: {
+        b: 2,
+      },
+    });
+  });
+});
diff --git a/lib/store/src/args.ts b/lib/store/src/args.ts
index 2efe576a64f..e33e8d641f3 100644
--- a/lib/store/src/args.ts
+++ b/lib/store/src/args.ts
@@ -1,5 +1,5 @@
 import deepEqual from 'fast-deep-equal';
-import { SBType, Args, ArgTypes } from '@storybook/csf';
+import { SBType, Args, ArgTypes, StoryContext, AnyFramework } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
 import isPlainObject from 'lodash/isPlainObject';
 import dedent from 'ts-dedent';
@@ -137,3 +137,22 @@ export const deepDiff = (value: any, update: any): any => {
   }
   return update;
 };
+
+export const NO_TARGET_NAME = '';
+export function groupArgsByTarget<TArgs = Args>({
+  args,
+  argTypes,
+}: StoryContext<AnyFramework, TArgs>) {
+  const groupedArgs: Record<string, Partial<TArgs>> = {};
+  (Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => {
+    const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target: string };
+
+    groupedArgs[target] = groupedArgs[target] || {};
+    groupedArgs[target][name] = value;
+  });
+  return groupedArgs;
+}
+
+export function noTargetArgs<TArgs = Args>(context: StoryContext<AnyFramework, TArgs>) {
+  return groupArgsByTarget(context)[NO_TARGET_NAME];
+}
diff --git a/lib/store/src/prepareStory.test.ts b/lib/store/src/prepareStory.test.ts
index c2a00652d7a..06806224515 100644
--- a/lib/store/src/prepareStory.test.ts
+++ b/lib/store/src/prepareStory.test.ts
@@ -1,3 +1,4 @@
+import global from 'global';
 import addons, { HooksContext } from '@storybook/addons';
 import {
   AnyFramework,
@@ -6,6 +7,7 @@ import {
   SBScalarType,
   StoryContext,
 } from '@storybook/csf';
+import { NO_TARGET_NAME } from './args';
 import { prepareStory } from './prepareStory';
 
 jest.mock('global', () => ({
@@ -38,6 +40,10 @@ const complexType: SBObjectType = {
   },
 };
 
+beforeEach(() => {
+  global.FEATURES = { breakingChangesV7: true };
+});
+
 describe('prepareStory', () => {
   describe('parameters', () => {
     it('are combined in the right order', () => {
@@ -470,18 +476,71 @@ describe('prepareStory', () => {
     });
   });
 
-  describe('playFunction', () => {
-    it('awaits play if defined', async () => {
-      const inner = jest.fn();
-      const play = jest.fn(async () => {
-        await new Promise((r) => setTimeout(r, 0)); // Ensure this puts an async boundary in
-        inner();
-      });
-      const { playFunction } = prepareStory({ id, name, play }, { id, title }, { render });
+  describe('with `FEATURES.argTypeTargetsV7`', () => {
+    beforeEach(() => {
+      global.FEATURES = { breakingChangesV7: true, argTypeTargetsV7: true };
+    });
+    it('filters out targeted args', () => {
+      const renderMock = jest.fn();
+      const firstStory = prepareStory(
+        {
+          id,
+          name,
+          args: { a: 1, b: 2 },
+          argTypes: { b: { name: 'b', target: 'foo' } },
+        },
+        { id, title },
+        { render: renderMock }
+      );
 
-      await playFunction({} as StoryContext<AnyFramework>);
-      expect(play).toHaveBeenCalled();
-      expect(inner).toHaveBeenCalled();
+      firstStory.unboundStoryFn({
+        args: firstStory.initialArgs,
+        hooks: new HooksContext(),
+        ...firstStory,
+      } as any);
+      expect(renderMock).toHaveBeenCalledWith(
+        { a: 1 },
+        expect.objectContaining({ args: { a: 1 }, allArgs: { a: 1, b: 2 } })
+      );
+    });
+
+    it('adds argsByTarget to context', () => {
+      const renderMock = jest.fn();
+      const firstStory = prepareStory(
+        {
+          id,
+          name,
+          args: { a: 1, b: 2 },
+          argTypes: { b: { name: 'b', target: 'foo' } },
+        },
+        { id, title },
+        { render: renderMock }
+      );
+
+      firstStory.unboundStoryFn({
+        args: firstStory.initialArgs,
+        hooks: new HooksContext(),
+        ...firstStory,
+      } as any);
+      expect(renderMock).toHaveBeenCalledWith(
+        { a: 1 },
+        expect.objectContaining({ argsByTarget: { [NO_TARGET_NAME]: { a: 1 }, foo: { b: 2 } } })
+      );
     });
   });
 });
+
+describe('playFunction', () => {
+  it('awaits play if defined', async () => {
+    const inner = jest.fn();
+    const play = jest.fn(async () => {
+      await new Promise((r) => setTimeout(r, 0)); // Ensure this puts an async boundary in
+      inner();
+    });
+    const { playFunction } = prepareStory({ id, name, play }, { id, title }, { render });
+
+    await playFunction({} as StoryContext<AnyFramework>);
+    expect(play).toHaveBeenCalled();
+    expect(inner).toHaveBeenCalled();
+  });
+});
diff --git a/lib/store/src/prepareStory.ts b/lib/store/src/prepareStory.ts
index df51b284e31..bbe9186c21f 100644
--- a/lib/store/src/prepareStory.ts
+++ b/lib/store/src/prepareStory.ts
@@ -22,6 +22,7 @@ import {
 import { combineParameters } from './parameters';
 import { applyHooks } from './hooks';
 import { defaultDecorateStory } from './decorators';
+import { groupArgsByTarget, NO_TARGET_NAME } from './args';
 
 const argTypeDefaultValueWarning = deprecate(
   () => {},
@@ -170,14 +171,28 @@ export function prepareStory<TFramework extends AnyFramework>(
       acc[key] = mapping && val in mapping ? mapping[val] : val;
       return acc;
     }, {} as Args);
-
     const mappedContext = { ...context, args: mappedArgs };
+
     const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
     return renderTimePassArgsFirst
-      ? (render as ArgsStoryFn<TFramework>)(mappedArgs, mappedContext)
+      ? (render as ArgsStoryFn<TFramework>)(mappedContext.args, mappedContext)
       : (render as LegacyStoryFn<TFramework>)(mappedContext);
   };
-  const unboundStoryFn = applyHooks<TFramework>(applyDecorators)(undecoratedStoryFn, decorators);
+  const decoratedStoryFn = applyHooks<TFramework>(applyDecorators)(undecoratedStoryFn, decorators);
+  const unboundStoryFn = (context: StoryContext<TFramework>) => {
+    let finalContext: StoryContext<TFramework> = context;
+    if (global.FEATURES?.argTypeTargetsV7) {
+      const argsByTarget = groupArgsByTarget({ args: context.args, ...context });
+      finalContext = {
+        ...context,
+        allArgs: context.args,
+        argsByTarget,
+        args: argsByTarget[NO_TARGET_NAME],
+      };
+    }
+
+    return decoratedStoryFn(finalContext);
+  };
   const playFunction = storyAnnotations.play;
 
   return Object.freeze({
diff --git a/lib/store/src/processCSFFile.test.ts b/lib/store/src/processCSFFile.test.ts
index 3c811642196..e5540f06990 100644
--- a/lib/store/src/processCSFFile.test.ts
+++ b/lib/store/src/processCSFFile.test.ts
@@ -8,10 +8,15 @@ describe('processCSFFile', () => {
         storyOne: { args: { a: 1 } },
         storyTwo: { args: { a: 2 } },
       },
+      './path/to/component.js',
       'Component'
     );
 
-    expect(meta).toEqual({ id: 'component', title: 'Component' });
+    expect(meta).toEqual({
+      id: 'component',
+      title: 'Component',
+      parameters: { fileName: './path/to/component.js' },
+    });
     expect(stories).toEqual({
       'component--story-one': expect.objectContaining({
         id: 'component--story-one',
@@ -32,13 +37,18 @@ describe('processCSFFile', () => {
         default: {},
         storyOne: {},
       },
+      './path/to/component.js',
       'Prefix/to/file'
     );
 
-    expect(meta).toEqual({ id: 'prefix-to-file', title: 'Prefix/to/file' });
+    expect(meta).toEqual({
+      id: 'prefix-to-file',
+      title: 'Prefix/to/file',
+      parameters: { fileName: './path/to/component.js' },
+    });
   });
 
-  it('adds stories in the right order if __namedExportsOrder is supplied', () => {
+  it('ignores __namedExportsOrder', () => {
     const { stories } = processCSFFile(
       {
         default: { title: 'Component' },
@@ -48,14 +58,15 @@ describe('processCSFFile', () => {
         w: () => 0,
         __namedExportsOrder: ['w', 'x', 'z', 'y'],
       },
+      './path/to/component.js',
       'Component'
     );
 
     expect(Object.keys(stories)).toEqual([
-      'component--w',
       'component--x',
-      'component--z',
       'component--y',
+      'component--z',
+      'component--w',
     ]);
   });
 
@@ -68,6 +79,7 @@ describe('processCSFFile', () => {
         z: () => 0,
         w: () => 0,
       },
+      './path/to/component.js',
       'Component'
     );
 
@@ -83,6 +95,7 @@ describe('processCSFFile', () => {
         z: () => 0,
         w: () => 0,
       },
+      './path/to/component.js',
       'Component'
     );
 
@@ -98,6 +111,7 @@ describe('processCSFFile', () => {
         z: () => 0,
         w: () => 0,
       },
+      './path/to/component.js',
       'Component'
     );
 
@@ -113,6 +127,7 @@ describe('processCSFFile', () => {
         z: () => 0,
         w: () => 0,
       },
+      './path/to/component.js',
       'Component'
     );
 
diff --git a/lib/store/src/processCSFFile.ts b/lib/store/src/processCSFFile.ts
index 472ae990b8e..dbb5e44a419 100644
--- a/lib/store/src/processCSFFile.ts
+++ b/lib/store/src/processCSFFile.ts
@@ -4,6 +4,7 @@ import { logger } from '@storybook/client-logger';
 import { ModuleExports, CSFFile, NormalizedComponentAnnotations } from './types';
 import { normalizeStory } from './normalizeStory';
 import { normalizeInputTypes } from './normalizeInputTypes';
+import { Path } from '.';
 
 const checkGlobals = (parameters: Parameters) => {
   const { globals, globalTypes } = parameters;
@@ -34,10 +35,10 @@ const checkDisallowedParameters = (parameters: Parameters) => {
 // Given the raw exports of a CSF file, check and normalize it.
 export function processCSFFile<TFramework extends AnyFramework>(
   moduleExports: ModuleExports,
+  importPath: Path,
   title: ComponentTitle
 ): CSFFile<TFramework> {
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
-  let exports = namedExports;
 
   const { id, argTypes } = defaultExport;
   const meta: NormalizedComponentAnnotations<TFramework> = {
@@ -45,26 +46,18 @@ export function processCSFFile<TFramework extends AnyFramework>(
     ...defaultExport,
     title,
     ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }),
+    parameters: {
+      fileName: importPath,
+      ...defaultExport.parameters,
+    },
   };
   checkDisallowedParameters(meta.parameters);
 
-  // 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 csfFile: CSFFile<TFramework> = { meta, stories: {} };
 
-  Object.keys(exports).forEach((key) => {
+  Object.keys(namedExports).forEach((key) => {
     if (isExportStory(key, meta)) {
-      const storyMeta = normalizeStory(key, exports[key], meta);
+      const storyMeta = normalizeStory(key, namedExports[key], meta);
       checkDisallowedParameters(storyMeta.parameters);
 
       csfFile.stories[storyMeta.id] = storyMeta;
diff --git a/lib/theming/package.json b/lib/theming/package.json
index f7f64669b93..abeedb7e7d3 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -43,7 +43,7 @@
     "@emotion/core": "^10.1.1",
     "@emotion/is-prop-valid": "^0.8.6",
     "@emotion/styled": "^10.0.27",
-    "@storybook/client-logger": "6.4.0-beta.26",
+    "@storybook/client-logger": "6.4.0-beta.31",
     "core-js": "^3.8.2",
     "deep-object-diff": "^1.1.0",
     "emotion-theming": "^10.0.27",
@@ -60,6 +60,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 26141220714..77e6c31134b 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -41,15 +41,15 @@
   },
   "dependencies": {
     "@emotion/core": "^10.1.1",
-    "@storybook/addons": "6.4.0-beta.26",
-    "@storybook/api": "6.4.0-beta.26",
-    "@storybook/channels": "6.4.0-beta.26",
-    "@storybook/client-logger": "6.4.0-beta.26",
-    "@storybook/components": "6.4.0-beta.26",
-    "@storybook/core-events": "6.4.0-beta.26",
-    "@storybook/router": "6.4.0-beta.26",
+    "@storybook/addons": "6.4.0-beta.31",
+    "@storybook/api": "6.4.0-beta.31",
+    "@storybook/channels": "6.4.0-beta.31",
+    "@storybook/client-logger": "6.4.0-beta.31",
+    "@storybook/components": "6.4.0-beta.31",
+    "@storybook/core-events": "6.4.0-beta.31",
+    "@storybook/router": "6.4.0-beta.31",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-beta.26",
+    "@storybook/theming": "6.4.0-beta.31",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.8.2",
     "core-js-pure": "^3.8.2",
@@ -86,6 +86,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e",
+  "gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/package.json b/package.json
index 2c0f84e90e7..9441faec91a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "6.4.0-beta.26",
+  "version": "6.4.0-beta.31",
   "private": true,
   "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
   "keywords": [
@@ -183,7 +183,7 @@
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/user-event": "^13.2.1",
     "@types/detect-port": "^1.3.0",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -252,6 +252,7 @@
     "mocha-list-tests": "^1.0.5",
     "node-cleanup": "^2.1.2",
     "node-fetch": "^2.6.1",
+    "node-gyp": "^8.4.0",
     "npmlog": "^5.0.1",
     "p-limit": "^3.1.0",
     "postcss-loader": "^4.2.0",
diff --git a/yarn.lock b/yarn.lock
index a87531cdf71..e1c7a4b96fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4411,6 +4411,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gar/promisify@npm:^1.0.1":
+  version: 1.1.2
+  resolution: "@gar/promisify@npm:1.1.2"
+  checksum: 5272869fb1e0b765710f8aa522b4c1be9319a9be5b70510daccc570e2a0d69478e5b8a6a665040fdea78f4cf1a4f0e3d7eaaf862410493a201c9ddb961b74b80
+  languageName: node
+  linkType: hard
+
 "@hapi/address@npm:2.x.x":
   version: 2.1.4
   resolution: "@hapi/address@npm:2.1.4"
@@ -5934,6 +5941,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/fs@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@npmcli/fs@npm:1.0.0"
+  dependencies:
+    "@gar/promisify": ^1.0.1
+    semver: ^7.3.5
+  checksum: 7ad4ce895c2c803e3ceedddad39cb165cb8eb1052551af41b9572ebe3dec40263c02e9f2e04b53974c083344769ecd026cd59441a6fd12738036d9f5a844237f
+  languageName: node
+  linkType: hard
+
 "@npmcli/git@npm:^2.0.1":
   version: 2.0.6
   resolution: "@npmcli/git@npm:2.0.6"
@@ -6773,18 +6790,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@6.4.0-beta.26, @storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
+"@storybook/addon-a11y@6.4.0-beta.31, @storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@testing-library/react": ^11.2.2
     "@types/webpack-env": ^1.16.0
     axe-core: ^4.2.0
@@ -6806,16 +6823,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@6.4.0-beta.26, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@6.4.0-beta.31, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@workspace:addons/actions"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@types/lodash": ^4.14.167
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6841,17 +6858,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@6.4.0-beta.26, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@6.4.0-beta.31, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6870,19 +6887,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@6.4.0-beta.26, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@6.4.0-beta.31, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@workspace:addons/controls"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     core-js: ^3.8.2
     lodash: ^4.17.20
     ts-dedent: ^2.0.0
@@ -6897,7 +6914,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@6.4.0-beta.26, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@6.4.0-beta.31, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
@@ -6913,26 +6930,26 @@ __metadata:
     "@mdx-js/loader": ^1.6.22
     "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/angular": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/angular": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.4.0-beta.26
-    "@storybook/html": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/postinstall": 6.4.0-beta.26
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/source-loader": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
-    "@storybook/vue": 6.4.0-beta.26
-    "@storybook/web-components": 6.4.0-beta.26
+    "@storybook/csf-tools": 6.4.0-beta.31
+    "@storybook/html": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/postinstall": 6.4.0-beta.31
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/source-loader": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
+    "@storybook/vue": 6.4.0-beta.31
+    "@storybook/web-components": 6.4.0-beta.31
     "@types/cross-spawn": ^6.0.2
     "@types/doctrine": ^0.0.3
     "@types/enzyme": ^3.10.8
@@ -6983,12 +7000,12 @@ __metadata:
     webpack: 4
     zone.js: ^0.11.3
   peerDependencies:
-    "@storybook/angular": 6.4.0-beta.26
-    "@storybook/html": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/vue": 6.4.0-beta.26
-    "@storybook/vue3": 6.4.0-beta.26
-    "@storybook/web-components": 6.4.0-beta.26
+    "@storybook/angular": 6.4.0-beta.31
+    "@storybook/html": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/vue": 6.4.0-beta.31
+    "@storybook/vue3": 6.4.0-beta.31
+    "@storybook/web-components": 6.4.0-beta.31
     lit: ^2.0.0-rc.1
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -7029,23 +7046,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-essentials@6.4.0-beta.26, @storybook/addon-essentials@workspace:*, @storybook/addon-essentials@workspace:addons/essentials":
+"@storybook/addon-essentials@6.4.0-beta.31, @storybook/addon-essentials@workspace:*, @storybook/addon-essentials@workspace:addons/essentials":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-essentials@workspace:addons/essentials"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-measure": 6.4.0-beta.26
-    "@storybook/addon-outline": 6.4.0-beta.26
-    "@storybook/addon-toolbars": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/vue": 6.4.0-beta.26
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-measure": 6.4.0-beta.31
+    "@storybook/addon-outline": 6.4.0-beta.31
+    "@storybook/addon-toolbars": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/vue": 6.4.0-beta.31
     "@types/jest": ^26.0.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7053,8 +7070,8 @@ __metadata:
     ts-dedent: ^2.0.0
   peerDependencies:
     "@babel/core": ^7.9.6
-    "@storybook/vue": 6.4.0-beta.26
-    "@storybook/web-components": 6.4.0-beta.26
+    "@storybook/vue": 6.4.0-beta.31
+    "@storybook/web-components": 6.4.0-beta.31
     babel-loader: ^8.0.0
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -7093,20 +7110,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@6.4.0-beta.26, @storybook/addon-interactions@workspace:*, @storybook/addon-interactions@workspace:addons/interactions":
+"@storybook/addon-interactions@6.4.0-beta.31, @storybook/addon-interactions@workspace:*, @storybook/addon-interactions@workspace:addons/interactions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-interactions@workspace:addons/interactions"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/instrumenter": 6.4.0-beta.26
+    "@storybook/instrumenter": 6.4.0-beta.31
     "@storybook/jest": ^0.0.2
     "@storybook/testing-library": ^0.0.3
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     formik: ^2.2.9
     global: ^4.4.0
     jest-mock: ^27.0.6
@@ -7123,15 +7140,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-jest@6.4.0-beta.26, @storybook/addon-jest@workspace:*, @storybook/addon-jest@workspace:addons/jest":
+"@storybook/addon-jest@6.4.0-beta.31, @storybook/addon-jest@workspace:*, @storybook/addon-jest@workspace:addons/jest":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-jest@workspace:addons/jest"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7149,15 +7166,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-links@6.4.0-beta.26, @storybook/addon-links@workspace:*, @storybook/addon-links@workspace:addons/links":
+"@storybook/addon-links@6.4.0-beta.31, @storybook/addon-links@workspace:*, @storybook/addon-links@workspace:addons/links":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@workspace:addons/links"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.0-beta.26
+    "@storybook/router": 6.4.0-beta.31
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7177,15 +7194,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@6.4.0-beta.26, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
+"@storybook/addon-measure@6.4.0-beta.31, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-measure@workspace:addons/measure"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7201,15 +7218,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-outline@6.4.0-beta.26, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
+"@storybook/addon-outline@6.4.0-beta.31, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-outline@workspace:addons/outline"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7240,20 +7257,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-storyshots-puppeteer@6.4.0-beta.26, @storybook/addon-storyshots-puppeteer@workspace:*, @storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer":
+"@storybook/addon-storyshots-puppeteer@6.4.0-beta.31, @storybook/addon-storyshots-puppeteer@workspace:*, @storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer"
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
     "@types/jest-image-snapshot": ^4.1.3
     "@types/puppeteer": ^5.4.0
     core-js: ^3.8.2
     jest-image-snapshot: ^4.3.0
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    "@storybook/addon-storyshots": 6.4.0-beta.26
+    "@storybook/addon-storyshots": 6.4.0-beta.31
     puppeteer: ^2.0.0 || ^3.0.0
   peerDependenciesMeta:
     puppeteer:
@@ -7261,24 +7278,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storyshots@6.4.0-beta.26, @storybook/addon-storyshots@workspace:*, @storybook/addon-storyshots@workspace:addons/storyshots/storyshots-core":
+"@storybook/addon-storyshots@6.4.0-beta.31, @storybook/addon-storyshots@workspace:*, @storybook/addon-storyshots@workspace:addons/storyshots/storyshots-core":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storyshots@workspace:addons/storyshots/storyshots-core"
   dependencies:
     "@angular/core": ^11.2.0
     "@angular/platform-browser-dynamic": ^11.2.0
     "@jest/transform": ^26.6.2
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/angular": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-client": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/angular": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-client": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/vue": 6.4.0-beta.26
-    "@storybook/vue3": 6.4.0-beta.26
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/vue": 6.4.0-beta.31
+    "@storybook/vue3": 6.4.0-beta.31
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -7352,17 +7369,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storysource@6.4.0-beta.26, @storybook/addon-storysource@workspace:*, @storybook/addon-storysource@workspace:addons/storysource":
+"@storybook/addon-storysource@6.4.0-beta.31, @storybook/addon-storysource@workspace:*, @storybook/addon-storysource@workspace:addons/storysource":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@workspace:addons/storysource"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/router": 6.4.0-beta.26
-    "@storybook/source-loader": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/router": 6.4.0-beta.31
+    "@storybook/source-loader": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     "@types/react": ^16.14.2
     "@types/react-syntax-highlighter": ^11.0.5
     core-js: ^3.8.2
@@ -7383,14 +7400,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-toolbars@6.4.0-beta.26, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@6.4.0-beta.31, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-toolbars@workspace:addons/toolbars"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
@@ -7404,16 +7421,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@6.4.0-beta.26, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@6.4.0-beta.31, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@workspace:addons/viewport"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -7430,17 +7447,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@6.4.0-beta.26, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@6.4.0-beta.31, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
   version: 0.0.0-use.local
   resolution: "@storybook/addons@workspace:lib/addons"
   dependencies:
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/router": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7473,7 +7490,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/angular@6.4.0-beta.26, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
+"@storybook/angular@6.4.0-beta.31, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:app/angular"
   dependencies:
@@ -7489,14 +7506,14 @@ __metadata:
     "@angular/platform-browser": ^11.2.14
     "@angular/platform-browser-dynamic": ^11.2.14
     "@nrwl/workspace": ^11.6.3
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
     "@types/autoprefixer": ^9.7.2
     "@types/jest": ^26.0.16
     "@types/webpack-env": ^1.16.0
@@ -7555,17 +7572,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@6.4.0-beta.26, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
+"@storybook/api@6.4.0-beta.31, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/api"
   dependencies:
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.0-beta.26
+    "@storybook/router": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@types/lodash": ^4.14.167
     "@types/qs": ^6
     "@types/semver": ^7.3.4
@@ -7619,7 +7636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack4@6.4.0-beta.26, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
+"@storybook/builder-webpack4@6.4.0-beta.31, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack4@workspace:lib/builder-webpack4"
   dependencies:
@@ -7644,22 +7661,22 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/channel-postmessage": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/router": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/channel-postmessage": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/router": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
-    "@storybook/ui": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
+    "@storybook/ui": 6.4.0-beta.31
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10
     "@types/react-dev-utils": ^9.0.4
@@ -7708,7 +7725,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@6.4.0-beta.26, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@6.4.0-beta.31, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5"
   dependencies:
@@ -7732,21 +7749,21 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/channel-postmessage": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/router": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/channel-postmessage": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/router": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10
     "@types/react-dev-utils": ^9.0.4
@@ -7783,13 +7800,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@6.4.0-beta.26, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@6.4.0-beta.31, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage"
   dependencies:
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -7797,19 +7814,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-websocket@6.4.0-beta.26, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
+"@storybook/channel-websocket@6.4.0-beta.31, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket"
   dependencies:
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^5.3.2
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@6.4.0-beta.26, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@6.4.0-beta.31, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
@@ -7830,17 +7847,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@6.4.0-beta.26, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@6.4.0-beta.31, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/preset-env": ^7.12.11
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/codemod": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/csf-tools": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/codemod": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/csf-tools": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
     "@types/cross-spawn": ^6.0.2
     "@types/prompts": ^2.0.9
@@ -7877,17 +7894,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@6.4.0-beta.26, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@6.4.0-beta.31, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@workspace:lib/client-api"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/channel-postmessage": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/channel-postmessage": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7907,7 +7924,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@6.4.0-beta.26, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@6.4.0-beta.31, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/client-logger@workspace:lib/client-logger"
   dependencies:
@@ -7926,15 +7943,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@6.4.0-beta.26, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/codemod@6.4.0-beta.31, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
     "@babel/types": ^7.12.11
     "@mdx-js/mdx": ^1.6.22
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/csf-tools": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
     core-js: ^3.8.2
     cross-spawn: ^7.0.3
     globby: ^11.0.2
@@ -7948,14 +7965,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@6.4.0-beta.26, @storybook/components@workspace:*, @storybook/components@workspace:lib/components":
+"@storybook/components@6.4.0-beta.31, @storybook/components@workspace:*, @storybook/components@workspace:lib/components":
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:lib/components"
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/client-logger": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -7984,20 +8001,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-client@6.4.0-beta.26, @storybook/core-client@workspace:lib/core-client":
+"@storybook/core-client@6.4.0-beta.31, @storybook/core-client@workspace:lib/core-client":
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@workspace:lib/core-client"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/channel-postmessage": 6.4.0-beta.26
-    "@storybook/channel-websocket": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/channel-postmessage": 6.4.0-beta.31
+    "@storybook/channel-websocket": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
-    "@storybook/ui": 6.4.0-beta.26
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
+    "@storybook/ui": 6.4.0-beta.31
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -8018,7 +8035,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@6.4.0-beta.26, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@6.4.0-beta.31, @storybook/core-common@workspace:lib/core-common":
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
@@ -8043,7 +8060,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.253f8c1.0
     "@storybook/semver": ^7.3.2
     "@types/compression": ^1.7.0
@@ -8086,7 +8103,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@6.4.0-beta.26, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@6.4.0-beta.31, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:lib/core-events"
   dependencies:
@@ -8103,22 +8120,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@6.4.0-beta.26, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@6.4.0-beta.31, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.4.0-beta.26
-    "@storybook/builder-webpack5": 6.4.0-beta.26
-    "@storybook/core-client": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/builder-webpack4": 6.4.0-beta.31
+    "@storybook/builder-webpack5": 6.4.0-beta.31
+    "@storybook/core-client": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.4.0-beta.26
-    "@storybook/manager-webpack4": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/csf-tools": 6.4.0-beta.31
+    "@storybook/manager-webpack4": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/compression": ^1.7.0
     "@types/ip": ^1.1.0
     "@types/node": ^14.0.10
@@ -8156,8 +8173,8 @@ __metadata:
     webpack: 4
     ws: ^8.2.3
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-beta.26
-    "@storybook/manager-webpack5": 6.4.0-beta.26
+    "@storybook/builder-webpack5": 6.4.0-beta.31
+    "@storybook/manager-webpack5": 6.4.0-beta.31
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -8170,14 +8187,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core@6.4.0-beta.26, @storybook/core@workspace:*, @storybook/core@workspace:lib/core":
+"@storybook/core@6.4.0-beta.31, @storybook/core@workspace:*, @storybook/core@workspace:lib/core":
   version: 0.0.0-use.local
   resolution: "@storybook/core@workspace:lib/core"
   dependencies:
-    "@storybook/core-client": 6.4.0-beta.26
-    "@storybook/core-server": 6.4.0-beta.26
+    "@storybook/core-client": 6.4.0-beta.31
+    "@storybook/core-server": 6.4.0-beta.31
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-beta.26
+    "@storybook/builder-webpack5": 6.4.0-beta.31
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
     webpack: "*"
@@ -8189,7 +8206,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@6.4.0-beta.26, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@6.4.0-beta.31, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
   dependencies:
@@ -8259,14 +8276,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ember@6.4.0-beta.26, @storybook/ember@workspace:*, @storybook/ember@workspace:app/ember":
+"@storybook/ember@6.4.0-beta.31, @storybook/ember@workspace:*, @storybook/ember@workspace:app/ember":
   version: 0.0.0-use.local
   resolution: "@storybook/ember@workspace:app/ember"
   dependencies:
     "@ember/test-helpers": ^2.1.4
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
     core-js: ^3.8.2
     global: ^4.4.0
     react: 16.14.0
@@ -8299,10 +8316,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/example-react-ts-webpack4@workspace:examples/react-ts-webpack4"
   dependencies:
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-essentials": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-essentials": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
     "@types/react": ^16.14.2
     "@types/react-dom": ^16.9.10
     prop-types: 15.7.2
@@ -8320,12 +8337,13 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addon-essentials": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/addon-essentials": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/cli": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
     "@types/babel__preset-env": ^7
@@ -8348,17 +8366,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/html@6.4.0-beta.26, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
+"@storybook/html@6.4.0-beta.31, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:app/html"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -8377,13 +8395,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@6.4.0-beta.26, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@6.4.0-beta.31, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
   version: 0.0.0-use.local
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     global: ^4.4.0
   languageName: unknown
   linkType: soft
@@ -8440,19 +8458,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@6.4.0-beta.26, @storybook/manager-webpack4@workspace:lib/manager-webpack4":
+"@storybook/manager-webpack4@6.4.0-beta.31, @storybook/manager-webpack4@workspace:lib/manager-webpack4":
   version: 0.0.0-use.local
   resolution: "@storybook/manager-webpack4@workspace:lib/manager-webpack4"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core-client": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
-    "@storybook/ui": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core-client": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
+    "@storybook/ui": 6.4.0-beta.31
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10
     "@types/terser-webpack-plugin": ^5.0.2
@@ -8500,12 +8518,12 @@ __metadata:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core-client": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
-    "@storybook/ui": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core-client": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
+    "@storybook/ui": 6.4.0-beta.31
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10
     "@types/terser-webpack-plugin": ^5.0.2
@@ -8542,7 +8560,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/node-logger@6.4.0-beta.26, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@6.4.0-beta.31, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/node-logger@workspace:lib/node-logger"
   dependencies:
@@ -8581,7 +8599,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@6.4.0-beta.26, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@6.4.0-beta.31, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
@@ -8592,16 +8610,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@6.4.0-beta.26, @storybook/preact@workspace:*, @storybook/preact@workspace:app/preact":
+"@storybook/preact@6.4.0-beta.31, @storybook/preact@workspace:*, @storybook/preact@workspace:app/preact":
   version: 0.0.0-use.local
   resolution: "@storybook/preact@workspace:app/preact"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.12.12
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -8652,16 +8670,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@6.4.0-beta.26, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@6.4.0-beta.31, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:lib/preview-web"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/channel-postmessage": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/channel-postmessage": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -8696,22 +8714,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@6.4.0-beta.26, @storybook/react@workspace:*, @storybook/react@workspace:app/react":
+"@storybook/react@6.4.0-beta.31, @storybook/react@workspace:*, @storybook/react@workspace:app/react":
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:app/react"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.253f8c1.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/node": ^14.14.20
     "@types/prompts": ^2.0.9
     "@types/webpack-env": ^1.16.0
@@ -8830,7 +8848,7 @@ __metadata:
     "@testing-library/dom": ^7.29.4
     "@testing-library/jest-dom": ^5.11.9
     "@testing-library/react": ^11.2.2
-    "@testing-library/user-event": ^12.6.0
+    "@testing-library/user-event": ^13.2.1
     "@types/detect-port": ^1.3.0
     "@types/doctrine": ^0.0.3
     "@types/enzyme": ^3.10.8
@@ -8900,6 +8918,7 @@ __metadata:
     mocha-list-tests: ^1.0.5
     node-cleanup: ^2.1.2
     node-fetch: ^2.6.1
+    node-gyp: ^8.4.0
     npmlog: ^5.0.1
     p-limit: ^3.1.0
     postcss-loader: ^4.2.0
@@ -8972,15 +8991,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@6.4.0-beta.26, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@6.4.0-beta.31, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:lib/router"
   dependencies:
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/client-logger": 6.4.0-beta.31
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
-    history: ^5.0.1
+    history: 5.0.0
     lodash: ^4.17.20
     memoizerific: ^1.11.3
     qs: ^6.10.0
@@ -9026,19 +9045,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/server@6.4.0-beta.26, @storybook/server@workspace:*, @storybook/server@workspace:app/server":
+"@storybook/server@6.4.0-beta.31, @storybook/server@workspace:*, @storybook/server@workspace:app/server":
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:app/server"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     fs-extra: ^9.0.1
@@ -9058,12 +9077,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@6.4.0-beta.26, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@6.4.0-beta.31, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -9078,13 +9097,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/store@6.4.0-beta.26, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
+"@storybook/store@6.4.0-beta.31, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
   version: 0.0.0-use.local
   resolution: "@storybook/store@workspace:lib/store"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -9100,15 +9119,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@6.4.0-beta.26, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte":
+"@storybook/svelte@6.4.0-beta.31, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:app/svelte"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -9144,14 +9163,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@6.4.0-beta.26, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@6.4.0-beta.31, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
     "@emotion/core": ^10.1.1
     "@emotion/is-prop-valid": ^0.8.6
     "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/client-logger": 6.4.0-beta.31
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
     emotion-theming: ^10.0.27
@@ -9189,21 +9208,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ui@6.4.0-beta.26, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
+"@storybook/ui@6.4.0-beta.31, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
   version: 0.0.0-use.local
   resolution: "@storybook/ui@workspace:lib/ui"
   dependencies:
     "@babel/core": ^7.12.10
     "@emotion/core": ^10.1.1
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/api": 6.4.0-beta.26
-    "@storybook/channels": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/router": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/api": 6.4.0-beta.31
+    "@storybook/channels": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/router": 6.4.0-beta.31
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@testing-library/react": ^11.2.2
     babel-loader: ^8.0.0
     chromatic: ^6.0.2
@@ -9235,15 +9254,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@6.4.0-beta.26, @storybook/vue3@workspace:app/vue3":
+"@storybook/vue3@6.4.0-beta.31, @storybook/vue3@workspace:app/vue3":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3@workspace:app/vue3"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/node": ^14.14.20
     "@types/webpack-env": ^1.16.0
     "@vue/compiler-sfc": ^3.0.0
@@ -9272,15 +9291,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@6.4.0-beta.26, @storybook/vue@workspace:*, @storybook/vue@workspace:app/vue":
+"@storybook/vue@6.4.0-beta.31, @storybook/vue@workspace:*, @storybook/vue@workspace:app/vue":
   version: 0.0.0-use.local
   resolution: "@storybook/vue@workspace:app/vue"
   dependencies:
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/store": 6.4.0-beta.31
     "@types/node": ^14.14.20
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -9311,20 +9330,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/web-components@6.4.0-beta.26, @storybook/web-components@workspace:*, @storybook/web-components@workspace:app/web-components":
+"@storybook/web-components@6.4.0-beta.31, @storybook/web-components@workspace:*, @storybook/web-components@workspace:app/web-components":
   version: 0.0.0-use.local
   resolution: "@storybook/web-components@workspace:app/web-components"
   dependencies:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.12.11
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-common": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-common": 6.4.0-beta.31
     "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/preview-web": 6.4.0-beta.26
-    "@storybook/store": 6.4.0-beta.26
+    "@storybook/preview-web": 6.4.0-beta.31
+    "@storybook/store": 6.4.0-beta.31
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
@@ -9709,17 +9728,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^12.6.0":
-  version: 12.7.3
-  resolution: "@testing-library/user-event@npm:12.7.3"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: e4c176bd40ac7ad564c8f215245f30f93a395d9f96207bdf29bf9ed2dfdc81226059dd182509695cbf27f49e87a46adcdae40a87d330cc4b96998cd33a5e8bd6
-  languageName: node
-  linkType: hard
-
 "@testing-library/user-event@npm:^13.1.9":
   version: 13.1.9
   resolution: "@testing-library/user-event@npm:13.1.9"
@@ -12851,7 +12859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agent-base@npm:6":
+"agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
   dependencies:
@@ -13026,20 +13034,20 @@ __metadata:
     "@angular/platform-browser-dynamic": ^11.2.14
     "@compodoc/compodoc": ^1.1.14
     "@ngrx/store": ^10.1.2
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-interactions": 6.4.0-beta.26
-    "@storybook/addon-jest": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/angular": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-interactions": 6.4.0-beta.31
+    "@storybook/addon-jest": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/angular": 6.4.0-beta.31
     "@storybook/jest": ^0.0.2
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/source-loader": 6.4.0-beta.31
     "@storybook/testing-library": ^0.0.3
     "@types/core-js": ^2.5.4
     "@types/jest": ^26.0.16
@@ -16161,6 +16169,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacache@npm:^15.2.0":
+  version: 15.3.0
+  resolution: "cacache@npm:15.3.0"
+  dependencies:
+    "@npmcli/fs": ^1.0.0
+    "@npmcli/move-file": ^1.0.1
+    chownr: ^2.0.0
+    fs-minipass: ^2.0.0
+    glob: ^7.1.4
+    infer-owner: ^1.0.4
+    lru-cache: ^6.0.0
+    minipass: ^3.1.1
+    minipass-collect: ^1.0.2
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.2
+    mkdirp: ^1.0.3
+    p-map: ^4.0.0
+    promise-inflight: ^1.0.1
+    rimraf: ^3.0.2
+    ssri: ^8.0.1
+    tar: ^6.0.2
+    unique-filename: ^1.1.1
+  checksum: 886fcc0acc4f6fd5cd142d373d8276267bc6d655d7c4ce60726fbbec10854de3395ee19bbf9e7e73308cdca9fdad0ad55060ff3bd16c6d4165c5b8d21515e1d8
+  languageName: node
+  linkType: hard
+
 "cache-base@npm:^1.0.1":
   version: 1.0.1
   resolution: "cache-base@npm:1.0.1"
@@ -18095,20 +18129,20 @@ __metadata:
   resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
   dependencies:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.4.3
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-jest": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
-    "@storybook/client-logger": 6.4.0-beta.26
+    "@storybook/addon-jest": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
+    "@storybook/client-logger": 6.4.0-beta.31
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     global: ^4.4.0
     prop-types: ^15.7.2
     react: 16.14.0
@@ -18123,14 +18157,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-react15@workspace:examples/cra-react15"
   dependencies:
-    "@storybook/addon-actions": 6.4.0-beta.26
+    "@storybook/addon-actions": 6.4.0-beta.31
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/theming": 6.4.0-beta.31
     babel-core: 6
     babel-loader: ^8.0.0
     babel-runtime: 6
@@ -18147,12 +18181,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-ts-essentials@workspace:examples/cra-ts-essentials"
   dependencies:
-    "@storybook/addon-essentials": 6.4.0-beta.26
+    "@storybook/addon-essentials": 6.4.0-beta.31
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-beta.26
+    "@storybook/react": 6.4.0-beta.31
     "@types/jest": ^26.0.16
     "@types/node": 14.14.20
     "@types/react": ^16.14.2
@@ -18170,15 +18204,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-ts-kitchen-sink@workspace:examples/cra-ts-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/builder-webpack4": 6.4.0-beta.26
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/builder-webpack4": 6.4.0-beta.31
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-beta.26
+    "@storybook/react": 6.4.0-beta.31
     "@types/enzyme": ^3.10.8
     "@types/jest": 25.2.3
     "@types/node": 14.14.20
@@ -19245,7 +19279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:4.3.2, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.2.0, debug@npm:^4.3.2":
+"debug@npm:4, debug@npm:4.3.2, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.2.0, debug@npm:^4.3.1, debug@npm:^4.3.2":
   version: 4.3.2
   resolution: "debug@npm:4.3.2"
   dependencies:
@@ -20725,18 +20759,18 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.10
     "@ember/optional-features": ^2.0.0
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/ember": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/ember": 6.4.0-beta.31
     "@storybook/ember-cli-storybook": ^0.2.1
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/source-loader": 6.4.0-beta.31
     babel-loader: ^8.0.0
     broccoli-asset-rev: ^3.0.0
     cross-env: ^7.0.3
@@ -20755,6 +20789,7 @@ __metadata:
     ember-source: ~3.24.0
     ember-template-compiler: ^1.9.0-alpha
     loader.js: ^4.7.0
+    shx: ^0.3.2
     webpack: 4
     webpack-cli: ^4.2.0
   languageName: unknown
@@ -24816,6 +24851,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"graceful-fs@npm:^4.2.6":
+  version: 4.2.8
+  resolution: "graceful-fs@npm:4.2.8"
+  checksum: 68365485460f7d2e95c05c1b7aeee935349f3b7776488d5bd95a45d8a45bd4977442e88cbbdb4ea01bc72f49f01f75d83f049069774ac8cc4328af4bcff1c542
+  languageName: node
+  linkType: hard
+
 "graceful-readlink@npm:>= 1.0.0":
   version: 1.0.1
   resolution: "graceful-readlink@npm:1.0.1"
@@ -25304,12 +25346,12 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"history@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "history@npm:5.0.1"
+"history@npm:5.0.0":
+  version: 5.0.0
+  resolution: "history@npm:5.0.0"
   dependencies:
     "@babel/runtime": ^7.7.6
-  checksum: a36e20f3513acf5c3bd2c0edd5790cbf8ef6befb754595a7c99ee70b07afd6eef07396ec2f90f50e0602b580e4fbe6fe5950e812e4bb08fa541e296f9434a566
+  checksum: 6e1a0880c1d67a9040117e5b426e71bc35642488485354d378cb635f194c2177979558b6fb537972840c6993d92c1ae971ab6c33bf77be1b1f135349ea65cde0
   languageName: node
   linkType: hard
 
@@ -25475,23 +25517,23 @@ fsevents@^1.2.7:
   version: 0.0.0-use.local
   resolution: "html-kitchen-sink@workspace:examples/html-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-jest": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-jest": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
     "@storybook/addon-postcss": ^2.0.0
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/client-api": 6.4.0-beta.26
-    "@storybook/core": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
-    "@storybook/html": 6.4.0-beta.26
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/client-api": 6.4.0-beta.31
+    "@storybook/core": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
+    "@storybook/html": 6.4.0-beta.31
+    "@storybook/source-loader": 6.4.0-beta.31
     autoprefixer: ^10.0.1
     eventemitter3: ^4.0.7
     format-json: ^1.0.3
@@ -31127,6 +31169,30 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"make-fetch-happen@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "make-fetch-happen@npm:9.1.0"
+  dependencies:
+    agentkeepalive: ^4.1.3
+    cacache: ^15.2.0
+    http-cache-semantics: ^4.1.0
+    http-proxy-agent: ^4.0.1
+    https-proxy-agent: ^5.0.0
+    is-lambda: ^1.0.1
+    lru-cache: ^6.0.0
+    minipass: ^3.1.3
+    minipass-collect: ^1.0.2
+    minipass-fetch: ^1.3.2
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.4
+    negotiator: ^0.6.2
+    promise-retry: ^2.0.1
+    socks-proxy-agent: ^6.0.0
+    ssri: ^8.0.0
+  checksum: 2c737faf6a7f67077679da548b5bfeeef890595bf8c4323a1f76eae355d27ebb33dcf9cf1a673f944cf2f2a7cbf4e2b09f0a0a62931737728f210d902c6be966
+  languageName: node
+  linkType: hard
+
 "makeerror@npm:1.0.x":
   version: 1.0.11
   resolution: "makeerror@npm:1.0.11"
@@ -32471,7 +32537,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"negotiator@npm:0.6.2":
+"negotiator@npm:0.6.2, negotiator@npm:^0.6.2":
   version: 0.6.2
   resolution: "negotiator@npm:0.6.2"
   checksum: cda4955b5a0d6624ff3322c9a9e7bfc039b8f2b0133708208edbb28be6ebb62c45493aee098374d8d0aeda60fc37dd08cf53cd60bd5fad3efb8fc36b52e3cdce
@@ -32666,6 +32732,26 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"node-gyp@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "node-gyp@npm:8.4.0"
+  dependencies:
+    env-paths: ^2.2.0
+    glob: ^7.1.4
+    graceful-fs: ^4.2.6
+    make-fetch-happen: ^9.1.0
+    nopt: ^5.0.0
+    npmlog: ^4.1.2
+    rimraf: ^3.0.2
+    semver: ^7.3.5
+    tar: ^6.1.2
+    which: ^2.0.2
+  bin:
+    node-gyp: bin/node-gyp.js
+  checksum: 01395381bfff2869c38854ad35ba297f56fce3215352a06f3d89399ed5c5b9238555583a86f355c6000efbda21808f22dfc67d6c9bb069b8c67952d5eecf7c32
+  languageName: node
+  linkType: hard
+
 "node-int64@npm:^0.4.0":
   version: 0.4.0
   resolution: "node-int64@npm:0.4.0"
@@ -33388,31 +33474,31 @@ fsevents@^1.2.7:
   dependencies:
     "@packtracker/webpack-plugin": ^2.3.0
     "@pmmmwh/react-refresh-webpack-plugin": ^0.4.3
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-interactions": 6.4.0-beta.26
-    "@storybook/addon-jest": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storyshots-puppeteer": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-toolbars": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/cli": 6.4.0-beta.26
-    "@storybook/components": 6.4.0-beta.26
-    "@storybook/core-events": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-interactions": 6.4.0-beta.31
+    "@storybook/addon-jest": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storyshots-puppeteer": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-toolbars": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/cli": 6.4.0-beta.31
+    "@storybook/components": 6.4.0-beta.31
+    "@storybook/core-events": 6.4.0-beta.31
     "@storybook/design-system": ^5.4.7
     "@storybook/jest": ^0.0.2
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
-    "@storybook/router": 6.4.0-beta.26
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
+    "@storybook/router": 6.4.0-beta.31
+    "@storybook/source-loader": 6.4.0-beta.31
     "@storybook/testing-library": ^0.0.3
-    "@storybook/theming": 6.4.0-beta.26
+    "@storybook/theming": 6.4.0-beta.31
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
     chromatic: ^6.0.2
@@ -36334,16 +36420,16 @@ fsevents@^1.2.7:
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-runtime": ^7.12.10
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
-    "@storybook/preact": 6.4.0-beta.26
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
+    "@storybook/preact": 6.4.0-beta.31
+    "@storybook/source-loader": 6.4.0-beta.31
     "@types/prop-types": ^15.7.3
     "@types/react": ^17
     "@types/react-dom": ^17
@@ -37887,25 +37973,25 @@ fsevents@^1.2.7:
   linkType: hard
 
 "react-router-dom@npm:^6.0.0-beta.8":
-  version: 6.0.0-beta.7
-  resolution: "react-router-dom@npm:6.0.0-beta.7"
+  version: 6.0.0-beta.8
+  resolution: "react-router-dom@npm:6.0.0-beta.8"
   dependencies:
-    react-router: 6.0.0-beta.7
+    react-router: 6.0.0-beta.8
   peerDependencies:
     history: ">=5"
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: baf821316e5b1bb6f82f986e2a603123e5300264a036ea9ddeef4687c77daa4dd8a1fade4f890b6b1e5241745bc98791107cf8193596473e42be873ae6674dcc
+  checksum: 6f1a49ff010fb1c59cec67d035b47accbcf764f0d1c5b6e7f011d91f794bdcdc2156430030da5f8a038390a4b37e38a764b2854d84d30a612c39aab4a0c8c024
   languageName: node
   linkType: hard
 
-"react-router@npm:6.0.0-beta.7, react-router@npm:^6.0.0-beta.8":
-  version: 6.0.0-beta.7
-  resolution: "react-router@npm:6.0.0-beta.7"
+"react-router@npm:6.0.0-beta.8, react-router@npm:^6.0.0-beta.8":
+  version: 6.0.0-beta.8
+  resolution: "react-router@npm:6.0.0-beta.8"
   peerDependencies:
     history: ">=5"
     react: ">=16.8"
-  checksum: f28071978b9329d3c3c998dd86a2e2ef59bfded6fa62976705959ffbfe6e0cb2b739f8dc364cd0deac69968444a3218c3cd94f48a4ed7753db91967321eeb9f1
+  checksum: af2ac31557915cf35417413b3b2cc27efeaf889d16aad48cd964414637fcb387f710969c4d6b30ff1b46b1df98b3b2f81a0e1854a0f4d73b551d832b40a4317a
   languageName: node
   linkType: hard
 
@@ -40180,7 +40266,7 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 6.4.0-beta.26
+    "@storybook/cli": 6.4.0-beta.31
   bin:
     sb: ./index.js
   languageName: unknown
@@ -40507,13 +40593,13 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "server-kitchen-sink@workspace:examples/server-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/node-logger": 6.4.0-beta.26
-    "@storybook/server": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/node-logger": 6.4.0-beta.31
+    "@storybook/server": 6.4.0-beta.31
     concurrently: ^5.3.0
     cors: ^2.8.5
     express: ~4.17.1
@@ -40999,6 +41085,17 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
+"socks-proxy-agent@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "socks-proxy-agent@npm:6.1.0"
+  dependencies:
+    agent-base: ^6.0.2
+    debug: ^4.3.1
+    socks: ^2.6.1
+  checksum: 8e42ce04de6aa995ed3613a4a53469dd35ab76b33c6c8ab6023783b44a5364a295852f2ff0fd6d40d1fe7519720870310afade16d9a727d63d07632e16842cfd
+  languageName: node
+  linkType: hard
+
 "socks@npm:^2.3.3":
   version: 2.5.1
   resolution: "socks@npm:2.5.1"
@@ -41009,6 +41106,16 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
+"socks@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "socks@npm:2.6.1"
+  dependencies:
+    ip: ^1.1.5
+    smart-buffer: ^4.1.0
+  checksum: e992192c7837bfa9093251abf3e78849741f332881900f481dcb3267d18b16595e93519f63dce29f39e4135789a7ed379d210dd68e98465564a40e81ccf9082a
+  languageName: node
+  linkType: hard
+
 "socks@npm:~2.3.2":
   version: 2.3.3
   resolution: "socks@npm:2.3.3"
@@ -41408,7 +41515,7 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
-"ssri@npm:^8.0.0":
+"ssri@npm:^8.0.0, ssri@npm:^8.0.1":
   version: 8.0.1
   resolution: "ssri@npm:8.0.1"
   dependencies:
@@ -41471,8 +41578,8 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "standalone-preview@workspace:examples/standalone-preview"
   dependencies:
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/react": 6.4.0-beta.26
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/react": 6.4.0-beta.31
     parcel: ^1.12.4
     react: 16.14.0
     react-dom: 16.14.0
@@ -41599,7 +41706,7 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 6.4.0-beta.26
+    "@storybook/cli": 6.4.0-beta.31
   bin:
     sb: ./index.js
     storybook: ./index.js
@@ -42336,20 +42443,20 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "svelte-example@workspace:examples/svelte-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-interactions": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-interactions": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
     "@storybook/jest": ^0.0.2
-    "@storybook/source-loader": 6.4.0-beta.26
-    "@storybook/svelte": 6.4.0-beta.26
+    "@storybook/source-loader": 6.4.0-beta.31
+    "@storybook/svelte": 6.4.0-beta.31
     "@storybook/testing-library": ^0.0.3
     global: ^4.4.0
     svelte-jester: 1.3.0
@@ -42701,6 +42808,20 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
+"tar@npm:^6.1.2":
+  version: 6.1.11
+  resolution: "tar@npm:6.1.11"
+  dependencies:
+    chownr: ^2.0.0
+    fs-minipass: ^2.0.0
+    minipass: ^3.0.0
+    minizlib: ^2.1.1
+    mkdirp: ^1.0.3
+    yallist: ^4.0.0
+  checksum: 5a016f5330f43815420797b87ade578e2ea60affd47439c988a3fc8f7bb6b36450d627c31ba6a839346fae248b4c8c12bb06bb0716211f37476838c7eff91f05
+  languageName: node
+  linkType: hard
+
 "teamcity-service-messages@npm:^0.1.11":
   version: 0.1.11
   resolution: "teamcity-service-messages@npm:0.1.11"
@@ -45145,14 +45266,14 @@ resolve@1.19.0:
   resolution: "vue-3-cli-example@workspace:examples/vue-3-cli"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-essentials": 6.4.0-beta.26
-    "@storybook/addon-interactions": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-essentials": 6.4.0-beta.31
+    "@storybook/addon-interactions": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
     "@storybook/jest": ^0.0.2
     "@storybook/testing-library": ^0.0.3
-    "@storybook/vue3": 6.4.0-beta.26
+    "@storybook/vue3": 6.4.0-beta.31
     "@vue/cli-plugin-babel": ~4.5.0
     "@vue/cli-plugin-typescript": ~4.5.0
     "@vue/cli-service": ~4.5.0
@@ -45179,11 +45300,11 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "vue-cli-example@workspace:examples/vue-cli"
   dependencies:
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-essentials": 6.4.0-beta.26
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-essentials": 6.4.0-beta.31
     "@storybook/preset-scss": ^1.0.3
-    "@storybook/source-loader": 6.4.0-beta.26
-    "@storybook/vue": 6.4.0-beta.26
+    "@storybook/source-loader": 6.4.0-beta.31
+    "@storybook/vue": 6.4.0-beta.31
     "@vue/cli-plugin-babel": ~4.3.1
     "@vue/cli-plugin-typescript": ~4.3.1
     "@vue/cli-service": ~4.3.1
@@ -45235,21 +45356,21 @@ resolve@1.19.0:
   resolution: "vue-example@workspace:examples/vue-kitchen-sink"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-a11y": 6.4.0-beta.26
-    "@storybook/addon-actions": 6.4.0-beta.26
-    "@storybook/addon-backgrounds": 6.4.0-beta.26
-    "@storybook/addon-controls": 6.4.0-beta.26
-    "@storybook/addon-docs": 6.4.0-beta.26
-    "@storybook/addon-interactions": 6.4.0-beta.26
-    "@storybook/addon-links": 6.4.0-beta.26
-    "@storybook/addon-storyshots": 6.4.0-beta.26
-    "@storybook/addon-storysource": 6.4.0-beta.26
-    "@storybook/addon-viewport": 6.4.0-beta.26
-    "@storybook/addons": 6.4.0-beta.26
+    "@storybook/addon-a11y": 6.4.0-beta.31
+    "@storybook/addon-actions": 6.4.0-beta.31
+    "@storybook/addon-backgrounds": 6.4.0-beta.31
+    "@storybook/addon-controls": 6.4.0-beta.31
+    "@storybook/addon-docs": 6.4.0-beta.31
+    "@storybook/addon-interactions": 6.4.0-beta.31
+    "@storybook/addon-links": 6.4.0-beta.31
+    "@storybook/addon-storyshots": 6.4.0-beta.31
+    "@storybook/addon-storysource": 6.4.0-beta.31
+    "@storybook/addon-viewport": 6.4.0-beta.31
+    "@storybook/addons": 6.4.0-beta.31
     "@storybook/jest": ^0.0.2
-    "@storybook/source-loader": 6.4.0-beta.26
+    "@storybook/source-loader": 6.4.0-beta.31
     "@storybook/testing-library": ^0.0.3
-    "@storybook/vue": 6.4.0-beta.26
+    "@storybook/vue": 6.4.0-beta.31
     "@vue/babel-preset-jsx": ^1.2.4
     babel-loader: ^8.0.0
     cross-env: ^7.0.3