diff --git a/.circleci/config.yml b/.circleci/config.yml
index d76302965bb..72170a14e7c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -6,7 +6,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -19,7 +19,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -32,7 +32,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -118,23 +118,9 @@ jobs:
           name: examples
           command: |
             yarn run-chromatics
-  packtracker:
-    executor:
-      class: medium
-      name: sb_node_14_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Report webpack stats for manager of official storybook
-          command: |
-            cd examples/official-storybook
-            yarn packtracker
   examples:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_14_browsers
     parallelism: 17
     steps:
@@ -194,7 +180,7 @@ jobs:
           name: Wait for registry
           command: yarn wait-on http://localhost:6000
       - run:
-          name: Run E2E tests
+          name: Run E2E (extended) tests
           command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
           no_output_timeout: 5m
       - store_artifacts:
@@ -204,7 +190,7 @@ jobs:
     executor:
       class: large
       name: sb_cypress_8_node_14
-    parallelism: 2
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -218,7 +204,7 @@ jobs:
           name: Wait for registry
           command: yarn wait-on http://localhost:6000
       - run:
-          name: Run E2E tests
+          name: Run E2E (core) tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
           command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
@@ -406,6 +392,8 @@ jobs:
       - run:
           name: Test
           command: yarn test --coverage --runInBand --ci
+      - store_test_results:
+          path: junit.xml
       - persist_to_workspace:
           root: .
           paths:
@@ -439,9 +427,6 @@ workflows:
       - smoke-tests:
           requires:
             - build
-      - packtracker:
-          requires:
-            - build
       - unit-tests:
           requires:
             - build
diff --git a/.github/workflows/cron-weekly.yml b/.github/workflows/cron-weekly.yml
new file mode 100644
index 00000000000..7b056c6148f
--- /dev/null
+++ b/.github/workflows/cron-weekly.yml
@@ -0,0 +1,19 @@
+name: Markdown Links Check
+# runs every monday at 9 am
+on:
+  schedule:
+    - cron: "0 9 * * 1"
+
+jobs:
+  check-links:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: gaurav-nelson/github-action-markdown-link-check@v1
+        # checks all markdown files from important folders including all subfolders
+        with:
+          # only show errors that occur instead of successful links + errors
+          use-quiet-mode: 'yes'
+          # output full HTTP info for broken links
+          use-verbose-mode: 'yes'
+          config-file: '.github/workflows/markdown-link-check-config.json'
diff --git a/.github/workflows/danger-js.yml b/.github/workflows/danger-js.yml
index 6c5fb64eafd..ad24e2a1592 100644
--- a/.github/workflows/danger-js.yml
+++ b/.github/workflows/danger-js.yml
@@ -8,9 +8,12 @@ jobs:
     name: Danger JS
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
       - uses: actions/checkout@master
       - name: Danger JS
-        uses: danger/danger-js@main
+        uses: danger/danger-js@10.9.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
diff --git a/.github/workflows/markdown-link-check-config.json b/.github/workflows/markdown-link-check-config.json
new file mode 100644
index 00000000000..df6db06fff2
--- /dev/null
+++ b/.github/workflows/markdown-link-check-config.json
@@ -0,0 +1,19 @@
+{
+  "replacementPatterns": [
+    {
+      "pattern": "^/",
+      "replacement": "./"
+    }
+  ],
+  "ignorePatterns": [
+    {
+      "pattern": "localhost"
+    },
+    {
+      "pattern": "https://github.com/storybookjs/storybook/pull/*"
+    },
+    {
+      "pattern": "https://stackblitz.com/*"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 423ff6ec3ed..c0b4b25e9d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ tsconfig.tsbuildinfo
 lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 examples/angular-cli/addon-jest.testresults.json
+junit.xml
 
 # Yarn stuff
 /**/.yarn/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38ff821ee37..27906b7b1ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,56 @@
+## 6.5.0-alpha.55 (April 3, 2022)
+
+### Features
+
+- CLI: Detect vite project, use vite builder automatically ([#17860](https://github.com/storybookjs/storybook/pull/17860))
+- CLI: Default new vite projects to storyStoreV7 ([#17859](https://github.com/storybookjs/storybook/pull/17859))
+
+### Bug Fixes
+
+- Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861))
+- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
+
+## 6.5.0-alpha.54 (April 1, 2022)
+
+### Dependency Upgrades
+
+- React: Update react and react-dom peerDeps for React18 ([#17853](https://github.com/storybookjs/storybook/pull/17853))
+
+## 6.5.0-alpha.53 (April 1, 2022)
+
+### Features
+
+- Core: Add simplified manager.js/preview.js API for addons ([#17755](https://github.com/storybookjs/storybook/pull/17755))
+- Core/React: Add testing utilities ([#17282](https://github.com/storybookjs/storybook/pull/17282))
+
+### Bug Fixes
+
+- Addon-docs: Fix dependencies for yarn pnp ([#17705](https://github.com/storybookjs/storybook/pull/17705))
+- Webpack: Expand version ranges of webpack in the apps ([#17834](https://github.com/storybookjs/storybook/pull/17834))
+- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
+
+### Maintenance
+
+- Build: Remove packtracker ([#17841](https://github.com/storybookjs/storybook/pull/17841))
+- Build: Swap order of e2e tests around ([#17840](https://github.com/storybookjs/storybook/pull/17840))
+- Build: Add weekly check for broken markdown links ([#17799](https://github.com/storybookjs/storybook/pull/17799))
+- Build: Switch to use medium+ ([#17837](https://github.com/storybookjs/storybook/pull/17837))
+
+## 6.5.0-alpha.52 (March 31, 2022)
+
+### Bug Fixes
+
+- UI: Add back CacheProvider from emotion to lib/theming ([#17820](https://github.com/storybookjs/storybook/pull/17820))
+- Core: Add a feature flag for enabling crossOriginIsolated ([#17815](https://github.com/storybookjs/storybook/pull/17815))
+- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
+- UI: Wait 100ms before showing spinner and fix story overlaying it ([#17753](https://github.com/storybookjs/storybook/pull/17753))
+
+### Maintenance
+
+- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
+- Build: Add setup-node version for danger ([#17826](https://github.com/storybookjs/storybook/pull/17826))
+- Add contributing instructions to PULL_REQUEST_TEMPLATE ([#17713](https://github.com/storybookjs/storybook/pull/17713))
+
 ## 6.5.0-alpha.51 (March 25, 2022)
 
 ### Features
diff --git a/MIGRATION.md b/MIGRATION.md
index 6b8ea76261e..c82b46fddde 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,9 @@
 <h1>Migration</h1>
 
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [Deprecated register.js](#deprecated-registerjs)
+  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
+  - [Vite builder renamed](#vite-builder-renamed)
   - [Docs framework refactor for React](#docs-framework-refactor-for-react)
   - [Opt-in MDX2 support](#opt-in-mdx2-support)
   - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
@@ -196,6 +199,36 @@
 
 ## From version 6.4.x to 6.5.0
 
+### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before: 
+
+```js
+module.exports = { addons: ['my-addon/register.js'] }
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] }
+```
+
+### Dropped support for addon-actions addDecorators
+
+Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
+
+### Vite builder renamed
+
+SB6.5 renames Storybook's [Vite builder](https://github.com/storybookjs/builder-vite) from `storybook-builder-vite` to `@storybook/builder-vite`. This move is part of a larger effort to improve Vite support in Storybook.
+
+Storybook's `automigrate` command can migrate for you. To manually migrate:
+
+1. Remove `storybook-builder-vite` from your `package.json` dependencies
+2. Install `@storybook/builder-vite`
+3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
+
 ### Docs framework refactor for React
 
 SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`).
diff --git a/RELEASES.md b/RELEASES.md
index 59321da2f1d..0d98bf5f873 100644
--- a/RELEASES.md
+++ b/RELEASES.md
@@ -114,5 +114,5 @@ in a patch release.
 #### How does my PR get merged?
 
 - For PATCH PR's, any maintainer can review, test, approve, and merge it.
-- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
+- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, they should clear it with the other maintainers before merging it into the release branch.
 - Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.
diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/a11y/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index af9e3686bc9..50c05daf281 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addon-highlight": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -68,8 +68,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -82,7 +82,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",
diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js
deleted file mode 100644
index 87cb395fbf1..00000000000
--- a/addons/a11y/preset.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = []) {
-  return [...entry, require.resolve('./dist/esm/a11yRunner')];
-}
-
-module.exports = { managerEntries, config };
diff --git a/addons/a11y/preview.js b/addons/a11y/preview.js
new file mode 100644
index 00000000000..e726cab5a1b
--- /dev/null
+++ b/addons/a11y/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preview';
diff --git a/addons/a11y/register.js b/addons/a11y/register.js
index f209c0eb370..2d916bea61a 100755
--- a/addons/a11y/register.js
+++ b/addons/a11y/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/a11y/src/addDecorator.ts b/addons/a11y/src/addDecorator.ts
deleted file mode 100644
index 95dc140b157..00000000000
--- a/addons/a11y/src/addDecorator.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { withA11y } from '.';
-
-export const decorators = [withA11y];
diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/manager.tsx
similarity index 100%
rename from addons/a11y/src/register.tsx
rename to addons/a11y/src/manager.tsx
diff --git a/addons/a11y/src/preview.tsx b/addons/a11y/src/preview.tsx
new file mode 100644
index 00000000000..1325793c119
--- /dev/null
+++ b/addons/a11y/src/preview.tsx
@@ -0,0 +1 @@
+import './a11yRunner';
diff --git a/addons/actions/manager.js b/addons/actions/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/actions/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 560f0427993..f79c978a369 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -41,12 +41,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -65,8 +66,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -79,7 +80,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",
diff --git a/addons/actions/preset.js b/addons/actions/preset.js
deleted file mode 100644
index ba70abe968e..00000000000
--- a/addons/actions/preset.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function managerEntries(entry, options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], { addDecorator = true } = {}) {
-  const actionConfig = [];
-  if (addDecorator) {
-    actionConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
-  }
-  return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
diff --git a/addons/actions/preview.js b/addons/actions/preview.js
new file mode 100644
index 00000000000..7817e1d278d
--- /dev/null
+++ b/addons/actions/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
diff --git a/addons/actions/register.js b/addons/actions/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/actions/register.js
+++ b/addons/actions/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/actions/src/register.tsx b/addons/actions/src/manager.tsx
similarity index 100%
rename from addons/actions/src/register.tsx
rename to addons/actions/src/manager.tsx
diff --git a/addons/actions/src/preset/preview.tsx b/addons/actions/src/preset/preview.tsx
new file mode 100644
index 00000000000..117c34f7196
--- /dev/null
+++ b/addons/actions/src/preset/preview.tsx
@@ -0,0 +1,2 @@
+export * from './addDecorator';
+export * from './addArgs';
diff --git a/addons/backgrounds/manager.js b/addons/backgrounds/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/backgrounds/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index dd804275f39..91cf5605ac1 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -63,8 +63,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -77,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",
diff --git a/addons/backgrounds/preset.js b/addons/backgrounds/preset.js
deleted file mode 100644
index a80aaefb5b3..00000000000
--- a/addons/backgrounds/preset.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('./dist/esm/preset/addDecorator'),
-    require.resolve('./dist/esm/preset/addParameter'),
-  ];
-}
-
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
diff --git a/addons/backgrounds/preview.js b/addons/backgrounds/preview.js
new file mode 100644
index 00000000000..e726cab5a1b
--- /dev/null
+++ b/addons/backgrounds/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preview';
diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/backgrounds/register.js
+++ b/addons/backgrounds/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/backgrounds/src/decorators/index.ts b/addons/backgrounds/src/decorators/index.ts
deleted file mode 100644
index cf4a2889047..00000000000
--- a/addons/backgrounds/src/decorators/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './withBackground';
-export * from './withGrid';
diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/manager.tsx
similarity index 100%
rename from addons/backgrounds/src/register.tsx
rename to addons/backgrounds/src/manager.tsx
diff --git a/addons/backgrounds/src/preset/addDecorator.tsx b/addons/backgrounds/src/preset/addDecorator.tsx
deleted file mode 100644
index 93ccff63233..00000000000
--- a/addons/backgrounds/src/preset/addDecorator.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { withGrid, withBackground } from '../decorators';
-
-export const decorators = [withGrid, withBackground];
diff --git a/addons/backgrounds/src/preset/addParameter.tsx b/addons/backgrounds/src/preview.tsx
similarity index 58%
rename from addons/backgrounds/src/preset/addParameter.tsx
rename to addons/backgrounds/src/preview.tsx
index ceb1d3b4120..cc67d00f631 100644
--- a/addons/backgrounds/src/preset/addParameter.tsx
+++ b/addons/backgrounds/src/preview.tsx
@@ -1,3 +1,7 @@
+import { withBackground } from './decorators/withBackground';
+import { withGrid } from './decorators/withGrid';
+
+export const decorators = [withGrid, withBackground];
 export const parameters = {
   backgrounds: {
     grid: {
diff --git a/addons/controls/manager.js b/addons/controls/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/controls/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/controls/package.json b/addons/controls/package.json
index ed52dfc7bac..2ad52697cea 100644
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -25,8 +25,8 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/manager.js",
+  "module": "dist/esm/manager.js",
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -45,22 +45,22 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -73,8 +73,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
-  "sbmodern": "dist/modern/register.js",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
+  "sbmodern": "dist/modern/manager.js",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
diff --git a/addons/controls/preset.js b/addons/controls/preset.js
deleted file mode 100644
index 3dd9b66d3aa..00000000000
--- a/addons/controls/preset.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded');
-  checkDocsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };
diff --git a/addons/controls/register.js b/addons/controls/register.js
index 681a5d09dce..2d916bea61a 100644
--- a/addons/controls/register.js
+++ b/addons/controls/register.js
@@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/controls/src/register.tsx b/addons/controls/src/manager.tsx
similarity index 100%
rename from addons/controls/src/register.tsx
rename to addons/controls/src/manager.tsx
diff --git a/addons/docs/manager.js b/addons/docs/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/docs/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/docs/package.json b/addons/docs/package.json
index c15f5157199..98474389cab 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -59,24 +59,26 @@
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/mdx1-csf": "canary",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/postinstall": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/source-loader": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/postinstall": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/source-loader": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
+    "babel-loader": "^8.0.0",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
+    "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
@@ -85,23 +87,14 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/mdx2-csf": "canary",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-loader": "^8.0.0",
-    "webpack": "4"
+    "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {
     "@storybook/mdx2-csf": "*",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "webpack": "*"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
-    "@storybook/builder-webpack4": {
-      "optional": true
-    },
-    "@storybook/builder-webpack5": {
-      "optional": true
-    },
     "@storybook/mdx2-csf": {
       "optional": true
     },
@@ -110,15 +103,12 @@
     },
     "react-dom": {
       "optional": true
-    },
-    "webpack": {
-      "optional": true
     }
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",
diff --git a/addons/docs/preset.js b/addons/docs/preset.js
index c318823dc33..e45ac5b4cec 100644
--- a/addons/docs/preset.js
+++ b/addons/docs/preset.js
@@ -1,16 +1 @@
-const { findDistEsm } = require('@storybook/core-common');
-const { webpack } = require('./dist/cjs/frameworks/common/preset');
-
-function managerEntries(entry = [], options) {
-  return [...entry, findDistEsm(__dirname, 'register')];
-}
-
-function config(entry = [], options = {}) {
-  return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry];
-}
-
-module.exports = {
-  webpack,
-  managerEntries,
-  config,
-};
+module.exports = require('./dist/cjs/preset');
diff --git a/addons/docs/preview.js b/addons/docs/preview.js
new file mode 100644
index 00000000000..e726cab5a1b
--- /dev/null
+++ b/addons/docs/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preview';
diff --git a/addons/docs/register.js b/addons/docs/register.js
index 980200ade08..2d916bea61a 100644
--- a/addons/docs/register.js
+++ b/addons/docs/register.js
@@ -1,2 +1,6 @@
-/* eslint-disable import/extensions */
-require('./dist/esm/register.js');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts
deleted file mode 100644
index 20632390005..00000000000
--- a/addons/docs/src/frameworks/common/config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const parameters = {
-  docs: {
-    inlineStories: false,
-    getContainer: async () => (await import('../../blocks')).DocsContainer,
-    getPage: async () => (await import('../../blocks')).DocsPage,
-    iframeHeight: 100,
-  },
-};
diff --git a/addons/docs/src/register.ts b/addons/docs/src/manager.ts
similarity index 100%
rename from addons/docs/src/register.ts
rename to addons/docs/src/manager.ts
diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/preset.ts
similarity index 89%
rename from addons/docs/src/frameworks/common/preset.ts
rename to addons/docs/src/preset.ts
index ab7f02c1976..b6cb10d7e2b 100644
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/preset.ts
@@ -3,7 +3,7 @@ import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import global from 'global';
 
-import type { BuilderConfig, Options } from '@storybook/core-common';
+import type { Options } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
 
 // for frameworks that are not working with react, we need to configure
@@ -38,16 +38,7 @@ export async function webpack(
       typeof createCompiler
     >[0] */
 ) {
-  const { builder = 'webpack4' } = await options.presets.apply<{
-    builder: BuilderConfig;
-  }>('core', {} as any);
-
-  const builderName = typeof builder === 'string' ? builder : builder.name;
-  const resolvedBabelLoader = require.resolve('babel-loader', {
-    paths: builderName.match(/^webpack(4|5)$/)
-      ? [require.resolve(`@storybook/builder-${builderName}`)]
-      : [builderName],
-  });
+  const resolvedBabelLoader = require.resolve('babel-loader');
 
   const { module = {} } = webpackConfig;
 
diff --git a/addons/docs/src/preview.ts b/addons/docs/src/preview.ts
new file mode 100644
index 00000000000..a6269505f28
--- /dev/null
+++ b/addons/docs/src/preview.ts
@@ -0,0 +1,6 @@
+export const parameters = {
+  docs: {
+    getContainer: async () => (await import('./blocks')).DocsContainer,
+    getPage: async () => (await import('./blocks')).DocsPage,
+  },
+};
diff --git a/addons/essentials/package.json b/addons/essentials/package.json
index 7e40fa32e19..d0556321f72 100644
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -39,25 +39,25 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-measure": "6.5.0-alpha.51",
-    "@storybook/addon-outline": "6.5.0-alpha.51",
-    "@storybook/addon-toolbars": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-measure": "6.5.0-alpha.55",
+    "@storybook/addon-outline": "6.5.0-alpha.55",
+    "@storybook/addon-toolbars": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.5.0-alpha.51",
+    "@storybook/vue": "6.5.0-alpha.55",
     "@types/jest": "^26.0.16",
     "@types/webpack-env": "^1.16.0"
   },
@@ -120,6 +120,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts
index 257d06fe9ee..582954ac76c 100644
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@@ -1,4 +1,4 @@
-import path, { join } from 'path';
+import path, { dirname, join } from 'path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 
@@ -60,12 +60,7 @@ export function addons(options: PresetOptions = {}) {
       // as it's done in `lib/core/src/server/presets.js`.
       .map((addon) => {
         try {
-          return require.resolve(join(addon, 'preset'));
-          // eslint-disable-next-line no-empty
-        } catch (err) {}
-
-        try {
-          return require.resolve(join(addon, 'register'));
+          return dirname(require.resolve(join(addon, 'package.json')));
           // eslint-disable-next-line no-empty
         } catch (err) {}
 
diff --git a/addons/highlight/package.json b/addons/highlight/package.json
index 56791dd52ba..d6313d659d8 100644
--- a/addons/highlight/package.json
+++ b/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/addons/interactions/manager.js b/addons/interactions/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/interactions/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/interactions/package.json b/addons/interactions/package.json
index 3bff3d52e49..474aa1302c5 100644
--- a/addons/interactions/package.json
+++ b/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -21,8 +21,8 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -41,14 +41,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/instrumenter": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/instrumenter": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
@@ -61,8 +62,8 @@
     "formik": "^2.2.9"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -75,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Interactions",
diff --git a/addons/interactions/preset.js b/addons/interactions/preset.js
index d7d7f8fd24f..fb325c5b170 100644
--- a/addons/interactions/preset.js
+++ b/addons/interactions/preset.js
@@ -1,15 +1,10 @@
-function config(entry = []) {
-  return [...entry, require.resolve('./dist/esm/preset/argsEnhancers')];
-}
+const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
 
-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
+function previewAnnotations(entry = [], options) {
   checkActionsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
+  return entry;
 }
 
 module.exports = {
-  config,
-  managerEntries,
+  previewAnnotations,
 };
diff --git a/addons/interactions/preview.js b/addons/interactions/preview.js
new file mode 100644
index 00000000000..7817e1d278d
--- /dev/null
+++ b/addons/interactions/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
diff --git a/addons/interactions/register.js b/addons/interactions/register.js
index 681a5d09dce..2d916bea61a 100644
--- a/addons/interactions/register.js
+++ b/addons/interactions/register.js
@@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/interactions/src/register.tsx b/addons/interactions/src/manager.tsx
similarity index 100%
rename from addons/interactions/src/register.tsx
rename to addons/interactions/src/manager.tsx
diff --git a/addons/interactions/src/preset/argsEnhancers.ts b/addons/interactions/src/preset/preview.ts
similarity index 100%
rename from addons/interactions/src/preset/argsEnhancers.ts
rename to addons/interactions/src/preset/preview.ts
diff --git a/addons/jest/manager.js b/addons/jest/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/jest/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/jest/package.json b/addons/jest/package.json
index d66d9911192..1ae3764b0fb 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -47,11 +47,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
@@ -62,8 +63,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -76,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Jest",
diff --git a/addons/jest/register.js b/addons/jest/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/jest/register.js
+++ b/addons/jest/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/jest/src/register.tsx b/addons/jest/src/manager.tsx
similarity index 100%
rename from addons/jest/src/register.tsx
rename to addons/jest/src/manager.tsx
diff --git a/addons/links/manager.js b/addons/links/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/links/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/links/package.json b/addons/links/package.json
index 0247f7e42e2..8d8b0aa1895 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -41,11 +41,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/router": "6.5.0-alpha.51",
+    "@storybook/router": "6.5.0-alpha.55",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -58,8 +58,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -72,7 +72,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Links",
diff --git a/addons/links/preset.js b/addons/links/preset.js
deleted file mode 100644
index 2b5ed5ac00d..00000000000
--- a/addons/links/preset.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], { addDecorator = true } = {}) {
-  const linkConfig = [];
-  if (addDecorator) {
-    linkConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
-  }
-  return [...entry, ...linkConfig];
-}
-
-module.exports = { managerEntries, config };
diff --git a/addons/links/preview.js b/addons/links/preview.js
new file mode 100644
index 00000000000..e726cab5a1b
--- /dev/null
+++ b/addons/links/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preview';
diff --git a/addons/links/react.js b/addons/links/react.js
index 835dd0388e2..9afbe539022 100644
--- a/addons/links/react.js
+++ b/addons/links/react.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/react');
+module.exports = require('./dist/esm/react');
diff --git a/addons/links/register.js b/addons/links/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/links/register.js
+++ b/addons/links/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/links/src/index.ts b/addons/links/src/index.ts
index 239fae7ba1a..a41227513de 100644
--- a/addons/links/src/index.ts
+++ b/addons/links/src/index.ts
@@ -14,7 +14,7 @@ export function LinkTo(): null {
   return null;
 }
 
-export { linkTo, hrefTo, withLinks, navigate } from './preview';
+export { linkTo, hrefTo, withLinks, navigate } from './utils';
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
diff --git a/addons/links/src/register.ts b/addons/links/src/manager.ts
similarity index 100%
rename from addons/links/src/register.ts
rename to addons/links/src/manager.ts
diff --git a/addons/links/src/preset/addDecorator.ts b/addons/links/src/preset/addDecorator.ts
deleted file mode 100644
index ff68743b1a3..00000000000
--- a/addons/links/src/preset/addDecorator.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { withLinks } from '../index';
-
-export const decorators = [withLinks];
diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts
index 3082bedc09b..1527786e81a 100644
--- a/addons/links/src/preview.ts
+++ b/addons/links/src/preview.ts
@@ -1,91 +1,3 @@
-import global from 'global';
-import qs from 'qs';
-import { addons, makeDecorator } from '@storybook/addons';
-import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
-import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf';
-import { toId } from '@storybook/csf';
-import { PARAM_KEY } from './constants';
+import { withLinks } from './index';
 
-const { document, HTMLElement } = global;
-
-interface ParamsId {
-  storyId: StoryId;
-}
-interface ParamsCombo {
-  kind?: ComponentTitle;
-  story?: StoryName;
-}
-
-export const navigate = (params: ParamsId | ParamsCombo) =>
-  addons.getChannel().emit(SELECT_STORY, params);
-
-export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string> => {
-  return new Promise((resolve) => {
-    const { location } = document;
-    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
-    const existingId = [].concat(query.id)[0];
-    const titleToLink = title || existingId.split('--', 2)[0];
-    const id = toId(titleToLink, name);
-    const url = `${location.origin + location.pathname}?${qs.stringify(
-      { ...query, id },
-      { encode: false }
-    )}`;
-
-    resolve(url);
-  });
-};
-
-const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
-  typeof value === 'function' ? value(...args) : value;
-
-export const linkTo =
-  (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) =>
-  (...args: any[]) => {
-    const resolver = valueOrCall(args);
-    const title = resolver(idOrTitle);
-    const name = resolver(nameInput);
-
-    if (title?.match(/--/) && !name) {
-      navigate({ storyId: title });
-    } else {
-      navigate({ kind: title, story: name });
-    }
-  };
-
-const linksListener = (e: Event) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return;
-  }
-  const element = target as HTMLElement;
-  const { sbKind: kind, sbStory: story } = element.dataset;
-  if (kind || story) {
-    e.preventDefault();
-    navigate({ kind, story });
-  }
-};
-
-let hasListener = false;
-
-const on = () => {
-  if (!hasListener) {
-    hasListener = true;
-    document.addEventListener('click', linksListener);
-  }
-};
-const off = () => {
-  if (hasListener) {
-    hasListener = false;
-    document.removeEventListener('click', linksListener);
-  }
-};
-
-export const withLinks = makeDecorator({
-  name: 'withLinks',
-  parameterName: PARAM_KEY,
-  wrapper: (getStory, context) => {
-    on();
-    addons.getChannel().once(STORY_CHANGED, off);
-    return getStory(context);
-  },
-});
+export const decorators = [withLinks];
diff --git a/addons/links/src/react/components/link.tsx b/addons/links/src/react/components/link.tsx
index fccca70d04a..aa6207eff75 100644
--- a/addons/links/src/react/components/link.tsx
+++ b/addons/links/src/react/components/link.tsx
@@ -1,6 +1,6 @@
 import React, { MouseEvent, PureComponent, ReactNode } from 'react';
 
-import { navigate, hrefTo } from '../../preview';
+import { navigate, hrefTo } from '../../utils';
 
 // FIXME: copied from Typography.Link. Code is duplicated to
 // avoid emotion dependency which breaks React 15.x back-compat
diff --git a/addons/links/src/preview.test.ts b/addons/links/src/utils.test.ts
similarity index 97%
rename from addons/links/src/preview.test.ts
rename to addons/links/src/utils.test.ts
index f5dd3af355f..fb2126018bf 100644
--- a/addons/links/src/preview.test.ts
+++ b/addons/links/src/utils.test.ts
@@ -1,7 +1,7 @@
 import { addons } from '@storybook/addons';
 import { SELECT_STORY } from '@storybook/core-events';
 
-import { linkTo, hrefTo } from './preview';
+import { linkTo, hrefTo } from './utils';
 
 jest.mock('@storybook/addons');
 jest.mock('global', () => ({
diff --git a/addons/links/src/utils.ts b/addons/links/src/utils.ts
new file mode 100644
index 00000000000..3082bedc09b
--- /dev/null
+++ b/addons/links/src/utils.ts
@@ -0,0 +1,91 @@
+import global from 'global';
+import qs from 'qs';
+import { addons, makeDecorator } from '@storybook/addons';
+import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
+import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf';
+import { toId } from '@storybook/csf';
+import { PARAM_KEY } from './constants';
+
+const { document, HTMLElement } = global;
+
+interface ParamsId {
+  storyId: StoryId;
+}
+interface ParamsCombo {
+  kind?: ComponentTitle;
+  story?: StoryName;
+}
+
+export const navigate = (params: ParamsId | ParamsCombo) =>
+  addons.getChannel().emit(SELECT_STORY, params);
+
+export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string> => {
+  return new Promise((resolve) => {
+    const { location } = document;
+    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+    const existingId = [].concat(query.id)[0];
+    const titleToLink = title || existingId.split('--', 2)[0];
+    const id = toId(titleToLink, name);
+    const url = `${location.origin + location.pathname}?${qs.stringify(
+      { ...query, id },
+      { encode: false }
+    )}`;
+
+    resolve(url);
+  });
+};
+
+const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
+  typeof value === 'function' ? value(...args) : value;
+
+export const linkTo =
+  (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) =>
+  (...args: any[]) => {
+    const resolver = valueOrCall(args);
+    const title = resolver(idOrTitle);
+    const name = resolver(nameInput);
+
+    if (title?.match(/--/) && !name) {
+      navigate({ storyId: title });
+    } else {
+      navigate({ kind: title, story: name });
+    }
+  };
+
+const linksListener = (e: Event) => {
+  const { target } = e;
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+  const element = target as HTMLElement;
+  const { sbKind: kind, sbStory: story } = element.dataset;
+  if (kind || story) {
+    e.preventDefault();
+    navigate({ kind, story });
+  }
+};
+
+let hasListener = false;
+
+const on = () => {
+  if (!hasListener) {
+    hasListener = true;
+    document.addEventListener('click', linksListener);
+  }
+};
+const off = () => {
+  if (hasListener) {
+    hasListener = false;
+    document.removeEventListener('click', linksListener);
+  }
+};
+
+export const withLinks = makeDecorator({
+  name: 'withLinks',
+  parameterName: PARAM_KEY,
+  wrapper: (getStory, context) => {
+    on();
+    addons.getChannel().once(STORY_CHANGED, off);
+    return getStory(context);
+  },
+});
diff --git a/addons/measure/manager.js b/addons/measure/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/measure/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/measure/package.json b/addons/measure/package.json
index 8d802cd52ac..934bc7341ee 100644
--- a/addons/measure/package.json
+++ b/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -44,11 +44,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
@@ -57,8 +57,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -71,7 +71,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Measure",
diff --git a/addons/measure/preset.js b/addons/measure/preset.js
deleted file mode 100644
index 459bbb650cc..00000000000
--- a/addons/measure/preset.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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/preview.js b/addons/measure/preview.js
new file mode 100644
index 00000000000..e726cab5a1b
--- /dev/null
+++ b/addons/measure/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preview';
diff --git a/addons/measure/register.js b/addons/measure/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/measure/register.js
+++ b/addons/measure/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/measure/src/register.tsx b/addons/measure/src/manager.tsx
similarity index 100%
rename from addons/measure/src/register.tsx
rename to addons/measure/src/manager.tsx
diff --git a/addons/measure/src/preset/addDecorator.tsx b/addons/measure/src/preview.tsx
similarity index 51%
rename from addons/measure/src/preset/addDecorator.tsx
rename to addons/measure/src/preview.tsx
index 8aabbd42a2d..c1433b927ef 100644
--- a/addons/measure/src/preset/addDecorator.tsx
+++ b/addons/measure/src/preview.tsx
@@ -1,5 +1,5 @@
-import { withMeasure } from '../withMeasure';
-import { PARAM_KEY } from '../constants';
+import { withMeasure } from './withMeasure';
+import { PARAM_KEY } from './constants';
 
 export const decorators = [withMeasure];
 
diff --git a/addons/outline/manager.js b/addons/outline/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/outline/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/outline/package.json b/addons/outline/package.json
index 0d6c015d064..cb9182c78a6 100644
--- a/addons/outline/package.json
+++ b/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -47,11 +47,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -62,8 +62,8 @@
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -76,7 +76,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Outline",
diff --git a/addons/outline/preset.js b/addons/outline/preset.js
deleted file mode 100644
index 459bbb650cc..00000000000
--- a/addons/outline/preset.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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/preview.js b/addons/outline/preview.js
new file mode 100644
index 00000000000..7817e1d278d
--- /dev/null
+++ b/addons/outline/preview.js
@@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
diff --git a/addons/outline/register.js b/addons/outline/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/outline/register.js
+++ b/addons/outline/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/outline/src/register.tsx b/addons/outline/src/manager.tsx
similarity index 100%
rename from addons/outline/src/register.tsx
rename to addons/outline/src/manager.tsx
diff --git a/addons/outline/src/preset/addDecorator.tsx b/addons/outline/src/preset/preview.tsx
similarity index 100%
rename from addons/outline/src/preset/addDecorator.tsx
rename to addons/outline/src/preset/preview.tsx
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index 429703879b4..aa888f86b8b 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -45,12 +45,12 @@
   },
   "dependencies": {
     "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-client": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-client": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
@@ -69,11 +69,11 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/angular": "6.5.0-alpha.51",
-    "@storybook/react": "6.5.0-alpha.51",
-    "@storybook/vue": "6.5.0-alpha.51",
-    "@storybook/vue3": "6.5.0-alpha.51",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/angular": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/vue": "6.5.0-alpha.55",
+    "@storybook/vue3": "6.5.0-alpha.55",
     "babel-loader": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
@@ -94,8 +94,8 @@
     "jest-preset-angular": "*",
     "jest-vue-preprocessor": "*",
     "preact": "^10.5.13",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "*",
     "svelte": "*",
     "vue": "*",
@@ -151,7 +151,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "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 4220ad13d42..7fbd257c0fb 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@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.5.0-alpha.51",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
     "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42"
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953"
 }
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 1ccf5917584..aec9ff685a8 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -41,13 +41,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/router": "6.5.0-alpha.51",
-    "@storybook/source-loader": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/router": "6.5.0-alpha.55",
+    "@storybook/source-loader": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
@@ -60,8 +60,8 @@
     "@types/react-syntax-highlighter": "^11.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -74,7 +74,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Storysource",
diff --git a/addons/storysource/preset.js b/addons/storysource/preset.js
index 9a53f8d6822..9ffb6ac993f 100644
--- a/addons/storysource/preset.js
+++ b/addons/storysource/preset.js
@@ -25,7 +25,7 @@ function webpack(webpackConfig = {}, options = {}) {
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
+  return [...entry, require.resolve('./dist/esm/manager')];
 }
 
 module.exports = { webpack, managerEntries };
diff --git a/addons/storysource/register.js b/addons/storysource/register.js
index f209c0eb370..4e287d25b15 100644
--- a/addons/storysource/register.js
+++ b/addons/storysource/register.js
@@ -1 +1 @@
-require('./dist/esm/register');
+import './dist/esm/manager';
diff --git a/addons/storysource/src/register.tsx b/addons/storysource/src/manager.tsx
similarity index 100%
rename from addons/storysource/src/register.tsx
rename to addons/storysource/src/manager.tsx
diff --git a/addons/toolbars/manager.js b/addons/toolbars/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/toolbars/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
index a955c631e8a..b6d56ff52d8 100644
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -25,9 +25,9 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
-  "types": "dist/ts3.9/register.d.ts",
+  "main": "dist/cjs/manager.js",
+  "module": "dist/esm/manager.js",
+  "types": "dist/ts3.9/manager.d.ts",
   "typesVersions": {
     "<3.8": {
       "dist/ts3.9/*": [
@@ -45,16 +45,17 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -67,8 +68,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
-  "sbmodern": "dist/modern/register.js",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
+  "sbmodern": "dist/modern/manager.js",
   "storybook": {
     "displayName": "Toolbars",
     "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
diff --git a/addons/toolbars/preset.js b/addons/toolbars/preset.js
deleted file mode 100644
index 656f27562a4..00000000000
--- a/addons/toolbars/preset.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };
diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js
index 681a5d09dce..2d916bea61a 100644
--- a/addons/toolbars/register.js
+++ b/addons/toolbars/register.js
@@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/toolbars/src/register.tsx b/addons/toolbars/src/manager.tsx
similarity index 100%
rename from addons/toolbars/src/register.tsx
rename to addons/toolbars/src/manager.tsx
diff --git a/addons/viewport/manager.js b/addons/viewport/manager.js
new file mode 100644
index 00000000000..4e287d25b15
--- /dev/null
+++ b/addons/viewport/manager.js
@@ -0,0 +1 @@
+import './dist/esm/manager';
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index e2a80843c3e..96365697485 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -42,12 +42,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -55,8 +55,8 @@
     "regenerator-runtime": "^0.13.7"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -69,7 +69,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/preview.js",
   "storybook": {
     "displayName": "Viewport",
diff --git a/addons/viewport/preset.js b/addons/viewport/preset.js
deleted file mode 100644
index 656f27562a4..00000000000
--- a/addons/viewport/preset.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };
diff --git a/addons/viewport/register.js b/addons/viewport/register.js
index f209c0eb370..2d916bea61a 100644
--- a/addons/viewport/register.js
+++ b/addons/viewport/register.js
@@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
diff --git a/addons/viewport/src/register.tsx b/addons/viewport/src/manager.tsx
similarity index 100%
rename from addons/viewport/src/register.tsx
rename to addons/viewport/src/manager.tsx
diff --git a/app/angular/package.json b/app/angular/package.json
index 7e8d1929cb5..1aac792f668 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,17 +45,17 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
@@ -80,7 +80,7 @@
     "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "util-deprecate": "^1.0.2",
-    "webpack": "4"
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.1102.0",
@@ -101,7 +101,8 @@
     "jest": "^26.6.3",
     "jest-preset-angular": "^8.3.2",
     "jest-specific-snapshot": "^4.0.0",
-    "tmp": "^0.2.1"
+    "tmp": "^0.2.1",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.8.9",
@@ -136,5 +137,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42"
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953"
 }
diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts
index fa356f688eb..235ddead5e0 100644
--- a/app/angular/src/server/framework-preset-angular-cli.test.ts
+++ b/app/angular/src/server/framework-preset-angular-cli.test.ts
@@ -766,8 +766,8 @@ const newWebpackConfiguration = (
     bail: false,
     devtool: 'cheap-module-source-map',
     entry: [
-      '/Users/joe/storybook/lib/core-server/dist/cjs/globals/polyfills.js',
-      '/Users/joe/storybook/lib/core-server/dist/cjs/globals/globals.js',
+      '/Users/joe/storybook/lib/core-server/dist/esm/globals/polyfills.js',
+      '/Users/joe/storybook/lib/core-server/dist/esm/globals/globals.js',
       '/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',
       '/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',
       '/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',
diff --git a/app/angular/src/server/framework-preset-angular-docs.ts b/app/angular/src/server/framework-preset-angular-docs.ts
index 314ef6039f3..1c2cac0c15e 100644
--- a/app/angular/src/server/framework-preset-angular-docs.ts
+++ b/app/angular/src/server/framework-preset-angular-docs.ts
@@ -2,7 +2,7 @@ import path from 'path';
 import { StorybookConfig } from '@storybook/core-common';
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')];
 };
diff --git a/app/angular/src/server/preset.ts b/app/angular/src/server/preset.ts
index ab7d7dd6305..65dc2fa28dc 100644
--- a/app/angular/src/server/preset.ts
+++ b/app/angular/src/server/preset.ts
@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/core-common';
 
-export const config: StorybookConfig['config'] = (entries = []) => [
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [
   ...entries,
   require.resolve('../client/preview/config'),
 ];
diff --git a/app/ember/package.json b/app/ember/package.json
index 2f50082b79c..37268571c35 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
   "bugs": {
@@ -42,10 +42,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -66,6 +66,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/ember/src/server/framework-preset-babel-ember.ts b/app/ember/src/server/framework-preset-babel-ember.ts
index 85bb723bee7..da857b38fad 100644
--- a/app/ember/src/server/framework-preset-babel-ember.ts
+++ b/app/ember/src/server/framework-preset-babel-ember.ts
@@ -48,6 +48,6 @@ export function babel(config: TransformOptions, options: Options): TransformOpti
   };
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/ember/src/server/framework-preset-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts
index c2e6f69be8f..2cdcc56e7cb 100644
--- a/app/ember/src/server/framework-preset-ember-docs.ts
+++ b/app/ember/src/server/framework-preset-ember-docs.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common';
 import { findDistEsm } from '@storybook/core-common';
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/html/package.json b/app/html/package.json
index 0a00e836b00..8fd5af57317 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -62,6 +62,9 @@
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
+    "webpack": ">=4.0.0 <6.0.0"
+  },
+  "devDependencies": {
     "webpack": "4"
   },
   "peerDependencies": {
@@ -73,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/html/src/server/framework-preset-html-docs.ts b/app/html/src/server/framework-preset-html-docs.ts
index c2e6f69be8f..2cdcc56e7cb 100644
--- a/app/html/src/server/framework-preset-html-docs.ts
+++ b/app/html/src/server/framework-preset-html-docs.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common';
 import { findDistEsm } from '@storybook/core-common';
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/html/src/server/framework-preset-html.ts b/app/html/src/server/framework-preset-html.ts
index 10b69f8fafd..48108689827 100644
--- a/app/html/src/server/framework-preset-html.ts
+++ b/app/html/src/server/framework-preset-html.ts
@@ -11,6 +11,6 @@ export function webpack(config: Configuration) {
   return config;
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/preact/package.json b/app/preact/package.json
index bb577107bb4..e07e472d03c 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -59,15 +59,16 @@
     "react-dom": "16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.0.0",
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
-    "preact": "^10.5.13"
+    "preact": "^10.5.13",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "preact": "^8.0.0||^10.0.0",
-    "webpack": "*"
+    "preact": "^8.0.0||^10.0.0"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -75,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/preact/src/server/framework-preset-preact.ts b/app/preact/src/server/framework-preset-preact.ts
index 034cd1f4f72..9a50492d348 100644
--- a/app/preact/src/server/framework-preset-preact.ts
+++ b/app/preact/src/server/framework-preset-preact.ts
@@ -29,6 +29,6 @@ export function webpackFinal(config: Configuration): Configuration {
   };
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/react/package.json b/app/react/package.json
index 42677401898..3d4907dd125 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,16 +49,16 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/estree": "^0.0.51",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
@@ -88,8 +88,8 @@
   "peerDependencies": {
     "@babel/core": "^7.11.5",
     "jest-specific-snapshot": "^4.0.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "require-from-string": "^2.0.2"
   },
   "peerDependenciesMeta": {
@@ -118,6 +118,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/react/src/client/index.ts b/app/react/src/client/index.ts
index 54de76c8585..141f7e7f43f 100644
--- a/app/react/src/client/index.ts
+++ b/app/react/src/client/index.ts
@@ -9,6 +9,7 @@ export {
   raw,
   forceReRender,
 } from './preview';
+export * from './testing';
 
 export * from './preview/types-6-3';
 
diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts
new file mode 100644
index 00000000000..8099a10b9ff
--- /dev/null
+++ b/app/react/src/client/testing/index.ts
@@ -0,0 +1,129 @@
+import {
+  composeStory as originalComposeStory,
+  composeStories as originalComposeStories,
+  setProjectAnnotations as originalSetProjectAnnotations,
+  CSFExports,
+  ComposedStory,
+  StoriesWithPartialProps,
+} from '@storybook/store';
+import { ProjectAnnotations, Args } from '@storybook/csf';
+import { once } from '@storybook/client-logger';
+
+import { render } from '../preview/render';
+import type { Meta, ReactFramework } from '../preview/types-6-0';
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(
+  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+) {
+  originalSetProjectAnnotations(projectAnnotations);
+}
+
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+export function setGlobalConfig(
+  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+) {
+  once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
+  setProjectAnnotations(projectAnnotations);
+}
+
+// This will not be necessary once we have auto preset loading
+const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
+  render,
+};
+
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+export function composeStory<TArgs = Args>(
+  story: ComposedStory<ReactFramework, TArgs>,
+  componentAnnotations: Meta<TArgs | any>,
+  projectAnnotations?: ProjectAnnotations<ReactFramework>,
+  exportsName?: string
+) {
+  return originalComposeStory<ReactFramework, TArgs>(
+    story,
+    componentAnnotations,
+    projectAnnotations,
+    defaultProjectAnnotations,
+    exportsName
+  );
+}
+
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+export function composeStories<TModule extends CSFExports<ReactFramework>>(
+  csfExports: TModule,
+  projectAnnotations?: ProjectAnnotations<ReactFramework>
+) {
+  const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+
+  return composedStories as unknown as Omit<
+    StoriesWithPartialProps<ReactFramework, TModule>,
+    keyof CSFExports
+  >;
+}
diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts
index 723cf49a9f2..98f9c12145b 100644
--- a/app/react/src/server/framework-preset-react-docs.ts
+++ b/app/react/src/server/framework-preset-react-docs.ts
@@ -58,7 +58,7 @@ export async function webpackFinal(config: Configuration, options: Options) {
   };
 }
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts
index b0807877e88..87f491ca3ae 100644
--- a/app/react/src/server/preset.ts
+++ b/app/react/src/server/preset.ts
@@ -1,7 +1,7 @@
 import { findDistEsm } from '@storybook/core-common';
 import type { StorybookConfig } from '@storybook/core-common';
 
-export const config: StorybookConfig['config'] = (entries = []) => [
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [
   ...entries,
   findDistEsm(__dirname, 'client/preview/config'),
 ];
diff --git a/app/server/package.json b/app/server/package.json
index 3138cd13916..35a7d0f6eac 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/server/src/server/framework-preset-server.ts b/app/server/src/server/framework-preset-server.ts
index ddde3f77f7d..f4f552890b7 100644
--- a/app/server/src/server/framework-preset-server.ts
+++ b/app/server/src/server/framework-preset-server.ts
@@ -19,6 +19,6 @@ export function webpack(config: Configuration) {
   return config;
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/svelte/package.json b/app/svelte/package.json
index dbf2d06d9f6..fd46304e5c1 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -46,14 +46,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "loader-utils": "^2.0.0",
@@ -63,13 +63,14 @@
     "regenerator-runtime": "^0.13.7",
     "sveltedoc-parser": "4.1.0",
     "ts-dedent": "^2.0.0",
-    "webpack": "4"
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
     "@types/loader-utils": "^2.0.0",
     "@types/webpack-env": "^1.16.0",
     "svelte": "^3.31.2",
-    "svelte-loader": "^3.0.0"
+    "svelte-loader": "^3.0.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -82,6 +83,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/svelte/src/server/framework-preset-svelte-docs.ts b/app/svelte/src/server/framework-preset-svelte-docs.ts
index ba1a7fee016..4160fc5d40d 100644
--- a/app/svelte/src/server/framework-preset-svelte-docs.ts
+++ b/app/svelte/src/server/framework-preset-svelte-docs.ts
@@ -17,6 +17,6 @@ export async function webpackFinal(webpackConfig: Configuration, options: Option
   return webpackConfig;
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts
index a9bec1dc610..d3e10fbf749 100644
--- a/app/svelte/src/server/framework-preset-svelte.ts
+++ b/app/svelte/src/server/framework-preset-svelte.ts
@@ -33,6 +33,6 @@ export async function webpack(config: Configuration, options: Options): Promise<
   };
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/vue/package.json b/app/vue/package.json
index 735723f90cb..090f150446e 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -64,12 +64,13 @@
     "ts-loader": "^8.0.14",
     "vue-docgen-api": "^4.44.15",
     "vue-docgen-loader": "^1.5.0",
-    "webpack": "4"
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
     "vue": "^2.6.12",
     "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -85,6 +86,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue/src/server/framework-preset-vue-docs.ts b/app/vue/src/server/framework-preset-vue-docs.ts
index 478196fa0d8..984fa07c49c 100644
--- a/app/vue/src/server/framework-preset-vue-docs.ts
+++ b/app/vue/src/server/framework-preset-vue-docs.ts
@@ -30,7 +30,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) {
   return webpackConfig;
 }
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts
index 5ca2341d674..8656d8d3506 100644
--- a/app/vue/src/server/framework-preset-vue.ts
+++ b/app/vue/src/server/framework-preset-vue.ts
@@ -45,6 +45,6 @@ export async function webpack(config: Configuration, { presets }: Options) {
   return config;
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/vue3/package.json b/app/vue3/package.json
index 4338c1f3035..ce098675565 100644
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -64,11 +64,12 @@
     "vue-docgen-api": "^4.44.15",
     "vue-docgen-loader": "^1.5.0",
     "vue-loader": "^16.0.0",
-    "webpack": "4"
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "3.0.0",
-    "vue": "3.0.0"
+    "vue": "3.0.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -82,6 +83,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/vue3/src/server/framework-preset-vue3-docs.ts b/app/vue3/src/server/framework-preset-vue3-docs.ts
index 34e755af3f1..b97af76f15f 100644
--- a/app/vue3/src/server/framework-preset-vue3-docs.ts
+++ b/app/vue3/src/server/framework-preset-vue3-docs.ts
@@ -31,7 +31,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) {
   return webpackConfig;
 }
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts
index 0db63e4cd19..fb4dc76a288 100644
--- a/app/vue3/src/server/framework-preset-vue3.ts
+++ b/app/vue3/src/server/framework-preset-vue3.ts
@@ -48,6 +48,6 @@ export function webpack(config: Configuration): Configuration {
   };
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/app/web-components/package.json b/app/web-components/package.json
index b6235dea4db..c7af8eb5d38 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
@@ -50,15 +50,15 @@
     "@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.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "babel-plugin-bundled-import-meta": "^0.3.1",
@@ -82,6 +82,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }
diff --git a/app/web-components/src/server/framework-preset-web-components-docs.ts b/app/web-components/src/server/framework-preset-web-components-docs.ts
index 507496e7407..31ccb922f3f 100644
--- a/app/web-components/src/server/framework-preset-web-components-docs.ts
+++ b/app/web-components/src/server/framework-preset-web-components-docs.ts
@@ -1,7 +1,7 @@
 import { findDistEsm, StorybookConfig } from '@storybook/core-common';
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
-export const config: StorybookConfig['config'] = (entry = [], options) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };
diff --git a/app/web-components/src/server/framework-preset-web-components.ts b/app/web-components/src/server/framework-preset-web-components.ts
index 44e273ff8f3..19c53742094 100644
--- a/app/web-components/src/server/framework-preset-web-components.ts
+++ b/app/web-components/src/server/framework-preset-web-components.ts
@@ -41,6 +41,6 @@ export function webpack(config: Configuration, options: Options) {
   return config;
 }
 
-export const config: StorybookConfig['config'] = (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };
diff --git a/cypress/generated/basic.spec.ts b/cypress/generated/basic.spec.ts
index efb67e23f8a..589762497a2 100644
--- a/cypress/generated/basic.spec.ts
+++ b/cypress/generated/basic.spec.ts
@@ -58,13 +58,6 @@ describe('Basic CLI', () => {
   });
 
   describe('Page story', () => {
-    it('should load and display logged in', () => {
-      cy.navigateToStory('example-page', 'logged-in');
-      cy.getStoryElement().find('header').should('contain.text', 'Acme');
-      cy.getStoryElement().find('button').should('contain.text', 'Log out');
-      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
-    });
-
     it('should load and display logged out', () => {
       cy.navigateToStory('example-page', 'logged-out');
       cy.getStoryElement().should('contain.text', 'Acme');
@@ -72,5 +65,12 @@ describe('Basic CLI', () => {
       cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
       cy.getStoryElement().should('contain.text', 'Pages in Storybook');
     });
+
+    it('should load and display logged in', () => {
+      cy.navigateToStory('example-page', 'logged-in');
+      cy.getStoryElement().find('header').should('contain.text', 'Acme');
+      cy.getStoryElement().find('button').should('contain.text', 'Log out');
+      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+    });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 5d8e47605ce..d5e6e32cadf 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -97,12 +97,18 @@ Cypress.Commands.add('navigateToStory', (kind, name) => {
   const storyLinkId = `#${kindId}--${storyId}`;
   cy.log(`navigateToStory ${kind} ${name}`);
 
+  // docs-only stories
   if (name !== 'page') {
     // Section might be collapsed
-    cy.get(`#${kindId}`).then(($item) => {
-      if ($item.attr('aria-expanded') === 'false') $item.click();
+    cy.get(`#${kindId}`).then(async ($item) => {
+      if ($item.attr('aria-expanded') === 'false') {
+        await $item.click();
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(300);
+      }
     });
   }
+
   cy.get(storyLinkId).click({ force: true });
 
   // FIXME: Find a way to not wait like this but check for an element in the UI
diff --git a/docs/addons/addon-knowledge-base.md b/docs/addons/addon-knowledge-base.md
index acb9c2a8fd5..2e174ca405f 100644
--- a/docs/addons/addon-knowledge-base.md
+++ b/docs/addons/addon-knowledge-base.md
@@ -70,7 +70,7 @@ Complementing the components, also included is a set of UI primitives. Use the c
 
 | Component                       | Source                                                                                                       | Story                                                                                                         |
 | ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| Color Pallette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors)         | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
+| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors)         | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
 | Icon                            | [See implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels)       |
 | Typography                      | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/typography)     | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all)    |
 
diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
index ab9198c5f78..038223868c0 100644
--- a/docs/addons/writing-presets.md
+++ b/docs/addons/writing-presets.md
@@ -196,7 +196,7 @@ If it doesn't exist yet, create a file `.storybook/main.js`:
 
 It's also possible to programmatically modify the preview head/body HTML using a preset, similar to the way `preview-head.html`/`preview-body.html` can be used to [configure story rendering](../configure/story-rendering.md). The `previewHead` and `previewBody` functions accept a string, which is the existing head/body, and return a modified string.
 
-For example, the following snippet adds a style tag to the preview head programatically:
+For example, the following snippet adds a style tag to the preview head programmatically:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index e2928d0826c..7993bb7296f 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -85,6 +85,7 @@ Above, we're creating a new theme that will:
 - Use Storybook's `light` theme as a baseline.
 - Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
 - Add custom branding information.
+- Set the brand link to open in the same window (as opposed to a new one), via the `target` attribute.
 
 Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
 
@@ -226,4 +227,4 @@ Or with template literals:
   ]}
 />
 
-<!-- prettier-ignore-end -->
\ No newline at end of file
+<!-- prettier-ignore-end -->
diff --git a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
index 423d9de4a6b..15b10326a49 100644
--- a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './button.component';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
index 20b6d5cc2a4..cd28004a98a 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
index c0bdc930706..8df09b4367a 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -23,7 +23,7 @@ const Template: Story = (args) => ({
 export const DelayedStory: Story = Template.bind({});
 DelayedStory.play = () => {
   const exampleElement= screen.getByLabelText('example-element');
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index 7c1ccf730ef..77d83335206 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// your-addon/register.js
+// your-addon/manager.js
 
 import { useArgs } from '@storybook/api';
 
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
index 72c6f1e7cb0..8009d61ac4f 100644
--- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx
+++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx
index 8e4794320c1..fc9f821e60c 100644
--- a/docs/snippets/common/storybook-addon-change-panel.js.mdx
+++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
 
 import { useParameter } from '@storybook/api';
 
diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
index b8dc0b43b88..f74d563d536 100644
--- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx
index 5f3898b61c6..29d8a1ab9d4 100644
--- a/docs/snippets/common/storybook-addon-panel-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// addon-panel/register.js
+// addon-panel/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index fb4b80e7cff..9f9e6b6c05f 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx
index bbfddd9627c..dcfa1b41f92 100644
--- a/docs/snippets/common/storybook-addon-tab-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// addon-tab/register.js
+// addon-tab/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 37ca2cfb271..869c9df49ad 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// addon-toolbar/register.js
+// addon-toolbar/manager.js
 
 import React from "react";
 
diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
index 415edea16fd..6f5f9e3845a 100644
--- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
index 76513f99291..0c324ddd0d2 100644
--- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.getQueryParam('bbc');
diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
index e7e9f13fe83..39321b7f195 100644
--- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   const href = api.getUrlState({
diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx
index eb2af57b1a9..e44d88ab048 100644
--- a/docs/snippets/common/storybook-addons-api-imports.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
 
 import { addons } from '@storybook/addons';
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
index 2f69823954b..3c9617bfa19 100644
--- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
 
 import { makeDecorator } from '@storybook/addons';
 
diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx
index aa2e706c51c..ac86c5e4391 100644
--- a/docs/snippets/common/storybook-addons-api-on.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-on.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.on('some-event', (eventData) => console.log(eventData));
diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx
index 009b2ea7e66..3c044eebd8c 100644
--- a/docs/snippets/common/storybook-addons-api-register.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-register.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
 
 import { addons } from '@storybook/addons';
 
diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
index 24b46cc3191..46c89f25fa4 100644
--- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.selectInCurrentKind('Basic');
diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
index bd1314b7ec4..4af2f91bc3a 100644
--- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.selectStory('Button', 'Basic');
diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
index 988482dbd3a..bbfaa727b72 100644
--- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 addons.register('my-organisation/my-addon', (api) => {
   api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index c0800d6d301..6d6db143ba1 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index f88c1c1524a..f6c05424dc6 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index 7184c752dc0..f017c5cfccb 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
index 94f5a8b8331..ad33aef3425 100644
--- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
index 3c496cbb2a0..fdbc7430178 100644
--- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
index 62f1605af9f..4e1515a3b6b 100644
--- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// /my-addon/register.js
+// /my-addon/manager.js
 
 import React from 'react';
 
diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
index 3187d5e6f3a..f34c4859bfb 100644
--- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
+++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
 
 import { useArgTypes } from '@storybook/api';
 
diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx
index 0f587017ee8..675a1d62c08 100644
--- a/docs/snippets/common/storybook-main-register-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-addon.js.mdx
@@ -2,6 +2,6 @@
 // .storybook/main.js
 
 module.exports = {
-  addons: ['path/to/register.js'],
+  addons: ['path/to/manager.js'],
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
index 4a913b4f8aa..18fa46acdf1 100644
--- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
+++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
@@ -3,7 +3,6 @@
 
 module.exports = {
   addons: [
-    '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
     '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
   ],
 };
diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
index 5bbaa228a80..02479932037 100644
--- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
@@ -2,6 +2,6 @@
 // .storybook/main.js
 
 module.exports = {
-  managerEntries: ['@storybook/addon-storysource/register'],
+  managerEntries: ['some-storybook-addon/entry-point.js'],
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
index 5e792ec1d29..e9c5dec6d95 100644
--- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
@@ -1,7 +1,5 @@
 ```js
 // storysource/preset.js
 
-export function managerEntries(entry = []) {
-  return [...entry, require.resolve('@storybook/addon-storysource/register')];
-}
+/* nothing needed */
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
index 5fcafab8725..6c3be843f09 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
@@ -8,5 +8,6 @@ export default create({
   brandTitle: 'My custom storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
+  brandTarget: '_self',
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 24f9771bad3..4858c332aa1 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -37,5 +37,6 @@ export default create({
   brandTitle: 'My custom storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
+  brandTarget: '_self',
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-blue-args.mdx.mdx b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
index f9f69d188f7..7c5e3c68278 100644
--- a/docs/snippets/react/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './Button';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
index 160069be784..86f04def681 100644
--- a/docs/snippets/react/document-screen-fetch.js.mdx
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -22,7 +22,7 @@ function useFetchData() {
       })
       .then((res) => res.json())
       .then((data) => {
-        setStatus('sucess');
+        setStatus('success');
         setData(data);
       })
       .catch(() => {
diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
index 434cd2304a6..327268a8187 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
@@ -22,7 +22,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
diff --git a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
index 44dd26e7fd9..6f75e352c88 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => <MyComponent {...args} />;
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index 93ce662baab..6c825f89a95 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -24,7 +24,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
diff --git a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
index 68046a1c382..41319b1a8b0 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import Button  from './Button.svelte';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
index 2c84dca6544..b87c662fc8b 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
index 79f0fee163c..21ee812dd57 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
@@ -19,7 +19,7 @@ export const Template = (args) => ({
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
diff --git a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
index 062da40594b..445dcaceb6b 100644
--- a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import Button from './Button.vue';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
index f055e902896..2d1c49c9ac7 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
index 3808d6a064d..162a4e51884 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx
@@ -19,7 +19,7 @@ const Template = (args) => ({
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
diff --git a/docs/versions/next.json b/docs/versions/next.json
index b1af8e88eff..5d0f725f73c 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"6.5.0-alpha.51","info":{"plain":"### Features\n\n- SyntaxHighlighter: Add prettier for code formatting ([#17746](https://github.com/storybookjs/storybook/pull/17746))\n\n### Maintenance\n\n- Build: Add main overrides to e2e config and possibility to run test runner ([#17778](https://github.com/storybookjs/storybook/pull/17778))"}}
\ No newline at end of file
+{"version":"6.5.0-alpha.55","info":{"plain":"### Features\n\n- CLI: Detect vite project, use vite builder automatically ([#17860](https://github.com/storybookjs/storybook/pull/17860))\n- CLI: Default new vite projects to storyStoreV7 ([#17859](https://github.com/storybookjs/storybook/pull/17859))\n\n### Bug Fixes\n\n- Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861))\n- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))"}}
\ No newline at end of file
diff --git a/docs/writing-docs/doc-block-description.md b/docs/writing-docs/doc-block-description.md
index 52726f124a1..c2a25ea2931 100644
--- a/docs/writing-docs/doc-block-description.md
+++ b/docs/writing-docs/doc-block-description.md
@@ -25,7 +25,7 @@ Storybook extracts the component's description and renders it at the top of the
 | `component` | Overrides the default component description. <br/> `description: { component:'An example component description' }`                                                |
 | `markdown`  | Provides custom Markdown for the component description. <br/> `<Description markdown={dedent'# Custom Description'} />` <br/> Only applicable to MDX.             |
 | `story`     | Overrides the story description. <br/> `description: { story: 'An example story description' }`                                                                   |
-| `of`        | Sets the description based either on a component or story. <br/> `<Description of={Commponent} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
+| `of`        | Sets the description based either on a component or story. <br/> `<Description of={Component} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
 
 ## Working with MDX
 
diff --git a/docs/writing-docs/doc-block-icongallery.md b/docs/writing-docs/doc-block-icongallery.md
index 82b948071d8..bcbddfd13c1 100644
--- a/docs/writing-docs/doc-block-icongallery.md
+++ b/docs/writing-docs/doc-block-icongallery.md
@@ -8,7 +8,7 @@ Storybook's `IconGallery` Doc Block enables you easily document all icons associ
 
 ## Working with MDX
 
-Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-block-typeset.md), or [`ColorPallete`](./doc-block-colorpalette.md), the `IconGallery` is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options.
+Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-block-typeset.md), or [`ColorPalette`](./doc-block-colorpalette.md), the `IconGallery` is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options.
 
 <!-- prettier-ignore-start -->
 
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index f289ed5201f..0959520cbbf 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -39,21 +39,21 @@
     "@angular/compiler-cli": "^11.2.14",
     "@angular/elements": "^11.2.14",
     "@compodoc/compodoc": "^1.1.18",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-interactions": "6.5.0-alpha.51",
-    "@storybook/addon-jest": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/angular": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-interactions": "6.5.0-alpha.55",
+    "@storybook/addon-jest": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/angular": "6.5.0-alpha.55",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/jest": "^0.0.5",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "@storybook/testing-library": "^0.0.7",
     "@types/core-js": "^2.5.4",
     "@types/jest": "^26.0.16",
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 1fe3ec96a4e..deb477a3017 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -11,7 +11,7 @@
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "react": "16.14.0",
@@ -21,19 +21,19 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-jest": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
+    "@storybook/addon-jest": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index bdedb1cdb39..c832ed76cc6 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-react15",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -19,14 +19,14 @@
     "react-scripts": "3.4.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.5.0-alpha.51",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "babel-core": "6",
     "babel-runtime": "6",
     "webpack": "4"
diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.ts
similarity index 74%
rename from examples/cra-ts-essentials/.storybook/main.js
rename to examples/cra-ts-essentials/.storybook/main.ts
index 97a4e0a2b0f..4ec79b0ac3f 100644
--- a/examples/cra-ts-essentials/.storybook/main.js
+++ b/examples/cra-ts-essentials/.storybook/main.ts
@@ -1,6 +1,8 @@
+import type { StorybookConfig } from '@storybook/react/types';
+
 const path = require('path');
 
-module.exports = {
+const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx|mdx)'],
   addons: [
     '@storybook/preset-create-react-app',
@@ -13,9 +15,9 @@ module.exports = {
     },
   ],
   logLevel: 'debug',
-  webpackFinal: (config) => {
+  webpackFinal: async (config) => {
     // add monorepo root as a valid directory to import modules from
-    config.resolve.plugins.forEach((p) => {
+    config.resolve?.plugins?.forEach((p: any) => {
       if (Array.isArray(p.appSrcs)) {
         p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
       }
@@ -30,3 +32,5 @@ module.exports = {
     buildStoriesJson: true,
   },
 };
+
+module.exports = mainConfig;
diff --git a/examples/cra-ts-essentials/.storybook/preview.js b/examples/cra-ts-essentials/.storybook/preview.tsx
similarity index 55%
rename from examples/cra-ts-essentials/.storybook/preview.js
rename to examples/cra-ts-essentials/.storybook/preview.tsx
index 305c8eb0be1..54093cc18b6 100644
--- a/examples/cra-ts-essentials/.storybook/preview.js
+++ b/examples/cra-ts-essentials/.storybook/preview.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
+import type { DecoratorFn } from '@storybook/react';
+import { ThemeProvider, convert, themes } from '@storybook/theming';
 
-export const decorators = [
-  (StoryFn, { globals: { locale = 'en' } }) => (
+export const decorators: DecoratorFn[] = [
+  (StoryFn, { globals: { locale } }) => (
     <>
-      <div>{locale}</div>
+      <div>Locale: {locale}</div>
       <StoryFn />
     </>
   ),
+  (StoryFn) => (
+    <ThemeProvider theme={convert(themes.light)}>
+      <StoryFn />
+    </ThemeProvider>
+  ),
 ];
 
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
 export const globalTypes = {
   locale: {
     name: 'Locale',
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index c94b5b75c26..bc8c321df8e 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-essentials",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -8,7 +8,7 @@
     "eject": "react-scripts eject",
     "start": "react-scripts start",
     "storybook": "start-storybook -p 9009 --no-manager-cache",
-    "test": "react-scripts test"
+    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
   },
   "browserslist": {
     "production": [
@@ -23,10 +23,13 @@
     ]
   },
   "dependencies": {
+    "@storybook/components": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.51",
     "@types/jest": "^26.0.16",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
-    "@types/react-dom": "^16.9.14",
+    "@types/react-dom": "16.9.14",
+    "formik": "2.2.9",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -34,12 +37,13 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.5.0-alpha.51",
+    "@storybook/addon-essentials": "6.5.0-alpha.55",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.5.0-alpha.51",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/testing-library": "^0.0.9",
     "webpack": "4"
   },
   "storybook": {
diff --git a/examples/cra-ts-essentials/src/setupTests.ts b/examples/cra-ts-essentials/src/setupTests.ts
new file mode 100644
index 00000000000..e65a5923ef0
--- /dev/null
+++ b/examples/cra-ts-essentials/src/setupTests.ts
@@ -0,0 +1,4 @@
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from '../.storybook/preview';
+
+setProjectAnnotations(projectAnnotations);
diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
index 9920a416e1f..ec39dbbe481 100644
--- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 export default {
   title: 'Welcome',
   component: Welcome,
-};
+} as ComponentMeta<typeof Welcome>;
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook: ComponentStory<typeof Welcome> = () => (
+  <Welcome showApp={linkTo('Button')} />
+);
 
 ToStorybook.storyName = 'to Storybook';
diff --git a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
index e952509a901..c3d83e4544a 100644
--- a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Button } from '@storybook/react/demo';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
 
 export default {
   title: 'Button',
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
-};
+} as ComponentMeta<typeof Button>;
 
-const Template = (args: any) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const Text = Template.bind({});
 Text.args = {
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx
new file mode 100644
index 00000000000..7ecfa715fd2
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx
@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React from 'react';
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { AccountForm, AccountFormProps } from './AccountForm';
+
+export default {
+  title: 'CSF3/AccountForm',
+  component: AccountForm,
+  parameters: {
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof AccountForm>;
+
+type Story = ComponentStoryObj<typeof AccountForm>;
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+export const Standard: Story = {
+  args: { passwordVerification: false },
+};
+
+export const StandardEmailFilled: Story = {
+  ...Standard,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
+  },
+};
+
+export const StandardEmailFailed: Story = {
+  ...Standard,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com.com@com');
+    await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const StandardPasswordFailed: Story = {
+  ...Standard,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdf');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const StandardFailHover: Story = {
+  ...StandardPasswordFailed,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardPasswordFailed.play!(context);
+    await sleep(100);
+    await userEvent.hover(canvas.getByTestId('password-error-info'));
+  },
+};
+StandardFailHover.parameters = {
+  // IE fails with userEvent.hover
+  chromatic: { disableSnapshot: true },
+};
+
+export const Verification: Story = {
+  args: { passwordVerification: true },
+};
+
+export const VerificationPasssword1: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const VerificationPasswordMismatch: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const VerificationSuccess: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await sleep(1000);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.type(canvas.getByTestId('password2'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+// IE fails with this interaction
+VerificationSuccess.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
+
+export const StandardWithRenderFunction: Story = {
+  ...Standard,
+  render: (args: AccountFormProps) => (
+    <div>
+      <p>This uses a custom render</p>
+      <AccountForm {...args} />
+    </div>
+  ),
+};
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx
new file mode 100644
index 00000000000..4dd5f7bef31
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { composeStories, composeStory } from '@storybook/react';
+
+import * as stories from './AccountForm.stories';
+
+const { Standard } = composeStories(stories);
+
+test('renders form', async () => {
+  await render(<Standard />);
+  expect(screen.getByTestId('email')).not.toBe(null);
+});
+
+test('fills input from play function', async () => {
+  const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default);
+  const { container } = await render(<StandardEmailFilled />);
+
+  await StandardEmailFilled.play({ canvasElement: container });
+
+  const emailInput = screen.getByTestId('email') as HTMLInputElement;
+  expect(emailInput.value).toBe('michael@chromatic.com');
+});
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx
new file mode 100644
index 00000000000..b646a174143
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx
@@ -0,0 +1,552 @@
+import React, { FC, HTMLAttributes, useCallback, useState } from 'react';
+import { keyframes, styled } from '@storybook/theming';
+import {
+  ErrorMessage,
+  Field as FormikInput,
+  Form as FormikForm,
+  Formik,
+  FormikProps,
+} from 'formik';
+import { Icons, WithTooltip } from '@storybook/components';
+
+const errorMap = {
+  email: {
+    required: {
+      normal: 'Please enter your email address',
+      tooltip:
+        'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with',
+    },
+    format: {
+      normal: 'Please enter a correctly formatted email address',
+      tooltip:
+        'Your email address is formatted incorrectly and is not correct - please double check for misspelling',
+    },
+  },
+  password: {
+    required: {
+      normal: 'Please enter a password',
+      tooltip: 'A password is requried to create an account',
+    },
+    length: {
+      normal: 'Please enter a password of minimum 6 characters',
+      tooltip:
+        'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements',
+    },
+  },
+  verifiedPassword: {
+    required: {
+      normal: 'Please verify your password',
+      tooltip:
+        'Verification of your password is required to ensure no errors in the spelling of the password',
+    },
+    match: {
+      normal: 'Your passwords do not match',
+      tooltip:
+        'Your verification password has to match your password to make sure you have not misspelled',
+    },
+  },
+};
+
+// https://emailregex.com/
+const email99RegExp = new RegExp(
+  // eslint-disable-next-line no-useless-escape
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+);
+
+export interface AccountFormResponse {
+  success: boolean;
+}
+
+export interface AccountFormValues {
+  email: string;
+  password: string;
+}
+
+interface FormValues extends AccountFormValues {
+  verifiedPassword: string;
+}
+
+interface FormErrors {
+  email?: string;
+  emailTooltip?: string;
+  password?: string;
+  passwordTooltip?: string;
+  verifiedPassword?: string;
+  verifiedPasswordTooltip?: string;
+}
+
+export type AccountFormProps = {
+  passwordVerification?: boolean;
+  onSubmit?: (values: AccountFormValues) => void;
+  onTransactionStart?: (values: AccountFormValues) => void;
+  onTransactionEnd?: (values: AccountFormResponse) => void;
+};
+
+export const AccountForm: FC<AccountFormProps> = ({
+  passwordVerification,
+  onSubmit,
+  onTransactionStart,
+  onTransactionEnd,
+}) => {
+  const [state, setState] = useState({
+    transacting: false,
+    transactionSuccess: false,
+    transactionFailure: false,
+  });
+
+  const handleFormSubmit = useCallback(
+    async ({ email, password }: FormValues, { setSubmitting, resetForm }) => {
+      if (onSubmit) {
+        onSubmit({ email, password });
+      }
+
+      if (onTransactionStart) {
+        onTransactionStart({ email, password });
+      }
+
+      setSubmitting(true);
+
+      setState({
+        ...state,
+        transacting: true,
+      });
+
+      await new Promise((r) => setTimeout(r, 2100));
+
+      const success = Math.random() < 1;
+
+      if (onTransactionEnd) {
+        onTransactionEnd({ success });
+      }
+
+      setSubmitting(false);
+      resetForm({ values: { email: '', password: '', verifiedPassword: '' } });
+
+      setState({
+        ...state,
+        transacting: false,
+        transactionSuccess: success === true,
+        transactionFailure: success === false,
+      });
+    },
+    [setState, onTransactionEnd, onTransactionStart]
+  );
+
+  return (
+    <Wrapper>
+      <Brand>
+        <Logo
+          aria-label="Storybook Logo"
+          viewBox="0 0 64 64"
+          transacting={state.transacting}
+          role="img"
+        >
+          <title>Storybook icon</title>
+          <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <path
+              d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
+              id="path-1"
+              fill="#FF4785"
+              fillRule="nonzero"
+            />
+            <path
+              d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
+              id="path9_fill-path"
+              fill="#FFFFFF"
+              fillRule="nonzero"
+            />
+            <path
+              d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </Logo>
+        <Title aria-label="Storybook" viewBox="0 0 200 40" role="img">
+          <title>Storybook</title>
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
+              fill="currentColor"
+            />
+          </g>
+        </Title>
+      </Brand>
+      {!state.transactionSuccess && !state.transactionFailure && (
+        <Introduction>Create an account to join the Storybook community</Introduction>
+      )}
+      <Content>
+        {state.transactionSuccess && !state.transactionFailure && (
+          <Presentation>
+            <p>
+              Everything is perfect. Your account is ready and we should probably get you started!
+            </p>
+            <p>So why don't you get started then?</p>
+            <Submit
+              dirty
+              onClick={() => {
+                setState({
+                  transacting: false,
+                  transactionSuccess: false,
+                  transactionFailure: false,
+                });
+              }}
+            >
+              Go back
+            </Submit>
+          </Presentation>
+        )}
+        {state.transactionFailure && !state.transactionSuccess && (
+          <Presentation>
+            <p>What a mess, this API is not working</p>
+            <p>
+              Someone should probably have a stern talking to about this, but it won't be me - coz
+              I'm gonna head out into the nice weather
+            </p>
+            <Submit
+              dirty
+              onClick={() => {
+                setState({
+                  transacting: false,
+                  transactionSuccess: false,
+                  transactionFailure: false,
+                });
+              }}
+            >
+              Go back
+            </Submit>
+          </Presentation>
+        )}
+        {!state.transactionSuccess && !state.transactionFailure && (
+          <Formik
+            initialValues={{ email: '', password: '', verifiedPassword: '' }}
+            validateOnBlur={false}
+            validateOnChange={false}
+            onSubmit={handleFormSubmit}
+            validate={({ email, password, verifiedPassword }) => {
+              const errors: FormErrors = {};
+
+              if (!email) {
+                errors.email = errorMap.email.required.normal;
+                errors.emailTooltip = errorMap.email.required.tooltip;
+              } else {
+                const validEmail = email.match(email99RegExp);
+
+                if (validEmail === null) {
+                  errors.email = errorMap.email.format.normal;
+                  errors.emailTooltip = errorMap.email.format.tooltip;
+                }
+              }
+
+              if (!password) {
+                errors.password = errorMap.password.required.normal;
+                errors.passwordTooltip = errorMap.password.required.tooltip;
+              } else if (password.length < 6) {
+                errors.password = errorMap.password.length.normal;
+                errors.passwordTooltip = errorMap.password.length.tooltip;
+              }
+
+              if (passwordVerification && !verifiedPassword) {
+                errors.verifiedPassword = errorMap.verifiedPassword.required.normal;
+                errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip;
+              } else if (passwordVerification && password !== verifiedPassword) {
+                errors.verifiedPassword = errorMap.verifiedPassword.match.normal;
+                errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip;
+              }
+
+              return errors;
+            }}
+          >
+            {({ errors: _errors, isSubmitting, dirty }: FormikProps<FormValues>) => {
+              const errors = _errors as FormErrors;
+
+              return (
+                <Form noValidate aria-disabled={isSubmitting ? 'true' : 'false'}>
+                  <FieldWrapper>
+                    <Label htmlFor="email">Email</Label>
+                    <FormikInput id="email" name="email">
+                      {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
+                        <>
+                          <Input
+                            data-testid="email"
+                            aria-required="true"
+                            aria-disabled={isSubmitting ? 'true' : 'false'}
+                            disabled={isSubmitting}
+                            type="email"
+                            aria-invalid={errors.email ? 'true' : 'false'}
+                            {...field}
+                          />
+                          {errors.email && (
+                            <WithTooltip
+                              tooltip={<ErrorTooltip>{errors.emailTooltip}</ErrorTooltip>}
+                            >
+                              <ErrorWrapper>
+                                <ErrorIcon icon="question" height={14} />
+                                <Error name="email" component="div" />
+                              </ErrorWrapper>
+                            </WithTooltip>
+                          )}
+                        </>
+                      )}
+                    </FormikInput>
+                  </FieldWrapper>
+                  <FieldWrapper>
+                    <Label htmlFor="password">Password</Label>
+                    <FormikInput id="password" name="password">
+                      {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
+                        <Input
+                          data-testid="password1"
+                          aria-required="true"
+                          aria-disabled={isSubmitting ? 'true' : 'false'}
+                          aria-invalid={errors.password ? 'true' : 'false'}
+                          type="password"
+                          disabled={isSubmitting}
+                          {...field}
+                        />
+                      )}
+                    </FormikInput>
+                    {errors.password && (
+                      <WithTooltip tooltip={<ErrorTooltip>{errors.passwordTooltip}</ErrorTooltip>}>
+                        <ErrorWrapper data-testid="password-error-info">
+                          <ErrorIcon icon="question" height={14} />
+                          <Error name="password" component="div" />
+                        </ErrorWrapper>
+                      </WithTooltip>
+                    )}
+                  </FieldWrapper>
+                  {passwordVerification && (
+                    <FieldWrapper>
+                      <Label htmlFor="verifiedPassword">Verify Password</Label>
+                      <FormikInput id="verifiedPassword" name="verifiedPassword">
+                        {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
+                          <Input
+                            data-testid="password2"
+                            aria-required="true"
+                            aria-disabled={isSubmitting ? 'true' : 'false'}
+                            aria-invalid={errors.verifiedPassword ? 'true' : 'false'}
+                            type="password"
+                            disabled={isSubmitting}
+                            {...field}
+                          />
+                        )}
+                      </FormikInput>
+                      {errors.verifiedPassword && (
+                        <WithTooltip
+                          tooltip={<ErrorTooltip>{errors.verifiedPasswordTooltip}</ErrorTooltip>}
+                        >
+                          <ErrorWrapper>
+                            <ErrorIcon icon="question" height={14} />
+                            <Error name="verifiedPassword" component="div" />
+                          </ErrorWrapper>
+                        </WithTooltip>
+                      )}
+                    </FieldWrapper>
+                  )}
+                  <Actions>
+                    <Submit
+                      data-testid="submit"
+                      aria-disabled={isSubmitting || !dirty ? 'true' : 'false'}
+                      disabled={isSubmitting || !dirty}
+                      dirty={dirty}
+                      type="submit"
+                    >
+                      Create Account
+                    </Submit>
+                    <Reset
+                      aria-disabled={isSubmitting ? 'true' : 'false'}
+                      disabled={isSubmitting}
+                      type="reset"
+                    >
+                      Reset
+                    </Reset>
+                  </Actions>
+                </Form>
+              );
+            }}
+          </Formik>
+        )}
+      </Content>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: 450,
+  padding: 32,
+  backgroundColor: theme.background.content,
+  borderRadius: 7,
+}));
+
+const Brand = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const Title = styled.svg({
+  height: 40,
+  zIndex: 1,
+  left: -32,
+  position: 'relative',
+});
+
+const logoAnimation = keyframes({
+  '0': {
+    transform: 'rotateY(0deg)',
+    transformOrigin: '50% 5% 0',
+  },
+  '100%': {
+    transform: 'rotateY(360deg)',
+    transformOrigin: '50% 5% 0',
+  },
+});
+
+interface LogoProps {
+  transacting: boolean;
+}
+
+const Logo = styled.svg<LogoProps>(
+  ({ transacting }) =>
+    transacting && {
+      animation: `${logoAnimation} 1250ms both infinite`,
+    },
+  { height: 40, zIndex: 10, marginLeft: 32 }
+);
+
+const Introduction = styled.p({
+  marginTop: 20,
+  textAlign: 'center',
+});
+
+const Content = styled.div({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  width: 350,
+  minHeight: 189,
+  marginTop: 8,
+});
+
+const Presentation = styled.div({
+  textAlign: 'center',
+});
+
+const Form = styled(FormikForm)({
+  width: '100%',
+  alignSelf: 'flex-start',
+  '&[aria-disabled="true"]': {
+    opacity: 0.6,
+  },
+});
+
+const FieldWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'stretch',
+  marginBottom: 10,
+});
+
+const Label = styled.label({
+  fontSize: 13,
+  fontWeight: 500,
+  marginBottom: 6,
+});
+
+const Input = styled.input(({ theme }) => ({
+  fontSize: 14,
+  color: theme.color.defaultText,
+  padding: '10px 15px',
+  borderRadius: 4,
+  appearance: 'none',
+  outline: 'none',
+  border: '0 none',
+  boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset',
+  '&:focus': {
+    boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
+  },
+  '&:active': {
+    boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
+  },
+  '&[aria-invalid="true"]': {
+    boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset',
+  },
+}));
+
+const ErrorWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'flex-start',
+  fontSize: 11,
+  marginTop: 6,
+  cursor: 'help',
+});
+
+const ErrorIcon = styled(Icons)(({ theme }) => ({
+  fill: theme.color.defaultText,
+  opacity: 0.8,
+  marginRight: 6,
+  marginLeft: 2,
+  marginTop: 1,
+}));
+
+const ErrorTooltip = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: 13,
+  padding: 8,
+  maxWidth: 350,
+}));
+
+const Actions = styled.div({
+  alignSelf: 'stretch',
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: 24,
+});
+
+const Error = styled(ErrorMessage)({});
+
+interface ButtonProps {
+  dirty?: boolean;
+}
+
+const Button = styled.button<ButtonProps>({
+  backgroundColor: 'transparent',
+  border: '0 none',
+  outline: 'none',
+  appearance: 'none',
+  fontWeight: 500,
+  fontSize: 12,
+  flexBasis: '50%',
+  cursor: 'pointer',
+  padding: '11px 16px',
+  borderRadius: 4,
+  textTransform: 'uppercase',
+  '&:focus': {
+    textDecoration: 'underline',
+    fontWeight: 700,
+  },
+  '&:active': {
+    textDecoration: 'underline',
+    fontWeight: 700,
+  },
+  '&[aria-disabled="true"]': {
+    cursor: 'default',
+  },
+});
+
+const Submit = styled(Button)(({ theme, dirty }) => ({
+  marginRight: 8,
+  backgroundColor: theme.color.secondary,
+  color: theme.color.inverseText,
+  opacity: dirty ? 1 : 0.6,
+  boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset',
+}));
+
+const Reset = styled(Button)(({ theme }) => ({
+  marginLeft: 8,
+  boxShadow: 'rgb(30 167 253) 0 0 0 1px inset',
+  color: theme.color.secondary,
+}));
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx
new file mode 100644
index 00000000000..7dc7cabc6a5
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import type { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Button, ButtonProps } from './Button';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    label: { defaultValue: 'Button' },
+  },
+} as Meta;
+
+const Template: CSF2Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const CSF2Secondary = Template.bind({});
+CSF2Secondary.args = {
+  children: 'Children coming from story args!',
+  primary: false,
+};
+
+const getCaptionForLocale = (locale: string) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'pt':
+      return 'Olá!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const CSF2StoryWithLocale: CSF2Story = (args, { globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <Button>{caption}</Button>;
+};
+CSF2StoryWithLocale.storyName = 'WithLocale';
+
+export const CSF2StoryWithParamsAndDecorator: CSF2Story<ButtonProps> = (args) => {
+  return <Button {...args} />;
+};
+CSF2StoryWithParamsAndDecorator.args = {
+  children: 'foo',
+};
+CSF2StoryWithParamsAndDecorator.parameters = {
+  layout: 'centered',
+};
+CSF2StoryWithParamsAndDecorator.decorators = [(StoryFn) => <StoryFn />];
+
+export const CSF3Primary: CSF3Story<ButtonProps> = {
+  args: {
+    children: 'foo',
+    size: 'large',
+    primary: true,
+  },
+};
+
+export const CSF3Button: CSF3Story<ButtonProps> = {
+  args: { children: 'foo' },
+};
+
+export const CSF3ButtonWithRender: CSF3Story<ButtonProps> = {
+  ...CSF3Button,
+  render: (args: any) => (
+    <div>
+      <p data-testid="custom-render">I am a custom render function</p>
+      <Button {...args} />
+    </div>
+  ),
+};
+
+export const CSF3InputFieldFilled: CSF3Story = {
+  render: () => {
+    return <input data-testid="input" />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('input'), 'Hello world!');
+  },
+};
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx
new file mode 100644
index 00000000000..cd5acfbfaa6
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { composeStories, composeStory } from '@storybook/react';
+
+import * as stories from './Button.stories';
+
+// example with composeStories, returns an object with all stories composed with args/decorators
+const { CSF3Primary } = composeStories(stories);
+
+// example with composeStory, returns a single story composed with args/decorators
+const Secondary = composeStory(stories.CSF2Secondary, stories.default);
+
+test('renders primary button', () => {
+  render(<CSF3Primary>Hello world</CSF3Primary>);
+  const buttonElement = screen.getByText(/Hello world/i);
+  expect(buttonElement).not.toBeNull();
+});
+
+test('reuses args from composed story', () => {
+  render(<Secondary />);
+
+  const buttonElement = screen.getByRole('button');
+  expect(buttonElement.textContent).toEqual(Secondary.args.children);
+});
+
+test('onclick handler is called', async () => {
+  const onClickSpy = jest.fn();
+  render(<Secondary onClick={onClickSpy} />);
+  const buttonElement = screen.getByRole('button');
+  buttonElement.click();
+  expect(onClickSpy).toHaveBeenCalled();
+});
+
+test('reuses args from composeStories', () => {
+  const { getByText } = render(<CSF3Primary />);
+  const buttonElement = getByText(/foo/i);
+  expect(buttonElement).not.toBeNull();
+});
+
+describe('GlobalConfig', () => {
+  test('renders with default globalConfig', () => {
+    const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);
+    const { getByText } = render(<WithEnglishText />);
+    const buttonElement = getByText('Hello!');
+    expect(buttonElement).not.toBeNull();
+  });
+
+  test('renders with custom globalConfig', () => {
+    const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
+      globalTypes: { locale: { defaultValue: 'pt' } } as any,
+    });
+    const { getByText } = render(<WithPortugueseText />);
+    const buttonElement = getByText('Olá!');
+    expect(buttonElement).not.toBeNull();
+  });
+});
+
+describe('CSF3', () => {
+  test('renders with inferred globalRender', () => {
+    const Primary = composeStory(stories.CSF3Button, stories.default);
+
+    render(<Primary>Hello world</Primary>);
+    const buttonElement = screen.getByText(/Hello world/i);
+    expect(buttonElement).not.toBeNull();
+  });
+
+  test('renders with custom render function', () => {
+    const Primary = composeStory(stories.CSF3ButtonWithRender, stories.default);
+
+    render(<Primary />);
+    expect(screen.getByTestId('custom-render')).not.toBeNull();
+  });
+
+  test('renders with play function', async () => {
+    const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
+
+    const { container } = render(<CSF3InputFieldFilled />);
+
+    await CSF3InputFieldFilled.play({ canvasElement: container });
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+  });
+});
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.tsx
new file mode 100644
index 00000000000..d9986afb79a
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  children: React.ReactNode;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button: React.FC<ButtonProps> = (props) => {
+  const { primary = false, size = 'medium', backgroundColor, children, ...otherProps } = props;
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...otherProps}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap
new file mode 100644
index 00000000000..dd0a3d4183f
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders CSF2Secondary story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      label="Button"
+      type="button"
+    >
+      Children coming from story args!
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF2StoryWithLocale story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      type="button"
+    >
+      Hello!
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      label="Button"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3Button story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      label="Button"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3ButtonWithRender story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <div>
+      <p
+        data-testid="custom-render"
+      >
+        I am a custom render function
+      </p>
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        label="Button"
+        type="button"
+      >
+        foo
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3InputFieldFilled story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <input />
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3Primary story 1`] = `
+<body>
+  <div>
+    <div>
+      Locale: 
+      en
+    </div>
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      label="Button"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/button.css b/examples/cra-ts-essentials/src/stories/testing-react/components/button.css
new file mode 100644
index 00000000000..dc91dc76370
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/button.css
@@ -0,0 +1,30 @@
+.storybook-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;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx
new file mode 100644
index 00000000000..5fbdae1697d
--- /dev/null
+++ b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React from 'react';
+import addons from '@storybook/addons';
+import { render, screen } from '@testing-library/react';
+
+import { composeStories, composeStory } from '@storybook/react';
+
+import * as stories from './Button.stories';
+
+import * as globalConfig from '../../../../.storybook/preview';
+
+const { CSF2StoryWithParamsAndDecorator } = composeStories(stories);
+
+test('returns composed args including default values from argtypes', () => {
+  expect(CSF2StoryWithParamsAndDecorator.args).toEqual({
+    ...stories.CSF2StoryWithParamsAndDecorator.args,
+    label: stories.default.argTypes!.label!.defaultValue,
+  });
+});
+
+test('returns composed parameters from story', () => {
+  expect(CSF2StoryWithParamsAndDecorator.parameters).toEqual(
+    expect.objectContaining({
+      ...stories.CSF2StoryWithParamsAndDecorator.parameters,
+      ...globalConfig.parameters,
+    })
+  );
+});
+
+// common in addons that need to communicate between manager and preview
+test('should pass with decorators that need addons channel', () => {
+  const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, {
+    decorators: [
+      (StoryFn: any) => {
+        addons.getChannel();
+        return <StoryFn />;
+      },
+    ],
+  });
+  render(<PrimaryWithChannels>Hello world</PrimaryWithChannels>);
+  const buttonElement = screen.getByText(/Hello world/i);
+  expect(buttonElement).not.toBeNull();
+});
+
+describe('Unsupported formats', () => {
+  test('should throw error if story is undefined', () => {
+    const UnsupportedStory = () => <div>hello world</div>;
+    UnsupportedStory.story = { parameters: {} };
+
+    const UnsupportedStoryModule: any = {
+      default: {},
+      UnsupportedStory: undefined,
+    };
+
+    expect(() => {
+      composeStories(UnsupportedStoryModule);
+    }).toThrow();
+  });
+});
+
+describe('non-story exports', () => {
+  test('should filter non-story exports with excludeStories', () => {
+    const StoryModuleWithNonStoryExports = {
+      default: {
+        title: 'Some/Component',
+        excludeStories: /.*Data/,
+      },
+      LegitimateStory: () => <div>hello world</div>,
+      mockData: {},
+    };
+
+    const result = composeStories(StoryModuleWithNonStoryExports);
+    expect(Object.keys(result)).not.toContain('mockData');
+  });
+
+  test('should filter non-story exports with includeStories', () => {
+    const StoryModuleWithNonStoryExports = {
+      default: {
+        title: 'Some/Component',
+        includeStories: /.*Story/,
+      },
+      LegitimateStory: () => <div>hello world</div>,
+      mockData: {},
+    };
+
+    const result = composeStories(StoryModuleWithNonStoryExports);
+    expect(Object.keys(result)).not.toContain('mockData');
+  });
+});
+
+// Batch snapshot testing
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  // The ! is necessary in Typescript only, as the property is part of a partial type
+  Story.storyName!,
+  Story,
+]);
+test.each(testCases)('Renders %s story', async (_storyName, Story) => {
+  const tree = await render(<Story />);
+  expect(tree.baseElement).toMatchSnapshot();
+});
diff --git a/examples/cra-ts-essentials/tsconfig.json b/examples/cra-ts-essentials/tsconfig.json
index 450e0014a4e..4e81ac32da5 100644
--- a/examples/cra-ts-essentials/tsconfig.json
+++ b/examples/cra-ts-essentials/tsconfig.json
@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "jsx": "react",
-    "module": "commonjs",
+    "module": "esnext",
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -18,9 +18,17 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "allowJs": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
   "include": [
     "src"
   ]
-}
\ No newline at end of file
+}
diff --git a/examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx b/examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx
similarity index 100%
rename from examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx
rename to examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx
diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
index 048a7f5cefa..b225f343a8e 100644
--- a/examples/cra-ts-kitchen-sink/.storybook/main.ts
+++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -12,7 +12,7 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-a11y',
-    './localAddon/register.tsx',
+    './localAddon/manager.tsx',
     './localAddon/preset.ts',
   ],
   webpackFinal: (config: Configuration) => {
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 06e96b7b81c..455d234bc0c 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-kitchen-sink",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -34,15 +34,15 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "6.5.0-alpha.51",
+    "@storybook/react": "6.5.0-alpha.55",
     "@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 6c3984b4fe0..c82946dbf8f 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "ember build --output-path ember-output",
@@ -17,18 +17,18 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@ember/optional-features": "^2.0.0",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/ember": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/ember": "6.5.0-alpha.55",
     "@storybook/ember-cli-storybook": "^0.2.1",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "babel-loader": "^8.0.0",
     "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 50aa5d8ad10..37c346fc20c 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.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006 --no-manager-cache"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-jest": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-jest": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/core": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/html": "6.5.0-alpha.51",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/html": "6.5.0-alpha.55",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "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
index 665257cf6d6..d0587b88d30 100644
--- a/examples/official-storybook/components/addon-measure/ShadowRoot.js
+++ b/examples/official-storybook/components/addon-measure/ShadowRoot.js
@@ -1,9 +1,9 @@
 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';
+import { drawSelectedElement } from '@storybook/addon-measure/dist/esm/box-model/visualizer';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { init, destroy } from '@storybook/addon-measure/dist/cjs/box-model/canvas';
+import { init, destroy } from '@storybook/addon-measure/dist/esm/box-model/canvas';
 
 export const ShadowRoot = ({ label = 'Hello from shadow DOM', drawMode = 'ROOT' }) => {
   const ref = React.useRef();
diff --git a/examples/official-storybook/components/addon-measure/Visualization.js b/examples/official-storybook/components/addon-measure/Visualization.js
index bcd10d6a3d1..6ae319f75f6 100644
--- a/examples/official-storybook/components/addon-measure/Visualization.js
+++ b/examples/official-storybook/components/addon-measure/Visualization.js
@@ -1,9 +1,9 @@
 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';
+import { drawSelectedElement } from '@storybook/addon-measure/dist/esm/box-model/visualizer';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { init, destroy } from '@storybook/addon-measure/dist/cjs/box-model/canvas';
+import { init, destroy } from '@storybook/addon-measure/dist/esm/box-model/canvas';
 
 export const Visualization = ({ render }) => {
   const element = useRef(null);
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index c6349ca87ae..1af06d5fe82 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,45 +1,43 @@
 {
   "name": "official-storybook",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "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 ./",
     "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 ./ --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.5.3",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-highlight": "6.5.0-alpha.51",
-    "@storybook/addon-interactions": "6.5.0-alpha.51",
-    "@storybook/addon-jest": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-toolbars": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/cli": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-highlight": "6.5.0-alpha.55",
+    "@storybook/addon-interactions": "6.5.0-alpha.55",
+    "@storybook/addon-jest": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-toolbars": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/cli": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/design-system": "^5.4.7",
     "@storybook/jest": "^0.0.5",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/react": "6.5.0-alpha.51",
-    "@storybook/router": "6.5.0-alpha.51",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/router": "6.5.0-alpha.55",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "@storybook/testing-library": "^0.0.7",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/user-event": "^13.1.9",
     "chromatic": "^6.0.2",
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 93a37ab6ddb..effd62269bd 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "preact-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,16 +15,16 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/preact": "6.5.0-alpha.51",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/preact": "6.5.0-alpha.55",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "@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 0d5aaff27f2..0bdaf34ef66 100644
--- a/examples/react-ts-webpack4/package.json
+++ b/examples/react-ts-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-react-ts-webpack4",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,10 +8,10 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
   },
   "dependencies": {
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-essentials": "6.5.0-alpha.51",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
-    "@storybook/react": "6.5.0-alpha.51",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-essentials": "6.5.0-alpha.55",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.55",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
     "prop-types": "15.7.2",
diff --git a/examples/react-ts/.storybook/preview.js b/examples/react-ts/.storybook/preview.tsx
similarity index 100%
rename from examples/react-ts/.storybook/preview.js
rename to examples/react-ts/.storybook/preview.tsx
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index 08c60e87222..5799d47e03e 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-react-ts",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
@@ -18,14 +18,15 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-essentials": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/cli": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/react": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/addon-essentials": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/cli": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "@testing-library/dom": "^7.31.2",
+    "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "^13.1.9",
     "@types/babel__preset-env": "^7",
     "@types/react": "^16.14.23",
diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx
index d670d64ee45..1a4806881f0 100644
--- a/examples/react-ts/src/AccountForm.stories.tsx
+++ b/examples/react-ts/src/AccountForm.stories.tsx
@@ -1,11 +1,12 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable storybook/await-interactions */
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
 import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-import { screen } from '@testing-library/dom';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { AccountForm } from './AccountForm';
+import { AccountForm, AccountFormProps } from './AccountForm';
 
 export default {
   // Title not needed due to CSF3 auto-title
@@ -20,17 +21,19 @@ export default {
 // Standard.args = { passwordVerification: false };
 // Standard.play = () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com');
 
-export const Standard: ComponentStoryObj<typeof AccountForm> = {
+type Story = ComponentStoryObj<typeof AccountForm>;
+
+export const Standard: Story = {
   // render: (args: AccountFormProps) => <AccountForm {...args} />,
   args: { passwordVerification: false },
 };
 
-export const StandardEmailFilled = {
+export const StandardEmailFilled: Story = {
   ...Standard,
   play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
 };
 
-export const StandardEmailFailed = {
+export const StandardEmailFailed: Story = {
   ...Standard,
   play: async () => {
     await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
@@ -39,41 +42,41 @@ export const StandardEmailFailed = {
   },
 };
 
-export const StandardPasswordFailed = {
+export const StandardPasswordFailed: Story = {
   ...Standard,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play!(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdf');
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
-export const StandardFailHover = {
+export const StandardFailHover: Story = {
   ...StandardPasswordFailed,
-  play: async () => {
-    await StandardPasswordFailed.play();
+  play: async (context) => {
+    await StandardPasswordFailed.play!(context);
     await sleep(100);
     await userEvent.hover(screen.getByTestId('password-error-info'));
   },
 };
 
-export const Verification: ComponentStoryObj<typeof AccountForm> = {
+export const Verification: Story = {
   args: { passwordVerification: true },
 };
 
-export const VerificationPasssword1 = {
+export const VerificationPasssword1: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play!(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
-export const VerificationPasswordMismatch = {
+export const VerificationPasswordMismatch: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play!(context);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
     await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
     await userEvent.click(screen.getByTestId('submit'));
@@ -82,10 +85,10 @@ export const VerificationPasswordMismatch = {
 
 const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
-export const VerificationSuccess = {
+export const VerificationSuccess: Story = {
   ...Verification,
-  play: async () => {
-    await StandardEmailFilled.play();
+  play: async (context) => {
+    await StandardEmailFilled.play!(context);
     await sleep(1000);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
     await sleep(1000);
@@ -94,3 +97,13 @@ export const VerificationSuccess = {
     await userEvent.click(screen.getByTestId('submit'));
   },
 };
+
+export const StandardWithRenderFunction: Story = {
+  ...Standard,
+  render: (args: AccountFormProps) => (
+    <div>
+      <p>This uses a custom render</p>
+      <AccountForm {...args} />
+    </div>
+  ),
+};
diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
index 3926326cf9a..e667fd935d9 100644
--- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
+++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
@@ -1840,6 +1840,379 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
 </section>
 `;
 
+exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
+.emotion-15 {
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 450px;
+  padding: 32px;
+  background-color: #FFFFFF;
+  border-radius: 7px;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-0 {
+  height: 40px;
+  z-index: 10;
+  margin-left: 32px;
+}
+
+.emotion-1 {
+  height: 40px;
+  z-index: 1;
+  left: -32px;
+  position: relative;
+}
+
+.emotion-3 {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 350px;
+  min-height: 189px;
+  margin-top: 8px;
+}
+
+.emotion-13 {
+  width: 100%;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.emotion-13[aria-disabled="true"] {
+  opacity: 0.6;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+  margin-bottom: 10px;
+}
+
+.emotion-4 {
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.emotion-5 {
+  font-size: 14px;
+  color: #333333;
+  padding: 10px 15px;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  border: 0 none;
+  box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
+}
+
+.emotion-5:focus {
+  box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
+}
+
+.emotion-5:active {
+  box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
+}
+
+.emotion-5[aria-invalid="true"] {
+  box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
+}
+
+.emotion-12 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+.emotion-10 {
+  background-color: transparent;
+  border: 0 none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-weight: 500;
+  font-size: 12px;
+  -webkit-flex-basis: 50%;
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  cursor: pointer;
+  padding: 11px 16px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  margin-right: 8px;
+  background-color: #1EA7FD;
+  color: #FFFFFF;
+  opacity: 0.6;
+  box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
+}
+
+.emotion-10:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.emotion-10:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.emotion-10[aria-disabled="true"] {
+  cursor: default;
+}
+
+.emotion-11 {
+  background-color: transparent;
+  border: 0 none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-weight: 500;
+  font-size: 12px;
+  -webkit-flex-basis: 50%;
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  cursor: pointer;
+  padding: 11px 16px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  margin-left: 8px;
+  box-shadow: rgb(30 167 253) 0 0 0 1px inset;
+  color: #1EA7FD;
+}
+
+.emotion-11:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.emotion-11:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.emotion-11[aria-disabled="true"] {
+  cursor: default;
+}
+
+<div>
+  <p>
+    This uses a custom render
+  </p>
+  <section
+    className="emotion-15"
+  >
+    <div
+      className="emotion-2"
+    >
+      <svg
+        aria-label="Storybook Logo"
+        className="emotion-0"
+        role="img"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          Storybook icon
+        </title>
+        <g
+          fill="none"
+          fillRule="evenodd"
+          id="Artboard"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <path
+            d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
+            fill="#FF4785"
+            fillRule="nonzero"
+            id="path-1"
+          />
+          <path
+            d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
+            fill="#FFFFFF"
+            fillRule="nonzero"
+            id="path9_fill-path"
+          />
+          <path
+            d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
+            fill="#FFFFFF"
+            id="Path"
+          />
+        </g>
+      </svg>
+      <svg
+        aria-label="Storybook"
+        className="emotion-1"
+        role="img"
+        viewBox="0 0 200 40"
+      >
+        <title>
+          Storybook
+        </title>
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <path
+            d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    </div>
+    <p
+      className="emotion-3"
+    >
+      Create an account to join the Storybook community
+    </p>
+    <div
+      className="emotion-14"
+    >
+      <form
+        action="#"
+        aria-disabled="false"
+        className="emotion-13"
+        noValidate={true}
+        onReset={[Function]}
+        onSubmit={[Function]}
+      >
+        <div
+          className="emotion-6"
+        >
+          <label
+            className="emotion-4"
+            htmlFor="email"
+          >
+            Email
+          </label>
+          <input
+            aria-disabled="false"
+            aria-invalid="false"
+            aria-required="true"
+            className="emotion-5"
+            data-testid="email"
+            disabled={false}
+            name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="email"
+            value=""
+          />
+        </div>
+        <div
+          className="emotion-6"
+        >
+          <label
+            className="emotion-4"
+            htmlFor="password"
+          >
+            Password
+          </label>
+          <input
+            aria-disabled="false"
+            aria-invalid="false"
+            aria-required="true"
+            className="emotion-5"
+            data-testid="password1"
+            disabled={false}
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="password"
+            value=""
+          />
+        </div>
+        <div
+          className="emotion-12"
+        >
+          <button
+            aria-disabled="true"
+            className="emotion-10"
+            data-testid="submit"
+            disabled={true}
+            type="submit"
+          >
+            Create Account
+          </button>
+          <button
+            aria-disabled="false"
+            className="emotion-11"
+            disabled={false}
+            type="reset"
+          >
+            Reset
+          </button>
+        </div>
+      </form>
+    </div>
+  </section>
+</div>
+`;
+
 exports[`Storyshots Demo/AccountForm Verification 1`] = `
 .emotion-18 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
index 6ccba992c6f..3829055f72c 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.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,13 +14,13 @@
     "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/server": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/server": "6.5.0-alpha.55",
     "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 b8550222205..5e6a0d90402 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,15 +1,15 @@
 {
   "name": "standalone-preview",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
     "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/cli": "6.5.0-alpha.51",
-    "@storybook/react": "6.5.0-alpha.51",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/cli": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.55",
     "cross-env": "^7.0.3",
     "parcel": "2.0.1",
     "react": "16.14.0",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index aa24cb3e7bb..97d29bd31b3 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,20 +10,20 @@
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-interactions": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-interactions": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/jest": "^0.0.5",
-    "@storybook/source-loader": "6.5.0-alpha.51",
-    "@storybook/svelte": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.55",
+    "@storybook/svelte": "6.5.0-alpha.55",
     "@storybook/testing-library": "^0.0.7",
     "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 0dd071ef37f..dc5a42fa071 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-3-cli-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-essentials": "6.5.0-alpha.51",
-    "@storybook/addon-interactions": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-essentials": "6.5.0-alpha.55",
+    "@storybook/addon-interactions": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
     "@storybook/jest": "^0.0.5",
     "@storybook/testing-library": "^0.0.7",
-    "@storybook/vue3": "6.5.0-alpha.51",
+    "@storybook/vue3": "6.5.0-alpha.55",
     "@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 a9db83ce9fb..341ba75f2de 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -15,11 +15,11 @@
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-essentials": "6.5.0-alpha.51",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-essentials": "6.5.0-alpha.55",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/source-loader": "6.5.0-alpha.51",
-    "@storybook/vue": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.55",
+    "@storybook/vue": "6.5.0-alpha.55",
     "@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 f137677f4a9..1f2ce3eef9e 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,21 +14,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-a11y": "6.5.0-alpha.51",
-    "@storybook/addon-actions": "6.5.0-alpha.51",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.51",
-    "@storybook/addon-controls": "6.5.0-alpha.51",
-    "@storybook/addon-docs": "6.5.0-alpha.51",
-    "@storybook/addon-interactions": "6.5.0-alpha.51",
-    "@storybook/addon-links": "6.5.0-alpha.51",
-    "@storybook/addon-storyshots": "6.5.0-alpha.51",
-    "@storybook/addon-storysource": "6.5.0-alpha.51",
-    "@storybook/addon-viewport": "6.5.0-alpha.51",
-    "@storybook/addons": "6.5.0-alpha.51",
+    "@storybook/addon-a11y": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.55",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+    "@storybook/addon-controls": "6.5.0-alpha.55",
+    "@storybook/addon-docs": "6.5.0-alpha.55",
+    "@storybook/addon-interactions": "6.5.0-alpha.55",
+    "@storybook/addon-links": "6.5.0-alpha.55",
+    "@storybook/addon-storyshots": "6.5.0-alpha.55",
+    "@storybook/addon-storysource": "6.5.0-alpha.55",
+    "@storybook/addon-viewport": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/jest": "^0.0.5",
-    "@storybook/source-loader": "6.5.0-alpha.51",
+    "@storybook/source-loader": "6.5.0-alpha.55",
     "@storybook/testing-library": "^0.0.7",
-    "@storybook/vue": "6.5.0-alpha.51",
+    "@storybook/vue": "6.5.0-alpha.55",
     "@vue/babel-preset-jsx": "^1.2.4",
     "babel-loader": "^8.0.0",
     "cross-env": "^7.0.3",
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index ef5b150445d..a959548ff8f 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.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "private": true,
   "description": "",
   "keywords": [],
@@ -39,6 +39,7 @@
     "@storybook/core-common": "portal:../../lib/core-common",
     "@storybook/core-events": "portal:../../lib/core-events",
     "@storybook/core-server": "portal:../../lib/core-server",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/csf-tools": "portal:../../lib/csf-tools",
     "@storybook/docs-tools": "portal:../../lib/docs-tools",
     "@storybook/jest": "^0.0.5",
diff --git a/jest.config.js b/jest.config.js
index c835f5182a3..37908eba245 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -97,4 +97,5 @@ module.exports = {
   modulePathIgnorePatterns: ['/dist/.*/__mocks__/'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  reporters: ['default', 'jest-junit'],
 };
diff --git a/lerna.json b/lerna.json
index 2411967f778..9468c20431b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "6.5.0-alpha.51"
+  "version": "6.5.0-alpha.55"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 4c8677bb853..a0934501ea4 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -40,25 +40,25 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/router": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/router": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "@types/webpack-env": "^1.16.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"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/public_api.js"
 }
diff --git a/lib/api/package.json b/lib/api/package.json
index de9adbf68c4..8c084261929 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -38,13 +38,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/router": "6.5.0-alpha.51",
+    "@storybook/router": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -65,12 +65,12 @@
     "qs": "^6.10.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 741794545f5..2b9151ab6a4 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '6.5.0-alpha.51';
+export const version = '6.5.0-alpha.55';
diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json
index 68715a035cf..2637ba9cb6a 100644
--- a/lib/builder-webpack4/package.json
+++ b/lib/builder-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack4",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,22 +40,22 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/channel-postmessage": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/router": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/channel-postmessage": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/router": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
-    "@storybook/ui": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
+    "@storybook/ui": "6.5.0-alpha.55",
     "@types/node": "^14.0.10 || ^16.0.0",
     "@types/webpack": "^4.41.26",
     "autoprefixer": "^9.8.6",
@@ -95,8 +95,8 @@
     "@types/webpack-virtual-modules": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -106,6 +106,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars
index dfa3f306fa6..73e29368f16 100644
--- a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars
+++ b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars
@@ -1,6 +1,7 @@
 import global from 'global';
 
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+import { PreviewWeb } from '@storybook/preview-web';
+import { composeConfigs } from '@storybook/store';
 import { ClientApi } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
 import createPostMessageChannel from '@storybook/channel-postmessage';
diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json
index d4087850e1f..f170ffd9bc6 100644
--- a/lib/builder-webpack5/package.json
+++ b/lib/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,21 +40,21 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/channel-postmessage": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/router": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/channel-postmessage": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/router": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
     "@types/node": "^14.0.10 || ^16.0.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-named-exports-order": "^0.0.2",
@@ -86,8 +86,8 @@
     "@types/webpack-virtual-modules": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -97,6 +97,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
index c7b3025c4b7..30df5e4c424 100644
--- a/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
+++ b/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
@@ -1,6 +1,7 @@
 import global from 'global';
 
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+import { PreviewWeb } from '@storybook/preview-web';
+import { composeConfigs } from '@storybook/store';
 import { ClientApi } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
 import createPostMessageChannel from '@storybook/channel-postmessage';
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index dc35adebfbb..13646ae2940 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "qs": "^6.10.0",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index c64222918fd..aff516c9f38 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,8 +40,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "telejson": "^5.3.3"
@@ -49,6 +49,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 9719d45fafd..c11c6b22d55 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json
index df30240d4a2..0654ea945cc 100644
--- a/lib/cli-sb/package.json
+++ b/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -24,10 +24,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.5.0-alpha.51"
+    "@storybook/cli": "6.5.0-alpha.55"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42"
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953"
 }
diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json
index 0b6f028e703..2eb305f3d21 100644
--- a/lib/cli-storybook/package.json
+++ b/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -27,10 +27,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "6.5.0-alpha.51"
+    "@storybook/cli": "6.5.0-alpha.55"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42"
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953"
 }
diff --git a/lib/cli/package.json b/lib/cli/package.json
index b45edb3ff77..d9be98e2f6e 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -47,10 +47,10 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/csf-tools": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/codemod": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/csf-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
@@ -75,7 +75,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.5.0-alpha.51",
+    "@storybook/client-api": "6.5.0-alpha.55",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42"
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953"
 }
diff --git a/lib/cli/src/add.test.ts b/lib/cli/src/add.test.ts
index 261c6626b11..d6632443ea4 100644
--- a/lib/cli/src/add.test.ts
+++ b/lib/cli/src/add.test.ts
@@ -9,13 +9,13 @@ import {
 describe('addStorybookAddonToFile should correctly register an Storybook addon', () => {
   test('to an empty array', () => {
     expect(addStorybookAddonToFile('addon-name', [], true)).toEqual([
-      `import '${storybookAddonScope}addon-name/register';`,
+      `import '${storybookAddonScope}addon-name/manager';`,
     ]);
   });
 
   test('to an empty file', () => {
     expect(addStorybookAddonToFile('addon-name', [''], true)).toEqual([
-      `import '${storybookAddonScope}addon-name/register';`,
+      `import '${storybookAddonScope}addon-name/manager';`,
       '',
     ]);
   });
@@ -25,16 +25,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon',
       addStorybookAddonToFile(
         'addon-name',
         [
-          "import '@storybook/addon-actions/register';",
-          "import '@storybook/addon-links/register';",
+          "import '@storybook/addon-actions/manager';",
+          "import '@storybook/addon-links/manager';",
           '',
         ],
         true
       )
     ).toEqual([
-      "import '@storybook/addon-actions/register';",
-      "import '@storybook/addon-links/register';",
-      `import '${storybookAddonScope}addon-name/register';`,
+      `import '${storybookAddonScope}addon-name/manager';`,
+      "import '@storybook/addon-actions/manager';",
+      "import '@storybook/addon-links/manager';",
       '',
     ]);
   });
@@ -44,8 +44,8 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon',
       addStorybookAddonToFile(
         'addon-name',
         [
-          "import '@storybook/addon-links/register';",
-          "import '@storybook/addon-actions/register';",
+          "import '@storybook/addon-links/manager';",
+          "import '@storybook/addon-actions/manager';",
           '',
           '//some other stuff',
           '',
@@ -55,9 +55,9 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon',
         true
       )
     ).toEqual([
-      "import '@storybook/addon-links/register';",
-      "import '@storybook/addon-actions/register';",
-      `import '${storybookAddonScope}addon-name/register';`,
+      `import '${storybookAddonScope}addon-name/manager';`,
+      "import '@storybook/addon-links/manager';",
+      "import '@storybook/addon-actions/manager';",
       '',
       '//some other stuff',
       '',
@@ -71,17 +71,17 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon',
       addStorybookAddonToFile(
         'addon-name',
         [
-          "import '@storybook/addon-actions/register';",
-          "import '@storybook/addon-links/register';",
-          `import '${storybookAddonScope}addon-name/register';`,
+          "import '@storybook/addon-actions/manager';",
+          "import '@storybook/addon-links/manager';",
+          `import '${storybookAddonScope}addon-name/manager';`,
           '',
         ],
         true
       )
     ).toEqual([
-      "import '@storybook/addon-actions/register';",
-      "import '@storybook/addon-links/register';",
-      `import '${storybookAddonScope}addon-name/register';`,
+      "import '@storybook/addon-actions/manager';",
+      "import '@storybook/addon-links/manager';",
+      `import '${storybookAddonScope}addon-name/manager';`,
       '',
     ]);
   });
@@ -91,16 +91,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon',
       addStorybookAddonToFile(
         'addon-name',
         [
-          "import '@storybook/addon-actions/register';",
-          "import '@storybook/addon-links/register';",
+          "import '@storybook/addon-actions/manager';",
+          "import '@storybook/addon-links/manager';",
           '',
         ],
         false
       )
     ).toEqual([
-      "import '@storybook/addon-actions/register';",
-      "import '@storybook/addon-links/register';",
-      `import 'addon-name/register';`,
+      `import 'addon-name/manager';`,
+      "import '@storybook/addon-actions/manager';",
+      "import '@storybook/addon-links/manager';",
       '',
     ]);
   });
diff --git a/lib/cli/src/add.ts b/lib/cli/src/add.ts
index 300a2303966..f6fb63e3787 100644
--- a/lib/cli/src/add.ts
+++ b/lib/cli/src/add.ts
@@ -79,7 +79,7 @@ export const addStorybookAddonToFile = (
   isOfficialAddon: boolean
 ) => {
   const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/register`));
+  const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/manager`));
 
   if (alreadyRegistered) {
     return addonsFile;
@@ -93,7 +93,7 @@ export const addStorybookAddonToFile = (
 
   return [
     ...addonsFile.slice(0, latestImportIndex + 1),
-    `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`,
+    `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`,
     ...addonsFile.slice(latestImportIndex + 1),
   ];
 };
diff --git a/lib/cli/src/automigrate/fixes/builder-vite.test.ts b/lib/cli/src/automigrate/fixes/builder-vite.test.ts
new file mode 100644
index 00000000000..aa21e490b8a
--- /dev/null
+++ b/lib/cli/src/automigrate/fixes/builder-vite.test.ts
@@ -0,0 +1,52 @@
+/* eslint-disable no-underscore-dangle */
+import path from 'path';
+import { JsPackageManager } from '../../js-package-manager';
+import { builderVite } from './builder-vite';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
+
+const checkBuilderVite = async ({ packageJson = {}, main }) => {
+  // eslint-disable-next-line global-require
+  require('fs-extra').__setMockFiles({
+    [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
+  });
+  const packageManager = {
+    retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
+  } as JsPackageManager;
+  return builderVite.check({ packageManager });
+};
+
+describe('builder-vite fix', () => {
+  describe('storybook-builder-vite', () => {
+    it('using storybook-builder-vite', async () => {
+      const main = { core: { builder: 'storybook-builder-vite' } };
+      await expect(checkBuilderVite({ main })).resolves.toMatchObject({
+        builder: 'storybook-builder-vite',
+      });
+    });
+    it('using storybook-builder-vite with options', async () => {
+      const main = { core: { builder: { name: 'storybook-builder-vite', options: {} } } };
+      await expect(checkBuilderVite({ main })).resolves.toMatchObject({
+        builder: {
+          name: 'storybook-builder-vite',
+          options: {},
+        },
+      });
+    });
+  });
+  describe('other builders', () => {
+    it('using @storybook/builder-vite', async () => {
+      const main = { core: { builder: { name: '@storybook/builder-vite', options: {} } } };
+      await expect(checkBuilderVite({ main })).resolves.toBeFalsy();
+    });
+    it('using webpack5', async () => {
+      const main = { core: { builder: 'webpack5' } };
+      await expect(checkBuilderVite({ main })).resolves.toBeFalsy();
+    });
+    it('no builder specified', async () => {
+      const main = {};
+      await expect(checkBuilderVite({ main })).resolves.toBeFalsy();
+    });
+  });
+});
diff --git a/lib/cli/src/automigrate/fixes/builder-vite.ts b/lib/cli/src/automigrate/fixes/builder-vite.ts
new file mode 100644
index 00000000000..f7aa800a4d6
--- /dev/null
+++ b/lib/cli/src/automigrate/fixes/builder-vite.ts
@@ -0,0 +1,93 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+
+import { ConfigFile, readConfig, writeConfig } from '@storybook/csf-tools';
+
+import { Fix } from '../types';
+import { getStorybookInfo } from '../helpers/getStorybookInfo';
+import { PackageJson, writePackageJson } from '../../js-package-manager';
+
+const logger = console;
+
+interface BuilderViteOptions {
+  builder: any;
+  main: ConfigFile;
+  packageJson: PackageJson;
+}
+
+/**
+ * Is the user using 'storybook-builder-vite' in their project?
+ *
+ * If so, prompt them to upgrade to '@storybook/builder-vite'.
+ *
+ * - Add '@storybook/builder-vite' as dev dependency
+ * - Remove 'storybook-builder-vite' dependency
+ * - Add core.builder = '@storybook/builder-vite' to main.js
+ */
+export const builderVite: Fix<BuilderViteOptions> = {
+  id: 'builder-vite',
+
+  async check({ packageManager }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const { mainConfig } = getStorybookInfo(packageJson);
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+    const main = await readConfig(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+    const builderName = typeof builder === 'string' ? builder : builder?.name;
+
+    if (builderName !== 'storybook-builder-vite') {
+      return null;
+    }
+
+    return { builder, main, packageJson };
+  },
+
+  prompt({ builder }) {
+    const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2));
+
+    return dedent`
+      We've detected you're using the community vite builder: ${builderFormatted}
+      
+      'storybook-builder-vite' is deprecated and now located at ${chalk.cyan(
+        '@storybook/builder-vite'
+      )}.
+
+      We can upgrade your project to use the new builder automatically.
+      
+      More info: ${chalk.yellow(
+        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed'
+      )}
+    `;
+  },
+
+  async run({ result: { builder, main, packageJson }, packageManager, dryRun }) {
+    const { dependencies = {}, devDependencies = {} } = packageJson;
+
+    logger.info(`Removing existing 'storybook-builder-vite' dependency`);
+    if (!dryRun) {
+      delete dependencies['storybook-builder-vite'];
+      delete devDependencies['storybook-builder-vite'];
+      writePackageJson(packageJson);
+    }
+
+    logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
+    if (!dryRun) {
+      packageManager.addDependencies({ installAsDevDependencies: true }, [
+        '@storybook/builder-vite',
+      ]);
+    }
+
+    logger.info(`Updating main.js to use vite builder`);
+    if (!dryRun) {
+      const updatedBuilder =
+        typeof builder === 'string'
+          ? '@storybook/builder-vite'
+          : { name: '@storybook/builder-vite', options: builder.options };
+      main.setFieldValue(['core', 'builder'], updatedBuilder);
+      await writeConfig(main);
+    }
+  },
+};
diff --git a/lib/cli/src/automigrate/fixes/index.ts b/lib/cli/src/automigrate/fixes/index.ts
index 2a30b3725dc..8af1741b392 100644
--- a/lib/cli/src/automigrate/fixes/index.ts
+++ b/lib/cli/src/automigrate/fixes/index.ts
@@ -3,7 +3,8 @@ import { webpack5 } from './webpack5';
 import { angular12 } from './angular12';
 import { mainjsFramework } from './mainjsFramework';
 import { eslintPlugin } from './eslint-plugin';
+import { builderVite } from './builder-vite';
 import { Fix } from '../types';
 
 export * from '../types';
-export const fixes: Fix[] = [cra5, webpack5, angular12, mainjsFramework, eslintPlugin];
+export const fixes: Fix[] = [cra5, webpack5, angular12, mainjsFramework, eslintPlugin, builderVite];
diff --git a/lib/cli/src/detect.test.ts b/lib/cli/src/detect.test.ts
index 7c3a30cbccd..11303ab1436 100644
--- a/lib/cli/src/detect.test.ts
+++ b/lib/cli/src/detect.test.ts
@@ -15,6 +15,9 @@ jest.mock('./js-package-manager', () => ({
 
 jest.mock('fs', () => ({
   existsSync: jest.fn(),
+  stat: jest.fn(),
+  lstat: jest.fn(),
+  access: jest.fn(),
 }));
 
 jest.mock('path', () => ({
diff --git a/lib/cli/src/detect.ts b/lib/cli/src/detect.ts
index a3eaa416f8e..100972dad9e 100644
--- a/lib/cli/src/detect.ts
+++ b/lib/cli/src/detect.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import findUp from 'find-up';
 
 import {
   ProjectType,
@@ -9,10 +10,13 @@ import {
   TemplateConfiguration,
   TemplateMatcher,
   unsupportedTemplate,
+  CoreBuilder,
 } from './project_types';
-import { getBowerJson } from './helpers';
+import { getBowerJson, paddedLog } from './helpers';
 import { PackageJson, readPackageJson } from './js-package-manager';
 
+const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
+
 const hasDependency = (
   packageJson: PackageJson,
   name: string,
@@ -94,6 +98,24 @@ export function detectFrameworkPreset(packageJson = {}) {
   return result ? result.preset : ProjectType.UNDETECTED;
 }
 
+/**
+ * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
+ * will be used, otherwise, webpack4 is the default.
+ *
+ * @returns CoreBuilder
+ */
+export function detectBuilder() {
+  const viteConfig = findUp.sync(viteConfigFiles);
+
+  if (viteConfig) {
+    paddedLog('Detected vite project, setting builder to @storybook/builder-vite');
+    return CoreBuilder.Vite;
+  }
+
+  // Fallback to webpack4
+  return CoreBuilder.Webpack4;
+}
+
 export function isStorybookInstalled(dependencies: PackageJson | false, force?: boolean) {
   if (!dependencies) {
     return false;
diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js
index bc646c943eb..c3f195bdf9e 100644
--- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js
+++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js
@@ -1,3 +1,3 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/manager';
+import '@storybook/addon-links/manager';
+import '@storybook/addon-knobs/manager';
diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
index 4d30f923173..18ce369c70b 100644
--- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
+++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js
@@ -1,2 +1,2 @@
-import '@storybook/addon-ondevice-actions/register';
-import '@storybook/addon-ondevice-knobs/register';
+import '@storybook/addon-ondevice-actions/manager';
+import '@storybook/addon-ondevice-knobs/manager';
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index 926af379e36..d337dcb2cfd 100644
--- a/lib/cli/src/generators/baseGenerator.ts
+++ b/lib/cli/src/generators/baseGenerator.ts
@@ -1,4 +1,5 @@
 import fse from 'fs-extra';
+import dedent from 'ts-dedent';
 import { getStorybookBabelDependencies } from '@storybook/core-common';
 import { NpmOptions } from '../NpmOptions';
 import { SupportedLanguage, SupportedFrameworks, Builder, CoreBuilder } from '../project_types';
@@ -51,6 +52,8 @@ const builderDependencies = (builder: Builder) => {
       return [];
     case CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+    case CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
     default:
       return [builder];
   }
@@ -121,15 +124,28 @@ export async function baseGenerator(
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
+  const coreBuilders = [CoreBuilder.Webpack4, CoreBuilder.Webpack5, CoreBuilder.Vite] as string[];
+  const expandedBuilder = coreBuilders.includes(builder)
+    ? `@storybook/builder-${builder}`
+    : builder;
   const mainOptions =
     builder !== CoreBuilder.Webpack4
       ? {
           core: {
-            builder,
+            builder: expandedBuilder,
           },
           ...extraMain,
         }
       : extraMain;
+
+  // Default vite builder to storyStoreV7
+  if (expandedBuilder === '@storybook/builder-vite') {
+    mainOptions.features = {
+      ...mainOptions.features,
+      storyStoreV7: true,
+    };
+  }
+
   configure(framework, {
     framework: frameworkPackage,
     addons: [...addons, ...stripVersions(extraAddons)],
@@ -141,6 +157,16 @@ export async function baseGenerator(
     copyComponents(framework, language);
   }
 
+  // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
+  if (expandedBuilder === '@storybook/builder-vite') {
+    const previewHead = dedent`
+      <script>
+        window.global = window;
+      </script>
+    `;
+    await fse.writeFile(`.storybook/preview-head.html`, previewHead, { encoding: 'utf8' });
+  }
+
   const babelDependencies = addBabel ? await getBabelDependencies(packageManager, packageJson) : [];
   if (isNewFolder) {
     babelDependencies.push(...getStorybookBabelDependencies());
diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index e88673002cc..61622aead86 100644
--- a/lib/cli/src/initiate.ts
+++ b/lib/cli/src/initiate.ts
@@ -1,8 +1,8 @@
 import { UpdateNotifier, Package } from 'update-notifier';
 import chalk from 'chalk';
 import prompts from 'prompts';
-import { detect, isStorybookInstalled, detectLanguage } from './detect';
-import { installableProjectTypes, ProjectType, Builder, CoreBuilder } from './project_types';
+import { detect, isStorybookInstalled, detectLanguage, detectBuilder } from './detect';
+import { installableProjectTypes, ProjectType, Builder } from './project_types';
 import { commandLog, codeLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
 import aureliaGenerator from './generators/AURELIA';
@@ -57,7 +57,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 
   const generatorOptions = {
     language,
-    builder: options.builder || CoreBuilder.Webpack4,
+    builder: options.builder || detectBuilder(),
     linkable: !!options.linkable,
     commonJs: options.commonJs,
   };
@@ -92,7 +92,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
       case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
         return updateOrganisationsGenerator(packageManager, options.parser, npmOptions)
           .then(() => null) // commandLog doesn't like to see output
-          .then(commandLog('Upgrading your project to the new Storybook packages.'))
+          .then(commandLog('Upgrading your project to the new Storybook packages.\n'))
           .then(end);
 
       case ProjectType.REACT_SCRIPTS:
@@ -102,7 +102,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 
       case ProjectType.REACT:
         return reactGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "React" app'))
+          .then(commandLog('Adding Storybook support to your "React" app\n'))
           .then(end);
 
       case ProjectType.REACT_NATIVE: {
@@ -120,7 +120,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
               ]) as Promise<{ server: boolean }>)
         )
           .then(({ server }) => reactNativeGenerator(packageManager, npmOptions, server))
-          .then(commandLog('Adding Storybook support to your "React Native" app'))
+          .then(commandLog('Adding Storybook support to your "React Native" app\n'))
           .then(end)
           .then(() => {
             logger.log(chalk.red('NOTE: installation is not 100% automated.'));
@@ -134,97 +134,97 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
 
       case ProjectType.METEOR:
         return meteorGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Meteor" app'))
+          .then(commandLog('Adding Storybook support to your "Meteor" app\n'))
           .then(end);
 
       case ProjectType.WEBPACK_REACT:
         return webpackReactGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Webpack React" app'))
+          .then(commandLog('Adding Storybook support to your "Webpack React" app\n'))
           .then(end);
 
       case ProjectType.REACT_PROJECT:
         return reactGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "React" library'))
+          .then(commandLog('Adding Storybook support to your "React" library\n'))
           .then(end);
 
       case ProjectType.SFC_VUE:
         return sfcVueGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Single File Components Vue" app'))
+          .then(commandLog('Adding Storybook support to your "Single File Components Vue" app\n'))
           .then(end);
 
       case ProjectType.VUE:
         return vueGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Vue" app'))
+          .then(commandLog('Adding Storybook support to your "Vue" app\n'))
           .then(end);
 
       case ProjectType.VUE3:
         return vue3Generator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Vue 3" app'))
+          .then(commandLog('Adding Storybook support to your "Vue 3" app\n'))
           .then(end);
 
       case ProjectType.ANGULAR:
         return angularGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Angular" app'))
+          .then(commandLog('Adding Storybook support to your "Angular" app\n'))
           .then(end);
 
       case ProjectType.EMBER:
         return emberGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Ember" app'))
+          .then(commandLog('Adding Storybook support to your "Ember" app\n'))
           .then(end);
 
       case ProjectType.MITHRIL:
         return mithrilGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Mithril" app'))
+          .then(commandLog('Adding Storybook support to your "Mithril" app\n'))
           .then(end);
 
       case ProjectType.MARIONETTE:
         return marionetteGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Marionette.js" app'))
+          .then(commandLog('Adding Storybook support to your "Marionette.js" app\n'))
           .then(end);
 
       case ProjectType.MARKO:
         return markoGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Marko" app'))
+          .then(commandLog('Adding Storybook support to your "Marko" app\n'))
           .then(end);
 
       case ProjectType.HTML:
         return htmlGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "HTML" app'))
+          .then(commandLog('Adding Storybook support to your "HTML" app\n'))
           .then(end);
 
       case ProjectType.WEB_COMPONENTS:
         return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "web components" app'))
+          .then(commandLog('Adding Storybook support to your "web components" app\n'))
           .then(end);
 
       case ProjectType.RIOT:
         return riotGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "riot.js" app'))
+          .then(commandLog('Adding Storybook support to your "riot.js" app\n'))
           .then(end);
 
       case ProjectType.PREACT:
         return preactGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Preact" app'))
+          .then(commandLog('Adding Storybook support to your "Preact" app\n'))
           .then(end);
 
       case ProjectType.SVELTE:
         return svelteGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Svelte" app'))
+          .then(commandLog('Adding Storybook support to your "Svelte" app\n'))
           .then(end);
 
       case ProjectType.RAX:
         return raxGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Rax" app'))
+          .then(commandLog('Adding Storybook support to your "Rax" app\n'))
           .then(end);
 
       case ProjectType.AURELIA:
         return aureliaGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Aurelia" app'))
+          .then(commandLog('Adding Storybook support to your "Aurelia" app\n'))
           .then(end);
 
       case ProjectType.SERVER:
         return serverGenerator(packageManager, npmOptions, generatorOptions)
-          .then(commandLog('Adding Storybook support to your "Server" app'))
+          .then(commandLog('Adding Storybook support to your "Server" app\n'))
           .then(end);
 
       case ProjectType.UNSUPPORTED:
diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts
index 71175d1005e..b55a176da80 100644
--- a/lib/cli/src/project_types.ts
+++ b/lib/cli/src/project_types.ts
@@ -81,6 +81,7 @@ export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [
 export enum CoreBuilder {
   Webpack4 = 'webpack4',
   Webpack5 = 'webpack5',
+  Vite = 'vite',
 }
 
 // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729
diff --git a/lib/cli/src/versions.ts b/lib/cli/src/versions.ts
index fc7b99412e6..03a33f7db51 100644
--- a/lib/cli/src/versions.ts
+++ b/lib/cli/src/versions.ts
@@ -1,59 +1,60 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '6.5.0-alpha.51',
-  '@storybook/addon-actions': '6.5.0-alpha.51',
-  '@storybook/addon-backgrounds': '6.5.0-alpha.51',
-  '@storybook/addon-controls': '6.5.0-alpha.51',
-  '@storybook/addon-docs': '6.5.0-alpha.51',
-  '@storybook/addon-essentials': '6.5.0-alpha.51',
-  '@storybook/addon-interactions': '6.5.0-alpha.51',
-  '@storybook/addon-jest': '6.5.0-alpha.51',
-  '@storybook/addon-links': '6.5.0-alpha.51',
-  '@storybook/addon-measure': '6.5.0-alpha.51',
-  '@storybook/addon-outline': '6.5.0-alpha.51',
-  '@storybook/addon-storyshots': '6.5.0-alpha.51',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.51',
-  '@storybook/addon-storysource': '6.5.0-alpha.51',
-  '@storybook/addon-toolbars': '6.5.0-alpha.51',
-  '@storybook/addon-viewport': '6.5.0-alpha.51',
-  '@storybook/addons': '6.5.0-alpha.51',
-  '@storybook/angular': '6.5.0-alpha.51',
-  '@storybook/api': '6.5.0-alpha.51',
-  '@storybook/builder-webpack4': '6.5.0-alpha.51',
-  '@storybook/builder-webpack5': '6.5.0-alpha.51',
-  '@storybook/channel-postmessage': '6.5.0-alpha.51',
-  '@storybook/channel-websocket': '6.5.0-alpha.51',
-  '@storybook/channels': '6.5.0-alpha.51',
-  '@storybook/cli': '6.5.0-alpha.51',
-  '@storybook/client-api': '6.5.0-alpha.51',
-  '@storybook/client-logger': '6.5.0-alpha.51',
-  '@storybook/codemod': '6.5.0-alpha.51',
-  '@storybook/components': '6.5.0-alpha.51',
-  '@storybook/core': '6.5.0-alpha.51',
-  '@storybook/core-client': '6.5.0-alpha.51',
-  '@storybook/core-common': '6.5.0-alpha.51',
-  '@storybook/core-events': '6.5.0-alpha.51',
-  '@storybook/core-server': '6.5.0-alpha.51',
-  '@storybook/csf-tools': '6.5.0-alpha.51',
-  '@storybook/docs-tools': '6.5.0-alpha.51',
-  '@storybook/ember': '6.5.0-alpha.51',
-  '@storybook/html': '6.5.0-alpha.51',
-  '@storybook/instrumenter': '6.5.0-alpha.51',
-  '@storybook/manager-webpack4': '6.5.0-alpha.51',
-  '@storybook/manager-webpack5': '6.5.0-alpha.51',
-  '@storybook/node-logger': '6.5.0-alpha.51',
-  '@storybook/postinstall': '6.5.0-alpha.51',
-  '@storybook/preact': '6.5.0-alpha.51',
-  '@storybook/preview-web': '6.5.0-alpha.51',
-  '@storybook/react': '6.5.0-alpha.51',
-  '@storybook/router': '6.5.0-alpha.51',
-  '@storybook/server': '6.5.0-alpha.51',
-  '@storybook/source-loader': '6.5.0-alpha.51',
-  '@storybook/store': '6.5.0-alpha.51',
-  '@storybook/svelte': '6.5.0-alpha.51',
-  '@storybook/theming': '6.5.0-alpha.51',
-  '@storybook/ui': '6.5.0-alpha.51',
-  '@storybook/vue': '6.5.0-alpha.51',
-  '@storybook/vue3': '6.5.0-alpha.51',
-  '@storybook/web-components': '6.5.0-alpha.51',
+  '@storybook/addon-a11y': '6.5.0-alpha.55',
+  '@storybook/addon-actions': '6.5.0-alpha.55',
+  '@storybook/addon-backgrounds': '6.5.0-alpha.55',
+  '@storybook/addon-controls': '6.5.0-alpha.55',
+  '@storybook/addon-docs': '6.5.0-alpha.55',
+  '@storybook/addon-essentials': '6.5.0-alpha.55',
+  '@storybook/addon-highlight': '6.5.0-alpha.55',
+  '@storybook/addon-interactions': '6.5.0-alpha.55',
+  '@storybook/addon-jest': '6.5.0-alpha.55',
+  '@storybook/addon-links': '6.5.0-alpha.55',
+  '@storybook/addon-measure': '6.5.0-alpha.55',
+  '@storybook/addon-outline': '6.5.0-alpha.55',
+  '@storybook/addon-storyshots': '6.5.0-alpha.55',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.55',
+  '@storybook/addon-storysource': '6.5.0-alpha.55',
+  '@storybook/addon-toolbars': '6.5.0-alpha.55',
+  '@storybook/addon-viewport': '6.5.0-alpha.55',
+  '@storybook/addons': '6.5.0-alpha.55',
+  '@storybook/angular': '6.5.0-alpha.55',
+  '@storybook/api': '6.5.0-alpha.55',
+  '@storybook/builder-webpack4': '6.5.0-alpha.55',
+  '@storybook/builder-webpack5': '6.5.0-alpha.55',
+  '@storybook/channel-postmessage': '6.5.0-alpha.55',
+  '@storybook/channel-websocket': '6.5.0-alpha.55',
+  '@storybook/channels': '6.5.0-alpha.55',
+  '@storybook/cli': '6.5.0-alpha.55',
+  '@storybook/client-api': '6.5.0-alpha.55',
+  '@storybook/client-logger': '6.5.0-alpha.55',
+  '@storybook/codemod': '6.5.0-alpha.55',
+  '@storybook/components': '6.5.0-alpha.55',
+  '@storybook/core': '6.5.0-alpha.55',
+  '@storybook/core-client': '6.5.0-alpha.55',
+  '@storybook/core-common': '6.5.0-alpha.55',
+  '@storybook/core-events': '6.5.0-alpha.55',
+  '@storybook/core-server': '6.5.0-alpha.55',
+  '@storybook/csf-tools': '6.5.0-alpha.55',
+  '@storybook/docs-tools': '6.5.0-alpha.55',
+  '@storybook/ember': '6.5.0-alpha.55',
+  '@storybook/html': '6.5.0-alpha.55',
+  '@storybook/instrumenter': '6.5.0-alpha.55',
+  '@storybook/manager-webpack4': '6.5.0-alpha.55',
+  '@storybook/manager-webpack5': '6.5.0-alpha.55',
+  '@storybook/node-logger': '6.5.0-alpha.55',
+  '@storybook/postinstall': '6.5.0-alpha.55',
+  '@storybook/preact': '6.5.0-alpha.55',
+  '@storybook/preview-web': '6.5.0-alpha.55',
+  '@storybook/react': '6.5.0-alpha.55',
+  '@storybook/router': '6.5.0-alpha.55',
+  '@storybook/server': '6.5.0-alpha.55',
+  '@storybook/source-loader': '6.5.0-alpha.55',
+  '@storybook/store': '6.5.0-alpha.55',
+  '@storybook/svelte': '6.5.0-alpha.55',
+  '@storybook/theming': '6.5.0-alpha.55',
+  '@storybook/ui': '6.5.0-alpha.55',
+  '@storybook/vue': '6.5.0-alpha.55',
+  '@storybook/vue3': '6.5.0-alpha.55',
+  '@storybook/web-components': '6.5.0-alpha.55',
 };
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 89acacf8374..cba15bdcf98 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -40,13 +40,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/channel-postmessage": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/channel-postmessage": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/qs": "^6.9.5",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -62,12 +62,12 @@
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 11f554d4c5b..81353f41c3d 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -46,6 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 75fc0293a49..b842919abb5 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -44,8 +44,8 @@
     "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/csf-tools": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/csf-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
@@ -62,6 +62,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/html.js b/lib/components/html.js
index 7a58bc516e1..ffebae38881 100644
--- a/lib/components/html.js
+++ b/lib/components/html.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/html');
+module.exports = require('./dist/esm/html');
diff --git a/lib/components/package.json b/lib/components/package.json
index 37f6578feae..80b33e6c936 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
@@ -73,13 +73,13 @@
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundlerEntrypoint": "./src/index.ts",
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/src/controls/Date.tsx b/lib/components/src/controls/Date.tsx
index 27dc8e0dd1f..81247bccfa4 100644
--- a/lib/components/src/controls/Date.tsx
+++ b/lib/components/src/controls/Date.tsx
@@ -52,6 +52,10 @@ const FlexSpaced = styled.div(({ theme }) => ({
   },
   'input:first-of-type': {
     marginLeft: 0,
+    flexGrow: 4,
+  },
+  'input:last-of-type': {
+    flexGrow: 3,
   },
 }));
 
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index 760f5148de3..28c36e0c604 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-client",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,16 +40,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/channel-postmessage": "6.5.0-alpha.51",
-    "@storybook/channel-websocket": "6.5.0-alpha.51",
-    "@storybook/client-api": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/channel-postmessage": "6.5.0-alpha.55",
+    "@storybook/channel-websocket": "6.5.0-alpha.55",
+    "@storybook/client-api": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/preview-web": "6.5.0-alpha.51",
-    "@storybook/store": "6.5.0-alpha.51",
-    "@storybook/ui": "6.5.0-alpha.51",
+    "@storybook/preview-web": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/ui": "6.5.0-alpha.55",
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "core-js": "^3.8.2",
@@ -62,8 +62,8 @@
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "*"
   },
   "peerDependenciesMeta": {
@@ -74,6 +74,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-client/src/preview/start.ts b/lib/core-client/src/preview/start.ts
index 8ce0ec1810a..5c121dce2b6 100644
--- a/lib/core-client/src/preview/start.ts
+++ b/lib/core-client/src/preview/start.ts
@@ -2,12 +2,11 @@ import global from 'global';
 import deprecate from 'util-deprecate';
 import { ClientApi } from '@storybook/client-api';
 import { PreviewWeb } from '@storybook/preview-web';
-import type { WebProjectAnnotations } from '@storybook/preview-web';
 import type { AnyFramework, ArgsStoryFn } from '@storybook/csf';
 import createChannel from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
-import type { Path } from '@storybook/store';
+import type { Path, WebProjectAnnotations } from '@storybook/store';
 
 import { Loadable } from './types';
 import { executeLoadableForChanges } from './executeLoadable';
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index 65391923b3d..d01b8aff415 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -62,7 +62,7 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.1",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
     "@types/node": "^14.0.10 || ^16.0.0",
     "@types/pretty-hrtime": "^1.0.0",
@@ -100,8 +100,8 @@
     "mock-fs": "^4.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -111,6 +111,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts
index d9a26cbf12a..ac19e6becbd 100644
--- a/lib/core-common/src/presets.test.ts
+++ b/lib/core-common/src/presets.test.ts
@@ -17,28 +17,45 @@ jest.mock('@storybook/node-logger', () => ({
   },
 }));
 
-jest.mock('resolve-from', () => (l: any, name: string) => {
+jest.mock('./utils/safeResolve', () => {
   const KNOWN_FILES = [
+    '@storybook/react',
+    '@storybook/addon-actions/manager',
     '@storybook/addon-actions/register',
     './local/preset',
     './local/addons',
     '/absolute/preset',
     '/absolute/addons',
+    '@storybook/addon-docs',
+    '@storybook/addon-cool',
     '@storybook/addon-docs/preset',
+    '@storybook/addon-interactions/preset',
     '@storybook/addon-essentials',
+    '@storybook/addon-knobs/manager',
     '@storybook/addon-knobs/register',
     '@storybook/addon-notes/register-panel',
     '@storybook/preset-create-react-app',
     '@storybook/preset-typescript',
     'addon-bar/preset.js',
+    'addon-bar',
     'addon-baz/register.js',
     'addon-foo/register.js',
   ];
 
-  if (KNOWN_FILES.includes(name)) {
-    return name;
-  }
-  throw new Error(`cannot resolve ${name}`);
+  return {
+    safeResolveFrom: jest.fn((l: any, name: string) => {
+      if (KNOWN_FILES.includes(name)) {
+        return name;
+      }
+      return undefined;
+    }),
+    safeResolve: jest.fn((name: string) => {
+      if (KNOWN_FILES.includes(name)) {
+        return name;
+      }
+      return undefined;
+    }),
+  };
 });
 
 describe('presets', () => {
@@ -388,12 +405,21 @@ describe('resolveAddonName', () => {
   it('should resolve managerEntries', () => {
     expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({
       name: '@storybook/addon-actions/register',
-      type: 'managerEntries',
+      managerEntries: ['@storybook/addon-actions/register'],
+      type: 'virtual',
+    });
+  });
+
+  it('should resolve managerEntries from new /manager path', () => {
+    expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({
+      name: '@storybook/addon-actions/manager',
+      managerEntries: ['@storybook/addon-actions/manager'],
+      type: 'virtual',
     });
   });
 
   it('should resolve presets', () => {
-    expect(resolveAddonName({}, '@storybook/addon-docs')).toEqual({
+    expect(resolveAddonName({}, '@storybook/addon-docs/preset')).toEqual({
       name: '@storybook/addon-docs/preset',
       type: 'presets',
     });
@@ -417,7 +443,12 @@ describe('loadPreset', () => {
   mockPreset('@storybook/addon-docs/preset', {});
   mockPreset('@storybook/addon-actions/register', {});
   mockPreset('addon-foo/register.js', {});
-  mockPreset('addon-bar/preset', {});
+  mockPreset('@storybook/addon-cool', {});
+  mockPreset('@storybook/addon-interactions/preset', {});
+  mockPreset('addon-bar', {
+    addons: ['@storybook/addon-cool'],
+    presets: ['@storybook/addon-interactions/preset'],
+  });
   mockPreset('addon-baz/register.js', {});
   mockPreset('@storybook/addon-notes/register-panel', {});
 
@@ -427,10 +458,10 @@ describe('loadPreset', () => {
     const loaded = loadPreset(
       {
         name: '',
-        type: 'managerEntries',
+        type: 'virtual',
         framework: '@storybook/react',
         presets: ['@storybook/preset-typescript'],
-        addons: ['@storybook/addon-docs'],
+        addons: ['@storybook/addon-docs/preset'],
       },
       0,
       {}
@@ -447,6 +478,11 @@ describe('loadPreset', () => {
           "options": Object {},
           "preset": Object {},
         },
+        Object {
+          "name": "@storybook/react",
+          "options": Object {},
+          "preset": Object {},
+        },
         Object {
           "name": "@storybook/addon-docs/preset",
           "options": Object {},
@@ -455,14 +491,14 @@ describe('loadPreset', () => {
         Object {
           "name": Object {
             "addons": Array [
-              "@storybook/addon-docs",
+              "@storybook/addon-docs/preset",
             ],
             "framework": "@storybook/react",
             "name": "",
             "presets": Array [
               "@storybook/preset-typescript",
             ],
-            "type": "managerEntries",
+            "type": "virtual",
           },
           "options": Object {},
           "preset": Object {},
@@ -475,14 +511,14 @@ describe('loadPreset', () => {
     const loaded = loadPreset(
       {
         name: '',
-        type: 'managerEntries',
+        type: 'virtual',
         presets: ['@storybook/preset-typescript'],
         addons: [
-          '@storybook/addon-docs',
+          '@storybook/addon-docs/preset',
           '@storybook/addon-actions/register',
           'addon-foo/register.js',
           'addon-bar',
-          'addon-baz/register.tsx',
+          'addon-baz/register.js',
           '@storybook/addon-notes/register-panel',
         ],
       },
@@ -501,34 +537,43 @@ describe('loadPreset', () => {
         preset: {},
       },
       {
-        name: '@storybook/addon-actions/register_additionalManagerEntries',
+        name: '@storybook/addon-actions/register',
         options: {},
         preset: {
           managerEntries: ['@storybook/addon-actions/register'],
         },
       },
       {
-        name: 'addon-foo/register.js_additionalManagerEntries',
+        name: 'addon-foo/register.js',
         options: {},
         preset: {
           managerEntries: ['addon-foo/register.js'],
         },
       },
-      // should be there, but some file mocking problem is causing it to not resolve
-      // {
-      //   name: 'addon-bar',
-      //   options: {},
-      //   preset: {},
-      // },
       {
-        name: 'addon-baz/register.tsx_additionalManagerEntries',
+        name: '@storybook/addon-interactions/preset',
+        options: {},
+        preset: {},
+      },
+      {
+        name: '@storybook/addon-cool',
+        options: {},
+        preset: {},
+      },
+      {
+        name: 'addon-bar',
+        options: {},
+        preset: {},
+      },
+      {
+        name: 'addon-baz/register.js',
         options: {},
         preset: {
-          managerEntries: ['addon-baz/register.tsx'],
+          managerEntries: ['addon-baz/register.js'],
         },
       },
       {
-        name: '@storybook/addon-notes/register-panel_additionalManagerEntries',
+        name: '@storybook/addon-notes/register-panel',
         options: {},
         preset: {
           managerEntries: ['@storybook/addon-notes/register-panel'],
@@ -538,15 +583,15 @@ describe('loadPreset', () => {
         name: {
           presets: ['@storybook/preset-typescript'],
           addons: [
-            '@storybook/addon-docs',
+            '@storybook/addon-docs/preset',
             '@storybook/addon-actions/register',
             'addon-foo/register.js',
             'addon-bar',
-            'addon-baz/register.tsx',
+            'addon-baz/register.js',
             '@storybook/addon-notes/register-panel',
           ],
           name: '',
-          type: 'managerEntries',
+          type: 'virtual',
         },
         options: {},
         preset: {},
diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts
index fdc8f48da23..24093df1533 100644
--- a/lib/core-common/src/presets.ts
+++ b/lib/core-common/src/presets.ts
@@ -1,7 +1,6 @@
 import dedent from 'ts-dedent';
 import { resolve } from 'path';
 import { logger } from '@storybook/node-logger';
-import resolveFrom from 'resolve-from';
 import {
   CLIOptions,
   LoadedPreset,
@@ -12,6 +11,7 @@ import {
 } from './types';
 import { loadCustomPresets } from './utils/load-custom-presets';
 import { serverRequire } from './utils/interpret-require';
+import { safeResolve, safeResolveFrom } from './utils/safeResolve';
 
 const isObject = (val: unknown): val is Record<string, any> =>
   val != null && typeof val === 'object' && Array.isArray(val) === false;
@@ -45,8 +45,8 @@ function resolvePresetFunction<T = any>(
  * Parse an addon into either a managerEntries or a preset. Throw on invalid input.
  *
  * Valid inputs:
- * - '@storybook/addon-actions/register'
- *   =>  { type: 'managerEntries', item }
+ * - '@storybook/addon-actions/manager'
+ *   =>  { type: 'virtual', item }
  *
  * - '@storybook/addon-docs/preset'
  *   =>  { type: 'presets', item }
@@ -57,68 +57,95 @@ function resolvePresetFunction<T = any>(
  * - { name: '@storybook/addon-docs(/preset)?', options: { ... } }
  *   =>  { type: 'presets', item: { name: '@storybook/addon-docs/preset', options } }
  */
-export const resolveAddonName = (configDir: string, name: string) => {
-  let path;
+interface ResolvedAddonPreset {
+  type: 'presets';
+  name: string;
+}
+interface ResolvedAddonVirtual {
+  type: 'virtual';
+  name: string;
+  managerEntries?: string[];
+  previewAnnotations?: string[];
+  presets?: (string | { name: string; options?: any })[];
+}
 
-  if (name.startsWith('.')) {
-    path = resolveFrom(configDir, name);
-  } else if (name.startsWith('/')) {
-    path = name;
-  } else if (name.match(/\/(preset|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) {
-    path = name;
-  }
+export const resolveAddonName = (
+  configDir: string,
+  name: string,
+  options: any
+): ResolvedAddonPreset | ResolvedAddonVirtual => {
+  const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
+  const resolved = r(name);
 
-  // when user provides full path, we don't need to do anything
-  if (path) {
+  if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) {
     return {
-      name: path,
-      // Accept `register`, `register.js`, `require.resolve('foo/register'), `register-panel`
-      type: path.match(/register(-panel)?(\.(js|ts|tsx|jsx))?$/) ? 'managerEntries' : 'presets',
+      type: 'virtual',
+      name,
+      managerEntries: [resolved],
     };
   }
-
-  try {
+  if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) {
     return {
-      name: resolveFrom(configDir, `${name}/preset`),
       type: 'presets',
+      name: resolved,
     };
-    // eslint-disable-next-line no-empty
-  } catch (err) {}
+  }
 
-  try {
+  const path = name;
+
+  // when user provides full path, we don't need to do anything!
+  const managerFile = safeResolve(`${path}/manager`);
+  const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`);
+  const previewFile = safeResolve(`${path}/preview`);
+  const presetFile = safeResolve(`${path}/preset`);
+
+  if (!(managerFile || previewFile) && presetFile) {
     return {
-      name: resolveFrom(configDir, `${name}/register`),
-      type: 'managerEntries',
+      type: 'presets',
+      name: presetFile,
     };
-    // eslint-disable-next-line no-empty
-  } catch (err) {}
+  }
+
+  if (managerFile || registerFile || previewFile || presetFile) {
+    const managerEntries = [];
+
+    if (managerFile) {
+      managerEntries.push(managerFile);
+    }
+    // register file is the old way of registering addons
+    if (!managerFile && registerFile && !presetFile) {
+      managerEntries.push(registerFile);
+    }
+
+    return {
+      type: 'virtual',
+      name: path,
+      ...(managerEntries.length ? { managerEntries } : {}),
+      ...(previewFile ? { previewAnnotations: [previewFile] } : {}),
+      ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}),
+    };
+  }
 
   return {
-    name: resolveFrom(configDir, name),
     type: 'presets',
+    name: resolved,
   };
 };
 
 const map =
   ({ configDir }: InterPresetOptions) =>
   (item: any) => {
+    const options = isObject(item) ? item.options || undefined : undefined;
+    const name = isObject(item) ? item.name : item;
     try {
-      if (isObject(item)) {
-        const { name } = resolveAddonName(configDir, item.name);
-        return { ...item, name };
-      }
-      const { name, type } = resolveAddonName(configDir, item);
-      if (type === 'managerEntries') {
-        return {
-          name: `${name}_additionalManagerEntries`,
-          type,
-          managerEntries: [name],
-        };
-      }
-      return resolveAddonName(configDir, name);
+      const resolved = resolveAddonName(configDir, name, options);
+      return {
+        ...(options ? { options } : {}),
+        ...resolved,
+      };
     } catch (err) {
       logger.error(
-        `Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}`
+        `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}`
       );
     }
     return undefined;
@@ -135,7 +162,7 @@ function interopRequireDefault(filePath: string) {
 }
 
 function getContent(input: any) {
-  if (input.type === 'managerEntries') {
+  if (input.type === 'virtual') {
     const { type, name, ...rest } = input;
     return rest;
   }
diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts
index 371878343cb..07c666dea01 100644
--- a/lib/core-common/src/types.ts
+++ b/lib/core-common/src/types.ts
@@ -50,6 +50,14 @@ export interface CoreConfig {
   builder: BuilderConfig;
   disableWebpackDefaults?: boolean;
   channelOptions?: Partial<TelejsonOptions>;
+  /**
+   * enable CORS headings to run document in a "secure context"
+   * see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements
+   * This enables these headers in development-mode:
+   *   Cross-Origin-Opener-Policy: same-origin
+   *   Cross-Origin-Embedder-Policy: require-corp
+   */
+  crossOriginIsolated?: boolean;
 }
 
 interface DirectoryMapping {
@@ -412,6 +420,13 @@ export interface StorybookConfig {
 
   /**
    * Add additional scripts to run in the preview a la `.storybook/preview.js`
+   *
+   * @deprecated use `previewAnnotations` or `/preview.js` file instead
    */
   config?: (entries: Entry[], options: Options) => Entry[];
+
+  /**
+   * Add additional scripts to run in the preview a la `.storybook/preview.js`
+   */
+  previewAnnotations?: (entries: Entry[], options: Options) => Entry[];
 }
diff --git a/lib/core-common/src/utils/safeResolve.ts b/lib/core-common/src/utils/safeResolve.ts
new file mode 100644
index 00000000000..a1d5684e45b
--- /dev/null
+++ b/lib/core-common/src/utils/safeResolve.ts
@@ -0,0 +1,17 @@
+import resolveFrom from 'resolve-from';
+
+export const safeResolveFrom = (path: string, file: string) => {
+  try {
+    return resolveFrom(path, file);
+  } catch (e) {
+    return undefined;
+  }
+};
+
+export const safeResolve = (file: string) => {
+  try {
+    return require.resolve(file);
+  } catch (e) {
+    return undefined;
+  }
+};
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 90a4a9a0ab2..1144ba2ef36 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -45,6 +45,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index 4c18534ccf8..c09cf149dea 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,16 +40,16 @@
   },
   "dependencies": {
     "@discoveryjs/json-ext": "^0.5.3",
-    "@storybook/builder-webpack4": "6.5.0-alpha.51",
-    "@storybook/core-client": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/builder-webpack4": "6.5.0-alpha.55",
+    "@storybook/core-client": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/csf-tools": "6.5.0-alpha.51",
-    "@storybook/manager-webpack4": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
+    "@storybook/csf-tools": "6.5.0-alpha.55",
+    "@storybook/manager-webpack4": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.0.10 || ^16.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
@@ -85,7 +85,7 @@
     "x-default-browser": "^0.4.0"
   },
   "devDependencies": {
-    "@storybook/builder-webpack5": "6.5.0-alpha.51",
+    "@storybook/builder-webpack5": "6.5.0-alpha.55",
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/serve-favicon": "^2.5.2",
@@ -93,8 +93,8 @@
     "jest-specific-snapshot": "^4.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@storybook/builder-webpack5": {
@@ -110,6 +110,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
index 51e1c74a02f..1937cd52a90 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
@@ -6,13 +6,13 @@ Object {
     "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
-    "ROOT/addons/measure/dist/esm/register.js",
-    "ROOT/addons/outline/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/toolbars/manager.js",
+    "ROOT/addons/measure/manager.js",
+    "ROOT/addons/outline/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
index 28bb2d32108..5327d847d2c 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
@@ -6,13 +6,13 @@ Object {
     "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
-    "ROOT/addons/measure/dist/esm/register.js",
-    "ROOT/addons/outline/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/toolbars/manager.js",
+    "ROOT/addons/measure/manager.js",
+    "ROOT/addons/outline/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
index 730a1b7a2fc..c1972080422 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
@@ -8,17 +8,15 @@ Object {
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
     "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js",
     "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/measure/preview.js-generated-config-entry.js",
+    "ROOT/addons/outline/preview.js-generated-config-entry.js",
     "ROOT/addons/highlight/dist/esm/highlight.js-generated-config-entry.js",
-    "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js",
+    "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
   "keys": Array [
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
index 94c45d8c419..e9f1790b6e9 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
@@ -7,17 +7,15 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js",
     "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/measure/preview.js-generated-config-entry.js",
+    "ROOT/addons/outline/preview.js-generated-config-entry.js",
     "ROOT/addons/highlight/dist/esm/highlight.js-generated-config-entry.js",
-    "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js",
+    "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
   "keys": Array [
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
index b0b601e85c6..9fcbeaa6c24 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
@@ -5,15 +5,15 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/a11y/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/jest/register.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/storysource/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/a11y/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/jest/manager.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/storysource/dist/esm/manager.js",
+    "ROOT/addons/viewport/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
index 6b9d055e21b..348d29de932 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
@@ -5,15 +5,15 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/a11y/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/jest/register.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/storysource/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/a11y/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/jest/manager.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/storysource/dist/esm/manager.js",
+    "ROOT/addons/viewport/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
index b582a20f901..fef4e5b1e09 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
@@ -7,15 +7,13 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/a11y/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
     "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
index dd9b40ac485..d1c67aacb00 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
@@ -6,15 +6,13 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/a11y/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
     "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
index 891dad8796c..ec8992f0334 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
@@ -5,16 +5,16 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
-    "ROOT/addons/measure/dist/esm/register.js",
-    "ROOT/addons/outline/dist/esm/register.js",
-    "ROOT/addons/interactions/dist/esm/register.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/viewport/manager.js",
+    "ROOT/addons/toolbars/manager.js",
+    "ROOT/addons/measure/manager.js",
+    "ROOT/addons/outline/manager.js",
+    "ROOT/addons/interactions/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
index 99eb742814c..a686af760a2 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
@@ -5,16 +5,16 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
-    "ROOT/addons/measure/dist/esm/register.js",
-    "ROOT/addons/outline/dist/esm/register.js",
-    "ROOT/addons/interactions/dist/esm/register.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/viewport/manager.js",
+    "ROOT/addons/toolbars/manager.js",
+    "ROOT/addons/measure/manager.js",
+    "ROOT/addons/outline/manager.js",
+    "ROOT/addons/interactions/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
index d22840ca29b..dc00f7da497 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
@@ -7,18 +7,16 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/measure/preview.js-generated-config-entry.js",
+    "ROOT/addons/outline/preview.js-generated-config-entry.js",
+    "ROOT/addons/interactions/preview.js-generated-config-entry.js",
     "ROOT/addons/highlight/dist/esm/highlight.js-generated-config-entry.js",
-    "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
index ebf0fec7a22..230a824f5ab 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
@@ -6,18 +6,16 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/measure/preview.js-generated-config-entry.js",
+    "ROOT/addons/outline/preview.js-generated-config-entry.js",
+    "ROOT/addons/interactions/preview.js-generated-config-entry.js",
     "ROOT/addons/highlight/dist/esm/highlight.js-generated-config-entry.js",
-    "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js",
     "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
index 1c0d32d308b..0676e83166f 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
@@ -5,16 +5,16 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/a11y/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/interactions/dist/esm/register.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/storysource/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/a11y/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/interactions/manager.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/storysource/dist/esm/manager.js",
+    "ROOT/addons/viewport/manager.js",
+    "ROOT/addons/toolbars/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
index c090d10a586..982723cbc1a 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
@@ -5,16 +5,16 @@ Object {
   "entry": Array [
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/dist/esm/register",
-    "ROOT/addons/controls/dist/esm/register.js",
-    "ROOT/addons/a11y/dist/esm/register.js",
-    "ROOT/addons/actions/dist/esm/register.js",
-    "ROOT/addons/backgrounds/dist/esm/register.js",
-    "ROOT/addons/interactions/dist/esm/register.js",
-    "ROOT/addons/links/dist/esm/register.js",
-    "ROOT/addons/storysource/dist/esm/register.js",
-    "ROOT/addons/viewport/dist/esm/register.js",
-    "ROOT/addons/toolbars/dist/esm/register.js",
+    "ROOT/addons/docs/manager.js",
+    "ROOT/addons/controls/manager.js",
+    "ROOT/addons/a11y/manager.js",
+    "ROOT/addons/actions/manager.js",
+    "ROOT/addons/backgrounds/manager.js",
+    "ROOT/addons/interactions/manager.js",
+    "ROOT/addons/links/manager.js",
+    "ROOT/addons/storysource/dist/esm/manager.js",
+    "ROOT/addons/viewport/manager.js",
+    "ROOT/addons/toolbars/manager.js",
   ],
   "keys": Array [
     "name",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
index 4a2371e0402..12efbe2571e 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
@@ -7,16 +7,14 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/a11y/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/interactions/preview.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
     "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
index 01762e667aa..0a945360994 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
@@ -6,16 +6,14 @@ Object {
     "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
     "ROOT/lib/core-client/dist/esm/globals/globals.js",
     "ROOT/storybook-init-framework-entry.js",
-    "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js",
     "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js",
     "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js",
-    "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js",
-    "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js",
+    "ROOT/addons/docs/preview.js-generated-config-entry.js",
+    "ROOT/addons/a11y/preview.js-generated-config-entry.js",
+    "ROOT/addons/actions/preview.js-generated-config-entry.js",
+    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
+    "ROOT/addons/interactions/preview.js-generated-config-entry.js",
+    "ROOT/addons/links/preview.js-generated-config-entry.js",
     "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
     "ROOT/generated-stories-entry.js",
   ],
diff --git a/lib/core-server/src/dev-server.ts b/lib/core-server/src/dev-server.ts
index 136657833af..8cc449b5343 100644
--- a/lib/core-server/src/dev-server.ts
+++ b/lib/core-server/src/dev-server.ts
@@ -26,6 +26,9 @@ export async function storybookDevServer(options: Options) {
 
   app.use(compression({ level: 1 }));
 
+  const features = await options.presets.apply<StorybookConfig['features']>('features');
+  const core = await options.presets.apply<StorybookConfig['core']>('core');
+
   if (typeof options.extendServer === 'function') {
     options.extendServer(server);
   }
@@ -35,19 +38,26 @@ export async function storybookDevServer(options: Options) {
     res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
     // These headers are required to enable SharedArrayBuffer
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
-    res.header('Cross-Origin-Opener-Policy', 'same-origin');
-    res.header('Cross-Origin-Embedder-Policy', 'require-corp');
     next();
   });
 
-  // User's own static files
-  await useStatics(router, options);
+  if (core?.crossOriginIsolated) {
+    app.use((req, res, next) => {
+      // These headers are required to enable SharedArrayBuffer
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+      res.header('Cross-Origin-Opener-Policy', 'same-origin');
+      res.header('Cross-Origin-Embedder-Policy', 'require-corp');
+      next();
+    });
+  }
 
-  const features = await options.presets.apply<StorybookConfig['features']>('features');
   if (features?.buildStoriesJson || features?.storyStoreV7) {
     await useStoriesJson(router, serverChannel, options);
   }
 
+  // User's own static files
+  await useStatics(router, options);
+
   getMiddleware(options.configDir)(router);
   app.use(router);
 
diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts
index def7ebe4841..1f22ff93b10 100644
--- a/lib/core-server/src/presets/common-preset.ts
+++ b/lib/core-server/src/presets/common-preset.ts
@@ -61,6 +61,10 @@ export const typescript = () => ({
   },
 });
 
+export const config = async (base: any, options: Options) => {
+  return [...(await options.presets.apply('previewAnnotations', [], options)), ...base];
+};
+
 export const features = async (existing: Record<string, boolean>) => ({
   ...existing,
   postcss: true,
diff --git a/lib/core-server/src/utils/get-manager-builder.ts b/lib/core-server/src/utils/get-manager-builder.ts
index fbd40246313..8dff920aa85 100644
--- a/lib/core-server/src/utils/get-manager-builder.ts
+++ b/lib/core-server/src/utils/get-manager-builder.ts
@@ -14,10 +14,9 @@ export async function getManagerBuilder(configDir: Options['configDir']) {
   // - Everything else builds with `manager-webpack4`
   //
   // Unlike preview builders, manager building is not pluggable!
-  const builderPackage =
-    builderName === 'webpack5'
-      ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
-      : '@storybook/manager-webpack4';
+  const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
+    ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
+    : '@storybook/manager-webpack4';
 
   const managerBuilder = await import(builderPackage);
   return managerBuilder;
diff --git a/lib/core/client.js b/lib/core/client.js
index 0cea520ec68..53f27fe5fbf 100644
--- a/lib/core/client.js
+++ b/lib/core/client.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/index');
+module.exports = require('./dist/esm/index');
diff --git a/lib/core/package.json b/lib/core/package.json
index 532be4367f6..2302e0ee9ff 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -40,12 +40,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core-client": "6.5.0-alpha.51",
-    "@storybook/core-server": "6.5.0-alpha.51"
+    "@storybook/core-client": "6.5.0-alpha.55",
+    "@storybook/core-server": "6.5.0-alpha.55"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "*"
   },
   "peerDependenciesMeta": {
@@ -62,6 +62,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json
index ce993ef8479..a36c0e60506 100644
--- a/lib/csf-tools/package.json
+++ b/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -71,6 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/csf-tools/src/ConfigFile.test.ts b/lib/csf-tools/src/ConfigFile.test.ts
index cf12a3dbb5f..76b6ccb38d5 100644
--- a/lib/csf-tools/src/ConfigFile.test.ts
+++ b/lib/csf-tools/src/ConfigFile.test.ts
@@ -174,7 +174,7 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           export const core = {
             foo: 'bar',
-            builder: "webpack5"
+            builder: 'webpack5'
           };
         `);
       });
@@ -189,7 +189,7 @@ describe('ConfigFile', () => {
           )
         ).toMatchInlineSnapshot(`
           export const core = {
-            builder: "webpack5"
+            builder: 'webpack5'
           };
         `);
       });
@@ -205,7 +205,7 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           export const core = {
             builder: {
-              "name": "webpack5"
+              name: 'webpack5'
             }
           };
         `);
@@ -222,7 +222,7 @@ describe('ConfigFile', () => {
           )
         ).toMatchInlineSnapshot(`
           const coreVar = {
-            builder: "webpack5"
+            builder: 'webpack5'
           };
           export const core = coreVar;
         `);
@@ -260,7 +260,7 @@ describe('ConfigFile', () => {
           module.exports = {
             core: {
               foo: 'bar',
-              builder: "webpack5"
+              builder: 'webpack5'
             }
           };
         `);
@@ -277,11 +277,38 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           module.exports = {
             core: {
-              builder: "webpack5"
+              builder: 'webpack5'
             }
           };
         `);
       });
     });
+    describe('quotes', () => {
+      it('no quotes', () => {
+        expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(`
+          export const foo = {
+            bar: "baz"
+          };
+        `);
+      });
+      it('more single quotes', () => {
+        expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', 'b', "c"]`))
+          .toMatchInlineSnapshot(`
+          export const stories = ['a', 'b', "c"];
+          export const foo = {
+            bar: 'baz'
+          };
+        `);
+      });
+      it('more double quotes', () => {
+        expect(setField(['foo', 'bar'], 'baz', `export const stories = ['a', "b", "c"]`))
+          .toMatchInlineSnapshot(`
+          export const stories = ['a', "b", "c"];
+          export const foo = {
+            bar: "baz"
+          };
+        `);
+      });
+    });
   });
 });
diff --git a/lib/csf-tools/src/ConfigFile.ts b/lib/csf-tools/src/ConfigFile.ts
index c72e1d4e011..9e67096e307 100644
--- a/lib/csf-tools/src/ConfigFile.ts
+++ b/lib/csf-tools/src/ConfigFile.ts
@@ -81,14 +81,19 @@ const _updateExportNode = (path: string[], expr: t.Expression, existing: t.Objec
 export class ConfigFile {
   _ast: t.File;
 
+  _code: string;
+
   _exports: Record<string, t.Expression> = {};
 
   _exportsObject: t.ObjectExpression;
 
+  _quotes: 'single' | 'double' | undefined;
+
   fileName?: string;
 
-  constructor(ast: t.File, fileName?: string) {
+  constructor(ast: t.File, code: string, fileName?: string) {
     this._ast = ast;
+    this._code = code;
     this.fileName = fileName;
   }
 
@@ -190,24 +195,49 @@ export class ConfigFile {
     }
   }
 
-  setFieldValue(path: string[], value: any) {
-    const stringified = JSON.stringify(value);
-    const program = babelParse(`const __x = ${stringified}`);
-    let valueNode;
-    traverse(program, {
-      VariableDeclaration: {
-        enter({ node }) {
-          if (
-            node.declarations.length === 1 &&
-            t.isVariableDeclarator(node.declarations[0]) &&
-            t.isIdentifier(node.declarations[0].id) &&
-            node.declarations[0].id.name === '__x'
-          ) {
-            valueNode = node.declarations[0].init;
+  _inferQuotes() {
+    if (!this._quotes) {
+      // first 500 tokens for efficiency
+      const occurrences = (this._ast.tokens || []).slice(0, 500).reduce(
+        (acc, token) => {
+          if (token.type.label === 'string') {
+            acc[this._code[token.start]] += 1;
           }
+          return acc;
         },
-      },
-    });
+        { "'": 0, '"': 0 }
+      );
+      this._quotes = occurrences["'"] > occurrences['"'] ? 'single' : 'double';
+    }
+    return this._quotes;
+  }
+
+  setFieldValue(path: string[], value: any) {
+    const quotes = this._inferQuotes();
+    let valueNode;
+    // we do this rather than t.valueToNode because apparently
+    // babel only preserves quotes if they are parsed from the original code.
+    if (quotes === 'single') {
+      const { code } = generate(t.valueToNode(value), { jsescOption: { quotes } });
+      const program = babelParse(`const __x = ${code}`);
+      traverse(program, {
+        VariableDeclaration: {
+          enter({ node }) {
+            if (
+              node.declarations.length === 1 &&
+              t.isVariableDeclarator(node.declarations[0]) &&
+              t.isIdentifier(node.declarations[0].id) &&
+              node.declarations[0].id.name === '__x'
+            ) {
+              valueNode = node.declarations[0].init;
+            }
+          },
+        },
+      });
+    } else {
+      // double quotes is the default so we can skip all that
+      valueNode = t.valueToNode(value);
+    }
     if (!valueNode) {
       throw new Error(`Unexpected value ${JSON.stringify(value)}`);
     }
@@ -217,7 +247,7 @@ export class ConfigFile {
 
 export const loadConfig = (code: string, fileName?: string) => {
   const ast = babelParse(code);
-  return new ConfigFile(ast, fileName);
+  return new ConfigFile(ast, code, fileName);
 };
 
 export const formatConfig = (config: ConfigFile) => {
diff --git a/lib/csf-tools/src/babelParse.ts b/lib/csf-tools/src/babelParse.ts
index 406d58a9699..70c85fe1748 100644
--- a/lib/csf-tools/src/babelParse.ts
+++ b/lib/csf-tools/src/babelParse.ts
@@ -10,4 +10,5 @@ export const babelParse = (code: string) =>
       ['decorators', { decoratorsBeforeExport: true }],
       'classProperties',
     ],
+    tokens: true,
   });
diff --git a/lib/docs-tools/package.json b/lib/docs-tools/package.json
index a919286f71d..2b38e299342 100644
--- a/lib/docs-tools/package.json
+++ b/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
@@ -42,7 +42,7 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21",
@@ -55,6 +55,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/instrumenter/package.json b/lib/instrumenter/package.json
index 28d1ff3c55f..9842bbcad26 100644
--- a/lib/instrumenter/package.json
+++ b/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,15 +40,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
index 01a6801e345..ac5d21821ed 100644
--- a/lib/manager-webpack4/package.json
+++ b/lib/manager-webpack4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-webpack4",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-template-literals": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/core-client": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
-    "@storybook/ui": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/core-client": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
+    "@storybook/ui": "6.5.0-alpha.55",
     "@types/node": "^14.0.10 || ^16.0.0",
     "@types/webpack": "^4.41.26",
     "babel-loader": "^8.0.0",
@@ -85,8 +85,8 @@
     "@types/webpack-virtual-modules": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -96,6 +96,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
index 03e9d0353c0..490cf4b7922 100644
--- a/lib/manager-webpack5/package.json
+++ b/lib/manager-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-webpack5",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-template-literals": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/core-client": "6.5.0-alpha.51",
-    "@storybook/core-common": "6.5.0-alpha.51",
-    "@storybook/node-logger": "6.5.0-alpha.51",
-    "@storybook/theming": "6.5.0-alpha.51",
-    "@storybook/ui": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/core-client": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/theming": "6.5.0-alpha.55",
+    "@storybook/ui": "6.5.0-alpha.55",
     "@types/node": "^14.0.10 || ^16.0.0",
     "babel-loader": "^8.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -82,8 +82,8 @@
     "@types/webpack-virtual-modules": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -93,6 +93,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index f5abeb25f28..54f47644d77 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -52,6 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index 78702dfc020..aeb5b822b73 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json
index 2486527428a..6f06b0cb23a 100644
--- a/lib/preview-web/package.json
+++ b/lib/preview-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-web",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,12 +40,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/channel-postmessage": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/channel-postmessage": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/store": "6.5.0-alpha.51",
+    "@storybook/store": "6.5.0-alpha.55",
     "ansi-to-html": "^0.6.11",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -58,12 +58,12 @@
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
index b42e479ba2e..f5436f57b51 100644
--- a/lib/preview-web/src/PreviewWeb.test.ts
+++ b/lib/preview-web/src/PreviewWeb.test.ts
@@ -5,7 +5,7 @@ import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
 import type { AnyFramework } from '@storybook/csf';
-import type { ModuleImportFn } from '@storybook/store';
+import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store';
 
 import { PreviewWeb } from './PreviewWeb';
 import {
@@ -22,7 +22,6 @@ import {
   waitForQuiescence,
   waitForRenderPhase,
 } from './PreviewWeb.mockdata';
-import type { WebProjectAnnotations } from './types';
 
 jest.mock('./WebView');
 const { history, document } = global;
diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
index a1f26c77c29..71c450cb1ea 100644
--- a/lib/preview-web/src/PreviewWeb.tsx
+++ b/lib/preview-web/src/PreviewWeb.tsx
@@ -13,10 +13,9 @@ import {
   StoryStore,
   StorySpecifier,
   StoryIndex,
+  WebProjectAnnotations,
 } from '@storybook/store';
 
-import { WebProjectAnnotations } from './types';
-
 import { UrlStore } from './UrlStore';
 import { WebView } from './WebView';
 import { PREPARE_ABORTED, StoryRender } from './StoryRender';
diff --git a/lib/preview-web/src/index.ts b/lib/preview-web/src/index.ts
index 78f8cd58974..d643864f3ab 100644
--- a/lib/preview-web/src/index.ts
+++ b/lib/preview-web/src/index.ts
@@ -1,6 +1,8 @@
+// FIXME: breaks builder-vite, remove this in 7.0
+export { composeConfigs } from '@storybook/store';
+
 export { PreviewWeb } from './PreviewWeb';
 
-export { composeConfigs } from './composeConfigs';
 export { simulatePageLoad, simulateDOMContentLoaded } from './simulate-pageload';
 
 export * from './types';
diff --git a/lib/preview-web/src/types.ts b/lib/preview-web/src/types.ts
index fc4817e30fc..c068a57a815 100644
--- a/lib/preview-web/src/types.ts
+++ b/lib/preview-web/src/types.ts
@@ -2,20 +2,14 @@ import type {
   StoryId,
   StoryName,
   AnyFramework,
-  ProjectAnnotations,
   StoryContextForLoaders,
   ComponentTitle,
   Args,
   Globals,
 } from '@storybook/csf';
-import type { RenderContext, Story } from '@storybook/store';
+import type { Story } from '@storybook/store';
 import { PreviewWeb } from './PreviewWeb';
 
-export type WebProjectAnnotations<TFramework extends AnyFramework> =
-  ProjectAnnotations<TFramework> & {
-    renderToDOM?: (context: RenderContext<TFramework>, element: Element) => Promise<void> | void;
-  };
-
 export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework> {
   id: StoryId;
   title: ComponentTitle;
diff --git a/lib/router/package.json b/lib/router/package.json
index 97ea71b96a6..d55587358a2 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -40,7 +40,7 @@
     "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
@@ -57,13 +57,13 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundlerEntrypoint": "./src/index.ts",
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/router/utils.js b/lib/router/utils.js
index 3120589b76e..c61f0e64bfc 100644
--- a/lib/router/utils.js
+++ b/lib/router/utils.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/utils');
+module.exports = require('./dist/esm/utils');
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index bc2d9dfcf88..ad3f7a43fd4 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -41,8 +41,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
@@ -53,12 +53,12 @@
     "regenerator-runtime": "^0.13.7"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/store/package.json b/lib/store/package.json
index 7177cd08886..95cd43778d0 100644
--- a/lib/store/package.json
+++ b/lib/store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,9 +40,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -57,12 +57,12 @@
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/store/src/StoryStore.test.ts b/lib/store/src/StoryStore.test.ts
index 579a24c4a2b..3e9b9245de3 100644
--- a/lib/store/src/StoryStore.test.ts
+++ b/lib/store/src/StoryStore.test.ts
@@ -1,21 +1,19 @@
 import type { AnyFramework, ProjectAnnotations } from '@storybook/csf';
 import global from 'global';
 
-import { prepareStory, processCSFFile } from './csf';
+import { prepareStory } from './csf/prepareStory';
+import { processCSFFile } from './csf/processCSFFile';
 import { StoryStore } from './StoryStore';
 import type { StoryIndex } from './types';
 import { HooksContext } from './hooks';
 
 // Spy on prepareStory/processCSFFile
-jest.mock('./csf', () => {
-  const actualModule = jest.requireActual('./csf');
-
-  return {
-    ...actualModule,
-    prepareStory: jest.fn(actualModule.prepareStory),
-    processCSFFile: jest.fn(actualModule.processCSFFile),
-  };
-});
+jest.mock('./csf/prepareStory', () => ({
+  prepareStory: jest.fn(jest.requireActual('./csf/prepareStory').prepareStory),
+}));
+jest.mock('./csf/processCSFFile', () => ({
+  processCSFFile: jest.fn(jest.requireActual('./csf/processCSFFile').processCSFFile),
+}));
 
 jest.mock('global', () => ({
   ...(jest.requireActual('global') as any),
diff --git a/lib/preview-web/src/composeConfigs.test.ts b/lib/store/src/csf/composeConfigs.test.ts
similarity index 100%
rename from lib/preview-web/src/composeConfigs.test.ts
rename to lib/store/src/csf/composeConfigs.test.ts
diff --git a/lib/preview-web/src/composeConfigs.ts b/lib/store/src/csf/composeConfigs.ts
similarity index 65%
rename from lib/preview-web/src/composeConfigs.ts
rename to lib/store/src/csf/composeConfigs.ts
index bc426aabc2a..a8e60cbd387 100644
--- a/lib/preview-web/src/composeConfigs.ts
+++ b/lib/store/src/csf/composeConfigs.ts
@@ -1,21 +1,33 @@
 import type { AnyFramework } from '@storybook/csf';
-import { combineParameters } from '@storybook/store';
-import type { ModuleExports } from '@storybook/store';
-import type { WebProjectAnnotations } from './types';
 
-function getField(moduleExportList: ModuleExports[], field: string): any[] {
+import { combineParameters } from '../parameters';
+import type { ModuleExports, WebProjectAnnotations } from '../types';
+
+export function getField<TFieldType = any>(
+  moduleExportList: ModuleExports[],
+  field: string
+): TFieldType | TFieldType[] {
   return moduleExportList.map((xs) => xs[field]).filter(Boolean);
 }
 
-function getArrayField(moduleExportList: ModuleExports[], field: string): any[] {
-  return getField(moduleExportList, field).reduce((a, b) => [...a, ...b], []);
+export function getArrayField<TFieldType = any>(
+  moduleExportList: ModuleExports[],
+  field: string
+): TFieldType[] {
+  return getField(moduleExportList, field).reduce((a: any, b: any) => [...a, ...b], []);
 }
 
-function getObjectField(moduleExportList: ModuleExports[], field: string): Record<string, any> {
+export function getObjectField<TFieldType = Record<string, any>>(
+  moduleExportList: ModuleExports[],
+  field: string
+): TFieldType {
   return Object.assign({}, ...getField(moduleExportList, field));
 }
 
-function getSingletonField(moduleExportList: ModuleExports[], field: string): any {
+export function getSingletonField<TFieldType = any>(
+  moduleExportList: ModuleExports[],
+  field: string
+): TFieldType {
   return getField(moduleExportList, field).pop();
 }
 
diff --git a/lib/store/src/csf/index.ts b/lib/store/src/csf/index.ts
index 90380175cb6..00cdb73c479 100644
--- a/lib/store/src/csf/index.ts
+++ b/lib/store/src/csf/index.ts
@@ -5,3 +5,5 @@ export * from './prepareStory';
 export * from './normalizeComponentAnnotations';
 export * from './normalizeProjectAnnotations';
 export * from './getValuesFromArgTypes';
+export * from './composeConfigs';
+export * from './testing-utils';
diff --git a/lib/store/src/csf/testing-utils/index.test.ts b/lib/store/src/csf/testing-utils/index.test.ts
new file mode 100644
index 00000000000..514b82b1c0d
--- /dev/null
+++ b/lib/store/src/csf/testing-utils/index.test.ts
@@ -0,0 +1,77 @@
+import { composeStory, composeStories } from './index';
+
+// Most integration tests for this functionality are located under examples/cra-ts-essentials
+describe('composeStory', () => {
+  const meta = {
+    title: 'Button',
+    parameters: {
+      firstAddon: true,
+    },
+    args: {
+      label: 'Hello World',
+      primary: true,
+    },
+  };
+
+  test('should return story with composed args and parameters', () => {
+    const Story = () => {};
+    Story.args = { primary: true };
+    Story.parameters = {
+      parameters: {
+        secondAddon: true,
+      },
+    };
+
+    const composedStory = composeStory(Story, meta);
+    expect(composedStory.args).toEqual({ ...Story.args, ...meta.args });
+    expect(composedStory.parameters).toEqual(
+      expect.objectContaining({ ...Story.parameters, ...meta.parameters })
+    );
+  });
+
+  test('should throw an error if Story is undefined', () => {
+    expect(() => {
+      composeStory(undefined, meta);
+    }).toThrow();
+  });
+});
+
+describe('composeStories', () => {
+  test('should call composeStoryFn with stories', () => {
+    const composeConfigFn = jest.fn((v) => v);
+    const module = {
+      default: {
+        title: 'Button',
+      },
+      StoryOne: () => {},
+      StoryTwo: () => {},
+    };
+    const globalConfig = {};
+    composeStories(module, globalConfig, composeConfigFn);
+    expect(composeConfigFn).toHaveBeenCalledWith(
+      module.StoryOne,
+      module.default,
+      globalConfig,
+      'StoryOne'
+    );
+    expect(composeConfigFn).toHaveBeenCalledWith(
+      module.StoryTwo,
+      module.default,
+      globalConfig,
+      'StoryTwo'
+    );
+  });
+
+  test('should not call composeStoryFn for non-story exports', () => {
+    const composeConfigFn = jest.fn((v) => v);
+    const module = {
+      default: {
+        title: 'Button',
+        excludeStories: /Data/,
+      },
+      mockData: {},
+    };
+    composeStories(module, {}, composeConfigFn);
+    expect(composeConfigFn).not.toHaveBeenCalled();
+  });
+});
diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts
new file mode 100644
index 00000000000..04a7f93594b
--- /dev/null
+++ b/lib/store/src/csf/testing-utils/index.ts
@@ -0,0 +1,130 @@
+import {
+  isExportStory,
+  AnyFramework,
+  AnnotatedStoryFn,
+  StoryAnnotations,
+  ComponentAnnotations,
+  ProjectAnnotations,
+  Args,
+  StoryContext,
+  Parameters,
+} from '@storybook/csf';
+
+import { composeConfigs } from '../composeConfigs';
+import { prepareStory } from '../prepareStory';
+import { normalizeStory } from '../normalizeStory';
+import { HooksContext } from '../../hooks';
+import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations';
+import { getValuesFromArgTypes } from '../getValuesFromArgTypes';
+import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations';
+import type { CSFExports, ComposedStoryPlayFn } from './types';
+
+export * from './types';
+
+let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {};
+
+export function setProjectAnnotations<TFramework extends AnyFramework = AnyFramework>(
+  projectAnnotations: ProjectAnnotations<TFramework> | ProjectAnnotations<TFramework>[]
+) {
+  GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = Array.isArray(projectAnnotations)
+    ? composeConfigs(projectAnnotations)
+    : projectAnnotations;
+}
+
+interface ComposeStory<TFramework extends AnyFramework = AnyFramework, TArgs extends Args = Args> {
+  (
+    storyAnnotations: AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>,
+    componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
+    projectAnnotations: ProjectAnnotations<TFramework>,
+    exportsName?: string
+  ): {
+    (extraArgs: Partial<TArgs>): TFramework['storyResult'];
+    storyName: string;
+    args: Args;
+    play: ComposedStoryPlayFn;
+    parameters: Parameters;
+  };
+}
+
+export function composeStory<
+  TFramework extends AnyFramework = AnyFramework,
+  TArgs extends Args = Args
+>(
+  storyAnnotations: AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>,
+  componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
+  projectAnnotations: ProjectAnnotations<TFramework> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
+  defaultConfig: ProjectAnnotations<TFramework> = {},
+  exportsName?: string
+) {
+  if (storyAnnotations === undefined) {
+    throw new Error('Expected a story but received undefined.');
+  }
+
+  // @TODO: Support auto title
+  // eslint-disable-next-line no-param-reassign
+  componentAnnotations.title = componentAnnotations.title ?? 'ComposedStory';
+  const normalizedComponentAnnotations = normalizeComponentAnnotations(componentAnnotations);
+
+  const storyName =
+    exportsName ||
+    storyAnnotations.storyName ||
+    storyAnnotations.story?.name ||
+    storyAnnotations.name;
+
+  const normalizedStory = normalizeStory(
+    storyName,
+    storyAnnotations,
+    normalizedComponentAnnotations
+  );
+
+  const normalizedProjectAnnotations = normalizeProjectAnnotations({
+    ...projectAnnotations,
+    ...defaultConfig,
+  });
+
+  const story = prepareStory<TFramework>(
+    normalizedStory,
+    normalizedComponentAnnotations,
+    normalizedProjectAnnotations
+  );
+
+  const defaultGlobals = getValuesFromArgTypes(projectAnnotations.globalTypes);
+
+  const composedStory = (extraArgs: Partial<TArgs>) => {
+    const context: Partial<StoryContext> = {
+      ...story,
+      hooks: new HooksContext(),
+      globals: defaultGlobals,
+      args: { ...story.initialArgs, ...extraArgs },
+    };
+
+    return story.unboundStoryFn(context as StoryContext);
+  };
+
+  composedStory.storyName = storyName;
+  composedStory.args = story.initialArgs;
+  composedStory.play = story.playFunction as ComposedStoryPlayFn;
+  composedStory.parameters = story.parameters;
+
+  return composedStory;
+}
+
+export function composeStories<TModule extends CSFExports>(
+  storiesImport: TModule,
+  globalConfig: ProjectAnnotations<AnyFramework>,
+  composeStoryFn: ComposeStory
+) {
+  const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport;
+  const composedStories = Object.entries(stories).reduce((storiesMap, [exportsName, story]) => {
+    if (!isExportStory(exportsName, meta)) {
+      return storiesMap;
+    }
+
+    const result = Object.assign(storiesMap, {
+      [exportsName]: composeStoryFn(story, meta, globalConfig, exportsName),
+    });
+    return result;
+  }, {});
+
+  return composedStories;
+}
diff --git a/lib/store/src/csf/testing-utils/types.ts b/lib/store/src/csf/testing-utils/types.ts
new file mode 100644
index 00000000000..498e091aeda
--- /dev/null
+++ b/lib/store/src/csf/testing-utils/types.ts
@@ -0,0 +1,39 @@
+import type {
+  AnyFramework,
+  AnnotatedStoryFn,
+  StoryAnnotations,
+  ComponentAnnotations,
+  Args,
+  StoryContext,
+} from '@storybook/csf';
+
+export type CSFExports<TFramework extends AnyFramework = AnyFramework> = {
+  default: ComponentAnnotations<TFramework, Args>;
+  __esModule?: boolean;
+  __namedExportsOrder?: string[];
+};
+
+export type ComposedStoryPlayContext = Partial<StoryContext> & Pick<StoryContext, 'canvasElement'>;
+
+export type ComposedStoryPlayFn = (context: ComposedStoryPlayContext) => Promise<void> | void;
+
+export type StoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> =
+  AnnotatedStoryFn<TFramework, TArgs> & { play: ComposedStoryPlayFn };
+
+export type ComposedStory<TFramework extends AnyFramework = AnyFramework, TArgs = Args> =
+  | StoryFn<TFramework, TArgs>
+  | StoryAnnotations<TFramework, TArgs>;
+
+/**
+ * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
+ * 1. pick the keys K of T that have properties that are Story<AnyProps>
+ * 2. infer the actual prop type for each Story
+ * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
+ */
+export type StoriesWithPartialProps<TFramework extends AnyFramework, TModule> = {
+  // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
+  // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
+  [K in keyof TModule]: TModule[K] extends ComposedStory<infer _, infer TProps>
+    ? AnnotatedStoryFn<TFramework, Partial<TProps>>
+    : unknown;
+};
diff --git a/lib/store/src/types.ts b/lib/store/src/types.ts
index 98d39ec2b56..cd92d6c1606 100644
--- a/lib/store/src/types.ts
+++ b/lib/store/src/types.ts
@@ -29,6 +29,11 @@ export type ModuleExports = Record<string, any>;
 type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
 export type ModuleImportFn = (path: Path) => PromiseLike<ModuleExports>;
 
+export type WebProjectAnnotations<TFramework extends AnyFramework> =
+  ProjectAnnotations<TFramework> & {
+    renderToDOM?: (context: RenderContext<TFramework>, element: Element) => Promise<void> | void;
+  };
+
 export type NormalizedProjectAnnotations<TFramework extends AnyFramework = AnyFramework> =
   ProjectAnnotations<TFramework> & {
     argTypes?: StrictArgTypes;
diff --git a/lib/theming/create.js b/lib/theming/create.js
index 69e29d7f01b..65d2da89a5b 100644
--- a/lib/theming/create.js
+++ b/lib/theming/create.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/create');
+module.exports = require('./dist/esm/create');
diff --git a/lib/theming/package.json b/lib/theming/package.json
index ce2bb3604a9..1f9cc08eb35 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -40,7 +40,7 @@
     "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "6.5.0-alpha.51",
+    "@storybook/client-logger": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7"
   },
@@ -58,13 +58,13 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundlerEntrypoint": "./src/index.ts",
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts
index 29a59cac1ad..4fed4cc6aa9 100644
--- a/lib/theming/src/convert.ts
+++ b/lib/theming/src/convert.ts
@@ -95,6 +95,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
     brandTitle,
     brandUrl,
     brandImage,
+    brandTarget,
     gridCellSize,
     ...rest
   } = inherit;
@@ -148,6 +149,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
       title: brandTitle,
       url: brandUrl,
       image: brandImage || (brandTitle ? null : undefined),
+      target: brandTarget,
     },
 
     code: createSyntax({
diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
index 02a23b7dc20..4d4bc022bf2 100644
--- a/lib/theming/src/index.ts
+++ b/lib/theming/src/index.ts
@@ -1,10 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./typings.d.ts" />
 
+import { CacheProvider } from '@emotion/core';
 import emotionStyled, { CreateStyled } from '@emotion/styled';
 
 import { Theme } from './types';
 
+export { CacheProvider };
+
 export type { StyledComponent } from '@emotion/styled';
 export { Global, keyframes, css, jsx, ClassNames } from '@emotion/core';
 export type { CSSObject, Keyframes } from '@emotion/core';
diff --git a/lib/theming/src/tests/convert.test.js b/lib/theming/src/tests/convert.test.js
index 98a4458cb1f..902a8314d5b 100644
--- a/lib/theming/src/tests/convert.test.js
+++ b/lib/theming/src/tests/convert.test.js
@@ -41,6 +41,7 @@ describe('convert', () => {
     const customVars = create({
       base: 'light',
       brandTitle: 'my custom storybook',
+      brandTarget: '_self',
       gridCellSize: 12,
     });
 
@@ -52,6 +53,7 @@ describe('convert', () => {
       }),
       brand: expect.objectContaining({
         title: 'my custom storybook',
+        target: '_self',
       }),
     });
   });
diff --git a/lib/theming/src/tests/create.test.js b/lib/theming/src/tests/create.test.js
index f5523619e00..4d002f88d9e 100644
--- a/lib/theming/src/tests/create.test.js
+++ b/lib/theming/src/tests/create.test.js
@@ -53,14 +53,22 @@ describe('create brand', () => {
     expect(result.brandImage).not.toBeDefined();
     expect(result.brandTitle).not.toBeDefined();
     expect(result.brandUrl).not.toBeDefined();
+    expect(result.brandTarget).not.toBeDefined();
   });
   it('should accept null', () => {
-    const result = create({ base: 'light', brandTitle: null, brandUrl: null, brandImage: null });
+    const result = create({
+      base: 'light',
+      brandTitle: null,
+      brandUrl: null,
+      brandImage: null,
+      brandTarget: null,
+    });
 
     expect(result).toMatchObject({
       brandImage: null,
       brandTitle: null,
       brandUrl: null,
+      brandTarget: null,
     });
   });
   it('should accept values', () => {
@@ -69,12 +77,14 @@ describe('create brand', () => {
       brandImage: 'https://place-hold.it/350x150',
       brandTitle: 'my custom storybook',
       brandUrl: 'https://example.com',
+      brandTarget: '_top',
     });
 
     expect(result).toMatchObject({
       brandImage: 'https://place-hold.it/350x150',
       brandTitle: 'my custom storybook',
       brandUrl: 'https://example.com',
+      brandTarget: '_top',
     });
   });
 });
diff --git a/lib/theming/src/types.ts b/lib/theming/src/types.ts
index 2ef1afa6608..5d4734934c9 100644
--- a/lib/theming/src/types.ts
+++ b/lib/theming/src/types.ts
@@ -37,6 +37,7 @@ export interface ThemeVars {
   brandTitle?: string;
   brandUrl?: string;
   brandImage?: string;
+  brandTarget?: string;
 
   gridCellSize?: number;
 }
@@ -52,6 +53,7 @@ export interface Brand {
   title: string | undefined;
   url: string | null | undefined;
   image: string | null | undefined;
+  target: string | null | undefined;
 }
 
 export interface Theme {
diff --git a/lib/ui/package.json b/lib/ui/package.json
index f358d2545ed..ccb8fb21718 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -40,15 +40,15 @@
     "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.51",
-    "@storybook/api": "6.5.0-alpha.51",
-    "@storybook/channels": "6.5.0-alpha.51",
-    "@storybook/client-logger": "6.5.0-alpha.51",
-    "@storybook/components": "6.5.0-alpha.51",
-    "@storybook/core-events": "6.5.0-alpha.51",
-    "@storybook/router": "6.5.0-alpha.51",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/api": "6.5.0-alpha.55",
+    "@storybook/channels": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/components": "6.5.0-alpha.55",
+    "@storybook/core-events": "6.5.0-alpha.55",
+    "@storybook/router": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
-    "@storybook/theming": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0"
@@ -76,13 +76,13 @@
     "webpack": "4"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundlerEntrypoint": "./src/index.tsx",
-  "gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
index 3d08654da09..e3bbdf527e0 100644
--- a/lib/ui/src/components/sidebar/Brand.tsx
+++ b/lib/ui/src/components/sidebar/Brand.tsx
@@ -32,8 +32,8 @@ export const LogoLink = styled.a(({ theme }) => ({
 }));
 
 export const Brand = withTheme(({ theme }) => {
-  const { title = 'Storybook', url = './', image } = theme.brand;
-  const targetValue = url === './' ? '' : '_blank';
+  const { title = 'Storybook', url = './', image, target } = theme.brand;
+  const targetValue = target || (url === './' ? '' : '_blank');
 
   // When image is explicitly set to null, enable custom HTML support
   if (image === null) {
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index 3b32f1530d8..291fe4f8b76 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -41,6 +41,7 @@ export const Standard: Story = () => {
           title: undefined,
           url: undefined,
           image: undefined,
+          target: undefined,
         },
       }}
     >
@@ -59,6 +60,7 @@ export const StandardNoLink: Story = () => {
           title: undefined,
           url: null,
           image: undefined,
+          target: undefined,
         },
       }}
     >
diff --git a/package.json b/package.json
index ca1c1fff9cc..2bc4fb33cfa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "6.5.0-alpha.51",
+  "version": "6.5.0-alpha.55",
   "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": [
@@ -254,6 +254,7 @@
     "jest-enzyme": "^7.1.2",
     "jest-image-snapshot": "^4.3.0",
     "jest-jasmine2": "^26.6.3",
+    "jest-junit": "^13.0.0",
     "jest-os-detection": "^1.3.1",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-html": "^7.0.0",
diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js
index 110f431de1e..9a4f491a2d5 100755
--- a/scripts/bootstrap.js
+++ b/scripts/bootstrap.js
@@ -124,7 +124,7 @@ function run() {
       defaultValue: false,
       option: '--reg',
       command: () => {
-        spawn('yarn local-registry --publish --open');
+        spawn('yarn local-registry --publish --open --port 6000');
       },
       order: 11,
     }),
diff --git a/yarn.lock b/yarn.lock
index 944e3b16231..8df9132834b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5194,23 +5194,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@packtracker/webpack-plugin@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@packtracker/webpack-plugin@npm:2.3.0"
-  dependencies:
-    lodash: ^4.17.15
-    minimist: ^1.2.0
-    omit-deep: ^0.3.0
-    tiny-json-http: ^7.1.2
-    webpack-bundle-analyzer: ^3.4.1
-  peerDependencies:
-    webpack: ">= 2.0.0"
-  bin:
-    packtracker-upload: ./bin.js
-  checksum: 82cf47599f734b60043c87badf4150c3a0927d525e994bed86226db197aa20ea8927b430508090ce6ced12f92e2d2b6c5ee01b3edc5d77eed99804be74022af7
-  languageName: node
-  linkType: hard
-
 "@parcel/bundler-default@npm:2.3.2":
   version: 2.3.2
   resolution: "@parcel/bundler-default@npm:2.3.2"
@@ -6192,19 +6175,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@6.5.0-alpha.51, @storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
+"@storybook/addon-a11y@6.5.0-alpha.55, @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/addon-highlight": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addon-highlight": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@testing-library/react": ^11.2.2
     "@types/webpack-env": ^1.16.0
     axe-core: ^4.2.0
@@ -6216,8 +6199,8 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6226,16 +6209,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@6.5.0-alpha.51, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/lodash": ^4.14.167
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6251,8 +6235,8 @@ __metadata:
     util-deprecate: ^1.0.2
     uuid-browser: ^3.1.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6261,17 +6245,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@6.5.0-alpha.51, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6280,8 +6264,8 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6290,25 +6274,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@6.5.0-alpha.51, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     core-js: ^3.8.2
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6317,7 +6301,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@6.5.0-alpha.51, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@6.5.0-alpha.55, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
@@ -6326,71 +6310,64 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
     "@storybook/mdx1-csf": canary
     "@storybook/mdx2-csf": canary
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/postinstall": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/source-loader": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/postinstall": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/source-loader": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/util-deprecate": ^1.0.0
     babel-loader: ^8.0.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
     lodash: ^4.17.21
+    regenerator-runtime: ^0.13.7
     remark-external-links: ^8.0.0
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
-    webpack: 4
   peerDependencies:
     "@storybook/mdx2-csf": "*"
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-    webpack: "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
-    "@storybook/builder-webpack4":
-      optional: true
-    "@storybook/builder-webpack5":
-      optional: true
     "@storybook/mdx2-csf":
       optional: true
     react:
       optional: true
     react-dom:
       optional: true
-    webpack:
-      optional: true
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-essentials@6.5.0-alpha.51, @storybook/addon-essentials@workspace:*, @storybook/addon-essentials@workspace:addons/essentials":
+"@storybook/addon-essentials@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-measure": 6.5.0-alpha.51
-    "@storybook/addon-outline": 6.5.0-alpha.51
-    "@storybook/addon-toolbars": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/vue": 6.5.0-alpha.51
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-measure": 6.5.0-alpha.55
+    "@storybook/addon-outline": 6.5.0-alpha.55
+    "@storybook/addon-toolbars": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/vue": 6.5.0-alpha.55
     "@types/jest": ^26.0.16
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6436,7 +6413,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-highlight@6.5.0-alpha.51, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
+"@storybook/addon-highlight@6.5.0-alpha.55, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-highlight@workspace:addons/highlight"
   dependencies:
@@ -6477,20 +6454,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@6.5.0-alpha.51, @storybook/addon-interactions@workspace:*, @storybook/addon-interactions@workspace:addons/interactions":
+"@storybook/addon-interactions@6.5.0-alpha.55, @storybook/addon-interactions@workspace:*, @storybook/addon-interactions@workspace:addons/interactions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-interactions@workspace:addons/interactions"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/instrumenter": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/instrumenter": 6.5.0-alpha.55
     "@storybook/jest": ^0.0.5
     "@storybook/testing-library": ^0.0.7
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     core-js: ^3.8.2
     formik: ^2.2.9
     global: ^4.4.0
@@ -6498,8 +6476,8 @@ __metadata:
     polished: ^4.0.5
     ts-dedent: ^2.2.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6508,15 +6486,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-jest@6.5.0-alpha.51, @storybook/addon-jest@workspace:*, @storybook/addon-jest@workspace:addons/jest":
+"@storybook/addon-jest@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6524,8 +6503,8 @@ __metadata:
     regenerator-runtime: ^0.13.7
     upath: ^1.2.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6534,15 +6513,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-links@6.5.0-alpha.51, @storybook/addon-links@workspace:*, @storybook/addon-links@workspace:addons/links":
+"@storybook/addon-links@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/router": 6.5.0-alpha.51
+    "@storybook/router": 6.5.0-alpha.55
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6552,8 +6531,8 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6562,22 +6541,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@6.5.0-alpha.51, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
+"@storybook/addon-measure@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6586,15 +6565,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-outline@6.5.0-alpha.51, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
+"@storybook/addon-outline@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6602,8 +6581,8 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6625,20 +6604,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-storyshots-puppeteer@6.5.0-alpha.51, @storybook/addon-storyshots-puppeteer@workspace:*, @storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer":
+"@storybook/addon-storyshots-puppeteer@6.5.0-alpha.55, @storybook/addon-storyshots-puppeteer@workspace:*, @storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer"
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@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.5.0-alpha.51
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
     puppeteer: ^2.0.0 || ^3.0.0
   peerDependenciesMeta:
     puppeteer:
@@ -6646,25 +6625,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storyshots@6.5.0-alpha.51, @storybook/addon-storyshots@workspace:*, @storybook/addon-storyshots@workspace:addons/storyshots/storyshots-core":
+"@storybook/addon-storyshots@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/angular": 6.5.0-alpha.51
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/angular": 6.5.0-alpha.55
     "@storybook/babel-plugin-require-context-hook": 1.0.1
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-client": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-client": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/react": 6.5.0-alpha.51
-    "@storybook/vue": 6.5.0-alpha.51
-    "@storybook/vue3": 6.5.0-alpha.51
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/vue": 6.5.0-alpha.55
+    "@storybook/vue3": 6.5.0-alpha.55
     "@types/glob": ^7.1.3
     "@types/jest": ^26.0.16
     "@types/jest-specific-snapshot": ^0.5.3
@@ -6697,8 +6676,8 @@ __metadata:
     jest-preset-angular: "*"
     jest-vue-preprocessor: "*"
     preact: ^10.5.13
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     rxjs: "*"
     svelte: "*"
     vue: "*"
@@ -6737,17 +6716,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-storysource@6.5.0-alpha.51, @storybook/addon-storysource@workspace:*, @storybook/addon-storysource@workspace:addons/storysource":
+"@storybook/addon-storysource@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/router": 6.5.0-alpha.51
-    "@storybook/source-loader": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/router": 6.5.0-alpha.55
+    "@storybook/source-loader": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/react": ^16.14.23
     "@types/react-syntax-highlighter": ^11.0.5
     core-js: ^3.8.2
@@ -6757,8 +6736,8 @@ __metadata:
     react-syntax-highlighter: ^15.4.5
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6767,19 +6746,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-toolbars@6.5.0-alpha.51, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6788,24 +6768,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@6.5.0-alpha.51, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
@@ -6814,24 +6794,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@6.5.0-alpha.51, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@6.5.0-alpha.55, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
   version: 0.0.0-use.local
   resolution: "@storybook/addons@workspace:lib/addons"
   dependencies:
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/router": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/router": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/webpack-env": ^1.16.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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -6879,7 +6859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/angular@6.5.0-alpha.51, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
+"@storybook/angular@6.5.0-alpha.55, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:app/angular"
   dependencies:
@@ -6895,17 +6875,17 @@ __metadata:
     "@angular/platform-browser": ^11.2.14
     "@angular/platform-browser-dynamic": ^11.2.14
     "@nrwl/workspace": ^11.6.3
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     "@types/autoprefixer": ^9.7.2
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/react": ^16.14.23
@@ -6967,17 +6947,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@6.5.0-alpha.51, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
+"@storybook/api@6.5.0-alpha.55, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/api"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/router": 6.5.0-alpha.51
+    "@storybook/router": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/lodash": ^4.14.167
     "@types/qs": ^6
     "@types/semver": ^7.3.4
@@ -6995,8 +6975,8 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -7063,27 +7043,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack4@6.5.0-alpha.51, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
+"@storybook/builder-webpack4@6.5.0-alpha.55, @storybook/builder-webpack4@workspace:lib/builder-webpack4":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack4@workspace:lib/builder-webpack4"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/channel-postmessage": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/router": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/channel-postmessage": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/router": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
-    "@storybook/ui": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
+    "@storybook/ui": 6.5.0-alpha.55
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^4.2.0
@@ -7120,34 +7100,34 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@6.5.0-alpha.51, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@6.5.0-alpha.55, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/channel-postmessage": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/router": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/channel-postmessage": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/router": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^5.0.2
@@ -7176,21 +7156,21 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.4.1
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@6.5.0-alpha.51, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
@@ -7198,19 +7178,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-websocket@6.5.0-alpha.51, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
+"@storybook/channel-websocket@6.5.0-alpha.55, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket"
   dependencies:
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^5.3.3
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@6.5.0-alpha.51, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@6.5.0-alpha.55, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
@@ -7242,17 +7222,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@6.5.0-alpha.51, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/codemod": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/csf-tools": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/codemod": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/csf-tools": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
     "@types/cross-spawn": ^6.0.2
     "@types/prompts": ^2.0.9
@@ -7289,17 +7269,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@6.5.0-alpha.51, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/channel-postmessage": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/channel-postmessage": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7314,12 +7294,12 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@6.5.0-alpha.51, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@6.5.0-alpha.55, @storybook/client-logger@^6.4.0 || >=6.5.0-0, @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:
@@ -7348,15 +7328,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@6.5.0-alpha.51, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/client-logger@npm:6.5.0-alpha.51":
+  version: 6.5.0-alpha.51
+  resolution: "@storybook/client-logger@npm:6.5.0-alpha.51"
+  dependencies:
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: 11b30fde07fb2953573efc212633e870091c90b925af32ec4d0fe76551f13ab2808bed606daebecf3db242baa0a4dca5e18b66cf7efe854dcc3e79e57d69cc29
+  languageName: node
+  linkType: hard
+
+"@storybook/codemod@6.5.0-alpha.55, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
     "@babel/types": ^7.12.11
     "@mdx-js/mdx": ^1.6.22
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/csf-tools": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/csf-tools": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
     core-js: ^3.8.2
     cross-spawn: ^7.0.3
     globby: ^11.0.2
@@ -7370,14 +7360,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@6.5.0-alpha.51, @storybook/components@workspace:*, @storybook/components@workspace:lib/components":
+"@storybook/components@6.5.0-alpha.55, @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.5.0-alpha.51
+    "@storybook/client-logger": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@types/color-convert": ^2.0.0
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
@@ -7404,8 +7394,8 @@ __metadata:
     ts-node: ^10.4.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -7425,20 +7415,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-client@6.5.0-alpha.51, @storybook/core-client@workspace:lib/core-client":
+"@storybook/components@npm:6.5.0-alpha.51":
+  version: 6.5.0-alpha.51
+  resolution: "@storybook/components@npm:6.5.0-alpha.51"
+  dependencies:
+    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/csf": 0.0.2--canary.507502b.0
+    "@storybook/theming": 6.5.0-alpha.51
+    core-js: ^3.8.2
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: af9b1a00f49e9615ff66161b7f6076c253f998a951bf064a870360fd1187bbd96643331ddf43e608bb26db66ef6f964d7886d8bed6a664842909eb3748e46c26
+  languageName: node
+  linkType: hard
+
+"@storybook/core-client@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/channel-postmessage": 6.5.0-alpha.51
-    "@storybook/channel-websocket": 6.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/channel-postmessage": 6.5.0-alpha.55
+    "@storybook/channel-websocket": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
-    "@storybook/ui": 6.5.0-alpha.51
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
+    "@storybook/ui": 6.5.0-alpha.55
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -7450,8 +7456,8 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     typescript:
@@ -7459,7 +7465,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@6.5.0-alpha.51, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@6.5.0-alpha.55, @storybook/core-common@workspace:lib/core-common":
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
@@ -7485,7 +7491,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
     "@types/compression": ^1.7.0
@@ -7520,15 +7526,15 @@ __metadata:
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@6.5.0-alpha.51, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@6.5.0-alpha.55, @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:
@@ -7554,22 +7560,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@6.5.0-alpha.51, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@6.5.0-alpha.55, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
-    "@storybook/builder-webpack5": 6.5.0-alpha.51
-    "@storybook/core-client": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
+    "@storybook/builder-webpack5": 6.5.0-alpha.55
+    "@storybook/core-client": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/csf-tools": 6.5.0-alpha.51
-    "@storybook/manager-webpack4": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/csf-tools": 6.5.0-alpha.55
+    "@storybook/manager-webpack4": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     "@types/compression": ^1.7.0
     "@types/ip": ^1.1.0
     "@types/node": ^14.0.10 || ^16.0.0
@@ -7609,8 +7615,8 @@ __metadata:
     ws: ^8.2.3
     x-default-browser: ^0.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
       optional: true
@@ -7621,15 +7627,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core@6.5.0-alpha.51, @storybook/core@workspace:*, @storybook/core@workspace:lib/core":
+"@storybook/core@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/core-server": 6.5.0-alpha.51
+    "@storybook/core-client": 6.5.0-alpha.55
+    "@storybook/core-server": 6.5.0-alpha.55
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
@@ -7641,7 +7647,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@6.5.0-alpha.51, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@6.5.0-alpha.55, @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:
@@ -7720,13 +7726,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@6.5.0-alpha.51, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
+"@storybook/docs-tools@6.5.0-alpha.55, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/docs-tools@workspace:lib/docs-tools"
   dependencies:
     "@babel/core": ^7.12.10
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     core-js: ^3.8.2
     doctrine: ^3.0.0
     jest-specific-snapshot: ^4.0.0
@@ -7748,14 +7754,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ember@6.5.0-alpha.51, @storybook/ember@workspace:*, @storybook/ember@workspace:app/ember":
+"@storybook/ember@6.5.0-alpha.55, @storybook/ember@workspace:*, @storybook/ember@workspace:app/ember":
   version: 0.0.0-use.local
   resolution: "@storybook/ember@workspace:app/ember"
   dependencies:
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     core-js: ^3.8.2
     global: ^4.4.0
     react: 16.14.0
@@ -7788,10 +7794,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/example-react-ts-webpack4@workspace:examples/react-ts-webpack4"
   dependencies:
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-essentials": 6.5.0-alpha.51
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
-    "@storybook/react": 6.5.0-alpha.51
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-essentials": 6.5.0-alpha.55
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
+    "@storybook/react": 6.5.0-alpha.55
     "@types/react": ^16.14.23
     "@types/react-dom": ^16.9.14
     prop-types: 15.7.2
@@ -7809,14 +7815,15 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
-    "@storybook/addon-essentials": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/cli": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/react": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/addon-essentials": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/cli": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     "@testing-library/dom": ^7.31.2
+    "@testing-library/react": 12.1.2
     "@testing-library/user-event": ^13.1.9
     "@types/babel__preset-env": ^7
     "@types/react": ^16.14.23
@@ -7840,17 +7847,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/html@6.5.0-alpha.51, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
+"@storybook/html@6.5.0-alpha.55, @storybook/html@workspace:*, @storybook/html@workspace:app/html":
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:app/html"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -7871,13 +7878,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@6.5.0-alpha.51, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@6.5.0-alpha.55, @storybook/instrumenter@^6.4.0 || >=6.5.0-0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
   version: 0.0.0-use.local
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     core-js: ^3.8.2
     global: ^4.4.0
   languageName: unknown
@@ -7934,19 +7941,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@6.5.0-alpha.51, @storybook/manager-webpack4@workspace:lib/manager-webpack4":
+"@storybook/manager-webpack4@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/core-client": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
-    "@storybook/ui": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/core-client": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
+    "@storybook/ui": 6.5.0-alpha.55
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^4.2.0
@@ -7978,8 +7985,8 @@ __metadata:
     webpack-dev-middleware: ^3.7.3
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
@@ -7993,12 +8000,12 @@ __metadata:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/core-client": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
-    "@storybook/ui": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/core-client": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
+    "@storybook/ui": 6.5.0-alpha.55
     "@types/case-sensitive-paths-webpack-plugin": ^2.1.4
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/terser-webpack-plugin": ^5.0.2
@@ -8027,8 +8034,8 @@ __metadata:
     webpack-dev-middleware: ^4.1.0
     webpack-virtual-modules: ^0.4.1
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
@@ -8070,7 +8077,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@6.5.0-alpha.51, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@6.5.0-alpha.55, @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:
@@ -8096,7 +8103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@6.5.0-alpha.51, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@6.5.0-alpha.55, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
@@ -8107,16 +8114,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@6.5.0-alpha.51, @storybook/preact@workspace:*, @storybook/preact@workspace:app/preact":
+"@storybook/preact@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -8127,10 +8134,10 @@ __metadata:
     read-pkg-up: ^7.0.1
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
+    webpack: 4
   peerDependencies:
     "@babel/core": "*"
     preact: ^8.0.0||^10.0.0
-    webpack: "*"
   bin:
     build-storybook: ./bin/build.js
     start-storybook: ./bin/index.js
@@ -8169,16 +8176,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@6.5.0-alpha.51, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@6.5.0-alpha.55, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:lib/preview-web"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/channel-postmessage": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/channel-postmessage": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -8190,8 +8197,8 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -8213,23 +8220,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@6.5.0-alpha.51, @storybook/react@workspace:*, @storybook/react@workspace:app/react":
+"@storybook/react@6.5.0-alpha.55, @storybook/react@workspace:*, @storybook/react@workspace:app/react":
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:app/react"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/store": 6.5.0-alpha.55
     "@types/estree": ^0.0.51
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/util-deprecate": ^1.0.0
@@ -8255,8 +8262,8 @@ __metadata:
   peerDependencies:
     "@babel/core": ^7.11.5
     jest-specific-snapshot: ^4.0.0
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     require-from-string: ^2.0.2
   peerDependenciesMeta:
     "@babel/core":
@@ -8436,6 +8443,7 @@ __metadata:
     jest-enzyme: ^7.1.2
     jest-image-snapshot: ^4.3.0
     jest-jasmine2: ^26.6.3
+    jest-junit: ^13.0.0
     jest-os-detection: ^1.3.1
     jest-raw-loader: ^1.0.1
     jest-serializer-html: ^7.0.0
@@ -8527,11 +8535,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@6.5.0-alpha.51, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@6.5.0-alpha.55, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:lib/router"
   dependencies:
-    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/client-logger": 6.5.0-alpha.55
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -8545,8 +8553,8 @@ __metadata:
     ts-dedent: ^2.0.0
     ts-node: ^10.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -8598,19 +8606,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/server@6.5.0-alpha.51, @storybook/server@workspace:*, @storybook/server@workspace:app/server":
+"@storybook/server@6.5.0-alpha.55, @storybook/server@workspace:*, @storybook/server@workspace:app/server":
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:app/server"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -8631,12 +8639,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@6.5.0-alpha.51, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@6.5.0-alpha.55, @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.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
     core-js: ^3.8.2
     estraverse: ^5.2.0
@@ -8646,18 +8654,18 @@ __metadata:
     prettier: ">=2.2.1 <=2.3.0"
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/store@6.5.0-alpha.51, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
+"@storybook/store@6.5.0-alpha.55, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
   version: 0.0.0-use.local
   resolution: "@storybook/store@workspace:lib/store"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -8671,23 +8679,23 @@ __metadata:
     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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@6.5.0-alpha.51, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte":
+"@storybook/svelte@6.5.0-alpha.55, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:app/svelte"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/loader-utils": ^2.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -8726,14 +8734,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@6.5.0-alpha.51, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/testing-library@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@storybook/testing-library@npm:0.0.9"
+  dependencies:
+    "@storybook/client-logger": ^6.4.0 || >=6.5.0-0
+    "@storybook/instrumenter": ^6.4.0 || >=6.5.0-0
+    "@testing-library/dom": ^8.3.0
+    "@testing-library/user-event": ^13.2.1
+    ts-dedent: ^2.2.0
+  checksum: 4a750756a91fd06de58d0d4cf9d7e289ad3e757af6417c97f8d077007a2222a2c31c5f7444eb0d034b1cf11363a1e653718962788c23dca67f33d8691ee63a3b
+  languageName: node
+  linkType: hard
+
+"@storybook/theming@6.5.0-alpha.55, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
     "@emotion/core": ^10.3.1
     "@emotion/is-prop-valid": ^0.8.6
     "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/client-logger": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
@@ -8745,8 +8766,8 @@ __metadata:
     ts-dedent: ^2.0.0
     ts-node: ^10.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
@@ -8787,20 +8808,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ui@6.5.0-alpha.51, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
+"@storybook/theming@npm:6.5.0-alpha.51":
+  version: 6.5.0-alpha.51
+  resolution: "@storybook/theming@npm:6.5.0-alpha.51"
+  dependencies:
+    "@storybook/client-logger": 6.5.0-alpha.51
+    core-js: ^3.8.2
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 4d50a203c26a12a92b4ce89edfde7a59663c4231dd113687e787fc9e3b72861c215c1134ad844b944d47a5f8ee130425be0968649e21e261afe85277363008a4
+  languageName: node
+  linkType: hard
+
+"@storybook/ui@6.5.0-alpha.55, @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
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/api": 6.5.0-alpha.51
-    "@storybook/channels": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/router": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/api": 6.5.0-alpha.55
+    "@storybook/channels": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/router": 6.5.0-alpha.55
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@testing-library/react": ^11.2.2
     copy-to-clipboard: ^3.3.1
     core-js: ^3.8.2
@@ -8824,21 +8859,21 @@ __metadata:
     ts-node: ^10.4.0
     webpack: 4
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@6.5.0-alpha.51, @storybook/vue3@workspace:app/vue3":
+"@storybook/vue3@6.5.0-alpha.55, @storybook/vue3@workspace:app/vue3":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3@workspace:app/vue3"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     "@vue/compiler-sfc": 3.0.0
@@ -8867,17 +8902,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@6.5.0-alpha.51, @storybook/vue@workspace:*, @storybook/vue@workspace:app/vue":
+"@storybook/vue@6.5.0-alpha.55, @storybook/vue@workspace:*, @storybook/vue@workspace:app/vue":
   version: 0.0.0-use.local
   resolution: "@storybook/vue@workspace:app/vue"
   dependencies:
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -8915,15 +8950,15 @@ __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.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-common": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-common": 6.5.0-alpha.55
     "@storybook/csf": 0.0.2--canary.507502b.0
-    "@storybook/docs-tools": 6.5.0-alpha.51
-    "@storybook/preview-web": 6.5.0-alpha.51
-    "@storybook/store": 6.5.0-alpha.51
+    "@storybook/docs-tools": 6.5.0-alpha.55
+    "@storybook/preview-web": 6.5.0-alpha.55
+    "@storybook/store": 6.5.0-alpha.55
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
     babel-plugin-bundled-import-meta: ^0.3.1
@@ -9255,6 +9290,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^8.0.0":
+  version: 8.12.0
+  resolution: "@testing-library/dom@npm:8.12.0"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^4.2.0
+    aria-query: ^5.0.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.4.4
+    pretty-format: ^27.0.2
+  checksum: 54b0495cecf569ecbce9314e70e5593de3b360ed155718c064d72f1429101104312435e3e16558ca6943b7fe9b415e48588a50905637c8fb709a3fa5ec06cbe4
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^8.3.0":
   version: 8.11.3
   resolution: "@testing-library/dom@npm:8.11.3"
@@ -9288,6 +9339,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:12.1.2":
+  version: 12.1.2
+  resolution: "@testing-library/react@npm:12.1.2"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@testing-library/dom": ^8.0.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: c8579252f5f0a23df368253108bbe5b4f26abb9ed5f514746ba6b2ce1a6d09592900526ef6284466af959b50fbb7afa1f37eb2ff629fc91abe70dade3da6cc9a
+  languageName: node
+  linkType: hard
+
 "@testing-library/react@npm:^11.2.2":
   version: 11.2.7
   resolution: "@testing-library/react@npm:11.2.7"
@@ -10243,7 +10307,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^16.9.14":
+"@types/react-dom@npm:16.9.14, @types/react-dom@npm:^16.9.14":
   version: 16.9.14
   resolution: "@types/react-dom@npm:16.9.14"
   dependencies:
@@ -12785,21 +12849,21 @@ __metadata:
     "@angular/platform-browser-dynamic": ^11.2.14
     "@compodoc/compodoc": ^1.1.18
     "@ngrx/store": ^10.1.2
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-interactions": 6.5.0-alpha.51
-    "@storybook/addon-jest": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/angular": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-interactions": 6.5.0-alpha.55
+    "@storybook/addon-jest": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/angular": 6.5.0-alpha.55
     "@storybook/babel-plugin-require-context-hook": 1.0.1
     "@storybook/jest": ^0.0.5
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/source-loader": 6.5.0-alpha.55
     "@storybook/testing-library": ^0.0.7
     "@types/core-js": ^2.5.4
     "@types/jest": ^26.0.16
@@ -17855,20 +17919,20 @@ __metadata:
   resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
   dependencies:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-jest": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
-    "@storybook/client-logger": 6.5.0-alpha.51
+    "@storybook/addon-jest": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
+    "@storybook/client-logger": 6.5.0-alpha.55
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     global: ^4.4.0
     prop-types: ^15.7.2
     react: 16.14.0
@@ -17883,14 +17947,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-react15@workspace:examples/cra-react15"
   dependencies:
-    "@storybook/addon-actions": 6.5.0-alpha.51
+    "@storybook/addon-actions": 6.5.0-alpha.55
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.5.0-alpha.51
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/theming": 6.5.0-alpha.55
     babel-core: 6
     babel-loader: ^8.0.0
     babel-runtime: 6
@@ -17907,16 +17971,20 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-ts-essentials@workspace:examples/cra-ts-essentials"
   dependencies:
-    "@storybook/addon-essentials": 6.5.0-alpha.51
+    "@storybook/addon-essentials": 6.5.0-alpha.55
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.51
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.5.0-alpha.51
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/testing-library": ^0.0.9
+    "@storybook/theming": 6.5.0-alpha.51
     "@types/jest": ^26.0.16
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/react": ^16.14.23
-    "@types/react-dom": ^16.9.14
+    "@types/react-dom": 16.9.14
+    formik: 2.2.9
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
@@ -17930,15 +17998,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-ts-kitchen-sink@workspace:examples/cra-ts-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
     "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/builder-webpack4": 6.5.0-alpha.51
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/builder-webpack4": 6.5.0-alpha.55
     "@storybook/preset-create-react-app": ^3.1.6
-    "@storybook/react": 6.5.0-alpha.51
+    "@storybook/react": 6.5.0-alpha.55
     "@types/enzyme": ^3.10.8
     "@types/jest": 25.2.3
     "@types/node": ^14.14.20 || ^16.0.0
@@ -20342,18 +20410,18 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.10
     "@ember/optional-features": ^2.0.0
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/ember": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/ember": 6.5.0-alpha.55
     "@storybook/ember-cli-storybook": ^0.2.1
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/source-loader": 6.5.0-alpha.55
     babel-loader: ^8.0.0
     broccoli-asset-rev: ^3.0.0
     cross-env: ^7.0.3
@@ -23264,7 +23332,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"formik@npm:^2.2.9":
+"formik@npm:2.2.9, formik@npm:^2.2.9":
   version: 2.2.9
   resolution: "formik@npm:2.2.9"
   dependencies:
@@ -25035,23 +25103,23 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "html-kitchen-sink@workspace:examples/html-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-jest": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-jest": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
     "@storybook/addon-postcss": ^2.0.0
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/client-api": 6.5.0-alpha.51
-    "@storybook/core": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
-    "@storybook/html": 6.5.0-alpha.51
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/client-api": 6.5.0-alpha.55
+    "@storybook/core": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
+    "@storybook/html": 6.5.0-alpha.55
+    "@storybook/source-loader": 6.5.0-alpha.55
     autoprefixer: ^10.0.1
     eventemitter3: ^4.0.7
     format-json: ^1.0.3
@@ -27901,6 +27969,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-junit@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "jest-junit@npm:13.0.0"
+  dependencies:
+    mkdirp: ^1.0.4
+    strip-ansi: ^6.0.1
+    uuid: ^8.3.2
+    xml: ^1.0.1
+  checksum: 470028c9e7c0143ae28a30dd4760dc67f62682dd927344b33e02e57812524b3d3c4233703756f49f8fc67ef0c944084af69b3a6f396514f78196e43e23e37b09
+  languageName: node
+  linkType: hard
+
 "jest-leak-detector@npm:^24.9.0":
   version: 24.9.0
   resolution: "jest-leak-detector@npm:24.9.0"
@@ -33716,34 +33796,33 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "official-storybook@workspace:examples/official-storybook"
   dependencies:
-    "@packtracker/webpack-plugin": ^2.3.0
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-highlight": 6.5.0-alpha.51
-    "@storybook/addon-interactions": 6.5.0-alpha.51
-    "@storybook/addon-jest": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storyshots-puppeteer": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-toolbars": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/cli": 6.5.0-alpha.51
-    "@storybook/components": 6.5.0-alpha.51
-    "@storybook/core-events": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-highlight": 6.5.0-alpha.55
+    "@storybook/addon-interactions": 6.5.0-alpha.55
+    "@storybook/addon-jest": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storyshots-puppeteer": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-toolbars": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/cli": 6.5.0-alpha.55
+    "@storybook/components": 6.5.0-alpha.55
+    "@storybook/core-events": 6.5.0-alpha.55
     "@storybook/design-system": ^5.4.7
     "@storybook/jest": ^0.0.5
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/react": 6.5.0-alpha.51
-    "@storybook/router": 6.5.0-alpha.51
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/react": 6.5.0-alpha.55
+    "@storybook/router": 6.5.0-alpha.55
+    "@storybook/source-loader": 6.5.0-alpha.55
     "@storybook/testing-library": ^0.0.7
-    "@storybook/theming": 6.5.0-alpha.51
+    "@storybook/theming": 6.5.0-alpha.55
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
     chromatic: ^6.0.2
@@ -33768,16 +33847,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"omit-deep@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "omit-deep@npm:0.3.0"
-  dependencies:
-    is-plain-object: ^2.0.1
-    unset-value: ^0.1.1
-  checksum: 90babbcbbc94ebbb2e65b2a9b5e4720df6f71991cdf0176e65a07359bf732517bba62b53fd2b4cfb3e48536d0d6dc91b50356e731b9392a1dd26eeb78e317652
-  languageName: node
-  linkType: hard
-
 "on-finished@npm:~2.3.0":
   version: 2.3.0
   resolution: "on-finished@npm:2.3.0"
@@ -36520,16 +36589,16 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-runtime": ^7.12.10
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
-    "@storybook/preact": 6.5.0-alpha.51
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
+    "@storybook/preact": 6.5.0-alpha.55
+    "@storybook/source-loader": 6.5.0-alpha.55
     "@types/prop-types": ^15.7.3
     "@types/react": ^17
     "@types/react-dom": ^17
@@ -40529,7 +40598,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 6.5.0-alpha.51
+    "@storybook/cli": 6.5.0-alpha.55
   bin:
     sb: ./index.js
   languageName: unknown
@@ -40853,13 +40922,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "server-kitchen-sink@workspace:examples/server-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/node-logger": 6.5.0-alpha.51
-    "@storybook/server": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/node-logger": 6.5.0-alpha.55
+    "@storybook/server": 6.5.0-alpha.55
     concurrently: ^5.3.0
     cors: ^2.8.5
     express: ~4.17.1
@@ -41808,9 +41877,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "standalone-preview@workspace:examples/standalone-preview"
   dependencies:
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/cli": 6.5.0-alpha.51
-    "@storybook/react": 6.5.0-alpha.51
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/cli": 6.5.0-alpha.55
+    "@storybook/react": 6.5.0-alpha.55
     cross-env: ^7.0.3
     parcel: 2.0.1
     react: 16.14.0
@@ -41907,7 +41976,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 6.5.0-alpha.51
+    "@storybook/cli": 6.5.0-alpha.55
   bin:
     sb: ./index.js
     storybook: ./index.js
@@ -42620,20 +42689,20 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "svelte-example@workspace:examples/svelte-kitchen-sink"
   dependencies:
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-interactions": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-interactions": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
     "@storybook/jest": ^0.0.5
-    "@storybook/source-loader": 6.5.0-alpha.51
-    "@storybook/svelte": 6.5.0-alpha.51
+    "@storybook/source-loader": 6.5.0-alpha.55
+    "@storybook/svelte": 6.5.0-alpha.55
     "@storybook/testing-library": ^0.0.7
     global: ^4.4.0
     svelte-jester: 1.3.0
@@ -43389,13 +43458,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-json-http@npm:^7.1.2":
-  version: 7.3.1
-  resolution: "tiny-json-http@npm:7.3.1"
-  checksum: a8f53cfb1d3a21ef1bc86886a7a1abdae12d4ce089ab01d60db619dc192c17764445dfdba98db90d9f32126cc950b4a2fab0000c65b71cc2d09319fbd4acbe19
-  languageName: node
-  linkType: hard
-
 "tiny-lr@npm:^2.0.0":
   version: 2.0.0
   resolution: "tiny-lr@npm:2.0.0"
@@ -44893,16 +44955,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unset-value@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "unset-value@npm:0.1.2"
-  dependencies:
-    has-value: ^0.3.1
-    isobject: ^3.0.0
-  checksum: ab471119a16c5a9a86d228d715fa7b59c28008e5ed4891e7f8c50a5a30de2e0171019f4d19e161ca4695100b8642d1d704a4f98472ac94ffee6a3c9842c99caa
-  languageName: node
-  linkType: hard
-
 "unset-value@npm:^1.0.0":
   version: 1.0.0
   resolution: "unset-value@npm:1.0.0"
@@ -45556,14 +45608,14 @@ __metadata:
   resolution: "vue-3-cli-example@workspace:examples/vue-3-cli"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-essentials": 6.5.0-alpha.51
-    "@storybook/addon-interactions": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-essentials": 6.5.0-alpha.55
+    "@storybook/addon-interactions": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
     "@storybook/jest": ^0.0.5
     "@storybook/testing-library": ^0.0.7
-    "@storybook/vue3": 6.5.0-alpha.51
+    "@storybook/vue3": 6.5.0-alpha.55
     "@vue/cli-plugin-babel": ~4.5.0
     "@vue/cli-plugin-typescript": ~4.5.0
     "@vue/cli-service": ~4.5.0
@@ -45590,11 +45642,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "vue-cli-example@workspace:examples/vue-cli"
   dependencies:
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-essentials": 6.5.0-alpha.51
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-essentials": 6.5.0-alpha.55
     "@storybook/preset-scss": ^1.0.3
-    "@storybook/source-loader": 6.5.0-alpha.51
-    "@storybook/vue": 6.5.0-alpha.51
+    "@storybook/source-loader": 6.5.0-alpha.55
+    "@storybook/vue": 6.5.0-alpha.55
     "@vue/cli-plugin-babel": ~4.3.1
     "@vue/cli-plugin-typescript": ~4.3.1
     "@vue/cli-service": ~4.3.1
@@ -45646,21 +45698,21 @@ __metadata:
   resolution: "vue-example@workspace:examples/vue-kitchen-sink"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addon-a11y": 6.5.0-alpha.51
-    "@storybook/addon-actions": 6.5.0-alpha.51
-    "@storybook/addon-backgrounds": 6.5.0-alpha.51
-    "@storybook/addon-controls": 6.5.0-alpha.51
-    "@storybook/addon-docs": 6.5.0-alpha.51
-    "@storybook/addon-interactions": 6.5.0-alpha.51
-    "@storybook/addon-links": 6.5.0-alpha.51
-    "@storybook/addon-storyshots": 6.5.0-alpha.51
-    "@storybook/addon-storysource": 6.5.0-alpha.51
-    "@storybook/addon-viewport": 6.5.0-alpha.51
-    "@storybook/addons": 6.5.0-alpha.51
+    "@storybook/addon-a11y": 6.5.0-alpha.55
+    "@storybook/addon-actions": 6.5.0-alpha.55
+    "@storybook/addon-backgrounds": 6.5.0-alpha.55
+    "@storybook/addon-controls": 6.5.0-alpha.55
+    "@storybook/addon-docs": 6.5.0-alpha.55
+    "@storybook/addon-interactions": 6.5.0-alpha.55
+    "@storybook/addon-links": 6.5.0-alpha.55
+    "@storybook/addon-storyshots": 6.5.0-alpha.55
+    "@storybook/addon-storysource": 6.5.0-alpha.55
+    "@storybook/addon-viewport": 6.5.0-alpha.55
+    "@storybook/addons": 6.5.0-alpha.55
     "@storybook/jest": ^0.0.5
-    "@storybook/source-loader": 6.5.0-alpha.51
+    "@storybook/source-loader": 6.5.0-alpha.55
     "@storybook/testing-library": ^0.0.7
-    "@storybook/vue": 6.5.0-alpha.51
+    "@storybook/vue": 6.5.0-alpha.55
     "@vue/babel-preset-jsx": ^1.2.4
     babel-loader: ^8.0.0
     cross-env: ^7.0.3
@@ -46106,7 +46158,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-bundle-analyzer@npm:^3.4.1, webpack-bundle-analyzer@npm:^3.6.1, webpack-bundle-analyzer@npm:^3.8.0":
+"webpack-bundle-analyzer@npm:^3.6.1, webpack-bundle-analyzer@npm:^3.8.0":
   version: 3.9.0
   resolution: "webpack-bundle-analyzer@npm:3.9.0"
   dependencies:
@@ -47525,6 +47577,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xml@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "xml@npm:1.0.1"
+  checksum: 04bcc9b8b5e7b49392072fbd9c6b0f0958bd8e8f8606fee460318e43991349a68cbc5384038d179ff15aef7d222285f69ca0f067f53d071084eb14c7fdb30411
+  languageName: node
+  linkType: hard
+
 "xmlbuilder@npm:~11.0.0":
   version: 11.0.1
   resolution: "xmlbuilder@npm:11.0.1"