Merge branch 'next' into remove-ember-usage

2025-04-04 19:11:08 +08:00 · 2022-07-01 01:47:54 +02:00 · 2022-07-01 01:47:54 +02:00 · 2097011d5f
commit 2097011d5f
parent e98239ad62 a14a943b9a
383 changed files with 5878 additions and 3511 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -277,9 +277,9 @@ jobs:
      - run:
          name: run e2e tests cra
          command: yarn test:e2e-framework --pnp cra
-      - run:
-          name: run e2e tests vue
-          command: yarn test:e2e-framework --pnp sfcVue
+      # - run:
+      #     name: run e2e tests vue
+      #     command: yarn test:e2e-framework --pnp sfcVue
      - run:
          name: prep artifacts
          when: always
--- a/.github/workflows/markdown-link-check-config.json
+++ b/.github/workflows/markdown-link-check-config.json
@ -14,6 +14,25 @@
    },
    {
      "pattern": "https://stackblitz.com/*"
+    },
+    {
+      "pattern": "https://*.chromatic.com"
+    },
+    {
+      "pattern": "https://www.chromatic.com/build?*"
+    },
+    {
+      "pattern": "http://*.nodeca.com"
+    },
+    {
+      "pattern": "http://definitelytyped.org/*"
+    },
+    {
+      "pattern": "https://yoursite.com/*"
+    },
+    {
+      "pattern": "https://my-specific-domain.com"
    }
-  ]
+  ],
+  "aliveStatusCodes": [429, 200]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,47 @@
+## 6.5.0-rc.1 (May 18, 2022)
+
+### Bug Fixes
+
+- CLI: Improve webpack version and add detection of nextjs ([#18220](https://github.com/storybookjs/storybook/pull/18220))
+- ArgsTable: Gracefully handle conditional args failures ([#18248](https://github.com/storybookjs/storybook/pull/18248))
+- Controls: Fix reset button broken for !undefined URL values ([#18231](https://github.com/storybookjs/storybook/pull/18231))
+- Vue3: Add support for TSX in single file components ([#18038](https://github.com/storybookjs/storybook/pull/18038))
+
+## 6.5.0-rc.0 (May 17, 2022)
+
+### Features
+
+- Addon-a11y: Show % of users in toolbar menu ([#18003](https://github.com/storybookjs/storybook/pull/18003))
+
+### Bug Fixes
+
+- Web-components: Clean Lit Expression comments in story source ([#18108](https://github.com/storybookjs/storybook/pull/18108))
+- Vue: Map args correctly in CSF3 implicit render function ([#18209](https://github.com/storybookjs/storybook/pull/18209))
+- Vue3: Fix CSF3 implicit render function when storyStoreV7 is enabled ([#18208](https://github.com/storybookjs/storybook/pull/182)
+
+### Maintenance
+
+- CLI: Don't throw is Ctrl + C was pressed when selecting a package in the build command ([#18195](https://github.com/storybookjs/storybook/pull/18195))
+- Build: Cleanup noise from unit tests ([#18196](https://github.com/storybookjs/storybook/pull/18196))
+
+### Dependency Upgrades
+
+- Fixed PnP compatibility for bundled components package ([#18015](https://github.com/storybookjs/storybook/pull/18015))
+
+## 6.5.0-beta.8 (May 11, 2022)
+
+### Bug Fixes
+
+- Composition: Fix metadata.json incorrectly overriding main.js refs versions ([#18185](https://github.com/storybookjs/storybook/pull/18185))
+
+### Maintenance
+
+- Examples: Set channelOptions to disallow function serialization ([#18071](https://github.com/storybookjs/storybook/pull/18071))
+
+### Dependency Upgrades
+
+- Upgrade to telejson 6 ([#18164](https://github.com/storybookjs/storybook/pull/18164))
+
 ## 6.5.0-beta.7 (May 9, 2022)

 ### Features
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@ -15,7 +15,7 @@ This document outlines some of the processes that the maintainers should adhere
 | api:(name)                     | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API))                         |
 | args                           | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md)                                                            |
 | babel/webpack                  | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below                            |
-| block:(name)                   | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable))                              |
+| block:(name)                   | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md))                              |
 | BREAKING CHANGE                | Issue or pull request that introduces a breaking change within Storybook's ecosystem.                                                               |
 | BREAKING PRERELASE             | Breaking, but only for prerelease users (not relative to the stable release)                                                                        |
 | build-storybook                | Issue, bug, or pull request related to Storybook's production build                                                                                 |
@ -24,7 +24,7 @@ This document outlines some of the processes that the maintainers should adhere
 | cli                            | Issue, bug, or pull request that affects the Storybook's CLI                                                                                        |
 | compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/))                                                   |
 | components                     | Issue, bug, or pull request related to Storybook's internal components                                                                              |
-| composition                    | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md)                                            |
+| composition                    | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md)                                            |
 | configuration                  | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md)                                                       |
 | core                           | Issue, bug, or pull request related to Storybook's Core                                                                                             |
 | cra                            | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,6 +1,7 @@
 <h1>Migration</h1>

 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [Vue 3 upgrade](#vue-3-upgrade)
  - [React18 new root API](#react18-new-root-api)
  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
  - [Deprecated register.js](#deprecated-registerjs)
@ -202,6 +203,10 @@

 ## From version 6.4.x to 6.5.0

+### Vue 3 upgrade
+
+Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
+
 ### React18 new root API

 React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
@ -360,6 +365,7 @@ In 6.5, the final titles would be:
 - `NoTitle.stories.js` => `Custom/NoTitle`
 - `Title.stories.js` => `Custom/Bar`

+<!-- markdown-link-check-disable -->
 ## From version 6.3.x to 6.4.0

 ### Automigrate
@ -748,7 +754,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0

 ### Webpack 5

-Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
+Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
+
+1 - Upgrade command
+
+If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
+
+```shell
+npx sb upgrade
+```
+
+2 - Automigrate command
+
+If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
+
+```shell
+npx sb automigrate
+```
+
+3 - Manually
+
+If either methods did not work or you just want to proceed manually, do the following steps:
+
+Install the dependencies:

 ```shell
 yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
@ -2216,7 +2244,7 @@ Theming has been rewritten in v5. If you used theming in v4, please consult the

 ### Story hierarchy defaults

-Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
+Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](https://github.com/storybookjs/deprecated-addons/blob/master/MIGRATION.md#options-addon-deprecated).

 In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.

@ -2881,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
  import { action } from '@storybook/addon-actions';
  import { linkTo } from '@storybook/addon-links';
  ```
+<!-- markdown-link-check-enable -->
--- a/README.md
+++ b/README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c

 <p align="center">
  View README for:<br/>
-  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
-  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
 </p>

 ## Table of contents
@ -80,7 +80,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs

 ### Examples

-Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
+Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>

 Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.

@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story

 ### Supported Frameworks

-| Framework                                                      | Demo                                                                                        |                                                                                                         |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [React](app/react)                                             | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                 | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                               |
-| [Vue](app/vue)                                                 | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/)                                 | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                                     |
-| [Angular](app/angular)                                         | [v6.4.x](https://storybookjs.netlify.com/angular-cli/)                                      | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                         |
-| [Web components](app/web-components)                           | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/)                      | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components)            |
-| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                           | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native)          |
-| [HTML](app/html)                                               | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/)                                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                                  |
-| [Ember](app/ember)                                             | [v6.4.x](https://storybookjs.netlify.com/ember-cli/)                                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                               |
-| [Svelte](app/svelte)                                           | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                            |
-| [Preact](app/preact)                                           | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                            |
-| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)             |
-| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) |
+| Framework                                                      | Demo                                                                                                                                                                                               |                                                                                                                                                      |
+| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [React](app/react)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                  | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react)                                                    |
+| [Vue](app/vue)                                                 | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/)                                    | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue)                                                        |
+| [Angular](app/angular)                                         | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/)                                     | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular)                                            |
+| [Web components](app/web-components)                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components)                               |
+| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                                                                                                                                  | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)  |
+| [HTML](app/html)                                               | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/)                                  | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html)                                                     |
+| [Ember](app/ember)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/)                                         | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember)                                                  |
+| [Svelte](app/svelte)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte)                                               |
+| [Preact](app/preact)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact)                                               |
+| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                                                                                                                                  | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)     |
+| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                    |

 ### Sub Projects

--- a/RELEASES.md
+++ b/RELEASES.md
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
 these bugs get addressed.

 For every non-PATCH release, we nominate a small number of bugs that must be
-addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
+addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).

 Adding bugs to the milestone helps people looking for good ways to contribute,
 or to understand what is blocking the release so they can actually do something
-about it. Discussion about which bugs are critical happens in the `#maintenance`
-channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server

 If you're experiencing a bug, the best way to make sure that it gets attention
 is to upvote it by adding a "thumbs-up" reaction in Github. This way important
--- a/SECURITY.md
+++ b/SECURITY.md
@ -2,9 +2,9 @@

 ## Supported Versions

-| Version    | Supported          |
-| ---------- | ------------------ |
-| 6.3, 6.4   | :white_check_mark: |
+| Version         | Supported          |
+| --------------- | ------------------ |
+| 6.3, 6.4, 6.5   | :white_check_mark: |

 ## Reporting a Vulnerability

--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -45,14 +45,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/channels": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/channels": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/theming": "6.5.0-rc.1",
    "axe-core": "^4.2.0",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -81,7 +81,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Accessibility",
--- a/addons/a11y/src/components/VisionSimulator.test.tsx
+++ b/addons/a11y/src/components/VisionSimulator.test.tsx
@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { VisionSimulator, baseList } from './VisionSimulator';
+
+const getOptionByNameAndPercentage = (option: string, percentage: number) =>
+  screen.getByText(
+    (content, element) =>
+      content !== '' &&
+      element.textContent === option &&
+      (percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
+  );
+
+function ThemedVisionSimulator() {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <VisionSimulator />
+    </ThemeProvider>
+  );
+}
+
+describe('Vision Simulator', () => {
+  it('should render tool button', async () => {
+    // when
+    render(<ThemedVisionSimulator />);
+
+    // then
+    // waitFor because WithTooltip is a lazy component
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+  });
+
+  it.skip('should display tooltip on click', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+
+    // when
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+
+    // then
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+    baseList.forEach(({ name, percentage }) =>
+      expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
+    );
+  });
+
+  it.skip('should set filter', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+
+    // when
+    fireEvent.click(screen.getByText('blurred vision'));
+
+    // then
+    // eslint-disable-next-line no-undef
+    const rule = Object.values(document.styleSheets)
+      .filter(({ cssRules }) => cssRules)
+      .map(({ cssRules }) => Object.values(cssRules))
+      .flat()
+      .find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
+
+    expect(rule).toBeDefined();
+    expect(rule.style.filter).toBe('blur(2px)');
+  });
+});
--- a/addons/a11y/src/components/VisionSimulator.tsx
+++ b/addons/a11y/src/components/VisionSimulator.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

@ -6,32 +6,37 @@ import { Filters } from './ColorFilters';

 const iframeId = 'storybook-preview-iframe';

-const baseList = [
-  'blurred vision',
-  'deuteranomaly',
-  'deuteranopia',
-  'protanomaly',
-  'protanopia',
-  'tritanomaly',
-  'tritanopia',
-  'achromatomaly',
-  'achromatopsia',
-  'grayscale',
-] as const;
+interface Option {
+  name: string;
+  percentage?: number;
+}

-type Filter = typeof baseList[number] | null;
+export const baseList = [
+  { name: 'blurred vision', percentage: 22.9 },
+  { name: 'deuteranomaly', percentage: 2.7 },
+  { name: 'deuteranopia', percentage: 0.56 },
+  { name: 'protanomaly', percentage: 0.66 },
+  { name: 'protanopia', percentage: 0.59 },
+  { name: 'tritanomaly', percentage: 0.01 },
+  { name: 'tritanopia', percentage: 0.016 },
+  { name: 'achromatomaly', percentage: 0.00001 },
+  { name: 'achromatopsia', percentage: 0.0001 },
+  { name: 'grayscale' },
+] as Option[];

-const getFilter = (filter: Filter) => {
-  if (!filter) {
+type Filter = Option | null;
+
+const getFilter = (filterName: string) => {
+  if (!filterName) {
    return 'none';
  }
-  if (filter === 'blurred vision') {
+  if (filterName === 'blurred vision') {
    return 'blur(2px)';
  }
-  if (filter === 'grayscale') {
+  if (filterName === 'grayscale') {
    return 'grayscale(100%)';
  }
-  return `url('#${filter}')`;
+  return `url('#${filterName}')`;
 };

 const Hidden = styled.div(() => ({
@ -42,7 +47,7 @@ const Hidden = styled.div(() => ({
  },
 }));

-const ColorIcon = styled.span<{ filter: Filter }>(
+const ColorIcon = styled.span<{ filter: string }>(
  {
    background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
    borderRadius: '1rem',
@ -66,6 +71,20 @@ export interface Link {
  onClick: () => void;
 }

+const Column = styled.span({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Title = styled.span({
+  textTransform: 'capitalize',
+});
+
+const Description = styled.span(({ theme }) => ({
+  fontSize: 11,
+  color: theme.textMutedColor,
+}));
+
 const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
  ...(active !== null
    ? [
@ -80,27 +99,34 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
        },
      ]
    : []),
-  ...baseList.map((i) => ({
-    id: i,
-    title: i.charAt(0).toUpperCase() + i.slice(1),
-    onClick: () => {
-      set(i);
-    },
-    right: <ColorIcon filter={i} />,
-    active: active === i,
-  })),
+  ...baseList.map((i) => {
+    const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
+    return {
+      id: i.name,
+      title: (
+        <Column>
+          <Title>{i.name}</Title>
+          {description && <Description>{description}</Description>}
+        </Column>
+      ),
+      onClick: () => {
+        set(i);
+      },
+      right: <ColorIcon filter={i.name} />,
+      active: active === i,
+    };
+  }),
 ];

-export const VisionSimulator: FunctionComponent = () => {
+export const VisionSimulator = () => {
  const [filter, setFilter] = useState<Filter>(null);
-
  return (
    <>
      {filter && (
        <Global
          styles={{
            [`#${iframeId}`]: {
-              filter: getFilter(filter),
+              filter: getFilter(filter.name),
            },
          }}
        />
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -41,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
@ -56,7 +56,7 @@
    "prop-types": "^15.7.2",
    "react-inspector": "^5.1.0",
    "regenerator-runtime": "^0.13.7",
-    "telejson": "^5.3.3",
+    "telejson": "^6.0.8",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2",
    "uuid-browser": "^3.1.0"
@ -80,7 +80,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Actions",
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -45,13 +45,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -77,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Backgrounds",
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -45,15 +45,15 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
@ -73,7 +73,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/manager.js",
  "storybook": {
    "displayName": "Controls",
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -59,20 +59,20 @@
    "@babel/preset-env": "^7.12.11",
    "@jest/transform": "^26.6.2",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/mdx1-csf": "canary",
-    "@storybook/node-logger": "6.5.0-beta.7",
-    "@storybook/postinstall": "6.5.0-beta.7",
-    "@storybook/preview-web": "6.5.0-beta.7",
-    "@storybook/source-loader": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/mdx1-csf": "^0.0.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/postinstall": "6.5.0-rc.1",
+    "@storybook/preview-web": "6.5.0-rc.1",
+    "@storybook/source-loader": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "babel-loader": "^8.0.0",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
@ -86,11 +86,11 @@
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/mdx2-csf": "canary",
+    "@storybook/mdx2-csf": "^0.0.3",
    "@types/util-deprecate": "^1.0.0"
  },
  "peerDependencies": {
-    "@storybook/mdx2-csf": "*",
+    "@storybook/mdx2-csf": "^0.0.3",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
@ -108,7 +108,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Docs",
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -39,25 +39,25 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "6.5.0-beta.7",
-    "@storybook/addon-backgrounds": "6.5.0-beta.7",
-    "@storybook/addon-controls": "6.5.0-beta.7",
-    "@storybook/addon-docs": "6.5.0-beta.7",
-    "@storybook/addon-measure": "6.5.0-beta.7",
-    "@storybook/addon-outline": "6.5.0-beta.7",
-    "@storybook/addon-toolbars": "6.5.0-beta.7",
-    "@storybook/addon-viewport": "6.5.0-beta.7",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
-    "@storybook/node-logger": "6.5.0-beta.7",
+    "@storybook/addon-actions": "6.5.0-rc.1",
+    "@storybook/addon-backgrounds": "6.5.0-rc.1",
+    "@storybook/addon-controls": "6.5.0-rc.1",
+    "@storybook/addon-docs": "6.5.0-rc.1",
+    "@storybook/addon-measure": "6.5.0-rc.1",
+    "@storybook/addon-outline": "6.5.0-rc.1",
+    "@storybook/addon-toolbars": "6.5.0-rc.1",
+    "@storybook/addon-viewport": "6.5.0-rc.1",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.5.0-beta.7",
+    "@storybook/vue": "6.5.0-rc.1",
    "@types/jest": "^26.0.16",
    "@types/webpack-env": "^1.16.0"
  },
@ -120,6 +120,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js"
 }
--- a/addons/interactions/README.md
+++ b/addons/interactions/README.md
@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
 `@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.

 ```js
+import { Button } from './Button';
 import { expect } from '@storybook/jest';
 import { within, userEvent } from '@storybook/testing-library';

 export default {
  title: 'Button',
+  component: Button,
  argTypes: {
    onClick: { action: true },
  },
 };

-export const Demo = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-    await expect(args.onClick).toHaveBeenCalled();
-  },
+const Template = (args) => <Button {...args} />;
+
+export const Demo = Template.bind({});
+Demo.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).toHaveBeenCalled();
 };
 ```

--- a/addons/interactions/package.json
+++ b/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -42,15 +42,15 @@
  },
  "dependencies": {
    "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/instrumenter": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/instrumenter": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "jest-mock": "^27.0.6",
@ -59,7 +59,7 @@
  },
  "devDependencies": {
    "@storybook/jest": "^0.0.5",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
    "formik": "^2.2.9"
  },
  "peerDependencies": {
@ -77,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Interactions",
--- a/addons/interactions/src/Panel.stories.tsx
+++ b/addons/interactions/src/Panel.stories.tsx
@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';

-import { getCall } from './mocks';
+import { getCalls, getInteractions } from './mocks';
 import { AddonPanelPure } from './Panel';
 import SubnavStories from './components/Subnav/Subnav.stories';

@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
  overflow: 'auto',
 }));

+const interactions = getInteractions(CallStates.DONE);
+
 export default {
  title: 'Addons/Interactions/Panel',
  component: AddonPanelPure,
@ -34,10 +36,10 @@ export default {
    layout: 'fullscreen',
  },
  args: {
-    calls: new Map(),
+    calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
    controls: SubnavStories.args.controls,
    controlStates: SubnavStories.args.controlStates,
-    interactions: [getCall(CallStates.DONE)],
+    interactions,
    fileName: 'addon-interactions.stories.tsx',
    hasException: false,
    isPlaying: false,
@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;

 export const Passing: Story = {
  args: {
-    interactions: [getCall(CallStates.DONE)],
+    interactions: getInteractions(CallStates.DONE),
  },
 };

 export const Paused: Story = {
  args: {
    isPlaying: true,
-    interactions: [getCall(CallStates.WAITING)],
+    interactions: getInteractions(CallStates.WAITING),
    controlStates: {
      debugger: true,
      start: false,
@ -68,20 +70,21 @@ export const Paused: Story = {
      next: true,
      end: true,
    },
+    pausedAt: interactions[interactions.length - 1].id,
  },
 };

 export const Playing: Story = {
  args: {
    isPlaying: true,
-    interactions: [getCall(CallStates.ACTIVE)],
+    interactions: getInteractions(CallStates.ACTIVE),
  },
 };

 export const Failed: Story = {
  args: {
    hasException: true,
-    interactions: [getCall(CallStates.ERROR)],
+    interactions: getInteractions(CallStates.ERROR),
  },
 };

--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@ -28,10 +28,16 @@ interface InteractionsPanelProps {
  active: boolean;
  controls: Controls;
  controlStates: ControlStates;
-  interactions: (Call & { status?: CallStates })[];
+  interactions: (Call & {
+    status?: CallStates;
+    childCallIds: Call['id'][];
+    isCollapsed: boolean;
+    toggleCollapsed: () => void;
+  })[];
  fileName?: string;
  hasException?: boolean;
  isPlaying?: boolean;
+  pausedAt?: Call['id'];
  calls: Map<string, any>;
  endRef?: React.Ref<HTMLDivElement>;
  onScrollToEnd?: () => void;
@ -66,6 +72,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
    fileName,
    hasException,
    isPlaying,
+    pausedAt,
    onScrollToEnd,
    endRef,
    isRerunAnimating,
@ -87,15 +94,21 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
          setIsRerunAnimating={setIsRerunAnimating}
        />
      )}
-      {interactions.map((call) => (
-        <Interaction
-          key={call.id}
-          call={call}
-          callsById={calls}
-          controls={controls}
-          controlStates={controlStates}
-        />
-      ))}
+      <div>
+        {interactions.map((call) => (
+          <Interaction
+            key={call.id}
+            call={call}
+            callsById={calls}
+            controls={controls}
+            controlStates={controlStates}
+            childCallIds={call.childCallIds}
+            isCollapsed={call.isCollapsed}
+            toggleCollapsed={call.toggleCollapsed}
+            pausedAt={pausedAt}
+          />
+        ))}
+      </div>
      <div ref={endRef} />
      {!isPlaying && interactions.length === 0 && (
        <Placeholder>
@ -116,17 +129,17 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
 export const Panel: React.FC<AddonPanelProps> = (props) => {
  const [storyId, setStoryId] = React.useState<StoryId>();
  const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
+  const [pausedAt, setPausedAt] = React.useState<Call['id']>();
  const [isPlaying, setPlaying] = React.useState(false);
  const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
  const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
+  const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
+  const [log, setLog] = React.useState<LogItem[]>([]);

  // Calls are tracked in a ref so we don't needlessly rerender.
  const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
  const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);

-  const [log, setLog] = React.useState<LogItem[]>([]);
-  const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
-
  const endRef = React.useRef();
  React.useEffect(() => {
    let observer: IntersectionObserver;
@ -146,10 +159,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
      [EVENTS.SYNC]: (payload) => {
        setControlStates(payload.controlStates);
        setLog(payload.logItems);
+        setPausedAt(payload.pausedAt);
      },
      [STORY_RENDER_PHASE_CHANGED]: (event) => {
        setStoryId(event.storyId);
        setPlaying(event.newPhase === 'playing');
+        setPausedAt(undefined);
      },
    },
    []
@ -177,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
  const showStatus = log.length > 0 && !isPlaying;
  const hasException = log.some((item) => item.status === CallStates.ERROR);

+  const interactions = React.useMemo(() => {
+    const callsById = new Map<Call['id'], Call>();
+    const childCallMap = new Map<Call['id'], Call['id'][]>();
+    return log
+      .filter(({ callId, parentId }) => {
+        if (!parentId) return true;
+        childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
+        return !collapsed.has(parentId);
+      })
+      .map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
+      .map((call) => {
+        const status =
+          call.status === CallStates.ERROR &&
+          callsById.get(call.parentId)?.status === CallStates.ACTIVE
+            ? CallStates.ACTIVE
+            : call.status;
+        callsById.set(call.id, { ...call, status });
+        return {
+          ...call,
+          status,
+          childCallIds: childCallMap.get(call.id),
+          isCollapsed: collapsed.has(call.id),
+          toggleCollapsed: () =>
+            setCollapsed((ids) => {
+              if (ids.has(call.id)) ids.delete(call.id);
+              else ids.add(call.id);
+              return new Set(ids);
+            }),
+        };
+      });
+  }, [log, collapsed]);
+
  return (
    <React.Fragment key="interactions">
      <TabStatus>
@ -191,6 +238,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
        fileName={fileName}
        hasException={hasException}
        isPlaying={isPlaying}
+        pausedAt={pausedAt}
        endRef={endRef}
        onScrollToEnd={scrollTarget && scrollToTarget}
        isRerunAnimating={isRerunAnimating}
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@ -35,6 +35,12 @@ export const Demo: CSF2Story = (args) => (
 Demo.play = async ({ args, canvasElement }) => {
  await userEvent.click(within(canvasElement).getByRole('button'));
  await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
+  await expect([{ name: 'John', age: 42 }]).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({ name: 'John' }),
+      expect.objectContaining({ age: 42 }),
+    ])
+  );
 };

 export const FindBy: CSF2Story = (args) => {
@ -131,7 +137,7 @@ export const StandardEmailFailed: CSF3Story = {
    await userEvent.click(canvas.getByRole('button', { name: /create account/i }));

    await canvas.findByText('Please enter a correctly formatted email address');
-    expect(args.onSubmit).not.toHaveBeenCalled();
+    await expect(args.onSubmit).not.toHaveBeenCalled();
  },
 };

--- a/addons/interactions/src/components/Interaction/Interaction.stories.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
-import { getCall } from '../../mocks';
+import { getCalls } from '../../mocks';

 import { Interaction } from './Interaction';
 import SubnavStories from '../Subnav/Subnav.stories';
@ -13,7 +13,7 @@ export default {
  title: 'Addons/Interactions/Interaction',
  component: Interaction,
  args: {
-    callsById: new Map(),
+    callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
    controls: SubnavStories.args.controls,
    controlStates: SubnavStories.args.controlStates,
  },
@ -21,25 +21,31 @@ export default {

 export const Active: Story = {
  args: {
-    call: getCall(CallStates.ACTIVE),
+    call: getCalls(CallStates.ACTIVE).slice(-1)[0],
  },
 };

 export const Waiting: Story = {
  args: {
-    call: getCall(CallStates.WAITING),
+    call: getCalls(CallStates.WAITING).slice(-1)[0],
  },
 };

 export const Failed: Story = {
  args: {
-    call: getCall(CallStates.ERROR),
+    call: getCalls(CallStates.ERROR).slice(-1)[0],
  },
 };

 export const Done: Story = {
  args: {
-    call: getCall(CallStates.DONE),
+    call: getCalls(CallStates.DONE).slice(-1)[0],
+  },
+};
+
+export const WithParent: Story = {
+  args: {
+    call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
  },
 };

--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
 import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@ -15,23 +16,55 @@ const MethodCallWrapper = styled.div(() => ({
  inlineSize: 'calc( 100% - 40px )',
 }));

-const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
-  call: Call;
-}>(({ theme, call }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  fontFamily: typography.fonts.base,
-  fontSize: 13,
-  ...(call.status === CallStates.ERROR && {
-    backgroundColor:
-      theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
+const RowContainer = styled('div', {
+  shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
+})<{ call: Call; pausedAt: Call['id'] }>(
+  ({ theme, call }) => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    borderBottom: `1px solid ${theme.appBorderColor}`,
+    fontFamily: typography.fonts.base,
+    fontSize: 13,
+    ...(call.status === CallStates.ERROR && {
+      backgroundColor:
+        theme.base === 'dark'
+          ? transparentize(0.93, theme.color.negative)
+          : theme.background.warning,
+    }),
+    paddingLeft: call.parentId ? 20 : 0,
  }),
+  ({ theme, call, pausedAt }) =>
+    pausedAt === call.id && {
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: -5,
+        zIndex: 1,
+        borderTop: '4.5px solid transparent',
+        borderLeft: `7px solid ${theme.color.warning}`,
+        borderBottom: '4.5px solid transparent',
+      },
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: -1,
+        zIndex: 1,
+        width: '100%',
+        borderTop: `1.5px solid ${theme.color.warning}`,
+      },
+    }
+);
+
+const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
+  display: 'flex',
+  '&:hover': disabled ? {} : { background: theme.background.hoverable },
 }));

 const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
  React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
 >(({ theme, disabled, call }) => ({
+  flex: 1,
  display: 'grid',
  background: 'none',
  border: 0,
@ -42,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
  padding: '8px 15px',
  textAlign: 'start',
  cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
-  '&:hover': disabled ? {} : { background: theme.background.hoverable },
  '&:focus-visible': {
    outline: 0,
    boxShadow: `inset 3px 0 0 0 ${
@ -55,45 +87,101 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
  },
 }));

-const RowMessage = styled('pre')({
-  margin: 0,
-  padding: '8px 10px 8px 30px',
+const RowActions = styled.div(({ theme }) => ({
+  padding: 6,
+}));
+
+export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
+  color: theme.color.mediumdark,
+  margin: '0 3px',
+}));
+
+const Note = styled(TooltipNote)(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+}));
+
+const RowMessage = styled('div')(({ theme }) => ({
+  padding: '8px 10px 8px 36px',
  fontSize: typography.size.s1,
-});
+  pre: {
+    margin: 0,
+    padding: 0,
+  },
+  p: {
+    color: theme.color.dark,
+  },
+}));
+
+const Exception = ({ exception }: { exception: Call['exception'] }) => {
+  if (exception.message.startsWith('expect(')) {
+    return <MatcherResult {...exception} />;
+  }
+  const paragraphs = exception.message.split('\n\n');
+  const more = paragraphs.length > 1;
+  return (
+    <RowMessage>
+      <pre>{paragraphs[0]}</pre>
+      {more && <p>See the full stack trace in the browser console.</p>}
+    </RowMessage>
+  );
+};

 export const Interaction = ({
  call,
  callsById,
  controls,
  controlStates,
+  childCallIds,
+  isCollapsed,
+  toggleCollapsed,
+  pausedAt,
 }: {
  call: Call;
  callsById: Map<Call['id'], Call>;
  controls: Controls;
  controlStates: ControlStates;
+  childCallIds?: Call['id'][];
+  isCollapsed: boolean;
+  toggleCollapsed: () => void;
+  pausedAt?: Call['id'];
 }) => {
  const [isHovered, setIsHovered] = React.useState(false);
  return (
-    <RowContainer call={call}>
-      <RowLabel
-        call={call}
-        onClick={() => controls.goto(call.id)}
-        disabled={!controlStates.goto}
-        onMouseEnter={() => controlStates.goto && setIsHovered(true)}
-        onMouseLeave={() => controlStates.goto && setIsHovered(false)}
-      >
-        <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
-        <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
-          <MethodCall call={call} callsById={callsById} />
-        </MethodCallWrapper>
-      </RowLabel>
-      {call.status === CallStates.ERROR &&
-        call.exception &&
-        (call.exception.message.startsWith('expect(') ? (
-          <MatcherResult {...call.exception} />
-        ) : (
-          <RowMessage>{call.exception.message}</RowMessage>
-        ))}
+    <RowContainer call={call} pausedAt={pausedAt}>
+      <RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
+        <RowLabel
+          call={call}
+          onClick={() => controls.goto(call.id)}
+          disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
+          onMouseEnter={() => controlStates.goto && setIsHovered(true)}
+          onMouseLeave={() => controlStates.goto && setIsHovered(false)}
+        >
+          <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
+          <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
+            <MethodCall call={call} callsById={callsById} />
+          </MethodCallWrapper>
+        </RowLabel>
+        <RowActions>
+          {childCallIds?.length > 0 && (
+            <WithTooltip
+              hasChrome={false}
+              tooltip={
+                <Note
+                  note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
+                />
+              }
+            >
+              <StyledIconButton containsIcon onClick={toggleCollapsed}>
+                <Icons icon="listunordered" />
+              </StyledIconButton>
+            </WithTooltip>
+          )}
+        </RowActions>
+      </RowHeader>
+
+      {call.status === CallStates.ERROR && call.exception?.callId === call.id && (
+        <Exception exception={call.exception} />
+      )}
    </RowContainer>
  );
 };
--- a/addons/interactions/src/components/MatcherResult.tsx
+++ b/addons/interactions/src/components/MatcherResult.tsx
@ -50,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
    <pre
      style={{
        margin: 0,
-        padding: '8px 10px 8px 30px',
+        padding: '8px 10px 8px 36px',
        fontSize: typography.size.s1,
      }}
    >
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@ -27,7 +27,6 @@ export default {
  },
 };

-class FooBar {}
 export const Args = () => (
  <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
    <Node value={null} />
@ -56,37 +55,49 @@ export const Args = () => (
      }}
      showObjectInspector
    />
-    <Node value={new FooBar()} />
-    <Node value={function goFaster() {}} />
+    <Node value={{ __class__: { name: 'FooBar' } }} />
+    <Node value={{ __function__: { name: 'goFaster' } }} />
    <Node value={{ __element__: { localName: 'hr' } }} />
    <Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
    <Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
    <Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
    <Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
-    <Node value={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
-    <Node value={new Date(1600000000000)} />
-    <Node value={new Date(1600000000123)} />
-    <Node value={new EvalError()} />
-    <Node value={new SyntaxError("Can't do that")} />
-    <Node value={new TypeError("Cannot read property 'foo' of undefined")} />
-    <Node value={new ReferenceError('Invalid left-hand side in assignment')} />
    <Node
-      value={
-        new Error(
-          "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
-        )
-      }
+      value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
    />
-    <Node value={/hello/i} />
-    <Node value={new RegExp(`src(.*)\\.js$`)} />
-    {/* eslint-disable-next-line symbol-description */}
-    <Node value={Symbol()} />
-    <Node value={Symbol('Hello world')} />
+    <Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
+    <Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
+    <Node value={{ __error__: { name: 'EvalError', message: '' } }} />
+    <Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
+    <Node
+      value={{
+        __error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
+      }}
+    />
+    <Node
+      value={{
+        __error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
+      }}
+    />
+    <Node
+      value={{
+        __error__: {
+          name: 'Error',
+          message:
+            "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
+        },
+      }}
+    />
+    <Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
+    <Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
+    <Node value={{ __symbol__: { description: '' } }} />
+    <Node value={{ __symbol__: { description: 'Hello world' } }} />
  </div>
 );

 const calls: Call[] = [
  {
+    cursor: 0,
    id: '1',
    path: ['screen'],
    method: 'getByText',
@ -96,6 +107,7 @@ const calls: Call[] = [
    retain: false,
  },
  {
+    cursor: 1,
    id: '2',
    path: ['userEvent'],
    method: 'click',
@ -105,6 +117,7 @@ const calls: Call[] = [
    retain: false,
  },
  {
+    cursor: 2,
    id: '3',
    path: [],
    method: 'expect',
@ -114,6 +127,7 @@ const calls: Call[] = [
    retain: false,
  },
  {
+    cursor: 3,
    id: '4',
    path: [{ __callId__: '3' }, 'not'],
    method: 'toBe',
@ -123,15 +137,17 @@ const calls: Call[] = [
    retain: false,
  },
  {
+    cursor: 4,
    id: '5',
    path: ['jest'],
    method: 'fn',
    storyId: 'kind--story',
-    args: [function actionHandler() {}],
+    args: [{ __function__: { name: 'actionHandler' } }],
    interceptable: false,
    retain: false,
  },
  {
+    cursor: 5,
    id: '6',
    path: [],
    method: 'expect',
@ -141,20 +157,28 @@ const calls: Call[] = [
    retain: false,
  },
  {
+    cursor: 6,
    id: '7',
    path: ['expect'],
    method: 'stringMatching',
    storyId: 'kind--story',
-    args: [/hello/i],
+    args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
    interceptable: false,
    retain: false,
  },
  {
+    cursor: 7,
    id: '8',
    path: [{ __callId__: '6' }, 'not'],
    method: 'toHaveBeenCalledWith',
    storyId: 'kind--story',
-    args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
+    args: [
+      { __callId__: '7' },
+      [
+        { __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
+        { __symbol__: { description: 'Hello world' } },
+      ],
+    ],
    interceptable: false,
    retain: false,
  },
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@ -111,32 +111,34 @@ export const Node = ({
      return <NullNode {...props} />;
    case value === undefined:
      return <UndefinedNode {...props} />;
+    case Array.isArray(value):
+      return <ArrayNode {...props} value={value} callsById={callsById} />;
    case typeof value === 'string':
-      return <StringNode value={value} {...props} />;
+      return <StringNode {...props} value={value} />;
    case typeof value === 'number':
-      return <NumberNode value={value} {...props} />;
+      return <NumberNode {...props} value={value} />;
    case typeof value === 'boolean':
-      return <BooleanNode value={value} {...props} />;
-    case typeof value === 'function':
-      return <FunctionNode value={value} {...props} />;
-    case value instanceof Array:
-      return <ArrayNode value={value} {...props} />;
-    case value instanceof Date:
-      return <DateNode value={value} {...props} />;
-    case value instanceof Error:
-      return <ErrorNode value={value} {...props} />;
-    case value instanceof RegExp:
-      return <RegExpNode value={value} {...props} />;
+      return <BooleanNode {...props} value={value} />;
+
+    /* eslint-disable no-underscore-dangle */
+    case Object.prototype.hasOwnProperty.call(value, '__date__'):
+      return <DateNode {...props} {...value.__date__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__error__'):
+      return <ErrorNode {...props} {...value.__error__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
+      return <RegExpNode {...props} {...value.__regexp__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__function__'):
+      return <FunctionNode {...props} {...value.__function__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
+      return <SymbolNode {...props} {...value.__symbol__} />;
    case Object.prototype.hasOwnProperty.call(value, '__element__'):
-      // eslint-disable-next-line no-underscore-dangle
-      return <ElementNode value={value.__element__} {...props} />;
+      return <ElementNode {...props} {...value.__element__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__class__'):
+      return <ClassNode {...props} {...value.__class__} />;
    case Object.prototype.hasOwnProperty.call(value, '__callId__'):
-      // eslint-disable-next-line no-underscore-dangle
      return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
-    case typeof value === 'object' &&
-      value.constructor?.name &&
-      value.constructor?.name !== 'Object':
-      return <ClassNode value={value} {...props} />;
+    /* eslint-enable no-underscore-dangle */
+
    case Object.prototype.toString.call(value) === '[object Object]':
      return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
    default:
@ -189,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
  );
 };

-export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
+export const ArrayNode = ({
+  value,
+  nested = false,
+  callsById,
+}: {
+  value: any[];
+  nested?: boolean;
+  callsById?: Map<Call['id'], Call>;
+}) => {
  const colors = useThemeColors();
  if (nested) {
    return <span style={{ color: colors.base }}>[…]</span>;
  }
-  const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
+  const nodes = value
+    .slice(0, 3)
+    .map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
  const nodelist = interleave(nodes, <span>, </span>);
  if (value.length <= 3) {
    return <span style={{ color: colors.base }}>[{nodelist}]</span>;
@ -263,18 +275,27 @@ export const ObjectNode = ({
  );
 };

-export const ClassNode = ({ value }: { value: Record<string, any> }) => {
+export const ClassNode = ({ name }: { name: string }) => {
  const colors = useThemeColors();
-  return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
+  return <span style={{ color: colors.instance }}>{name}</span>;
 };

-export const FunctionNode = ({ value }: { value: Function }) => {
+export const FunctionNode = ({ name }: { name: string }) => {
  const colors = useThemeColors();
-  return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
+  return name ? (
+    <span style={{ color: colors.function }}>{name}</span>
+  ) : (
+    <span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
+  );
 };

-export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
-  const { prefix, localName, id, classNames = [], innerText } = value;
+export const ElementNode = ({
+  prefix,
+  localName,
+  id,
+  classNames = [],
+  innerText,
+}: ElementRef['__element__']) => {
  const name = prefix ? `${prefix}:${localName}` : localName;
  const colors = useThemeColors();
  return (
@ -309,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
  );
 };

-export const DateNode = ({ value }: { value: Date }) => {
-  const [date, time, ms] = value.toISOString().split(/[T.Z]/);
+export const DateNode = ({ value }: { value: string }) => {
+  const [date, time, ms] = value.split(/[T.Z]/);
  const colors = useThemeColors();
  return (
    <span style={{ whiteSpace: 'nowrap', color: colors.date }}>
@ -323,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
  );
 };

-export const ErrorNode = ({ value }: { value: Error }) => {
+export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
  const colors = useThemeColors();
  return (
    <span style={{ color: colors.error.name }}>
-      {value.name}
-      {value.message && ': '}
-      {value.message && (
-        <span
-          style={{ color: colors.error.message }}
-          title={value.message.length > 50 ? value.message : ''}
-        >
-          {ellipsize(value.message, 50)}
+      {name}
+      {message && ': '}
+      {message && (
+        <span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
+          {ellipsize(message, 50)}
        </span>
      )}
    </span>
  );
 };

-export const RegExpNode = ({ value }: { value: RegExp }) => {
+export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
  const colors = useThemeColors();
  return (
    <span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
-      /<span style={{ color: colors.regex.source }}>{value.source}</span>/{value.flags}
+      /<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
    </span>
  );
 };

-export const SymbolNode = ({ value }: { value: symbol }) => {
+export const SymbolNode = ({ description }: { description: string }) => {
  const colors = useThemeColors();
  return (
    <span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
      Symbol(
-      {value.description && (
-        <span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
-      )}
-      )
+      {description && <span style={{ color: colors.meta }}>"{description}"</span>})
    </span>
  );
 };
--- a/addons/interactions/src/components/Subnav/Subnav.stories.tsx
+++ b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
@ -12,6 +12,7 @@ export default {
      goto: action('goto'),
      next: action('next'),
      end: action('end'),
+      rerun: action('rerun'),
    },
    controlStates: {
      debugger: true,
--- a/addons/interactions/src/mocks/index.ts
+++ b/addons/interactions/src/mocks/index.ts
@ -1,31 +1,122 @@
 import { CallStates, Call } from '@storybook/instrumenter';

-export const getCall = (status: CallStates): Call => {
-  const defaultData = {
-    id: 'addons-interactions-accountform--standard-email-filled [3] change',
-    cursor: 0,
-    path: ['fireEvent'],
-    method: 'change',
-    storyId: 'addons-interactions-accountform--standard-email-filled',
-    args: [
-      {
-        __callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
-        retain: false,
-      },
-      {
-        target: {
-          value: 'michael@chromatic.com',
-        },
-      },
-    ],
-    interceptable: true,
-    retain: false,
-    status,
-  };
+export const getCalls = (finalStatus: CallStates) => {
+  const calls: Call[] = [
+    {
+      id: 'story--id [3] within',
+      storyId: 'story--id',
+      cursor: 3,
+      path: [],
+      method: 'within',
+      args: [{ __element__: { localName: 'div', id: 'root' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [4] findByText',
+      storyId: 'story--id',
+      cursor: 4,
+      path: [{ __callId__: 'story--id [3] within' }],
+      method: 'findByText',
+      args: ['Click'],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [5] click',
+      storyId: 'story--id',
+      cursor: 5,
+      path: ['userEvent'],
+      method: 'click',
+      args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 6,
+      path: [],
+      method: 'waitFor',
+      args: [{ __function__: { name: '' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [0] expect',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 1,
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleSubmit' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [1] stringMatching',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 2,
+      path: ['expect'],
+      method: 'stringMatching',
+      args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 3,
+      path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+      method: 'toHaveBeenCalledWith',
+      args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [7] expect',
+      storyId: 'story--id',
+      cursor: 7,
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleReset' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [8] toHaveBeenCalled',
+      storyId: 'story--id',
+      cursor: 8,
+      path: [{ __callId__: 'story--id [7] expect' }, 'not'],
+      method: 'toHaveBeenCalled',
+      args: [],
+      interceptable: true,
+      retain: false,
+      status: finalStatus,
+    },
+  ];

-  const overrides = CallStates.ERROR
-    ? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
-    : {};
+  if (finalStatus === CallStates.ERROR) {
+    calls[calls.length - 1].exception = {
+      name: 'Error',
+      stack: '',
+      message: 'Oops!',
+      callId: calls[calls.length - 1].id,
+    };
+  }

-  return { ...defaultData, ...overrides };
+  return calls;
 };
+
+export const getInteractions = (finalStatus: CallStates) =>
+  getCalls(finalStatus).filter((call) => call.interceptable);
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -47,12 +47,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
@ -77,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Jest",
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -41,11 +41,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/router": "6.5.0-beta.7",
+    "@storybook/router": "6.5.0-rc.1",
    "@types/qs": "^6.9.5",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Links",
--- a/addons/measure/package.json
+++ b/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -44,11 +44,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0"
@ -71,7 +71,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Measure",
--- a/addons/outline/package.json
+++ b/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -47,11 +47,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -76,7 +76,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Outline",
--- a/addons/storyshots/storyshots-core/README.md
+++ b/addons/storyshots/storyshots-core/README.md
@ -470,7 +470,7 @@ Whenever you change your data requirements by adding (and rendering) or (acciden

 ## Using a custom directory

-Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/workflows/snapshot-testing).
+Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/writing-tests/snapshot-testing).

 ## Options

@ -654,7 +654,7 @@ This option needs to be set if either:

 ### `serializer` (deprecated)

-Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](`snapshotSerializers`) which should be used instead.
+Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](#snapshotserializers) which should be used instead.

 ```js
 import initStoryshots from '@storybook/addon-storyshots';
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -45,12 +45,12 @@
  },
  "dependencies": {
    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-client": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/client-api": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-client": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
    "@types/glob": "^7.1.3",
    "@types/jest": "^26.0.16",
@ -70,11 +70,11 @@
    "@angular/core": "^11.2.0",
    "@angular/platform-browser-dynamic": "^11.2.0",
    "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "6.5.0-beta.7",
-    "@storybook/angular": "6.5.0-beta.7",
-    "@storybook/react": "6.5.0-beta.7",
-    "@storybook/vue": "6.5.0-beta.7",
-    "@storybook/vue3": "6.5.0-beta.7",
+    "@storybook/addon-docs": "6.5.0-rc.1",
+    "@storybook/angular": "6.5.0-rc.1",
+    "@storybook/react": "6.5.0-rc.1",
+    "@storybook/vue": "6.5.0-rc.1",
+    "@storybook/vue3": "6.5.0-rc.1",
    "babel-loader": "^8.0.0",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
@ -151,7 +151,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/addons/storyshots/storyshots-core/src/test-bodies.ts
+++ b/addons/storyshots/storyshots-core/src/test-bodies.ts
@ -1,15 +1,21 @@
 import 'jest-specific-snapshot';
-import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions';
+import {
+  StoryshotsTestMethod,
+  TestMethodOptions,
+  StoryshotsOptions,
+} from './api/StoryshotsOptions';

 const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply);
 const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);

+type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, 'renderer' | 'serializer'> | Function;
+
 type SnapshotsWithOptionsReturnType = (
  options: Pick<TestMethodOptions, 'story' | 'context' | 'renderTree' | 'snapshotFileName'>
 ) => any;

 export function snapshotWithOptions(
-  options: { renderer?: any; serializer?: any } | Function = {}
+  options: SnapshotsWithOptionsArgType = {}
 ): SnapshotsWithOptionsReturnType {
  return ({ story, context, renderTree, snapshotFileName }) => {
    const result = renderTree(story, context, optionsOrCallOptions(options, story));
@ -44,7 +50,9 @@ export function snapshotWithOptions(
  };
 }

-export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
+export function multiSnapshotWithOptions(
+  options: SnapshotsWithOptionsArgType = {}
+): StoryshotsTestMethod {
  return ({ story, context, renderTree, stories2snapsConverter }) => {
    const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
    return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -42,7 +42,7 @@
  "dependencies": {
    "@axe-core/puppeteer": "^4.2.0",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "6.5.0-beta.7",
+    "@storybook/node-logger": "6.5.0-rc.1",
    "@types/jest-image-snapshot": "^4.1.3",
    "core-js": "^3.8.2",
    "jest-image-snapshot": "^4.3.0",
@ -50,11 +50,12 @@
  },
  "devDependencies": {
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@types/puppeteer": "^5.4.0"
+    "@types/puppeteer": "^5.4.0",
+    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "6.5.0-beta.7",
-    "puppeteer": "^2.0.0 || ^3.0.0"
+    "@storybook/addon-storyshots": "6.5.0-rc.1",
+    "puppeteer": ">=2.0.0"
  },
  "peerDependenciesMeta": {
    "puppeteer": {
@ -64,5 +65,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74"
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
 }
--- a/addons/storyshots/storyshots-puppeteer/src/config.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/config.ts
@ -1,11 +1,7 @@
 import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import {
-  Base64ScreenShotOptions,
-  Browser,
-  DirectNavigationOptions,
-  Page,
-  ElementHandle,
-} from 'puppeteer';
+import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer';
+
+type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';

 export interface Context {
  kind: string;
@ -20,6 +16,16 @@ interface Options {
  url: string;
 }

+interface Base64ScreenShotOptions extends ScreenshotOptions {
+  encoding: 'base64';
+}
+
+interface DirectNavigationOptions {
+  referer?: string;
+  timeout?: number;
+  waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
+}
+
 export interface CommonConfig {
  storybookUrl: string;
  chromeExecutablePath: string;
@ -40,7 +46,7 @@ export interface ImageSnapshotConfig extends CommonConfig {
  getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
  getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
  beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
-  afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
+  afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
 }

 export interface AxeConfig extends CommonConfig {
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -41,18 +41,18 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/router": "6.5.0-beta.7",
-    "@storybook/source-loader": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/router": "6.5.0-rc.1",
+    "@storybook/source-loader": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "estraverse": "^5.2.0",
    "loader-utils": "^2.0.0",
    "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
@ -74,7 +74,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Storysource",
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -45,11 +45,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "regenerator-runtime": "^0.13.7"
  },
@ -68,7 +68,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/manager.js",
  "storybook": {
    "displayName": "Toolbars",
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -42,12 +42,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/components": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
-    "@storybook/theming": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -69,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/preview.js",
  "storybook": {
    "displayName": "Viewport",
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,17 +45,17 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
-    "@storybook/core-events": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/node-logger": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
    "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
@ -75,7 +75,7 @@
    "read-pkg-up": "^7.0.1",
    "regenerator-runtime": "^0.13.7",
    "sass-loader": "^10.1.0",
-    "telejson": "^5.3.3",
+    "telejson": "^6.0.8",
    "ts-dedent": "^2.0.0",
    "ts-loader": "^8.0.14",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
@ -137,5 +137,5 @@
    "access": "public"
  },
  "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74"
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
 }
--- a/app/angular/setup-jest.ts
+++ b/app/angular/setup-jest.ts
@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';

 global.EventSource = class {} as any;
--- a/app/angular/src/builders/build-storybook/index.spec.ts
+++ b/app/angular/src/builders/build-storybook/index.spec.ts
@ -142,7 +142,7 @@ describe('Build Storybook Builder', () => {
  });

  it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(new Error());
+    buildStandaloneMock.mockRejectedValue(true);

    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
      browserTarget: 'angular-cli:build-2',
--- a/app/angular/src/builders/start-storybook/index.spec.ts
+++ b/app/angular/src/builders/start-storybook/index.spec.ts
@ -124,7 +124,7 @@ describe('Start Storybook Builder', () => {
  });

  it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(new Error());
+    buildStandaloneMock.mockRejectedValue(true);

    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
      browserTarget: 'angular-cli:build-2',
--- a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
@ -22,6 +22,7 @@ describe('RendererFactory', () => {
    rootTargetDOMNode = global.document.getElementById('root');
    rootDocstargetDOMNode = global.document.getElementById('root-docs');
    (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
+    jest.spyOn(console, 'log').mockImplementation(() => {});
  });

  afterEach(() => {
--- a/app/angular/src/client/preview/angular-beta/StorybookModule.ts
+++ b/app/angular/src/client/preview/angular-beta/StorybookModule.ts
@ -7,7 +7,7 @@ import deprecate from 'util-deprecate';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { storyPropsProvider } from './StorybookProvider';
 import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
-import { isDeclarable } from './utils/NgComponentAnalyzer';
+import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
 import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
 import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';

@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = (
    props
  );

+  const isStandalone = isStandaloneComponent(component);
  // Look recursively (deep) if the component is not already declared by an import module
  const requiresComponentDeclaration =
    isDeclarable(component) &&
@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = (
      component,
      moduleMetadata.declarations,
      moduleMetadata.imports
-    );
+    ) &&
+    !isStandalone;

  return {
    declarations: [
@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = (
      ComponentToInject,
      ...(moduleMetadata.declarations ?? []),
    ],
-    imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
+    imports: [
+      BrowserModule,
+      ...(isStandalone ? [component] : []),
+      ...(moduleMetadata.imports ?? []),
+    ],
    providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
    entryComponents: [...(moduleMetadata.entryComponents ?? [])],
    schemas: [...(moduleMetadata.schemas ?? [])],
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
@ -19,6 +19,7 @@ import {
  isComponent,
  isDeclarable,
  getComponentDecoratorMetadata,
+  isStandaloneComponent,
 } from './NgComponentAnalyzer';

 describe('getComponentInputsOutputs', () => {
@ -235,6 +236,46 @@ describe('isComponent', () => {
  });
 });

+describe('isStandaloneComponent', () => {
+  it('should return true with a Component with "standalone: true"', () => {
+    // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+    // Angular deps are updated to v14.x.x.
+    @Component({ standalone: true } as any)
+    class FooComponent {}
+
+    expect(isStandaloneComponent(FooComponent)).toEqual(true);
+  });
+
+  it('should return false with a Component with "standalone: false"', () => {
+    // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+    // Angular deps are updated to v14.x.x.
+    @Component({ standalone: false } as any)
+    class FooComponent {}
+
+    expect(isStandaloneComponent(FooComponent)).toEqual(false);
+  });
+
+  it('should return false with a Component without the "standalone" property', () => {
+    @Component({})
+    class FooComponent {}
+
+    expect(isStandaloneComponent(FooComponent)).toEqual(false);
+  });
+
+  it('should return false with simple class', () => {
+    class FooPipe {}
+
+    expect(isStandaloneComponent(FooPipe)).toEqual(false);
+  });
+
+  it('should return false with Directive', () => {
+    @Directive()
+    class FooDirective {}
+
+    expect(isStandaloneComponent(FooDirective)).toEqual(false);
+  });
+});
+
 describe('getComponentDecoratorMetadata', () => {
  it('should return Component with a Component', () => {
    @Component({ selector: 'foo' })
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type<unknown> => {
  return (decorators || []).some((d) => d instanceof Component);
 };

+export const isStandaloneComponent = (component: any): component is Type<unknown> => {
+  if (!component) {
+    return false;
+  }
+
+  const decorators = reflectionCapabilities.annotations(component);
+
+  // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+  // Angular deps are updated to v14.x.x.
+  return (decorators || []).some((d) => d instanceof Component && (d as any).standalone);
+};
+
 /**
 * Returns all component decorator properties
 * is used to get all `@Input` and `@Output` Decorator
--- a/app/angular/src/server/mocks-ng-workspace/with-lib/projects/pattern-lib/tsconfig.lib.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-lib/projects/pattern-lib/tsconfig.lib.json
@ -2,6 +2,7 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
+    "baseUrl": ".",
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
--- a/app/angular/src/server/mocks-ng-workspace/without-projects-entry/projects/pattern-lib/tsconfig.lib.json
+++ b/app/angular/src/server/mocks-ng-workspace/without-projects-entry/projects/pattern-lib/tsconfig.lib.json
@ -2,6 +2,7 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
+    "baseUrl": ".",
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
--- a/app/ember/package.json
+++ b/app/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
  "bugs": {
@ -42,10 +42,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react": "16.14.0",
@ -67,6 +67,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/html/package.json
+++ b/app/html/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,13 +45,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/preview-web": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/preview-web": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
@ -76,6 +76,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/preact/package.json
+++ b/app/preact/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
@ -46,11 +46,11 @@
  },
  "dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
@ -76,6 +76,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/react/package.json
+++ b/app/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -49,16 +49,16 @@
    "@babel/preset-flow": "^7.12.1",
    "@babel/preset-react": "^7.12.10",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/node-logger": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
    "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
    "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/estree": "^0.0.51",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
@ -119,6 +119,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/react/src/client/docs/jsxDecorator.test.tsx
+++ b/app/react/src/client/docs/jsxDecorator.test.tsx
@ -284,4 +284,33 @@ describe('jsxDecorator', () => {
      '<div className="foo" />'
    );
  });
+
+  it('handles stories that trigger Suspense', async () => {
+    // if a story function uses a hook or other library that triggers suspense, it will throw a Promise until it is resolved
+    // and then it will return the story content after the promise is resolved
+    const storyFn = jest.fn();
+    storyFn
+      .mockImplementationOnce(() => {
+        throw Promise.resolve();
+      })
+      .mockImplementation(() => {
+        return <div>resolved args story</div>;
+      });
+    const jsx = '';
+    const context = makeContext('args', { __isArgsStory: true, jsx }, {});
+    expect(() => {
+      jsxDecorator(storyFn, context);
+    }).toThrow(Promise);
+    jsxDecorator(storyFn, context);
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockChannel.emit).toHaveBeenCalledTimes(2);
+    expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
+    expect(mockChannel.emit).nthCalledWith(
+      2,
+      SNIPPET_RENDERED,
+      'jsx-test--args',
+      '<div>\n  resolved args story\n</div>'
+    );
+  });
 });
--- a/app/react/src/client/docs/jsxDecorator.tsx
+++ b/app/react/src/client/docs/jsxDecorator.tsx
@ -177,7 +177,6 @@ export const jsxDecorator = (
 ) => {
  const channel = addons.getChannel();
  const skip = skipJsxRender(context);
-  const story = storyFn();

  let jsx = '';

@ -185,6 +184,7 @@ export const jsxDecorator = (
    if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
  });

+  const story = storyFn();
  // We only need to render JSX if the source block is actually going to
  // consume it. Otherwise it's just slowing us down.
  if (skip) {
--- a/app/react/src/client/docs/lib/inspection/acornParser.test.ts
+++ b/app/react/src/client/docs/lib/inspection/acornParser.test.ts
@ -148,7 +148,7 @@ describe('parse', () => {
    });

    it('support array', () => {
-      const result = parse("['bottom-left', 'botton-center', 'bottom-right']");
+      const result = parse("['bottom-left', 'bottom-center', 'bottom-right']");
      const inferredType = result.inferredType as InspectionArray;

      expect(inferredType.type).toBe(InspectionType.ARRAY);
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@ -147,4 +147,6 @@ export async function renderToDOM(
  }

  await renderElement(element, domElement);
+
+  return () => unmountElement(domElement);
 }
--- a/app/react/src/server/framework-preset-react-docs.test.ts
+++ b/app/react/src/server/framework-preset-react-docs.test.ts
@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
        presets: ['env', 'foo-preset'],
        overrides: [
          {
-            test: /\.(mjs|tsx?|jsx?)$/,
+            test: /\.(cjs|mjs|tsx?|jsx?)$/,
            plugins: [
              [
                babelPluginReactDocgenPath,
--- a/app/react/src/server/framework-preset-react-docs.ts
+++ b/app/react/src/server/framework-preset-react-docs.ts
@ -19,8 +19,9 @@ export async function babel(config: TransformOptions, options: Options) {
  return {
    ...config,
    overrides: [
+      ...(config?.overrides || []),
      {
-        test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+        test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
        plugins: [
          [
            require.resolve('babel-plugin-react-docgen'),
--- a/app/server/package.json
+++ b/app/server/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,15 +45,15 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/api": "6.5.0-beta.7",
-    "@storybook/client-api": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-api": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "6.5.0-beta.7",
-    "@storybook/preview-web": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/preview-web": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
@ -76,6 +76,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -46,14 +46,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/node-logger": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "loader-utils": "^2.0.0",
@ -83,6 +83,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/vue/package.json
+++ b/app/vue/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,13 +45,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
@ -86,6 +86,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/vue/src/client/preview/config.ts
+++ b/app/vue/src/client/preview/config.ts
@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';

 export const parameters = { framework: 'vue' };
--- a/app/vue/src/client/preview/render.ts
+++ b/app/vue/src/client/preview/render.ts
@ -22,7 +22,7 @@ const root = new Vue({
 });

 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
-  const { id, component: Component } = context;
+  const { id, component: Component, argTypes } = context;
  const component = Component as VueFramework['component'] & {
    __docgenInfo?: { displayName: string };
    props: Record<string, any>;
@ -49,7 +49,7 @@ export const render: ArgsStoryFn<VueFramework> = (props, context) => {
  }

  return {
-    props: component.props,
+    props: Object.keys(argTypes),
    components: { [componentName]: component },
    template: `<${componentName} v-bind="$props" />`,
  };
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
@ -83,6 +83,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/vue3/src/client/preview/config.ts
+++ b/app/vue3/src/client/preview/config.ts
@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';

 export const parameters = { framework: 'vue3' };
--- a/app/vue3/src/server/framework-preset-vue3.ts
+++ b/app/vue3/src/server/framework-preset-vue3.ts
@ -24,7 +24,7 @@ export function webpack(config: Configuration): Configuration {
          options: {},
        },
        {
-          test: /\.tsx?$/,
+          test: /\.ts$/,
          use: [
            {
              loader: require.resolve('ts-loader'),
@ -35,6 +35,19 @@ export function webpack(config: Configuration): Configuration {
            },
          ],
        },
+        {
+          test: /\.tsx$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+                // Note this is different from the `appendTsSuffixTo` above!
+                appendTsxSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+        },
      ],
    },
    resolve: {
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components",
-  "version": "6.5.0-beta.7",
+  "version": "6.5.0-rc.1",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit-html",
@ -50,15 +50,15 @@
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/preset-env": "^7.12.11",
-    "@storybook/addons": "6.5.0-beta.7",
-    "@storybook/client-api": "6.5.0-beta.7",
-    "@storybook/client-logger": "6.5.0-beta.7",
-    "@storybook/core": "6.5.0-beta.7",
-    "@storybook/core-common": "6.5.0-beta.7",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/client-api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/core": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.0-beta.7",
-    "@storybook/preview-web": "6.5.0-beta.7",
-    "@storybook/store": "6.5.0-beta.7",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/preview-web": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
    "@types/node": "^14.14.20 || ^16.0.0",
    "@types/webpack-env": "^1.16.0",
    "babel-plugin-bundled-import-meta": "^0.3.1",
@ -82,6 +82,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "14bb6d241c888cc3be6adba94c3e3a1ceddadf74",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/client/index.js"
 }
--- a/app/web-components/src/client/docs/sourceDecorator.test.ts
+++ b/app/web-components/src/client/docs/sourceDecorator.test.ts
@ -1,13 +1,13 @@
 import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map';
 import { addons, useEffect } from '@storybook/addons';
-import type { StoryContext } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
+import type { StoryContext, WebComponentsFramework } from '..';
 import { sourceDecorator } from './sourceDecorator';

 jest.mock('@storybook/addons');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
-const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
+const mockedUseEffect = useEffect as jest.Mock;

 expect.addSnapshotSerializer({
  print: (val: any) => val,
@ -16,16 +16,22 @@ expect.addSnapshotSerializer({

 const tick = () => new Promise((r) => setTimeout(r, 0));

-const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
-  id: `lit-test--${name}`,
-  kind: 'js-text',
-  name,
-  parameters,
-  args,
-  argTypes: {},
-  globals: {},
-  ...extra,
-});
+const makeContext = (
+  name: string,
+  parameters: any,
+  args: any,
+  extra?: Partial<StoryContext<WebComponentsFramework>>
+) =>
+  ({
+    id: `lit-test--${name}`,
+    kind: 'js-text',
+    name,
+    parameters,
+    args,
+    argTypes: {},
+    globals: {},
+    ...extra,
+  } as StoryContext<WebComponentsFramework>);

 describe('sourceDecorator', () => {
  let mockChannel: { on: jest.Mock; emit?: jest.Mock };
@ -106,4 +112,23 @@ describe('sourceDecorator', () => {
    sourceDecorator(storyFn, context);
    expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
  });
+
+  it('should clean lit expression comments', async () => {
+    const storyFn = (args: any) => html`<div>${args.slot}</div>`;
+    const context = makeContext(
+      'args',
+      { __isArgsStory: true },
+      { slot: 'some content' },
+      { originalStoryFn: storyFn }
+    );
+    // bind args to storyFn, as it's done in Storybook
+    const boundStoryFn = storyFn.bind(null, context.args);
+    sourceDecorator(boundStoryFn, context);
+    await tick();
+    expect(mockChannel.emit).toHaveBeenCalledWith(
+      SNIPPET_RENDERED,
+      'lit-test--args',
+      '<div>some content</div>'
+    );
+  });
 });
--- a/app/web-components/src/client/docs/sourceDecorator.ts
+++ b/app/web-components/src/client/docs/sourceDecorator.ts
@ -6,6 +6,9 @@ import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';

 import type { WebComponentsFramework } from '..';

+// Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
+const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
+
 function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
  const sourceParams = context?.parameters.docs?.source;
  const isArgsStory = context?.parameters.__isArgsStory;
@ -44,7 +47,10 @@ export function sourceDecorator(
  if (!skipSourceRender(context)) {
    const container = window.document.createElement('div');
    render(story, container);
-    source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
+    source = applyTransformSource(
+      container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''),
+      context
+    );
  }

  return story;
--- a/docs/addons/install-addons.md
+++ b/docs/addons/install-addons.md
@ -2,7 +2,7 @@
 title: Install addons
 ---

-Storybook has [hundreds of reusable addons](/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
+Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.

 ### Using addons

--- a/docs/addons/introduction.md
+++ b/docs/addons/introduction.md
@ -5,7 +5,7 @@ title: 'Introduction to addons'
 Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: [documentation](../writing-docs/introduction.md), [accessibility testing](https://github.com/storybookjs/storybook/tree/master/addons/a11y), [interactive controls](../essentials/controls.md), among others.
 The [addon API](./addons-api.md) makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlock time-saving workflows.

-Browse our [addon catalog](/addons) to install an existing addon or as inspiration for your own addon.
+Browse our [addon catalog](https://storybook.js.org/addons) to install an existing addon or as inspiration for your own addon.

 ## Storybook basics

--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@ -50,14 +50,23 @@ Once you've gone through the prompts, your `package.json` should look like:

 ### Build system

-We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
+We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-write-addon-install-dependencies.yarn.js.mdx',
+    'common/storybook-write-addon-install-dependencies.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Initialize a local Storybook instance to allow you to test your addon.

 ```shell
-# Installs React and Babel CLI
-yarn add react react-dom @babel/cli
-
-# Adds Storybook:
-npx sb init
+npx storybook init
 ```

 <div class="aside">
@ -246,4 +255,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j

 ### Addon kit

-To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
+To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@ -5,7 +5,9 @@ title: 'CLI options'
 Storybook comes with two CLI utilities: `start-storybook` and `build-storybook`.

 <div class="aside">
+  
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+  
 </div>

 Pass these commands the following options to alter Storybook's behavior.
--- a/docs/builders/overview.md
+++ b/docs/builders/overview.md
@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b

 ## CLI basics

-Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
+Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.

 Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:

 ```shell
-npx sb init --builder <webpack4 | webpack5 | vite>
+npx storybook init --builder <webpack4 | webpack5 | vite>
 ```

 ## Manual setup
--- a/docs/builders/vite.md
+++ b/docs/builders/vite.md
@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v

 ## Setup

-If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.

 Run the following command to install the builder.

@ -96,41 +96,27 @@ If you need, you can also configure Storybook's Vite builder using TypeScript. R

 ## Troubleshooting

-### Prebundle errors
-
-Vite automatically restarts and begins the prebundling process if it detects a new dependency. This pattern breaks with Storybook and throws confusing error messages. If you see the following message in your terminal:
-
-```shell
-[vite] new dependencies found:
-```
-
-Update your `viteFinal` configuration and include the new dependencies as follows:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-vite-builder-error-optimized.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ### Working directory not being detected

 By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory
 If you need to override it, you can use the `viteFinal` function and adjust it.

-### HMR seems flaky
-
-Saving a component story does not initiate a hot module replacement. Instead, a complete reload happens. You can update your component file or save it to see the changes in effect.
-
 ### ArgTypes are not generated automatically

-Storybook’s [automatic argType inference](https://storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference) is currently only available for React TypeScript projects. The builder will include additional framework support in future releases.
+Currently, [automatic argType inference](../api/argtypes.md#automatic-argtype-inference) is only available for React and Vue3. With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-vite-builder-react-docgen.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

 #### Learn more about builders

 - Vite builder for bundling with Vite
 - [Webpack builder](./webpack.md) for bundling with Webpack
- [Builder API](./builder-api.md) for building a Storybook builder
+- [Builder API](./builder-api.md) for building a Storybook builder
--- a/docs/builders/webpack.md
+++ b/docs/builders/webpack.md
@ -40,16 +40,34 @@ You can import `.json` files and have them expanded to a JavaScript object:

 <!-- prettier-ignore-end -->

-If you want to know the exact details of the Webpack config, the best way is to run either of the following:
+If you want to know the exact details of the Webpack config, the best way is to run either of the following commands:

-```shell
+For development mode:

-## Development mode
-yarn start-storybook --debug-webpack
+<!-- prettier-ignore-start -->

-## Production mode
-yarn build-storybook --debug-webpack
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-debug-webpack-dev.yarn.js.mdx',
+    'common/storybook-debug-webpack-dev.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+For production mode:
+
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-debug-webpack-prod.yarn.js.mdx',
+    'common/storybook-debug-webpack-prod.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

 ### Code splitting

@ -193,11 +211,11 @@ When working with TypeScript projects, the default Webpack configuration may fai
 <!-- prettier-ignore-end -->

 <div class="aside">
-💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
+💡 Learn more about Storybook's <a href="../configure/typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
 </div>

 #### Learn more about builders

 - [Vite builder](./vite.md) for bundling with Vite
- [Webpack builder](./webpack.md) for bundling with Webpack
- [Builder API](./builder-api.md) for building a Storybook builder
+- Webpack builder for bundling with Webpack
+- [Builder API](./builder-api.md) for building a Storybook builder
--- a/docs/configure/babel.md
+++ b/docs/configure/babel.md
@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md]
 If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:

 ```sh
-npx sb@next babelrc
+npx storybook@next babelrc
 ```

 Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:
--- a/docs/configure/css-troubleshooting/angular.mdx
+++ b/docs/configure/css-troubleshooting/angular.mdx
@ -42,7 +42,11 @@ Additionally, if you need Storybook specific styles that are separate from your
 ```

 ### Nx with Angular 13
-If you're working with Storybook and [NX libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., `project.json`) and provide the application's styles. For example: 
+
+If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
+you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
+
+For earlier Nx versions (prior to `14.1.8`), your configuration would look like this:

 ```json
 "build-storybook": {
@ -56,11 +60,35 @@ If you're working with Storybook and [NX libraries](https://nx.dev/structure/lib
      },
      "projectBuildConfig": "example-lib:build-storybook",
      "styles": ["apps/example-app/src/styles.scss"]
+    }
+  }
+```
+
+Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
+
+```json
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
+      },
    },
-    "configurations": {
-      "ci": {
-        "quiet": true
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputDir": "dist/storybook/example-lib",
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
+        "styles": [".storybook/custom-styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": [
+            "libs/design-system/src/lib"
+          ]
+        }
      }
    }
-  }  
 ```
+
+When Nx runs, it will load Storybook's configuration and styling based on the `storybook`'s [`browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava
 STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
 ```

+<div class="aside">
+
+ 💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files. 
+
+</div>
+
 Then we can access these environment variables anywhere inside our preview JavaScript code like below:

 <!-- prettier-ignore-start -->
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as

 - `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
 - `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
+- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
 - `babel` - custom [babel configuration](./babel.md).
 - `framework` - framework specific configurations to help the loading and building process.

@ -45,11 +45,12 @@ Additionally, you can also provide additional feature flags to your Storybook co
 | Configuration element | Description                                                                                                                                                                                                                          |
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up. <br/> `features: { storyStoreV7: true }`                                                                                     |
-| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }`                                                                           |
+| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }`                                                                                                          |
 | `emotionAlias`        | Provides backwards compatibility for Emotion. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility) for context.<br/> `features: { emotionAlias: false }` |
 | `babelModeV7`         | Enables the new [Babel configuration](./babel.md#v7-mode) mode for Storybook. <br/> `features: { babelModeV7: true }`                                                                                                                |
 | `postcss`             | Disables the implicit PostCSS warning. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader) for context. <br/> `features: { postcss: false }`       |
 | `modernInlineRender`  | Enables Storybook's modern inline rendering mode. <br/> `features: { modernInlineRender: false }`                                                                                                                                    |
+| `previewMdx2`         | Enables experimental support for [MDX 2](../writing-docs/mdx.md#mdx-2).<br/>`features: { previewMdx2: true }`                                                                                                                        |

 ## Configure story loading

@ -177,14 +178,15 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
 | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                            |
 | `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
-| `addons`              | Sets the list of [addons](/addons) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                                            |
+| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                   |
 | `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                      |
 | `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                         |
-| `core`                | Sets Storybook's Webpack configuration <br/> `core:{ builder: 'webpack5'}`                                                                                                       |
-| `features`            | Enables Storybook's additional features <br/>. See table below for a list of available features `features: { storyStoreV7: true }`                                               |
+| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                   |
+| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                |
 | `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                      |
-| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                                      |
-| `webpackFinal`        | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                               |
+| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                              |
+| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                     |
+| `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |

 ## Configure story rendering

--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@ -2,11 +2,11 @@
 title: 'Sidebar & URLS'
 ---

-Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
+Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file, and Storybook will group the stories into groups based on common prefixes:

 ![Storybook sidebar anatomy](./sidebar-anatomy.jpg)

-We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js` name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
+We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js`, name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.

 ## Roots

@ -26,49 +26,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can

 <!-- prettier-ignore-end -->

-## Automatically generate titles
-
-With CSF 3.0 files, you can choose to leave out a title and let it be inferred from the story's path on disk instead:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/component-story-auto-title.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-This is controlled by the way your stories are configured:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/component-story-configuration.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-Given this configuration, the stories file `../src/components/MyComponent.stories.tsx` will get the title `components/MyComponent`.
-
-You can further customize the generated title by modifying the stories configuration.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/component-story-configuration-custom.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-This configuration would match a custom file pattern, and add a custom prefix of Foo to each generated title.
-
-## Permalinking to stories
+## Permalink to stories

 By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).

@ -86,7 +44,7 @@ Consider the following story:

 Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.

-It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
+It is possible to manually set the story's id, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:

 <!-- prettier-ignore-start -->

@ -98,4 +56,70 @@ It is possible to manually set the id of a story, which is helpful if you want t

 <!-- prettier-ignore-end -->

-Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
+Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
+
+## CSF 3.0 auto-titles
+
+Storybook 6.4 introduced [CSF 3.0](https://storybook.js.org/blog/component-story-format-3-0/) as an experimental feature, allowing you to write stories more compactly. Suppose you're already using this format to write your stories. In that case, you can omit the `title` element from the default export and allow Storybook automatically infer it based on the file's physical location. For example, given the following configuration and story:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-configuration-src-dir.main-js.js.mdx',
+    'common/component-story-auto-title.csf3-story.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads, the story can show up in the sidebar as `components/My Component`.
+
+### Auto-title filename case
+
+Starting with Storybook 6.5, story titles generated automatically no longer rely on Lodash's [startCase](https://lodash.com/docs/#startCase).
+Instead, the file name casing is preserved, allowing additional control over the story title. For example, `components/My Component` will be defined as `components/MyComponent`.
+
+If you need, you can revert to the previous pattern by adding the following configuration:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-manager-render-label-stories.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### Auto-title redundant filenames
+
+In addition to improvements to the story file name casing, a new heuristic was introduced, removing redundant names in case the filename has the same name as the directory name, or if it's called `index.stories.js|ts`. For example, before `components/MyComponent/MyComponent.stories.js` was defined as `Components/MyComponent/MyComponent` in the sidebar. Now it will be defined as `Components/MyComponent`.
+
+If you need to preserve the naming scheme, you can add the `title` element to the default export. For example:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-csf-3-auto-title-redundant.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### Auto-title prefixes
+
+Additionally, if you customize your Storybook to load your stories based on a [configuration object](./overview.md#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-auto-title-custom.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook generates the titles for all matching stories, they'll retain the `Custom` prefix.
--- a/docs/configure/story-rendering.md
+++ b/docs/configure/story-rendering.md
@ -2,7 +2,7 @@
 title: 'Story rendering'
 ---

-In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
+In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.

 ## Adding to &#60;head&#62;

--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in

 ### Importing CSS files

-If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
+If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.

 <FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />

@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove

 ### Adding webfonts

-If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
+If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
--- a/docs/configure/telemetry.md
+++ b/docs/configure/telemetry.md
@ -34,8 +34,10 @@ Specifically, we track the following information in our telemetry events:
  - Supported view layers (e.g., React, Vue, Angular, Svelte).
  - Builder (e.g., Webpack4, Webpack5, Vite).
  - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
-  - [Addons](/addons) (e.g., [Essentials](../essentials/introduction), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
+  - [Addons](https://storybook.js.org/addons/) (e.g., [Essentials](../essentials/introduction.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
  - [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
+- Package manager information (e.g., `npm`, `yarn`).
+- Monorepo information (e.g., [NX](https://nx.dev/), [Turborepo](https://turborepo.org/)).
 - Whether the command was invoked on CI or not.

 Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
@ -83,6 +85,11 @@ Will generate the following output:
      "packageName": "react-scripts",
      "version": "4.0.3"
    },
+    "packageManager": {
+      "name": "yarn",
+      "version": "3.1.1",
+    },
+    "monorepo": "Nx",
    "features": {
      "buildStoriesJson": true
    },
--- a/docs/configure/upgrading.md
+++ b/docs/configure/upgrading.md
@ -6,12 +6,12 @@ The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a

 ## Upgrade script

-The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
+The most common upgrade is Storybook itself. [Storybook releases](https://storybook.js.org/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.

 To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:

 ```sh
-npx sb upgrade
+npx storybook upgrade
 ```

 This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
@ -27,10 +27,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
 Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:

 ```
-npx sb@next automigrate
+npx storybook@next automigrate
 ```

-It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
+It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.

 ## Prereleases

@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis
 To upgrade to the latest pre-release:

 ```sh
-npx sb@next upgrade --prerelease
+npx storybook@next upgrade --prerelease
 ```

 If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.

 <div class="aside">
+
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
 </div>
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@ -6,18 +6,21 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com

 ## Initial setup

-First [fork](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook repository then clone and build your fork locally. Run the following commands:
+Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally. 

 ```shell
 git clone https://github.com/your-username/storybook.git
-cd storybook
-yarn
-yarn bootstrap --core
+```
+
+Navigate to the `storybook` directory and install the required dependencies with the following commands:
+    
+```shell
+yarn && yarn bootstrap --core
 ```

 ## Run tests & examples

-Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
+Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.

 Run the following command to execute the tests:

@ -28,8 +31,7 @@ yarn test
 Once the tests finish, check if the examples are working with the following commands:

 ```shell
-cd examples/cra-ts-essentials
-yarn storybook
+cd examples/cra-ts-essentials && yarn storybook
 ```

 <div class="aside">
@ -106,7 +108,7 @@ Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](http

 Before submitting your contribution, run the test suite one last time with:

-```sh
+```shell
 yarn test
 ```

@ -133,20 +135,20 @@ We encourage bug reports to include reproductions. In the same way that it's pos

 To do so, run the following command in the root of the monorepo:

-```sh
-npx sb@next link https://github.com/your-username/your-project.git
+```shell
+npx storybook@next link https://github.com/your-username/your-project.git
 ```

 This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing).

 If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:

-```sh
-npx sb@next link --local /path/to/local-repro-directory
+```shell
+npx storybook@next link --local /path/to/local-repro-directory
 ```

 <div class="aside">
-💡  The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
+💡  The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
 </div>

 ## Troubleshooting
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@ -21,7 +21,7 @@ Make sure you have:
 First, open a terminal and run the following command:

 ```shell
-npx sb@next repro
+npx storybook@next repro
 ```

 <div class="aside">
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process.

 Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.

-Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands:
+Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally. 

 ```shell
 git clone https://github.com/your-username/frontpage.git
-cd frontpage
+```
+
+Navigate to the `frontpage` directory and install the required dependencies with the following command:
+
+```shell
 yarn
 ```

--- a/docs/essentials/interactions.md
+++ b/docs/essentials/interactions.md
@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing

 Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.

-```shell
-# With npm
-npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev
+<!-- prettier-ignore-start -->

-# With yarn
-yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-interactions-addon-full-install.yarn.js.mdx',
+    'common/storybook-addon-interactions-addon-full-install.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

 Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:

--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@ -2,7 +2,7 @@
 title: 'Essential addons'
 ---

-A major strength of Storybook are [addons](/addons/) that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.
+A major strength of Storybook are [addons](https://storybook.js.org/addons) that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.

 - [Docs](../writing-docs/introduction.md)
 - [Controls](./controls.md)
@ -14,17 +14,20 @@ A major strength of Storybook are [addons](/addons/) that extend Storybook’s U

 ### Installation

-If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
+If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.

 If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:

-```shell
-#With npm
-npm install -D @storybook/addon-essentials
+<!-- prettier-ignore-start -->

-#With yarn
-yarn add -D @storybook/addon-essentials
-```
+<CodeSnippets
+  paths={[
+    'common/storybook-addon-essentials-install.yarn.js.mdx',
+    'common/storybook-addon-essentials-install.npm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

 Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.

@ -44,14 +47,16 @@ Essentials is "zero-config”. It comes with a recommended configuration out of

 If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:

-```shell
-#With npm
-npm install -D @storybook/addon-actions
+<!-- prettier-ignore-start -->

+<CodeSnippets
+  paths={[
+    'common/storybook-addon-actions-install.yarn.js.mdx',
+    'common/storybook-addon-actions-install.npm.js.mdx',
+  ]}
+/>

-#With yarn
-yarn add -D @storybook/addon-actions
-```
+<!-- prettier-ignore-end -->

 <!-- prettier-ignore-start -->

--- a/docs/faq.md
+++ b/docs/faq.md
@ -145,72 +145,70 @@ With the release of version 6.0, we updated our documentation as well. That does

 We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.

-
-| Section          | Page                                      | Current Location                                                                  | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
-|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Get started      | Install                                   | [See current documentation](./get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
-|                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                       | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
-|                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                      | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
-|                  | Setup                                     | [See current documentation](./get-started/setup.md)                               | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
-| Write stories    | Introduction                              | [See current documentation](./writing-stories/introduction.md)                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Parameters                                | [See current documentation](./writing-stories/parameters.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters)                                                                                                                   | Non existing feature or undocumented                                                                                                                     |
-|                  | Decorators                                | [See current documentation](./writing-stories/decorators.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators)                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
-|                  | Naming components and hierarchy           | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Build pages and screens                   | [See current documentation](./writing-stories/build-pages-with-storybook.md)      | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories for multiple components           | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Write docs       | DocsPage                                  | [See current documentation](./writing-docs/docs-page.md)                          | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
-|                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Story                          | [See current documentation](./writing-docs/doc-block-story.md)                    | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Typeset                        | [See current documentation](./writing-docs/doc-block-typeset.md)                  | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Preview and build docs                    | [See current documentation](./writing-docs/build-documentation.md)                | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Testing          | Visual tests                              | [See current documentation](./writing-tests/visual-testing.md)                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing)                 |
-|                  | Accessibility tests                       | [See current documentation](./writing-tests/accessibility-testing.md)             | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Interaction tests                         | [See current documentation](./writing-tests/interaction-testing.md)               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
-|                  | Snapshot tests                            | [See current documentation](./writing-tests/snapshot-testing.md)                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing)                       |
-|                  | Import stories in tests                   | [See current documentation](./writing-tests/importing-stories-in-tests.md)        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
-| Sharing          | Publish Storybook                         | [See current documentation](./sharing/publish-storybook.md)                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook)                       |
-|                  | Embed                                     | [See current documentation](./sharing/embed.md)                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Composition                               | [See current documentation](./sharing/storybook-composition.md)                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Package Composition                       | [See current documentation](./sharing/package-composition.md)                     | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Essential addons | Controls                                  | [See current documentation](./essentials/controls.md)                             | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs)                                                                                                                     | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs)         |
-|                  | Actions                                   | [See current documentation](./essentials/actions.md)                              | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions)                                                                                                                                                        | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions)                                            |
-|                  | Viewport                                  | [See current documentation](./essentials/viewport.md)                             | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport)                                                                                                                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport)                                           |
-|                  | Backgrounds                               | [See current documentation](./essentials/backgrounds.md)                          | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds)                                                                                                                                                    | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds)                                        |
-|                  | Toolbars and globals                      | [See current documentation](./essentials/toolbars-and-globals.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide)                                                                                                                                         | Non existing feature or undocumented                                                                                                                     |
-| Configure        | Overview                                  | [See current documentation](./configure/overview.md)                              | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Integration/Babel                         | [See current documentation](./configure/babel.md)                                 | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config)                                                                                                             | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
-|                  | Integration/Typescript                    | [See current documentation](./configure/typescript.md)                            | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config)                 |
-|                  | Integration/Styling and CSS               | [See current documentation](./configure/styling-and-css.md)                       | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
-|                  | Integration/Images and assets             | [See current documentation](./configure/images-and-assets.md)                     | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
-|                  | Story rendering                           | [See current documentation](./configure/story-rendering.md)                       | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags)         |
-|                  | Story Layout                              | [See current documentation](./configure/story-layout.md)                          | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | User Interface/Features and behavior      | [See current documentation](./configure/features-and-behavior.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
-|                  | User Interface/Theming                    | [See current documentation](./configure/theming.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming)                           |
-|                  | User Interface/Sidebar & URLS             | [See current documentation](./configure/sidebar-and-urls.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
-|                  | Environment variables                     | [See current documentation](./configure/environment-variables.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars)                          |
-| Builders         | Introduction                              | [See current documentation](./builders/overview.md)                               | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Vite                                      | [See current documentation](./builders/vite.md)                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Webpack                                   | [See current documentation](./builders/webpack.md)                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md)                                                                                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md)    |
-|                  | Builder API                               | [See current documentation](./builders/builder-api.md)                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Addons           | Introduction                              | [See current documentation](./addons/introduction.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Install addons                            | [See current documentation](./addons/install-addons.md)                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/)                                                                                                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/)                             |
-|                  | Writing Addons                            | [See current documentation](./addons/writing-addons.md)                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Writing Presets                           | [See current documentation](./addons/writing-presets.md)                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets)                                                                                                                                      | Non existing feature or undocumented                                                                                                                     |
-|                  | Addons Knowledge Base                     | [See current documentation](./addons/addon-knowledge-base.md)                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Types of addons                           | [See current documentation](./addons/addon-types.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Addons API                                | [See current documentation](./addons/addons-api.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
-| API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
-|                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | CLI options                               | [See current documentation](./api/cli-options.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
-
+| Section          | Page                                      | Current Location                                                                                           | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
+| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Get started      | Install                                   | [See current documentation](./get-started/install.md)                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
+|                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                                                | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
+|                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                                               | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
+|                  | Setup                                     | [See current documentation](./get-started/setup.md)                                                        | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
+| Write stories    | Introduction                              | [See current documentation](./writing-stories/introduction.md)                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Parameters                                | [See current documentation](./writing-stories/parameters.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters)                                                                                                                   | Non existing feature or undocumented                                                                                                                     |
+|                  | Decorators                                | [See current documentation](./writing-stories/decorators.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators)                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
+|                  | Naming components and hierarchy           | [See current documentation](./writing-stories/naming-components-and-hierarchy.md)                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Build pages and screens                   | [See current documentation](./writing-stories/build-pages-with-storybook.md)                               | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories for multiple components           | [See current documentation](./writing-stories/stories-for-multiple-components.md)                          | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Write docs       | DocsPage                                  | [See current documentation](./writing-docs/docs-page.md)                                                   | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
+|                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                                         | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                                         | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                                            | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)                                      | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)                                       | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)                                       | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                                            | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Story                          | [See current documentation](./writing-docs/doc-block-story.md)                                             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Typeset                        | [See current documentation](./writing-docs/doc-block-typeset.md)                                           | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Preview and build docs                    | [See current documentation](./writing-docs/build-documentation.md)                                         | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Testing          | Visual tests                              | [See current documentation](./writing-tests/visual-testing.md)                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing)                 |
+|                  | Accessibility tests                       | [See current documentation](./writing-tests/accessibility-testing.md)                                      | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Interaction tests                         | [See current documentation](./writing-tests/interaction-testing.md)                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
+|                  | Snapshot tests                            | [See current documentation](./writing-tests/snapshot-testing.md)                                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing)                       |
+|                  | Import stories in tests                   | [See current documentation](./writing-tests/importing-stories-in-tests.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
+| Sharing          | Publish Storybook                         | [See current documentation](./sharing/publish-storybook.md)                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook)                       |
+|                  | Embed                                     | [See current documentation](./sharing/embed.md)                                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Composition                               | [See current documentation](./sharing/storybook-composition.md)                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Package Composition                       | [See current documentation](./sharing/package-composition.md)                                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Essential addons | Controls                                  | [See current documentation](./essentials/controls.md)                                                      | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs)                                                                                                                     | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs)         |
+|                  | Actions                                   | [See current documentation](./essentials/actions.md)                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions)                                                                                                                                                        | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions)                                            |
+|                  | Viewport                                  | [See current documentation](./essentials/viewport.md)                                                      | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport)                                                                                                                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport)                                           |
+|                  | Backgrounds                               | [See current documentation](./essentials/backgrounds.md)                                                   | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds)                                                                                                                                                    | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds)                                        |
+|                  | Toolbars and globals                      | [See current documentation](./essentials/toolbars-and-globals.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide)                                                                                                                                         | Non existing feature or undocumented                                                                                                                     |
+| Configure        | Overview                                  | [See current documentation](./configure/overview.md)                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Integration/Babel                         | [See current documentation](./configure/babel.md)                                                          | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config)                                                                                                             | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
+|                  | Integration/Typescript                    | [See current documentation](./configure/typescript.md)                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config)                 |
+|                  | Integration/Styling and CSS               | [See current documentation](./configure/styling-and-css.md)                                                | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
+|                  | Integration/Images and assets             | [See current documentation](./configure/images-and-assets.md)                                              | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
+|                  | Story rendering                           | [See current documentation](./configure/story-rendering.md)                                                | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags)         |
+|                  | Story Layout                              | [See current documentation](./configure/story-layout.md)                                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | User Interface/Features and behavior      | [See current documentation](./configure/features-and-behavior.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
+|                  | User Interface/Theming                    | [See current documentation](./configure/theming.md)                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming)                           |
+|                  | User Interface/Sidebar & URLS             | [See current documentation](./configure/sidebar-and-urls.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
+|                  | Environment variables                     | [See current documentation](./configure/environment-variables.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars)                          |
+| Builders         | Introduction                              | [See current documentation](./builders/overview.md)                                                        | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Vite                                      | [See current documentation](./builders/vite.md)                                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Webpack                                   | [See current documentation](./builders/webpack.md)                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md)                                                                                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md)    |
+|                  | Builder API                               | [See current documentation](./builders/builder-api.md)                                                     | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Addons           | Introduction                              | [See current documentation](./addons/introduction.md)                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Install addons                            | [See current documentation](./addons/install-addons.md)                                                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/)                                                                                                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/)                             |
+|                  | Writing Addons                            | [See current documentation](./addons/writing-addons.md)                                                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Writing Presets                           | [See current documentation](./addons/writing-presets.md)                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets)                                                                                                                                      | Non existing feature or undocumented                                                                                                                     |
+|                  | Addons Knowledge Base                     | [See current documentation](./addons/addon-knowledge-base.md)                                              | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Types of addons                           | [See current documentation](./addons/addon-types.md)                                                       | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Addons API                                | [See current documentation](./addons/addons-api.md)                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
+| API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
+|                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                                                       | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | CLI options                               | [See current documentation](./api/cli-options.md)                                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |

 <div class="aside">
 With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@ -279,12 +277,81 @@ Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs

 If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).

-See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
+See our documentation on how to customize the [Storyshots configuration](./writing-tests/snapshot-testing.md).

 ### Why are my MDX stories not working in IE11?

 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.

+### Why aren't my code blocks highlighted with Storybook MDX
+
+Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/my-component-with-custom-syntax-highlight.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+💡 Check <code>react-syntax-highlighter</code>'s <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter">documentation</a> for a list of available languages.
+</div>
+
+Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
+
+### Why aren't my MDX 2 stories working in Storybook?
+
+MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block:
+
+```
+<style>{`
+  .class1 {
+    ...
+  }
+
+  .class2 {
+    ...
+  }
+`}</style>
+
+```
+
+You'll need to update it to make it compatible with MDX 2.
+
+```
+<style>
+  {`
+    .class1 {
+      ...
+    }
+
+    .class2 {
+      ...
+    }
+  `}
+</style>
+```
+
+See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
+
+### Why can't I import my own stories into MDX 2?
+
+This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
+
+```md
+<!-- Button.stories.mdx -->
+
+import { Story } from '@storybook/addon-docs';
+
+import * as stories from './Button.stories.jsx';
+
+<Story name="Basic" story={stories.Basic} />
+```
+
 ### Why are my mocked GraphQL queries failing with Storybook's MSW addon?

 If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
@ -310,7 +377,7 @@ export default {
  plugins: [
    // Other plugins

-    // Configures the replace plugin to allow Grapqhl Queries to work properly
+    // Configures the replace plugin to allow GraphQL Queries to work properly
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
@ -327,26 +394,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t

 No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.

-### Why aren't my code blocks highlighted with Storybook MDX
-
-Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-   'common/my-component-with-custom-syntax-highlight.mdx.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-<div class="aside">
-💡 Check <code>react-syntax-highlighter</code>'s <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter">documentation</a> for a list of available languages.
-</div>
-
-Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
-
 ### How can my code detect if it is running in Storybook?

 You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@ -381,7 +428,7 @@ Although valid, it introduces additional boilerplate code to the story definitio

 ## Why is Storybook's source loader returning undefined with curried functions?

-This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
+This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce.md) so that it can be triaged and fixed in future releases.

 ## Why are my args no longer displaying the default values?

@ -418,3 +465,15 @@ export default {
  },
 };
 ```
+
+### Why isn't Storybook's test runner working?
+
+There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
+
+### How does Storybook handles enviroment variables?
+
+Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
+
+To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
+
+Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@ -117,27 +117,27 @@ module.exports = {
        {
          name: 'Source',
          unsupported: [],
-          path: 'writing-docs/doc-blocks#source',
+          path: 'writing-docs/doc-block-source',
        },
        {
          name: 'Dynamic source',
          supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
-          path: 'writing-docs/doc-blocks#source',
+          path: 'writing-docs/doc-block-source',
        },
        {
          name: 'Args Table',
          supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
-          path: 'writing-docs/doc-blocks#argstable',
+          path: 'writing-docs/doc-block-argstable',
        },
        {
          name: 'Description',
          supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
-          path: 'writing-docs/doc-blocks#description',
+          path: 'writing-docs/doc-block-description',
        },
        {
          name: 'Inline stories',
          supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
-          path: 'writing-docs/doc-blocks#inline-rendering',
+          path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
        },
      ],
    },
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@ -21,7 +21,7 @@ title: 'Install Storybook'

 <details>

-<summary><code>sb init</code> is not made for empty projects</summary>
+<summary><code>storybook init</code> is not made for empty projects</summary>

 Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework, including:

@ -90,7 +90,9 @@ Below are some of the most common installation issues and instructions on how to
 <!-- prettier-ignore-end -->

 <div class="aside">
+
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
+
 </div>

 If all else fails, try asking for [help](https://storybook.js.org/support)
--- a/docs/get-started/installation-command-section/angular.mdx
+++ b/docs/get-started/installation-command-section/angular.mdx
@ -2,7 +2,7 @@

 ```shell
 # Add Storybook:
-npx sb init
+npx storybook init
 ```

 - Update your `angular.json` file to include Storybook's custom builder:
--- a/docs/get-started/installation-command-section/ember.mdx
+++ b/docs/get-started/installation-command-section/ember.mdx
@ -2,7 +2,7 @@ Use the Storybook CLI to install it with a couple of commands. Run this inside y

 ```shell
 # Add Storybook:
-npx sb init
+npx storybook init

 # Add Ember storybook adapter
 ember install @storybook/ember-cli-storybook
--- a/docs/get-started/installation-command-section/html.mdx
+++ b/docs/get-started/installation-command-section/html.mdx
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e

 ```shell
 # Add Storybook:
-npx sb init --type html
+npx storybook init --type html
 ```

 If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
--- a/docs/get-started/installation-command-section/preact.mdx
+++ b/docs/get-started/installation-command-section/preact.mdx
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e

 ```shell
 # Add Storybook:
-npx sb init
+npx storybook init
 ```

 If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
--- a/docs/get-started/installation-command-section/react.mdx
+++ b/docs/get-started/installation-command-section/react.mdx
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e

 ```shell
 # Add Storybook:
-npx sb init
+npx storybook init
 ```

 If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
--- a/Show More
+++ b/Show More