diff --git a/.circleci/config.yml b/.circleci/config.yml
index b5259168ea40..445608a1fc38 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -198,7 +198,7 @@ jobs:
           command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
           no_output_timeout: 5m
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   e2e-tests-core:
     executor:
@@ -224,7 +224,7 @@ jobs:
           command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
           no_output_timeout: 5m
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   cra-bench:
     executor:
@@ -271,7 +271,7 @@ jobs:
           name: run e2e tests
           command: yarn test:e2e-framework --pnp sfcVue cra
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   e2e-tests-examples:
     executor:
@@ -293,7 +293,7 @@ jobs:
           name: cypress run
           command: yarn test:e2e-examples
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   smoke-tests:
     executor:
diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
index f8a75e7201a2..43ea60fc73dd 100644
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@@ -7,19 +7,15 @@ jobs:
     name: Core Unit Tests
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-    - uses: actions/checkout@v2
-    - name: Cache node modules
-      uses: actions/cache@v2
-      with:
-        path: node_modules
-        key: yarn-2-cache-v1-${{ hashFiles('**/yarn.lock') }}
-    - name: install, bootstrap
-      run: |
-        yarn install --immutable
-        yarn bootstrap --core
-    - name: test
-      run: |
-        yarn test --runInBand --ci
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "12.x"
+          cache: yarn
+      - name: install, bootstrap
+        run: |
+          yarn install --immutable
+          yarn bootstrap --core
+      - name: test
+        run: |
+          yarn test --runInBand --ci
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15c0247a7085..7a7e69c4205f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,112 @@
+## 6.4.0-alpha.17 (July 15, 2021)
+
+### Features
+
+- Types: Export BaseStoryFn and BaseStoryObject ([#15592](https://github.com/storybookjs/storybook/pull/15592))
+- Addon-docs: Add transparency support to color swatch ([#14439](https://github.com/storybookjs/storybook/pull/14439))
+
+## 6.4.0-alpha.16 (July 13, 2021)
+
+### Features
+
+- Addon-backgrounds: Respect user's reduced motion settings ([#13711](https://github.com/storybookjs/storybook/pull/13711))
+- CSF: Add CSF3 typings ([#15558](https://github.com/storybookjs/storybook/pull/15558))
+
+### Bug Fixes
+
+- Angular: Fix actions argType auto generation ([#15563](https://github.com/storybookjs/storybook/pull/15563))
+
+## 6.4.0-alpha.15 (July 13, 2021)
+
+### Bug Fixes
+
+- Controls: Fix color matching behavior for non-string types ([#15549](https://github.com/storybookjs/storybook/pull/15549))
+- UI: Fix toggle button for custom theming ([#15449](https://github.com/storybookjs/storybook/pull/15449))
+
+### Maintenance
+
+- Build: Fix `publish` step on CircleCI ([#15556](https://github.com/storybookjs/storybook/pull/15556))
+- Examples: Add no-manager-cache to all examples ([#15546](https://github.com/storybookjs/storybook/pull/15546))
+- Official-storybook: Add example of embedding story object in MDX ([#15533](https://github.com/storybookjs/storybook/pull/15533))
+
+## 6.4.0-alpha.14 (July 11, 2021)
+
+### Features
+
+- Web-components: Dynamic source snippets ([#15337](https://github.com/storybookjs/storybook/pull/15337))
+
+### Maintenance
+
+- Essentials: Add measure addon to monorepo ([#15545](https://github.com/storybookjs/storybook/pull/15545))
+
+## 6.4.0-alpha.13 (July 9, 2021)
+
+### Bug Fixes
+
+- Addon-docs/Angular: Add unique id to Angular stories ([#15501](https://github.com/storybookjs/storybook/pull/15501))
+- Composition: Fix refs ordering ([#15527](https://github.com/storybookjs/storybook/pull/15527))
+
+### Maintenance
+
+- Essentials: Add outline addon to monorepo ([#15526](https://github.com/storybookjs/storybook/pull/15526))
+- Build: Fix cache setup in GitHub Actions workflow ([#15523](https://github.com/storybookjs/storybook/pull/15523))
+
+## 6.3.4 (July 8, 2021)
+
+### Maintenance
+
+- Addon-docs: Cache DocsContext on window to prevent duplication ([#15428](https://github.com/storybookjs/storybook/pull/15428))
+
+## 6.3.3 (July 7, 2021)
+
+### Bug Fixes
+
+- Webpack5: Quit process after finishing a static build ([#15483](https://github.com/storybookjs/storybook/pull/15483))
+- Addon-docs/Angular: Fix numeric args default value handling ([#15491](https://github.com/storybookjs/storybook/pull/15491))
+- Angular: Fix circular reference not being handled in moduleMetadata ([#15410](https://github.com/storybookjs/storybook/pull/15410))
+- Core: Fix double rebuilds by removing aggregateTimeout ([#15372](https://github.com/storybookjs/storybook/pull/15372))
+- CLI: Fix NPM typo ([#15461](https://github.com/storybookjs/storybook/pull/15461))
+
+## 6.4.0-alpha.12 (July 7, 2021)
+
+### Bug Fixes
+
+- Webpack5: Quit process after finishing a static build ([#15483](https://github.com/storybookjs/storybook/pull/15483))
+- Addon-docs/Angular: Fix numeric args default value handling ([#15491](https://github.com/storybookjs/storybook/pull/15491))
+
+### Maintenance
+
+- Angular: Make Ivy work by default in the angular-cli example ([#15280](https://github.com/storybookjs/storybook/pull/15280))
+- Official-storybook: Fix shortcut for navigating to previous language ([#15489](https://github.com/storybookjs/storybook/pull/15489))
+- Addon-docs: Add docs to standalone example ([#7848](https://github.com/storybookjs/storybook/pull/7848))
+- Build: Update Yarn cache setup in GitHub Actions workflow ([#15480](https://github.com/storybookjs/storybook/pull/15480))
+
+## 6.4.0-alpha.11 (July 3, 2021)
+
+### Bug Fixes
+
+- UI: Fix sidebar toggle in fullscreen mode ([#15459](https://github.com/storybookjs/storybook/pull/15459))
+- Angular: Fix circular reference not being handled in moduleMetadata ([#15410](https://github.com/storybookjs/storybook/pull/15410))
+
+### Maintenance
+
+- Addon-a11y: Reverse help and description labels in accordion ([#15466](https://github.com/storybookjs/storybook/pull/15466))
+
+## 6.4.0-alpha.10 (July 2, 2021)
+
+### Features
+
+- UI: Display menu icon on the toolbar when the sidebar is collapsed ([#15369](https://github.com/storybookjs/storybook/pull/15369))
+
+### Bug Fixes
+
+- Core: Fix double rebuilds by removing aggregateTimeout ([#15372](https://github.com/storybookjs/storybook/pull/15372))
+- CLI: Fix NPM typo ([#15461](https://github.com/storybookjs/storybook/pull/15461))
+
+### Maintenance
+
+- Addon-docs: Cache DocsContext on window to prevent duplication ([#15428](https://github.com/storybookjs/storybook/pull/15428))
+
 ## 6.3.2 (June 30, 2021)
 
 ### Bug Fixes
diff --git a/MIGRATION.md b/MIGRATION.md
index ca2578e6b7b6..9426f71bf721 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -4,10 +4,10 @@
   - [Webpack 5 manager build](#webpack-5-manager-build)
   - [Angular 12 upgrade](#angular-12-upgrade)
   - [Lit support](#lit-support)
+  - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
   - [6.3 deprecations](#63-deprecations)
     - [Deprecated addon-knobs](#deprecated-addon-knobs)
     - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
-    - [Deprecated `argType.defaultValue`](#deprecated-argtypedefaultvalue)
     - [Deprecated layout URL params](#deprecated-layout-url-params)
 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
   - [MDX pattern tweaked](#mdx-pattern-tweaked)
@@ -176,6 +176,14 @@ yarn add @storybook/manager-webpack5 --dev
 npm install @storybook/manager-webpack5 --save-dev
 ```
 
+Because Storybook uses `webpack@4` as the default, it's possible for the wrong version of webpack to get hoisted by your package manager. If you receive an error that looks like you might be using the wrong version of webpack, install `webpack@5` explicitly as a dev dependency to force it to be hoisted:
+
+```shell
+yarn add webpack@5 --dev
+# Or
+npm install webpack@5 --save-dev
+```
+
 ### Angular 12 upgrade
 
 Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
@@ -204,34 +212,13 @@ To do so, it relies on helpers added in the latest minor versions of `lit-html`/
 
 According to the package manager you are using, it can be handled automatically when updating Storybook or can require to manually update the versions and regenerate the lockfile.
 
-### 6.3 deprecations
-
-#### Deprecated addon-knobs
-
-We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
-
-- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
-- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
-
-#### Deprecated scoped blocks imports
-
-In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
-
-To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
-
-```js
-// before
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-
-// after
-import { Meta, Story } from '@storybook/addon-docs';
-```
-
-#### Deprecated `argType.defaultValue`
+### No longer inferring default values of args
 
 Previously, unset `args` were set to the `argType.defaultValue` if set or inferred from the component's prop types (etc.). In 6.3 we no longer infer default values and instead set arg values to `undefined` when unset, allowing the framework to supply the default value.
 
-If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code. If you were using it to set a default value for an arg, there is a simpler way; simply set a value for the arg at the component level:
+If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code.
+
+If you were using `argType.defaultValue` or relying on inference to set a default value for an arg, you should now set a value for the arg at the component level:
 
 ```js
 export default {
@@ -255,6 +242,29 @@ export default {
 };
 ```
 
+### 6.3 deprecations
+
+#### Deprecated addon-knobs
+
+We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
+
+- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
+- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
+
+#### Deprecated scoped blocks imports
+
+In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
+
+To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
+
+```js
+// before
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+// after
+import { Meta, Story } from '@storybook/addon-docs';
+```
+
 #### Deprecated layout URL params
 
 Several URL params to control the manager layout have been deprecated and will be removed in 7.0:
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 633647506235..b72f932802c7 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -11,13 +11,13 @@
     "verify",
     "test"
   ],
-  "homepage": "https://github.com/storybookjs/storybook#readme",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/a11y",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/storybookjs/storybook.git",
+    "url": "https://github.com/storybookjs/storybook.git",
     "directory": "addons/a11y"
   },
   "funding": {
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",
diff --git a/addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.tsx
index 743a617c02f4..0a8434e96dbf 100644
--- a/addons/a11y/src/components/Report/Info.tsx
+++ b/addons/a11y/src/components/Report/Info.tsx
@@ -7,7 +7,7 @@ const Wrapper = styled.div({
   padding: 12,
   marginBottom: 10,
 });
-const Help = styled.p({
+const Description = styled.p({
   margin: '0 0 12px',
 });
 const Link = styled.a({
@@ -24,7 +24,7 @@ interface InfoProps {
 export const Info: FunctionComponent<InfoProps> = ({ item }) => {
   return (
     <Wrapper>
-      <Help>{item.help}</Help>
+      <Description>{item.description}</Description>
       <Link href={item.helpUrl} target="_blank">
         More info...
       </Link>
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 815aa0a176b7..d00cffda1ce2 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -82,7 +82,7 @@ export const Item = (props: ItemProps) => {
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}
           />
-          {item.description}
+          {item.help}
         </HeaderBar>
         <HighlightToggleElement>
           <HighlightToggle toggleId={highlightToggleId} elementsToHighlight={item.nodes} />
diff --git a/addons/actions/package.json b/addons/actions/package.json
index e0ea3d243bf6..ca084ec50d39 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
     "essentials",
     "data-state"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/actions",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,12 +41,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -78,7 +78,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 19db457cc687..2b092acb0480 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -10,7 +10,7 @@
     "essentials",
     "design"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/backgrounds",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/backgrounds",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,12 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -76,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",
diff --git a/addons/backgrounds/src/decorators/withBackground.ts b/addons/backgrounds/src/decorators/withBackground.ts
index defad6f99c71..26ce596afc29 100644
--- a/addons/backgrounds/src/decorators/withBackground.ts
+++ b/addons/backgrounds/src/decorators/withBackground.ts
@@ -1,7 +1,12 @@
 import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
+import {
+  clearStyles,
+  addBackgroundStyle,
+  getBackgroundColorByName,
+  isReduceMotionEnabled,
+} from '../helpers';
 
 export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
   const { globals, parameters } = context;
@@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) =>
     context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
 
   const backgroundStyles = useMemo(() => {
+    const transitionStyle = 'transition: background-color 0.3s;';
     return `
       ${selector} {
         background: ${selectedBackgroundColor} !important;
-        transition: background-color 0.3s;
+        ${isReduceMotionEnabled() ? '' : transitionStyle}
       }
     `;
   }, [selectedBackgroundColor, selector]);
diff --git a/addons/backgrounds/src/helpers/index.ts b/addons/backgrounds/src/helpers/index.ts
index 3b1d00f237f5..9b35c8acea87 100644
--- a/addons/backgrounds/src/helpers/index.ts
+++ b/addons/backgrounds/src/helpers/index.ts
@@ -5,7 +5,12 @@ import { logger } from '@storybook/client-logger';
 
 import { Background } from '../types';
 
-const { document } = global;
+const { document, window } = global;
+
+export const isReduceMotionEnabled = () => {
+  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return prefersReduceMotion.matches;
+};
 
 export const getBackgroundColorByName = (
   currentSelectedValue: string,
diff --git a/addons/controls/package.json b/addons/controls/package.json
index 5fbb6962f989..4df03eeb8b74 100644
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -45,12 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "ts-dedent": "^2.0.0"
   },
@@ -69,7 +69,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Controls",
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 50ab2d05d887..479971625de0 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -10,7 +10,7 @@
     "essentials",
     "organize"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/docs",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -63,20 +63,20 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
-    "@storybook/csf-tools": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/postinstall": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/csf-tools": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/postinstall": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -89,6 +89,7 @@
     "js-string-escape": "^1.0.1",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
+    "nanoid": "^3.1.23",
     "p-limit": "^3.1.0",
     "prettier": "~2.2.1",
     "prop-types": "^15.7.2",
@@ -104,10 +105,10 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.4.0-alpha.9",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/vue": "6.4.0-alpha.9",
-    "@storybook/web-components": "6.4.0-alpha.9",
+    "@storybook/angular": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/vue": "6.4.0-alpha.17",
+    "@storybook/web-components": "6.4.0-alpha.17",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -137,10 +138,10 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.4.0-alpha.9",
-    "@storybook/vue": "6.4.0-alpha.9",
-    "@storybook/vue3": "6.4.0-alpha.9",
-    "@storybook/web-components": "6.4.0-alpha.9",
+    "@storybook/angular": "6.4.0-alpha.17",
+    "@storybook/vue": "6.4.0-alpha.17",
+    "@storybook/vue3": "6.4.0-alpha.17",
+    "@storybook/web-components": "6.4.0-alpha.17",
     "lit": "^2.0.0-rc.1",
     "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
@@ -191,7 +192,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",
diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts
index 0556b6304e39..9f66a2588552 100644
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@@ -1,4 +1,5 @@
 import { Context, createContext } from 'react';
+import { window as globalWindow } from 'global';
 
 export interface DocsContextProps {
   id?: string;
@@ -17,4 +18,15 @@ export interface DocsContextProps {
   forceRender?: () => void;
 }
 
-export const DocsContext: Context<DocsContextProps> = createContext({});
+// We add DocsContext to window. The reason is that in case DocsContext.ts is
+// imported multiple times (maybe once directly, and another time from a minified bundle)
+// we will have multiple DocsContext definitions - leading to lost context in
+// the React component tree.
+// This was specifically a problem with the Vite builder.
+/* eslint-disable no-underscore-dangle */
+if (globalWindow.__DOCS_CONTEXT__ === undefined) {
+  globalWindow.__DOCS_CONTEXT__ = createContext({});
+  globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
+}
+
+export const DocsContext: Context<DocsContextProps> = globalWindow.__DOCS_CONTEXT__;
diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
index 70866177760b..19fcc9ec96f7 100644
--- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
@@ -14,7 +14,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "string",
     },
   },
   "_value": Object {
@@ -30,7 +30,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "string",
     },
   },
   "accent": Object {
@@ -129,7 +129,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "string",
     },
   },
   "isDisabled": Object {
@@ -225,7 +225,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "object",
     },
   },
   "protectedMethod": Object {
diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts
index a3418ed4c26d..8d76ee810ba3 100644
--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@@ -112,7 +112,9 @@ const displaySignature = (item: Method): string => {
 
 const extractTypeFromValue = (defaultValue: any) => {
   const valueType = typeof defaultValue;
-  return defaultValue || valueType === 'boolean' || valueType === 'string' ? valueType : null;
+  return defaultValue || valueType === 'number' || valueType === 'boolean' || valueType === 'string'
+    ? valueType
+    : null;
 };
 
 const extractEnumValues = (compodocType: any) => {
@@ -188,7 +190,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
       const section = mapItemToSection(key, item);
       const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
       const type =
-        isMethod(item) || section !== 'inputs'
+        isMethod(item) || (section !== 'inputs' && section !== 'properties')
           ? { name: 'void' }
           : extractType(item as Property, defaultValue);
       const action = section === 'outputs' ? { action: item.name } : {};
@@ -215,9 +217,9 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
   });
 
   const SECTIONS = [
+    'properties',
     'inputs',
     'outputs',
-    'properties',
     'methods',
     'view child',
     'view children',
diff --git a/addons/docs/src/frameworks/angular/prepareForInline.ts b/addons/docs/src/frameworks/angular/prepareForInline.ts
index ae9de532bdb2..fc9e4f0ab26c 100644
--- a/addons/docs/src/frameworks/angular/prepareForInline.ts
+++ b/addons/docs/src/frameworks/angular/prepareForInline.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import pLimit from 'p-limit';
+import { nanoid } from 'nanoid';
 
 import { IStory, StoryContext } from '@storybook/angular';
 import { rendererFactory } from '@storybook/angular/renderer';
@@ -18,7 +19,7 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
       }
 
       return limit(async () => {
-        const renderer = await rendererFactory.getRendererInstance(id, node);
+        const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`, node);
         await renderer.render({
           forced: false,
           parameters,
diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
deleted file mode 100644
index b931d4e826d2..000000000000
--- a/addons/docs/src/frameworks/web-components/config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* global window */
-import React from 'react';
-import { render } from 'lit-html';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-
-export const parameters = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    inlineStories: true,
-    prepareForInline: (storyFn) => {
-      class Story extends React.Component {
-        constructor(props) {
-          super(props);
-          this.wrapperRef = React.createRef();
-        }
-
-        componentDidMount() {
-          render(storyFn(), this.wrapperRef.current);
-        }
-
-        render() {
-          return React.createElement('div', { ref: this.wrapperRef });
-        }
-      }
-      return React.createElement(Story);
-    },
-  },
-};
diff --git a/addons/docs/src/frameworks/web-components/config.ts b/addons/docs/src/frameworks/web-components/config.ts
new file mode 100644
index 000000000000..30273896e170
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/config.ts
@@ -0,0 +1,19 @@
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
+import { SourceType } from '../../shared';
+
+export const decorators = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+    inlineStories: true,
+    prepareForInline,
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
new file mode 100644
index 000000000000..715bdb8afef6
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -0,0 +1,19 @@
+import type { StoryFn } from '@storybook/addons';
+import React from 'react';
+import { render } from 'lit-html';
+
+export const prepareForInline = (storyFn: StoryFn) => {
+  class Story extends React.Component {
+    wrapperRef = React.createRef<HTMLElement>();
+
+    componentDidMount(): void {
+      render(storyFn(), this.wrapperRef.current);
+    }
+
+    render(): React.ReactElement {
+      return React.createElement('div', { ref: this.wrapperRef });
+    }
+  }
+
+  return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>;
+};
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
new file mode 100644
index 000000000000..4c2c49851045
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
@@ -0,0 +1,100 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map';
+import { addons, StoryContext } from '@storybook/addons';
+import { sourceDecorator } from './sourceDecorator';
+import { SNIPPET_RENDERED } from '../../shared';
+
+jest.mock('@storybook/addons');
+const mockedAddons = addons as jest.Mocked<typeof addons>;
+
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: (val) => typeof val === 'string',
+});
+
+const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
+  id: `lit-test--${name}`,
+  kind: 'js-text',
+  name,
+  parameters,
+  args,
+  argTypes: {},
+  globals: {},
+  ...extra,
+});
+
+describe('sourceDecorator', () => {
+  let mockChannel: { on: jest.Mock; emit?: jest.Mock };
+  beforeEach(() => {
+    mockedAddons.getChannel.mockReset();
+
+    mockChannel = { on: jest.fn(), emit: jest.fn() };
+    mockedAddons.getChannel.mockReturnValue(mockChannel as any);
+  });
+
+  it('should render dynamically for args stories', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const context = makeContext('args', { __isArgsStory: true }, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<div>args story</div>'
+    );
+  });
+
+  it('should skip dynamic rendering for no-args stories', () => {
+    const storyFn = () => html`<div>classic story</div>`;
+    const context = makeContext('classic', {}, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).not.toHaveBeenCalled();
+  });
+
+  it('should use the originalStoryFn if excludeDecorators is set', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const decoratedStoryFn = (args: any) => html`
+      <div style=${styleMap({ padding: `${25}px`, border: '3px solid red' })}>${storyFn(args)}</div>
+    `;
+    const context = makeContext(
+      'args',
+      {
+        __isArgsStory: true,
+        docs: {
+          source: {
+            excludeDecorators: true,
+          },
+        },
+      },
+      {},
+      { originalStoryFn: storyFn }
+    );
+    sourceDecorator(decoratedStoryFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<div>args story</div>'
+    );
+  });
+
+  it('allows the snippet output to be modified by transformSource', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const transformSource = (dom: string) => `<p>${dom}</p>`;
+    const docs = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, docs }, {});
+    sourceDecorator(storyFn, context);
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<p><div>args story</div></p>'
+    );
+  });
+
+  it('provides the story context to transformSource', () => {
+    const storyFn = (args: any) => html`<div>args story</div>`;
+    const transformSource = jest.fn((x) => x);
+    const docs = { transformSource };
+    const context = makeContext('args', { __isArgsStory: true, docs }, {});
+    sourceDecorator(storyFn, context);
+    expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
+  });
+});
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
new file mode 100644
index 000000000000..d1ab37f8ec2e
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
@@ -0,0 +1,39 @@
+/* global window */
+import { render } from 'lit-html';
+import { addons, StoryContext, StoryFn } from '@storybook/addons';
+import { SNIPPET_RENDERED, SourceType } from '../../shared';
+
+function skipSourceRender(context: StoryContext) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+
+  // always render if the user forces it
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+}
+
+function applyTransformSource(source: string, context: StoryContext): string {
+  const { transformSource } = context.parameters.docs ?? {};
+  if (typeof transformSource !== 'function') return source;
+  return transformSource(source, context);
+}
+
+export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
+  const story = context?.parameters.docs?.source?.excludeDecorators
+    ? context.originalStoryFn(context.args)
+    : storyFn();
+
+  if (!skipSourceRender(context)) {
+    const container = window.document.createElement('div');
+    render(story, container);
+    const source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+  }
+
+  return story;
+}
diff --git a/addons/essentials/package.json b/addons/essentials/package.json
index 1b4e84329f91..98d2aa8c43a9 100644
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
     "essentials",
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/essentials",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/essentials",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -39,31 +39,31 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-measure": "^2.0.0",
-    "@storybook/addon-toolbars": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-measure": "6.4.0-alpha.17",
+    "@storybook/addon-outline": "6.4.0-alpha.17",
+    "@storybook/addon-toolbars": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7",
-    "storybook-addon-outline": "^1.4.1",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.4.0-alpha.9",
+    "@storybook/vue": "6.4.0-alpha.17",
     "@types/jest": "^26.0.16",
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.4.0-alpha.9",
-    "@storybook/web-components": "6.4.0-alpha.9",
+    "@storybook/vue": "6.4.0-alpha.17",
+    "@storybook/web-components": "6.4.0-alpha.17",
     "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": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts
index b281ec05be15..7cf3bc35170b 100644
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@@ -39,7 +39,7 @@ export function addons(options: PresetOptions = {}) {
   return (
     ['docs', 'controls', 'actions', 'backgrounds', 'viewport', 'toolbars', 'measure', 'outline']
       .filter((key) => (options as any)[key] !== false)
-      .map((key) => (key === 'outline' ? `storybook-addon-${key}` : `@storybook/addon-${key}`))
+      .map((key) => `@storybook/addon-${key}`)
       .filter((addon) => !checkInstalled(addon, main))
       // Use `require.resolve` to ensure Yarn PnP compatibility
       // Files of various addons should be resolved in the context of `addon-essentials` as they are listed as deps here
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 112fa987f3c2..b05e72dbedcc 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -12,7 +12,7 @@
     "unit-testing",
     "test"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/jest",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/jest",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -47,11 +47,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
@@ -76,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Jest",
diff --git a/addons/links/README.md b/addons/links/README.md
index 1f4b5346e446..c512695b275d 100644
--- a/addons/links/README.md
+++ b/addons/links/README.md
@@ -143,4 +143,4 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
 </LinkTo>
 ```
 
-To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/main/addons/links/src/react/components/RoutedLink.js#L20-L24) for reference.
+To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/main/addons/links/src/react/components/RoutedLink.tsx) for reference.
diff --git a/addons/links/package.json b/addons/links/package.json
index bcf71c9e0462..149ebd0a5dde 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/addon-links",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
     "storybook",
     "organize"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/links",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/links",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,11 +41,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
-    "@storybook/router": "6.4.0-alpha.9",
+    "@storybook/router": "6.4.0-alpha.17",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,7 +72,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Links",
diff --git a/addons/links/src/react/components/RoutedLink.tsx b/addons/links/src/react/components/RoutedLink.tsx
index 2c5ede5f1d33..7fbf75157ba4 100644
--- a/addons/links/src/react/components/RoutedLink.tsx
+++ b/addons/links/src/react/components/RoutedLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.js`.
+// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.tsx`.
 // It's duplicated here because that copy has an explicit dependency on
 // React 16.3+, which breaks older versions of React running in the preview.
 // The proper DRY solution is to create a new package that doesn't depend
diff --git a/addons/measure/README.md b/addons/measure/README.md
new file mode 100644
index 000000000000..99638a461da3
--- /dev/null
+++ b/addons/measure/README.md
@@ -0,0 +1,33 @@
+# Storybook Addon Measure
+
+Storybook addon for inspecting layouts and visualizing the box model.
+
+1. Press the <kbd>m</kbd> key to enable the addon:
+
+2. Hover over a DOM node
+
+3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.
+
+![](https://user-images.githubusercontent.com/42671/119589961-dff9b380-bda1-11eb-9550-7ae28bc70bf4.gif)
+
+## Usage
+
+This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+
+```sh
+npm i -D @storybook/addon-measure
+```
+
+Add `"@storybook/addon-measure"` to the addons array in your `.storybook/main.js`:
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-measure'],
+};
+```
+
+### Inspiration
+
+- [Inspx](https://github.com/raunofreiberg/inspx) by Rauno Freiberg
+- [Aaron Westbrook's script](https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7)
+- [Visbug](https://visbug.web.app/) from the Chrome team
diff --git a/addons/measure/package.json b/addons/measure/package.json
new file mode 100644
index 000000000000..5dc89df8958f
--- /dev/null
+++ b/addons/measure/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "@storybook/addon-measure",
+  "version": "6.4.0-alpha.17",
+  "description": "Inspect layouts by visualizing the box model",
+  "keywords": [
+    "storybook-addons",
+    "essentials",
+    "style",
+    "CSS",
+    "design"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/measure",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/measure"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "winkerVSbecks",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.16.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
+  "sbmodern": "dist/modern/index.js",
+  "storybook": {
+    "displayName": "Measure",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/42671/119589951-dbcd9600-bda1-11eb-9227-078f3cfc1e74.png"
+  }
+}
diff --git a/addons/measure/preset.js b/addons/measure/preset.js
new file mode 100644
index 000000000000..459bbb650ccd
--- /dev/null
+++ b/addons/measure/preset.js
@@ -0,0 +1,12 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/addDecorator')];
+}
+
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};
diff --git a/addons/measure/register.js b/addons/measure/register.js
new file mode 100644
index 000000000000..f209c0eb3703
--- /dev/null
+++ b/addons/measure/register.js
@@ -0,0 +1 @@
+require('./dist/esm/register');
diff --git a/addons/measure/src/Tool.tsx b/addons/measure/src/Tool.tsx
new file mode 100644
index 000000000000..86edabf47e46
--- /dev/null
+++ b/addons/measure/src/Tool.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback, useEffect } from 'react';
+import { useGlobals, useStorybookApi } from '@storybook/api';
+import { Icons, IconButton } from '@storybook/components';
+import { TOOL_ID, ADDON_ID } from './constants';
+
+export const Tool = () => {
+  const [globals, updateGlobals] = useGlobals();
+  const { measureEnabled } = globals;
+  const api = useStorybookApi();
+
+  const toggleMeasure = useCallback(
+    () =>
+      updateGlobals({
+        measureEnabled: !measureEnabled,
+      }),
+    [updateGlobals, measureEnabled]
+  );
+
+  useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: 'Toggle Measure [M]',
+      defaultShortcut: ['M'],
+      actionName: 'measure',
+      showInMenu: false,
+      action: toggleMeasure,
+    });
+  }, [toggleMeasure, api]);
+
+  return (
+    <IconButton
+      key={TOOL_ID}
+      active={measureEnabled}
+      title="Enable measure"
+      onClick={toggleMeasure}
+    >
+      <Icons icon="ruler" />
+    </IconButton>
+  );
+};
diff --git a/addons/measure/src/box-model/canvas.ts b/addons/measure/src/box-model/canvas.ts
new file mode 100644
index 000000000000..08387ec05a64
--- /dev/null
+++ b/addons/measure/src/box-model/canvas.ts
@@ -0,0 +1,97 @@
+/* eslint-disable no-param-reassign */
+import global from 'global';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+interface CanvasState {
+  canvas?: HTMLCanvasElement;
+  context?: CanvasRenderingContext2D;
+  width?: number;
+  height?: number;
+}
+
+function getDocumentWidthAndHeight() {
+  const container = global.document.documentElement;
+
+  const height = Math.max(container.scrollHeight, container.offsetHeight);
+  const width = Math.max(container.scrollWidth, container.offsetWidth);
+  return { width, height };
+}
+
+function createCanvas(): CanvasState {
+  const canvas = global.document.createElement('canvas');
+  canvas.id = 'storybook-addon-measure';
+  const context = canvas.getContext('2d');
+  // Set canvas width & height
+  const { width, height } = getDocumentWidthAndHeight();
+  setCanvasWidthAndHeight(canvas, context, { width, height });
+  // Position canvas
+  canvas.style.position = 'absolute';
+  canvas.style.left = '0';
+  canvas.style.top = '0';
+  canvas.style.zIndex = '100000';
+  // Disable any user interactions
+  canvas.style.pointerEvents = 'none';
+  global.document.body.appendChild(canvas);
+
+  return { canvas, context, width, height };
+}
+
+function setCanvasWidthAndHeight(
+  canvas: HTMLCanvasElement,
+  context: CanvasRenderingContext2D,
+  { width, height }: Size
+) {
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  // Scale
+  const scale = global.window.devicePixelRatio;
+  canvas.width = Math.floor(width * scale);
+  canvas.height = Math.floor(height * scale);
+
+  // Normalize coordinate system to use css pixels.
+  context.scale(scale, scale);
+}
+
+let state: CanvasState = {};
+
+export function init() {
+  if (!state.canvas) {
+    state = createCanvas();
+  }
+}
+
+export function clear() {
+  if (state.context) {
+    state.context.clearRect(0, 0, state.width, state.height);
+  }
+}
+
+export function draw(callback: (context: CanvasRenderingContext2D) => void) {
+  clear();
+  callback(state.context);
+}
+
+export function rescale() {
+  // First reset so that the canvas size doesn't impact the container size
+  setCanvasWidthAndHeight(state.canvas, state.context, { width: 0, height: 0 });
+
+  const { width, height } = getDocumentWidthAndHeight();
+  setCanvasWidthAndHeight(state.canvas, state.context, { width, height });
+
+  // update state
+  state.width = width;
+  state.height = height;
+}
+
+export function destroy() {
+  if (state.canvas) {
+    clear();
+    state.canvas.parentNode.removeChild(state.canvas);
+    state = {};
+  }
+}
diff --git a/addons/measure/src/box-model/labels.ts b/addons/measure/src/box-model/labels.ts
new file mode 100644
index 000000000000..80bbf440c92e
--- /dev/null
+++ b/addons/measure/src/box-model/labels.ts
@@ -0,0 +1,308 @@
+/* eslint-disable operator-assignment */
+/* eslint-disable no-param-reassign */
+type LabelType = 'margin' | 'padding' | 'border' | 'content';
+type LabelPosition = 'top' | 'right' | 'bottom' | 'left' | 'center';
+type Direction = 'top' | 'right' | 'bottom' | 'left';
+
+export interface Label {
+  type: LabelType;
+  text: number | string;
+  position: LabelPosition;
+}
+
+export type LabelStack = Label[];
+
+interface RectSize {
+  w: number;
+  h: number;
+}
+
+interface Coordinate {
+  x: number;
+  y: number;
+}
+
+interface Rect extends RectSize, Coordinate {}
+
+interface RoundedRect extends Rect {
+  r: number;
+}
+
+const colors = {
+  margin: '#f6b26b',
+  border: '#ffe599',
+  padding: '#93c47d',
+  content: '#6fa8dc',
+  text: '#232020',
+};
+
+const labelPadding = 6;
+
+function roundedRect(context: CanvasRenderingContext2D, { x, y, w, h, r }: RoundedRect) {
+  x = x - w / 2;
+  y = y - h / 2;
+
+  if (w < 2 * r) r = w / 2;
+  if (h < 2 * r) r = h / 2;
+
+  context.beginPath();
+  context.moveTo(x + r, y);
+  context.arcTo(x + w, y, x + w, y + h, r);
+  context.arcTo(x + w, y + h, x, y + h, r);
+  context.arcTo(x, y + h, x, y, r);
+  context.arcTo(x, y, x + w, y, r);
+  context.closePath();
+}
+
+function positionCoordinate(
+  position: LabelPosition,
+  { padding, border, width, height, top, left }: ElementMeasurements
+): Coordinate {
+  const contentWidth = width - border.left - border.right - padding.left - padding.right;
+  const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
+
+  let x = left + border.left + padding.left;
+  let y = top + border.top + padding.top;
+
+  if (position === 'top') {
+    x += contentWidth / 2;
+  } else if (position === 'right') {
+    x += contentWidth;
+    y += contentHeight / 2;
+  } else if (position === 'bottom') {
+    x += contentWidth / 2;
+    y += contentHeight;
+  } else if (position === 'left') {
+    y += contentHeight / 2;
+  } else if (position === 'center') {
+    x += contentWidth / 2;
+    y += contentHeight / 2;
+  }
+
+  return { x, y };
+}
+
+/**
+ * Offset the label based on how many layers appear before it
+ * For example:
+ * margin labels will shift further outwards if there are
+ * padding labels
+ */
+function offset(
+  type: LabelType,
+  position: LabelPosition,
+  { margin, border, padding }: ElementMeasurements,
+  labelPaddingSize: number,
+  external: boolean
+) {
+  let shift = (dir: Direction) => 0;
+  let offsetX = 0;
+  let offsetY = 0;
+
+  // If external labels then push them to the edge of the band
+  // else keep them centred
+  const locationMultiplier = external ? 1 : 0.5;
+  // Account for padding within the label
+  const labelPaddingShift = external ? labelPaddingSize * 2 : 0;
+
+  if (type === 'padding') {
+    shift = (dir: Direction) => padding[dir] * locationMultiplier + labelPaddingShift;
+  } else if (type === 'border') {
+    shift = (dir: Direction) => padding[dir] + border[dir] * locationMultiplier + labelPaddingShift;
+  } else if (type === 'margin') {
+    shift = (dir: Direction) =>
+      padding[dir] + border[dir] + margin[dir] * locationMultiplier + labelPaddingShift;
+  }
+
+  if (position === 'top') {
+    offsetY = -shift('top');
+  } else if (position === 'right') {
+    offsetX = shift('right');
+  } else if (position === 'bottom') {
+    offsetY = shift('bottom');
+  } else if (position === 'left') {
+    offsetX = -shift('left');
+  }
+
+  return { offsetX, offsetY };
+}
+
+function collide(a: Rect, b: Rect) {
+  return (
+    Math.abs(a.x - b.x) < Math.abs(a.w + b.w) / 2 && Math.abs(a.y - b.y) < Math.abs(a.h + b.h) / 2
+  );
+}
+
+function overlapAdjustment(position: LabelPosition, currentRect: Rect, prevRect: Rect) {
+  if (position === 'top') {
+    currentRect.y = prevRect.y - prevRect.h - labelPadding;
+  } else if (position === 'right') {
+    currentRect.x = prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2;
+  } else if (position === 'bottom') {
+    currentRect.y = prevRect.y + prevRect.h + labelPadding;
+  } else if (position === 'left') {
+    currentRect.x = prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2;
+  }
+
+  return { x: currentRect.x, y: currentRect.y };
+}
+
+function textWithRect(
+  context: CanvasRenderingContext2D,
+  type: LabelType,
+  { x, y, w, h }: Rect,
+  text: number | string
+) {
+  roundedRect(context, { x, y, w, h, r: 3 });
+  context.fillStyle = `${colors[type]}dd`;
+  context.fill();
+  context.strokeStyle = colors[type];
+  context.stroke();
+
+  context.fillStyle = colors.text;
+  context.fillText(text as string, x, y);
+
+  roundedRect(context, { x, y, w, h, r: 3 });
+  context.fillStyle = `${colors[type]}dd`;
+  context.fill();
+  context.strokeStyle = colors[type];
+  context.stroke();
+
+  context.fillStyle = colors.text;
+  context.fillText(text as string, x, y);
+
+  return { x, y, w, h };
+}
+
+function configureText(context: CanvasRenderingContext2D, text: number | string): RectSize {
+  context.font = '600 12px monospace';
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+
+  const metrics = context.measureText(text as string);
+  const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+
+  const w = metrics.width + labelPadding * 2;
+  const h = actualHeight + labelPadding * 2;
+
+  return { w, h };
+}
+
+function drawLabel(
+  context: CanvasRenderingContext2D,
+  measurements: ElementMeasurements,
+  { type, position = 'center', text }: Label,
+  prevRect: Rect,
+  external = false
+) {
+  let { x, y } = positionCoordinate(position, measurements);
+  const { offsetX, offsetY } = offset(type, position, measurements, labelPadding + 1, external);
+
+  // Shift coordinate to center within
+  // the band of measurement
+  x += offsetX;
+  y += offsetY;
+
+  const { w, h } = configureText(context, text);
+
+  // Adjust for overlap
+  if (prevRect && collide({ x, y, w, h }, prevRect)) {
+    const adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);
+    x = adjusted.x;
+    y = adjusted.y;
+  }
+
+  return textWithRect(context, type, { x, y, w, h }, text);
+}
+
+function floatingOffset(alignment: FloatingAlignment, { w, h }: RectSize) {
+  const deltaW = w * 0.5 + labelPadding;
+  const deltaH = h * 0.5 + labelPadding;
+
+  return {
+    offsetX: (alignment.x === 'left' ? -1 : 1) * deltaW,
+    offsetY: (alignment.y === 'top' ? -1 : 1) * deltaH,
+  };
+}
+
+export function drawFloatingLabel(
+  context: CanvasRenderingContext2D,
+  measurements: ElementMeasurements,
+  { type, text }: Label
+) {
+  const { floatingAlignment, extremities } = measurements;
+
+  let x = extremities[floatingAlignment.x];
+  let y = extremities[floatingAlignment.y];
+
+  const { w, h } = configureText(context, text);
+
+  const { offsetX, offsetY } = floatingOffset(floatingAlignment, {
+    w,
+    h,
+  });
+
+  x += offsetX;
+  y += offsetY;
+
+  return textWithRect(context, type, { x, y, w, h }, text);
+}
+
+function drawStack(
+  context: CanvasRenderingContext2D,
+  measurements: ElementMeasurements,
+  stack: LabelStack,
+  external: boolean
+) {
+  const rects: Rect[] = [];
+
+  stack.forEach((l, idx) => {
+    // Move the centred label to floating in external mode
+    const rect =
+      external && l.position === 'center'
+        ? drawFloatingLabel(context, measurements, l)
+        : drawLabel(context, measurements, l, rects[idx - 1], external);
+    rects[idx] = rect;
+  });
+}
+
+interface GroupedLabelStacks {
+  top?: LabelStack;
+  right?: LabelStack;
+  bottom?: LabelStack;
+  left?: LabelStack;
+  center?: LabelStack;
+}
+
+export function labelStacks(
+  context: CanvasRenderingContext2D,
+  measurements: ElementMeasurements,
+  labels: LabelStack,
+  externalLabels: boolean
+) {
+  const stacks = labels.reduce<GroupedLabelStacks>((acc, l) => {
+    if (!Object.prototype.hasOwnProperty.call(acc, l.position)) {
+      acc[l.position] = [];
+    }
+
+    acc[l.position].push(l);
+
+    return acc;
+  }, {});
+
+  if (stacks.top) {
+    drawStack(context, measurements, stacks.top, externalLabels);
+  }
+  if (stacks.right) {
+    drawStack(context, measurements, stacks.right, externalLabels);
+  }
+  if (stacks.bottom) {
+    drawStack(context, measurements, stacks.bottom, externalLabels);
+  }
+  if (stacks.left) {
+    drawStack(context, measurements, stacks.left, externalLabels);
+  }
+  if (stacks.center) {
+    drawStack(context, measurements, stacks.center, externalLabels);
+  }
+}
diff --git a/addons/measure/src/box-model/visualizer.ts b/addons/measure/src/box-model/visualizer.ts
new file mode 100644
index 000000000000..97ac7791bb73
--- /dev/null
+++ b/addons/measure/src/box-model/visualizer.ts
@@ -0,0 +1,308 @@
+/* eslint-disable operator-assignment */
+/**
+ * Based on https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7
+ */
+import global from 'global';
+import { draw } from './canvas';
+import { labelStacks, Label, LabelStack } from './labels';
+
+const colors = {
+  margin: '#f6b26ba8',
+  border: '#ffe599a8',
+  padding: '#93c47d8c',
+  content: '#6fa8dca8',
+};
+
+const SMALL_NODE_SIZE = 30;
+
+function pxToNumber(px: string): number {
+  return parseInt(px.replace('px', ''), 10);
+}
+
+function round(value: number): number | string {
+  return Number.isInteger(value) ? value : value.toFixed(2);
+}
+
+function filterZeroValues(labels: LabelStack): LabelStack {
+  return labels.filter((l) => l.text !== 0 && l.text !== '0');
+}
+
+function floatingAlignment(extremities: Extremities): FloatingAlignment {
+  const windowExtremities = {
+    top: global.window.scrollY,
+    bottom: global.window.scrollY + global.window.innerHeight,
+    left: global.window.scrollX,
+    right: global.window.scrollX + global.window.innerWidth,
+  };
+
+  const distances = {
+    top: Math.abs(windowExtremities.top - extremities.top),
+    bottom: Math.abs(windowExtremities.bottom - extremities.bottom),
+    left: Math.abs(windowExtremities.left - extremities.left),
+    right: Math.abs(windowExtremities.right - extremities.right),
+  };
+
+  return {
+    x: distances.left > distances.right ? 'left' : 'right',
+    y: distances.top > distances.bottom ? 'top' : 'bottom',
+  };
+}
+
+function measureElement(element: HTMLElement): ElementMeasurements {
+  const style = global.getComputedStyle(element);
+  // eslint-disable-next-line prefer-const
+  let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
+
+  const {
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderBottomWidth,
+    borderTopWidth,
+    borderLeftWidth,
+    borderRightWidth,
+  } = style;
+
+  top = top + global.window.scrollY;
+  left = left + global.window.scrollX;
+  bottom = bottom + global.window.scrollY;
+  right = right + global.window.scrollX;
+
+  const margin = {
+    top: pxToNumber(marginTop),
+    bottom: pxToNumber(marginBottom),
+    left: pxToNumber(marginLeft),
+    right: pxToNumber(marginRight),
+  };
+
+  const padding = {
+    top: pxToNumber(paddingTop),
+    bottom: pxToNumber(paddingBottom),
+    left: pxToNumber(paddingLeft),
+    right: pxToNumber(paddingRight),
+  };
+
+  const border = {
+    top: pxToNumber(borderTopWidth),
+    bottom: pxToNumber(borderBottomWidth),
+    left: pxToNumber(borderLeftWidth),
+    right: pxToNumber(borderRightWidth),
+  };
+
+  const extremities = {
+    top: top - margin.top,
+    bottom: bottom + margin.bottom,
+    left: left - margin.left,
+    right: right + margin.right,
+  };
+
+  return {
+    margin,
+    padding,
+    border,
+    top,
+    left,
+    bottom,
+    right,
+    width,
+    height,
+    extremities,
+    floatingAlignment: floatingAlignment(extremities),
+  };
+}
+
+function drawMargin(
+  context: CanvasRenderingContext2D,
+  { margin, width, height, top, left, bottom, right }: Dimensions
+): LabelStack {
+  // Draw Margin
+  const marginHeight = height + margin.bottom + margin.top;
+
+  context.fillStyle = colors.margin;
+  // Top margin rect
+  context.fillRect(left, top - margin.top, width, margin.top);
+  // Right margin rect
+  context.fillRect(right, top - margin.top, margin.right, marginHeight);
+  // Bottom margin rect
+  context.fillRect(left, bottom, width, margin.bottom);
+  // Left margin rect
+  context.fillRect(left - margin.left, top - margin.top, margin.left, marginHeight);
+
+  const marginLabels: LabelStack = [
+    {
+      type: 'margin',
+      text: round(margin.top),
+      position: 'top',
+    },
+    {
+      type: 'margin',
+      text: round(margin.right),
+      position: 'right',
+    },
+    {
+      type: 'margin',
+      text: round(margin.bottom),
+      position: 'bottom',
+    },
+    {
+      type: 'margin',
+      text: round(margin.left),
+      position: 'left',
+    },
+  ];
+
+  return filterZeroValues(marginLabels);
+}
+
+function drawPadding(
+  context: CanvasRenderingContext2D,
+  { padding, border, width, height, top, left, bottom, right }: Dimensions
+): LabelStack {
+  const paddingWidth = width - border.left - border.right;
+  const paddingHeight = height - padding.top - padding.bottom - border.top - border.bottom;
+
+  context.fillStyle = colors.padding;
+  // Top padding rect
+  context.fillRect(left + border.left, top + border.top, paddingWidth, padding.top);
+  // Right padding rect
+  context.fillRect(
+    right - padding.right - border.right,
+    top + padding.top + border.top,
+    padding.right,
+    paddingHeight
+  );
+  // Bottom padding rect
+  context.fillRect(
+    left + border.left,
+    bottom - padding.bottom - border.bottom,
+    paddingWidth,
+    padding.bottom
+  );
+  // Left padding rect
+  context.fillRect(left + border.left, top + padding.top + border.top, padding.left, paddingHeight);
+
+  const paddingLabels: LabelStack = [
+    {
+      type: 'padding',
+      text: padding.top,
+      position: 'top',
+    },
+    {
+      type: 'padding',
+      text: padding.right,
+      position: 'right',
+    },
+    {
+      type: 'padding',
+      text: padding.bottom,
+      position: 'bottom',
+    },
+    {
+      type: 'padding',
+      text: padding.left,
+      position: 'left',
+    },
+  ];
+
+  return filterZeroValues(paddingLabels);
+}
+
+function drawBorder(
+  context: CanvasRenderingContext2D,
+  { border, width, height, top, left, bottom, right }: Dimensions
+): Label[] {
+  const borderHeight = height - border.top - border.bottom;
+
+  context.fillStyle = colors.border;
+  // Top border rect
+  context.fillRect(left, top, width, border.top);
+  // Bottom border rect
+  context.fillRect(left, bottom - border.bottom, width, border.bottom);
+  // Left border rect
+  context.fillRect(left, top + border.top, border.left, borderHeight);
+  // Right border rect
+  context.fillRect(right - border.right, top + border.top, border.right, borderHeight);
+
+  const borderLabels: LabelStack = [
+    {
+      type: 'border',
+      text: border.top,
+      position: 'top',
+    },
+    {
+      type: 'border',
+      text: border.right,
+      position: 'right',
+    },
+    {
+      type: 'border',
+      text: border.bottom,
+      position: 'bottom',
+    },
+    {
+      type: 'border',
+      text: border.left,
+      position: 'left',
+    },
+  ];
+
+  return filterZeroValues(borderLabels);
+}
+
+function drawContent(
+  context: CanvasRenderingContext2D,
+  { padding, border, width, height, top, left }: Dimensions
+): LabelStack {
+  const contentWidth = width - border.left - border.right - padding.left - padding.right;
+  const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
+
+  context.fillStyle = colors.content;
+  // content rect
+  context.fillRect(
+    left + border.left + padding.left,
+    top + border.top + padding.top,
+    contentWidth,
+    contentHeight
+  );
+
+  // Dimension label
+  return [
+    {
+      type: 'content',
+      position: 'center',
+      text: `${round(contentWidth)} x ${round(contentHeight)}`,
+    },
+  ];
+}
+
+function drawBoxModel(element: HTMLElement) {
+  return (context: CanvasRenderingContext2D) => {
+    if (element && context) {
+      const measurements = measureElement(element);
+
+      const marginLabels = drawMargin(context, measurements);
+      const paddingLabels = drawPadding(context, measurements);
+      const borderLabels = drawBorder(context, measurements);
+      const contentLabels = drawContent(context, measurements);
+
+      const externalLabels =
+        measurements.width <= SMALL_NODE_SIZE * 3 || measurements.height <= SMALL_NODE_SIZE;
+
+      labelStacks(
+        context,
+        measurements,
+        [...contentLabels, ...paddingLabels, ...borderLabels, ...marginLabels],
+        externalLabels
+      );
+    }
+  };
+}
+
+export function drawSelectedElement(element: HTMLElement) {
+  draw(drawBoxModel(element));
+}
diff --git a/addons/measure/src/constants.ts b/addons/measure/src/constants.ts
new file mode 100644
index 000000000000..3375eac3e939
--- /dev/null
+++ b/addons/measure/src/constants.ts
@@ -0,0 +1,9 @@
+export const ADDON_ID = 'storybook/measure-addon';
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const PARAM_KEY = 'measureEnabled';
+
+export const EVENTS = {
+  RESULT: `${ADDON_ID}/result`,
+  REQUEST: `${ADDON_ID}/request`,
+  CLEAR: `${ADDON_ID}/clear`,
+};
diff --git a/addons/measure/src/index.ts b/addons/measure/src/index.ts
new file mode 100644
index 000000000000..644402abb41c
--- /dev/null
+++ b/addons/measure/src/index.ts
@@ -0,0 +1,6 @@
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+// make it work with --isolatedModules
+export default {};
diff --git a/addons/measure/src/preset/addDecorator.tsx b/addons/measure/src/preset/addDecorator.tsx
new file mode 100644
index 000000000000..8aabbd42a2da
--- /dev/null
+++ b/addons/measure/src/preset/addDecorator.tsx
@@ -0,0 +1,8 @@
+import { withMeasure } from '../withMeasure';
+import { PARAM_KEY } from '../constants';
+
+export const decorators = [withMeasure];
+
+export const globals = {
+  [PARAM_KEY]: false,
+};
diff --git a/addons/measure/src/register.tsx b/addons/measure/src/register.tsx
new file mode 100644
index 000000000000..162e7ce43ecd
--- /dev/null
+++ b/addons/measure/src/register.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+
+import { ADDON_ID, TOOL_ID } from './constants';
+import { Tool } from './Tool';
+
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: 'Measure',
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => <Tool />,
+  });
+});
diff --git a/addons/measure/src/typings.d.ts b/addons/measure/src/typings.d.ts
new file mode 100644
index 000000000000..4a8ad58bf897
--- /dev/null
+++ b/addons/measure/src/typings.d.ts
@@ -0,0 +1,51 @@
+declare module 'global';
+
+interface Margin {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+interface Padding {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+interface Border {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+interface Dimensions {
+  margin: Margin;
+  padding: Padding;
+  border: Border;
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
+
+interface Extremities {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+interface FloatingAlignment {
+  x: 'left' | 'right';
+  y: 'top' | 'bottom';
+}
+
+interface ElementMeasurements extends Dimensions {
+  extremities: Extremities;
+  floatingAlignment: FloatingAlignment;
+}
diff --git a/addons/measure/src/util.ts b/addons/measure/src/util.ts
new file mode 100644
index 000000000000..afb07d91299d
--- /dev/null
+++ b/addons/measure/src/util.ts
@@ -0,0 +1,28 @@
+import global from 'global';
+
+export const deepElementFromPoint = (x: number, y: number) => {
+  const element = global.document.elementFromPoint(x, y);
+
+  const crawlShadows = (node: Element): Element => {
+    if (node && node.shadowRoot) {
+      const nestedElement = node.shadowRoot.elementFromPoint(x, y);
+
+      // Nested node is same as the root one
+      if (node.isEqualNode(nestedElement)) {
+        return node;
+      }
+      // The nested node has shadow DOM too so continue crawling
+      if (nestedElement.shadowRoot) {
+        return crawlShadows(nestedElement);
+      }
+      // No more shadow DOM
+      return nestedElement;
+    }
+
+    return node;
+  };
+
+  const shadowElement = crawlShadows(element);
+
+  return shadowElement || element;
+};
diff --git a/addons/measure/src/withMeasure.ts b/addons/measure/src/withMeasure.ts
new file mode 100644
index 000000000000..64711e69a5e4
--- /dev/null
+++ b/addons/measure/src/withMeasure.ts
@@ -0,0 +1,63 @@
+/* eslint-env browser */
+import { StoryFn as StoryFunction, StoryContext, useEffect } from '@storybook/addons';
+import { drawSelectedElement } from './box-model/visualizer';
+import { init, rescale, destroy } from './box-model/canvas';
+import { deepElementFromPoint } from './util';
+
+let nodeAtPointerRef;
+const pointer = { x: 0, y: 0 };
+
+function findAndDrawElement(x: number, y: number) {
+  nodeAtPointerRef = deepElementFromPoint(x, y);
+  drawSelectedElement(nodeAtPointerRef);
+}
+
+export const withMeasure = (StoryFn: StoryFunction, context: StoryContext) => {
+  const { measureEnabled } = context.globals;
+
+  useEffect(() => {
+    const onMouseMove = (event: MouseEvent) => {
+      window.requestAnimationFrame(() => {
+        event.stopPropagation();
+        pointer.x = event.clientX;
+        pointer.y = event.clientY;
+      });
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onMouseOver = (event: MouseEvent) => {
+      window.requestAnimationFrame(() => {
+        event.stopPropagation();
+        findAndDrawElement(event.clientX, event.clientY);
+      });
+    };
+
+    const onResize = () => {
+      window.requestAnimationFrame(() => {
+        rescale();
+      });
+    };
+
+    if (measureEnabled) {
+      document.addEventListener('mouseover', onMouseOver);
+      init();
+      window.addEventListener('resize', onResize);
+      // Draw the element below the pointer when first enabled
+      findAndDrawElement(pointer.x, pointer.y);
+    }
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      destroy();
+    };
+  }, [measureEnabled]);
+
+  return StoryFn();
+};
diff --git a/addons/measure/tsconfig.json b/addons/measure/tsconfig.json
new file mode 100644
index 000000000000..d1ee4fc75941
--- /dev/null
+++ b/addons/measure/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
+}
diff --git a/addons/outline/README.md b/addons/outline/README.md
new file mode 100644
index 000000000000..c94df715d438
--- /dev/null
+++ b/addons/outline/README.md
@@ -0,0 +1,23 @@
+# Storybook Addon Outline
+
+Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in [Storybook](https://storybook.js.org). Based on [Pesticide](https://github.com/mrmrs/pesticide), it draws outlines around every single element in the preview pane.
+
+![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+
+## Usage
+
+Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+
+```sh
+npm i -D @storybook/addon-outline
+```
+
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-outline'],
+};
+```
+
+You can now click on the outline button in the toolbar to toggle the outlines.
diff --git a/addons/outline/package.json b/addons/outline/package.json
new file mode 100644
index 000000000000..b6362e2684f9
--- /dev/null
+++ b/addons/outline/package.json
@@ -0,0 +1,87 @@
+{
+  "name": "@storybook/addon-outline",
+  "version": "6.4.0-alpha.17",
+  "description": "Outline all elements with CSS to help with layout placement and alignment",
+  "keywords": [
+    "storybook-addons",
+    "essentials",
+    "outline",
+    "css",
+    "layout",
+    "debug",
+    "storybook-addon",
+    "style"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/outline",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/outline"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "winkerVSbecks",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
+    "regenerator-runtime": "^0.13.7",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "^1.16.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
+  "sbmodern": "dist/modern/index.js",
+  "storybook": {
+    "displayName": "Outline",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/263385/101991674-48355c80-3c7c-11eb-9686-f684e755fcdd.png"
+  }
+}
diff --git a/addons/outline/preset.js b/addons/outline/preset.js
new file mode 100644
index 000000000000..459bbb650ccd
--- /dev/null
+++ b/addons/outline/preset.js
@@ -0,0 +1,12 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/preset/addDecorator')];
+}
+
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};
diff --git a/addons/outline/register.js b/addons/outline/register.js
new file mode 100644
index 000000000000..f209c0eb3703
--- /dev/null
+++ b/addons/outline/register.js
@@ -0,0 +1 @@
+require('./dist/esm/register');
diff --git a/addons/outline/src/OutlineSelector.tsx b/addons/outline/src/OutlineSelector.tsx
new file mode 100644
index 000000000000..9a91fba9cd6d
--- /dev/null
+++ b/addons/outline/src/OutlineSelector.tsx
@@ -0,0 +1,29 @@
+import React, { memo, useCallback } from 'react';
+import { useGlobals } from '@storybook/api';
+import { Icons, IconButton } from '@storybook/components';
+import { PARAM_KEY } from './constants';
+
+export const OutlineSelector = memo(() => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const isActive = globals[PARAM_KEY] || false;
+
+  const toggleOutline = useCallback(
+    () =>
+      updateGlobals({
+        [PARAM_KEY]: !isActive,
+      }),
+    [isActive]
+  );
+
+  return (
+    <IconButton
+      key="outline"
+      active={isActive}
+      title="Apply outlines to the preview"
+      onClick={toggleOutline}
+    >
+      <Icons icon="outline" />
+    </IconButton>
+  );
+});
diff --git a/addons/outline/src/constants.ts b/addons/outline/src/constants.ts
new file mode 100644
index 000000000000..1da3648c98ee
--- /dev/null
+++ b/addons/outline/src/constants.ts
@@ -0,0 +1,2 @@
+export const ADDON_ID = 'storybook/outline';
+export const PARAM_KEY = 'outline';
diff --git a/addons/outline/src/helpers.ts b/addons/outline/src/helpers.ts
new file mode 100644
index 000000000000..569a80e21d7b
--- /dev/null
+++ b/addons/outline/src/helpers.ts
@@ -0,0 +1,27 @@
+import global from 'global';
+
+export const clearStyles = (selector: string | string[]) => {
+  const selectors = Array.isArray(selector) ? selector : [selector];
+  selectors.forEach(clearStyle);
+};
+
+const clearStyle = (selector: string | string[]) => {
+  const element = global.document.getElementById(selector);
+  if (element && element.parentElement) {
+    element.parentElement.removeChild(element);
+  }
+};
+
+export const addOutlineStyles = (selector: string, css: string) => {
+  const existingStyle = global.document.getElementById(selector);
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    const style = global.document.createElement('style');
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    global.document.head.appendChild(style);
+  }
+};
diff --git a/addons/outline/src/index.ts b/addons/outline/src/index.ts
new file mode 100644
index 000000000000..644402abb41c
--- /dev/null
+++ b/addons/outline/src/index.ts
@@ -0,0 +1,6 @@
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+
+// make it work with --isolatedModules
+export default {};
diff --git a/addons/outline/src/outlineCSS.ts b/addons/outline/src/outlineCSS.ts
new file mode 100644
index 000000000000..94bbeee73570
--- /dev/null
+++ b/addons/outline/src/outlineCSS.ts
@@ -0,0 +1,403 @@
+import dedent from 'ts-dedent';
+
+/*
+  From pesticide v1.3.0 . @mrmrs . MIT
+*/
+export default function outlineCSS(selector: string) {
+  return dedent/* css */ `
+    ${selector} body {
+      outline: 1px solid #2980b9 !important;
+    }
+
+    ${selector} article {
+      outline: 1px solid #3498db !important;
+    }
+
+    ${selector} nav {
+      outline: 1px solid #0088c3 !important;
+    }
+
+    ${selector} aside {
+      outline: 1px solid #33a0ce !important;
+    }
+
+    ${selector} section {
+      outline: 1px solid #66b8da !important;
+    }
+
+    ${selector} header {
+      outline: 1px solid #99cfe7 !important;
+    }
+
+    ${selector} footer {
+      outline: 1px solid #cce7f3 !important;
+    }
+
+    ${selector} h1 {
+      outline: 1px solid #162544 !important;
+    }
+
+    ${selector} h2 {
+      outline: 1px solid #314e6e !important;
+    }
+
+    ${selector} h3 {
+      outline: 1px solid #3e5e85 !important;
+    }
+
+    ${selector} h4 {
+      outline: 1px solid #449baf !important;
+    }
+
+    ${selector} h5 {
+      outline: 1px solid #c7d1cb !important;
+    }
+
+    ${selector} h6 {
+      outline: 1px solid #4371d0 !important;
+    }
+
+    ${selector} main {
+      outline: 1px solid #2f4f90 !important;
+    }
+
+    ${selector} address {
+      outline: 1px solid #1a2c51 !important;
+    }
+
+    ${selector} div {
+      outline: 1px solid #036cdb !important;
+    }
+
+    ${selector} p {
+      outline: 1px solid #ac050b !important;
+    }
+
+    ${selector} hr {
+      outline: 1px solid #ff063f !important;
+    }
+
+    ${selector} pre {
+      outline: 1px solid #850440 !important;
+    }
+
+    ${selector} blockquote {
+      outline: 1px solid #f1b8e7 !important;
+    }
+
+    ${selector} ol {
+      outline: 1px solid #ff050c !important;
+    }
+
+    ${selector} ul {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${selector} li {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${selector} dl {
+      outline: 1px solid #fd3427 !important;
+    }
+
+    ${selector} dt {
+      outline: 1px solid #ff0043 !important;
+    }
+
+    ${selector} dd {
+      outline: 1px solid #e80174 !important;
+    }
+
+    ${selector} figure {
+      outline: 1px solid #ff00bb !important;
+    }
+
+    ${selector} figcaption {
+      outline: 1px solid #bf0032 !important;
+    }
+
+    ${selector} table {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${selector} caption {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${selector} thead {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${selector} tbody {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${selector} tfoot {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${selector} tr {
+      outline: 1px solid #86c0b2 !important;
+    }
+
+    ${selector} th {
+      outline: 1px solid #a1e7d6 !important;
+    }
+
+    ${selector} td {
+      outline: 1px solid #3f5a54 !important;
+    }
+
+    ${selector} col {
+      outline: 1px solid #6c9a8f !important;
+    }
+
+    ${selector} colgroup {
+      outline: 1px solid #6c9a9d !important;
+    }
+
+    ${selector} button {
+      outline: 1px solid #da8301 !important;
+    }
+
+    ${selector} datalist {
+      outline: 1px solid #c06000 !important;
+    }
+
+    ${selector} fieldset {
+      outline: 1px solid #d95100 !important;
+    }
+
+    ${selector} form {
+      outline: 1px solid #d23600 !important;
+    }
+
+    ${selector} input {
+      outline: 1px solid #fca600 !important;
+    }
+
+    ${selector} keygen {
+      outline: 1px solid #b31e00 !important;
+    }
+
+    ${selector} label {
+      outline: 1px solid #ee8900 !important;
+    }
+
+    ${selector} legend {
+      outline: 1px solid #de6d00 !important;
+    }
+
+    ${selector} meter {
+      outline: 1px solid #e8630c !important;
+    }
+
+    ${selector} optgroup {
+      outline: 1px solid #b33600 !important;
+    }
+
+    ${selector} option {
+      outline: 1px solid #ff8a00 !important;
+    }
+
+    ${selector} output {
+      outline: 1px solid #ff9619 !important;
+    }
+
+    ${selector} progress {
+      outline: 1px solid #e57c00 !important;
+    }
+
+    ${selector} select {
+      outline: 1px solid #e26e0f !important;
+    }
+
+    ${selector} textarea {
+      outline: 1px solid #cc5400 !important;
+    }
+
+    ${selector} details {
+      outline: 1px solid #33848f !important;
+    }
+
+    ${selector} summary {
+      outline: 1px solid #60a1a6 !important;
+    }
+
+    ${selector} command {
+      outline: 1px solid #438da1 !important;
+    }
+
+    ${selector} menu {
+      outline: 1px solid #449da6 !important;
+    }
+
+    ${selector} del {
+      outline: 1px solid #bf0000 !important;
+    }
+
+    ${selector} ins {
+      outline: 1px solid #400000 !important;
+    }
+
+    ${selector} img {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${selector} iframe {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${selector} embed {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${selector} object {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${selector} param {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${selector} video {
+      outline: 1px solid #6ee866 !important;
+    }
+
+    ${selector} audio {
+      outline: 1px solid #027353 !important;
+    }
+
+    ${selector} source {
+      outline: 1px solid #012426 !important;
+    }
+
+    ${selector} canvas {
+      outline: 1px solid #a2f570 !important;
+    }
+
+    ${selector} track {
+      outline: 1px solid #59a600 !important;
+    }
+
+    ${selector} map {
+      outline: 1px solid #7be500 !important;
+    }
+
+    ${selector} area {
+      outline: 1px solid #305900 !important;
+    }
+
+    ${selector} a {
+      outline: 1px solid #ff62ab !important;
+    }
+
+    ${selector} em {
+      outline: 1px solid #800b41 !important;
+    }
+
+    ${selector} strong {
+      outline: 1px solid #ff1583 !important;
+    }
+
+    ${selector} i {
+      outline: 1px solid #803156 !important;
+    }
+
+    ${selector} b {
+      outline: 1px solid #cc1169 !important;
+    }
+
+    ${selector} u {
+      outline: 1px solid #ff0430 !important;
+    }
+
+    ${selector} s {
+      outline: 1px solid #f805e3 !important;
+    }
+
+    ${selector} small {
+      outline: 1px solid #d107b2 !important;
+    }
+
+    ${selector} abbr {
+      outline: 1px solid #4a0263 !important;
+    }
+
+    ${selector} q {
+      outline: 1px solid #240018 !important;
+    }
+
+    ${selector} cite {
+      outline: 1px solid #64003c !important;
+    }
+
+    ${selector} dfn {
+      outline: 1px solid #b4005a !important;
+    }
+
+    ${selector} sub {
+      outline: 1px solid #dba0c8 !important;
+    }
+
+    ${selector} sup {
+      outline: 1px solid #cc0256 !important;
+    }
+
+    ${selector} time {
+      outline: 1px solid #d6606d !important;
+    }
+
+    ${selector} code {
+      outline: 1px solid #e04251 !important;
+    }
+
+    ${selector} kbd {
+      outline: 1px solid #5e001f !important;
+    }
+
+    ${selector} samp {
+      outline: 1px solid #9c0033 !important;
+    }
+
+    ${selector} var {
+      outline: 1px solid #d90047 !important;
+    }
+
+    ${selector} mark {
+      outline: 1px solid #ff0053 !important;
+    }
+
+    ${selector} bdi {
+      outline: 1px solid #bf3668 !important;
+    }
+
+    ${selector} bdo {
+      outline: 1px solid #6f1400 !important;
+    }
+
+    ${selector} ruby {
+      outline: 1px solid #ff7b93 !important;
+    }
+
+    ${selector} rt {
+      outline: 1px solid #ff2f54 !important;
+    }
+
+    ${selector} rp {
+      outline: 1px solid #803e49 !important;
+    }
+
+    ${selector} span {
+      outline: 1px solid #cc2643 !important;
+    }
+
+    ${selector} br {
+      outline: 1px solid #db687d !important;
+    }
+
+    ${selector} wbr {
+      outline: 1px solid #db175b !important;
+    }`;
+}
diff --git a/addons/outline/src/preset/addDecorator.tsx b/addons/outline/src/preset/addDecorator.tsx
new file mode 100644
index 000000000000..1abee6e575c6
--- /dev/null
+++ b/addons/outline/src/preset/addDecorator.tsx
@@ -0,0 +1,8 @@
+import { withOutline } from '../withOutline';
+import { PARAM_KEY } from '../constants';
+
+export const decorators = [withOutline];
+
+export const globals = {
+  [PARAM_KEY]: false,
+};
diff --git a/addons/outline/src/register.tsx b/addons/outline/src/register.tsx
new file mode 100644
index 000000000000..3f3f96ae3b06
--- /dev/null
+++ b/addons/outline/src/register.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+
+import { ADDON_ID } from './constants';
+import { OutlineSelector } from './OutlineSelector';
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Outline',
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <OutlineSelector />,
+  });
+});
diff --git a/addons/outline/src/typings.d.ts b/addons/outline/src/typings.d.ts
new file mode 100644
index 000000000000..2f4eb9cf4fd9
--- /dev/null
+++ b/addons/outline/src/typings.d.ts
@@ -0,0 +1 @@
+declare module 'global';
diff --git a/addons/outline/src/withOutline.ts b/addons/outline/src/withOutline.ts
new file mode 100644
index 000000000000..391967c96abb
--- /dev/null
+++ b/addons/outline/src/withOutline.ts
@@ -0,0 +1,33 @@
+import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+
+import { clearStyles, addOutlineStyles } from './helpers';
+import { PARAM_KEY } from './constants';
+import outlineCSS from './outlineCSS';
+
+export const withOutline = (StoryFn: StoryFunction, context: StoryContext) => {
+  const { globals } = context;
+  const isActive = globals[PARAM_KEY] === true;
+  const isInDocs = context.viewMode === 'docs';
+
+  const outlineStyles = useMemo(() => {
+    const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+
+    return outlineCSS(selector);
+  }, [context]);
+
+  useEffect(() => {
+    const selectorId = isInDocs ? `addon-outline-docs-${context.id}` : `addon-outline`;
+
+    if (!isActive) {
+      clearStyles(selectorId);
+    } else {
+      addOutlineStyles(selectorId, outlineStyles);
+    }
+
+    return () => {
+      clearStyles(selectorId);
+    };
+  }, [isActive, outlineStyles, context]);
+
+  return StoryFn();
+};
diff --git a/addons/outline/tsconfig.json b/addons/outline/tsconfig.json
new file mode 100644
index 000000000000..d1ee4fc75941
--- /dev/null
+++ b/addons/outline/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
+}
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index cc81750d1124..6b01c4fe4f0f 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
     "storybook",
     "test"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
@@ -67,11 +67,11 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/angular": "6.4.0-alpha.9",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/vue": "6.4.0-alpha.9",
-    "@storybook/vue3": "6.4.0-alpha.9",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/angular": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/vue": "6.4.0-alpha.17",
+    "@storybook/vue3": "6.4.0-alpha.17",
     "babel-loader": "^8.2.2",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
@@ -149,7 +149,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "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 7689f59f39f0..10741d53fc99 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-puppeteer",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -42,7 +42,7 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@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-alpha.9",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
     "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde"
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73"
 }
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 37ef907fad04..83b835121ebe 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
     "storybook",
     "code"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storysource",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storysource",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,13 +41,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/router": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/router": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
@@ -75,7 +75,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Storysource",
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
index 209321a416fc..1cf300fb6254 100644
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -45,11 +45,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
@@ -68,7 +68,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Toolbars",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 78d6c38086fa..6e69b44634cf 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -8,7 +8,7 @@
     "style",
     "essentials"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/viewport",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/viewport",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -42,12 +42,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -69,7 +69,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/preview.js",
   "storybook": {
     "displayName": "Viewport",
diff --git a/app/angular/package.json b/app/angular/package.json
index 6c9c90c27f8a..20483664ac62 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/angular",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/angular",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/angular",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,12 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "autoprefixer": "^9.8.6",
     "core-js": "^3.8.2",
@@ -65,6 +65,7 @@
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
+    "telejson": "^5.3.2",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
@@ -128,5 +129,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde"
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73"
 }
diff --git a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
index 8260f8856244..8dbaaf5b1c41 100644
--- a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
+++ b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
@@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { BehaviorSubject, Subject } from 'rxjs';
+import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { Parameters } from '../types-6-0';
 import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
@@ -160,7 +161,7 @@ export abstract class AbstractRenderer {
 
     const currentStoryRender = {
       storyFnAngular,
-      moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
+      moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
     this.previousStoryRenderInfo = currentStoryRender;
diff --git a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
index f3f3233b73cd..754cc894fc70 100644
--- a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
@@ -1,4 +1,4 @@
-import { Component, getPlatform } from '@angular/core';
+import { Component, getPlatform, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { Parameters } from '../types-6-0';
@@ -26,6 +26,10 @@ describe('RendererFactory', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+
+    // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+    // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+    ɵresetJitOptions();
   });
 
   describe('CanvasRenderer', () => {
@@ -65,7 +69,9 @@ describe('RendererFactory', () => {
         targetDOMNode: rootTargetDOMNode,
       });
 
-      expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<foo>🦊</foo>');
+      expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe(
+        '<foo>🦊</foo><!--container-->'
+      );
     });
 
     describe('when forced=true', () => {
diff --git a/app/angular/src/client/preview/angular-beta/RendererService.test.ts b/app/angular/src/client/preview/angular-beta/RendererService.test.ts
index 802ac6039382..d404a287ab23 100644
--- a/app/angular/src/client/preview/angular-beta/RendererService.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.test.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { Parameters } from '../types-6-0';
@@ -18,6 +18,10 @@ describe('RendererService', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+
+    // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+    // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+    ɵresetJitOptions();
   });
 
   it('should initialize', () => {
@@ -53,10 +57,33 @@ describe('RendererService', () => {
       });
 
       expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
-        '<foo>🦊</foo>'
+        '<foo>🦊</foo><!--container-->'
       );
     });
 
+    it('should handle circular reference in moduleMetadata', async () => {
+      class Thing {
+        token: Thing;
+
+        constructor() {
+          this.token = this;
+        }
+      }
+      const token = new Thing();
+
+      await rendererService.render({
+        storyFnAngular: {
+          template: '🦊',
+          props: {},
+          moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
+        },
+        forced: false,
+        parameters: {} as any,
+      });
+
+      expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🦊');
+    });
+
     describe('when forced=true', () => {
       beforeEach(async () => {
         // Init first render
diff --git a/app/angular/src/client/preview/angular-beta/RendererService.ts b/app/angular/src/client/preview/angular-beta/RendererService.ts
index 58144ac66a26..9909cf0f24ae 100644
--- a/app/angular/src/client/preview/angular-beta/RendererService.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.ts
@@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { BehaviorSubject, Subject } from 'rxjs';
+import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { Parameters } from '../types-6-0';
 import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
@@ -154,7 +155,7 @@ export class RendererService {
 
     this.currentStoryRender = {
       storyFnAngular,
-      moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
+      moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
     if (
diff --git a/app/angular/src/server/build.ts b/app/angular/src/server/build.ts
index d8abf06a4396..fe1ed4fb11e3 100644
--- a/app/angular/src/server/build.ts
+++ b/app/angular/src/server/build.ts
@@ -1,4 +1,13 @@
 import { buildStatic } from '@storybook/core/server';
+import { logger } from '@storybook/node-logger';
 import options from './options';
 
-buildStatic(options);
+async function build() {
+  try {
+    await buildStatic(options);
+  } catch (error) {
+    logger.error(error);
+  }
+}
+
+build();
diff --git a/app/ember/package.json b/app/ember/package.json
index 59135776c25c..93406a5f039a 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@storybook/ember",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@ember/test-helpers": "^2.1.4",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -65,6 +65,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/html/package.json b/app/html/package.json
index 3c84b8b0e2e5..c84ac7bb7261 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/html",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/html",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/html",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,10 +45,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -68,6 +68,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/preact/package.json b/app/preact/package.json
index 0e531be6f016..aa4e2569522a 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/preact",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/preact",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/preact",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,6 +72,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/react/package.json b/app/react/package.json
index 44ce65b3d888..3ab2e3c7a92a 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/react",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/react",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/react",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -49,10 +49,10 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
     "@storybook/semver": "^7.3.2",
     "@types/webpack-env": "^1.16.0",
@@ -71,7 +71,7 @@
     "webpack": "4"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-alpha.9",
+    "@storybook/client-api": "6.4.0-alpha.17",
     "@types/node": "^14.14.20",
     "@types/prompts": "^2.0.9"
   },
@@ -94,6 +94,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/react/src/client/preview/index.tsx b/app/react/src/client/preview/index.tsx
index 64d40bd005b8..cc9b300fc51a 100644
--- a/app/react/src/client/preview/index.tsx
+++ b/app/react/src/client/preview/index.tsx
@@ -10,11 +10,6 @@ import { Story } from './types-6-3';
 
 const framework = 'react';
 
-const globalRender: Story = (args, { parameters }) => {
-  const Component = parameters.component;
-  return <Component {...args} />;
-};
-
 interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
   setAddon(addon: any): void;
   configure(loader: Loadable, module: NodeModule): void;
@@ -24,6 +19,11 @@ interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
   raw: () => any; // todo add type
 }
 
+const globalRender: Story = (args, { parameters }) => {
+  const Component = parameters.component;
+  return <Component {...args} />;
+};
+
 const api = start(render);
 api.clientApi.globalRender = globalRender;
 
diff --git a/app/server/package.json b/app/server/package.json
index b5e0e01a5f00..d2788a49b044 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/server",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/server",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/server",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,12 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,6 +72,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 0e54f2598cfe..713989b190e7 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/svelte",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/svelte",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/svelte",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,9 +45,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -73,6 +73,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue/package.json b/app/vue/package.json
index 35497bb286c5..86ae37b69fe7 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/vue",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/vue",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/vue",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,9 +45,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,6 +81,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue3/package.json b/app/vue3/package.json
index e8eccb38842b..6386ab1f6f05 100644
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/vue3",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/vue3",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/vue3",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,9 +45,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -79,6 +79,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/web-components/package.json b/app/web-components/package.json
index be050bf3057c..79add56423f4 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/web-components",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
     "storybook",
     "web-components"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/web-components",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/web-components",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -50,10 +50,10 @@
     "@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-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
     "@types/webpack-env": "^1.16.0",
     "babel-plugin-bundled-import-meta": "^0.3.1",
     "core-js": "^3.8.2",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/docs/addons/configure-addons.md b/docs/addons/configure-addons.md
index 3a84cd600ff2..fcf6dd3263be 100644
--- a/docs/addons/configure-addons.md
+++ b/docs/addons/configure-addons.md
@@ -35,4 +35,4 @@ For example, the [Actions addon](https://storybook.js.org/addons/@storybook/addo
 
 Use the [`useChannel`](./addons-api#usechannel) hook to access the channel data within your addon.
 
-For a complete example, check out [storybookjs/addon-kit/withRoundTrip.js](https://github.com/storybookjs/addon-kit/blob/main/src/withRoundTrip.js)
+For a complete example, check out [storybookjs/addon-kit/withRoundTrip.ts](https://github.com/storybookjs/addon-kit/blob/main/src/withRoundTrip.ts)
diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
index 7a8bb72b70e4..c77ff7a926a7 100644
--- a/docs/addons/writing-presets.md
+++ b/docs/addons/writing-presets.md
@@ -66,6 +66,20 @@ For example, here is how Storybook automatically adopts `create-react-app`'s con
 - `webpackFinal` is applied to the preview config after all user presets have been applied
 - `managerWebpack` is applied to the manager config
 
+As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` builder. If your addon needs to know which version of Webpack it's running inside, the version and the actual webpack instance itself are both available inside your preset:
+
+```js
+// .storybook/main.js
+
+export function webpackFinal(config, { presets }) {
+  const version = await presets.apply('webpackVersion');
+  const instance = (await presets.apply('webpackInstance'))?.default;
+
+  logger.info(`=> Running in webpack ${version}: ${instance}`);
+  return config;
+}
+```
+
 ### Manager entries
 
 The addon config `managerEntries` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to install the preset, and it will take care of everything.
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 5b6a3b45c439..003e7013c824 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -34,7 +34,7 @@ Usage: start-storybook [options]
 | --no-manager-cache                 | Disables Storybook's manager caching mechanism. See note below.                                                                                | `start-storybook --no-manager-cache`                      |
 
 <div class="aside">
-💡 <strong>NOTE</strong>: The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can serverely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
+💡 <strong>NOTE</strong>: The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
 </div>
 
 ## build-storybook
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index 15ee2eeb47d3..076b170cc0d2 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -98,20 +98,6 @@ Finally, we'll need to import the theme into Storybook. Create a new file called
 
 <!-- prettier-ignore-end -->
 
-
-Adjust your `storybook` script in your package.json and include the [`--no-manager-cache`](../api/cli-options.md#start-storybook) flag. For instance:
-
-```json
-{
-  "scripts":{
-    "storybook": "start-storybook -p 6006 --no-manager-cache",
-  },
-}
-```
-<div class="aside">
-💡 <strong>Note:</strong> Once you've finished configuring your theme, you can remove the <code>--no-manager-cache</code>flag from the <code>storybook</code> script at will. Leaving it in can severely impact loading times.
-</div>
-
 Now your custom theme will replace Storybook's default theme, and you'll see a similar set of changes in the UI.
 
 ![Storybook starter theme](./storybook-starter-custom-theme.png)
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index f21c6238c81b..fd73f64cf261 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -101,7 +101,7 @@ yarn test
 ```
 
 <div class="aside">
-💡  Storybook uses <a href="https://jestjs.io/"><code>jest</code></a> as part of the testing suite, if you notice that the snapshot tests fail you can re-run and update them with <code>yarn test --update</code>.
+💡  Storybook uses <a href="https://jestjs.io/"><code>jest</code></a> as part of the testing suite, if you notice that the snapshot tests fail you can re-run and update them with <code>yarn test -u</code>.
 </div>
 
 Doing this prevents last-minute bugs and is also a great way to get your contribution merged faster once you submit your pull request. Failing to do so will lead to one of the maintainers mark the pull request with the **Work in Progress** label until all tests pass.
diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
index bf2f23322192..ab1b01981cfd 100644
--- a/docs/essentials/auto-generated-controls/react.mdx
+++ b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,6 +1,8 @@
 To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
 
 ```ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+
 import { Button } from './Button';
 
 export default {
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index 8a466018730a..96356b3b135d 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -29,6 +29,8 @@ npm install --save-dev @storybook/addon-essentials
 Update your Storybook configuration (in `.storybook/main.js`) to include the essentials addon.
 
 ```js
+// .storybook/main.js
+
 module.exports = {
   addons: ['@storybook/addon-essentials'],
 };
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 04cb76024e21..901a23a758ad 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -6,9 +6,9 @@ Storybook ships with toolbar items to control the [viewport](./viewport.md) and
 
 ## Globals
 
-Globals in Storybook represent “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators which apply to all stories.
+Globals in Storybook represent “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories.
 
-When the globals change, the story re-renders and the decorators rerun with the new values. The easiest way to change globals is to create a toolbar item for them.
+When the globals change, the story re-renders, and the decorators rerun with the new values. The easiest way to change globals is to create a toolbar item for them.
 
 ## Global types and the toolbar annotation
 
@@ -34,7 +34,7 @@ When you start your Storybook, you should see a new dropdown in your toolbar wit
 
 ## Create a decorator
 
-We have a `global` defined, let's wire it up! We can consume our new `theme` global in a decorator using the `context.globals.theme` value.
+We have a `global` implemented. Let's wire it up! We can consume our new `theme` global in a decorator using the `context.globals.theme` value.
 
 For example, suppose you are using `styled-components`. You can add a theme provider decorator to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) config:
 
@@ -76,7 +76,7 @@ The <code>icon</code> element used in the examples loads the icons from the <cod
   The <code>@storybook/addon-toolbars</code> addon is required to use toolbars. The toolbars addon is included by default in <code>@storybook/addon-essentials</code>.
 </div>
 
-By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu, once you connect it to a decorator.
+By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator.
 
 Here's a list of the configuration options available.
 
@@ -84,15 +84,15 @@ Here's a list of the configuration options available.
 | --------- | :----: | :-------------------------------------------------------------: | :------: |
 | **value** | String |    The string value of the menu that gets set in the globals    |   Yes    |
 | **title** | String |                   The main text of the title                    |   Yes    |
-| **left**  | String |        A string that gets shown in left side of the menu        |    No    |
-| **right** | String |       A string that gets shown in right side of the menu        |    No    |
+| **left**  | String |      A string that gets shown on the left side of the menu      |    No    |
+| **right** | String |   A string that gets displayed on the right side of the menu    |    No    |
 | **icon**  | String | An icon that gets shown in the toolbar if this item is selected |    No    |
 
 ## Consuming globals from within a story
 
 We recommend consuming globals from within a decorator and define a global setting for all stories.
 
-But we're aware that sometimes it's more useful to use toolbar options in a per-story basis.
+But we're aware that sometimes it's more beneficial to use toolbar options on a per-story basis.
 
 Using the example above, you can modify any story to retrieve the **Locale** `global` from the story context:
 
@@ -100,8 +100,15 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
 
 <CodeSnippets
   paths={[
-    'common/my-component-story-use-globaltype.js.mdx',
-    'common/my-component-story-use-globaltype.mdx.mdx',
+    'react/my-component-story-use-globaltype.js.mdx',
+    'react/my-component-story-use-globaltype.mdx.mdx',
+    'vue/my-component-story-use-globaltype.js.mdx',
+    'vue/my-component-story-use-globaltype.mdx.mdx',
+    'angular/my-component-story-use-globaltype.ts.mdx',
+    'angular/my-component-story-use-globaltype.mdx.mdx',
+    'svelte/my-component-story-use-globaltype.js.mdx',
+    'svelte/my-component-story-use-globaltype.mdx.mdx',
+    'web-components/my-component-story-use-globaltype.js.mdx',
   ]}
 />
 
@@ -115,7 +122,11 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
 
 <CodeSnippets
   paths={[
-    'common/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'react/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'vue/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'angular/my-component-story-use-globaltype-backwards-compat.ts.mdx',
+    'svelte/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'web-components/my-component-story-use-globaltype-backwards-compat.js.mdx',
   ]}
 />
 
@@ -125,7 +136,7 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
 
 ## Consuming globals from within an addon
 
-If you're working on a Storybook addon and you need to retrieve globals. You can do so, the `@storybook/api` package provides a hook for this scenario, you can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
+If you're working on a Storybook addon and you need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
 
 Using the ThemeProvider example above, you could expand it to display which current theme is being shown inside a panel like so:
 
@@ -141,7 +152,7 @@ Using the ThemeProvider example above, you could expand it to display which curr
 
 ## Updating globals from within an addon
 
-If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you want. 
+If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you want.
 
 Also, you can use the `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh.
 
@@ -155,4 +166,4 @@ For example, if you were working on a [toolbar addon](../addons/addon-types.md#t
   ]}
 />
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->
\ No newline at end of file
diff --git a/docs/frameworks.js b/docs/frameworks.js
index 9f07c78632bb..1a12aeb18d17 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -111,7 +111,7 @@ module.exports = {
         },
         {
           name: 'Dynamic source',
-          supported: ['react', 'vue', 'angular', 'svelte'],
+          supported: ['react', 'vue', 'angular', 'svelte', 'web-components'],
           path: 'writing-docs/doc-blocks#source',
         },
         {
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index cc74c44f4f3f..5e58f7bc799c 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -29,6 +29,7 @@ title: 'Install Storybook'
 
 Storybook needs to be installed into a project that is already setup with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework including:
 
+- 📦 [Create an Angular Workspace](https://angular.io/cli/new)
 - 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
 - 📦 [Vue CLI](https://cli.vuejs.org/)
 - 📦 [Ember CLI](https://guides.emberjs.com/release/getting-started/quick-start/)
diff --git a/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx b/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx
new file mode 100644
index 000000000000..a4ff6cb2d888
--- /dev/null
+++ b/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx
@@ -0,0 +1,39 @@
+```ts
+// mock-graphql.module.ts
+
+import { NgModule } from '@angular/core';
+import { APOLLO_OPTIONS } from 'apollo-angular';
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+import { HttpLink } from 'apollo-angular/http';
+
+// See here for docs https://apollo-angular.com/docs/get-started
+
+const uri = 'https://your-graphql-endpoint';
+export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
+  return {
+    link: httpLink.create({ uri }),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  };
+}
+
+@NgModule({
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [HttpLink],
+    },
+  ],
+})
+export class MockGraphQLModule {}
+```
diff --git a/docs/snippets/angular/document-screen-fetch.ts.mdx b/docs/snippets/angular/document-screen-fetch.ts.mdx
new file mode 100644
index 000000000000..ccaddf887db9
--- /dev/null
+++ b/docs/snippets/angular/document-screen-fetch.ts.mdx
@@ -0,0 +1,48 @@
+```ts
+// YourPage.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'document-screen',
+  template: `
+    <div>
+      <div *ngIf="error"><p>There was an error fetching the data!</p></div>
+      <div *ngIf="loading"><p>Loading...</p></div>
+      <div *ngIf="!loading && subdocuments.length > 0">
+        <page-layout [user]="user">
+          <document-header [document]="document"></document-header>
+          <document-list [documents]="subdocuments"></document-list>
+        </page-layout>
+      </div>
+    </div>
+  `,
+})
+export default class DocumentScreen implements OnInit {
+  user: any = { id: 0, name: 'Some User' };
+
+  document: any = { id: 0, title: 'Some Title' };
+
+  subdocuments: any = [];
+
+  error = false;
+  loading = true;
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.http.get<any>('https://your-restful-endpoint').subscribe({
+      next: (data) => {
+        this.loading = false;
+        this.user = data.user;
+        this.document = data.document;
+        this.documents.data.subdocuments;
+      },
+      error: (error) => {
+        this.error = true;
+      },
+    });
+  }
+}
+```
diff --git a/docs/snippets/angular/document-screen-with-graphql.ts.mdx b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
new file mode 100644
index 000000000000..be521f486212
--- /dev/null
+++ b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
@@ -0,0 +1,69 @@
+```ts
+// YourPage.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { Apollo } from 'apollo-angular';
+import gql from 'graphql-tag';
+
+@Component({
+  selector: 'document-screen',
+  template: `
+    <div *ngIf="loading">Loading...</div>
+    <div *ngIf="error">There was an error fetching the data!</div>
+    <div *ngIf="!loading && subdocuments.length > 0">
+      <page-layout [user]="user">
+        <document-header [document]="document"></document-header>
+        <document-list [documents]="subdocuments"></document-list>
+      </page-layout>
+    </div>
+  `,
+})
+export class SampleGraphqlComponent implements OnInit {
+  user: any = { id: 0, name: 'Some User' };
+
+  document: any = { id: 0, title: 'Some Title' };
+
+  subdocuments: any = [];
+
+  error = '';
+  loading = true;
+
+  constructor(private apollo: Apollo) {}
+  ngOnInit() {
+    this.apollo
+      .watchQuery({
+        query: gql`
+          query AllInfoQuery {
+            user {
+              userID
+              name
+            }
+            document {
+              id
+              userID
+              title
+              brief
+              status
+            }
+            subdocuments {
+              id
+              userID
+              title
+              content
+              status
+            }
+          }
+        `,
+      })
+      .valueChanges.subscribe((result: any) => {
+        this.user = result?.data?.user;
+        this.document = result?.data?.document;
+        this.subdocuments = result?.data?.subdocuments;
+        this.loading = result.loading;
+
+        // Errors is an array and we're getting the first item only
+        this.error = result.errors[0].message;
+      });
+  }
+}
+```
diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
new file mode 100644
index 000000000000..16849250c632
--- /dev/null
+++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
@@ -0,0 +1,106 @@
+```ts
+// YourPage.stories.ts
+
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './YourPage.component';
+import DocumentList from './DocumentList.component';
+import DocumentHeader from './DocumentHeader.component';
+import PageLayout from './PageLayout.component';
+
+import { MockGraphQLModule } from './mock-graphql.module';
+
+export default {
+  component: DocumentScreen,
+  decorators: [
+    moduleMetadata({
+      declarations: [DocumentList, DocumentHeader, PageLayout],
+      imports: [CommonModule, HttpClientModule, MockGraphQLModule],
+    }),
+  ],
+  title: 'Mock GraphQL query with Storybook and MSW',
+} as Meta;
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate: Story<DocumentScreen> = (args) => ({
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
new file mode 100644
index 000000000000..5ae41166c1b6
--- /dev/null
+++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
@@ -0,0 +1,97 @@
+```ts
+// YourPage.stories.ts
+
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
+
+import { rest } from 'msw';
+
+import DocumentScreen from './YourPage.component';
+import DocumentList from './DocumentList.component';
+import DocumentHeader from './DocumentHeader.component';
+import PageLayout from './PageLayout.component';
+
+export default {
+  component: DocumentScreen,
+  decorators: [
+    moduleMetadata({
+      declarations: [DocumentList, DocumentHeader, PageLayout],
+      imports: [CommonModule, HttpClientModule],
+    }),
+  ],
+  title: 'Mock Rest request with Storybook and MSW',
+} as Meta;
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate: Story<DocumentScreen> = (args) => ({
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/angular/loader-story.mdx.mdx b/docs/snippets/angular/loader-story.mdx.mdx
new file mode 100644
index 000000000000..e1f84461b134
--- /dev/null
+++ b/docs/snippets/angular/loader-story.mdx.mdx
@@ -0,0 +1,28 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+import TodoItem from './TodoItem';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    props: {
+      todo: todo,
+    },
+  })}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/loader-story.ts.mdx b/docs/snippets/angular/loader-story.ts.mdx
new file mode 100644
index 000000000000..837cd804a9a5
--- /dev/null
+++ b/docs/snippets/angular/loader-story.ts.mdx
@@ -0,0 +1,37 @@
+```ts
+// TodoItem.stories.ts
+
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
+
+import fetch from 'node-fetch';
+
+import { CommonModule } from '@angular/common';
+
+import TodoItem from './TodoItem';
+
+export default {
+  component: TodoItem,
+  decorators: [
+    moduleMetadata({
+      declarations: [TodoItem],
+      imports: [CommonModule],
+    }),
+  ],
+  title: 'Examples/Loader',
+} as Meta;
+
+export const Primary = (args, { loaded: { todo } }) => {
+  return {
+    props: {
+      args,
+      todo,
+    },
+  };
+};
+
+Primary.loaders = [
+  async () => ({
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+  }),
+];
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
new file mode 100644
index 000000000000..d2fe8932164c
--- /dev/null
+++ b/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
@@ -0,0 +1,10 @@
+```ts
+// MyComponent.stories.ts
+
+export const StoryWithLocale = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    template: `<p>${caption}</p>`,
+  };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
new file mode 100644
index 000000000000..eb1fd520ddc1
--- /dev/null
+++ b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
@@ -0,0 +1,23 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+export const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'es': return 'Hola!';
+    case 'fr': return 'Bonjour!';
+    case 'kr': return '안녕하세요!';
+    case 'zh': return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      template: `<p>${caption}</p>`,
+    };
+  }}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
new file mode 100644
index 000000000000..505764d13be0
--- /dev/null
+++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// MyComponent.stories.ts
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    template: `<p>${caption}</p>`,
+  };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 4dd612f905e0..7ffb54787e47 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Badge.stories.js | Badge.stories.ts
+// Badge.stories.js | Badge.stories.jsx  | Badge.stories.ts | Badge.stories.tsx
 
 export default {
   component: Badge,
diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
index 1522fe77d830..27c2aa1d48f6 100644
--- a/docs/snippets/common/button-group-story-subcomponents.js.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ButtonGroup.stories.js
+// ButtonGroup.stories.js | ButtonGroup.stories.jsx
 
 import { Button, ButtonGroup } from '../ButtonGroup';
 
diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
index 53da77dce0a9..d5657305d92a 100644
--- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// ButtonGroup.stories.ts
+// ButtonGroup.stories.ts | ButtonGroup.stories.tsx
 
 import { Meta } from '@storybook/react/types-6-0';
 
diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
index f40b1655e1cb..653e01aef496 100644
--- a/docs/snippets/common/button-story-action-event-handle.js.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
index 716aec51d730..cf247036634e 100644
--- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
index 9bba6a872970..62e7cf67ebb9 100644
--- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
index 8a5d6615f6f3..f36addd2d26d 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = Template.bind({});
 Primary.args = {
diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx
index fa59e415b90a..1806575b7996 100644
--- a/docs/snippets/common/button-story-controls-radio-group.js.mdx
+++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index deb7867e2ef1..ec2b02425fd7 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Button'
-}
+  title: 'Button',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index e413e812141c..84656a63b51e 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js |  Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index 08d0f98ad4f0..9acd2461f7ba 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index 10357521bce4..c4130f7d16f2 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
@@ -10,7 +10,7 @@ export default {
   parameters: {
     docs: {
       source: {
-        type: 'code'
+        type: 'code',
       }
     }
   }
diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
index cc24230dd019..1cfd5c698d85 100644
--- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
index a75971cf2d92..e81d979d98cf 100644
--- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -1,6 +1,5 @@
 ```js
-
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index e08768ce609c..94c157e22f0d 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Button'
-}
+  title: 'Design System/Atoms/Button',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index dbabf7734b1e..bee9dd999ac9 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 1facba381002..f47bd55e388b 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button as ButtonComponent } from './Button';
 
diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx
index c3e034294ec3..d2b13c760c9a 100644
--- a/docs/snippets/common/button-story-matching-argtypes.js.mdx
+++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
index b43af8fd9dca..4b6fd2c0735e 100644
--- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
+++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx
index 63332e4c58ea..17aaf25b50f3 100644
--- a/docs/snippets/common/button-story-primary-composition.js.mdx
+++ b/docs/snippets/common/button-story-primary-composition.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 const Primary = ButtonStory.bind({});
 Primary.args = {
diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx
index 8c6473ff8512..265e78970bf2 100644
--- a/docs/snippets/common/button-story-primary-long-name.js.mdx
+++ b/docs/snippets/common/button-story-primary-long-name.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const PrimaryLongName = Template.bind({});
 
diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
index f081164723dd..3543dff88f8e 100644
--- a/docs/snippets/common/button-story-remix-docspage.js.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
index ed56362b453e..0fc74186b286 100644
--- a/docs/snippets/common/button-story-remix-docspage.ts.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index 6d825b6920da..0664a5d6e430 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Primary = Template.bind({});
 Primary.args ={
diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
index bd693ded4c3f..4a114f056add 100644
--- a/docs/snippets/common/checkbox-story-csf.js.mdx
+++ b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.jsx 
 
 import { Checkbox } from './Checkbox';
 
 export default { 
-    title: 'MDX/Checkbox', 
-    component: Checkbox
+  title: 'MDX/Checkbox',
+  component: Checkbox,
 };
 
 const Template = (args) => <Checkbox {...args} />
diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
index 9d9a5febc842..86c94be35218 100644
--- a/docs/snippets/common/checkbox-story-grouped.js.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -1,7 +1,7 @@
 ```js
-// Checkbox.stories.js | Checkbox.stories.ts
+// Checkbox.stories.js | Checkbox.stories.jsx | Checkbox.stories.ts | Checkbox.stories.tsx
 
 export default {
-  title: 'Design System/Atoms/Checkbox'
-}
+  title: 'Design System/Atoms/Checkbox',
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
index 5ec147578992..cb343482cbec 100644
--- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
+++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
index a4072d78927c..846e38ef6da0 100644
--- a/docs/snippets/common/component-story-csf-description.js.mdx
+++ b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'CustomDescription',
diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
index e10a61d9eb7c..c80bbf2f0862 100644
--- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx
+++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import { Button } from './button';
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index 353c4e972595..44ea73c129a2 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const CustomSource = () => Template.bind({});
 
diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
index 7778a6fab407..9d208e4b5447 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
index a9f303658197..f2c55298d61e 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 ArrayInclude = Template.bind({})
 ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };
diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
index 818ea786e7bf..02494573a959 100644
--- a/docs/snippets/common/component-story-disable-controls.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx
index 47d464d21335..7a0d96736792 100644
--- a/docs/snippets/common/component-story-dynamic-title.js.mdx
+++ b/docs/snippets/common/component-story-dynamic-title.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import base from 'paths.macro';
 
diff --git a/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
similarity index 100%
rename from docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx
rename to docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
diff --git a/docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx
new file mode 100644
index 000000000000..8808665b07a1
--- /dev/null
+++ b/docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx
@@ -0,0 +1,15 @@
+```md
+<!--- MyComponent.stories.mdx -->
+
+import { ArgsTable } from '@storybook/addon-docs';
+import { MyComponent } from './MyComponent';
+
+# My Component!
+
+<Story name="My Story">
+  <!-- my story for MyComponent -->
+  {(args) => <MyComponent {...args} />}
+</Story>
+
+<ArgsTable story="My Story" />
+```
diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx
index 6a816951b85a..65f4ee7f9ae6 100644
--- a/docs/snippets/common/component-story-sort-controls.js.mdx
+++ b/docs/snippets/common/component-story-sort-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js | YourComponent.stories.ts
+// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
 import { YourComponent } from './your-component'
 
diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
index af66d57a8e2b..402274308b79 100644
--- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
+++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export const CustomDocumentationComponent: React.FC<{}> = () => {
+export const CustomDocumentationComponent: React.VFC<{}> = () => {
   return (
     <div>
       <h1>Replacing DocsPage with a custom component</h1>
diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
index 3e87aad910f8..5815debcec68 100644
--- a/docs/snippets/common/foo-bar-baz-story.js.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'Foo/Bar',
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index 1b090b4d1403..36501155756d 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Gizmo.stories.js | Gizmo.stories.ts
+// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx
 
 export default {
   title: 'Gizmo',
diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
index 9265c9d195ce..56b0e6431166 100644
--- a/docs/snippets/common/my-component-story-import-json.js.mdx
+++ b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
index 816ad32dc8b1..8aa950ac4c07 100644
--- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx
+++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 // This will include './static/image.png' in the bundle. 
 // And return a path to be included in a src attribute
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index 4ec694947a11..3aa3727adb73 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.story.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 import MyComponent from './MyComponent';
 
diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx
index 1b02fba82219..612c7e0478a2 100644
--- a/docs/snippets/common/my-component-story-with-storyname.js.mdx
+++ b/docs/snippets/common/my-component-story-with-storyname.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 export const Simple = () => <MyComponent />;
 
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index 7bef33659bc4..0adef68983c9 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index 65ba2e3bac9c..482d8a60e39b 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js | FooBar.stories.ts
+// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
 export default {
   title: 'OtherFoo/Bar',
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
index 7db76a4ecf58..77d4cd2084a8 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a set of backgrounds to all stories of Button:
 export default {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
index 12af04ed3de0..6f321c920850 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 // To apply a grid to all stories of Button:
 export default {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
index 114e733b8d5a..6ff2e2b676a1 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
index 32191fc1cd16..2946c92062b9 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
   backgrounds: {
     grid: {
-      disable: true
+      disable: true,
     }
   }
 };
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
index 7b3832caa637..c11b02c7a26e 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx |  Button.stories.ts | Button.stories.tsx
 
 export const Large = Template.bind({});
 Large.parameters = {
diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx
index d1f4ba54cede..36098b96b765 100644
--- a/docs/snippets/common/storybook-component-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-component-layout-param.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import Button from './Button';
 
diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx
index 38972b03a1b6..7a45d3876c17 100644
--- a/docs/snippets/common/storybook-customize-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export default {
   title: 'Button',
diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
index 42e775d4df3a..fb0cd405ac72 100644
--- a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
@@ -11,8 +11,8 @@ export const globalTypes = {
       // Array of plain string values or MenuItem shape (see below)
       items: ['light', 'dark'],
       // Property that specifies if the name of the item will be displayed
-      showName: True,
+      showName: true,
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/storybook-preview-global-loader.js.mdx b/docs/snippets/common/storybook-preview-global-loader.js.mdx
similarity index 54%
rename from docs/snippets/svelte/storybook-preview-global-loader.js.mdx
rename to docs/snippets/common/storybook-preview-global-loader.js.mdx
index 8c10b6a19050..2b7d8f057d48 100644
--- a/docs/snippets/svelte/storybook-preview-global-loader.js.mdx
+++ b/docs/snippets/common/storybook-preview-global-loader.js.mdx
@@ -5,7 +5,7 @@ import fetch from 'node-fetch';
 
 export const loaders = [
   async () => ({
-    currentUser: (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
+    currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
   }),
 ];
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx
index d39352bab539..66669c9585ec 100644
--- a/docs/snippets/common/storybook-story-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-story-layout-param.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const WithLayout = Template.bind({});
 WithLayout.parameters = {
diff --git a/docs/snippets/preact/button-test.js.mdx b/docs/snippets/preact/button-test.js.mdx
new file mode 100644
index 000000000000..2c1889942549
--- /dev/null
+++ b/docs/snippets/preact/button-test.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Button.test.js
+
+import { h } from 'preact';
+
+import { render, screen } from '@testing-library/preact';
+
+import '@testing-library/jest-dom/extend-expect';
+
+//👇 Imports a specific story for the test
+import { Primary } from './Button.stories';
+
+it('renders the button in the primary state', () => {
+  render(<Primary {...Primary.args} />);
+  expect(screen.getByRole('button')).toHaveTextContent('Primary');
+});
+```
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index d39a3953d2c6..db4426bd71b5 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// App.stories.js
+// App.stories.js | App.stories.jsx | App.stories.ts | App.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-component-with-proptypes.js.mdx b/docs/snippets/react/button-component-with-proptypes.js.mdx
index a89b0a8fe460..c0ed93eee7ac 100644
--- a/docs/snippets/react/button-component-with-proptypes.js.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.js
+// Button.js | Button.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-component-with-proptypes.ts.mdx b/docs/snippets/react/button-component-with-proptypes.ts.mdx
index 8d36c40cb46f..9086f82d0201 100644
--- a/docs/snippets/react/button-component-with-proptypes.ts.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.tsx
+// Button.ts | Button.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx
index 68509b2b1728..7b033e48af4c 100644
--- a/docs/snippets/react/button-group-story.js.mdx
+++ b/docs/snippets/react/button-group-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ButtonGroup.stories.js
+// ButtonGroup.stories.js | ButtonGroup.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx
index cfb2f5281292..b6bcf985a34f 100644
--- a/docs/snippets/react/button-group-story.ts.mdx
+++ b/docs/snippets/react/button-group-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// ButtonGroup.stories.tsx
+// ButtonGroup.stories.ts | ButtonGroup.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx
index 45135e517751..b45bca83ecde 100644
--- a/docs/snippets/react/button-implementation.js.mdx
+++ b/docs/snippets/react/button-implementation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.js
+// Button.js | Button.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx
index 34ff8b42a2b0..8d406fcfb038 100644
--- a/docs/snippets/react/button-implementation.ts.mdx
+++ b/docs/snippets/react/button-implementation.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.ts
+// Button.ts | Button.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx
index e9ceab29ccca..e35cfba2a78e 100644
--- a/docs/snippets/react/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
 Text.args = {
diff --git a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
index c44f8ca4c626..9bb099c23554 100644
--- a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
index 5ca379db5365..241e12218e45 100644
--- a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 export const Text = (args) => <Button {...args} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-click-handler.js.mdx b/docs/snippets/react/button-story-click-handler.js.mdx
index 2de071bc23e7..eb9af4c0edf2 100644
--- a/docs/snippets/react/button-story-click-handler.js.mdx
+++ b/docs/snippets/react/button-story-click-handler.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-component-args-primary.js.mdx b/docs/snippets/react/button-story-component-args-primary.js.mdx
index d14c5bc35d24..a2004a6c85e1 100644
--- a/docs/snippets/react/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-component-args-primary.ts.mdx b/docs/snippets/react/button-story-component-args-primary.ts.mdx
index 5cb7ff081a95..f692b8863d67 100644
--- a/docs/snippets/react/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-docs-code.js.mdx b/docs/snippets/react/button-story-default-docs-code.js.mdx
index 41e9c359098f..b40ec572ce07 100644
--- a/docs/snippets/react/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
index f40fc193b37f..0d2f0091f6f5 100644
--- a/docs/snippets/react/button-story-default-docs-code.ts.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx
index 10598a149da7..625f39a703f7 100644
--- a/docs/snippets/react/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
index 13155a6e2a6d..ab0873160ba5 100644
--- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx
index b8d720ad54c8..50b7c172cd50 100644
--- a/docs/snippets/react/button-story-rename-story.js.mdx
+++ b/docs/snippets/react/button-story-rename-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index d39e823fc72e..0dd876a88651 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index 6df0223fcddd..91d890ff84da 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 //👇 We create a “template” of how args map to rendering
 const Template = (args) => <Button {...args} />;
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index 335312b8b6aa..cb603ac1300c 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 //👇 We create a “template” of how args map to rendering
 const Template: Story<ButtonProps> = (args) => <Button {...args} />;
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index d61d1052d581..0c500b151291 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx
index 3890ac8fa935..bd0773ff45ae 100644
--- a/docs/snippets/react/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-blue-args.ts.mdx b/docs/snippets/react/button-story-with-blue-args.ts.mdx
index 5290f1504896..ca4083f8f49e 100644
--- a/docs/snippets/react/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx
index 4a88562eeb83..e7321676637d 100644
--- a/docs/snippets/react/button-story-with-emojis.js.mdx
+++ b/docs/snippets/react/button-story-with-emojis.js.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 export const Primary = () => <Button background="#ff0" label="Button" />;
 export const Secondary = () => <Button background="#ff0" label="😄👍😍💯" />;
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 57b31c266dba..65f8cb9a7c57 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 export const Primary: React.VFC<{}> = () => <Button background="#ff0" label="Button" />;
 export const Secondary: React.VFC<{}> = () => <Button background="#ff0" label="😄👍😍💯" />;
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index 8f03e7494e3b..552ef1ce2a58 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index 13e257866407..71c2a7bfe06e 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.tsx
+// Button.stories.ts | Button.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx
index 61669ccff261..512965eab21d 100644
--- a/docs/snippets/react/button-story-with-sample.js.mdx
+++ b/docs/snippets/react/button-story-with-sample.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 22f05fff1656..0a4f6ea112a2 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx
 
 import React, { useState } from 'react';
 
diff --git a/docs/snippets/react/checkbox-story-csf.js.mdx b/docs/snippets/react/checkbox-story-csf.js.mdx
index 3f8920267f9a..b2c02b8831b9 100644
--- a/docs/snippets/react/checkbox-story-csf.js.mdx
+++ b/docs/snippets/react/checkbox-story-csf.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.jsx | // Checkbox.stories.ts | Checkbox.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 1dc4b8d96704..417dd18f0e04 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
index c9592fbd88fe..29ed6aa2e9a8 100644
--- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// YourComponent.stories.js
+// YourComponent.stories.ts | YourComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index 47793caa0486..b6a12b5e57d6 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
index fb71f8310c5c..5f98c47ee1f4 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
index 003706a895c9..712932573c55 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/component-story-with-query.js.mdx b/docs/snippets/react/component-story-with-query.js.mdx
deleted file mode 100644
index 32a7388de942..000000000000
--- a/docs/snippets/react/component-story-with-query.js.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```js
-// my-component-with-query.stories.js
-
-import MyComponentThatHasAQuery, { MyQuery } from '../component-that-has-a-query';
-
-const Template = (args) => <MyComponentThatHasAQuery {...args} />;
-
-export const LoggedOut = Template.bind({});
-LoggedOut.parameters = {
-  apolloClient: {
-    mocks: [
-      {
-        request: {
-          query: MyQuery,
-        },
-        result: {
-          data: {
-            viewer: null,
-          },
-        },
-      },
-    ],
-  },
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/react/component-styled-variables-object-notation.js.mdx b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
index fe6216ffea4a..ee08893b9fb2 100644
--- a/docs/snippets/react/component-styled-variables-object-notation.js.mdx
+++ b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.js
+// MyComponent.js | MyComponent.jsx
 
 const Component = styled.div(({ theme }) => ({
   background: theme.background.app,
diff --git a/docs/snippets/react/component-styled-variables-template-literals.js.mdx b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
index 6d302f91c880..f74138241ec1 100644
--- a/docs/snippets/react/component-styled-variables-template-literals.js.mdx
+++ b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.js
+// MyComponent.js | MyComponent.jsx
 
 const Component = styled.div`
   background: `${props => props.theme.background.app}`
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
new file mode 100644
index 000000000000..d42d8fdc76c7
--- /dev/null
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -0,0 +1,57 @@
+```js
+// YourPage.js | YourPage.jsx | YourPage.ts | YourPage.tsx
+
+import React, { useState, useEffect } from 'react';
+
+import PageLayout from './PageLayout';
+import DocumentHeader from './DocumentHeader';
+import DocumentList from './DocumentList';
+
+// Example hook to retrieve data from an external endpoint
+function useFetchData() {
+  const [status, setStatus] = useState('idle');
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    setStatus('loading');
+    fetch('https://your-restful-endpoint')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((data) => {
+        setStatus('sucess');
+        setData(data);
+      })
+      .catch(() => {
+        setStatus('error');
+      });
+  }, []);
+  return {
+    status,
+    data,
+  };
+}
+function DocumentScreen() {
+  const { status, data } = useFetchData();
+
+  const { user, document, subdocuments } = data;
+
+  if (status === 'loading') {
+    return <p>Loading...</p>;
+  }
+  if (status === 'error') {
+    return <p>There was an error fetching the data!</p>;
+  }
+  return (
+    <PageLayout user={user}>
+      <DocumentHeader document={document} />
+      <DocumentList documents={subdocuments} />
+    </PageLayout>
+  );
+}
+
+export default DocumentScreen;
+```
diff --git a/docs/snippets/react/document-screen-with-graphql.js.mdx b/docs/snippets/react/document-screen-with-graphql.js.mdx
new file mode 100644
index 000000000000..2fe252a02b29
--- /dev/null
+++ b/docs/snippets/react/document-screen-with-graphql.js.mdx
@@ -0,0 +1,56 @@
+```js
+// YourPage.js | YourPage.jsx | YourPage.ts | YourPage.tsx
+
+import React from 'react';
+
+import { useQuery, gql } from '@apollo/client';
+
+const AllInfoQuery = gql`
+  query AllInfo {
+    user {
+      userID
+      name
+    }
+    document {
+      id
+      userID
+      title
+      brief
+      status
+    }
+    subdocuments {
+      id
+      userID
+      title
+      content
+      status
+    }
+  }
+`;
+
+function useFetchInfo() {
+  const { loading, error, data } = useQuery(AllInfoQuery);
+
+  return { loading, error, data };
+}
+
+function DocumentScreen() {
+  const { loading, error, data } = useFetchInfo();
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>There was an error fetching the data!</p>;
+  }
+
+  return (
+    <PageLayout user={data.user}>
+      <DocumentHeader document={data.document} />
+      <DocumentList documents={data.subdocuments} />
+    </PageLayout>
+  );
+}
+export default DocumentScreen;
+```
diff --git a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
new file mode 100644
index 000000000000..7841013d01b2
--- /dev/null
+++ b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
@@ -0,0 +1,111 @@
+```js
+// YourPage.stories.js | YourPage.stories.jsx | YourPage.stories.ts | YourPage.stories.tsx
+
+import React from 'react';
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './DocumentScreen';
+
+export default {
+  component: DocumentScreen,
+  title: 'Mock GraphQL query with Storybook and MSW',
+};
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = () => (
+  <ApolloProvider client={mockedClient}>
+    <DocumentScreen />
+  </ApolloProvider>
+);
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
new file mode 100644
index 000000000000..d89a0ab9e49a
--- /dev/null
+++ b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
@@ -0,0 +1,83 @@
+```js
+// YourPage.stories.js | YourPage.stories.jsx | YourPage.stories.ts | YourPage.stories.tsx
+
+import React from 'react';
+
+import { rest } from 'msw';
+
+import DocumentScreen from './DocumentScreen';
+
+export default {
+  component: DocumentScreen,
+  title: 'Mock Rest request with Storybook and MSW',
+};
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = () => <DocumentScreen />;
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/react/list-story-expanded.js.mdx b/docs/snippets/react/list-story-expanded.js.mdx
index 5031453778f3..adbae337e366 100644
--- a/docs/snippets/react/list-story-expanded.js.mdx
+++ b/docs/snippets/react/list-story-expanded.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index f0ac9babacad..4f0ce279881c 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index 29451fe3602e..155848055f9f 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 2a7c4bdccfb8..9eca08e4002f 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-starter.js.mdx b/docs/snippets/react/list-story-starter.js.mdx
index 3bfb685eb130..3542f92faa1f 100644
--- a/docs/snippets/react/list-story-starter.js.mdx
+++ b/docs/snippets/react/list-story-starter.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
index 6aed7a893e8e..8cf7e37d0405 100644
--- a/docs/snippets/react/list-story-starter.ts.mdx
+++ b/docs/snippets/react/list-story-starter.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index bf0ddfc9835e..e5e199487e50 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index e9c3b870bdf3..9e0f4aa2ec2d 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index d7f303c16e0d..9ae4ae4ce146 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index d6127c23c33f..d5de8e752d73 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,7 +1,8 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
+
 import { List, ListProps } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index 96e0a19d2ab9..dc9f9a491761 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 4a4ac92827eb..4ceb909024b5 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index 22bcb2d83042..c92ece6d0191 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js
+// List.stories.js | List.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index dc8458cd00b1..628e57ec1ebd 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -1,9 +1,11 @@
 ```ts
-// List.stories.tsx
+// List.stories.ts | List.stories.tsx
 
 import React from 'react';
 
 import { List, ListProps } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 const Template: Story<ListProps> = (args) => <List {...args} />;
diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx
index 9601a439cc80..d901a012173a 100644
--- a/docs/snippets/react/loader-story.js.mdx
+++ b/docs/snippets/react/loader-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// TodoItem.stories.js
+// TodoItem.stories.js | TodoItem.stories.jsx | TodoItem.stories.ts | TodoItem.stories.tsx
 
 import React from 'react';
 
@@ -7,6 +7,11 @@ import fetch from 'node-fetch';
 
 import { TodoItem } from './TodoItem';
 
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
 export const Primary = (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />;
 Primary.loaders = [
   async () => ({
diff --git a/docs/snippets/react/loader-story.mdx.mdx b/docs/snippets/react/loader-story.mdx.mdx
new file mode 100644
index 000000000000..71b0e979a36d
--- /dev/null
+++ b/docs/snippets/react/loader-story.mdx.mdx
@@ -0,0 +1,26 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => (
+    <TodoItem {...args} todo={todo} />
+  )}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/react/mock-context-container-provider.js.mdx b/docs/snippets/react/mock-context-container-provider.js.mdx
index 234ebf9bafd4..23ee66b7568d 100644
--- a/docs/snippets/react/mock-context-container-provider.js.mdx
+++ b/docs/snippets/react/mock-context-container-provider.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// pages/profile.js
+// pages/profile.js | pages/profile.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index cfcb39d72e48..1f2b3e0ee85f 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.stories.js
+// ProfilePage.stories.js | ProfilePage.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-create.js.mdx b/docs/snippets/react/mock-context-create.js.mdx
index f6b463a1f2e8..5c935b9476e3 100644
--- a/docs/snippets/react/mock-context-create.js.mdx
+++ b/docs/snippets/react/mock-context-create.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePageContext.js
+// ProfilePageContext.js | ProfilePageContext.jsx
 
 import { createContext } from 'react';
 
diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx
index b7ec7f082999..940b17d88539 100644
--- a/docs/snippets/react/mock-context-in-use.js.mdx
+++ b/docs/snippets/react/mock-context-in-use.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.js
+// ProfilePage.js | ProfilePage.jsx
 
 import { useContext } from 'react';
 
diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
index 9ce316353aa6..011634486c56 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
index 0ef2da44148f..9b8b55462be6 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js | MyComponent.stories.ts
+// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
new file mode 100644
index 000000000000..4e588b246c7b
--- /dev/null
+++ b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -0,0 +1,8 @@
+```js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+
+export const StoryWithLocale = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <>{caption}</>;
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story-use-globaltype.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
similarity index 78%
rename from docs/snippets/common/my-component-story-use-globaltype.js.mdx
rename to docs/snippets/react/my-component-story-use-globaltype.js.mdx
index dbf97c01c7ed..3964c64d7179 100644
--- a/docs/snippets/common/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
 const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -10,7 +10,7 @@ const getCaptionForLocale = (locale) => {
     default:
       return 'Hello!';
   }
-}
+};
 
 export const StoryWithLocale = (args, { globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
diff --git a/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
similarity index 98%
rename from docs/snippets/common/my-component-story-use-globaltype.mdx.mdx
rename to docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
index e175189af543..9b4b2a5e9ea9 100644
--- a/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
@@ -10,7 +10,7 @@ export const getCaptionForLocale = (locale) => {
     default:
       return 'Hello!';
   }
-}
+};
 
 <Story name="StoryWithLocale">
   {(args, { globals: { locale } }) => {
diff --git a/docs/snippets/react/my-component-story-with-nonstory.js.mdx b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
index 2798ea22a3fb..5cd1a4a71abc 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.jsx | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/react/my-component-with-env-variables.js.mdx
index a49eabd0ea94..5af331ed28fb 100644
--- a/docs/snippets/react/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/react/my-component-with-env-variables.ts.mdx
index cacb56fcce70..2953290c57b4 100644
--- a/docs/snippets/react/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// MyComponent.stories.tsx
+// MyComponent.stories.ts | MyComponent.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
index 57f0db2b181d..43d43695b730 100644
--- a/docs/snippets/react/page-story-slots.js.mdx
+++ b/docs/snippets/react/page-story-slots.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Page.stories.js
+// Page.stories.js | Page.stories.jsx
 
 import React from 'react';
 import Page from './Page';
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 284505eee4fa..6fcf1182e064 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -1,5 +1,5 @@
-```js
-// Page.stories.js
+```ts
+// Page.stories.ts | Page.stories.tsx
 
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index 0da2bd65cb82..3c040ad80784 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.stories.js
+// YourPage.stories.js | YourPage.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index 6f99607f3bc8..3344cc1eccc5 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -1,5 +1,5 @@
-```js
-// YourPage.stories.js
+```ts
+// YourPage.stories.ts | YourPage.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story.js.mdx b/docs/snippets/react/page-story.js.mdx
index 9763a47e9d82..2f4b552da9a9 100644
--- a/docs/snippets/react/page-story.js.mdx
+++ b/docs/snippets/react/page-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Page.stories.js
+// Page.stories.js | Page.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx
index daf83dac4941..00902298d735 100644
--- a/docs/snippets/react/page-story.ts.mdx
+++ b/docs/snippets/react/page-story.ts.mdx
@@ -1,5 +1,5 @@
 ```ts
-// Page.stories.tsx
+// Page.stories.ts | Page.stories.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/simple-page-implementation.js.mdx b/docs/snippets/react/simple-page-implementation.js.mdx
index 8c397d2cd90b..db4f56463bda 100644
--- a/docs/snippets/react/simple-page-implementation.js.mdx
+++ b/docs/snippets/react/simple-page-implementation.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.js
+// YourPage.js | YourPage.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/simple-page-implementation.ts.mdx b/docs/snippets/react/simple-page-implementation.ts.mdx
index 225a7c9633dc..906989a3a553 100644
--- a/docs/snippets/react/simple-page-implementation.ts.mdx
+++ b/docs/snippets/react/simple-page-implementation.ts.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.tsx
+// YourPage.ts | YourPage.tsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/storybook-preview-global-loader.js.mdx b/docs/snippets/react/storybook-preview-global-loader.js.mdx
deleted file mode 100644
index 1b005cbdf353..000000000000
--- a/docs/snippets/react/storybook-preview-global-loader.js.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```js
-// .storybook/preview.js
-
-import React from 'react';
-
-import fetch from 'node-fetch';
-
-export const loaders = [
-  async () => ({
-    currentUser: (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
-  }),
-];
-```
\ No newline at end of file
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
index e9a4efd6ff7e..4ffba8cfc318 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Table.stories.js
+// Table.stories.js | Table.stories.jsx
 
 const TableStory = ({ data, ...args }) => (
   <Table {...args} >
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 917308ccbb00..8c226cbd9a1c 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx
index 5c3348310463..a5dfee62eabd 100644
--- a/docs/snippets/react/your-component.ts.mdx
+++ b/docs/snippets/react/your-component.ts.mdx
@@ -1,9 +1,9 @@
 ```ts
-// YourComponent.stories.tsx
+// YourComponent.stories.ts | YourComponent.stories.tsx
 
 import React, { ComponentProps } from 'react';
 
-import { Story } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
@@ -11,7 +11,7 @@ import { YourComponent } from './YourComponent';
 export default {
   title: 'YourComponent',
   component: YourComponent,
-};
+} as Meta;
 
 //👇 We create a “template” of how args map to rendering
 const Template: Story<ComponentProps<typeof YourComponent>> = (args) => <YourComponent {...args} />;
diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
new file mode 100644
index 000000000000..2793daec07b6
--- /dev/null
+++ b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
@@ -0,0 +1,29 @@
+```html
+<!-- MockApolloWrapperClient.svelte -->
+
+<script>
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<div>
+  <slot />
+</div>
+```
diff --git a/docs/snippets/svelte/document-screen-fetch.js.mdx b/docs/snippets/svelte/document-screen-fetch.js.mdx
new file mode 100644
index 000000000000..f29ea5ebc88f
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-fetch.js.mdx
@@ -0,0 +1,47 @@
+```html
+<!-- YourPage.svelte -->
+
+<script>
+  import { onMount } from 'svelte';
+
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+  export let user = {};
+  export let document = {};
+  export let subdocuments = [];
+  export let status = 'loading';
+
+  onMount(async () => {
+    await fetch('https://your-restful-endpoint')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((data) => {
+        user = data.user;
+        status = 'success';
+        document = data.document;
+        subdocuments = data.subdocuments;
+      })
+      .catch(() => {
+        status = 'error';
+      });
+  });
+</script>
+
+{#if status === "error"}
+  <p>There was an error fetching the data!</p>
+{/if} 
+{#if status === "loading"}
+  <p>Loading...</p>
+{:else}
+  <PageLayout {user}>
+    <DocumentHeader {document} />
+    <DocumentList documents="{subdocuments}" />
+  </PageLayout>
+{/if}
+```
diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx
new file mode 100644
index 000000000000..051c2c64f593
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx
@@ -0,0 +1,46 @@
+```html
+<!-- YourPage.svelte -->
+
+<script>
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading} 
+  <p>Loading...</p>
+{:else if $infoResult.error} 
+  <p>There was an error fetching the data!</p> 
+{:else}
+  <PageLayout {$infoResult.data.user}>
+    <DocumentHeader {$infoResult.data.document} />
+    <DocumentList {$infoResult.data.subdocuments} />
+  </PageLayout>
+{/if}
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
new file mode 100644
index 000000000000..2005122bfe1e
--- /dev/null
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -0,0 +1,92 @@
+```js
+// YourPage.stories.js
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './DocumentScreen.svelte';
+import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+
+export default {
+  component: DocumentScreen,
+  decorators: [() => MockGraphqlProvider],
+  title: 'Mock GraphQL query with Storybook and MSW',
+};
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = (args) => ({
+  Component: DocumentScreen,
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
+};
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
new file mode 100644
index 000000000000..953003799733
--- /dev/null
+++ b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
@@ -0,0 +1,83 @@
+```js
+// YourPage.stories.js
+
+import DocumentScreen from './DocumentScreen.svelte';
+
+import { rest } from 'msw';
+export default {
+  component: DocumentScreen,
+  title: 'Mock Rest request with Storybook and MSW',
+};
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = (args) => ({
+  Component: DocumentScreen,
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx
index cb17b610f1ae..7fc57ea8be6a 100644
--- a/docs/snippets/svelte/loader-story.js.mdx
+++ b/docs/snippets/svelte/loader-story.js.mdx
@@ -5,14 +5,19 @@ import fetch from 'node-fetch';
 
 import TodoItem from './TodoItem.svelte';
 
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
 export const Primary = (args, { loaded: { todo } }) => ({
   Component: TodoItem,
-  props: {...args, ...todo},
+  props: { ...args, ...todo },
 });
 
 Primary.loaders = [
   async () => ({
-    todo: (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
   }),
 ];
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
new file mode 100644
index 000000000000..fcda10e867d9
--- /dev/null
+++ b/docs/snippets/svelte/loader-story.mdx.mdx
@@ -0,0 +1,30 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import TodoItem from './TodoItem.svelte';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    Component: SampleLoaderComponent,
+    props: {
+      ...args,
+      todo,
+    },
+  })}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
new file mode 100644
index 000000000000..af44200a17fa
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -0,0 +1,13 @@
+```js
+// MyComponent.stories.js
+
+export const StoryWithLocale = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    component: SampleComponent,
+    props: {
+      locale: caption,
+    },
+  };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
new file mode 100644
index 000000000000..8ba057256fd4
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    component: SampleComponent,
+    props: {
+      locale: caption,
+    },
+  };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
new file mode 100644
index 000000000000..7c204d32ceb2
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
@@ -0,0 +1,26 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+export const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'es': return 'Hola!';
+    case 'fr': return 'Bonjour!';
+    case 'kr': return '안녕하세요!';
+    case 'zh': return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      component: MyComponent,
+      props: {
+        locale: caption,
+      },
+    };
+  }}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
new file mode 100644
index 000000000000..50ad3324eb03
--- /dev/null
+++ b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
@@ -0,0 +1,41 @@
+```html
+<!-- ApolloWrapperClient.vue -->
+
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
diff --git a/docs/snippets/vue/document-screen-fetch.3.js.mdx b/docs/snippets/vue/document-screen-fetch.3.js.mdx
new file mode 100644
index 000000000000..d39177051566
--- /dev/null
+++ b/docs/snippets/vue/document-screen-fetch.3.js.mdx
@@ -0,0 +1,54 @@
+```html
+<!-- YourPage.vue -->
+
+<template>
+  <div v-if="!loading && data && data.subdocuments.length">
+    <PageLayout :user="data.user">
+      <DocumentHeader :document="data.document" />
+      <DocumentList :documents="data.subdocuments" />
+    </PageLayout>
+  </div>
+  <p v-if="loading">
+    Loading...
+  </p>
+  <p v-if="error">
+    There was an error fetching the data!
+  </p>
+</template>
+<script>
+  import { ref } from 'vue';
+
+  import PageLayout from './PageLayout';
+  import DocumentHeader from './DocumentHeader';
+  import DocumentList from './DocumentList';
+
+  export default {
+    name: 'DocumentScreen',
+    setup() {
+      const data = ref(null);
+      const loading = ref(true);
+      const error = ref(null);
+      fetch('https://your-restful-endpoint')
+        .then((res) => {
+          if (!res.ok) {
+            error.value = res.statusText;
+          }
+          return res;
+        })
+        .then((res) => res.json())
+        .then((requestData) => {
+          data.value = requestData;
+          loading.value = false;
+        })
+        .catch(() => {
+          error.value = 'error';
+        });
+      return {
+        error,
+        loading,
+        data,
+      };
+    },
+  };
+</script>
+```
diff --git a/docs/snippets/vue/document-screen-with-graphql.3.js.mdx b/docs/snippets/vue/document-screen-with-graphql.3.js.mdx
new file mode 100644
index 000000000000..650d7bfd4e88
--- /dev/null
+++ b/docs/snippets/vue/document-screen-with-graphql.3.js.mdx
@@ -0,0 +1,53 @@
+```html
+<!-- YourPage.vue -->
+
+<template>
+  <div v-if="loading">Loading...</div>
+
+  <div v-else-if="error">There was an error fetching the data!</div>
+
+  <div v-if="!loading && data && result.subdocuments.length">
+    <PageLayout :user="data.user">
+      <DocumentHeader :document="result.document" />
+      <DocumentList :documents="result.subdocuments" />
+    </PageLayout>
+  </div>
+</template>
+
+<script>
+  import gql from 'graphql-tag';
+  import { useQuery } from '@vue/apollo-composable';
+  export default {
+    name: 'DocumentScreen',
+    setup() {
+      const { result, loading, error } = useQuery(gql`
+        query AllInfoQuery {
+          user {
+            userID
+            name
+          }
+          document {
+            id
+            userID
+            title
+            brief
+            status
+          }
+          subdocuments {
+            id
+            userID
+            title
+            content
+            status
+          }
+        }
+      `);
+      return {
+        result,
+        loading,
+        error,
+      };
+    },
+  };
+</script>
+```
diff --git a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
new file mode 100644
index 000000000000..24024e5b3bf6
--- /dev/null
+++ b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
@@ -0,0 +1,95 @@
+```js
+// YourPage.stories.js
+
+import DocumentScreen from './DocumentScreen.vue';
+import WrapperComponent from './ApolloWrapperClient.vue';
+
+import { graphql } from 'msw';
+
+export default {
+  component: DocumentScreen,
+  title: 'Mock GraphQL query with Storybook and MSW',
+};
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = (args) => ({
+  components: { DocumentScreen, WrapperComponent },
+  setup() {
+    return { args };
+  },
+  template: '<WrapperComponent><SampleGraphqlComponent v-bind="args"/></WrapperComponent>',
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
new file mode 100644
index 000000000000..c4ee4e0b44fb
--- /dev/null
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -0,0 +1,87 @@
+```js
+// YourPage.stories.js
+
+import { rest } from 'msw';
+
+import DocumentScreen from './DocumentScreen.vue';
+
+export default {
+  component: DocumentScreen,
+  title: 'Mock Rest request with Storybook and MSW',
+};
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+const PageTemplate = (args) => ({
+  components: { DocumentScreen },
+  setup() {
+    return { args };
+  },
+  template: '<DocumentScreen v-bind="args" />',
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx
new file mode 100644
index 000000000000..fd8c09308512
--- /dev/null
+++ b/docs/snippets/vue/loader-story.3.js.mdx
@@ -0,0 +1,28 @@
+```js
+// TodoItem.stories.js
+
+import TodoItem from './TodoItem.vue';
+
+import fetch from 'node-fetch';
+
+export default {
+  component: TodoItem,
+  title: 'Examples/Loader',
+};
+
+export const Primary = (args, { loaded: { todo } }) => {
+  return {
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: `<TodoItem :todo="todo"/>`,
+  };
+};
+
+Primary.loaders = [
+  async () => ({
+    todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+  }),
+];
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/loader-story.mdx.mdx b/docs/snippets/vue/loader-story.mdx.mdx
new file mode 100644
index 000000000000..8d3e8e8cf9c8
--- /dev/null
+++ b/docs/snippets/vue/loader-story.mdx.mdx
@@ -0,0 +1,30 @@
+```md
+<!-- TodoItem.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import TodoItem from './TodoItem.vue';
+
+import fetch from 'node-fetch';
+
+<Meta title="Examples/Loader" component={TodoItem} />
+
+<Story
+  name="Primary"
+  loaders={[
+    async () => ({
+      todo: await (
+        await fetch("https://jsonplaceholder.typicode.com/todos/1")
+      ).json(),
+    }),
+  ]}
+>
+  {(args, { loaded: { todo } }) => ({
+    components: { TodoItem },
+    setup() {
+      return { args, todo: todo };
+    },
+    template: `<TodoItem :todo="todo"/>`,
+  })}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
similarity index 72%
rename from docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
rename to docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
index 0ad97aa8bad1..5c880243841a 100644
--- a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -3,6 +3,8 @@
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
-  return <>{caption}</>;
+  return {
+    template: `<p>${caption}</p>`,
+  };
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
new file mode 100644
index 000000000000..555575034acf
--- /dev/null
+++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
@@ -0,0 +1,25 @@
+```js
+// MyComponent.stories.js
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    template: `<p>${caption}</p>`,
+  };
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
new file mode 100644
index 000000000000..eb1fd520ddc1
--- /dev/null
+++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
@@ -0,0 +1,23 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+export const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'es': return 'Hola!';
+    case 'fr': return 'Bonjour!';
+    case 'kr': return '안녕하세요!';
+    case 'zh': return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+<Story name="StoryWithLocale">
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      template: `<p>${caption}</p>`,
+    };
+  }}
+</Story>
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
new file mode 100644
index 000000000000..00291479a6b4
--- /dev/null
+++ b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -0,0 +1,10 @@
+```js
+// MyComponent.stories.js
+
+import { html } from 'lit-html';
+
+export const StoryWithLocale = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return html`<p>${caption}</p>`;
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
new file mode 100644
index 000000000000..63873a57924b
--- /dev/null
+++ b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
@@ -0,0 +1,25 @@
+```js
+// MyComponent.stories.js
+
+import { html } from 'lit-html';
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale = ({ propA, propB }, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return html`<p>${caption}</p>`;
+};
+```
\ No newline at end of file
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 473e3f7165ab..367b1d49cabf 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"6.4.0-alpha.9","info":{"plain":"### Dependency Upgrades\n\n- Upgrade bad release of `react-docgen-typescript-plugin` ([#15432](https://github.com/storybookjs/storybook/pull/15432))"}}
\ No newline at end of file
+{"version":"6.4.0-alpha.16","info":{"plain":"### Features\n\n- Addon-backgrounds: Respect user's reduced motion settings ([#13711](https://github.com/storybookjs/storybook/pull/13711))\n- CSF: Add CSF3 typings ([#15558](https://github.com/storybookjs/storybook/pull/15558))\n\n### Bug Fixes\n\n- Angular: Fix actions argType auto generation ([#15563](https://github.com/storybookjs/storybook/pull/15563))"}}
\ No newline at end of file
diff --git a/docs/workflows/build-pages-with-storybook.md b/docs/workflows/build-pages-with-storybook.md
index 715b0cc0b661..93b0d7c20f7c 100644
--- a/docs/workflows/build-pages-with-storybook.md
+++ b/docs/workflows/build-pages-with-storybook.md
@@ -7,13 +7,13 @@ Storybook helps you build any component, from small “atomic” components to c
 There are many ways to build pages in Storybook. Here are common patterns and solutions.
 
 - Pure presentational pages.
-- Connected components (e.g. network requests, context, browser environment).
+- Connected components (e.g., network requests, context, browser environment).
 
 ## Pure presentational pages
 
 Teams at the BBC, The Guardian, and the Storybook maintainers themselves build pure presentational pages. If you take this approach, you don't need to do anything special to render your pages in Storybook.
 
-It's straightforward to write components to be fully presentational all the way up to the screen level. That makes it easy to show in Storybook. The idea is you then do all the messy “connected” logic in a single wrapper component in your app outside of Storybook. You can see an example of this approach in the [Data](https://storybook.js.org/tutorials/intro-to-storybook/react/en/data/) chapter of the Intro to Storybook tutorial.
+It's straightforward to write components to be fully presentational up to the screen level. That makes it easy to show in Storybook. The idea is that you do all the messy “connected” logic in a single wrapper component in your app outside of Storybook. You can see an example of this approach in the [Data](https://storybook.js.org/tutorials/intro-to-storybook/react/en/data/) chapter of the Intro to Storybook tutorial.
 
 The benefits:
 
@@ -22,9 +22,9 @@ The benefits:
 
 The downsides:
 
-- Your existing app may not be structured in this way and it may be difficult to change it.
+- Your existing app may not be structured in this way, and it may be difficult to change it.
 
-- Fetching data in one place means that you need to drill it down to the components that actually use it. This can be natural in a page that composes one big GraphQL query (for instance), but in other data fetching approaches may make this less appropriate.
+- Fetching data in one place means that you need to drill it down to the components that use it. This can be natural in a page that composes one big GraphQL query (for instance), but other data fetching approaches may make this less appropriate.
 
 - It's less flexible if you want to load data incrementally in different places on the screen.
 
@@ -64,23 +64,90 @@ In such cases it is natural to use [args composition](../writing-stories/args.md
 
 <!-- prettier-ignore-end -->
 
-This approach is particularly useful when the various subcomponents export a complex list of different stories, which you can pick and choose to build realistic scenarios for your screen-level stories without repeating yourself. By reusing the data and taking a Don't-Repeat-Yourself(DRY) philosophy, your story maintenance burden is minimal.
+This approach is beneficial when the various subcomponents export a complex list of different stories. You can pick and choose to build realistic scenarios for your screen-level stories without repeating yourself. Your story maintenance burden is minimal by reusing the data and taking a Don't-Repeat-Yourself(DRY) philosophy.
 
 ## Mocking connected components
 
-If you need to render a connected component in Storybook, you can mock the network requests that it makes to fetch its data. There are various layers in which you can do that.
+If you need to render a connected component in Storybook, you can mock the network requests to fetch its data. There are various layers in which you can do that.
 
 ### Mocking providers
 
-If you are using a provider that supplies data via the context, you can wrap your story in a decorator that supplies a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial we mock a Redux provider with mock data.
+If you are using a provider that supplies data via the context, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
 
-Additionally, there may be addons that supply such providers and nice APIs to set the data they provide. For instance [`storybook-addon-apollo-client`](https://www.npmjs.com/package/storybook-addon-apollo-client) provides this API:
+### Mocking API Services
+
+Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data either from REST or GraphQL endpoints. If you're working in an application that relies on either of these data providers, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
+
+[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories.
+
+#### Mocking REST requests with MSW addon
+
+If you're working with pure presentational screens, adding stories through [args composition](#args-composition-for-presentational-screens) is recommended. You can easily encode all the data via [args](../writing-stories/args.md), removing the need for handling it with "wrapper components". However, this approach loses its flexibility if the screen's data is retrieved from a RESTful endpoint within the screen itself. For instance, if your screen had a similar implementation to retrieve a list of documents:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/document-screen-fetch.js.mdx',
+    'vue/document-screen-fetch.3.js.mdx',
+    'angular/document-screen-fetch.ts.mdx',
+    'svelte/document-screen-fetch.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+To test your screen with the mocked data, you could write a similar set of stories:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/documentscreen-story-msw-rest-request.js.mdx',
+    'vue/documentscreen-story-msw-rest-request.3.js.mdx',
+    'angular/documentscreen-story-msw-rest-request.ts.mdx',
+    'svelte/documentscreen-story-msw-rest-request.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+💡 <strong>Note:</strong> This example details how you can mock the REST request with fetch. Similar HTTP clients such as <a href="https://axios-http.com/">axios</a> can be used as well.
+</div>
+
+The mocked data (i.e., `TestData`) will be injected via [parameters](./writing-stories/parameters), enabling you to configure it per-story basis.
+
+#### Mocking GraphQL queries with MSW addon
+
+In addition to mocking RESTful requests, the other noteworthy feature of the [MSW addon](https://msw-sb.vercel.app/?path=/story/guides-introduction--page) is the ability to mock incoming data from any of the mainstream [GraphQL](https://www.apollographql.com/docs/react/integrations/integrations/) clients (e.g., [Apollo Client](https://www.apollographql.com/docs/), [URQL](https://formidable.com/open-source/urql/) or [React Query](https://react-query.tanstack.com/)). For instance, if your screen retrieves the user's information and a list of documents based on a query result, you could have a similar implementation:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/document-screen-with-graphql.js.mdx',
+    'vue/document-screen-with-graphql.3.js.mdx',
+    'angular/document-screen-with-graphql.ts.mdx',
+    'svelte/document-screen-with-grapqhl.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+To test your screen with the GraphQL mocked data, you could write the following stories:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/component-story-with-query.js.mdx',
+    'react/documentscreen-story-msw-graphql-query.js.mdx',
+    'vue/documentscreen-story-msw-graphql-query.3.js.mdx',
+    'vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx',
+    'angular/documentscreen-story-msw-graphql-query.ts.mdx',
+    'angular/apollo-module.mock-apollo-module.ts.mdx',
+    'svelte/documentscreen-story-msw-graphql-query.js.mdx',
+    'svelte/apollo-wrapper-component.with-mock-implementation.js.mdx',
   ]}
 />
 
@@ -88,11 +155,12 @@ Additionally, there may be addons that supply such providers and nice APIs to se
 
 ### Mocking imports
 
-It is also possible to mock imports directly, as you might in a unit test, using webpack’s aliasing. This is extremely useful if your component makes network requests directly with third-party libraries.
+It is also possible to mock imports directly, as you might in a unit test, using Webpack’s aliasing. It's advantageous if your component makes network requests directly with third-party libraries.
 
 We're going to use [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) as an example.
 
-Let's start by creating our own mock, which we'll use later with a [decorator](../writing-stories/decorators#global-decorators). Create a new file called `isomorphic-fetch.js` inside a directory called `__mocks__` (we'll leave the location to you, don't forget to adjust the imports to your needs) and add the following code inside:
+Inside a directory called `__mocks__`, create a new file called
+`isomorphic-fetch.js` with the following code:
 
 <!-- prettier-ignore-start -->
 
@@ -104,7 +172,7 @@ Let's start by creating our own mock, which we'll use later with a [decorator](.
 
 <!-- prettier-ignore-end -->
 
-The above code creates a decorator which reads story-specific data off the story's [parameters](../writing-stories/parameters), allowing you to configure the mock on a per-story basis.
+The code above creates a decorator which reads story-specific data off the story's [parameters](../writing-stories/parameters), enabling you to configure the mock on a per-story basis.
 
 To use the mock in place of the real import, we use [webpack aliasing](https://webpack.js.org/configuration/resolve/#resolvealias):
 
@@ -118,7 +186,7 @@ To use the mock in place of the real import, we use [webpack aliasing](https://w
 
 <!-- prettier-ignore-end -->
 
-Add the decorator you've just implemented to your [storybook/preview.js](../configure/overview.md#configure-story-rendering) (if you don't have it already, you'll need to create the file):
+Add the decorator you've just implemented to your [storybook/preview.js](../configure/overview.md#configure-story-rendering):
 
 <!-- prettier-ignore-start -->
 
@@ -130,7 +198,7 @@ Add the decorator you've just implemented to your [storybook/preview.js](../conf
 
 <!-- prettier-ignore-end -->
 
-Once that configuration is complete, we can set the mock values in a specific story. Let's borrow an example from this [blog post](https://medium.com/@edogc/visual-unit-testing-with-react-storybook-and-fetch-mock-4594d3a281e6):
+Finally, we can set the mock values in a specific story. Let's borrow an example from this [blog post](https://medium.com/@edogc/visual-unit-testing-with-react-storybook-and-fetch-mock-4594d3a281e6):
 
 <!-- prettier-ignore-start -->
 
@@ -147,17 +215,17 @@ Once that configuration is complete, we can set the mock values in a specific st
 
 ### Specific mocks
 
-Another mocking approach is to use libraries that intercept calls at a lower level. For instance you can use [`fetch-mock`](https://www.npmjs.com/package/fetch-mock) to mock fetch requests specifically, or [`msw`](https://www.npmjs.com/package/msw) to mock all kinds of network traffic.
+Another mocking approach is to use libraries that intercept calls at a lower level. For instance, you can use [`fetch-mock`](https://www.npmjs.com/package/fetch-mock) to mock fetch requests specifically.
 
-Similar to the import mocking above, once you have a mock you’ll still want to set the return value of the mock on a per-story basis. Do this in Storybook with a decorator that reads story parameters.
+Like the [import mocking](##mocking-imports) above, once you have a mock, you’ll still want to set the return value of the mock per-story basis. Do this in Storybook with a [decorator](../writing-stories/decorators.md) that reads the story's [parameters](../writing-stories/parameters.md).
 
 ### Avoiding mocking dependencies
 
-It's possible to mostly avoid mocking the dependencies of connected "container" components entirely through passing them around via props, or React context. However, it necessitates a strict split of container and presentational component logic. For example, if you have a component that is responsible for data fetching logic and rendering DOM, it will need to be mocked as previously described.
+It's possible to avoid mocking the dependencies of connected "container" components entirely by passing them around via props or React context. However, it requires a strict split of the container and presentational component logic. For example, if you have a component responsible for data fetching logic and rendering DOM, it will need to be mocked as previously described.
 
-It’s common to import and embed container components in amongst presentational components. However, as we discovered earlier, in order to also render them within Storybook, we’ll likely have to mock their dependencies or the imports themselves.
+It’s common to import and embed container components amongst presentational components. However, as we discovered earlier, to render them within Storybook, we’ll likely have to mock their dependencies or the imports themselves.
 
-Not only can this quickly grow to become a tedious task, it’s also very difficult to mock container components that use local state. So, a solution to this problem is instead of importing containers directly, instead create a React context that provides the container components. This allows you to freely embed container components as usual, at any level in the component hierarchy without worrying about subsequently mocking their dependencies; since we can simply swap out the containers themselves with their mocked presentational counterpart.
+Not only can this quickly grow to become a tedious task, but it’s also challenging to mock container components that use local states. So, instead of importing containers directly, a solution to this problem is to create a React context that provides the container components. It allows you to freely embed container components as usual, at any level in the component hierarchy without worrying about subsequently mocking their dependencies; since we can swap out the containers themselves with their mocked presentational counterpart.
 
 We recommend dividing context containers up over specific pages or views in your app. For example, if you had a `ProfilePage` component, you might set up a file structure as follows:
 
@@ -170,13 +238,13 @@ ProfilePageContext.js
 
 <div class="aside">
 
-It’s also often useful to setup a “global” container context, (perhaps named `GlobalContainerContext`) for container components that may be rendered on every page of your app, and adding it to the top level of your application. While it’s possible to place every container within this global context, it should only provide containers that are required globally.
+It’s also often helpful to set up a “global” container context (perhaps named `GlobalContainerContext`) for container components that may be rendered on every page of your app and adding them to the top level of your application. While it’s possible to place every container within this global context, it should only provide globally required containers.
 
 </div>
 
 Let’s look at an example implementation of this approach.
 
-First we’ll need to create a React context, and we can name it `ProfilePageContext`. It does nothing more than export a React context:
+First, create a React context, and name it `ProfilePageContext`. It does nothing more than export a React context:
 
 <!-- prettier-ignore-start -->
 
@@ -222,7 +290,7 @@ If the same context applies to all `ProfilePage` stories, we can also use a [dec
 
 #### Providing containers to your application
 
-Now, in context of your application, you’ll need to provide `ProfilePage` with all of the container components it requires by wrapping it with `ProfilePageContext.Provider`:
+Now, in the context of your application, you’ll need to provide `ProfilePage` with all of the container components it requires by wrapping it with `ProfilePageContext.Provider`:
 
 For example, in Next.js, this would be your `pages/profile.js` component.
 
@@ -238,7 +306,7 @@ For example, in Next.js, this would be your `pages/profile.js` component.
 
 #### Mocking global containers in Storybook
 
-If you’ve setup `GlobalContainerContext`, in order to provide context to all stories you’ll need to set up a decorator within Storybook’s `preview.js`. For example:
+If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator within Storybook’s `preview.js` to provide context to all stories. For example:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/workflows/faq.md b/docs/workflows/faq.md
index 8cb21dfc3a9c..6d794531ca57 100644
--- a/docs/workflows/faq.md
+++ b/docs/workflows/faq.md
@@ -10,8 +10,12 @@ In case you are having trouble with Angular Ivy you can deactivate it in your `m
 
 ```javascript
 module.exports = {
-  stories: [/* ... */],
-  addons: [/* ... */],
+  stories: [
+    /* ... */
+  ],
+  addons: [
+    /* ... */
+  ],
   angularOptions: {
     enableIvy: false,
   },
@@ -32,7 +36,7 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 💡 <strong>Note</strong>: If you're using <a href="https://yarnpkg.com/">yarn</a> as a package manager, you'll need to adjust the command accordingly.
 </div>
 
-### I see `ReferenceError: React is not defined` when using storybooks with Next.js
+### I see `ReferenceError: React is not defined` when using Storybook with Next.js
 
 Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by:
 
@@ -59,19 +63,22 @@ module.exports = {
 Fast refresh is an opt-in feature that can be used in Storybook React.
 There are two ways that you can enable it, go ahead and pick one:
 
-* You can set a `FAST_REFRESH` environment variable in your `.env` file:
+- You can set a `FAST_REFRESH` environment variable in your `.env` file:
+
 ```
 FAST_REFRESH=true
 ```
 
-* Or you can set the following properties in your `.storybook/main.js` files:
+- Or you can set the following properties in your `.storybook/main.js` files:
+
 ```js
 module.exports = {
   reactOptions: {
     fastRefresh: true,
-  }
+  },
 };
 ```
+
 <div class="aside">
 💡 <strong>Note:</strong> Fast Refresh only works in development mode with React 16.10 or higher.
 </div>
@@ -81,6 +88,7 @@ module.exports = {
 A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
 
 1.  You're trying to access addon channel (e.g., by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
+
     ```js
     import { addons, mockChannel } from '@storybook/addons';
 
@@ -110,12 +118,11 @@ class MyComponent extends Component {
     };
   }
   // ...
-};
+}
 
 export const defaultView = () => <MyComponent initialState={} />;
 ```
 
-
 ### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
 
 If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
@@ -142,16 +149,16 @@ Starting with Storybook version 6.0, we've introduced some great features aimed
 
 With this, we would like to point out that if you plan on using addons created by our fantastic community, you need to consider that some of those addons might be working with an outdated version of Storybook.
 
-We're actively working in providing a better way to address this situation, but in the meantime, we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
+We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
 
 ### Is it possible to browse the documentation for past versions of Storybook?
 
 With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our <a href="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md">migration guide</a> .
 
-We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
+We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
 
 | Section          | Page                                       | Current Location                                                                   | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
-|------------------|--------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------- | ------------------------------------------ | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Get Started      | Install                                    | [See current documentation](../get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
 |                  | What's a story                             | [See current documentation](../get-started/whats-a-story.md)                       | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
 |                  | Browse Stories                             | [See current documentation](../get-started/browse-stories.md)                      | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
@@ -201,18 +208,17 @@ We're only covering version 5.3 and 5.0 as they were important milestones for St
 |                  | Frameworks                                 | [See current documentation](../api/new-frameworks.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
 |                  | CLI options                                | [See current documentation](../api/cli-options.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
 
-
 <div class="aside">
 With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
 </div>
 
 ### What icons are available for my toolbar or my addon?
 
-With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your own UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
+With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
 Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look.
 
 | accessibility  | accessibilityalt | add          | admin        | alert         |
-|----------------|------------------|--------------|--------------|---------------|
+| -------------- | ---------------- | ------------ | ------------ | ------------- |
 | arrowdown      | arrowleft        | arrowleftalt | arrowright   | arrowrightalt |
 | arrowup        | back             | basket       | batchaccept  | batchdeny     |
 | beaker         | bell             | bitbucket    | book         | bookmark      |
@@ -245,10 +251,9 @@ Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.co
 | useradd        | useralt          | users        | video        | watch         |
 | wrench         | youtube          | zoom         | zoomout      | zoomreset     |
 
-
 ### I see a "No Preview" error with a Storybook production build
 
-If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error.
+If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates to how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error.
 
 We recommend that you use [http-server](https://www.npmjs.com/package/http-server) instead and use the following command to preview Storybook:
 
@@ -272,7 +277,48 @@ If you run into a situation where this is not the case, you can adjust the `conf
 
 See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
 
-
 ### Why are my MDX stories not working in IE11?
 
 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](../writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+
+### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
+
+If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
+
+```js
+// rollup.config
+
+// Boilerplate imports
+
+import replace from '@rollup/plugin-replace';
+const production = !process.env.ROLLUP_WATCH;
+
+// Remainder rollup.config implementation
+
+export default {
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js',
+  },
+  plugins: [
+    // Other plugins
+
+    // Configures the replace plugin to allow Grapqhl Queries to work properly
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+};
+```
+
+With Angular, the most common issue is the placement of the `mockServiceWorker.js` file. Use this [example](https://github.com/mswjs/examples/tree/master/examples/rest-angular/) as a point of reference.
+
+### Can I use other GraphQL providers with Storybook's MSW addon?
+
+Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/tree/master/packages/docs/src/demos) to learn how to integrate different providers.
+
+### Can I mock GraphQL mutations with Storybook's MSW addon?
+
+No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
\ No newline at end of file
diff --git a/docs/workflows/unit-testing.md b/docs/workflows/unit-testing.md
index 8fa58c09b8da..15624c092528 100644
--- a/docs/workflows/unit-testing.md
+++ b/docs/workflows/unit-testing.md
@@ -15,6 +15,7 @@ Here is an example of how you can use it in a testing library:
 <CodeSnippets
   paths={[
     'react/button-test.js.mdx',
+    'preact/button-test.js.mdx',
     'vue/button-test.js.mdx',
     'angular/button-test.ts.mdx',
     'svelte/button-test.js.mdx',
diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md
index e9922caf7c42..64eee6340e25 100644
--- a/docs/writing-docs/build-documentation.md
+++ b/docs/writing-docs/build-documentation.md
@@ -28,7 +28,7 @@ At any point during your development, you can preview the documentation you've w
 
 Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build.
 
-It will look for any stories available either in [MDX](./mdx.md) or[CSF](../writing-stories/introduction.md#component-story-format) and based on the documentation you've added it will display it...
+It will look for any stories available either in [MDX](./mdx.md) or [CSF](../writing-stories/introduction.md#component-story-format) and based on the documentation you've added it will display it...
 
 ![Storybook in documentation mode](./storybook-docs-build.png)
 
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
index 3068247bea1e..5b2be86d6421 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -60,11 +60,25 @@ To use the `ArgsTable` in [DocsPage](./docs-page.md#component-parameter), export
 
 To use the `ArgsTable` block in MDX, add the following:
 
+#### For components
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/component-story-mdx-argstable-block-for-component.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### For Stories
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/component-story-mdx-argstable-block.mdx.mdx',
+    'common/component-story-mdx-argstable-block-for-story.mdx.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index b3810870a8a2..9203a81d1854 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -11,8 +11,8 @@ Storybook uses the generic term arguments (args for short) when talking about Re
 A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, it won't be included in your production bundle.
 
 ```
-Button.js | ts
-Button.stories.js | ts
+Button.js | ts | jsx | tsx
+Button.stories.js | ts | jsx | tsx
 ```
 
 ## Component Story Format
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index af5a8bd4568e..c84de903cad5 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -2,30 +2,36 @@
 title: 'Loaders (experimental)'
 ---
 
-Loaders (experimental) are asynchronous functions that load data for a story and its [decorators](./decorators.md). A story's loaders run before the story renders, and the loaded data is passed into the story via its render context.
+Loaders (experimental) are asynchronous functions that load data for a story and its [decorators](./decorators.md). A story's loaders run before the story renders, and the loaded data injected into the story via its render context.
 
-Loaders can be used to load any asset, typically as a performance optimization. They were designed for to lazy load components and other large story imports. They can also be used to load remote API data to be used in a story. However, [Args](./args.md) is the recommended way to manage story data, and we're building up an ecosystem of tools and techniques around Args which might not be compatible with loaded data.
+Loaders can be used to load any asset, lazy load components, or fetch data from a remote API. This feature was designed as a performance optimization to handle large story imports. However, [Args](./args.md) is the recommended way to manage story data. We're building up an ecosystem of tools and techniques around Args that might not be compatible with loaded data.
 
-Loaders are an advanced feature ("escape hatch") and we only recommend using them if you have a specific need that can't be fulfilled by other means. They are experimental in Storybook 6.1 and the APIs are subject to change outside of the normal semver cycle.
+They are an advanced feature (i.e., escape hatch), and we only recommend using them if you have a specific need that other means can't fulfill. They are experimental in Storybook 6.1, and the APIs are subject to change outside of the normal semver cycle.
 
 ## Fetching API data
 
-Stories are isolated component examples that render internal data that's defined as part of the story or alongside the story as [args](./args.md).
+Stories are isolated component examples that render internal data defined as part of the story or alongside the story as [args](./args.md).
 
-Loaders are useful when you need to load story data externally, e.g. from a remote API. Consider the following example that fetches a todo item for display in a todo list:
+Loaders are helpful when you need to load story data externally (e.g., from a remote API). Consider the following example that fetches a todo item to display in a todo list:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'react/loader-story.js.mdx',
+    'react/loader-story.mdx.mdx',
+    'vue/loader-story.3.js.mdx',
+    'vue/loader-story.mdx.mdx',
+    'angular/loader-story.ts.mdx',
+    'angular/loader-story.mdx.mdx',
     'svelte/loader-story.js.mdx',
+    'svelte/loader-story.mdx.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-The loaded data is combined into a `loaded` field on the story context, which is the second argument to a story function. In this example we spread the story's args in first, so they take priority over the static data provided by the loader.
+The response obtained from the remote API call is combined into a `loaded` field on the story context, which is the second argument to a story function. For example, in React, the story's args were spread first to prioritize them over the static data provided by the loader. With other frameworks (e.g., Angular), you can write your stories as you'd usually do.
 
 ## Global loaders
 
@@ -35,20 +41,19 @@ We can also set a loader for **all stories** via the `loaders` export of your [`
 
 <CodeSnippets
   paths={[
-    'react/storybook-preview-global-loader.js.mdx',
-    'svelte/storybook-preview-global-loader.js.mdx',
+    'common/storybook-preview-global-loader.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-In this example, we load a "current user" that is available as `loaded.currentUser` for all stories.
+In this example, we load a "current user" available as `loaded.currentUser` for all stories.
 
 ## Loader inheritance
 
-Like parameters, loaders can be defined globally, at the component level and for a single story (as we’ve seen).
+Like [parameters](./parameters.md), loaders can be defined globally, at the component level, and for a single story (as we’ve seen).
 
-All loaders, defined at all levels that apply to a story, run before the story is rendered.
+All loaders, defined at all levels that apply to a story, run before the story renders in Storybook's canvas.
 
 - All loaders run in parallel
 - All results are the `loaded` field in the story context
@@ -63,3 +68,5 @@ Loaders have the following known limitations:
 
 - They are not yet compatible with the storyshots addon ([#12703](https://github.com/storybookjs/storybook/issues/12703)).
 - They are not yet compatible with inline-rendered stories in Storybook Docs ([#12726](https://github.com/storybookjs/storybook/issues/12726)).
+
+If you're interested in contributing to this feature, read our [contribution guide](../contribute/how-to-contribute.md) and submit a pull request with your work.
\ No newline at end of file
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index f516afd025a0..0257f7c62663 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -11,7 +11,7 @@ For example, let’s customize the backgrounds addon via a parameter. We’ll us
 We can set a parameter for a single story with the `parameters` key on a CSF export:
 
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx 
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -33,7 +33,7 @@ Primary.parameters = {
 We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
 
 ```js
-// Button.stories.js | Button.stories.ts
+// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx 
 
 import Button from './Button';
 
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index f1f13f593535..c494920d567f 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -19,4 +19,19 @@ module.exports = {
   angularOptions: {
     enableIvy: true,
   },
+  // These are just here to test composition. They could be added to any storybook example project
+  refs: {
+    first: {
+      title: 'Composition test one',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    second: {
+      title: 'Composition test two',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    third: {
+      title: 'Composition test three',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+  },
 };
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 49f1fc359c70..fd0af38091c8 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,13 @@
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "yarn storybook-prebuild && start-storybook -p 9008 -s src/assets",
+    "storybook": "yarn storybook-prebuild && start-storybook -p 9008 -s src/assets --no-manager-cache",
     "storybook-prebuild": "yarn test:generate-output && yarn docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "postinstall": "ngcc --source ../../node_modules"
   },
   "dependencies": {
     "@angular/common": "^11.2.14",
@@ -28,6 +29,7 @@
     "core-js": "^3.8.2",
     "node-sass": "^4.14.1",
     "rxjs": "^6.6.3",
+    "telejson": "^5.3.2",
     "zone.js": "^0.11.3"
   },
   "devDependencies": {
@@ -37,18 +39,18 @@
     "@angular/compiler-cli": "^11.2.14",
     "@angular/elements": "^11.2.14",
     "@compodoc/compodoc": "^1.1.11",
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-jest": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/angular": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-jest": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/angular": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
     "@types/core-js": "^2.5.4",
     "@types/jest": "^26.0.16",
     "@types/node": "^14.14.20",
diff --git a/examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot
index fab90a3835e2..3c6dbf4540b1 100644
--- a/examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots Welcome/ To Angular To Angular 1`] = `
   
     </div>
     <div
-      style="text-align:center"
+      style="text-align: center;"
     >
       <h1>
          Welcome to app! 
diff --git a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
index 13b8459513f8..9e2b2d1a9a20 100644
--- a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
@@ -3,47 +3,47 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
   <storybook-welcome-component
-    _nghost-a-c25=""
+    _nghost-a-c152=""
   >
     <main
-      _ngcontent-a-c25=""
+      _ngcontent-a-c152=""
     >
       <h1
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
         Welcome to storybook
       </h1>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
         This is a UI component dev environment for your app.
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
          We've added some basic stories inside the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           src/stories
         </span>
          directory. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          A story is a single state of one or more UI components. You can have as many stories as you want. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          (Basically a story is like a visual test case.) 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
          See these sample 
         <a
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           role="button"
           tabindex="0"
         >
@@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         </a>
          for a component called 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           Button
@@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          . 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
          Just like that, you can add your own components as stories. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          You can also edit those components and see changes right away. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          (Try editing the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           Button
         </span>
          stories located at 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           src/stories/index.js
@@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         .) 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
       >
          Usually we create stories with smaller UI components in the app.
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          Have a look at the 
         <a
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           href="https://storybook.js.org/basics/writing-stories"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          section in our documentation. 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c152=""
         class="note"
       >
         <b
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         >
           NOTE:
         </b>
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
         />
          Have a look at the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           .storybook/webpack.config.js
diff --git a/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
index ce3a20fae52a..a45c0668b914 100644
--- a/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c2=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c2=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>
@@ -41,11 +41,11 @@ exports[`Storyshots Addons/Actions Story with template 1`] = `
 exports[`Storyshots Addons/Actions Use action in method 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c3=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>
diff --git a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
index 0eb2c97c69ea..6390bf44b1da 100644
--- a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c43=""
     ng-reflect-text="This one should have different"
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c43=""
     >
       This one should have different backgrounds
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c5=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c5=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
@@ -33,11 +33,11 @@ exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 exports[`Storyshots Addons / Backgrounds With Template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
index 451935e673c2..929844cd79ef 100644
--- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c43=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c43=""
     >
       😀 😎 👍 💯
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
 exports[`Storyshots Addons/Docs with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c43=""
     ng-reflect-text="hello button"
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c43=""
     >
       hello button
     </button>
diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot
new file mode 100644
index 000000000000..a763f20505b3
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons/Docs/DuplicateStories Basic 1`] = `
+<storybook-wrapper>
+  <my-button
+    ng-reflect-is-disabled="false"
+    ng-reflect-label="Args test"
+  >
+    <button
+      class="btn-secondary btn-medium"
+      ng-reflect-ng-class="btn-secondary,btn-medium"
+    >
+      <img
+        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+        width="100"
+      />
+       Args test
+  
+    </button>
+  </my-button>
+</storybook-wrapper>
+`;
diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
index 2648e92aa89f..5ad62d257e6d 100644
--- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c11=""
+    _nghost-a-c43=""
     ng-reflect-text="Hello 👋"
   >
     <button
-      _ngcontent-a-c11=""
+      _ngcontent-a-c43=""
     >
       Hello 👋
     </button>
diff --git a/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx b/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx
new file mode 100644
index 000000000000..e5c457c04083
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx
@@ -0,0 +1,21 @@
+import {Story, Meta, Canvas} from '@storybook/addon-docs';
+import {DocButtonComponent} from "./doc-button/doc-button.component";
+import * as stories from './doc-button/doc-button.stories';
+
+<Meta title="Addons/Docs/DuplicateStories" component={DocButtonComponent} />
+
+# Duplicate stories
+
+Using the same component more than once. Note the imported story can only be used once and thereafter the links have to be used
+
+<Canvas>
+  <Story story={stories.Basic}/>
+</Canvas>
+
+<Canvas>
+  <Story id="addons-docs-duplicatestories--basic" />
+</Canvas>
+
+<Canvas>
+  <Story id="addons-docs-duplicatestories--basic" />
+</Canvas>
diff --git a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
index 55864ff9b1a5..2689d15992b8 100644
--- a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c43=""
     ng-reflect-text="Add 👾"
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c43=""
     >
       Add 👾
     </button>
diff --git a/examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot b/examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot
index af4fc50f3de4..cbe47f78285c 100644
--- a/examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots Addons/Jest app.component with jest tests 1`] = `
   
     </div>
     <div
-      style="text-align:center"
+      style="text-align: center;"
     >
       <h1>
          Welcome to app! 
diff --git a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
index 29703076aaf1..0c5ee11ad0c0 100644
--- a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Links button with link to another story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c12=""
+    _nghost-a-c43=""
     ng-reflect-text="Go to Welcome Story"
   >
     <button
-      _ngcontent-a-c12=""
+      _ngcontent-a-c43=""
     >
       Go to Welcome Story
     </button>
diff --git a/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
index feff4372ed16..a8422882a1a4 100644
--- a/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
@@ -9,6 +9,7 @@ exports[`Storyshots Basics / Component / With ng-content / Button with different
           style="background-color: rgb(94, 173, 245);"
         />
       </sb-button>
+      
     </button>
   </sb-button>
 </storybook-wrapper>
@@ -41,6 +42,7 @@ exports[`Storyshots Basics / Component / With ng-content / Button with different
       <sb-emoji>
         👾
       </sb-emoji>
+      
     </button>
   </sb-button>
 </storybook-wrapper>
@@ -55,6 +57,7 @@ exports[`Storyshots Basics / Component / With ng-content / Button with different
       >
         🌵
       </sb-emoji>
+      
     </button>
   </sb-button>
 </storybook-wrapper>
diff --git a/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
index 161e5c2edfb0..d9fb54b3c1b2 100644
--- a/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
@@ -13,13 +13,13 @@ exports[`Storyshots Basics / Component / With Provider inputs and inject depende
         Title: Component dependencies
       </div>
       <div>
-        Injector: function Injector_(view, elDef) {
-              this.view = view;
-              this.elDef = elDef;
+        Injector: function NodeInjector(_tNode, _lView) {
+              this._tNode = _tNode;
+              this._lView = _lView;
           }
       </div>
       <div>
-        ElementRef: {"nativeElement":{}}
+        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
       </div>
       <div>
         TestToken: 123
@@ -42,13 +42,13 @@ exports[`Storyshots Basics / Component / With Provider inputs and inject depende
         Title: Component dependencies
       </div>
       <div>
-        Injector: function Injector_(view, elDef) {
-              this.view = view;
-              this.elDef = elDef;
+        Injector: function NodeInjector(_tNode, _lView) {
+              this._tNode = _tNode;
+              this._lView = _lView;
           }
       </div>
       <div>
-        ElementRef: {"nativeElement":{}}
+        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
       </div>
       <div>
         TestToken: 123
diff --git a/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts b/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts
index 1d5bb7800159..fbca49cbc42a 100644
--- a/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts
+++ b/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-useless-constructor */
 import { Component, Input, InjectionToken, Injector, ElementRef, Inject } from '@angular/core';
+import { stringify } from 'telejson';
 
 export const TEST_TOKEN = new InjectionToken<string>('test');
 
@@ -23,6 +24,6 @@ export class DiComponent {
   }
 
   elRefStr(): string {
-    return JSON.stringify(this.elRef);
+    return stringify(this.elRef, { maxDepth: 1 });
   }
 }
diff --git a/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
index 66a392f0cbb4..0d6bcc532750 100644
--- a/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
@@ -7,7 +7,6 @@ exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgCo
     ng-reflect-component-outlet="function WithoutSelectorCompon"
     ng-reflect-name="Dixie Normous"
   >
-    
     <ng-component>
       My name in color : 
       <div
@@ -18,6 +17,7 @@ exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgCo
       Ng-content : Inspired by 
       https://angular.io/api/common/NgComponentOutlet
     </ng-component>
+    
   </ng-component-outlet-wrapper>
 </storybook-wrapper>
 `;
diff --git a/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
index afa7c25f4132..f5c1fe6d1c73 100644
--- a/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
@@ -5,7 +5,6 @@ exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
   <storybook-chips-group
     ng-reflect-chips="[object Object],[object Object"
   >
-    
     <storybook-chip
       class="chip"
       ng-reflect-display-text="Chip 1"
@@ -52,6 +51,7 @@ exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
     >
        Remove All 
     </div>
+    
   </storybook-chips-group>
 </storybook-wrapper>
 `;
@@ -61,7 +61,6 @@ exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overr
   <storybook-chips-group
     ng-reflect-chips="[object Object],[object Object"
   >
-    
     <storybook-chip
       class="chip"
       ng-reflect-display-text="Chip 1"
@@ -108,6 +107,7 @@ exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overr
     >
        Remove All 
     </div>
+    
   </storybook-chips-group>
 </storybook-wrapper>
 `;
diff --git a/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
index a066165183e8..b6daa0d1f2e1 100644
--- a/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
@@ -29,7 +29,6 @@ exports[`Storyshots Basics / NgModule / Module with multiple component Chips Gro
   <storybook-chips-group
     ng-reflect-chips="[object Object],[object Object"
   >
-    
     <storybook-chip
       class="chip"
       ng-reflect-display-text="Chip 1"
@@ -76,6 +75,7 @@ exports[`Storyshots Basics / NgModule / Module with multiple component Chips Gro
     >
        Remove All 
     </div>
+    
   </storybook-chips-group>
 </storybook-wrapper>
 `;
diff --git a/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
index 3a00a0a189e0..bdee6db3222c 100644
--- a/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     Custom Decorator 
     <div
-      style="margin: 3em"
+      style="margin: 3em;"
     >
       Child Template
     </div>
@@ -18,7 +18,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     <child-component
       ng-reflect-child-text="Child text"
@@ -35,6 +35,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
        Private text: Child private text 
       <br />
     </child-component>
+    
   </div>
 </storybook-wrapper>
 `;
@@ -42,7 +43,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     <parent-component>
        Parent
@@ -55,7 +56,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
       </button>
       <br />
       <div
-        style="margin: 3em; border:solid;"
+        style="margin: 3em; border: solid;"
       >
         <child-component
           ng-reflect-child-text="Child text"
@@ -72,6 +73,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
            Private text: Child private text 
           <br />
         </child-component>
+        
       </div>
     </parent-component>
   </div>
@@ -81,7 +83,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     <parent-component>
        Parent
@@ -94,7 +96,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
       </button>
       <br />
       <div
-        style="margin: 3em; border:solid;"
+        style="margin: 3em; border: solid;"
       >
         <child-component
           ng-reflect-child-text="Child text"
@@ -111,6 +113,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
            Private text: Child private text 
           <br />
         </child-component>
+        
       </div>
     </parent-component>
   </div>
@@ -120,7 +123,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     <parent-component
       ng-reflect-parent-text="Parent text"
@@ -135,7 +138,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
       </button>
       <br />
       <div
-        style="margin: 3em; border:solid;"
+        style="margin: 3em; border: solid;"
       >
         <child-component
           ng-reflect-child-text="Child text"
@@ -152,6 +155,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
            Private text: Child private text 
           <br />
         </child-component>
+        
       </div>
     </parent-component>
   </div>
@@ -161,11 +165,11 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     Custom Decorator 
     <div
-      style="margin: 3em"
+      style="margin: 3em;"
     >
       Child Template
     </div>
@@ -176,7 +180,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom De
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     <child-component
       ng-reflect-child-text="Child text"
@@ -193,6 +197,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Co
        Private text: Child private text 
       <br />
     </child-component>
+    
   </div>
 </storybook-wrapper>
 `;
@@ -200,7 +205,7 @@ exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Co
 exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = `
 <storybook-wrapper>
   Grandparent<br /><div
-    style="margin: 3em; border:solid;"
+    style="margin: 3em; border: solid;"
   >
     Child Template
   </div>
diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
index cf0badba9c73..bbc4164fcb97 100644
--- a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
@@ -12,13 +12,13 @@ exports[`Storyshots Core / ModuleMetadata / In export default with decorator Sto
       Items:
     </p>
     <ul>
-      
       <li>
         Joe
       </li>
       <li>
         Jane
       </li>
+      
     </ul>
   </storybook-simple-token-component>
 </storybook-wrapper>
@@ -34,13 +34,13 @@ exports[`Storyshots Core / ModuleMetadata / In export default with decorator Sto
       Items:
     </p>
     <ul>
-      
       <li>
         Joe
       </li>
       <li>
         Jane
       </li>
+      
     </ul>
   </storybook-simple-token-component>
 </storybook-wrapper>
diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
index f872033bdd71..dd3a8cbb8707 100644
--- a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
@@ -12,13 +12,13 @@ exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = `
       Items:
     </p>
     <ul>
-      
       <li>
         Joe
       </li>
       <li>
         Jane
       </li>
+      
     </ul>
   </storybook-simple-token-component>
 </storybook-wrapper>
@@ -34,13 +34,13 @@ exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = `
       Items:
     </p>
     <ul>
-      
       <li>
         Jim
       </li>
       <li>
         Jill
       </li>
+      
     </ul>
   </storybook-simple-token-component>
 </storybook-wrapper>
diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
index b506f64d2bdb..7c2c8fb716c5 100644
--- a/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
@@ -12,13 +12,13 @@ exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with d
       Items:
     </p>
     <ul>
-      
       <li>
         Joe
       </li>
       <li>
         Jane
       </li>
+      
     </ul>
   </storybook-simple-token-component>
 </storybook-wrapper>
diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
index 3a7f55044ab0..a277673e9a47 100644
--- a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
@@ -3,13 +3,13 @@
 exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c13=""
+    _nghost-a-c43=""
     ng-reflect-text="Parameters are {
     \\"docs\\": {
    "
   >
     <button
-      _ngcontent-a-c13=""
+      _ngcontent-a-c43=""
     >
       Parameters are {
     "docs": {
diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
index 1cbb51b7d9de..0fb2951abf77 100644
--- a/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c16=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c16=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
 exports[`Storyshots Core / Parameters / Layout Default 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c14=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c14=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
@@ -36,16 +36,17 @@ exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
     style="background-color: yellow;"
   >
     <storybook-button-component
-      _nghost-a-c15=""
+      _nghost-a-c43=""
       ng-reflect-text="Button"
       text="Button"
     >
       <button
-        _ngcontent-a-c15=""
+        _ngcontent-a-c43=""
       >
         Button
       </button>
     </storybook-button-component>
+    
   </div>
 </storybook-wrapper>
 `;
@@ -53,11 +54,11 @@ exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
 exports[`Storyshots Core / Parameters / Layout None 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c18=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c18=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
@@ -68,11 +69,11 @@ exports[`Storyshots Core / Parameters / Layout None 1`] = `
 exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c17=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c17=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
diff --git a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
index deef1154ad87..7307da48a797 100644
--- a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
@@ -3,12 +3,12 @@
 exports[`Storyshots Core / Story host styles With Args 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c21=""
-    _nghost-a-c22=""
+    _ngcontent-a-c145=""
+    _nghost-a-c43=""
     ng-reflect-text="Button with custom styles"
   >
     <button
-      _ngcontent-a-c22=""
+      _ngcontent-a-c43=""
     >
       Button with custom styles
     </button>
@@ -19,12 +19,12 @@ exports[`Storyshots Core / Story host styles With Args 1`] = `
 exports[`Storyshots Core / Story host styles With story template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c19=""
-    _nghost-a-c20=""
+    _ngcontent-a-c144=""
+    _nghost-a-c43=""
     ng-reflect-text="Button with custom styles"
   >
     <button
-      _ngcontent-a-c20=""
+      _ngcontent-a-c43=""
     >
       Button with custom styles
     </button>
diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
index dc24c553667b..2537d54e03d9 100644
--- a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
+++ b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Legacy / Component in Story Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c23=""
+    _nghost-a-c43=""
     ng-reflect-text="Hello Button"
   >
     <button
-      _ngcontent-a-c23=""
+      _ngcontent-a-c43=""
     >
       Hello Button
     </button>
diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot
index 5ed0635b6435..f50d0e650752 100644
--- a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot
+++ b/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot
@@ -3,20 +3,20 @@
 exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c1=""
+    _nghost-a-c43=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c1=""
+      _ngcontent-a-c43=""
     >
       😀 😎 👍 💯
     </button>
   </storybook-button-component><storybook-button-component
-    _nghost-a-c1=""
+    _nghost-a-c43=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c1=""
+      _ngcontent-a-c43=""
     >
       😀 😎 👍 💯
     </button>
@@ -27,11 +27,11 @@ exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = `
 exports[`Storyshots Legacy / Story with storiesOf() with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c0=""
+    _nghost-a-c43=""
     ng-reflect-text="Hello Button"
   >
     <button
-      _ngcontent-a-c0=""
+      _ngcontent-a-c43=""
     >
       Hello Button
     </button>
diff --git a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
index 25f4de0b77c4..f0385ce26727 100644
--- a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c24=""
+    _nghost-a-c43=""
     ng-reflect-text="Unknown component"
   >
     <button
-      _ngcontent-a-c24=""
+      _ngcontent-a-c43=""
     >
       Unknown component
     </button>
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 7572355654d6..7fc19bbd1597 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
     "build-storybook": "build-storybook -s public",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9010 -s public",
+    "storybook": "start-storybook -p 9010 -s public --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.4.0-alpha.9",
+    "@storybook/client-logger": "6.4.0-alpha.17",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "react": "16.14.0",
@@ -21,18 +21,18 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-jest": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-jest": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index ce9b35f79e54..5c3c3dafc7ca 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,13 +1,13 @@
 {
   "name": "cra-react15",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
     "build-storybook": "build-storybook -s public",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
@@ -18,13 +18,13 @@
     "react-scripts": "3.4.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "babel-core": "6",
     "babel-runtime": "6",
     "webpack": "4"
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index 73728016eb26..15f26071c95e 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
     "build-storybook": "build-storybook -s public",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -34,11 +34,11 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
+    "@storybook/addon-essentials": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-alpha.9",
+    "@storybook/react": "6.4.0-alpha.17",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 28ab0e8fd83e..ea8a2a35bff8 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
     "build-storybook": "build-storybook -s public",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s public --no-manager-cache",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -34,14 +34,14 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.4.0-alpha.9",
+    "@storybook/react": "6.4.0-alpha.17",
     "@types/enzyme": "^3.10.8",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.9.1",
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 4de637ab0723..124acdbc6f92 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,12 +1,12 @@
 {
   "name": "ember-example",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "ember build --output-path ember-output",
     "build-storybook": "yarn storybook-prebuild && build-storybook -s ember-output",
     "dev": "ember serve",
-    "storybook": "yarn build && start-storybook -p 9009 -s ember-output",
+    "storybook": "yarn build && start-storybook -p 9009 -s ember-output --no-manager-cache",
     "storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
     "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
   },
@@ -17,18 +17,18 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@ember/optional-features": "^2.0.0",
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/ember": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/ember": "6.4.0-alpha.17",
     "@storybook/ember-cli-storybook": "^0.2.1",
-    "@storybook/source-loader": "6.4.0-alpha.9",
+    "@storybook/source-loader": "6.4.0-alpha.17",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^7.0.3",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index fda00b403440..9661ff3f92bb 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "description": "",
   "keywords": [],
@@ -10,26 +10,26 @@
   "scripts": {
     "build-storybook": "build-storybook",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
-    "storybook": "start-storybook -p 9006"
+    "storybook": "start-storybook -p 9006 --no-manager-cache"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-jest": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-jest": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/core": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/html": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/core": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/html": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
     "autoprefixer": "^10.0.1",
     "eventemitter3": "^4.0.7",
     "format-json": "^1.0.3",
diff --git a/examples/official-storybook/components/addon-measure/ShadowRoot.js b/examples/official-storybook/components/addon-measure/ShadowRoot.js
new file mode 100644
index 000000000000..665257cf6d6d
--- /dev/null
+++ b/examples/official-storybook/components/addon-measure/ShadowRoot.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { drawSelectedElement } from '@storybook/addon-measure/dist/cjs/box-model/visualizer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { init, destroy } from '@storybook/addon-measure/dist/cjs/box-model/canvas';
+
+export const ShadowRoot = ({ label = 'Hello from shadow DOM', drawMode = 'ROOT' }) => {
+  const ref = React.useRef();
+
+  React.useEffect(() => {
+    if (!ref.current.attachShadow) return;
+
+    ref.current.attachShadow({ mode: 'open' });
+
+    ref.current.shadowRoot.innerHTML = `
+      <style>
+        button {
+          font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+          font-weight: 700;
+          border: 0;
+          border-radius: 3em;
+          cursor: pointer;
+          display: inline-block;
+          line-height: 1;
+          color: white;
+          background-color: tomato;
+          font-size: 14px;
+          padding: 11px 20px;
+        }
+        button:hover {
+          text-decoration: underline;
+        }
+        button:focus {
+          box-shadow: inset 0 0 0 2px maroon;
+          outline: 0;
+        }
+        button:active {
+          background-color: firebrick;
+        }
+      </style>
+      <button>${label}</button>
+    `;
+
+    init();
+    drawSelectedElement(drawMode === 'ROOT' ? ref.current : ref.current.shadowRoot.children[1]);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      destroy();
+    };
+  }, []);
+
+  return <div ref={ref} />;
+};
+
+ShadowRoot.propTypes = {
+  label: PropTypes.string,
+  drawMode: PropTypes.oneOf(['ROOT', 'NESTED']),
+};
+
+ShadowRoot.defaultProps = {
+  label: 'Hello from shadow DOM',
+  drawMode: 'ROOT',
+};
diff --git a/examples/official-storybook/components/addon-measure/Visualization.js b/examples/official-storybook/components/addon-measure/Visualization.js
new file mode 100644
index 000000000000..bcd10d6a3d1b
--- /dev/null
+++ b/examples/official-storybook/components/addon-measure/Visualization.js
@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { drawSelectedElement } from '@storybook/addon-measure/dist/cjs/box-model/visualizer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { init, destroy } from '@storybook/addon-measure/dist/cjs/box-model/canvas';
+
+export const Visualization = ({ render }) => {
+  const element = useRef(null);
+
+  useEffect(() => {
+    if (element.current) {
+      init();
+      drawSelectedElement(element.current);
+    }
+
+    return () => {
+      destroy();
+    };
+  }, [element]);
+
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        padding: 64,
+      }}
+    >
+      {render(element)}
+    </div>
+  );
+};
+
+Visualization.propTypes = {
+  render: PropTypes.func.isRequired,
+};
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index d767a09ecad9..d042aecf7e31 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,33 +8,33 @@
     "do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
     "packtracker": "yarn storybook --smoke-test --webpack-stats-json /tmp --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=/tmp/manager-stats.json",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache",
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
     "@packtracker/webpack-plugin": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-jest": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots-puppeteer": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-toolbars": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/cli": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-jest": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots-puppeteer": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-toolbars": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/cli": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/design-system": "^5.4.7",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/user-event": "^13.1.9",
     "chromatic": "^5.6.0",
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index 73ade76f07e9..f56a80fe7b0e 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -222,7 +222,7 @@ export const globalTypes = {
         },
         previous: {
           label: 'Go to previous language',
-          keys: ['shift', 'L'],
+          keys: ['K'],
         },
         reset: {
           label: 'Reset language',
diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
index 7e88ab303f56..a64a24f19564 100644
--- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
@@ -16,3 +16,7 @@ WithArgs.args = { children: 'with args' };
 
 export const WithTemplate = WithArgs.bind({});
 WithTemplate.args = { children: 'with template' };
+
+export const StoryObject = {
+  render: Basic,
+};
diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx
index 0caf20c72f58..a551c18a0ff3 100644
--- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx
@@ -20,3 +20,7 @@ I can define a story with the function imported from CSF:
 <Canvas>
   <Story name="with template" story={Csf.WithTemplate} />
 </Canvas>
+
+<Canvas>
+  <Story name="story object" story={Csf.StoryObject} />
+</Canvas>
diff --git a/examples/official-storybook/stories/addon-measure/BoxModel.stories.js b/examples/official-storybook/stories/addon-measure/BoxModel.stories.js
new file mode 100644
index 000000000000..17876cde74b4
--- /dev/null
+++ b/examples/official-storybook/stories/addon-measure/BoxModel.stories.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import { Visualization } from '../../components/addon-measure/Visualization';
+
+export default {
+  title: 'Addons/Measure/BoxModel',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => <Visualization {...args} />;
+
+export const MarginUniform = Template.bind({});
+MarginUniform.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        width: 256,
+        height: 256,
+        margin: 16,
+        outline: '1px solid black',
+      }}
+    />
+  ),
+};
+
+export const MarginAsymmetric = Template.bind({});
+MarginAsymmetric.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        margin: '16px 32px 64px 8px',
+      }}
+    />
+  ),
+};
+
+export const PaddingUniform = Template.bind({});
+PaddingUniform.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        width: 256,
+        height: 256,
+        padding: 16,
+        outline: '1px solid black',
+      }}
+    />
+  ),
+};
+
+export const PaddingAsymmetric = Template.bind({});
+PaddingAsymmetric.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        padding: '16px 32px 64px 8px',
+      }}
+    />
+  ),
+};
+
+export const BorderUniform = Template.bind({});
+BorderUniform.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        border: '8px solid transparent',
+      }}
+    />
+  ),
+};
+
+export const BorderAsymmetric = Template.bind({});
+BorderAsymmetric.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        borderTop: '8px solid transparent',
+        borderRight: '16px solid transparent',
+        borderBottom: '32px solid transparent',
+        borderLeft: '12px solid transparent',
+      }}
+    />
+  ),
+};
+
+export const DecimalSizing = Template.bind({});
+DecimalSizing.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 250.100006103515625,
+        height: 250.100006103515625,
+      }}
+    />
+  ),
+};
diff --git a/examples/official-storybook/stories/addon-measure/Grid.stories.js b/examples/official-storybook/stories/addon-measure/Grid.stories.js
new file mode 100644
index 000000000000..f9849389bf6d
--- /dev/null
+++ b/examples/official-storybook/stories/addon-measure/Grid.stories.js
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default {
+  title: 'Addons/Measure/Grid',
+};
+
+const MeasureButton = () => (
+  <svg viewBox="0 0 1024 1024" width="1em" height="1em">
+    <path
+      stroke="#000"
+      d="M83 110c-22 0-40 18-40 40v176a40 40 0 0080 0v-49h778v49a40 40 0 0080 0V150a40 40 0 10-80 0v49H123v-49c0-22-18-40-40-40zm40 458v266h778V568h-63v115a40 40 0 11-80 0V568h-63v46a40 40 0 11-80 0v-46h-63v115a40 40 0 11-80 0V568h-63v46a40 40 0 11-80 0v-46h-63v115a40 40 0 11-80 0V568h-63zm103-80h691c36 0 64 28 64 64v298c0 36-28 64-64 64H107c-36 0-64-28-64-64V552c0-36 28-64 64-64h119z"
+    />
+  </svg>
+);
+
+export const Basic = () => (
+  <div>
+    <div
+      style={{
+        display: 'grid',
+        gridGap: 10,
+        gridTemplateColumns: 'repeat(6, 100px)',
+        gridTemplateRows: '100px 100px 100px',
+        gridAutoFlow: 'column',
+      }}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((id) => (
+        <div
+          key={id}
+          style={{
+            backgroundColor: id % 2 === 0 ? '#444' : '#ccc',
+            color: id % 2 === 0 ? '#fff' : '#000',
+            borderRadius: 5,
+            padding: 20,
+            fontSize: '150%',
+          }}
+        >
+          {id}
+        </div>
+      ))}
+    </div>
+    <p>
+      Click the <MeasureButton /> measure button in the toolbar to enable the addon
+    </p>
+  </div>
+);
diff --git a/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js b/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js
new file mode 100644
index 000000000000..eec397d9d8d7
--- /dev/null
+++ b/examples/official-storybook/stories/addon-measure/ShadowRoot.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { ShadowRoot } from '../../components/addon-measure/ShadowRoot';
+
+export default {
+  title: 'Addons/Measure/ShadowRoot',
+  component: ShadowRoot,
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      display: 'inline-block',
+      padding: 64,
+    }}
+  >
+    <ShadowRoot {...args} />
+  </div>
+);
+
+export const Root = Template.bind({});
+
+export const Nested = Template.bind({});
+Nested.args = {
+  drawMode: 'NESTED',
+};
diff --git a/examples/official-storybook/stories/addon-measure/SmallNode.stories.js b/examples/official-storybook/stories/addon-measure/SmallNode.stories.js
new file mode 100644
index 000000000000..6a38904f5d21
--- /dev/null
+++ b/examples/official-storybook/stories/addon-measure/SmallNode.stories.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Visualization } from '../../components/addon-measure/Visualization';
+
+export default {
+  title: 'Addons/Measure/SmallNode',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => <Visualization {...args} />;
+
+export const Everything30px = Template.bind({});
+Everything30px.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 30,
+        height: 30,
+        margin: 32,
+        padding: 16,
+        border: '2px solid transparent',
+      }}
+    />
+  ),
+};
+
+export const Short = Template.bind({});
+Short.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 100,
+        height: 30,
+        margin: 8,
+      }}
+    />
+  ),
+};
+
+export const Narrow = Template.bind({});
+Narrow.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 30,
+        height: 100,
+        margin: 8,
+      }}
+    />
+  ),
+};
+
+export const Tiny = Template.bind({});
+Tiny.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 20,
+        height: 20,
+        margin: 8,
+      }}
+    />
+  ),
+};
diff --git a/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js b/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js
new file mode 100644
index 000000000000..cd8197237dec
--- /dev/null
+++ b/examples/official-storybook/stories/addon-measure/StackingLabels.stories.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Visualization } from '../../components/addon-measure/Visualization';
+
+export default {
+  title: 'Addons/Measure/StackingLabels',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => <Visualization {...args} />;
+
+export const EverythingUniform = Template.bind({});
+EverythingUniform.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        border: '8px solid transparent',
+        padding: 16,
+        margin: 32,
+      }}
+    />
+  ),
+};
+
+export const Asymmetric = Template.bind({});
+Asymmetric.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        margin: '8px 16px 32px 64px',
+        padding: '64px 32px 16px 8px',
+        borderTop: '8px solid transparent',
+        borderRight: '16px solid transparent',
+        borderBottom: '32px solid transparent',
+        borderLeft: '12px solid transparent',
+      }}
+    />
+  ),
+};
+
+export const MoreAsymmetric = Template.bind({});
+MoreAsymmetric.args = {
+  render: (ref) => (
+    <div
+      ref={ref}
+      style={{
+        outline: '1px solid black',
+        width: 256,
+        height: 256,
+        margin: '0 0 32px 64px',
+        padding: '64px 32px 16px 0',
+        borderTop: '8px solid transparent',
+        borderRight: '16px solid transparent',
+        borderLeft: '12px solid transparent',
+      }}
+    />
+  ),
+};
diff --git a/examples/official-storybook/stories/addon-outline.stories.js b/examples/official-storybook/stories/addon-outline.stories.js
new file mode 100644
index 000000000000..714616c6ea3e
--- /dev/null
+++ b/examples/official-storybook/stories/addon-outline.stories.js
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default {
+  title: 'Addons/Outline',
+};
+
+const OutlineButton = () => (
+  <svg viewBox="0 0 1024 1024" width="1em" height="1em">
+    <path
+      stroke="#000"
+      d="M180.1 714.3V844h129.6v94.8h-180c-24.2 0-44-19.5-44.4-43.7V714.3h94.8zM619.3 844v94.8H404.7v-94.8h214.6zm319.4-129.6v180c0 24.2-19.5 44-43.7 44.4H714.3v-94.8H844V714.3h94.8zm0-309.6v214.6h-94.8V404.7h94.8zm-758.6 0v214.6H85.3V404.7h94.8zm331.9 34a73.2 73.2 0 110 146.4 73.2 73.2 0 010-146.3zM894.2 85.4c24.3 0 44 19.5 44.5 43.7V309.7h-94.8V180H714.3V85.3h180zm-584.5 0v94.8H180v129.6H85.3v-180c0-24.2 19.5-44 43.7-44.4H309.7zm309.6 0v94.8H404.7V85.3h214.6z"
+    />
+  </svg>
+);
+
+export const Basic = () => (
+  <div>
+    <div
+      style={{
+        display: 'grid',
+        gridGap: 10,
+        gridTemplateColumns: 'repeat(6, 100px)',
+        gridTemplateRows: '100px 100px 100px',
+        gridAutoFlow: 'column',
+      }}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((id) => (
+        <div
+          key={id}
+          style={{
+            backgroundColor: id % 2 === 0 ? '#444' : '#ccc',
+            color: id % 2 === 0 ? '#fff' : '#000',
+            borderRadius: 5,
+            padding: 20,
+            fontSize: '150%',
+          }}
+        >
+          {id}
+        </div>
+      ))}
+    </div>
+    <p>
+      Click the <OutlineButton /> outline button in the toolbar to toggle outlines
+    </p>
+  </div>
+);
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 20e4a92ce062..8da9960dc22f 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
     "build-storybook": "build-storybook -s public",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "start-storybook -p 9009 -s public"
+    "storybook": "start-storybook -p 9009 -s public --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-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/preact": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/preact": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
     "@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 41f2e882395f..91aa75744654 100644
--- a/examples/react-ts-webpack4/package.json
+++ b/examples/react-ts-webpack4/package.json
@@ -1,17 +1,17 @@
 {
   "name": "@storybook/example-react-ts-webpack4",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
     "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./"
+    "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-alpha.9",
-    "@storybook/addon-essentials": "6.4.0-alpha.9",
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
-    "@storybook/react": "6.4.0-alpha.9",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-essentials": "6.4.0-alpha.17",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
     "@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 3d753e731f45..04698cf4723a 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -1,18 +1,18 @@
 {
   "name": "@storybook/example-react-ts",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
     "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./"
+    "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-alpha.9",
-    "@storybook/addon-essentials": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/react": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-essentials": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
     "formik": "^2.2.9",
diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx
index 1ba866a24769..4cbc7d48faab 100644
--- a/examples/react-ts/src/AccountForm.stories.tsx
+++ b/examples/react-ts/src/AccountForm.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { AccountForm, AccountFormProps } from './AccountForm';
@@ -14,7 +14,7 @@ export default {
 // export const Standard = (args: AccountFormProps) => <AccountForm {...args} />;
 // Standard.args = { passwordVerification: false };
 
-export const Standard = {
+export const Standard: ComponentStory<typeof AccountForm> = {
   // render: (args: AccountFormProps) => <AccountForm {...args} />,
   args: { passwordVerification: false },
 };
@@ -51,7 +51,7 @@ export const StandardFailHover = {
   },
 };
 
-export const Verification = {
+export const Verification: ComponentStory<typeof AccountForm> = {
   args: { passwordVerification: true },
 };
 
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
index f193019b6672..4a48f9964ca5 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,13 +14,13 @@
     "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/server": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/server": "6.4.0-alpha.17",
     "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 3c98046db9b3..b839f38503ba 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,12 +1,13 @@
 {
   "name": "standalone-preview",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "storybook": "parcel ./storybook.html --port 1337"
   },
   "devDependencies": {
-    "@storybook/react": "6.4.0-alpha.9",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/react": "6.4.0-alpha.17",
     "parcel": "^1.12.4",
     "react": "16.14.0",
     "react-dom": "16.14.0"
diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html
index 302bfe485f64..834cd2e00ca0 100644
--- a/examples/standalone-preview/storybook.html
+++ b/examples/standalone-preview/storybook.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="docs-root"></div>
     <script src="./storybook.ts"></script>
     <div class="sb-errordisplay sb-wrapper">
       <div id="error-message" class="sb-heading"></div>
diff --git a/examples/standalone-preview/storybook.ts b/examples/standalone-preview/storybook.ts
index 6480e83e1f2d..b218ec5b6f50 100644
--- a/examples/standalone-preview/storybook.ts
+++ b/examples/standalone-preview/storybook.ts
@@ -1,5 +1,14 @@
-import { configure } from '@storybook/react';
+import { configure, addParameters } from '@storybook/react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
+
 import * as Comp1 from './stories/Component1.stories';
 import * as Comp2 from './stories/Component2.stories';
 
+addParameters({
+  docs: {
+    page: DocsPage,
+    container: DocsContainer,
+  },
+});
+
 configure(() => [Comp1, Comp2], module);
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index b76f26abc642..2ded8642a1c0 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,27 +1,27 @@
 {
   "name": "svelte-example",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
-    "storybook": "start-storybook -p 9009 -s public"
+    "storybook": "start-storybook -p 9009 -s public --no-manager-cache"
   },
   "dependencies": {
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/svelte": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/svelte": "6.4.0-alpha.17",
     "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 c06af321a871..ec1c793ca431 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-3-cli-example",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
     "build-storybook": "build-storybook",
     "serve": "vue-cli-service serve",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006 --no-manager-cache"
   },
   "dependencies": {
     "core-js": "^3.8.2",
@@ -14,11 +14,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-essentials": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/vue3": "6.4.0-alpha.9",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-essentials": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/vue3": "6.4.0-alpha.17",
     "@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 e631c786e0a3..ccffe647fc55 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-cli-example",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
     "build-storybook": "build-storybook",
     "serve": "vue-cli-service serve",
-    "storybook": "start-storybook -p 9009"
+    "storybook": "start-storybook -p 9009 --no-manager-cache"
   },
   "dependencies": {
     "core-js": "^3.8.2",
@@ -15,11 +15,11 @@
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-essentials": "6.4.0-alpha.9",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-essentials": "6.4.0-alpha.17",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/vue": "6.4.0-alpha.9",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/vue": "6.4.0-alpha.17",
     "@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/package.json b/examples/vue-kitchen-sink/package.json
index 489d46a73f04..b6be4f80dde8 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
     "build-storybook": "build-storybook -s public",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "start-storybook -p 9009 -s public"
+    "storybook": "start-storybook -p 9009 -s public --no-manager-cache"
   },
   "dependencies": {
     "vue": "^2.6.12",
@@ -14,18 +14,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-a11y": "6.4.0-alpha.9",
-    "@storybook/addon-actions": "6.4.0-alpha.9",
-    "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-    "@storybook/addon-controls": "6.4.0-alpha.9",
-    "@storybook/addon-docs": "6.4.0-alpha.9",
-    "@storybook/addon-links": "6.4.0-alpha.9",
-    "@storybook/addon-storyshots": "6.4.0-alpha.9",
-    "@storybook/addon-storysource": "6.4.0-alpha.9",
-    "@storybook/addon-viewport": "6.4.0-alpha.9",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/source-loader": "6.4.0-alpha.9",
-    "@storybook/vue": "6.4.0-alpha.9",
+    "@storybook/addon-a11y": "6.4.0-alpha.17",
+    "@storybook/addon-actions": "6.4.0-alpha.17",
+    "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+    "@storybook/addon-controls": "6.4.0-alpha.17",
+    "@storybook/addon-docs": "6.4.0-alpha.17",
+    "@storybook/addon-links": "6.4.0-alpha.17",
+    "@storybook/addon-storyshots": "6.4.0-alpha.17",
+    "@storybook/addon-storysource": "6.4.0-alpha.17",
+    "@storybook/addon-viewport": "6.4.0-alpha.17",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/source-loader": "6.4.0-alpha.17",
+    "@storybook/vue": "6.4.0-alpha.17",
     "@vue/babel-preset-jsx": "^1.2.4",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index 9dafb0ff412c..9fe1c969781c 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-alpha.9",
+  "version": "6.4.0-alpha.17",
   "private": true,
   "description": "",
   "keywords": [],
@@ -9,7 +9,7 @@
   "main": "index.js",
   "scripts": {
     "build-storybook": "build-storybook",
-    "storybook": "start-storybook -p 9006",
+    "storybook": "start-storybook -p 9006 --no-manager-cache",
     "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\""
   },
   "resolutions": {
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
index 487ab8f23c74..7b8797a0d714 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { SbButton } from './sb-button';
 
@@ -20,9 +21,9 @@ export default {
 const Template: Story<SbButton> = ({ primary, backgroundColor, size, label }) =>
   html`<sb-button
     ?primary="${primary}"
-    .size="${size}"
-    .label="${label}"
-    .backgroundColor="${backgroundColor}"
+    size="${ifDefined(size)}"
+    label="${ifDefined(label)}"
+    background-color="${ifDefined(backgroundColor)}"
   ></sb-button>`;
 
 export const Primary: Story<SbButton> = Template.bind({});
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.ts b/examples/web-components-kitchen-sink/src/components/sb-button.ts
index 1a81bf443132..0c4dd313d22e 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.ts
@@ -61,7 +61,7 @@ export class SbButton extends LitElement {
       label: { type: String, reflect: true },
       primary: { type: Boolean },
       size: { type: String },
-      backgroundColor: { type: String },
+      backgroundColor: { type: String, attribute: 'background-color' },
     };
   }
 
diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
new file mode 100644
index 000000000000..a183a182fd8a
--- /dev/null
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
@@ -0,0 +1,42 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { html } from 'lit-html';
+
+<Meta
+  title="Addons / Docs / Dynamic Source"
+  component="sb-button"
+  argTypes={{
+    size: { type: 'select', options: ['large', 'small'] },
+    label: { type: 'string' },
+    primary: { type: 'boolean' },
+    backgroundColor: { type: 'color', presetColors: ['white', 'transparent', 'blue'] },
+  }}
+/>
+
+# Dynamic Source
+
+Stories can use Dynamic Source to display the result of changes to controls.
+
+<Canvas withSource="open">
+  <Story
+    name="Button"
+    component="sb-button"
+    args={{
+      size: 'large',
+      label: 'Button',
+      primary: false,
+      backgroundColor: undefined,
+    }}
+  >
+    {(args) => html`
+      <sb-button
+        ?primary="${args.primary}"
+        .size="${args.size}"
+        .label="${args.label}"
+        .backgroundColor="${args.backgroundColor}"
+      >
+      </sb-button>
+    `}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Button" />
diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock
index 9159d6c7b784..af5006d4572b 100644
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
@@ -2084,14 +2084,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     axe-core: ^4.2.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2115,12 +2115,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -2147,12 +2147,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2174,12 +2174,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -2206,20 +2206,20 @@ __metadata:
     "@mdx-js/loader": ^1.6.22
     "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/builder-webpack4": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/builder-webpack4": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/csf-tools": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/postinstall": 6.4.0-alpha.7
-    "@storybook/source-loader": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/csf-tools": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/postinstall": 6.4.0-alpha.11
+    "@storybook/source-loader": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
     acorn-walk: ^7.2.0
@@ -2242,10 +2242,10 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    "@storybook/angular": 6.4.0-alpha.7
-    "@storybook/vue": 6.4.0-alpha.7
-    "@storybook/vue3": 6.4.0-alpha.7
-    "@storybook/web-components": 6.4.0-alpha.7
+    "@storybook/angular": 6.4.0-alpha.11
+    "@storybook/vue": 6.4.0-alpha.11
+    "@storybook/vue3": 6.4.0-alpha.11
+    "@storybook/web-components": 6.4.0-alpha.11
     lit: ^2.0.0-rc.1
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -2312,11 +2312,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.11
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -2340,10 +2340,10 @@ __metadata:
   resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@jest/transform": ^26.6.2
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -2413,13 +2413,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
-    "@storybook/source-loader": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
+    "@storybook/source-loader": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     estraverse: ^5.2.0
     loader-utils: ^2.0.0
@@ -2442,12 +2442,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -2468,12 +2468,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
@@ -2488,13 +2488,13 @@ __metadata:
   resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2538,20 +2538,20 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
+    "@storybook/ui": 6.4.0-alpha.11
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -2600,9 +2600,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -2624,11 +2624,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
@@ -2662,9 +2662,9 @@ __metadata:
   resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -2695,13 +2695,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/channel-postmessage": 6.4.0-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/channel-postmessage": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/ui": 6.4.0-alpha.11
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -2747,7 +2747,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-alpha.7
+    "@storybook/node-logger": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
     "@types/glob-base": ^0.3.0
     "@types/micromatch": ^4.0.1
@@ -2795,12 +2795,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/builder-webpack4": 6.4.0-alpha.7
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/csf-tools": 6.4.0-alpha.7
-    "@storybook/manager-webpack4": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
+    "@storybook/builder-webpack4": 6.4.0-alpha.11
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/csf-tools": 6.4.0-alpha.11
+    "@storybook/manager-webpack4": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10
     "@types/node-fetch": ^2.5.7
@@ -2829,8 +2829,8 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.7
-    "@storybook/manager-webpack5": 6.4.0-alpha.7
+    "@storybook/builder-webpack5": 6.4.0-alpha.11
+    "@storybook/manager-webpack5": 6.4.0-alpha.11
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2847,10 +2847,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-server": 6.4.0-alpha.7
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-server": 6.4.0-alpha.11
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.7
+    "@storybook/builder-webpack5": 6.4.0-alpha.11
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -2899,12 +2899,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-alpha.7
-    "@storybook/core-client": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
-    "@storybook/node-logger": 6.4.0-alpha.7
-    "@storybook/theming": 6.4.0-alpha.7
-    "@storybook/ui": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/core-client": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
+    "@storybook/node-logger": 6.4.0-alpha.11
+    "@storybook/theming": 6.4.0-alpha.11
+    "@storybook/ui": 6.4.0-alpha.11
     "@types/node": ^14.0.10
     "@types/webpack": ^4.41.26
     babel-loader: ^8.2.2
@@ -2967,7 +2967,7 @@ __metadata:
   resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -2998,8 +2998,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
     "@storybook/csf": 0.0.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -3021,7 +3021,7 @@ __metadata:
     "@emotion/core": ^10.1.1
     "@emotion/is-prop-valid": ^0.8.6
     "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.4.0-alpha.7
+    "@storybook/client-logger": 6.4.0-alpha.11
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
     emotion-theming: ^10.0.27
@@ -3041,15 +3041,15 @@ __metadata:
   resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A."
   dependencies:
     "@emotion/core": ^10.1.1
-    "@storybook/addons": 6.4.0-alpha.7
-    "@storybook/api": 6.4.0-alpha.7
-    "@storybook/channels": 6.4.0-alpha.7
-    "@storybook/client-logger": 6.4.0-alpha.7
-    "@storybook/components": 6.4.0-alpha.7
-    "@storybook/core-events": 6.4.0-alpha.7
-    "@storybook/router": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/api": 6.4.0-alpha.11
+    "@storybook/channels": 6.4.0-alpha.11
+    "@storybook/client-logger": 6.4.0-alpha.11
+    "@storybook/components": 6.4.0-alpha.11
+    "@storybook/core-events": 6.4.0-alpha.11
+    "@storybook/router": 6.4.0-alpha.11
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.7
+    "@storybook/theming": 6.4.0-alpha.11
     "@types/markdown-to-jsx": ^6.11.3
     copy-to-clipboard: ^3.3.1
     core-js: ^3.8.2
@@ -3082,10 +3082,10 @@ __metadata:
     "@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-alpha.7
-    "@storybook/client-api": 6.4.0-alpha.7
-    "@storybook/core": 6.4.0-alpha.7
-    "@storybook/core-common": 6.4.0-alpha.7
+    "@storybook/addons": 6.4.0-alpha.11
+    "@storybook/client-api": 6.4.0-alpha.11
+    "@storybook/core": 6.4.0-alpha.11
+    "@storybook/core-common": 6.4.0-alpha.11
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
diff --git a/jest.config.js b/jest.config.js
index 5f94e6a820ea..46dff93a777e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -47,6 +47,7 @@ module.exports = {
     '^.+\\.[jt]sx?$': '<rootDir>/scripts/utils/jest-transform-js.js',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
+  transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js'],
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
     '/node_modules/',
diff --git a/lerna.json b/lerna.json
index b6883c999d20..d2ea60145654 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "6.4.0-alpha.9"
+  "version": "6.4.0-alpha.17"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 87ac52632ff3..a185536ba494 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/addons",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/addons",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/addons",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,12 +40,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/router": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/router": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "regenerator-runtime": "^0.13.7"
@@ -57,6 +57,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/public_api.js"
 }
diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts
index dc1627b0f849..64356f936dd8 100644
--- a/lib/addons/src/types.ts
+++ b/lib/addons/src/types.ts
@@ -197,6 +197,14 @@ export interface BaseAnnotations<Args, StoryFnReturnType> {
    * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
    */
   decorators?: BaseDecorators<StoryFnReturnType>;
+  /**
+   * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
+   */
+  render?: (args: Args, context: StoryContext) => StoryFnReturnType;
+  /**
+   * Function that is executed after the story is rendered.
+   */
+  play?: Function;
 }
 
 export interface Annotations<Args, StoryFnReturnType>
@@ -228,6 +236,8 @@ export interface BaseMeta<ComponentType> {
    *
    * Stories can be organized in a nested structure using "/" as a separator.
    *
+   * Since CSF 3.0 this property is optional.
+   *
    * @example
    * export default {
    *   ...
@@ -236,7 +246,7 @@ export interface BaseMeta<ComponentType> {
    *
    * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
    */
-  title: string;
+  title?: string;
 
   /**
    * The primary component for your story.
@@ -263,11 +273,17 @@ export interface BaseMeta<ComponentType> {
   subcomponents?: Record<string, ComponentType>;
 }
 
-export interface BaseStory<Args, StoryFnReturnType> {
-  (args: Args, context: StoryContext): StoryFnReturnType;
-
+export type BaseStoryObject<Args, StoryFnReturnType> = {
   /**
    * Override the display name in the UI
    */
   storyName?: string;
-}
+};
+
+export type BaseStoryFn<Args, StoryFnReturnType> = {
+  (args: Args, context: StoryContext): StoryFnReturnType;
+} & BaseStoryObject<Args, StoryFnReturnType>;
+
+export type BaseStory<Args, StoryFnReturnType> =
+  | BaseStoryFn<Args, StoryFnReturnType>
+  | BaseStoryObject<Args, StoryFnReturnType>;
diff --git a/lib/api/package.json b/lib/api/package.json
index 6e0876af535f..240fb4932b07 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/api",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/api",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/api",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -39,13 +39,13 @@
   },
   "dependencies": {
     "@reach/router": "^1.3.4",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
-    "@storybook/router": "6.4.0-alpha.9",
+    "@storybook/router": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@types/reach__router": "^1.3.7",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -72,6 +72,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index 0b66e9694d2b..b80687f24f2c 100644
--- a/lib/api/src/modules/layout.ts
+++ b/lib/api/src/modules/layout.ts
@@ -156,14 +156,14 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
           if (singleStory) return { layout: state.layout };
 
           const { showPanel, isFullscreen } = state.layout;
-          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
-          const shouldToggleFullScreen = showPanel === false && value === false;
+          const showNav = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
+          const shouldToggleFullScreen = showPanel === false && showNav === false;
 
           return {
             layout: {
               ...state.layout,
-              showNav: value,
-              isFullscreen: shouldToggleFullScreen ? true : isFullscreen,
+              showNav,
+              isFullscreen: shouldToggleFullScreen ? true : !showNav && isFullscreen,
             },
           };
         },
diff --git a/lib/api/src/modules/refs.ts b/lib/api/src/modules/refs.ts
index 80d54adc2a7b..12d11de96fad 100644
--- a/lib/api/src/modules/refs.ts
+++ b/lib/api/src/modules/refs.ts
@@ -228,8 +228,15 @@ export const init: ModuleFn = ({ store, provider, singleStory }, { runCheck = tr
 
       updated[id] = { ...ref, ...data };
 
+      /* eslint-disable no-param-reassign */
+      const ordered = Object.keys(initialState).reduce((obj: any, key) => {
+        obj[key] = updated[key];
+        return obj;
+      }, {});
+      /* eslint-enable no-param-reassign */
+
       store.setState({
-        refs: updated,
+        refs: ordered,
       });
     },
   };
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index d20a7d3bb45d..d7569d6c06c3 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '6.4.0-alpha.9';
+export const version = '6.4.0-alpha.17';
diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json
index e07d8dcd0e8b..940c5c8304d2 100644
--- a/lib/builder-webpack4/package.json
+++ b/lib/builder-webpack4/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/builder-webpack4",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -61,20 +61,20 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/channel-postmessage": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/router": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/channel-postmessage": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/router": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-alpha.9",
-    "@storybook/ui": "6.4.0-alpha.9",
+    "@storybook/theming": "6.4.0-alpha.17",
+    "@storybook/ui": "6.4.0-alpha.17",
     "@types/node": "^14.0.10",
     "@types/webpack": "^4.41.26",
     "autoprefixer": "^9.8.6",
@@ -132,6 +132,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "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 f631598bfe23..d34bda094520 100644
--- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -138,7 +138,6 @@ export default async ({
       publicPath: '',
     },
     watchOptions: {
-      aggregateTimeout: 10,
       ignored: /node_modules/,
     },
     plugins: [
diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json
index e31ce38857b6..3939f5e5b9e1 100644
--- a/lib/builder-webpack5/package.json
+++ b/lib/builder-webpack5/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -60,19 +60,19 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/channel-postmessage": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/router": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/channel-postmessage": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/router": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@types/node": "^14.0.10",
     "babel-loader": "^8.2.2",
     "babel-plugin-macros": "^3.0.1",
@@ -118,6 +118,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack5/src/index.ts b/lib/builder-webpack5/src/index.ts
index c1639be842c1..cec11f62cfbe 100644
--- a/lib/builder-webpack5/src/index.ts
+++ b/lib/builder-webpack5/src/index.ts
@@ -129,14 +129,19 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
   const config = await getConfig(options);
 
   return new Promise((succeed, fail) => {
-    webpackInstance(config).run((error, stats) => {
+    const compiler = webpackInstance(config);
+
+    compiler.run((error, stats) => {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the preview');
         process.exitCode = 1;
 
         if (error) {
           logger.error(error.message);
-          return fail(error);
+
+          compiler.close(() => fail(error));
+
+          return;
         }
 
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
@@ -145,7 +150,9 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
           errors.forEach((e) => logger.error(e.message));
           warnings.forEach((e) => logger.error(e.message));
 
-          return fail(stats);
+          compiler.close(() => fail(stats));
+
+          return;
         }
       }
 
@@ -154,7 +161,15 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
         stats.toJson({ warnings: true }).warnings.forEach((e) => logger.warn(e.message));
       }
 
-      return succeed(stats);
+      // https://webpack.js.org/api/node/#run
+      // #15227
+      compiler.close((closeErr) => {
+        if (closeErr) {
+          return fail(closeErr);
+        }
+
+        return succeed(stats);
+      });
     });
   });
 };
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 2288cc4f9a4e..6a2b7618352e 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -136,7 +136,6 @@ export default async ({
       logging: 'error',
     },
     watchOptions: {
-      aggregateTimeout: 10,
       ignored: /node_modules/,
     },
     ignoreWarnings: [
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index c2e09dfb50a1..d75066396168 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/channel-postmessage",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/channel-postmessage",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,9 +40,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "qs": "^6.10.0",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 4a8a686a17a8..97bbad9c793c 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/channel-websocket",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/channel-websocket",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,7 +40,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.4.0-alpha.9",
+    "@storybook/channels": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "telejson": "^5.3.2"
@@ -48,6 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index afbccedb9a98..d1789ec552bd 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/channels",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/channels",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/channels",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json
index f13dbbfafff7..de72e372591b 100644
--- a/lib/cli-sb/package.json
+++ b/lib/cli-sb/package.json
@@ -1,11 +1,11 @@
 {
   "name": "sb",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/cli",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/cli",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -24,10 +24,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.4.0-alpha.9"
+    "@storybook/cli": "6.4.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde"
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73"
 }
diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json
index 584a30838857..ea21c306f73f 100644
--- a/lib/cli-storybook/package.json
+++ b/lib/cli-storybook/package.json
@@ -1,11 +1,11 @@
 {
   "name": "storybook",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/cli",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/cli",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -27,10 +27,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.4.0-alpha.9"
+    "@storybook/cli": "6.4.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde"
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73"
 }
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 2b899222139a..e3330f84e20a 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@storybook/cli",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
     "generator",
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/cli",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/cli",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -48,8 +48,8 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/codemod": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
     "boxen": "^4.2.0",
     "chalk": "^4.1.0",
@@ -74,7 +74,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-alpha.9",
+    "@storybook/client-api": "6.4.0-alpha.17",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
@@ -90,5 +90,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde"
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73"
 }
diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts
index 56c2a70ea466..052bb6fcd255 100644
--- a/lib/cli/src/js-package-manager/NPMProxy.ts
+++ b/lib/cli/src/js-package-manager/NPMProxy.ts
@@ -60,7 +60,7 @@ export class NPMProxy extends JsPackageManager {
         return parsedOutput;
       }
     } catch (e) {
-      throw new Error(`Unable to find versions of ${packageName} using yarn`);
+      throw new Error(`Unable to find versions of ${packageName} using npm`);
     }
   }
 }
diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json
index b9843b9df846..1d272bd6379e 100644
--- a/lib/cli/src/versions.json
+++ b/lib/cli/src/versions.json
@@ -1,57 +1,57 @@
 {
-  "@storybook/addon-a11y": "6.4.0-alpha.9",
-  "@storybook/addon-actions": "6.4.0-alpha.9",
-  "@storybook/addon-backgrounds": "6.4.0-alpha.9",
-  "@storybook/addon-controls": "6.4.0-alpha.9",
-  "@storybook/addon-docs": "6.4.0-alpha.9",
-  "@storybook/addon-essentials": "6.4.0-alpha.9",
-  "@storybook/addon-jest": "6.4.0-alpha.9",
-  "@storybook/addon-links": "6.4.0-alpha.9",
-  "@storybook/addon-storyshots": "6.4.0-alpha.9",
-  "@storybook/addon-storyshots-puppeteer": "6.4.0-alpha.9",
-  "@storybook/addon-storysource": "6.4.0-alpha.9",
-  "@storybook/addon-toolbars": "6.4.0-alpha.9",
-  "@storybook/addon-viewport": "6.4.0-alpha.9",
-  "@storybook/addons": "6.4.0-alpha.9",
-  "@storybook/angular": "6.4.0-alpha.9",
-  "@storybook/api": "6.4.0-alpha.9",
-  "@storybook/aurelia": "6.4.0-alpha.9",
-  "@storybook/builder-webpack4": "6.4.0-alpha.9",
-  "@storybook/builder-webpack5": "6.4.0-alpha.9",
-  "@storybook/channel-postmessage": "6.4.0-alpha.9",
-  "@storybook/channel-websocket": "6.4.0-alpha.9",
-  "@storybook/channels": "6.4.0-alpha.9",
-  "@storybook/cli": "6.4.0-alpha.9",
-  "@storybook/client-api": "6.4.0-alpha.9",
-  "@storybook/client-logger": "6.4.0-alpha.9",
-  "@storybook/codemod": "6.4.0-alpha.9",
-  "@storybook/components": "6.4.0-alpha.9",
-  "@storybook/core": "6.4.0-alpha.9",
-  "@storybook/core-client": "6.4.0-alpha.9",
-  "@storybook/core-common": "6.4.0-alpha.9",
-  "@storybook/core-events": "6.4.0-alpha.9",
-  "@storybook/core-server": "6.4.0-alpha.9",
-  "@storybook/csf-tools": "6.4.0-alpha.9",
-  "@storybook/ember": "6.4.0-alpha.9",
-  "@storybook/html": "6.4.0-alpha.9",
-  "@storybook/manager-webpack4": "6.4.0-alpha.9",
-  "@storybook/manager-webpack5": "6.4.0-alpha.9",
-  "@storybook/marionette": "6.4.0-alpha.9",
-  "@storybook/marko": "6.4.0-alpha.9",
-  "@storybook/mithril": "6.4.0-alpha.9",
-  "@storybook/node-logger": "6.4.0-alpha.9",
-  "@storybook/postinstall": "6.4.0-alpha.9",
-  "@storybook/preact": "6.4.0-alpha.9",
-  "@storybook/rax": "6.4.0-alpha.9",
-  "@storybook/react": "6.4.0-alpha.9",
-  "@storybook/riot": "6.4.0-alpha.9",
-  "@storybook/router": "6.4.0-alpha.9",
-  "@storybook/server": "6.4.0-alpha.9",
-  "@storybook/source-loader": "6.4.0-alpha.9",
-  "@storybook/svelte": "6.4.0-alpha.9",
-  "@storybook/theming": "6.4.0-alpha.9",
-  "@storybook/ui": "6.4.0-alpha.9",
-  "@storybook/vue": "6.4.0-alpha.9",
-  "@storybook/vue3": "6.4.0-alpha.9",
-  "@storybook/web-components": "6.4.0-alpha.9"
+  "@storybook/addon-a11y": "6.4.0-alpha.17",
+  "@storybook/addon-actions": "6.4.0-alpha.17",
+  "@storybook/addon-backgrounds": "6.4.0-alpha.17",
+  "@storybook/addon-controls": "6.4.0-alpha.17",
+  "@storybook/addon-docs": "6.4.0-alpha.17",
+  "@storybook/addon-essentials": "6.4.0-alpha.17",
+  "@storybook/addon-jest": "6.4.0-alpha.17",
+  "@storybook/addon-links": "6.4.0-alpha.17",
+  "@storybook/addon-storyshots": "6.4.0-alpha.17",
+  "@storybook/addon-storyshots-puppeteer": "6.4.0-alpha.17",
+  "@storybook/addon-storysource": "6.4.0-alpha.17",
+  "@storybook/addon-toolbars": "6.4.0-alpha.17",
+  "@storybook/addon-viewport": "6.4.0-alpha.17",
+  "@storybook/addons": "6.4.0-alpha.17",
+  "@storybook/angular": "6.4.0-alpha.17",
+  "@storybook/api": "6.4.0-alpha.17",
+  "@storybook/aurelia": "6.4.0-alpha.17",
+  "@storybook/builder-webpack4": "6.4.0-alpha.17",
+  "@storybook/builder-webpack5": "6.4.0-alpha.17",
+  "@storybook/channel-postmessage": "6.4.0-alpha.17",
+  "@storybook/channel-websocket": "6.4.0-alpha.17",
+  "@storybook/channels": "6.4.0-alpha.17",
+  "@storybook/cli": "6.4.0-alpha.17",
+  "@storybook/client-api": "6.4.0-alpha.17",
+  "@storybook/client-logger": "6.4.0-alpha.17",
+  "@storybook/codemod": "6.4.0-alpha.17",
+  "@storybook/components": "6.4.0-alpha.17",
+  "@storybook/core": "6.4.0-alpha.17",
+  "@storybook/core-client": "6.4.0-alpha.17",
+  "@storybook/core-common": "6.4.0-alpha.17",
+  "@storybook/core-events": "6.4.0-alpha.17",
+  "@storybook/core-server": "6.4.0-alpha.17",
+  "@storybook/csf-tools": "6.4.0-alpha.17",
+  "@storybook/ember": "6.4.0-alpha.17",
+  "@storybook/html": "6.4.0-alpha.17",
+  "@storybook/manager-webpack4": "6.4.0-alpha.17",
+  "@storybook/manager-webpack5": "6.4.0-alpha.17",
+  "@storybook/marionette": "6.4.0-alpha.17",
+  "@storybook/marko": "6.4.0-alpha.17",
+  "@storybook/mithril": "6.4.0-alpha.17",
+  "@storybook/node-logger": "6.4.0-alpha.17",
+  "@storybook/postinstall": "6.4.0-alpha.17",
+  "@storybook/preact": "6.4.0-alpha.17",
+  "@storybook/rax": "6.4.0-alpha.17",
+  "@storybook/react": "6.4.0-alpha.17",
+  "@storybook/riot": "6.4.0-alpha.17",
+  "@storybook/router": "6.4.0-alpha.17",
+  "@storybook/server": "6.4.0-alpha.17",
+  "@storybook/source-loader": "6.4.0-alpha.17",
+  "@storybook/svelte": "6.4.0-alpha.17",
+  "@storybook/theming": "6.4.0-alpha.17",
+  "@storybook/ui": "6.4.0-alpha.17",
+  "@storybook/vue": "6.4.0-alpha.17",
+  "@storybook/vue3": "6.4.0-alpha.17",
+  "@storybook/web-components": "6.4.0-alpha.17"
 }
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 41b716b7dac9..407cc68a994b 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/client-api",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/client-api",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/client-api",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,11 +40,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/channel-postmessage": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/channel-postmessage": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
     "@types/qs": "^6.9.5",
     "@types/webpack-env": "^1.16.0",
@@ -66,6 +66,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/client-api/src/inferControls.test.ts b/lib/client-api/src/inferControls.test.ts
index 5b33d095a4a5..1905431fc6a1 100644
--- a/lib/client-api/src/inferControls.test.ts
+++ b/lib/client-api/src/inferControls.test.ts
@@ -31,7 +31,7 @@ describe('inferControls', () => {
       warnSpy.mockRestore();
     });
 
-    it('should return color type when matching color', () => {
+    it('should return color type when using color matcher', () => {
       // passing a string, should return control type color
       const inferredControls = inferControls(
         getStoryContext({
@@ -39,7 +39,6 @@ describe('inferControls', () => {
             background: {
               type: {
                 name: 'string',
-                value: 'red',
               },
               name: 'background',
             },
@@ -55,31 +54,42 @@ describe('inferControls', () => {
       expect(inferredControls.background.control.type).toEqual('color');
     });
 
-    it('should return inferred type when matches color but arg is not a string', () => {
-      // passing an object which is unsupported, should infer the type to object
-      const inferredControls = inferControls(
-        getStoryContext({
-          argTypes: {
-            background: {
-              type: {
-                name: 'object',
-                value: {
-                  rgb: [255, 255, 0],
-                },
-              },
-              name: 'background',
+    it('should return inferred type when using color matcher but arg passed is not a string', () => {
+      const sampleTypes = [
+        {
+          name: 'object',
+          value: {
+            rgb: {
+              name: 'number',
             },
           },
-          controls: {
-            matchers: {
-              color: /background/,
+        },
+        { name: 'number' },
+        { name: 'boolean' },
+      ];
+
+      sampleTypes.forEach((type) => {
+        const inferredControls = inferControls(
+          getStoryContext({
+            argTypes: {
+              background: {
+                // passing an object which is unsupported
+                // should ignore color control and infer the type instead
+                type,
+                name: 'background',
+              },
             },
-          },
-        })
-      );
+            controls: {
+              matchers: {
+                color: /background/,
+              },
+            },
+          })
+        );
 
-      expect(warnSpy).toHaveBeenCalled();
-      expect(inferredControls.background.control.type).toEqual('object');
+        expect(warnSpy).toHaveBeenCalled();
+        expect(inferredControls.background.control.type).toEqual(type.name);
+      });
     });
   });
 
diff --git a/lib/client-api/src/inferControls.ts b/lib/client-api/src/inferControls.ts
index 5097082ae5c2..85439860763d 100644
--- a/lib/client-api/src/inferControls.ts
+++ b/lib/client-api/src/inferControls.ts
@@ -19,7 +19,8 @@ const inferControl = (argType: ArgType, name: string, matchers: ControlsMatchers
 
   // args that end with background or color e.g. iconColor
   if (matchers.color && matchers.color.test(name)) {
-    const controlType = typeof argType.type.value;
+    const controlType = argType.type.name;
+
     if (controlType === 'string') {
       return { control: { type: 'color' } };
     }
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index c855ddf97794..5a74f7e277ca 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/client-logger",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/client-logger",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/client-logger",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -46,6 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 42665042875a..c04b02cb3c51 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/codemod",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/codemod",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/codemod",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -44,8 +44,8 @@
     "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "0.0.1",
-    "@storybook/csf-tools": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/csf-tools": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
@@ -62,6 +62,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/package.json b/lib/components/package.json
index 34bb94081673..03ef1ad77229 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/components",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/components",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-alpha.9",
+    "@storybook/client-logger": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@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": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 18ca71e335c2..7bf50d6f4970 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -53,9 +53,24 @@ const SwatchLabels = styled.div({
   flexDirection: 'row',
 });
 
-const Swatch = styled.div({
+interface SwatchProps {
+  background: string;
+}
+
+const Swatch = styled.div<SwatchProps>(({ background }) => ({
+  position: 'relative',
   flex: 1,
-});
+
+  '&::before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background,
+    content: '""',
+  },
+}));
 
 const SwatchColors = styled.div(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
@@ -64,6 +79,9 @@ const SwatchColors = styled.div(({ theme }) => ({
   height: 50,
   marginBottom: 5,
   overflow: 'hidden',
+  backgroundColor: 'white',
+  backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  backgroundClip: 'padding-box'
 }));
 
 const SwatchSpecimen = styled.div({
@@ -122,15 +140,7 @@ interface ColorProps {
 }
 
 function renderSwatch(color: string, index: number) {
-  return (
-    <Swatch
-      key={`${color}-${index}`}
-      title={color}
-      style={{
-        background: color,
-      }}
-    />
-  );
+  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx
index 28b909dab08b..400faa837dee 100644
--- a/lib/components/src/controls/Boolean.tsx
+++ b/lib/components/src/controls/Boolean.tsx
@@ -70,8 +70,8 @@ const Label = styled.label(({ theme }) => ({
     },
   },
 
-  'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-    background: theme.background.bar,
+  'input:checked ~ span:first-of-type, input:not(:checked) ~ span:last-of-type': {
+    background: theme.background.app,
     boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
     color: theme.color.defaultText,
     padding: '7px 15px',
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index d616fe38f3a1..571dec7b298d 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/core-client",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,13 +40,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/channel-postmessage": "6.4.0-alpha.9",
-    "@storybook/client-api": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/channel-postmessage": "6.4.0-alpha.17",
+    "@storybook/client-api": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
-    "@storybook/ui": "6.4.0-alpha.9",
+    "@storybook/ui": "6.4.0-alpha.17",
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "core-js": "^3.8.2",
@@ -71,6 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index 7f9ec59d2dd6..8a4d541cd4e0 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/core-common",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -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-alpha.9",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
     "@types/glob-base": "^0.3.0",
     "@types/micromatch": "^4.0.1",
@@ -107,6 +107,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 6f74bfa1aa09..18254f717a2c 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/core-events",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core-events",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core-events",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -45,6 +45,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index fb697e30270c..f975c505884b 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/core-server",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,12 +40,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/builder-webpack4": "6.4.0-alpha.9",
-    "@storybook/core-client": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/csf-tools": "6.4.0-alpha.9",
-    "@storybook/manager-webpack4": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
+    "@storybook/builder-webpack4": "6.4.0-alpha.17",
+    "@storybook/core-client": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/csf-tools": "6.4.0-alpha.17",
+    "@storybook/manager-webpack4": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
     "@types/node": "^14.0.10",
     "@types/node-fetch": "^2.5.7",
@@ -75,15 +75,15 @@
     "webpack": "4"
   },
   "devDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-alpha.9",
+    "@storybook/builder-webpack5": "6.4.0-alpha.17",
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/serve-favicon": "^2.5.2",
     "jest-specific-snapshot": "^4.0.0"
   },
   "peerDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-alpha.9",
-    "@storybook/manager-webpack5": "6.4.0-alpha.9",
+    "@storybook/builder-webpack5": "6.4.0-alpha.17",
+    "@storybook/manager-webpack5": "6.4.0-alpha.17",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
@@ -101,6 +101,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev
index 6d1675fafebf..e655ab5e5c96 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev
@@ -10,8 +10,8 @@ Object {
     "ROOT/addons/actions/dist/esm/register.js",
     "ROOT/addons/backgrounds/dist/esm/register.js",
     "ROOT/addons/toolbars/dist/esm/register.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/manager.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/register.js",
+    "ROOT/addons/measure/dist/esm/register.js",
+    "ROOT/addons/outline/dist/esm/register.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod
index dbd4ef203a4f..3960607da817 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod
@@ -10,8 +10,8 @@ Object {
     "ROOT/addons/actions/dist/esm/register.js",
     "ROOT/addons/backgrounds/dist/esm/register.js",
     "ROOT/addons/toolbars/dist/esm/register.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/manager.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/register.js",
+    "ROOT/addons/measure/dist/esm/register.js",
+    "ROOT/addons/outline/dist/esm/register.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev
index ac827919e2e1..be400084b96b 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev
@@ -12,8 +12,8 @@ Object {
     "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js",
     "ROOT/examples/cra-ts-essentials/.storybook/generated-stories-entry.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod
index 8cfaedb816ac..c561f897abfa 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod
@@ -12,8 +12,8 @@ Object {
     "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js",
     "ROOT/examples/cra-ts-essentials/.storybook/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev
index 17951ae9d7e6..be6c5b62a0d3 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev
@@ -12,8 +12,8 @@ Object {
     "ROOT/addons/backgrounds/dist/esm/register.js",
     "ROOT/addons/viewport/dist/esm/register.js",
     "ROOT/addons/toolbars/dist/esm/register.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/manager.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/register.js",
+    "ROOT/addons/measure/dist/esm/register.js",
+    "ROOT/addons/outline/dist/esm/register.js",
   ],
   "keys": Array [
     "name",
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 3a89864bb6da..b86aeecbfb37 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
@@ -12,8 +12,8 @@ Object {
     "ROOT/addons/backgrounds/dist/esm/register.js",
     "ROOT/addons/viewport/dist/esm/register.js",
     "ROOT/addons/toolbars/dist/esm/register.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/manager.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/register.js",
+    "ROOT/addons/measure/dist/esm/register.js",
+    "ROOT/addons/outline/dist/esm/register.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev
index 560d85af0896..69659043a13f 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev
@@ -13,8 +13,8 @@ Object {
     "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/generated-stories-entry.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod
index 507999a583af..e49eaefc4796 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod
@@ -13,8 +13,8 @@ Object {
     "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js",
-    "NODE_MODULES/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js",
-    "NODE_MODULES/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-other-entry.js",
+    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/generated-stories-entry.js",
   ],
diff --git a/lib/core/package.json b/lib/core/package.json
index 1753deca2d6c..0f3966dc6396 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/core",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -40,11 +40,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core-client": "6.4.0-alpha.9",
-    "@storybook/core-server": "6.4.0-alpha.9"
+    "@storybook/core-client": "6.4.0-alpha.17",
+    "@storybook/core-server": "6.4.0-alpha.17"
   },
   "peerDependencies": {
-    "@storybook/builder-webpack5": "6.4.0-alpha.9",
+    "@storybook/builder-webpack5": "6.4.0-alpha.17",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json
index fa7a596e1550..d8046cf2a0bb 100644
--- a/lib/csf-tools/package.json
+++ b/lib/csf-tools/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/csf-tools",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/csf-tools",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -64,6 +64,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
index 0e37a7577cb3..0061bbd408d7 100644
--- a/lib/manager-webpack4/package.json
+++ b/lib/manager-webpack4/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/manager-webpack4",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -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-alpha.9",
-    "@storybook/core-client": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
-    "@storybook/ui": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core-client": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
+    "@storybook/ui": "6.4.0-alpha.17",
     "@types/node": "^14.0.10",
     "@types/webpack": "^4.41.26",
     "babel-loader": "^8.2.2",
@@ -99,6 +99,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack4/src/manager-webpack.config.ts b/lib/manager-webpack4/src/manager-webpack.config.ts
index 3daa89cb9df0..7bdd2b4d0958 100644
--- a/lib/manager-webpack4/src/manager-webpack.config.ts
+++ b/lib/manager-webpack4/src/manager-webpack.config.ts
@@ -68,7 +68,6 @@ export default async ({
       publicPath: '',
     },
     watchOptions: {
-      aggregateTimeout: 2000,
       ignored: /node_modules/,
     },
     plugins: [
diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
index 031bf2703806..e7a747a224ce 100644
--- a/lib/manager-webpack5/package.json
+++ b/lib/manager-webpack5/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/manager-webpack5",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/core",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/core",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -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-alpha.9",
-    "@storybook/core-client": "6.4.0-alpha.9",
-    "@storybook/core-common": "6.4.0-alpha.9",
-    "@storybook/node-logger": "6.4.0-alpha.9",
-    "@storybook/theming": "6.4.0-alpha.9",
-    "@storybook/ui": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/core-client": "6.4.0-alpha.17",
+    "@storybook/core-common": "6.4.0-alpha.17",
+    "@storybook/node-logger": "6.4.0-alpha.17",
+    "@storybook/theming": "6.4.0-alpha.17",
+    "@storybook/ui": "6.4.0-alpha.17",
     "@types/node": "^14.0.10",
     "babel-loader": "^8.2.2",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -97,6 +97,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack5/src/manager-webpack.config.ts b/lib/manager-webpack5/src/manager-webpack.config.ts
index 376e42930c68..da4368fa1293 100644
--- a/lib/manager-webpack5/src/manager-webpack.config.ts
+++ b/lib/manager-webpack5/src/manager-webpack.config.ts
@@ -68,7 +68,6 @@ export default async ({
       publicPath: '',
     },
     watchOptions: {
-      aggregateTimeout: 2000,
       ignored: /node_modules/,
     },
     plugins: [
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 300d1feb68cf..e2a16de1f2de 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/node-logger",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/node-logger",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/node-logger",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -52,6 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index df2f2a8ed968..06e4d9c1e655 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@storybook/postinstall",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/postinstall",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/postinstall",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/router/package.json b/lib/router/package.json
index a4d6cf994da5..a2e64f6baea7 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/router",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/router",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/router",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@reach/router": "^1.3.4",
-    "@storybook/client-logger": "6.4.0-alpha.9",
+    "@storybook/client-logger": "6.4.0-alpha.17",
     "@types/reach__router": "^1.3.7",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -58,6 +58,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 359e09c3f3b4..927f111206e6 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@storybook/source-loader",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Source loader",
   "keywords": [
     "lib",
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/source-loader",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/source-loader",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,8 +41,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
     "@storybook/csf": "0.0.1",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
@@ -59,6 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/theming/package.json b/lib/theming/package.json
index c00fc1bd51b1..a976642ef1a7 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/theming",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/theming",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/theming",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -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-alpha.9",
+    "@storybook/client-logger": "6.4.0-alpha.17",
     "core-js": "^3.8.2",
     "deep-object-diff": "^1.1.0",
     "emotion-theming": "^10.0.27",
@@ -60,6 +60,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/ui/README.md b/lib/ui/README.md
index c67276635788..9fff22f3c9fa 100644
--- a/lib/ui/README.md
+++ b/lib/ui/README.md
@@ -1,4 +1,4 @@
-# Storybook UI
+<h1>Storybook UI</h1>
 
 Storybook UI the core UI of [storybook](https://storybook.js.org).
 It's a React based UI which you can initialize with a function.
@@ -6,6 +6,7 @@ You can configure it by providing a provider API.
 
 ## Table of Contents
 
+- [Table of Contents](#table-of-contents)
 - [Usage](#usage)
 - [API](#api)
   - [.setOptions()](#setoptions)
@@ -20,6 +21,7 @@ You can configure it by providing a provider API.
   - [Core API](#core-api)
   - [Keyboard Shortcuts](#keyboard-shortcuts)
   - [URL Changes](#url-changes)
+  - [Story Order](#story-order)
 
 ## Usage
 
@@ -74,7 +76,7 @@ class ReactProvider extends Provider {
   handleAPI(api) {
     api.setOptions({
       // see available options in
-      // https://github.com/storybookjs/storybook/tree/main/addons/options#getting-started
+      // https://storybook.js.org/docs/react/configure/features-and-behavior
     });
   }
 }
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 5e88d8d9d546..3389b2453a66 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@storybook/ui",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/ui",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/ui",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -41,15 +41,15 @@
   },
   "dependencies": {
     "@emotion/core": "^10.1.1",
-    "@storybook/addons": "6.4.0-alpha.9",
-    "@storybook/api": "6.4.0-alpha.9",
-    "@storybook/channels": "6.4.0-alpha.9",
-    "@storybook/client-logger": "6.4.0-alpha.9",
-    "@storybook/components": "6.4.0-alpha.9",
-    "@storybook/core-events": "6.4.0-alpha.9",
-    "@storybook/router": "6.4.0-alpha.9",
+    "@storybook/addons": "6.4.0-alpha.17",
+    "@storybook/api": "6.4.0-alpha.17",
+    "@storybook/channels": "6.4.0-alpha.17",
+    "@storybook/client-logger": "6.4.0-alpha.17",
+    "@storybook/components": "6.4.0-alpha.17",
+    "@storybook/core-events": "6.4.0-alpha.17",
+    "@storybook/router": "6.4.0-alpha.17",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.4.0-alpha.9",
+    "@storybook/theming": "6.4.0-alpha.17",
     "@types/markdown-to-jsx": "^6.11.3",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.8.2",
@@ -87,6 +87,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9b9f9484bfe3cb9f259c26bc71e7635362addde",
+  "gitHead": "3afa39c64e2efe01e567ce8946e80586d77a8b73",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx
index a2b91d8c0f0c..411baf5fd94f 100644
--- a/lib/ui/src/components/preview/tools/menu.tsx
+++ b/lib/ui/src/components/preview/tools/menu.tsx
@@ -5,7 +5,7 @@ import { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,
-  toggle: api.toggleNav,
+  toggle: () => api.toggleNav(),
 });
 
 export const menuTool: Addon = {
@@ -13,24 +13,17 @@ export const menuTool: Addon = {
   id: 'menu',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
-    <>
-      <Consumer filter={menuMapper}>
-        {({ isVisible, toggle }) =>
-          !isVisible && (
-            <>
-              <IconButton
-                aria-label="Show sidebar"
-                key="menu"
-                onClick={toggle as any}
-                title="Show sidebar"
-              >
-                <Icons icon="menu" />
-              </IconButton>
-              <Separator />
-            </>
-          )
-        }
-      </Consumer>
-    </>
+    <Consumer filter={menuMapper}>
+      {({ isVisible, toggle }) =>
+        !isVisible && (
+          <>
+            <IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar">
+              <Icons icon="menu" />
+            </IconButton>
+            <Separator />
+          </>
+        )
+      }
+    </Consumer>
   ),
 };
diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx
index 63d8d4231465..f4d06282b8b1 100644
--- a/lib/ui/src/components/sidebar/Search.tsx
+++ b/lib/ui/src/components/sidebar/Search.tsx
@@ -87,7 +87,7 @@ const Input = styled.input(({ theme }) => ({
   '&:focus, &:active': {
     outline: 0,
     borderColor: theme.color.secondary,
-    background: theme.input.background,
+    background: theme.background.app,
   },
   '&::placeholder': {
     color: theme.textMutedColor,
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 9df82a860634..ec2b0c6b2c51 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -39,10 +39,10 @@ export const Action = styled.button(({ theme }) => ({
       : transparentize(0.6, theme.color.defaultText),
 
   '&:hover': {
-    color: theme.barSelectedColor,
+    color: theme.color.secondary,
   },
   '&:focus': {
-    color: theme.barSelectedColor,
+    color: theme.color.secondary,
     borderColor: theme.color.secondary,
 
     '&:not(:focus-visible)': {
diff --git a/nx.json b/nx.json
index 9a1ce03f2742..e3dd0270bdff 100644
--- a/nx.json
+++ b/nx.json
@@ -43,6 +43,12 @@
     "@storybook/addon-links": {
       "implicitDependencies": []
     },
+    "@storybook/addon-measure": {
+      "implicitDependencies": []
+    },
+    "@storybook/addon-outline": {
+      "implicitDependencies": []
+    },
     "@storybook/addon-storyshots": {
       "implicitDependencies": []
     },
diff --git a/package.json b/package.json
index 1dd0ef1512b6..37ee63111abf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "6.4.0-alpha.9",
+  "version": "6.4.0-alpha.17",
   "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": [
@@ -134,6 +134,8 @@
     "@storybook/addon-essentials": "workspace:*",
     "@storybook/addon-jest": "workspace:*",
     "@storybook/addon-links": "workspace:*",
+    "@storybook/addon-measure": "workspace:*",
+    "@storybook/addon-outline": "workspace:*",
     "@storybook/addon-storyshots": "workspace:*",
     "@storybook/addon-storyshots-puppeteer": "workspace:*",
     "@storybook/addon-storysource": "workspace:*",
@@ -270,6 +272,42 @@
     "webpack-dev-middleware": "^3.7.3",
     "window-size": "^1.1.1"
   },
+  "dependenciesMeta": {
+    "@compodoc/compodoc": {
+      "built": false
+    },
+    "core-js": {
+      "built": false
+    },
+    "core-js-pure": {
+      "built": false
+    },
+    "ejs": {
+      "built": false
+    },
+    "level": {
+      "built": false
+    },
+    "node-uuid": {
+      "built": false,
+      "unplugged": false
+    },
+    "nodemon": {
+      "built": false
+    },
+    "parcel": {
+      "built": false
+    },
+    "preact": {
+      "built": false
+    },
+    "styled-components": {
+      "built": false
+    },
+    "yorkie": {
+      "built": false
+    }
+  },
   "optionalDependencies": {
     "@cypress/webpack-preprocessor": "^5.7.0",
     "cypress": "6.8.0",
@@ -323,41 +361,5 @@
         "Other"
       ]
     ]
-  },
-  "dependenciesMeta": {
-    "@compodoc/compodoc": {
-      "built": false
-    },
-    "core-js": {
-      "built": false
-    },
-    "core-js-pure": {
-      "built": false
-    },
-    "ejs": {
-      "built": false
-    },
-    "level": {
-      "built": false
-    },
-    "node-uuid": {
-      "built": false,
-      "unplugged": false
-    },
-    "nodemon": {
-      "built": false
-    },
-    "parcel": {
-      "built": false
-    },
-    "preact": {
-      "built": false
-    },
-    "styled-components": {
-      "built": false
-    },
-    "yorkie": {
-      "built": false
-    }
   }
 }
diff --git a/scripts/run-e2e.ts b/scripts/run-e2e.ts
index 1148b68e1682..ad69a4917573 100644
--- a/scripts/run-e2e.ts
+++ b/scripts/run-e2e.ts
@@ -53,10 +53,10 @@ const serveStorybook = async ({ cwd }: Options, port: string) => {
   return serve(staticDirectory, port);
 };
 
-const runCypress = async (location: string) => {
+const runCypress = async (location: string, name: string) => {
   const cypressCommand = openCypressInUIMode ? 'open' : 'run';
   await exec(
-    `yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,integrationFolder="cypress/generated" --env location="${location}"`,
+    `yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,defaultCommandTimeout=4000,integrationFolder="cypress/generated",videosFolder="/tmp/cypress-record/${name}" --env location="${location}"`,
     { cwd: rootDir },
     {
       startMessage: `🤖 Running Cypress tests`,
@@ -115,7 +115,7 @@ const runTests = async ({ name, ...rest }: Parameters) => {
   logger.log();
 
   try {
-    await runCypress('http://localhost:4000');
+    await runCypress('http://localhost:4000', name);
     logger.info(`🎉 Storybook is working great with ${name}!`);
   } catch (e) {
     logger.info(`🥺 Storybook has some issues with ${name}!`);
diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml
index 995aa3734305..6beeb4654648 100644
--- a/scripts/verdaccio.yaml
+++ b/scripts/verdaccio.yaml
@@ -59,10 +59,6 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
-  '@storybook/addon-measure':
-    access: $all
-    publish: $all
-    proxy: npmjs
 
   # storybook packages are NOT proxied to global registry
   # allowing us to republish any version during tests
diff --git a/workspace.json b/workspace.json
index 090f1bebdf32..d342fa8b56c0 100644
--- a/workspace.json
+++ b/workspace.json
@@ -33,6 +33,14 @@
       "root": "addons/links",
       "type": "library"
     },
+    "@storybook/addon-measure": {
+      "root": "addons/measure",
+      "type": "library"
+    },
+    "@storybook/addon-outline": {
+      "root": "addons/outline",
+      "type": "library"
+    },
     "@storybook/addon-storyshots": {
       "root": "addons/storyshots/storyshots-core",
       "type": "library"
diff --git a/yarn.lock b/yarn.lock
index 77cc761839f7..6ef2eaf5e25e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5526,18 +5526,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@6.4.0-alpha.9, @storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
+"@storybook/addon-a11y@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@testing-library/react": ^11.2.2
     "@types/webpack-env": ^1.16.0
     axe-core: ^4.2.0
@@ -5559,16 +5559,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@6.4.0-alpha.9, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/lodash": ^4.14.167
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -5593,16 +5593,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@6.4.0-alpha.9, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -5621,16 +5621,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@6.4.0-alpha.9, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -5644,7 +5644,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@6.4.0-alpha.9, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@6.4.0-alpha.16, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
@@ -5660,24 +5660,24 @@ __metadata:
     "@mdx-js/loader": ^1.6.22
     "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/angular": 6.4.0-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/angular": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
-    "@storybook/csf-tools": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/postinstall": 6.4.0-alpha.9
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
-    "@storybook/web-components": 6.4.0-alpha.9
+    "@storybook/csf-tools": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/postinstall": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
+    "@storybook/web-components": 6.4.0-alpha.16
     "@types/cross-spawn": ^6.0.2
     "@types/doctrine": ^0.0.3
     "@types/enzyme": ^3.10.8
@@ -5707,6 +5707,7 @@ __metadata:
     lit-html: ^2.0.0-rc.3
     loader-utils: ^2.0.0
     lodash: ^4.17.20
+    nanoid: ^3.1.23
     p-limit: ^3.1.0
     prettier: ~2.2.1
     prop-types: ^15.7.2
@@ -5727,10 +5728,10 @@ __metadata:
     webpack: 4
     zone.js: ^0.11.3
   peerDependencies:
-    "@storybook/angular": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
-    "@storybook/vue3": 6.4.0-alpha.9
-    "@storybook/web-components": 6.4.0-alpha.9
+    "@storybook/angular": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
+    "@storybook/vue3": 6.4.0-alpha.16
+    "@storybook/web-components": 6.4.0-alpha.16
     lit: ^2.0.0-rc.1
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -5767,32 +5768,32 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-essentials@6.4.0-alpha.9, @storybook/addon-essentials@workspace:*, @storybook/addon-essentials@workspace:addons/essentials":
+"@storybook/addon-essentials@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-measure": ^2.0.0
-    "@storybook/addon-toolbars": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-measure": 6.4.0-alpha.16
+    "@storybook/addon-outline": 6.4.0-alpha.16
+    "@storybook/addon-toolbars": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
     "@types/jest": ^26.0.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
-    storybook-addon-outline: ^1.4.1
     ts-dedent: ^2.0.0
   peerDependencies:
     "@babel/core": ^7.9.6
-    "@storybook/vue": 6.4.0-alpha.9
-    "@storybook/web-components": 6.4.0-alpha.9
+    "@storybook/vue": 6.4.0-alpha.16
+    "@storybook/web-components": 6.4.0-alpha.16
     babel-loader: ^8.0.0
     lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
@@ -5814,15 +5815,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-jest@6.4.0-alpha.9, @storybook/addon-jest@workspace:*, @storybook/addon-jest@workspace:addons/jest":
+"@storybook/addon-jest@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -5840,15 +5841,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-links@6.4.0-alpha.9, @storybook/addon-links@workspace:*, @storybook/addon-links@workspace:addons/links":
+"@storybook/addon-links@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.9
+    "@storybook/router": 6.4.0-alpha.16
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -5868,15 +5869,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@storybook/addon-measure@npm:2.0.0"
+"@storybook/addon-measure@6.4.0-alpha.16, @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-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
   peerDependencies:
-    "@storybook/addons": ^6.3.0
-    "@storybook/api": ^6.3.0
-    "@storybook/components": ^6.3.0
-    "@storybook/core-events": ^6.3.0
-    "@storybook/theming": ^6.3.0
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -5884,9 +5889,33 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: fa701e19ac0806590a24fdc4de75a00e06cee26cc0d909fe03743fee5f92abddafa3756a01def312622ff2ba1dd1fe92c6de5046c4d49363dfdff8120cf231de
-  languageName: node
-  linkType: hard
+  languageName: unknown
+  linkType: soft
+
+"@storybook/addon-outline@6.4.0-alpha.16, @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-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  languageName: unknown
+  linkType: soft
 
 "@storybook/addon-postcss@npm:^2.0.0":
   version: 2.0.0
@@ -5901,20 +5930,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-storyshots-puppeteer@6.4.0-alpha.9, @storybook/addon-storyshots-puppeteer@workspace:*, @storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer":
+"@storybook/addon-storyshots-puppeteer@6.4.0-alpha.16, @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.1
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@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-alpha.9
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
     puppeteer: ^2.0.0 || ^3.0.0
   peerDependenciesMeta:
     puppeteer:
@@ -5922,22 +5951,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storyshots@6.4.0-alpha.9, @storybook/addon-storyshots@workspace:*, @storybook/addon-storyshots@workspace:addons/storyshots/storyshots-core":
+"@storybook/addon-storyshots@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/angular": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
-    "@storybook/vue3": 6.4.0-alpha.9
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/angular": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
+    "@storybook/vue3": 6.4.0-alpha.16
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -6011,17 +6040,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storysource@6.4.0-alpha.9, @storybook/addon-storysource@workspace:*, @storybook/addon-storysource@workspace:addons/storysource":
+"@storybook/addon-storysource@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/router": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/router": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/react": ^16.14.2
     "@types/react-syntax-highlighter": ^11.0.5
     core-js: ^3.8.2
@@ -6042,15 +6071,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-toolbars@6.4.0-alpha.9, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
@@ -6064,16 +6093,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@6.4.0-alpha.9, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -6090,16 +6119,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@6.4.0-alpha.9, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/router": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/router": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
@@ -6109,27 +6138,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/addons@npm:6.3.0"
-  dependencies:
-    "@storybook/api": 6.3.0
-    "@storybook/channels": 6.3.0
-    "@storybook/client-logger": 6.3.0
-    "@storybook/core-events": 6.3.0
-    "@storybook/router": 6.3.0
-    "@storybook/theming": 6.3.0
-    core-js: ^3.8.2
-    global: ^4.4.0
-    regenerator-runtime: ^0.13.7
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 465a3db6e0af9963dd8773db5eff9bf127673b35bb648d7405ecf2cb47fda52fb838a29aa65f52562e29d2d5304986637054751d6eb8ca36d8931d9dc3c17888
-  languageName: node
-  linkType: hard
-
-"@storybook/angular@6.4.0-alpha.9, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
+"@storybook/angular@6.4.0-alpha.16, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:app/angular"
   dependencies:
@@ -6145,12 +6154,12 @@ __metadata:
     "@angular/platform-browser": ^11.2.14
     "@angular/platform-browser-dynamic": ^11.2.14
     "@nrwl/workspace": ^11.6.3
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@types/autoprefixer": ^9.7.2
     "@types/jest": ^26.0.16
     "@types/webpack-env": ^1.16.0
@@ -6170,6 +6179,7 @@ __metadata:
     regenerator-runtime: ^0.13.7
     sass-loader: ^10.1.0
     strip-json-comments: 3.1.1
+    telejson: ^5.3.2
     ts-dedent: ^2.0.0
     ts-jest: ^26.4.4
     ts-loader: ^8.0.14
@@ -6208,18 +6218,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@6.4.0-alpha.9, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
+"@storybook/api@6.4.0-alpha.16, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/api"
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
-    "@storybook/router": 6.4.0-alpha.9
+    "@storybook/router": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/lodash": ^4.14.167
     "@types/reach__router": ^1.3.7
     "@types/semver": ^7.3.4
@@ -6242,38 +6252,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@npm:6.3.0, @storybook/api@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/api@npm:6.3.0"
-  dependencies:
-    "@reach/router": ^1.3.4
-    "@storybook/channels": 6.3.0
-    "@storybook/client-logger": 6.3.0
-    "@storybook/core-events": 6.3.0
-    "@storybook/csf": 0.0.1
-    "@storybook/router": 6.3.0
-    "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.3.0
-    "@types/reach__router": ^1.3.7
-    core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    lodash: ^4.17.20
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    regenerator-runtime: ^0.13.7
-    store2: ^2.12.0
-    telejson: ^5.3.2
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: aa5a2bbc01e1d8231832abccb949738dc085200eee3711eeb5608a0cd494662de1317a9974fcbb69dd46d7bbb60d0df07220b5dd389ce93e7d8942a1bc6a2eac
-  languageName: node
-  linkType: hard
-
-"@storybook/builder-webpack4@6.4.0-alpha.9, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
+"@storybook/builder-webpack4@6.4.0-alpha.16, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack4@workspace:lib/builder-webpack4"
   dependencies:
@@ -6298,20 +6277,20 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/channel-postmessage": 6.4.0-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/router": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/channel-postmessage": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/router": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.9
-    "@storybook/ui": 6.4.0-alpha.9
+    "@storybook/theming": 6.4.0-alpha.16
+    "@storybook/ui": 6.4.0-alpha.16
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/dotenv-webpack": ^3.0.0
     "@types/node": ^14.0.10
@@ -6363,7 +6342,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@6.4.0-alpha.9, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@6.4.0-alpha.16, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5"
   dependencies:
@@ -6387,19 +6366,19 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/channel-postmessage": 6.4.0-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/router": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/channel-postmessage": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/router": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/dotenv-webpack": ^5.0.0
     "@types/node": ^14.0.10
@@ -6439,13 +6418,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@6.4.0-alpha.9, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -6457,14 +6436,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket"
   dependencies:
-    "@storybook/channels": 6.4.0-alpha.9
+    "@storybook/channels": 6.4.0-alpha.16
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^5.3.2
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@6.4.0-alpha.9, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@6.4.0-alpha.16, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
@@ -6474,26 +6453,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@npm:6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/channels@npm:6.3.0"
-  dependencies:
-    core-js: ^3.8.2
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  checksum: 17ed14d3888de30ed6a8d2d919fe0c0524386b158373fa1672edd0ca16d77cbe9a6771f095d218f3fca3d99c08beed1fc12c372c17a77079c4b254be95415123
-  languageName: node
-  linkType: hard
-
-"@storybook/cli@6.4.0-alpha.9, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/codemod": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/codemod": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
     "@types/cross-spawn": ^6.0.2
     "@types/prompts": ^2.0.9
@@ -6530,15 +6498,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@6.4.0-alpha.9, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/channel-postmessage": 6.4.0-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/channel-postmessage": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
@@ -6558,7 +6526,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@6.4.0-alpha.9, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@6.4.0-alpha.16, @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:
@@ -6567,25 +6535,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@npm:6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/client-logger@npm:6.3.0"
-  dependencies:
-    core-js: ^3.8.2
-    global: ^4.4.0
-  checksum: 9eb412856ef04883747a0e9e37b17f6d02189898a93d21f46ee670d1fb38d65c538067b9f88a9b4328c3a34572f12053bcf777c67700177d6696f392f64a5d46
-  languageName: node
-  linkType: hard
-
-"@storybook/codemod@6.4.0-alpha.9, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/codemod@6.4.0-alpha.16, @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.1
-    "@storybook/csf-tools": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/csf-tools": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     core-js: ^3.8.2
     cross-spawn: ^7.0.3
     globby: ^11.0.2
@@ -6599,14 +6557,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@6.4.0-alpha.9, @storybook/components@workspace:*, @storybook/components@workspace:lib/components":
+"@storybook/components@6.4.0-alpha.16, @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-alpha.9
+    "@storybook/client-logger": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/theming": 6.4.0-alpha.16
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -6635,52 +6593,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/components@npm:6.3.0"
-  dependencies:
-    "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.3.0
-    "@storybook/csf": 0.0.1
-    "@storybook/theming": 6.3.0
-    "@types/color-convert": ^2.0.0
-    "@types/overlayscrollbars": ^1.12.0
-    "@types/react-syntax-highlighter": 11.0.5
-    color-convert: ^2.0.1
-    core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    lodash: ^4.17.20
-    markdown-to-jsx: ^7.1.3
-    memoizerific: ^1.11.3
-    overlayscrollbars: ^1.13.1
-    polished: ^4.0.5
-    prop-types: ^15.7.2
-    react-colorful: ^5.1.2
-    react-popper-tooltip: ^3.1.1
-    react-syntax-highlighter: ^13.5.3
-    react-textarea-autosize: ^8.3.0
-    regenerator-runtime: ^0.13.7
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: aba5b6a88370a94208401816e2df0ebb394cc1d59f62b51b1462c4a057ed8c47da70d22bb2b808f54ba2758fe1c965b1d62aefac9408519e4a9a5a4f28fa4fb1
-  languageName: node
-  linkType: hard
-
-"@storybook/core-client@6.4.0-alpha.9, @storybook/core-client@workspace:lib/core-client":
+"@storybook/core-client@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/channel-postmessage": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/channel-postmessage": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
-    "@storybook/ui": 6.4.0-alpha.9
+    "@storybook/ui": 6.4.0-alpha.16
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -6701,7 +6624,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@6.4.0-alpha.9, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@6.4.0-alpha.16, @storybook/core-common@workspace:lib/core-common":
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
@@ -6726,7 +6649,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-alpha.9
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.253f8c1.0
     "@storybook/semver": ^7.3.2
     "@types/glob-base": ^0.3.0
@@ -6766,7 +6689,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@6.4.0-alpha.9, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@6.4.0-alpha.16, @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:
@@ -6774,26 +6697,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@npm:6.3.0, @storybook/core-events@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/core-events@npm:6.3.0"
-  dependencies:
-    core-js: ^3.8.2
-  checksum: 116ddf249a3968450b12c625487493281a293f85c4183887b3d24baf1623ddabea00f7dc62d80225264a968d9ef02fcb7415540e3763e512371b785b467279eb
-  languageName: node
-  linkType: hard
-
-"@storybook/core-server@6.4.0-alpha.9, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@6.4.0-alpha.16, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
-    "@storybook/builder-webpack5": 6.4.0-alpha.9
-    "@storybook/core-client": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/csf-tools": 6.4.0-alpha.9
-    "@storybook/manager-webpack4": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
+    "@storybook/builder-webpack5": 6.4.0-alpha.16
+    "@storybook/core-client": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/csf-tools": 6.4.0-alpha.16
+    "@storybook/manager-webpack4": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
     "@types/compression": ^1.7.0
     "@types/ip": ^1.1.0
@@ -6826,8 +6740,8 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.9
-    "@storybook/manager-webpack5": 6.4.0-alpha.9
+    "@storybook/builder-webpack5": 6.4.0-alpha.16
+    "@storybook/manager-webpack5": 6.4.0-alpha.16
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -6840,14 +6754,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core@6.4.0-alpha.9, @storybook/core@workspace:*, @storybook/core@workspace:lib/core":
+"@storybook/core@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core-server": 6.4.0-alpha.9
+    "@storybook/core-client": 6.4.0-alpha.16
+    "@storybook/core-server": 6.4.0-alpha.16
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.0-alpha.9
+    "@storybook/builder-webpack5": 6.4.0-alpha.16
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
   peerDependenciesMeta:
@@ -6858,7 +6772,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@6.4.0-alpha.9, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@6.4.0-alpha.16, @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:
@@ -6926,13 +6840,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ember@6.4.0-alpha.9, @storybook/ember@workspace:*, @storybook/ember@workspace:app/ember":
+"@storybook/ember@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     core-js: ^3.8.2
     global: ^4.4.0
     react: 16.14.0
@@ -6965,10 +6879,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-alpha.9
-    "@storybook/addon-essentials": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
-    "@storybook/react": 6.4.0-alpha.9
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-essentials": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
     "@types/react": ^16.14.2
     "@types/react-dom": ^16.9.10
     prop-types: 15.7.2
@@ -6983,11 +6897,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/example-react-ts@workspace:examples/react-ts"
   dependencies:
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-essentials": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-essentials": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
     "@types/react": ^16.14.2
@@ -7002,14 +6916,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/html@6.4.0-alpha.9, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
+"@storybook/html@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7056,19 +6970,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@6.4.0-alpha.9, @storybook/manager-webpack4@workspace:lib/manager-webpack4":
+"@storybook/manager-webpack4@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core-client": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
-    "@storybook/ui": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core-client": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
+    "@storybook/ui": 6.4.0-alpha.16
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/dotenv-webpack": ^3.0.0
     "@types/node": ^14.0.10
@@ -7118,12 +7032,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-alpha.9
-    "@storybook/core-client": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
-    "@storybook/ui": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core-client": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
+    "@storybook/ui": 6.4.0-alpha.16
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/dotenv-webpack": ^5.0.0
     "@types/node": ^14.0.10
@@ -7164,7 +7078,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/node-logger@6.4.0-alpha.9, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@6.4.0-alpha.16, @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:
@@ -7190,7 +7104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@6.4.0-alpha.9, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@6.4.0-alpha.16, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
@@ -7201,14 +7115,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@6.4.0-alpha.9, @storybook/preact@workspace:*, @storybook/preact@workspace:app/preact":
+"@storybook/preact@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7277,18 +7191,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@6.4.0-alpha.9, @storybook/react@workspace:*, @storybook/react@workspace:app/react":
+"@storybook/react@6.4.0-alpha.16, @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.4.3
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.253f8c1.0
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.14.20
@@ -7360,6 +7274,8 @@ __metadata:
     "@storybook/addon-essentials": "workspace:*"
     "@storybook/addon-jest": "workspace:*"
     "@storybook/addon-links": "workspace:*"
+    "@storybook/addon-measure": "workspace:*"
+    "@storybook/addon-outline": "workspace:*"
     "@storybook/addon-storyshots": "workspace:*"
     "@storybook/addon-storyshots-puppeteer": "workspace:*"
     "@storybook/addon-storysource": "workspace:*"
@@ -7539,12 +7455,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@6.4.0-alpha.9, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@6.4.0-alpha.16, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:lib/router"
   dependencies:
     "@reach/router": ^1.3.4
-    "@storybook/client-logger": 6.4.0-alpha.9
+    "@storybook/client-logger": 6.4.0-alpha.16
     "@types/reach__router": ^1.3.7
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -7559,27 +7475,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@npm:6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/router@npm:6.3.0"
-  dependencies:
-    "@reach/router": ^1.3.4
-    "@storybook/client-logger": 6.3.0
-    "@types/reach__router": ^1.3.7
-    core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    lodash: ^4.17.20
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    ts-dedent: ^2.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 91bf67797024a46c1466eee63250cbccc3a72ab4bee4b6c59aec388289d938345a4f7ce2586ce3c9440fa00941e3d506cd84ad0cf0d2f630c823e386fefcf2c3
-  languageName: node
-  linkType: hard
-
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -7592,16 +7487,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/server@6.4.0-alpha.9, @storybook/server@workspace:*, @storybook/server@workspace:app/server":
+"@storybook/server@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     fs-extra: ^9.0.1
@@ -7621,12 +7516,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@6.4.0-alpha.9, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
     "@storybook/csf": 0.0.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -7641,13 +7536,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@6.4.0-alpha.9, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte":
+"@storybook/svelte@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -7670,14 +7565,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/theming@6.4.0-alpha.9, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@6.4.0-alpha.16, @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-alpha.9
+    "@storybook/client-logger": 6.4.0-alpha.16
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
     emotion-theming: ^10.0.27
@@ -7692,44 +7587,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/theming@npm:6.3.0":
-  version: 6.3.0
-  resolution: "@storybook/theming@npm:6.3.0"
-  dependencies:
-    "@emotion/core": ^10.1.1
-    "@emotion/is-prop-valid": ^0.8.6
-    "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.3.0
-    core-js: ^3.8.2
-    deep-object-diff: ^1.1.0
-    emotion-theming: ^10.0.27
-    global: ^4.4.0
-    memoizerific: ^1.11.3
-    polished: ^4.0.5
-    resolve-from: ^5.0.0
-    ts-dedent: ^2.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: df3d6a32c437777ab8672e5615171d220ee4a8933c1b732f9f7a94a6028f59b6e4141ac6775020a58874b2e6d737a5e4d929d298d62ff2371e33a826dcd1e2d2
-  languageName: node
-  linkType: hard
-
-"@storybook/ui@6.4.0-alpha.9, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
+"@storybook/ui@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/api": 6.4.0-alpha.9
-    "@storybook/channels": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/router": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/api": 6.4.0-alpha.16
+    "@storybook/channels": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/router": 6.4.0-alpha.16
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/theming": 6.4.0-alpha.16
     "@testing-library/react": ^11.2.2
     "@types/markdown-to-jsx": ^6.11.3
     babel-loader: ^8.2.2
@@ -7762,13 +7634,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@6.4.0-alpha.9, @storybook/vue3@workspace:app/vue3":
+"@storybook/vue3@6.4.0-alpha.16, @storybook/vue3@workspace:app/vue3":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3@workspace:app/vue3"
   dependencies:
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/node": ^14.14.20
     "@types/webpack-env": ^1.16.0
     "@vue/compiler-sfc": ^3.0.0
@@ -7797,13 +7669,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@6.4.0-alpha.9, @storybook/vue@workspace:*, @storybook/vue@workspace:app/vue":
+"@storybook/vue@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/node": ^14.14.20
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7834,17 +7706,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/web-components@6.4.0-alpha.9, @storybook/web-components@workspace:*, @storybook/web-components@workspace:app/web-components":
+"@storybook/web-components@6.4.0-alpha.16, @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-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-common": 6.4.0-alpha.9
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-common": 6.4.0-alpha.16
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
@@ -11469,18 +11341,18 @@ __metadata:
     "@angular/platform-browser-dynamic": ^11.2.14
     "@compodoc/compodoc": ^1.1.11
     "@ngrx/store": ^10.1.2
-    "@storybook/addon-a11y": 6.4.0-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-jest": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/angular": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-jest": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/angular": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
     "@types/core-js": ^2.5.4
     "@types/jest": ^26.0.16
     "@types/node": ^14.14.20
@@ -11497,6 +11369,7 @@ __metadata:
     protractor: ~7.0.0
     rxjs: ^6.6.3
     storybook-addon-angular-ivy: ^0.0.1
+    telejson: ^5.3.2
     ts-jest: ^26.4.4
     ts-node: ^9.1.0
     typescript: ^4.1.3
@@ -16408,19 +16281,19 @@ __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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-jest": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
-    "@storybook/client-logger": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-jest": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
+    "@storybook/client-logger": 6.4.0-alpha.16
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     global: ^4.4.0
     prop-types: ^15.7.2
     react: 16.14.0
@@ -16435,13 +16308,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-react15@workspace:examples/cra-react15"
   dependencies:
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     babel-core: 6
     babel-loader: 8.2.2
     babel-runtime: 6
@@ -16457,11 +16330,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-ts-essentials@workspace:examples/cra-ts-essentials"
   dependencies:
-    "@storybook/addon-essentials": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
+    "@storybook/addon-essentials": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-alpha.9
+    "@storybook/react": 6.4.0-alpha.16
     "@types/jest": ^26.0.16
     "@types/node": 14.14.20
     "@types/react": ^16.14.2
@@ -16479,14 +16352,14 @@ __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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/builder-webpack4": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/builder-webpack4": 6.4.0-alpha.16
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.4.0-alpha.9
+    "@storybook/react": 6.4.0-alpha.16
     "@types/enzyme": ^3.10.8
     "@types/jest": 25.2.3
     "@types/node": 14.14.20
@@ -19020,18 +18893,18 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.10
     "@ember/optional-features": ^2.0.0
-    "@storybook/addon-a11y": 6.4.0-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/ember": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/ember": 6.4.0-alpha.16
     "@storybook/ember-cli-storybook": ^0.2.1
-    "@storybook/source-loader": 6.4.0-alpha.9
+    "@storybook/source-loader": 6.4.0-alpha.16
     babel-loader: ^8
     broccoli-asset-rev: ^3.0.0
     cross-env: ^7.0.3
@@ -23693,23 +23566,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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-jest": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-jest": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
     "@storybook/addon-postcss": ^2.0.0
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/client-api": 6.4.0-alpha.9
-    "@storybook/core": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
-    "@storybook/html": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/client-api": 6.4.0-alpha.16
+    "@storybook/core": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
+    "@storybook/html": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
     autoprefixer: ^10.0.1
     eventemitter3: ^4.0.7
     format-json: ^1.0.3
@@ -30639,6 +30512,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.1.23":
+  version: 3.1.23
+  resolution: "nanoid@npm:3.1.23"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: a3207f946e2db59f8095118d5c57615f217e7f8a743bdb83212e222bd263516dbd83db226675d9b8634ed928ff2019db96ca06825a391af4256b02f7bec4b443
+  languageName: node
+  linkType: hard
+
 "nanomatch@npm:^1.2.9":
   version: 1.2.13
   resolution: "nanomatch@npm:1.2.13"
@@ -31643,27 +31525,27 @@ 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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-jest": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storyshots-puppeteer": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-toolbars": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/cli": 6.4.0-alpha.9
-    "@storybook/components": 6.4.0-alpha.9
-    "@storybook/core-events": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-jest": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storyshots-puppeteer": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-toolbars": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/cli": 6.4.0-alpha.16
+    "@storybook/components": 6.4.0-alpha.16
+    "@storybook/core-events": 6.4.0-alpha.16
     "@storybook/design-system": ^5.4.7
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/react": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/theming": 6.4.0-alpha.9
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/theming": 6.4.0-alpha.16
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
     chromatic: ^5.6.0
@@ -34573,16 +34455,16 @@ fsevents@^1.2.7:
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-runtime": ^7.12.10
-    "@storybook/addon-a11y": 6.4.0-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/preact": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/preact": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
     "@types/prop-types": ^15.7.3
     "@types/react": ^17
     "@types/react-dom": ^17
@@ -38331,7 +38213,7 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 6.4.0-alpha.9
+    "@storybook/cli": 6.4.0-alpha.16
   bin:
     sb: ./index.js
   languageName: unknown
@@ -38647,13 +38529,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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/node-logger": 6.4.0-alpha.9
-    "@storybook/server": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/node-logger": 6.4.0-alpha.16
+    "@storybook/server": 6.4.0-alpha.16
     concurrently: ^5.3.0
     cors: ^2.8.5
     express: ~4.17.1
@@ -39618,7 +39500,8 @@ resolve@1.19.0:
   version: 0.0.0-use.local
   resolution: "standalone-preview@workspace:examples/standalone-preview"
   dependencies:
-    "@storybook/react": 6.4.0-alpha.9
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/react": 6.4.0-alpha.16
     parcel: ^1.12.4
     react: 16.14.0
     react-dom: 16.14.0
@@ -39741,27 +39624,11 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
-"storybook-addon-outline@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "storybook-addon-outline@npm:1.4.1"
-  dependencies:
-    "@storybook/addons": ^6.3.0
-    "@storybook/api": ^6.3.0
-    "@storybook/components": ^6.3.0
-    "@storybook/core-events": ^6.3.0
-    ts-dedent: ^2.1.1
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 41c98cc3e68267e141c2889815c78a6f8413ab41135179064e4a2dfe0ea540e6447fcfcbabee501f25d66ccbe8af063202f4a0d97f9487f6a7681ce4b8f9c7f0
-  languageName: node
-  linkType: hard
-
 "storybook@workspace:lib/cli-storybook":
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 6.4.0-alpha.9
+    "@storybook/cli": 6.4.0-alpha.16
   bin:
     sb: ./index.js
     storybook: ./index.js
@@ -40468,18 +40335,18 @@ 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-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/svelte": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/svelte": 6.4.0-alpha.16
     global: ^4.4.0
     svelte-jester: 1.3.0
     svelte-preprocess: 4.6.8
@@ -41733,13 +41600,6 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
-"ts-dedent@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "ts-dedent@npm:2.1.1"
-  checksum: 7ac68dbc2e864db6e3f0500a8b6af5bf775020bfe09816cf647469e06acdcb76d2a24b1b0211614c3c44e0978aa081a51a3dde6b8f211a68f945cbc177f7f9c2
-  languageName: node
-  linkType: hard
-
 "ts-essentials@npm:^2.0.3":
   version: 2.0.12
   resolution: "ts-essentials@npm:2.0.12"
@@ -43302,11 +43162,11 @@ typescript@2.9.1:
   resolution: "vue-3-cli-example@workspace:examples/vue-3-cli"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-essentials": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/vue3": 6.4.0-alpha.9
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-essentials": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/vue3": 6.4.0-alpha.16
     "@vue/cli-plugin-babel": ~4.5.0
     "@vue/cli-plugin-typescript": ~4.5.0
     "@vue/cli-service": ~4.5.0
@@ -43333,11 +43193,11 @@ typescript@2.9.1:
   version: 0.0.0-use.local
   resolution: "vue-cli-example@workspace:examples/vue-cli"
   dependencies:
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-essentials": 6.4.0-alpha.9
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-essentials": 6.4.0-alpha.16
     "@storybook/preset-scss": ^1.0.3
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
     "@vue/cli-plugin-babel": ~4.3.1
     "@vue/cli-plugin-typescript": ~4.3.1
     "@vue/cli-service": ~4.3.1
@@ -43389,18 +43249,18 @@ typescript@2.9.1:
   resolution: "vue-example@workspace:examples/vue-kitchen-sink"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-a11y": 6.4.0-alpha.9
-    "@storybook/addon-actions": 6.4.0-alpha.9
-    "@storybook/addon-backgrounds": 6.4.0-alpha.9
-    "@storybook/addon-controls": 6.4.0-alpha.9
-    "@storybook/addon-docs": 6.4.0-alpha.9
-    "@storybook/addon-links": 6.4.0-alpha.9
-    "@storybook/addon-storyshots": 6.4.0-alpha.9
-    "@storybook/addon-storysource": 6.4.0-alpha.9
-    "@storybook/addon-viewport": 6.4.0-alpha.9
-    "@storybook/addons": 6.4.0-alpha.9
-    "@storybook/source-loader": 6.4.0-alpha.9
-    "@storybook/vue": 6.4.0-alpha.9
+    "@storybook/addon-a11y": 6.4.0-alpha.16
+    "@storybook/addon-actions": 6.4.0-alpha.16
+    "@storybook/addon-backgrounds": 6.4.0-alpha.16
+    "@storybook/addon-controls": 6.4.0-alpha.16
+    "@storybook/addon-docs": 6.4.0-alpha.16
+    "@storybook/addon-links": 6.4.0-alpha.16
+    "@storybook/addon-storyshots": 6.4.0-alpha.16
+    "@storybook/addon-storysource": 6.4.0-alpha.16
+    "@storybook/addon-viewport": 6.4.0-alpha.16
+    "@storybook/addons": 6.4.0-alpha.16
+    "@storybook/source-loader": 6.4.0-alpha.16
+    "@storybook/vue": 6.4.0-alpha.16
     "@vue/babel-preset-jsx": ^1.2.4
     babel-loader: ^8.2.2
     cross-env: ^7.0.3