Merge branch 'next' into fix/storystorev6-vite

2025-04-09 00:19:13 +08:00 · 2022-12-05 10:37:06 +01:00 · 2022-12-05 10:37:06 +01:00 · 18d3b8dc59
commit 18d3b8dc59
parent db36af9306 7af491a5d8
241 changed files with 4633 additions and 2797 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -536,23 +536,23 @@ workflows:
          requires:
            - build
      - create-sandboxes:
-          parallelism: 9
+          parallelism: 8
          requires:
            - build
      - build-sandboxes:
-          parallelism: 9
+          parallelism: 8
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
-          parallelism: 9
+          parallelism: 8
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 8
          requires:
            - build-sandboxes
      - e2e-sandboxes:
-          parallelism: 9
+          parallelism: 8
          requires:
            - build-sandboxes
  merged:
@ -586,23 +586,23 @@ workflows:
          requires:
            - build
      - create-sandboxes:
-          parallelism: 15
+          parallelism: 14
          requires:
            - build
      - build-sandboxes:
-          parallelism: 15
+          parallelism: 14
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
-          parallelism: 15
+          parallelism: 14
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
-          parallelism: 15
+          parallelism: 14
          requires:
            - build-sandboxes
      - e2e-sandboxes:
-          parallelism: 15
+          parallelism: 14
          requires:
            - build-sandboxes
  daily:
@ -611,25 +611,25 @@ workflows:
    jobs:
      - build
      - create-sandboxes:
-          parallelism: 25
+          parallelism: 23
          requires:
            - build
      # - smoke-test-sandboxes: # disabled for now
      #     requires:
      #       - create-sandboxes
      - build-sandboxes:
-          parallelism: 25
+          parallelism: 23
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
-          parallelism: 25
+          parallelism: 23
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
-          parallelism: 25
+          parallelism: 23
          requires:
            - build-sandboxes
      - e2e-sandboxes:
-          parallelism: 25
+          parallelism: 23
          requires:
            - build-sandboxes
--- a/.gitignore
+++ b/.gitignore
@ -12,6 +12,7 @@ test-results
 /sandbox
 /bench
 .verdaccio-cache
+.next

 # Yarn stuff
 /**/.yarn/*
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -17,4 +17,5 @@
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
  },
+  "prettier.ignorePath": "./code/.prettierignore"
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,46 @@
+## 7.0.0-alpha.58 (December 5, 2022)
+
+#### Features
+
+-   Add `--tag` option to `upgrade` script [#20075](https://github.com/storybooks/storybook/pull/20075)
+-   HTML: Add `html-vite` framework [#19698](https://github.com/storybooks/storybook/pull/19698)
+-   SvelteKit: Create framework [#20039](https://github.com/storybooks/storybook/pull/20039)
+
+#### Maintenance
+
+-   Core: Remove postcss feature flag [#20003](https://github.com/storybooks/storybook/pull/20003)
+-   Telemetry: Add precedingUpgrade data to dev/build events [#20084](https://github.com/storybooks/storybook/pull/20084)
+-   Core: make managerEntries load as ESM, for improved tree-shaking [#20070](https://github.com/storybooks/storybook/pull/20070)
+
+## 7.0.0-alpha.57 (December 3, 2022)
+
+#### Bug Fixes
+
+-   Vite: Reinstate (deprecated) `StorybookViteConfig` [#20057](https://github.com/storybooks/storybook/pull/20057)
+-   Docs: using targeted styles, not components to style MDX [#19958](https://github.com/storybooks/storybook/pull/19958)
+-   Docs: Return to filtering toolbars in docs mode, but don't filter menu [#19959](https://github.com/storybooks/storybook/pull/19959)
+-   Angular: Don't set `argType.defaultValue` in angular/compodoc [#19935](https://github.com/storybooks/storybook/pull/19935)
+-   NextJS: Support next/image component in v12/13 properly [#20028](https://github.com/storybooks/storybook/pull/20028)
+-   Svelte: Use JSDocs in JS CLI templates and put manual enum arg type back as it is not inferred [#20042](https://github.com/storybooks/storybook/pull/20042)
+
+#### Maintenance
+
+-   CLI: Add a new `version-update` check telemetry event [#20074](https://github.com/storybooks/storybook/pull/20074)
+-   CLI: Add upgrade telemetry details [#20064](https://github.com/storybooks/storybook/pull/20064)
+-   Core: added .entries property to error thrown when duplicate stories are present [#20038](https://github.com/storybooks/storybook/pull/20038)
+
+#### Build
+
+-   Improve framework version specific story handling [#20027](https://github.com/storybooks/storybook/pull/20027)
+-   Fix repro templates script [#20063](https://github.com/storybooks/storybook/pull/20063)
+-   Build: replace image placeholder url in example stories for nextjs [#20069](https://github.com/storybooks/storybook/pull/20069)
+-   Build: improve inDevelopment mode for yarn task [#20067](https://github.com/storybooks/storybook/pull/20067)
+-   Build: revamp interactions e2e test [#20060](https://github.com/storybooks/storybook/pull/20060)
+
+#### Dependency Upgrades
+
+-   Build: Update jest pretty-format to 29 [#20047](https://github.com/storybooks/storybook/pull/20047)
+
 ## 7.0.0-alpha.56 (December 1, 2022)

 #### Bug Fixes
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
  - [Alpha release notes](#alpha-release-notes)
  - [7.0 breaking changes](#70-breaking-changes)
+    - [Postcss removed](#postcss-removed)
    - [Vue3 replaced app export with setup](#vue3-replaced-app-export-with-setup)
    - [removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
    - [register.js removed](#registerjs-removed)
@ -22,9 +23,10 @@
    - [7.0 feature flags removed](#70-feature-flags-removed)
    - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
    - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [SvelteKit needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
    - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
-    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
    - [Icons API changed](#icons-api-changed)
    - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
    - [Dropped support for Angular 12 and below](#dropped-support-for-angular-12-and-below)
@ -39,6 +41,8 @@
    - [Configuring the Docs Container](#configuring-the-docs-container)
    - [External Docs](#external-docs)
    - [MDX2 upgrade](#mdx2-upgrade)
+    - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
+    - [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
    - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
    - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
    - [Autoplay in docs](#autoplay-in-docs)
@ -260,6 +264,10 @@ In the meantime, these migration notes are the best available documentation on t

 ### 7.0 breaking changes

+#### Postcss removed
+
+Storybook 6.x installed postcss by default. In 7.0 built-in support has been removed. IF you need it, you can add it back using [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss).
+
 #### Vue3 replaced app export with setup

 In 6.x `@storybook/vue3` exported a Vue application instance called `app`. In 7.0, this has been replaced by a `setup` function that can be used to initialize the application in your `.storybook/preview.js`:
@ -475,6 +483,7 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
 - `@storybook/server-webpack5`
 - `@storybook/svelte-webpack5`
 - `@storybook/svelte-vite`
+- `@storybook/sveltekit`
 - `@storybook/vue-webpack5`
 - `@storybook/vue-vite`
 - `@storybook/vue3-webpack5`
@ -574,6 +583,17 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard

 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).

+#### SvelteKit needs the `@storybook/sveltekit` framework
+
+SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
+
+```js
+// .storybook/main.js
+export default {
+  framework: '@storybook/sveltekit',
+};
+```
+
 #### Removed docs.getContainer and getPage parameters

 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
@ -806,6 +826,47 @@ We will update this section with specific pointers based on user feedback during

 As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release.

+#### Default docs styles will leak into non-story user components
+
+Storybook's default styles in docs are now globally applied to any element instead of using classes. This means that any component that you add directly in a docs file will also get the default styles.
+
+To mitigate this you need to wrap any content you don't want styled with the `Unstyled` block like this:
+
+```mdx
+import { Unstyled } from '@storybook/blocks';
+import { MyComponent } from './MyComponent';
+
+# This is a header
+
+<Unstyled>
+  <MyComponent />
+</Unstyled>
+```
+
+Components that are part of your stories or in a canvas will not need this mitigation, as the `Story` and `Canvas` blocks already have this built-in.
+
+#### Explicit `<code>` elements are no longer syntax highlighted
+
+Due to how MDX2 works differently from MDX1, manually defined `<code>` elements are no longer transformed to the `Code` component, so it will not be syntax highlighted. This is not the case for markdown \`\`\` code-fences, that will still end up as `Code` with syntax highlighting.
+
+Luckily [MDX2 supports markdown (like code-fences) inside elements better now](https://mdxjs.com/blog/v2/#improvements-to-the-mdx-format), so most cases where you needed a `<code>` element before, you can use code-fences instead:
+
+<!-- prettier-ignore-start -->
+````md
+<code>This will now be an unstyled line of code</code>
+
+```js
+const a = 'This is still a styled code block.';
+```
+
+<div style={{ background: 'red', padding: '10px' }}>
+  ```js
+  const a = 'MDX2 supports markdown in elements better now, so this is possible.';
+  ```
+</div>
+````
+<!-- prettier-ignore-end -->
+
 #### Dropped source loader / storiesOf static snippets

 In SB 6.x, Storybook Docs used a webpack loader called `source-loader` to help display static code snippets. This was configurable using the `options.sourceLoaderOptions` field.
@ -3671,3 +3732,7 @@ If you **are** using these addons, it takes two steps to migrate:
  ```

  <!-- markdown-link-check-enable -->
+
+```
+
+```
--- a/code/.prettierignore
+++ b/code/.prettierignore
@ -0,0 +1 @@
+*.mdx
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -62,15 +62,15 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.56",
-    "@storybook/channels": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/addon-highlight": "7.0.0-alpha.58",
+    "@storybook/channels": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "axe-core": "^4.2.0",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -102,7 +102,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -76,13 +76,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "dequal": "^2.0.2",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -120,7 +120,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -75,13 +75,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "ts-dedent": "^2.0.0"
@ -111,7 +111,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -67,15 +67,15 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/blocks": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/blocks": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
@ -101,7 +101,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -26,6 +26,7 @@
  "license": "MIT",
  "exports": {
    ".": {
+      "node": "./dist/index.js",
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
@ -87,16 +88,16 @@
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@jest/transform": "^29.3.1",
    "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/csf-plugin": "7.0.0-alpha.56",
-    "@storybook/csf-tools": "7.0.0-alpha.56",
+    "@storybook/blocks": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/csf-plugin": "7.0.0-alpha.58",
+    "@storybook/csf-tools": "7.0.0-alpha.58",
    "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/postinstall": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/postinstall": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "fs-extra": "^9.0.1",
    "global": "^4.4.0",
    "remark-external-links": "^8.0.0",
@ -129,7 +130,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/code/addons/docs/preview.js
+++ b/code/addons/docs/preview.js
@ -1 +1,2 @@
+// eslint-disable-next-line import/export
 export * from './dist/preview';
--- a/code/addons/docs/src/DocsRenderer.tsx
+++ b/code/addons/docs/src/DocsRenderer.tsx
@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types';
-import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
-import { MDXProvider } from '@mdx-js/react';

 // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
 export const defaultComponents: Record<string, any> = {
-  ...htmlComponents,
  code: CodeOrSourceMdx,
  a: AnchorMdx,
  ...HeadersMdx,
@ -33,13 +30,15 @@ export class DocsRenderer<TRenderer extends Renderer> {
        ...docsParameter?.components,
      };

-      ReactDOM.render(
-        <MDXProvider components={components}>
-          <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
-        </MDXProvider>,
-        element,
-        callback
-      );
+      import('@mdx-js/react').then(({ MDXProvider }) => {
+        ReactDOM.render(
+          <MDXProvider components={components}>
+            <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
+          </MDXProvider>,
+          element,
+          callback
+        );
+      });
    };

    this.unmount = (element: HTMLElement) => {
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -111,24 +111,24 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.56",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.56",
-    "@storybook/addon-controls": "7.0.0-alpha.56",
-    "@storybook/addon-docs": "7.0.0-alpha.56",
-    "@storybook/addon-highlight": "7.0.0-alpha.56",
-    "@storybook/addon-measure": "7.0.0-alpha.56",
-    "@storybook/addon-outline": "7.0.0-alpha.56",
-    "@storybook/addon-toolbars": "7.0.0-alpha.56",
-    "@storybook/addon-viewport": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
+    "@storybook/addon-actions": "7.0.0-alpha.58",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.58",
+    "@storybook/addon-controls": "7.0.0-alpha.58",
+    "@storybook/addon-docs": "7.0.0-alpha.58",
+    "@storybook/addon-highlight": "7.0.0-alpha.58",
+    "@storybook/addon-measure": "7.0.0-alpha.58",
+    "@storybook/addon-outline": "7.0.0-alpha.58",
+    "@storybook/addon-toolbars": "7.0.0-alpha.58",
+    "@storybook/addon-viewport": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
-    "@storybook/vue": "7.0.0-alpha.56",
+    "@storybook/vue": "7.0.0-alpha.58",
    "typescript": "^4.9.3"
  },
  "peerDependencies": {
@ -157,5 +157,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/addons/essentials/src/docs/preview.ts
+++ b/code/addons/essentials/src/docs/preview.ts
@ -1 +1,2 @@
+// eslint-disable-next-line import/export
 export * from '@storybook/addon-docs/dist/preview';
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
@ -60,8 +60,8 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
    "global": "^4.4.0"
  },
  "devDependencies": {
@ -77,7 +77,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Highlight",
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -72,15 +72,15 @@
  },
  "dependencies": {
    "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/instrumenter": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/instrumenter": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "jest-mock": "^27.0.6",
    "polished": "^4.2.2",
@ -117,7 +117,7 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Interactions",
    "unsupportedFrameworks": [
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -69,12 +69,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
    "upath": "^1.2.0"
@ -104,7 +104,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -76,13 +76,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
    "@storybook/csf": "next",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/router": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/router": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "prop-types": "^15.7.2",
    "ts-dedent": "^2.0.0"
@ -113,7 +113,7 @@
      "./src/react/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -74,12 +74,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0"
  },
  "devDependencies": {
@ -107,7 +107,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Measure",
    "unsupportedFrameworks": [
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -77,12 +77,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "ts-dedent": "^2.0.0"
  },
@ -111,7 +111,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Outline",
    "unsupportedFrameworks": [
--- a/code/addons/storyshots/storyshots-core/package.json
+++ b/code/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -39,11 +39,11 @@
  "dependencies": {
    "@jest/transform": "^29.3.1",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-webpack": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/client-api": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-webpack": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@types/glob": "^7.1.3",
    "@types/jest-specific-snapshot": "^0.5.6",
    "core-js": "^3.8.2",
@ -51,7 +51,7 @@
    "global": "^4.4.0",
    "jest-specific-snapshot": "^7.0.0",
    "preact-render-to-string": "^5.1.19",
-    "pretty-format": "^28.0.0",
+    "pretty-format": "^29.0.0",
    "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "read-pkg-up": "^7.0.1",
    "ts-dedent": "^2.0.0"
@ -60,11 +60,11 @@
    "@angular/core": "^13.3.6",
    "@angular/platform-browser-dynamic": "^13.3.6",
    "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.0-alpha.56",
-    "@storybook/angular": "7.0.0-alpha.56",
-    "@storybook/react": "7.0.0-alpha.56",
-    "@storybook/vue": "7.0.0-alpha.56",
-    "@storybook/vue3": "7.0.0-alpha.56",
+    "@storybook/addon-docs": "7.0.0-alpha.58",
+    "@storybook/angular": "7.0.0-alpha.58",
+    "@storybook/react": "7.0.0-alpha.58",
+    "@storybook/vue": "7.0.0-alpha.58",
+    "@storybook/vue3": "7.0.0-alpha.58",
    "babel-loader": "^8.3.0",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
@ -142,7 +142,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -35,8 +35,8 @@
  "dependencies": {
    "@axe-core/puppeteer": "^4.2.0",
    "@storybook/csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@types/jest-image-snapshot": "^5.1.0",
    "jest-image-snapshot": "^6.0.0"
  },
@ -45,7 +45,7 @@
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.56",
+    "@storybook/addon-storyshots": "7.0.0-alpha.58",
    "puppeteer": ">=2.0.0"
  },
  "peerDependenciesMeta": {
@ -56,5 +56,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -53,13 +53,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/router": "7.0.0-alpha.56",
-    "@storybook/source-loader": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/router": "7.0.0-alpha.58",
+    "@storybook/source-loader": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
    "estraverse": "^5.2.0",
    "prop-types": "^15.7.2",
    "react-syntax-highlighter": "^15.5.0"
@ -91,7 +91,7 @@
      "./src/preset.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -67,11 +67,11 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56"
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58"
  },
  "devDependencies": {
    "typescript": "^4.9.3"
@ -98,7 +98,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -72,12 +72,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "prop-types": "^15.7.2"
@ -108,7 +108,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2",
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/code/e2e-tests/addon-interactions.spec.ts
+++ b/code/e2e-tests/addon-interactions.spec.ts
@ -95,14 +95,18 @@ test.describe('addon-interactions', () => {
    const rerunInteractionButton = await panel.locator('[aria-label="Rerun"]');
    await rerunInteractionButton.click();
    await interactionsRow.first().isVisible();
-    await expect(await interactionsRow.count()).toEqual(3);
+    await interactionsRow.nth(1).isVisible();
+    await interactionsRow.nth(2).isVisible();
    await expect(interactionsTab).toContainText(/(3)/);
+    await expect(interactionsTab).toBeVisible();

    // Test remount state (from toolbar) - Interactions have rerun, count is correct and values are as expected
    const remountComponentButton = await page.locator('[title="Remount component"]');
    await remountComponentButton.click();
    await interactionsRow.first().isVisible();
-    await expect(await interactionsRow.count()).toEqual(3);
+    await interactionsRow.nth(1).isVisible();
+    await interactionsRow.nth(2).isVisible();
    await expect(interactionsTab).toContainText(/(3)/);
+    await expect(interactionsTab).toBeVisible();
  });
 });
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
  "keywords": [
    "storybook",
@ -34,18 +34,18 @@
    "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/core-client": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/core-server": "7.0.0-alpha.56",
-    "@storybook/core-webpack": "7.0.0-alpha.56",
-    "@storybook/docs-tools": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/core-client": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/core-webpack": "7.0.0-alpha.58",
+    "@storybook/docs-tools": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "@types/react": "^16.14.34",
    "@types/react-dom": "^16.9.14",
@ -122,5 +122,5 @@
    "access": "public"
  },
  "builders": "dist/builders/builders.json",
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/angular/src/client/docs/compodoc.ts
+++ b/code/frameworks/angular/src/client/docs/compodoc.ts
@ -251,7 +251,6 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
      const argType = {
        name: item.name,
        description: item.rawdescription || item.description,
-        defaultValue,
        type,
        ...action,
        table: {
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
  "bugs": {
@ -31,11 +31,11 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/docs-tools": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/docs-tools": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "react": "16.14.0",
    "react-dom": "16.14.0",
@ -59,5 +59,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/html-vite/README.md
+++ b/code/frameworks/html-vite/README.md
@ -0,0 +1 @@
+# Storybook for HTML
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@ -0,0 +1,85 @@
+{
+  "name": "@storybook/html-vite",
+  "version": "7.0.0-alpha.58",
+  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/html-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.58",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/channel-postmessage": "7.0.0-alpha.58",
+    "@storybook/channel-websocket": "7.0.0-alpha.58",
+    "@storybook/client-api": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/html": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview-web": "7.0.0-alpha.58",
+    "magic-string": "^0.26.1",
+    "vite": "3"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.6.3",
+    "vite": "^3.1.0"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
+}
--- a/code/frameworks/html-vite/preset.js
+++ b/code/frameworks/html-vite/preset.js
@ -0,0 +1 @@
+module.exports = require('./dist/preset');
--- a/code/frameworks/html-vite/src/index.ts
+++ b/code/frameworks/html-vite/src/index.ts
@ -0,0 +1 @@
+export type { StorybookConfig } from '@storybook/builder-vite';
--- a/code/frameworks/html-vite/src/preset.ts
+++ b/code/frameworks/html-vite/src/preset.ts
@ -0,0 +1,6 @@
+import type { StorybookConfig } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/html',
+};
--- a/code/frameworks/html-vite/tsconfig.json
+++ b/code/frameworks/html-vite/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+}
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/html": "7.0.0-alpha.56",
-    "@storybook/preset-html-webpack": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/html": "7.0.0-alpha.58",
+    "@storybook/preset-html-webpack": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "global": "^4.4.0",
    "react": "16.14.0",
@ -78,5 +78,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/nextjs",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Next.js",
  "keywords": [
    "storybook",
@ -59,12 +59,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/react": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/react": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "find-up": "^5.0.0",
    "fs-extra": "^9.0.1",
@ -80,8 +80,8 @@
    "tsconfig-paths-webpack-plugin": "^3.5.2"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.56",
-    "next": "^12.2.4",
+    "@storybook/addon-actions": "7.0.0-alpha.58",
+    "next": "^13.0.5",
    "typescript": "^4.9.3",
    "webpack": "^5.65.0"
  },
@ -119,5 +119,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/nextjs/src/images/next-image-stub.tsx
+++ b/code/frameworks/nextjs/src/images/next-image-stub.tsx
@ -1,32 +1,67 @@
 /* eslint-disable no-underscore-dangle, @typescript-eslint/no-non-null-assertion */
 import * as React from 'react';
 import type * as _NextImage from 'next/image';
+import type * as _NextLegacyImage from 'next/legacy/image';
 import semver from 'semver';

-// next v9 (doesn't have next/image)
-if (semver.gt(process.env.__NEXT_VERSION!, '9.0.0')) {
-  const NextImage = require('next/image') as typeof _NextImage;
-
-  const OriginalNextImage = NextImage.default;
-
-  Object.defineProperty(NextImage, 'default', {
-    configurable: true,
-    value: (props: _NextImage.ImageProps) =>
-      typeof props.src === 'string' ? (
-        <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
-      ) : (
-        <OriginalNextImage {...props} unoptimized />
-      ),
-  });
-
-  // https://github.com/vercel/next.js/issues/36417#issuecomment-1117360509
-  if (
-    semver.gte(process.env.__NEXT_VERSION!, '12.1.5') &&
-    semver.lt(process.env.__NEXT_VERSION!, '12.2.0')
-  ) {
-    Object.defineProperty(NextImage, '__esModule', {
-      configurable: true,
-      value: true,
-    });
+const defaultLoader = ({ src, width, quality }: _NextImage.ImageLoaderProps) => {
+  const missingValues = [];
+  if (!src) {
+    missingValues.push('src');
  }
+
+  if (!width) {
+    missingValues.push('width');
+  }
+
+  if (missingValues.length > 0) {
+    throw new Error(
+      `Next Image Optimization requires ${missingValues.join(
+        ', '
+      )} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify(
+        {
+          src,
+          width,
+          quality,
+        }
+      )}`
+    );
+  }
+
+  return `${src}?w=${width}&q=${quality ?? 75}`;
+};
+
+const NextImage = require('next/image') as typeof _NextImage;
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props: _NextImage.ImageProps) => {
+    return <OriginalNextImage {...props} loader={props.loader ?? defaultLoader} />;
+  },
+});
+
+if (semver.satisfies(process.env.__NEXT_VERSION!, '^13.0.0')) {
+  const LegacyNextImage = require('next/legacy/image') as typeof _NextLegacyImage;
+  const OriginalNextLegacyImage = LegacyNextImage.default;
+
+  Object.defineProperty(OriginalNextLegacyImage, 'default', {
+    configurable: true,
+    value: (props: _NextLegacyImage.ImageProps) => (
+      <OriginalNextLegacyImage {...props} loader={props.loader ?? defaultLoader} />
+    ),
+  });
+}
+
+if (semver.satisfies(process.env.__NEXT_VERSION!, '^12.0.0')) {
+  const NextFutureImage = require('next/future/image') as typeof _NextImage;
+  const OriginalNextFutureImage = NextFutureImage.default;
+
+  Object.defineProperty(OriginalNextFutureImage, 'default', {
+    configurable: true,
+    value: (props: _NextImage.ImageProps) => (
+      <OriginalNextFutureImage {...props} loader={props.loader ?? defaultLoader} />
+    ),
+  });
 }
--- a/code/frameworks/nextjs/src/nextImport/webpack.ts
+++ b/code/frameworks/nextjs/src/nextImport/webpack.ts
@ -0,0 +1,29 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import semver from 'semver';
+import { IgnorePlugin } from 'webpack';
+import { getNextjsVersion } from '../utils';
+
+export function configureNextImport(baseConfig: WebpackConfig) {
+  const nextJSVersion = getNextjsVersion();
+
+  const isNext12 = semver.satisfies(nextJSVersion, '~12');
+  const isNext13 = semver.satisfies(nextJSVersion, '~13');
+
+  baseConfig.plugins = baseConfig.plugins ?? [];
+
+  if (!isNext13) {
+    baseConfig.plugins.push(
+      new IgnorePlugin({
+        resourceRegExp: /next\/legacy\/image$/,
+      })
+    );
+  }
+
+  if (!isNext12) {
+    baseConfig.plugins.push(
+      new IgnorePlugin({
+        resourceRegExp: /next\/future\/image$/,
+      })
+    );
+  }
+}
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@ -12,6 +12,7 @@ import { configureStyledJsx } from './styledJsx/webpack';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
 import type { FrameworkOptions, StorybookConfig } from './types';
+import { configureNextImport } from './nextImport/webpack';

 export const addons: PresetProperty<'addons', StorybookConfig> = [
  dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@ -122,6 +123,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
    configDir: options.configDir,
  });

+  configureNextImport(baseConfig);
  configureRuntimeNextjsVersionResolution(baseConfig);
  configureImports(baseConfig);
  configureCss(baseConfig, nextConfig);
--- a/code/frameworks/nextjs/template/stories/Image.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/Image.stories.jsx
@ -3,10 +3,48 @@ import Image from 'next/image';
 // eslint-disable-next-line import/extensions
 import StackAlt from '../../assets/colors.svg';

-const Component = () => <Image src={StackAlt} placeholder="blur" />;
-
 export default {
-  component: Component,
+  component: Image,
+  args: {
+    src: StackAlt,
+    alt: 'Stack Alt',
+  },
 };

 export const Default = {};
+
+export const BlurredPlaceholder = {
+  args: {
+    placeholder: 'blur',
+  },
+};
+
+export const BlurredAbsolutePlaceholder = {
+  args: {
+    src: 'https://storybook.js.org/images/placeholders/50x50.png',
+    width: 50,
+    height: 50,
+    blurDataURL:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
+    placeholder: 'blur',
+  },
+};
+
+export const FilledParent = {
+  args: {
+    fill: true,
+  },
+  decorator: [
+    (Story) => <div style={{ width: 500, height: 500, position: 'relative' }}>{Story()}</div>,
+  ],
+};
+
+export const Sized = {
+  args: {
+    fill: true,
+    sizes: '(max-width: 600px) 100vw, 600px',
+    decorator: [
+      (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
+    ],
+  },
+};
--- a/code/frameworks/nextjs/template/stories_12-js/ImageFuture.stories.jsx
+++ b/code/frameworks/nextjs/template/stories_12-js/ImageFuture.stories.jsx
@ -0,0 +1,50 @@
+import React from 'react';
+import Image from 'next/future/image';
+// eslint-disable-next-line import/extensions
+import StackAlt from '../../assets/colors.svg';
+
+export default {
+  component: Image,
+  args: {
+    src: StackAlt,
+    alt: 'Stack Alt',
+  },
+};
+
+export const Default = {};
+
+export const BlurredPlaceholder = {
+  args: {
+    placeholder: 'blur',
+  },
+};
+
+export const BlurredAbsolutePlaceholder = {
+  args: {
+    src: 'https://storybook.js.org/images/placeholders/50x50.png',
+    width: 50,
+    height: 50,
+    blurDataURL:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
+    placeholder: 'blur',
+  },
+};
+
+export const FilledParent = {
+  args: {
+    fill: true,
+  },
+  decorator: [
+    (Story) => <div style={{ width: 500, height: 500, position: 'relative' }}>{Story()}</div>,
+  ],
+};
+
+export const Sized = {
+  args: {
+    fill: true,
+    sizes: '(max-width: 600px) 100vw, 600px',
+    decorator: [
+      (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
+    ],
+  },
+};
--- a/code/frameworks/nextjs/template/stories_default-js/ImageLegacy.stories.jsx
+++ b/code/frameworks/nextjs/template/stories_default-js/ImageLegacy.stories.jsx
@ -0,0 +1,31 @@
+import React from 'react';
+import Image from 'next/legacy/image';
+// eslint-disable-next-line import/extensions
+import StackAlt from '../../assets/colors.svg';
+
+export default {
+  component: Image,
+  args: {
+    src: StackAlt,
+    alt: 'Stack Alt',
+  },
+};
+
+export const Default = {};
+
+export const BlurredPlaceholder = {
+  args: {
+    placeholder: 'blur',
+  },
+};
+
+export const BlurredAbsolutePlaceholder = {
+  args: {
+    src: 'https://storybook.js.org/images/placeholders/50x50.png',
+    width: 50,
+    height: 50,
+    blurDataURL:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
+    placeholder: 'blur',
+  },
+};
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preact": "7.0.0-alpha.56",
-    "@storybook/preset-preact-webpack": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preact": "7.0.0-alpha.58",
+    "@storybook/preset-preact-webpack": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
@ -79,5 +79,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -53,8 +53,8 @@
  "dependencies": {
    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
    "@rollup/pluginutils": "^4.2.0",
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/react": "7.0.0-alpha.56",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/react": "7.0.0-alpha.58",
    "@vitejs/plugin-react": "^2.0.0",
    "ast-types": "^0.14.2",
    "magic-string": "^0.26.1",
@ -83,5 +83,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,9 +51,9 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.56",
-    "@storybook/react": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.58",
+    "@storybook/react": "7.0.0-alpha.58",
    "@types/node": "^16.0.0"
  },
  "devDependencies": {
@ -86,5 +86,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preset-server-webpack": "7.0.0-alpha.56",
-    "@storybook/server": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preset-server-webpack": "7.0.0-alpha.58",
+    "@storybook/server": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
@ -74,5 +74,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -52,9 +52,9 @@
  },
  "dependencies": {
    "@storybook/addon-svelte-csf": "^2.0.0",
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/svelte": "7.0.0-alpha.56",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/svelte": "7.0.0-alpha.58",
    "@sveltejs/vite-plugin-svelte": "^1.0.0",
    "magic-string": "^0.26.1",
    "svelte": "^3.0.0",
@ -87,5 +87,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@ -1,5 +1,5 @@
-import { type StorybookConfig, withoutVitePlugins } from '@storybook/builder-vite';
-import { hasPlugin } from './utils';
+import { type StorybookConfig } from '@storybook/builder-vite';
+import { handleSvelteKit, hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';

 export const core: StorybookConfig['core'] = {
@ -7,7 +7,7 @@ export const core: StorybookConfig['core'] = {
  renderer: '@storybook/svelte',
 };

-export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
  let { plugins = [] } = config;
  const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
  const svelteOptions: Record<string, any> = await options.presets.apply(
@ -25,9 +25,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
  // Add docgen plugin
  plugins.push(svelteDocgen(svelteConfig));

-  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
-  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
-  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+  // temporarily support SvelteKit
+  plugins = await handleSvelteKit(plugins, options);

  // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
  // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
--- a/code/frameworks/svelte-vite/src/utils.ts
+++ b/code/frameworks/svelte-vite/src/utils.ts
@ -1,4 +1,7 @@
 import type { PluginOption } from 'vite';
+import { deprecate } from '@storybook/node-logger';
+import { withoutVitePlugins } from '@storybook/builder-vite';
+import type { Options } from '@storybook/types';

 function checkName(plugin: PluginOption, name: string) {
  return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
@ -14,3 +17,38 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
    })
  );
 }
+
+/**
+ * A migration step that ensures the svelte-vite framework still supports SvelteKit,
+ * but warns the user that they should use the sveltekit framework instead.
+ * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
+ */
+export async function handleSvelteKit(
+  plugins: PluginOption[],
+  options: Options
+): Promise<PluginOption[]> {
+  if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
+    // this is not a SvelteKit project ✅
+    return plugins;
+  }
+
+  /*
+  the sveltekit framework uses this svelte-vite framework under the hood
+  so we have to take extra care of only warning when the user is actually using
+  svelte-vite directly and not just through sveltekit
+  */
+
+  const frameworkPreset = await options.presets.apply('framework', {}, options);
+  const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;
+
+  if (framework === '@storybook/sveltekit') {
+    // this uses @storybook/sveltekit, so everything is fine ✅
+    return plugins;
+  }
+
+  // this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌
+  deprecate(
+    'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.'
+  );
+  return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+}
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,10 +51,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preset-svelte-webpack": "7.0.0-alpha.56",
-    "@storybook/svelte": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preset-svelte-webpack": "7.0.0-alpha.58",
+    "@storybook/svelte": "7.0.0-alpha.58",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
@ -81,5 +81,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/sveltekit/README.md
+++ b/code/frameworks/sveltekit/README.md
@ -0,0 +1 @@
+# Storybook for SvelteKit
--- a/code/frameworks/sveltekit/jest.config.js
+++ b/code/frameworks/sveltekit/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@ -0,0 +1,84 @@
+{
+  "name": "@storybook/sveltekit",
+  "version": "7.0.0-alpha.58",
+  "description": "Storybook for SvelteKit",
+  "keywords": [
+    "storybook",
+    "svelte",
+    "sveltekit",
+    "svelte-kit"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/sveltekit"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/svelte-vite": "7.0.0-alpha.58"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^3.1.3"
+  },
+  "peerDependencies": {
+    "@storybook/addon-svelte-csf": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/addon-svelte-csf": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
+}
--- a/code/frameworks/sveltekit/preset.js
+++ b/code/frameworks/sveltekit/preset.js
@ -0,0 +1 @@
+module.exports = require('./dist/preset');
--- a/code/frameworks/sveltekit/src/index.ts
+++ b/code/frameworks/sveltekit/src/index.ts
@ -0,0 +1 @@
+export * from '@storybook/svelte-vite';
--- a/code/frameworks/sveltekit/src/preset.ts
+++ b/code/frameworks/sveltekit/src/preset.ts
@ -0,0 +1,21 @@
+import { type StorybookConfig } from '@storybook/svelte-vite';
+// @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts
+import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset';
+import { withoutVitePlugins } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/svelte',
+};
+
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
+  const baseConfig = await svelteViteFinal(config, options);
+
+  let { plugins = [] } = baseConfig;
+
+  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
+  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
+  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+
+  return { ...baseConfig, plugins };
+};
--- a/code/frameworks/sveltekit/template/cli/Button.stories.js
+++ b/code/frameworks/sveltekit/template/cli/Button.stories.js
@ -0,0 +1,39 @@
+import Button from './Button.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
--- a/code/frameworks/sveltekit/template/cli/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/Button.svelte
@ -0,0 +1,34 @@
+<script>
+  import './button.css';
+
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor = undefined;
+  /**
+   * How large should the button be?
+   */
+  export let size = 'medium';
+  /**
+   * Button contents
+   */
+  export let label;
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click
+>
+  {label}
+</button>
--- a/code/frameworks/sveltekit/tsconfig.json
+++ b/code/frameworks/sveltekit/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"]
+}
--- a/code/frameworks/vue-vite/package.json
+++ b/code/frameworks/vue-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-server": "7.0.0-alpha.56",
-    "@storybook/vue": "7.0.0-alpha.56",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/vue": "7.0.0-alpha.58",
    "magic-string": "^0.26.1",
    "vite": "^3.1.3",
    "vue-docgen-api": "^4.40.0"
@ -78,5 +78,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preset-vue-webpack": "7.0.0-alpha.56",
-    "@storybook/vue": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preset-vue-webpack": "7.0.0-alpha.58",
+    "@storybook/vue": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
@ -85,5 +85,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,9 +51,9 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/core-server": "7.0.0-alpha.56",
-    "@storybook/vue3": "7.0.0-alpha.56",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/vue3": "7.0.0-alpha.58",
    "@vitejs/plugin-vue": "^3.0.0",
    "magic-string": "^0.26.1",
    "vite": "^3.1.3",
@ -77,5 +77,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,10 +50,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preset-vue3-webpack": "7.0.0-alpha.56",
-    "@storybook/vue3": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preset-vue3-webpack": "7.0.0-alpha.58",
+    "@storybook/vue3": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
@ -82,5 +82,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,10 +51,10 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/core-server": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/web-components": "7.0.0-alpha.56",
+    "@storybook/builder-vite": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/web-components": "7.0.0-alpha.58",
    "magic-string": "^0.26.1",
    "vite": "3"
  },
@ -76,5 +76,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit-html",
@ -53,10 +53,10 @@
  },
  "dependencies": {
    "@babel/preset-env": "^7.20.2",
-    "@storybook/builder-webpack5": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/preset-web-components-webpack": "7.0.0-alpha.56",
-    "@storybook/web-components": "7.0.0-alpha.56",
+    "@storybook/builder-webpack5": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/preset-web-components-webpack": "7.0.0-alpha.58",
+    "@storybook/web-components": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
@ -81,5 +81,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lerna.json
+++ b/code/lerna.json
@ -2,5 +2,5 @@
  "npmClient": "yarn",
  "useWorkspaces": true,
  "registry": "https://registry.npmjs.org",
-  "version": "7.0.0-alpha.56"
+  "version": "7.0.0-alpha.58"
 }
--- a/code/lib/addons/package.json
+++ b/code/lib/addons/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addons",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook addons store",
  "keywords": [
    "storybook"
@ -42,9 +42,9 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56"
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -58,5 +58,5 @@
      "./src/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/builder-manager/package.json
+++ b/code/lib/builder-manager/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-manager",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook manager builder",
  "keywords": [
    "storybook"
@ -42,9 +42,9 @@
  },
  "dependencies": {
    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/manager": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/manager": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
    "@types/ejs": "^3.1.1",
    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
    "browser-assert": "^1.2.1",
@ -69,5 +69,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/builder-manager/src/index.ts
+++ b/code/lib/builder-manager/src/index.ts
@ -56,7 +56,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
    target: ['chrome100'],
    platform: 'browser',
    bundle: true,
-    minify: false,
+    minify: true,
    sourcemap: true,
    conditions: ['browser', 'module', 'default'],

--- a/code/lib/builder-vite/package.json
+++ b/code/lib/builder-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-vite",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "A plugin to run and build Storybooks with Vite",
  "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
  "bugs": {
@ -42,14 +42,14 @@
  },
  "dependencies": {
    "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
    "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preview": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/source-loader": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/source-loader": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@vitejs/plugin-react": "^2.0.0",
    "browser-assert": "^1.2.1",
    "es-module-lexer": "^0.9.3",
@ -89,5 +89,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/builder-vite/src/index.ts
+++ b/code/lib/builder-vite/src/index.ts
@ -32,6 +32,15 @@ export type StorybookConfig = StorybookBaseConfig & {
  viteFinal?: ViteFinal;
 };

+/**
+ * @deprecated
+ *
+ * Use `import { StorybookConfig } from '@storybook/builder-vite';`
+ *
+ * Or better yet, import from your framework.
+ */
+export type StorybookViteConfig = StorybookConfig;
+
 function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
  return async (req, res, next) => {
    if (!req.url.match(/^\/iframe\.html($|\?)/)) {
--- a/code/lib/builder-webpack5/package.json
+++ b/code/lib/builder-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-webpack5",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -54,24 +54,24 @@
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/addons": "7.0.0-alpha.56",
-    "@storybook/api": "7.0.0-alpha.56",
-    "@storybook/channel-postmessage": "7.0.0-alpha.56",
-    "@storybook/channel-websocket": "7.0.0-alpha.56",
-    "@storybook/channels": "7.0.0-alpha.56",
-    "@storybook/client-api": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/components": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
-    "@storybook/core-webpack": "7.0.0-alpha.56",
-    "@storybook/manager-api": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/preview": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56",
-    "@storybook/router": "7.0.0-alpha.56",
-    "@storybook/store": "7.0.0-alpha.56",
-    "@storybook/theming": "7.0.0-alpha.56",
+    "@storybook/addons": "7.0.0-alpha.58",
+    "@storybook/api": "7.0.0-alpha.58",
+    "@storybook/channel-postmessage": "7.0.0-alpha.58",
+    "@storybook/channel-websocket": "7.0.0-alpha.58",
+    "@storybook/channels": "7.0.0-alpha.58",
+    "@storybook/client-api": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/components": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
+    "@storybook/core-webpack": "7.0.0-alpha.58",
+    "@storybook/manager-api": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/preview": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58",
+    "@storybook/router": "7.0.0-alpha.58",
+    "@storybook/store": "7.0.0-alpha.58",
+    "@storybook/theming": "7.0.0-alpha.58",
    "@types/node": "^16.0.0",
    "@types/semver": "^7.3.4",
    "babel-loader": "^8.3.0",
@ -126,5 +126,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/channel-postmessage/package.json
+++ b/code/lib/channel-postmessage/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-postmessage",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "",
  "keywords": [
    "storybook"
@ -42,9 +42,9 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/core-events": "7.0.0-alpha.56",
+    "@storybook/channels": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/core-events": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "qs": "^6.10.0",
    "telejson": "^7.0.3"
@ -60,5 +60,5 @@
      "./src/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/channel-websocket/package.json
+++ b/code/lib/channel-websocket/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-websocket",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "",
  "keywords": [
    "storybook"
@ -42,8 +42,8 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.56",
-    "@storybook/client-logger": "7.0.0-alpha.56",
+    "@storybook/channels": "7.0.0-alpha.58",
+    "@storybook/client-logger": "7.0.0-alpha.58",
    "global": "^4.4.0",
    "telejson": "^7.0.3"
  },
@ -58,5 +58,5 @@
      "./src/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "",
  "keywords": [
    "storybook"
@ -52,5 +52,5 @@
      "./src/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@ -1,6 +1,6 @@
 {
  "name": "sb",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
@ -24,7 +24,7 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/cli": "7.0.0-alpha.56"
+    "@storybook/cli": "7.0.0-alpha.58"
  },
  "devDependencies": {
    "typescript": "^4.9.3"
@ -32,5 +32,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "storybook",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
@ -27,7 +27,7 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/cli": "7.0.0-alpha.56"
+    "@storybook/cli": "7.0.0-alpha.58"
  },
  "devDependencies": {
    "typescript": "^4.9.3"
@ -35,5 +35,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook's CLI - easiest method of adding storybook to your projects",
  "keywords": [
    "cli",
@ -43,13 +43,13 @@
  "dependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
-    "@storybook/codemod": "7.0.0-alpha.56",
-    "@storybook/core-common": "7.0.0-alpha.56",
-    "@storybook/core-server": "7.0.0-alpha.56",
-    "@storybook/csf-tools": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/telemetry": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/codemod": "7.0.0-alpha.58",
+    "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/core-server": "7.0.0-alpha.58",
+    "@storybook/csf-tools": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/telemetry": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@types/semver": "^7.3.4",
    "boxen": "^5.1.2",
    "chalk": "^4.1.0",
@ -77,7 +77,7 @@
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.56",
+    "@storybook/client-api": "7.0.0-alpha.58",
    "@types/cross-spawn": "^6.0.2",
    "@types/prompts": "^2.0.9",
    "@types/puppeteer-core": "^2.1.0",
@ -98,5 +98,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/cli/scripts/generate-sb-packages-versions.js
+++ b/code/lib/cli/scripts/generate-sb-packages-versions.js
@ -16,6 +16,8 @@ const run = async () => {

  if (!semver.valid(updatedVersion)) throw new Error(`Invalid version: ${updatedVersion}`);

+  logger.log(`Generating versions.ts with v${updatedVersion}`);
+
  const storybookPackagesPaths = await globby(
    `${rootDirectory}/@(frameworks|addons|lib|renderers|presets)/**/package.json`,
    {
@ -40,15 +42,19 @@ const run = async () => {
    .sort((package1, package2) => package1.name.localeCompare(package2.name))
    .reduce((acc, { name }) => ({ ...acc, [name]: updatedVersion }), {});

+  const versionsPath = path.join(__dirname, '..', 'src', 'versions.ts');
+
  await writeFile(
-    path.join(__dirname, '..', 'src', 'versions.ts'),
+    versionsPath,
    dedent`
      // auto generated file, do not edit
      export default ${JSON.stringify(packageToVersionMap, null, 2)}
    `
  );

-  exec(`yarn lint:js:cmd --fix ${path.join(__dirname, '..', 'src', 'versions.ts')}`, {
+  logger.log(`Updating versions and formatting results at: ${versionsPath}`);
+
+  exec(`yarn lint:js:cmd --fix ${versionsPath}`, {
    cwd: path.join(__dirname, '..', '..', '..'),
  });
 };
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
+++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
@ -44,6 +44,7 @@ const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
  },
  '@storybook/html': {
    webpack5: '@storybook/html-webpack5',
+    vite: '@storybook/html-vite',
  },
 };

--- a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
@ -12,16 +12,18 @@ describe('getStorybookScripts', () => {
  it('detects default storybook scripts', () => {
    expect(
      getStorybookScripts({
-        start: 'server start',
        storybook: 'start-storybook',
        'build-storybook': 'build-storybook',
      })
    ).toEqual({
-      official: {
-        storybook: 'start-storybook',
-        'build-storybook': 'build-storybook',
+      'build-storybook': {
+        before: 'build-storybook',
+        after: 'storybook build',
+      },
+      storybook: {
+        before: 'start-storybook',
+        after: 'storybook dev',
      },
-      custom: {},
    });
  });

@ -29,37 +31,20 @@ describe('getStorybookScripts', () => {
    expect(
      getStorybookScripts({
        start: 'server start',
+        'start-storybook': 'MOCKS=true start-storybook -p 9000',
        'storybook:start-ci': 'CI=true yarn start-storybook',
        'storybook:build-ci': 'CI=true yarn build-storybook',
      })
    ).toEqual({
-      custom: {
-        'storybook:start-ci': 'CI=true yarn start-storybook',
-        'storybook:build-ci': 'CI=true yarn build-storybook',
+      'start-storybook': {
+        before: 'MOCKS=true start-storybook -p 9000',
+        after: 'MOCKS=true storybook dev -p 9000',
      },
-      official: {},
-    });
-  });
-
-  it('works with custom storybook scripts', () => {
-    expect(
-      getStorybookScripts({
-        'sb:start': 'start-storybook',
-        'sb:mocked': 'MOCKS=true start-storybook',
-        'sb:build': 'build-storybook',
-      })
-    ).toEqual({
-      custom: {
-        'sb:start': 'start-storybook',
-        'sb:mocked': 'MOCKS=true start-storybook',
-        'sb:build': 'build-storybook',
-      },
-      official: {},
    });
  });
 });

-describe('sb scripts fix', () => {
+describe('sb-scripts fix', () => {
  describe('sb < 7.0', () => {
    describe('does nothing', () => {
      const packageJson = { dependencies: { '@storybook/react': '^6.2.0' } };
@ -72,6 +57,7 @@ describe('sb scripts fix', () => {
      });
    });
  });
+
  describe('sb >= 7.0', () => {
    describe('with old scripts', () => {
      const packageJson = {
@ -91,11 +77,14 @@ describe('sb scripts fix', () => {
        ).resolves.toEqual(
          expect.objectContaining({
            storybookScripts: {
-              official: {
-                storybook: 'storybook dev -p 6006',
-                'build-storybook': 'storybook build -o build/storybook',
+              'build-storybook': {
+                after: 'storybook build -o build/storybook',
+                before: 'build-storybook -o build/storybook',
+              },
+              storybook: {
+                after: 'storybook dev -p 6006',
+                before: 'start-storybook -p 6006',
              },
-              custom: {},
            },
            storybookVersion: '^7.0.0-alpha.0',
          })
@ -104,22 +93,20 @@ describe('sb scripts fix', () => {
    });

    describe('with old custom scripts', () => {
-      const packageJson = {
-        dependencies: {
-          '@storybook/react': '^7.0.0-alpha.0',
-        },
-        scripts: {
-          'sb:start': 'start-storybook -p 6006',
-          'sb:mocked': 'MOCKS=true sb:start',
-          'sb:start-ci': 'sb:start --ci',
-          'sb:build': 'build-storybook -o buid/storybook',
-          'sb:build-mocked': 'MOCKS=true sb:build',
-          'test-storybook:ci':
-            'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
-        },
-      };
-
      it('should update scripts to new format', async () => {
+        const packageJson = {
+          dependencies: {
+            '@storybook/react': '^7.0.0-alpha.0',
+          },
+          scripts: {
+            'storybook:ci': 'yarn start-storybook --ci',
+            'storybook:build': 'build-storybook -o build/storybook',
+            'storybook:build-mocked': 'MOCKS=true yarn storybook:build',
+            'test-storybook:ci':
+              'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "CI=true build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+          },
+        };
+
        await expect(
          checkSbScripts({
            packageJson,
@ -127,94 +114,56 @@ describe('sb scripts fix', () => {
        ).resolves.toEqual(
          expect.objectContaining({
            storybookScripts: {
-              custom: {
-                'sb:start': 'start-storybook -p 6006',
-                'sb:build': 'build-storybook -o buid/storybook',
-                'test-storybook:ci':
-                  'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+              'storybook:build': {
+                after: 'storybook build -o build/storybook',
+                before: 'build-storybook -o build/storybook',
+              },
+              'test-storybook:ci': {
+                before:
+                  'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "CI=true build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+                after:
+                  'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "CI=true storybook build --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
              },
-              official: {},
            },
            storybookVersion: '^7.0.0-alpha.0',
          })
        );
      });
+    });

-      describe('with old official and custom scripts', () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const packageJson = {
-          dependencies: {
-            '@storybook/react': '^7.0.0-alpha.0',
-          },
-          scripts: {
-            storybook: 'start-storybook -p 6006',
-            'storybook:mocked': 'MOCKS=true storybook',
-            'storybook:ci': 'yarn storybook --ci',
-            'storybook:build': 'build-storybook -o buid/storybook',
-            'storybook:build-mocked': 'MOCKS=true yarn storybook:build',
-            'test-storybook:ci':
-              'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
-          },
-        };
-        it('should update scripts to new format', async () => {
-          await expect(
-            checkSbScripts({
-              packageJson,
-            })
-          ).resolves.toEqual(
-            expect.objectContaining({
-              storybookScripts: {
-                custom: {
-                  'storybook:build': 'build-storybook -o buid/storybook',
-                  'test-storybook:ci':
-                    'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
-                },
-                official: {
-                  storybook: 'storybook dev -p 6006',
-                },
-              },
-              storybookVersion: '^7.0.0-alpha.0',
-            })
-          );
-        });
+    describe('already containing new scripts', () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/react': '^7.0.0-alpha.0',
+          storybook: '^7.0.0-alpha.0',
+        },
+        scripts: {
+          storybook: 'storybook dev -p 6006',
+          'build-storybook': 'storybook build -o build/storybook',
+        },
+      };
+      it('should no-op', async () => {
+        await expect(
+          checkSbScripts({
+            packageJson,
+          })
+        ).resolves.toBeFalsy();
      });
+    });

-      describe('with storybook lib installed', () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const packageJson = {
-          dependencies: {
-            '@storybook/react': '^7.0.0-alpha.0',
-            storybook: '^7.0.0-alpha.0',
-          },
-        };
-        it('should no-op', async () => {
-          await expect(
-            checkSbScripts({
-              packageJson,
-            })
-          ).resolves.toBeFalsy();
-        });
-      });
-
-      describe('already containing new scripts', () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const packageJson = {
-          dependencies: {
-            '@storybook/react': '^7.0.0-alpha.0',
-            storybook: '^7.0.0-alpha.0',
-          },
-          scripts: {
-            storybook: 'npx sb dev -p 6006',
-            'build-storybook': 'npx sb build -o build/storybook',
-          },
-        };
-        it('should no-op', async () => {
-          await expect(
-            checkSbScripts({
-              packageJson,
-            })
-          ).resolves.toBeFalsy();
-        });
+    describe('with storybook lib installed', () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/react': '^7.0.0-alpha.0',
+          storybook: '^7.0.0-alpha.0',
+        },
+      };
+      it('should no-op', async () => {
+        await expect(
+          checkSbScripts({
+            packageJson,
+          })
+        ).resolves.toBeFalsy();
      });
    });
  });
--- a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
+++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
@ -7,31 +7,54 @@ import { getStorybookVersionSpecifier } from '../../helpers';
 import type { PackageJsonWithDepsAndDevDeps } from '../../js-package-manager';

 interface SbScriptsRunOptions {
-  storybookScripts: {
-    custom: Record<string, string>;
-    official: Record<string, string>;
-  };
+  storybookScripts: Record<string, { before: string; after: string }>;
  storybookVersion: string;
  packageJson: PackageJsonWithDepsAndDevDeps;
 }

 const logger = console;

-export const getStorybookScripts = (scripts: Record<string, string>) => {
-  const storybookScripts: SbScriptsRunOptions['storybookScripts'] = {
-    custom: {},
-    official: {},
-  };
+/**
+ * Slightly big function because JS regex doesn't have proper full-word boundary.
+ * This goes through all the words in each script, and only return the scripts
+ * that do contain the actual sb binary, and not something like "npm run start-storybook"
+ * which could actually be a custom script even though the name matches the legacy binary name
+ */
+export const getStorybookScripts = (allScripts: Record<string, string>) => {
+  return Object.keys(allScripts).reduce((acc, key) => {
+    let isStorybookScript = false;
+    const allWordsFromScript = allScripts[key].split(' ');
+    const newScript = allWordsFromScript
+      .map((currentWord, index) => {
+        const previousWord = allWordsFromScript[index - 1];

-  Object.keys(scripts).forEach((key) => {
-    if (key === 'storybook' || key === 'build-storybook') {
-      storybookScripts.official[key] = scripts[key];
-    } else if (scripts[key].match(/start-storybook/) || scripts[key].match(/build-storybook/)) {
-      storybookScripts.custom[key] = scripts[key];
+        // full word check, rather than regex which could be faulty
+        const isSbBinary = currentWord === 'build-storybook' || currentWord === 'start-storybook';
+
+        // in case people have scripts like `yarn start-storybook`
+        const isPrependedByPkgManager =
+          previousWord && ['npx', 'run', 'yarn', 'pnpx'].some((cmd) => previousWord.includes(cmd));
+
+        if (isSbBinary && !isPrependedByPkgManager) {
+          isStorybookScript = true;
+          return currentWord
+            .replace('start-storybook', 'storybook dev')
+            .replace('build-storybook', 'storybook build');
+        }
+
+        return currentWord;
+      })
+      .join(' ');
+
+    if (isStorybookScript) {
+      acc[key] = {
+        before: allScripts[key],
+        after: newScript,
+      };
    }
-  });

-  return storybookScripts;
+    return acc;
+  }, {} as Record<string, { before: string; after: string }>);
 };

 /**
@ -66,47 +89,48 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {

    const storybookScripts = getStorybookScripts(scripts);

-    if (
-      Object.keys(storybookScripts.official).length === 0 &&
-      Object.keys(storybookScripts.custom).length === 0
-    ) {
+    if (Object.keys(storybookScripts).length === 0) {
      return null;
    }

-    Object.keys(storybookScripts.official).forEach((key) => {
-      storybookScripts.official[key] = storybookScripts.official[key]
-        .replace('start-storybook', 'storybook dev')
-        .replace('build-storybook', 'storybook build');
-    });
-
    return semver.gte(storybookCoerced, '7.0.0')
      ? { packageJson, storybookScripts, storybookVersion }
      : null;
  },

-  prompt({ storybookVersion }) {
+  prompt({ storybookVersion, storybookScripts }) {
    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);

-    const explanationMessage = [
-      `Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow(
-        'build-storybook'
-      )} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
-        'storybook build'
-      )} respectively.`,
-      `In order to work with ${sbFormatted}, Storybook's ${chalk.magenta(
-        'storybook'
-      )} binary has to be installed and your storybook scripts have to be adjusted to use the binary. We can install the storybook binary and attempt to adjust your scripts for you.`,
-    ].join('\n');
+    const newScriptsMessage = Object.keys(storybookScripts).reduce((acc, scriptKey) => {
+      acc.push(
+        [
+          chalk.bold(scriptKey),
+          'from:',
+          chalk.cyan(storybookScripts[scriptKey].before),
+          'to:',
+          chalk.cyan(storybookScripts[scriptKey].after),
+        ].join('\n')
+      );
+      return acc;
+    }, []);

-    return [
-      `We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.`,
-      explanationMessage,
-      `More info: ${chalk.yellow(
+    return dedent`
+      We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.
+      Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow(
+      'build-storybook'
+    )} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
+      'storybook build'
+    )} respectively.
+      In order to work with ${sbFormatted}, Storybook's ${chalk.magenta(
+      'storybook'
+    )} binary has to be installed and your storybook scripts have to be adjusted to use the binary. We can install the storybook binary and adjust your scripts for you:
+
+      ${newScriptsMessage.join('\n\n')}
+
+      In case this migration did not cover all of your scripts, or you'd like more info: ${chalk.yellow(
        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
-      )}`,
-    ]
-      .filter(Boolean)
-      .join('\n\n');
+      )}
+      `;
  },

  async run({ result: { storybookScripts, packageJson }, packageManager, dryRun }) {
@ -123,30 +147,15 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {

    logger.info(`Updating scripts in package.json`);
    logger.log();
-    if (!dryRun && Object.keys(storybookScripts.official).length > 0) {
-      const message = [
-        `Migrating your scripts to:`,
-        chalk.yellow(JSON.stringify(storybookScripts.official, null, 2)),
-      ].join('\n');
+    if (!dryRun) {
+      const newScripts = Object.keys(storybookScripts).reduce((acc, scriptKey) => {
+        acc[scriptKey] = storybookScripts[scriptKey].after;
+        return acc;
+      }, {} as Record<string, string>);

-      logger.log(message);
      logger.log();

-      packageManager.addScripts(storybookScripts.official);
-    }
-
-    if (!dryRun && Object.keys(storybookScripts.custom).length > 0) {
-      const message = [
-        `We detected custom scripts that we can't automigrate:`,
-        chalk.yellow(JSON.stringify(storybookScripts.custom, null, 2)),
-        '\n',
-        `Please manually migrate the ones applicable and use the documentation below for reference: ${chalk.yellow(
-          'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
-        )}`,
-      ].join('\n');
-
-      logger.log(message);
-      logger.log();
+      packageManager.addScripts(newScripts);
    }
  },
 };
--- a/code/lib/cli/src/automigrate/index.ts
+++ b/code/lib/cli/src/automigrate/index.ts
@ -9,29 +9,44 @@ import { fixes } from './fixes';

 const logger = console;

+type FixId = string;
+
 interface FixOptions {
-  fixId?: string;
+  fixId?: FixId;
  yes?: boolean;
  dryRun?: boolean;
  useNpm?: boolean;
  force?: PackageManagerName;
 }

+enum FixStatus {
+  CHECK_FAILED = 'check_failed',
+  UNNECESSARY = 'unnecessary',
+  SKIPPED = 'skipped',
+  SUCCEEDED = 'succeeded',
+  FAILED = 'failed',
+}
+
 export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOptions = {}) => {
  const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force });
  const filtered = fixId ? fixes.filter((f) => f.id === fixId) : fixes;

  logger.info('🔎 checking possible migrations..');
+  const fixResults = {} as Record<FixId, FixStatus>;

  for (let i = 0; i < filtered.length; i += 1) {
    const f = fixes[i] as Fix;
    let result;
+    let fixStatus;
    try {
      result = await f.check({ packageManager });
    } catch (e) {
+      fixStatus = FixStatus.CHECK_FAILED;
      logger.info(`failed to check fix: ${f.id}`);
    }
-    if (result) {
+    if (!result) {
+      fixStatus = FixStatus.UNNECESSARY;
+    } else {
      logger.info(`🔎 found a '${chalk.cyan(f.id)}' migration:`);
      logger.info();
      const message = f.prompt(result);
@ -58,12 +73,15 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti
        try {
          await f.run({ result, packageManager, dryRun });
          logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
+          fixStatus = FixStatus.SUCCEEDED;
        } catch (error) {
+          fixStatus = FixStatus.FAILED;
          logger.info(`❌ error when running ${chalk.cyan(f.id)} migration:`);
          logger.info(error);
          logger.info();
        }
      } else {
+        fixStatus = FixStatus.SKIPPED;
        logger.info(`Skipping the ${chalk.cyan(f.id)} migration.`);
        logger.info();
        logger.info(
@ -71,9 +89,13 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti
        );
      }
    }
+
+    fixResults[f.id] = fixStatus;
  }

  logger.info();
  logger.info('✅ migration check successfully ran');
  logger.info();
+
+  return fixResults;
 };
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@ -25,14 +25,15 @@ import { parseList, getEnvConfig } from './utils';
 const pkg = readUpSync({ cwd: __dirname }).packageJson;
 const consoleLogger = console;

-program.option(
-  '--disable-telemetry',
-  'disable sending telemetry data',
-  // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
-  process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
-);
-
-program.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
+program
+  .option(
+    '--disable-telemetry',
+    'disable sending telemetry data',
+    // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+    process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+  )
+  .option('--debug', 'Get more logs in debug mode', false)
+  .option('--enable-crash-reports', 'enable sending crash reports to telemetry data');

 program
  .command('init')
@ -80,6 +81,7 @@ program
  .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)')
  .option('-y --yes', 'Skip prompting the user')
  .option('-n --dry-run', 'Only check for upgrades, do not install')
+  .option('-t --tag <tag>', 'Upgrade to a certain npm dist-tag (e.g. next, prerelease)')
  .option('-p --prerelease', 'Upgrade to the pre-release packages')
  .option('-s --skip-check', 'Skip postinstall version and automigration checks')
  .action((options: UpgradeOptions) => upgrade(options));
@ -189,12 +191,12 @@ program
  .option('-n --dry-run', 'Only check for fixes, do not actually run them')
  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager')
  .option('-N --use-npm', 'Use npm as package manager (deprecated)')
-  .action((fixId, options) =>
-    automigrate({ fixId, ...options }).catch((e) => {
+  .action(async (fixId, options) => {
+    await automigrate({ fixId, ...options }).catch((e) => {
      logger.error(e);
      process.exit(1);
-    })
-  );
+    });
+  });

 program
  .command('dev')
--- a/code/lib/cli/src/generators/SVELTEKIT/index.ts
+++ b/code/lib/cli/src/generators/SVELTEKIT/index.ts
@ -0,0 +1,8 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(packageManager, npmOptions, options, 'svelte', undefined, 'sveltekit');
+};
+
+export default generator;
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@ -101,7 +101,7 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) =>
  ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(rendererId);

 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
-  ['angular', 'nextjs'].includes(framework);
+  ['angular', 'nextjs', 'sveltekit'].includes(framework);

 export async function baseGenerator(
  packageManager: JsPackageManager,
@ -209,7 +209,11 @@ export async function baseGenerator(
  await configurePreview(rendererId);

  // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
-  if (frameworkPackages.find((pkg) => pkg.match(/^@storybook\/.*-vite$/))) {
+  if (
+    frameworkPackages.find(
+      (pkg) => pkg.match(/^@storybook\/.*-vite$/) || pkg === '@storybook/sveltekit'
+    )
+  ) {
    const previewHead = dedent`
      <script>
        window.global = window;
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@ -26,6 +26,7 @@ import webComponentsGenerator from './generators/WEB-COMPONENTS';
 import riotGenerator from './generators/RIOT';
 import preactGenerator from './generators/PREACT';
 import svelteGenerator from './generators/SVELTE';
+import svelteKitGenerator from './generators/SVELTEKIT';
 import raxGenerator from './generators/RAX';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager } from './js-package-manager';
@ -183,6 +184,11 @@ const installStorybook = (
          commandLog('Adding Storybook support to your "Svelte" app\n')
        );

+      case ProjectType.SVELTEKIT:
+        return svelteKitGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "SvelteKit" app\n')
+        );
+
      case ProjectType.RAX:
        return raxGenerator(packageManager, npmOptions, generatorOptions).then(
          commandLog('Adding Storybook support to your "Rax" app\n')
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@ -16,7 +16,7 @@ function eqMajor(versionRange: string, major: number) {
 }

 // Should match @storybook/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular';
+export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit';

 // Should match @storybook/<renderer>
 export type SupportedRenderers =
@ -78,6 +78,7 @@ export enum ProjectType {
  RIOT = 'RIOT',
  PREACT = 'PREACT',
  SVELTE = 'SVELTE',
+  SVELTEKIT = 'SVELTEKIT',
  RAX = 'RAX',
  AURELIA = 'AURELIA',
  SERVER = 'SERVER',
@ -254,6 +255,14 @@ export const supportedTemplates: TemplateConfiguration[] = [
      return dependencies.every(Boolean);
    },
  },
+  {
+    // TODO: This only works because it is before the SVELTE template. could be more explicit
+    preset: ProjectType.SVELTEKIT,
+    dependencies: ['@sveltejs/kit'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
  {
    preset: ProjectType.SVELTE,
    dependencies: ['svelte'],
--- a/code/lib/cli/src/repro-generators/configs.ts
+++ b/code/lib/cli/src/repro-generators/configs.ts
@ -266,3 +266,11 @@ export const svelte: Parameters = {
  version: 'latest',
  generator: 'npx giget github:sveltejs/template#master {{appName}}',
 };
+
+export const svelteKit: Parameters = {
+  renderer: 'svelte',
+  name: 'svelteKit',
+  version: 'latest',
+  generator:
+    'yarn create svelte-with-args --name={{appName}} --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
+};
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@ -1,4 +1,39 @@
-export const allTemplates = {
+export type SkippableTask = 'smoke-test' | 'test-runner' | 'chromatic' | 'e2e-tests';
+export type TemplateKey = keyof typeof allTemplates;
+export type Cadence = keyof typeof templatesByCadence;
+export type Template = {
+  /**
+   * Readable name for the template, which will be used for feedback and the status page
+   */
+  name: string;
+  /**
+   * Script used to generate the base project of a template.
+   * The Storybook CLI will then initialize Storybook on top of that template.
+   * This is used to generate projects which are pushed to https://github.com/storybookjs/repro-templates-temp
+   */
+  script: string;
+  /**
+   * Used to assert various things about the generated template.
+   * If the template is generated with a different expected framework, it will fail, detecting a possible regression.
+   */
+  expected: {
+    framework: string;
+    renderer: string;
+    builder: string;
+  };
+  /**
+   * Some sandboxes might not work properly in specific tasks temporarily, but we might
+   * still want to run the other tasks. Set the ones to skip in this property.
+   */
+  skipTasks?: SkippableTask[];
+  /**
+   * Set this only while developing a newly created framework, to avoid using it in CI.
+   * NOTE: Make sure to always add a TODO comment to remove this flag in a subsequent PR.
+   */
+  inDevelopment?: boolean;
+};
+
+export const allTemplates: Record<string, Template> = {
  'cra/default-js': {
    name: 'Create React App (Javascript)',
    script: 'npx create-react-app .',
@ -21,9 +56,19 @@ export const allTemplates = {
      builder: '@storybook/builder-webpack5',
    },
  },
+  'nextjs/12-js': {
+    name: 'Next.js v12 (JavaScript)',
+    script:
+      'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-12-3-2/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12" && yarn && git add . && git commit --amend --no-edit && cd ..',
+    expected: {
+      framework: '@storybook/nextjs',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5',
+    },
+  },
  'nextjs/default-js': {
    name: 'Next.js (JavaScript)',
-    script: 'npx create-next-app {{beforeDir}}',
+    script: 'yarn create next-app {{beforeDir}} --javascript --eslint',
    expected: {
      framework: '@storybook/nextjs',
      renderer: '@storybook/react',
@ -32,7 +77,7 @@ export const allTemplates = {
  },
  'nextjs/default-ts': {
    name: 'Next.js (TypeScript)',
-    script: 'npx create-next-app {{beforeDir}} --typescript',
+    script: 'yarn create next-app {{beforeDir}} --typescript --eslint',
    expected: {
      framework: '@storybook/nextjs',
      renderer: '@storybook/react',
@ -117,6 +162,28 @@ export const allTemplates = {
      builder: '@storybook/builder-webpack5',
    },
  },
+  'html-vite/default-js': {
+    name: 'HTML Vite JS',
+    script: 'yarn create vite . --template vanilla && echo "export default {}" > vite.config.js',
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+    // TODO: remove this once html-vite framework is released
+    inDevelopment: true,
+  },
+  'html-vite/default-ts': {
+    name: 'HTML Vite TS',
+    script: 'yarn create vite . --template vanilla-ts && echo "export default {}" > vite.config.js',
+    expected: {
+      framework: '@storybook/html-vite',
+      renderer: '@storybook/html',
+      builder: '@storybook/builder-vite',
+    },
+    // TODO: remove this once html-vite framework is released
+    inDevelopment: true,
+  },
  'svelte-vite/default-js': {
    name: 'Svelte Vite (JS)',
    script: 'yarn create vite . --template svelte',
@ -168,21 +235,23 @@ export const allTemplates = {
    },
  },
  'svelte-kit/skeleton-js': {
+    inDevelopment: true,
    name: 'Svelte Kit (JS)',
    script:
      'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
    expected: {
-      framework: '@storybook/svelte-vite',
+      framework: '@storybook/sveltekit',
      renderer: '@storybook/svelte',
      builder: '@storybook/builder-vite',
    },
  },
  'svelte-kit/skeleton-ts': {
+    inDevelopment: true,
    name: 'Svelte Kit (TS)',
    script:
      'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',
    expected: {
-      framework: '@storybook/svelte-vite',
+      framework: '@storybook/sveltekit',
      renderer: '@storybook/svelte',
      builder: '@storybook/builder-vite',
    },
@ -256,8 +325,6 @@ export const allTemplates = {
  },
 };

-type TemplateKey = keyof typeof allTemplates;
-
 export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
 export const pr: TemplateKey[] = [
  ...ci,
--- a/code/lib/cli/src/upgrade.ts
+++ b/code/lib/cli/src/upgrade.ts
@ -1,5 +1,5 @@
 import { sync as spawnSync } from 'cross-spawn';
-import { telemetry } from '@storybook/telemetry';
+import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry';
 import semver from 'semver';
 import { logger } from '@storybook/node-logger';
 import { withTelemetry } from '@storybook/core-server';
@ -136,6 +136,7 @@ export const addExtraFlags = (
 };

 export interface UpgradeOptions {
+  tag: string;
  prerelease: boolean;
  skipCheck: boolean;
  useNpm: boolean;
@ -146,6 +147,7 @@ export interface UpgradeOptions {
 }

 export const doUpgrade = async ({
+  tag,
  prerelease,
  skipCheck,
  useNpm,
@ -159,15 +161,27 @@ export const doUpgrade = async ({
  }
  const packageManager = JsPackageManagerFactory.getPackageManager({ useNpm, force: pkgMgr });

+  const beforeVersion = await getStorybookCoreVersion();
+
  commandLog(`Checking for latest versions of '@storybook/*' packages`);
-  if (!options.disableTelemetry) {
-    telemetry('upgrade', { prerelease });
+
+  if (tag && prerelease) {
+    throw new Error(
+      `Cannot set both --tag and --prerelease. Use --tag next to get the latest prereleae`
+    );
+  }
+
+  let target = 'latest';
+  if (prerelease) {
+    target = 'greatest';
+  } else if (tag) {
+    target = `@${tag}`;
  }

  let flags = [];
  if (!dryRun) flags.push('--upgrade');
  flags.push('--target');
-  flags.push(prerelease ? 'greatest' : 'latest');
+  flags.push(target);
  flags = addExtraFlags(EXTRA_FLAGS, flags, packageManager.retrievePackageJson());
  const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], {
    stdio: 'pipe',
@ -180,9 +194,15 @@ export const doUpgrade = async ({
    packageManager.installDependencies();
  }

+  let automigrationResults;
  if (!skipCheck) {
    checkVersionConsistency();
-    await automigrate({ dryRun, yes, useNpm, force: pkgMgr });
+    automigrationResults = await automigrate({ dryRun, yes, useNpm, force: pkgMgr });
+  }
+
+  if (!options.disableTelemetry) {
+    const afterVersion = await getStorybookCoreVersion();
+    telemetry('upgrade', { prerelease, tag, automigrationResults, beforeVersion, afterVersion });
  }
 };

--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@ -1,87 +1,89 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.0.0-alpha.56',
-  '@storybook/addon-actions': '7.0.0-alpha.56',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.56',
-  '@storybook/addon-controls': '7.0.0-alpha.56',
-  '@storybook/addon-docs': '7.0.0-alpha.56',
-  '@storybook/addon-essentials': '7.0.0-alpha.56',
-  '@storybook/addon-highlight': '7.0.0-alpha.56',
-  '@storybook/addon-interactions': '7.0.0-alpha.56',
-  '@storybook/addon-jest': '7.0.0-alpha.56',
-  '@storybook/addon-links': '7.0.0-alpha.56',
-  '@storybook/addon-measure': '7.0.0-alpha.56',
-  '@storybook/addon-outline': '7.0.0-alpha.56',
-  '@storybook/addon-storyshots': '7.0.0-alpha.56',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.56',
-  '@storybook/addon-storysource': '7.0.0-alpha.56',
-  '@storybook/addon-toolbars': '7.0.0-alpha.56',
-  '@storybook/addon-viewport': '7.0.0-alpha.56',
-  '@storybook/addons': '7.0.0-alpha.56',
-  '@storybook/angular': '7.0.0-alpha.56',
-  '@storybook/manager-api': '7.0.0-alpha.56',
-  '@storybook/blocks': '7.0.0-alpha.56',
-  '@storybook/builder-manager': '7.0.0-alpha.56',
-  '@storybook/builder-vite': '7.0.0-alpha.56',
-  '@storybook/builder-webpack5': '7.0.0-alpha.56',
-  '@storybook/channel-postmessage': '7.0.0-alpha.56',
-  '@storybook/channel-websocket': '7.0.0-alpha.56',
-  '@storybook/channels': '7.0.0-alpha.56',
-  '@storybook/cli': '7.0.0-alpha.56',
-  '@storybook/client-api': '7.0.0-alpha.56',
-  '@storybook/client-logger': '7.0.0-alpha.56',
-  '@storybook/codemod': '7.0.0-alpha.56',
-  '@storybook/components': '7.0.0-alpha.56',
-  '@storybook/core-client': '7.0.0-alpha.56',
-  '@storybook/core-common': '7.0.0-alpha.56',
-  '@storybook/core-events': '7.0.0-alpha.56',
-  '@storybook/core-server': '7.0.0-alpha.56',
-  '@storybook/core-webpack': '7.0.0-alpha.56',
-  '@storybook/csf-tools': '7.0.0-alpha.56',
-  '@storybook/docs-tools': '7.0.0-alpha.56',
-  '@storybook/ember': '7.0.0-alpha.56',
-  '@storybook/html': '7.0.0-alpha.56',
-  '@storybook/html-webpack5': '7.0.0-alpha.56',
-  '@storybook/instrumenter': '7.0.0-alpha.56',
-  '@storybook/nextjs': '7.0.0-alpha.56',
-  '@storybook/node-logger': '7.0.0-alpha.56',
-  '@storybook/postinstall': '7.0.0-alpha.56',
-  '@storybook/preact': '7.0.0-alpha.56',
-  '@storybook/preact-webpack5': '7.0.0-alpha.56',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.56',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.56',
-  '@storybook/preview': '7.0.0-alpha.56',
-  '@storybook/preview-api': '7.0.0-alpha.56',
-  '@storybook/preview-web': '7.0.0-alpha.56',
-  '@storybook/react': '7.0.0-alpha.56',
-  '@storybook/react-vite': '7.0.0-alpha.56',
-  '@storybook/react-webpack5': '7.0.0-alpha.56',
-  '@storybook/router': '7.0.0-alpha.56',
-  '@storybook/server': '7.0.0-alpha.56',
-  '@storybook/server-webpack5': '7.0.0-alpha.56',
-  '@storybook/source-loader': '7.0.0-alpha.56',
-  '@storybook/store': '7.0.0-alpha.56',
-  '@storybook/svelte': '7.0.0-alpha.56',
-  '@storybook/svelte-vite': '7.0.0-alpha.56',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.56',
-  '@storybook/telemetry': '7.0.0-alpha.56',
-  '@storybook/theming': '7.0.0-alpha.56',
-  '@storybook/manager': '7.0.0-alpha.56',
-  '@storybook/vue': '7.0.0-alpha.56',
-  '@storybook/vue-vite': '7.0.0-alpha.56',
-  '@storybook/vue-webpack5': '7.0.0-alpha.56',
-  '@storybook/vue3': '7.0.0-alpha.56',
-  '@storybook/vue3-vite': '7.0.0-alpha.56',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.56',
-  '@storybook/web-components': '7.0.0-alpha.56',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.56',
-  '@storybook/web-components-vite': '7.0.0-alpha.56',
-  sb: '7.0.0-alpha.56',
-  storybook: '7.0.0-alpha.56',
+  '@storybook/addon-a11y': '7.0.0-alpha.58',
+  '@storybook/addon-actions': '7.0.0-alpha.58',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.58',
+  '@storybook/addon-controls': '7.0.0-alpha.58',
+  '@storybook/addon-docs': '7.0.0-alpha.58',
+  '@storybook/addon-essentials': '7.0.0-alpha.58',
+  '@storybook/addon-highlight': '7.0.0-alpha.58',
+  '@storybook/addon-interactions': '7.0.0-alpha.58',
+  '@storybook/addon-jest': '7.0.0-alpha.58',
+  '@storybook/addon-links': '7.0.0-alpha.58',
+  '@storybook/addon-measure': '7.0.0-alpha.58',
+  '@storybook/addon-outline': '7.0.0-alpha.58',
+  '@storybook/addon-storyshots': '7.0.0-alpha.58',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.58',
+  '@storybook/addon-storysource': '7.0.0-alpha.58',
+  '@storybook/addon-toolbars': '7.0.0-alpha.58',
+  '@storybook/addon-viewport': '7.0.0-alpha.58',
+  '@storybook/addons': '7.0.0-alpha.58',
+  '@storybook/angular': '7.0.0-alpha.58',
+  '@storybook/manager-api': '7.0.0-alpha.58',
+  '@storybook/blocks': '7.0.0-alpha.58',
+  '@storybook/builder-manager': '7.0.0-alpha.58',
+  '@storybook/builder-vite': '7.0.0-alpha.58',
+  '@storybook/builder-webpack5': '7.0.0-alpha.58',
+  '@storybook/channel-postmessage': '7.0.0-alpha.58',
+  '@storybook/channel-websocket': '7.0.0-alpha.58',
+  '@storybook/channels': '7.0.0-alpha.58',
+  '@storybook/cli': '7.0.0-alpha.58',
+  '@storybook/client-api': '7.0.0-alpha.58',
+  '@storybook/client-logger': '7.0.0-alpha.58',
+  '@storybook/codemod': '7.0.0-alpha.58',
+  '@storybook/components': '7.0.0-alpha.58',
+  '@storybook/core-client': '7.0.0-alpha.58',
+  '@storybook/core-common': '7.0.0-alpha.58',
+  '@storybook/core-events': '7.0.0-alpha.58',
+  '@storybook/core-server': '7.0.0-alpha.58',
+  '@storybook/core-webpack': '7.0.0-alpha.58',
+  '@storybook/csf-tools': '7.0.0-alpha.58',
+  '@storybook/docs-tools': '7.0.0-alpha.58',
+  '@storybook/ember': '7.0.0-alpha.58',
+  '@storybook/html': '7.0.0-alpha.58',
+  '@storybook/html-webpack5': '7.0.0-alpha.58',
+  '@storybook/html-vite': '7.0.0-alpha.58',
+  '@storybook/instrumenter': '7.0.0-alpha.58',
+  '@storybook/nextjs': '7.0.0-alpha.58',
+  '@storybook/node-logger': '7.0.0-alpha.58',
+  '@storybook/postinstall': '7.0.0-alpha.58',
+  '@storybook/preact': '7.0.0-alpha.58',
+  '@storybook/preact-webpack5': '7.0.0-alpha.58',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.58',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.58',
+  '@storybook/preview': '7.0.0-alpha.58',
+  '@storybook/preview-api': '7.0.0-alpha.58',
+  '@storybook/preview-web': '7.0.0-alpha.58',
+  '@storybook/react': '7.0.0-alpha.58',
+  '@storybook/react-vite': '7.0.0-alpha.58',
+  '@storybook/react-webpack5': '7.0.0-alpha.58',
+  '@storybook/router': '7.0.0-alpha.58',
+  '@storybook/server': '7.0.0-alpha.58',
+  '@storybook/server-webpack5': '7.0.0-alpha.58',
+  '@storybook/source-loader': '7.0.0-alpha.58',
+  '@storybook/store': '7.0.0-alpha.58',
+  '@storybook/svelte': '7.0.0-alpha.58',
+  '@storybook/sveltekit': '7.0.0-alpha.58',
+  '@storybook/svelte-vite': '7.0.0-alpha.58',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.58',
+  '@storybook/telemetry': '7.0.0-alpha.58',
+  '@storybook/theming': '7.0.0-alpha.58',
+  '@storybook/manager': '7.0.0-alpha.58',
+  '@storybook/vue': '7.0.0-alpha.58',
+  '@storybook/vue-vite': '7.0.0-alpha.58',
+  '@storybook/vue-webpack5': '7.0.0-alpha.58',
+  '@storybook/vue3': '7.0.0-alpha.58',
+  '@storybook/vue3-vite': '7.0.0-alpha.58',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.58',
+  '@storybook/web-components': '7.0.0-alpha.58',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.58',
+  '@storybook/web-components-vite': '7.0.0-alpha.58',
+  sb: '7.0.0-alpha.58',
+  storybook: '7.0.0-alpha.58',
 };
--- a/code/lib/client-api/package.json
+++ b/code/lib/client-api/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/client-api",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook Client API",
  "keywords": [
    "storybook"
@ -42,8 +42,8 @@
    "prep": "../../../scripts/prepare/facade.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56"
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58"
  },
  "publishConfig": {
    "access": "public"
@ -54,5 +54,5 @@
    ],
    "shim": "@storybook/preview-api/dist/client-api"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/client-logger/package.json
+++ b/code/lib/client-logger/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/client-logger",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "",
  "keywords": [
    "storybook"
@ -55,5 +55,5 @@
      "./src/index.ts"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/codemod",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "A collection of codemod scripts written with JSCodeshift",
  "keywords": [
    "storybook"
@ -39,9 +39,9 @@
  "dependencies": {
    "@babel/types": "^7.20.2",
    "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-alpha.56",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/csf-tools": "7.0.0-alpha.58",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "cross-spawn": "^7.0.3",
    "globby": "^11.0.2",
    "jscodeshift": "^0.13.1",
@ -64,5 +64,5 @@
      "./src/index.js"
    ]
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/core-client/package.json
+++ b/code/lib/core-client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-client",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -35,8 +35,8 @@
    "prep": "../../../scripts/prepare/facade.ts"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.56",
-    "@storybook/preview-api": "7.0.0-alpha.56"
+    "@storybook/client-logger": "7.0.0-alpha.58",
+    "@storybook/preview-api": "7.0.0-alpha.58"
  },
  "publishConfig": {
    "access": "public"
@ -47,5 +47,5 @@
    ],
    "shim": "@storybook/preview-api/dist/core-client"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-common",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.58",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -47,8 +47,8 @@
  },
  "dependencies": {
    "@babel/core": "^7.20.2",
-    "@storybook/node-logger": "7.0.0-alpha.56",
-    "@storybook/types": "7.0.0-alpha.56",
+    "@storybook/node-logger": "7.0.0-alpha.58",
+    "@storybook/types": "7.0.0-alpha.58",
    "@types/babel__core": "^7.1.20",
    "@types/express": "^4.7.0",
    "@types/node": "^16.0.0",
@ -95,5 +95,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "c8e9a862bb83c4a0d6b5975e795b4ca7f7ff7bc2"
+  "gitHead": "c7f8e3e8486ab5caf3da0ef016acfd2065f0dc05"
 }
--- a/code/lib/core-common/src/presets.test.ts
+++ b/code/lib/core-common/src/presets.test.ts
@ -1,3 +1,4 @@
+import path from 'path';
 import './presets';

 function wrapPreset(basePresets: any): { babel: Function; webpack: Function } {
@ -409,7 +410,7 @@ describe('resolveAddonName', () => {
  it('should resolve managerEntries', () => {
    expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({
      name: '@storybook/addon-actions/register',
-      managerEntries: ['@storybook/addon-actions/register'],
+      managerEntries: [path.normalize('@storybook/addon-actions/register')],
      type: 'virtual',
    });
  });
@ -417,7 +418,7 @@ describe('resolveAddonName', () => {
  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'],
+      managerEntries: [path.normalize('@storybook/addon-actions/manager')],
      type: 'virtual',
    });
  });
@ -536,14 +537,14 @@ describe('loadPreset', () => {
        name: '@storybook/addon-actions/register',
        options: {},
        preset: {
-          managerEntries: ['@storybook/addon-actions/register'],
+          managerEntries: [path.normalize('@storybook/addon-actions/register')],
        },
      },
      {
        name: 'addon-foo/register.js',
        options: {},
        preset: {
-          managerEntries: ['addon-foo/register.js'],
+          managerEntries: [path.normalize('addon-foo/register')],
        },
      },
      {
@ -565,14 +566,14 @@ describe('loadPreset', () => {
        name: 'addon-baz/register.js',
        options: {},
        preset: {
-          managerEntries: ['addon-baz/register.js'],
+          managerEntries: [path.normalize('addon-baz/register')],
        },
      },
      {
        name: '@storybook/addon-notes/register-panel',
        options: {},
        preset: {
-          managerEntries: ['@storybook/addon-notes/register-panel'],
+          managerEntries: [path.normalize('@storybook/addon-notes/register-panel')],
        },
      },
      {
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export type { StorybookConfig } from '@storybook/builder-vite';`